Tutorial Elektronika dan Komputer

Input password adalah jenis input text yang digunakan untuk menerima masukan yang bersifat rahasia. Prinsipnya sama seperti input text namun saat pengguna mengetikkan huruf pada text box yang nampak hanya dot atau bintang saja. Pada input password tidak menampilkan karakter seperti aslinya karena dikhawatirkan informasi pada text akan terlihat dan dibaca oleh orang lain.

Untuk menggunakan input password digunakan tag <input> dengan atribut type=”password”, contoh <input type=”password”>. Seperti input text, input password juga memiliki atribut name dan value. Proses pengambilan data dari input password sama seperti input text, yang berbeda hanya pada antarmukanya saja.

Contoh penggunaan input password pada form :

<form action="" method="post">
<input type="password" name="pass" value="">
<input type="submit" name="enter" value="Enter">
</form>

Dan ini script PHP untuk menangani input password pada form diatas :

<?php
if(isset($_POST['enter']))
{
$password=$_POST['pass'];
echo "Password= $password";
}
?>

Contoh penerapan input password pada aplikasi login dengan PHP

Login form digunakan untuk memasuki sistem yang bersifat tertutup dan rahasia. Login form sederhana biasanya minimal terdisi dari nama user (username) da kata sandi (password). Dalam hal ini digunakan dua jenis input untuk menerima masukan dari pengguna, yaitu input text pada nama user dan input password pada kata sandi.

Contoh form untuk sistem login

Kita akan membuat form dengan input text, input password dan input submit untuk mengeksekusi form.

<b>Form Login</b>
<form action="" method="post">
Nama User: <input type="text" name="user" value="">
Kata Sandi: <input type="password" name="pass" value="">
<input type="submit" name="enter" value="Enter">
</form>

Berikut tampilan form diatas pada browser

Form Login
Nama User:
Kata Sandi:

Contoh script untuk menangani sistem login diatas secara sederhana

Dalam menangani sistem login kita menggunakan logika IF dengan parameter penyeleksian kondisi mengacu pada nilai nama user dan kata sandi. Kemudian kita akan menetapkan indikator untuk menampilkan berhasil dan gagal.

<?php
if (isset($_POST['enter'])) 
{
  $username = $_POST['user'];
  $password = $_POST['pass'];
  if(($username="admin")&&($password="123456"))
  {
     echo "Login Berhasil";
  }
  else
  {
     echo "Login Gagal";
  }
}
?>

Dan berikut ini script lengkap untuk membuat sistem login sederhana

 <?php  
 if (isset($_POST['enter']))   
 {  
  $username = $_POST['user'];  
  $password = $_POST['pass'];  
  if(($username=="admin")&&($password=="123456"))  
  {  
    echo "Login Berhasil";  
  }  
  else  
  {  
    echo "Login Gagal";  
  }  
  echo "<br/><a href='".$_SERVER['PHP_SELF']."'>Kembali</a>";  
 }  
 else  
 echo '  
 <b>Form Login</b>  
 <form action="" method="post">  
 Nama User: <input type="text" name="user" value=""><br/>  
 Kata Sandi: <input type="password" name="pass" value=""><br/>  
 <input type="submit" name="enter" value="Enter">  
 </form>  
 ';  
 ?>  

Penjelasan script

Program akan menampilkan form login jika form tidak dalam kondisi POST. Dan jika dalam kondisi POST akan dikerjakan baris program untuk menerima masukan dari input text dan password lalu membandingkannya dengan data yang telah ditetapkan, contoh: username=admin dan password=123456. Jika hasil perbandingan bernilai benar akan ditampilkan Login Berhasil dan jika salah akan ditampilkan Login Gagal.

Referensi :

• //www.w3schools.com/tags/att_input_type.asp
• //www.w3schools.com/html/html_forms.asp

Input text merupakan komponen form untuk menerima masukan berupa text pendek. Input text menghasilkan rangkaian huruf atau kata dalam satu baris saja. Untuk menerima masukan text dalam baris banyak harus menggunakan komponen lain, yaitu TEXTAREA.

Untuk menggunakan input text digunakan tag <input> dengan atribut type=text, contoh: <input type=”text”>. Selain itu bisa digunakan beberapa atribut tambahan seperti name yang berfungsi sebagai identitas elemen form saat pengambilan data dengan PHP dan value yang bisa digunakan untuk menentukan text awal saat input text di load.

Contoh penggunaan sebuah input text pada form :

<form action="" method="post">
<input type="text" name="input" value="">
<input type="submit" name="enter" value="Enter">
</form>

