Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • Artikel
  • »
  • Mengirim Dan Menangkap Data Input Type Password Pada Server

Mengirim Dan Menangkap Data Input Type Password Pada Server

previous Previous Page

Input type password merupakan jenis elemen input pada HTML yang berfungsi sebagai masukkan jenis password atau kata sandi. Input jenis password ini disajikan dalam bentuk plain text untuk melengkapi keamanan pengguna saat menginputkan kata sandi mereka. Input jenis password ditampilkan dalam bentuk symbol asterik ("*") ataupun dot ("●") pada layar agar password tersebut tidak dapat dibaca secara normal. Jenis tampilan symbol tergantung pada user agent dan operating sistem yang digunakan.

Perlakuan input type password sebenarnya hampir sama dengan elemen input type lainnya pada HTML. Walaupun tampilan input type password digantikan dengan tanda symbol, namun sebenarnya isinya masih dalam bentuk plain text. Dan jika datanya dikirimkan ke server, data yang masuk tersebut tidak dalam bentuk symbol namun tetap dalam bentuk plain text (text murni).

Perlakuan data dalam bentuk password saat berada di server sedikit berbeda dengan data yang lainnya. Karena datanya merupakan data yang bersifat sensitif, data tersebut harus disimpan dalam keadaan terenkripsi sehingga tidak dapat terbaca sebagai teks normal.

Mengirim Data Pada Input Type Password Ke Server

Data password biasanya merupakan rangkaian teks yang berisi karakter huruf, angka atau kombinasi beberapa symbol. Data password harus dalam keadaan terisi sebelum dikirimkan ke server. Jumlah karakter pada password dapat dibatasi dengan memberikan range karakter maksimal misalnya 6 karakter.

Pengguna kadang mengalami kesulitan dalam mengingat teks yang sudah mereka ketik pada bilah input password. Untuk mencegah salah ketik karakter pada bilah password, Anda dapat menambahkan tombol bantuan seperti Show password agar teks tersebut dapat terbaca oleh pengguna secara sementara. Pengguna dapat merubahnya kembali ke dalam keadaan seperti semula dengan Hide password.

Berikut tampilan halaman index.php yang berisi input type password :

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Send And Retrieve Data From Input Type Password To Server</title>
<link href="libs/css/bootstrap.3.3.6.min.css" rel="stylesheet">
<script src="libs/js/jquery-1.10.2.min.js"></script>
<style>
body{
    padding:10px;
}
form{
    text-align:center;
    border:solid 2px teal;
    position:relative;
    left:10%;
    width:75%;
    margin-top:30px;
    padding:20px;
}
#show_pass{
    text-decoration:none;
    color:blue;
    cursor:pointer;
}
#show_pass:hover{
    text-decoration:underline;
    color:teal;
}
</style>
</head>
<body>
   <h2>Send And Retrieve Data From Input Type Password To Server</h2>
   <form action="page2.php" method="post">
   <p>
   <label for="frm_password">Enter Your Password :</label>
   <input type="password" id="password" name="password" maxlength=6 minlength=6 required>
   </p>
   <p id="show_pass">Show Password</p>
   <p><button type="submit" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> Send To Server</button></p>
   </form>
<script>
   $(document).ready(function(){
     $("#btn_submit").click(function(){
        var password = $('#password').val();
        console.log(password);
        if(password==""){
          return false;
        }
     });
     var show=true;
     $("#show_pass").click(function(){
        if(show){
          $('#password').attr("type","text");
          $('#show_pass').text("Hide password");
        }else{
          $('#password').attr("type","password");
          $('#show_pass').text("Show password");
        }
        show=!show;   
     });
     
   });
</script>
</body>
</html>

Untuk mencegah bilah input terkirim dalam keadaan kosong dapat menggunakan script jquery dengan return false saat kondisi variable password="". Anda juga dapat mencegahnya dengan menambahkan attribut required pada input type password dan HTML akan menahan formulir tersebut terkirim saat bilah password dalam kondisi kosong.

Data yang dikirim akan ditujukan pada halaman page2.php dengan metode post.

Tampilan saat pengguna memuat halaman index.php :

mengirim data input type password ke server

Tampilan saat pengguna mengklik Show password :

mengirim data input type password ke server

Menangkap Data Input Type Password Pada Server

