Mar
30
2012

Membuat Form Login, Proses Login dan Pengamanan Halaman

Pada tutorial kali ini akan dijelaskan bagaimana dasar-dasar membuat form login (Menggunakan sintaks HTML), proses login (PHP) dan pengamanan halaman (PHP – Session). Ada 2 contoh yang akan dibuat pada tutorial ini, yaitu :

  1. Proses login yang tidak memerlukan database (data username dan password tidak disimpan pada database).
  2. Proses login yang memerlukan database (data username dan password disimpan pada database).

Kedua contoh diatas memiliki alur yang sama. Gambar dibawah ini menampilkan alur proses login yang akan dibuat pada tutorial kali ini :

Berdasarkan gambar diatas, terdapat 4 halaman yang diperlukan untuk melakukan proses login hingga logout, yaitu :

  1. login.php. Halaman ini akan menampilkan form login.
  2. process-login.php. Halaman ini berfungsi untuk melakukan proses login dimana username dan password yang dimasukan oleh pengguna akan dicocokan dengan username dan password yang benar.
  3. secret-page.php. Halaman ini merupakan halaman rahasia yang hanya boleh diakses ketika pengguna telah melakukan proses login (dengan memasukan username dan password yang benar).
  4. logout.php. Halaman ini berfungsi untuk menghapus semua nilai pada variabel session yang di-set nilainya pada halaman process-login.php.

Berikut ini adalah kode lengkap dari masing-masing halaman diatas dan merupakan contoh proses login yang tidak memerlukan database :

login.php

<?php
   error_reporting(E_ALL ^ E_NOTICE);

   if($_GET['error_msg'] != "")
   {
      echo "<div align='center' style='color:red;'>".$_GET['error_msg']."</div>";
   }
?>
<html>
<head>
   <title>Halaman Login</title>
</head>
<body>
<form action="process-login.php" method="post">
   <table align="center">
      <tr>
         <td colspan="2"><strong>:: User Login (No DB)</strong></td>
      </tr>
      <tr>
         <td>Username</td>
         <td>: <input type="text" name="txt_username" /></td>
      </tr>
      <tr>
         <td>Password</td>
         <td>: <input type="password" name="txt_password" /></td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td><input type="submit" name="btn_login" value="login"></td>
      </tr>
   </table>
</form>
</body>
</html>

Penjelasan Kode login.php :

Baris 2 : Mode pelaporan galat (error_reporting) PHP yang tidak akan menampilkan pesan pemberitahuan (notice). Lihat tutorial [ Notice: Undefined index ]

Baris 4-7 : Menangkap nilai dari variabel error_msg yang dikirim melalui URL. Lihat kode secret-page.php pada baris 6.

Baris 14 : Jika pengguna menekan tombol “login”, maka pengguna akan diarahkan menuju halaman process-login.php. Semua nilai input-an pengguna seperti username dan password akan dikirimkan dengan cara “POST“.

process-login.php

<?php
   error_reporting(E_ALL ^ E_NOTICE);

   session_start();

   if($_POST['btn_login'] == "login")
   {
      $txt_username = $_POST['txt_username'];
      $txt_password = $_POST['txt_password'];

      if($txt_username != "" and $txt_password != "")
      {
         if($txt_username == "admin" and $txt_password == "123456")
         {
            $_SESSION['is_login'] = "true";
            header("Location:secret-page.php");
         }else{
            echo "<b style='color:red;'>Username atau Password SALAH !!!</b><br/>";
            echo "<a href='login.php'>Kembali ke hal. Login</a>";
         }
      }else{
         echo "<b style='color:red;'>Username dan Password harus diisi !!!</b><br/>";
         echo "<a href='login.php'>Kembali ke hal. Login</a>";
      }
   }
?>

Penjelasan Kode process-login.php :

Baris 4 : Inisialisasi session. Hal ini diperlukan setiap kali kita akan membuat variabel session seperti pada baris 15.

Baris 6 : Memastikan bahwa yang ditekan oleh pengguna adalah tombol yang memiliki nama “btn_login” dengan nilai (value) “login”.

Baris 8-9 : Menangkap nilai input-an pengguna yang diketikan pada textfield txt_username dan txt_password serta menyimpannya pada sebuah variabel.

Baris 11 : Melakukan pengecekan kosong tidaknya nilai dari variabel $txt_username dan $txt_password. Jika salah satu variabel tersebut kosong maka blok kode kondisi else (baris 21) akan dijalankan.

Baris 13 : Melakukan pengecekan nilai dari variabel $txt_username dan $txt_password. Jika variabel $txt_username bernilai “admin” dan $txt_password bernilai “123456″ maka sebuah variabel SESSION bernama “is_login” akan di set nilainya dengan “true”. Lalu pengguna akan dialihkan menuju halaman secret-page.php.

secret-page.php

<?php
   session_start();

   if($_SESSION['is_login'] != "true")
   {
      header("Location:login.php?error_msg=Mohon Login Terlebih Dahulu");
   }
?>
<html>
<head>
   <title>Halaman Rahasia</title>
</head>
<body>
   Selamat Datang di Halaman Rahasia
   <br/><a href="logout.php"> Klik disini untuk Logout</a>
</body>
</html>

Penjelasan Kode secret-page.php :

Baris 4-7 : Pengecekan nilai dari variabel SESSION yang bernama “is_login”. Jika nilai variabelnya tidak sama dengan “true”, makan pengguna dianggap belum melakukan proses login terlebih dahulu dan akan dialihkan ke halaman login.php dengan pesan galat (error_msg) “Mohon Login Terlebih Dahulu”. Kode ini diperlukan disetiap halaman yang memerlukan pengecekan apakah penggunaka sudah melakukan login atau belum.