Pada form diatas terdapat satu input text dengan nama input dengan value kosong. Jadi saat menangani form harus mengacu pada nama input. Nama ini bisa bermacam-macam, namun harus beda antara satu dan yang lainnya. Selain input text, pada form ditaruh sebuah tombol submit untu mengeksekusi form.

Berikut ini tampilan form diatas pada browser :

Contoh penanganan input text dengan php :

<?php
if (isset($_POST['enter'])) {
$text = $_POST['input'];
echo "Text masukan : $text";
}
?>

Penjelasan script :

Eksekusi form dimulai jika tombol enter ditekan dengan menggunakan logika if (isset($_POST[‘enter’])). Selanjutnya data diambil dari form dengan perintah $text = $_POST[‘input’] dan yang terakhir data ditampilkan pada layar dengan perintah echo “Text masukan : $text”.

Cara menggunakan banyak input text pada form

Untuk menerima beberapa field masukan data bisa digunakan banyak input text dalam satu form. Namun yang perlu diperhatikan adalah nama tiap-tiap input text tidak boleh sama. Untuk menangani masukan beberapa input text tersebut, script PHP cukup mengacu ada nama nasing-masing input text. Dalam penataan (layout form) sebaiknya digunakan baris baru untuk setiap input text agar tidak membingungkan.

Contoh penggunaan banyak input text pada form:

<form action="" method="post">
Input 1=<input type="text" name="input1" value=""><br/>
Input 2=<input type="text" name="input2" value=""><br/>
Input 3=<input type="text" name="input3" value=""><br/>
<input type="submit" name="enter" value="Enter">
</form>

Berikut tampilan form diatas pada browser :

Input 1=
Input 2=
Input 3=

Dan berikut script untuk menangani form diatas :

<?php
if (isset($_POST['enter'])) {
$text1 = $_POST['input1'];
$text2 = $_POST['input2'];
$text3 = $_POST['input3'];
echo "Text 1 : $text1 <br/>";
echo "Text 2 : $text2 <br/>";
echo "Text 3 : $text3 <br/>";
}
?>

Penjelasan script :

Pada contoh terdapat tiga buah input text. Masing-masing input text diberi nama yang berbeda, yaitu input1, input2 dan input3. Setiap input dibuat baris baru dengan tag <br/>. Setelah tombol submit ditekan maka program akan mengambil data dari masing-masing input text, yaitu $text1 = $_POST[‘input1’], $text2 = $_POST[‘input2’] dan $text3 = $_POST[‘input3’]. Selanjutnya masing-masing data tersebut ditampilkan dengan perintah echo.

Referensi :

• //www.w3schools.com/tags/att_input_type.asp
• //www.w3schools.com/html/html_forms.asp

Input text merupakan elemen form yang paling banyak digunakan. Input text memungkinkan pengguna memasukkan text pendek single line. Ini sesuai dengan kebanyakan tipe data yang dibutuhkan form, misal nama, alamat, email, website, pekerjaan, nomor hp, dan masih banyak lagi data-data yang bisa dimasukkan dengan input text.

Elemen input text pada form dapat dimasuki semua karakter yang ada pada keyboard baik huruf, angka maupun simbol. Hal ini membuat input text sangat rawan kesalahan jika dibutuhkan data yang benar-benar valid. Misal untuk nama kita hanya mengijinkan huruf kecil, huruf besar, spasi dan titik jasa. Lalu pada input nomor hp kita hanya mengijinkan angka saja. Untuk itu dibuat sistem validasi input text pada form sesuai dengan data yang dibutuhkan.

Berikut ini contoh aturan validasi terhadap input text pada form :

Field	Aturan Validasi Isi
Nama	Hanya huruf, titik dan spasi
Nomor	Hanya angka saja
Email	Sesuai dengan aturan alamat email, mengandung dot (.) dan at (@)
Website	Sesuai dengan aturan alamat URL standar

Berikutnya kita akan membuat script untuk validasi txt dengan menggunakan fungsi-fungsi php seperti preg_match() dan filter_var().

1. Validasi Nama

Dalam validasi nama aturan yang ditetapkan adalah menggunakan huruf kecil, huruf besar, titik dan spasi. Untuk proses validasi digunakan fungsi preg_match() dengan regular expression.

Contoh validasi nama dengan fungsi preg_match() :

//mengambil data dari form  
$nama = test_input($_POST["nama"]);  
// cek validasi text input sesuai aturan yang ditetapkan  
if (!preg_match("/^[a-zA-Z .]*$/",$nama)) {  
$namaErr = "Hanya huruf , titik dan spasi yang diijinkan"; // tampilkan pesan error nama
$nama ="";  //kosongkan variabel $nama 
}