Data yang dikirimkan pada halaman index.php merupakan data password. Data tersebut berbentuk plain teks dan dapat dibaca secara normal pada sisi server. Data password jika disimpan pada database biasanya akan diubah terlebih dulu dalam bentuk teks yang tersandikan (terenkripsi) sehingga data tersebut tidak dapat terbaca secara normal meskipun oleh admin sistem tersebut.

Anda dapat menggunakan fungsi enkripsi yang disediakan PHP seperti md5(), base64() dan lainnya untuk menyandikan data password yang dikirim oleh pengguna. Silahkan kunjungi Cara Enkripsi Password Dengan password_hash dan password_verify Pada PHP untuk enkripsi password yang lebih aman.

Berikut halaman page2.php untuk menangkap data password yang dikirim oleh halaman index.php :

PHP

1
2
3
4
5
6
7
<?php
$password=trim($_POST['password']);
if(!empty($password)){
   echo "<p>The password is : <b>" . $password . "</b></p>";
   echo "<p>The password in md5 encyption is : <b>" . md5($password) . "</b></p>";
}
?>
mengirim data input type password ke server

Demikian tutorial bagaimana cara mengirim dan menangkap data input type password pada server, semoga bermanfaat .

   0   191

Kategori : tag iconhtml - tag iconjquery - tag iconphp

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.
close

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


Visitor Live Chat

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

 _Dicky (06 Mar 2021 at 03:24 pm)

Said : Oops, It's nice content

 rizky yuda (07 Mar 2021 at 12:30 pm)

Said : Konten cukup menambah wawasan...

 suryadi (13 Mar 2021 at 06:46 pm)

Said : Boleh request artikel cara koneksi database msyql ke php..

 Nettie Rutherfo (08 Apr 2021 at 12:30 pm)

Said : Auto

 Tedy (29 Mei 2021 at 12:09 pm)

Said : nice blog and articles..

 Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)

Said : card

 flowrie_skylee (12 Jun 2021 at 01:24 pm)

Said : nice content

 Nelson Schaefer (12 Jul 2021 at 04:01 pm)

Said : JSON

 ooppp (18 Jul 2021 at 11:44 pm)

Said : 000popooppi

 Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)

Said : fuchsia

 dharma (07 Sept 2021 at 05:16 pm)

Said : ini support PHP 8?

 admin (12 Sept 2021 at 12:50 pm)

Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.

 sadas (13 Jan 2022 at 09:48 am)

Said : Hello

 sutiyono (15 Jan 2022 at 09:36 am)

Said : konten cukup menarik.

 Fuad (08 Mar 2022 at 05:00 pm)

Said : Maksih bang kontennya, sangat membantu.

 admin (10 Mar 2022 at 12:18 pm)

Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..

 Ferdian (09 Mei 2022 at 11:31 pm)

Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?

 admin (10 Mei 2022 at 09:44 pm)

Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.

 Abror (11 Jun 2022 at 09:08 am)

Said : Hallo min mau tanya kenapa script yang di konten teknik grabbing tidak bisa dibuka di laptop saya?

 admin (12 Jun 2022 at 12:11 am)

Said : #Abror stuck-nya dibagian mana bang? kalau localhost bisa aktifkan curl pada file php.ini dengan cara menghilangkan semicolon pada ;extension=php_curl.dll. Jika hosting online, dapat langsung dijalankan. cUrl dapat mengambil konten dan menampilkannya secara langsung pada halaman web.

 admin (12 Jun 2022 at 10:29 am)

Said : #Abror Silahkan akses artikel Menyalin konten suatu website teknik grabbing dengan native PHP, jika mengalami kesulitan dengan aktivasi cURL.. Terima kasih.

 SYAHRUL (23 Jun 2022 at 09:40 pm)

Said : oknull

 bang (26 Jun 2022 at 07:55 pm)

Said : bang caranya biar upload file dengan ekstensi tertentu di php gimana bang?

 admin (02 Jul 2022 at 11:34 am)

Said : #bang ??# Silahkan akses halaman Membatasi Upload File Dengan Format Tertentu Melalui Atribut HTML, Javascript Dan PHP. Pembatasan dapat dilakukan via HTML dengan menambahkan atribut accept, via javascipt dan juga via PHP script di sisi server.. have a nice day 😍😍 🤩..

 modas (04 Jul 2022 at 03:47 pm)

Said : halo

 Geoww (15 Agt 2022 at 11:45 pm)

Said : Tolog buat tutorial auto insert mysql, saat discaner kak, dan ditampilkan total yg m***k ke databasenya

Visitor Name
Email

 I'm not a robot