Baris 15 : Link untuk menuju halaman logout.php.

logout.php

<?php
   session_start();

   $_SESSION['is_login'] = "";
   session_destroy();
   header("Location:login.php");
?>

Pada halaman logout, variabel SESSION akan dikosongkan nilainya dan SESSION itu sendiri akan dihancurkan (destroy). Setelah itu, pengguna akan dialihkan ke halaman login.php.

Proses Login yang Memerlukan Database

Jika username dan password seorang pengguna disimpan di dalam database, maka proses login yang dilakukan memerlukan proses perbandingan antara username dan password yang di-input-kan pengguna dengan username dan password yang disimpan di dalam database. Agar dapat memahami proses login yang memerlukan database, ikuti langkah-langkah berikut :

  1. Buat database dengan nama “phpdasar”. (Pembuatan database dan tabel bisa dilihat pada tutorial [ php-dasar-3-koneksi-database-mysql-dan-menampilkan-data ])
  2. Buat tabel “user” pada database “phpdasar”.
  3. Buat halaman PHP untuk koneksi ke database MySQL (koneksi.php).
  4. Lakukan modifikasi terhadap halaman process-login.php.
  5. isi tabel user dengan sebuah data.

Untuk langkah no 2, buatlah tabel “user” dengan struktur seperti dibawah ini :

Dengan menggunakan kode SQL berikut ini :

   CREATE TABLE `user` (
      `username` varchar(18) NOT NULL,
      `password` varchar(50) NOT NULL,
      PRIMARY KEY (`username`)
   )

Buatlah halaman PHP untuk koneksi ke database MySQL (koneksi.php).

koneksi.php

<?php
   $host = "localhost";
   $userdb = "root";
   $passdb = "";
   $dbname = "phpdasar";

   $con = mysql_connect($host,$userdb,$passdb);
   if (!$con)
   {
      die('Gagal melakukan koneksi : ' . mysql_error());
   }else{
      mysql_select_db($dbname);
   }
?>

Lakukan modifikasi pada halaman process-login.php menjadi seperti berikut ini :

<?php
   include("koneksi.php");

   error_reporting(E_ALL ^ E_NOTICE);

   session_start();

   if($_POST['btn_login'] == "login")
   {
      $txt_username = $_POST['txt_username'];
      $txt_password = $_POST['txt_password'];

      if($txt_username != "" and $txt_password != "")
      {
         $sql = "SELECT * FROM user WHERE username = '$txt_username' AND password = '$txt_password'";
         $result = mysql_query($sql);
         $jmlUser = mysql_num_rows($result);

         if($jmlUser > 0)
         {
            $_SESSION['is_login'] = "true";
            header("Location:secret-page.php");
         }else{
            echo "<b style='color:red;'>Username atau Password SALAH !!!</b><br/>";
           echo "<a href='login.php'>Kembali ke hal. Login</a>";
         }
      }else{
         echo "<b style='color:red;'>Username dan Password harus diisi !!!</b><br/>";
         echo "<a href='login.php'>Kembali ke hal. Login</a>";
      }
   }
?>

Penjelasan Kode process-login.php (Modifikasi) :

Baris 15-19 : Hasil modifikasi bisa dilihat pada baris ini. Pada baris ini username dan password yang di-input-kan oleh pengguna aka dibandingkan dengan data username dan password yang ada di database melalui Query SQL pada baris 15. Jika username dan password ditemukan di database, maka nilai dari variabel $jmlUser > 0.

Source Code :

php-login.zip

Related Posts

About the Author: tupic na

Iseng-iseng nulis aja.. nggak sengaja belajar PHP, JAVA dan .NET

  • :)

    mantap pakkkk

  • Dhard

    yang gabungan antara session dengan mysql pak
    ada juga pak??

  • Andi Kata

    Terimakasih sudah berkunjung ke blog saya. Ini postingannya pun sangat informatif dan berguna sekali. Andi Kata.

  • Lexicheiy

    pak ada script php untuk membuat forum tanya jawab online g?

    • taufik nur adi

      :) ada

  • Lexicheiy

    boleh di share g pak script forum tanya jawabnya.

    • admin

      silahkan, jngn lupa cantumkan sumbernya :D

  • http://www.facebook.com/cinduane.fridarahma Cinduane Gilang Fridarahma

    Gan, numpang tanya donk.
    Browser saya punya masalah dalam login, baik itu login akun gmail atau akun-akun lain di bukukita.com, gramedia. Ciri-cirinya, setiap kali saya selesai mengisi form login, kemudian saya ‘enter’, halamannya nggak ngarah ke akun saya, malah redirect lagi ke form login. Gitu terus berulang-ulang. Tapi kalo dibuka dari leptop lain bisa. Browsernya, mulai dari IE, Mozilla, G-Chrome, sampe Opera pun begitu. Tapi login FB gda masalah. Login akun Twitter dan gmail cuma bisa dari Opera.

    Sebenarnya sudah pernah sembuh, begitu satu browser lancar loginnya, semua-muanya jadi lancar. Tapi tiba2, kemaren kambuh lagi. Kira-kira kenapa ya?
    Mohon tanggapannya.

    • admin

      :) Sorry gan, tampaknya perlu di screen capture.. karena ane belum paham masalah ente.

Kumpulan Orang Pinter

Ngitung Pengunjung

free counters