2. Validasi Nomor

Aturan validasi nomor adalah kebalikan dari nama, dimana data yang dimasukkan berupa angka dan tidak diijinkan memasukkan huruf. Untuk proses validasi digunakan masih sama yaitu menggunakan fungsi preg_match() dengan regular expression.

Contoh validasi nomor dengan fungsi preg_match() :

//mengambil data dari form  
$nomor = test_input($_POST["nomor"]);  
// cek validasi text input sesuai aturan yang ditetapkan  
if (!preg_match("/^[0-9]*$/",$nomor)) {  
$nomorErr = "Hanya angka yang diijinkan"; // tampilkan pesan error nomor
$nomor ="";  //kosongkan variabel $nomor 
}

3. Validasi Email

Untuk proses validasi Email kita gunakan fungsi filter_var dengan parameter FILTER_VALIDATE_EMAIL. Cara ini lebih mudah dan simpel daripada harus membuat regular expression jika menggunakan fungsi preg_match().

Contoh validasi email dengan fungsi filter_var():

 //mengambil data dari form  
 $email = test_input($_POST["email"]);  
 // cek format email yang dimasukkan  
 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {  
 $emailErr = "Format email tidak valid !"; //tampilkan pesan error email  
 $email=""; // kosongkan variabel $email  
 }  

4. Validasi Website

Pada proses validasi website ada dua aturan yang bisa dipilih, yaitu aturan baku dan tidak baku. Untuk aturan baku maka alamat website harus menggunakan //google.com. Sedangkan aturan tidak baku memperbolehkan penulisan dengan www, misal www.google.com.

Untuk proses validasi dengan aturan penulisan URL website baku kita bisa gunakan fungsi filter_var dengan parameter FILTER_VALIDATE_URL. Jika menggunakan fungsi ini maka pengguna harus benar-benar tepat dalam menulis alamat website sesuai aturan baku penulisan URL.

Contoh validasi alamat URL dengan fungsi filter_var():

 //mengambil data dari form  
 $website = test_input($_POST["website"]);  
 // cek format website yang dimasukkan  
 if (!filter_var($email, FILTER_VALIDATE_URL)) {  
 $websiteErr = "Format alamat Website tidak valid !"; //tampilkan pesan error website  
 $website=""; // kosongkan variabel $website  
 }  

Untuk alternatif kita bisa membuat validasi alamat website sendiri dengan fungsi preg_match(). Disini kita memperbolehkan penulisan alamat website dengan www contoh: www.google.com.

Contoh validasi alamat URL dengan fungsi preg_match() :

 //mengambil data dari form  
 $website = test_input($_POST["website"]);  
 // cek format website yang dimasukkan  
 if (!preg_match("/b(?:(?:https?|ftp)://|www.)[-a-z0-9+&@#/%?=~_|!:,.;]*[-a-z0-9+&@#/%=~_|]/i",$website)) {
 $websiteErr = "Format alamat Website tidak valid !"; //tampilkan pesan error website  
 $website=""; // kosongkan variabel $website  
 }  

Lihat index artikel ini

Referensi :

• //www.w3schools.com/php/php_form_validation.asp
• //www.w3schools.com/php/php_form_url_email.asp
• //www.duniailkom.com/tutorial-form-php-cara-membuat-validasi-form-php-fungsi-isset-dan-empty/

Dalam artikel sebelumnya ditulis tentang cara validasi form. Namun belum ada penanganan jika salah satu atau beberapa atau bahkan semua field pada form dalam keadaan kosong, script akan tetap dijalankan. Sepintas terlihat tidak terlalu bermasalah karena contoh script hanya menampilkan saja, jadi seolah-olah tampilannya sama, tetap kosong.

Namun ini akan menjadi masalah jika nantinya input data dari form akan di simpan dalam tabel sebuah database. Tentunya akan menyimpan record dengan data kosong yang menjadikan data tersebut tidak valid. Sebagai contoh jika kita menyimpan data komentar saja tanpa nama atau tanpa alamat email dan tanpa jenis kelamin, maka data tersebut menjadi tidak berguna.

Untuk itu kita harus membuat tanda bahwa sebuah field harus diisi dan membuat penanganan errornya jika field tidak diisi. Dalam hal ini kita memerlukan sistem required form, yaitu sistem yang membuat user harus mengisi sebuah elemen form dan menampilkan error jika elemen tersebut tidak diisi. Dan selanjutnya script untuk menyimpan data dari form tidak dijalankan

