Beranda
»
Artikel
»
Mengirim Dan Menangkap Data Input Type Password Pada Server

Mengirim Dan Menangkap Data Input Type Password Pada Server

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

<!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 :

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

<?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>";
}
?>

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

18 Jun 2022 0 1.947

Kategori : html - jquery - php

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Cara Mengirim Dan Mendapatkan Kembali Data Input Type Checkbox Pada Sisi Server artikel
	Mengirim Dan Mendapatkan Kembali Data Input Type Radio Pada Sisi Server artikel
	Validasi Member Dengan Kode Berbatas Waktu Dikirim Via Email artikel
	Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email artikel
	Membuat Form Sign Up Dan Form Login Dengan Enkripsi password_hash dan password_verify artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

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.

Peringatan!

Apakah ingin menghapus komentar ini?

	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 60.191
	Daftar Kode ASCII 47.171
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 44.569
	Mendownload File Dengan Menggunakan PHP 28.614
	Validasi Form Menggunakan Plugin Validation Jquery 26.290
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 19.343
	Membuat Barcode Generator Dengan PHP 15.676
	Cara Mudah Membuat QR Code Generator Dengan PHP 14.699
	Merubah Warna Latar Text Editor Notepad++ 13.736
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 11.708

Visitor Name
Email