Berikut ini beberapa langkah membuat required form dengan PHP :

1. Tentukan elemen/field mana yang harus diisi dan dan elemen/field mana yang boleh tidak diisi.
2. Beri tanda untuk elemen/field yang harus diisi, misal dengan tanda bintang (*) lalu diberi note kalau tanda bintang (*) maksudnya harus diisi.
3. Buat variabel untuk menangani error, misal untuk menampilkan pesan error.
4. Buat penyeleksian kondisi yang mengecek elemen/field pada form diisi atau tidak.
5. Tampilkan variabel tersebut disamping elemen form yang belum diisi jika tombol submit ditekan.
6. Buat validasi inputan data form seperti nama harus mengandung huruf dan spasi saja tidak boleh angka, email harus mengandung karakter @ dan dot(.) lalu website harus berisi URL yang valid, misal httl://website.com

Contoh membuat sistem required form dengan PHP:

 <?php   
  // membuat variabel error dan diset kosong   
  $namaErr = $emailErr = $jkErr = $websiteErr = "";   
  //membuat variabel untuk menampung inputan dari form   
  $nama = $email = $jk = $komentar = $website = "";   
  if ($_SERVER["REQUEST_METHOD"] == "POST") {   
  if (empty($_POST["nama"])) {   
   $namaErr = "Nama harus diisi !";   
  } else {   
   $nama = test_input($_POST["nama"]);   
  }   
  if (empty($_POST["email"])) {   
   $emailErr = "Email harus diisi !";   
  } else {   
   $email = test_input($_POST["email"]);   
  }   
  if (empty($_POST["website"])) {   
   $websiteErr = "Website harus diisi !";   
  } else {   
   $website = test_input($_POST["website"]);   
  }   
  if (empty($_POST["komentar"])) {   
   $komentar = "";   
  } else {   
   $komentar = test_input($_POST["komentar"]);   
  }   
  if (empty($_POST["jk"])) {   
   $jkErr = "Jenis kelamin belum dipilih !";   
  } else {   
   $jk = test_input($_POST["jk"]);   
  }   
  }  
  //membuat fungsi untuk validasi input form  
  function test_input($data) {   
   $data = trim($data);   
   $data = stripslashes($data);   
   $data = htmlspecialchars($data);   
   return $data;   
  }    
  ?>   
  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">   
  nama: <input type="text" name="nama">   
  <span class="error">* <?php echo $namaErr;?></span>   
  <br><br>   
  E-mail:   
  <input type="text" name="email">   
  <span class="error">* <?php echo $emailErr;?></span>   
  <br><br>   
  Website:   
  <input type="text" name="website">   
  <span class="error"><?php echo $websiteErr;?></span>   
  <br><br>   
  <label>komentar: <textarea name="komentar" rows="5" cols="40"></textarea>   
  <br><br>   
  Jenis Kelamin:   
  <input type="radio" name="jk" value="perempuan">Perempuan   
  <input type="radio" name="jk" value="laki-laki">Laki-laki   
  <span class="error">* <?php echo $jkErr;?></span>   
  <br><br>   
  <input type="submit" name="submit" value="Submit">    
  </form>   
  <?  
  //menampilkan hasil dari inputan form  
  echo "<h2>Input yang anda masukkan:</h2>";  
  echo $nama;   
  echo "<br>";   
  echo $email;   
  echo "<br>";   
  echo $website;   
  echo "<br>";   
  echo $komentar;   
  echo "<br>";   
  echo $jk;   
  ?>   

Penjelasan Script :

Pada contoh diatas menggunakan script yang sama seperti pada tulisan sebelumnya. Field yang ditentukan harus diisi (tidak boleh kosong) adalah Nama, Email, Website dan Jenis Kelamin. Untuk menandai beberapa elemen form tersebut ditambahkan tanda bintang (*) dibelakangnya kemudian diikuti dengan tampilan error jika tidak diisi.

Saat tombol submit ditekan, data yang dipos-kan oleh form dicek lebih dahulu dengan perintah IF(empty(variabel)). Jika kosong akan ditulis pesan error pada variabel error dan jika sudah diisi akan dilanjut dengan pengambilan data. Pada proses ini tetap digunakan fungsi test_input() untuk validasi form.

Untuk validasi khusus pada masing-masing data tiap elemen form insyaAllah akan ditulis pada artikel selanjutnya.

Referensi :

• //www.w3schools.com/php/php_form_required.asp