Login Page Sederhana

Salah satu topik yang cukup menantang bagi programmer pemula ada membuat login page atau halaman login sederhana. Menantang bagi programmer pemula karena banyak hal yang harus dipahami sebelum bisa membuat sebuah login page atau halaman login bisa bekerja dengan benar. Form login ini menjadi penting karena kemampuan meracik form login akan sangat membantu membuat aplikasi web yang membutuhkan hak akses dalam penggunaannya. Misalkan aplikasi perkantoran, aplikasi perpustakaan, akses halaman admin. dan sebagainya.

Membuat HTML Form
Memahami HTML session
Logika percabangan (if else)
Koneksi ke database,
Query ke database

Form login ini menjadi penting karena kemampuan meracik form login akan sangat membantu membuat aplikasi web yang membutuhkan hak akses dalam penggunaannya. Misalkan aplikasi perkantoran, aplikasi perpustakaan, akses halaman admin. dan sebagainya. Oleh karena itu mari kita bahas satu-persatu agar tidak mati penasaran 🙂

Diagram Alur

Flowchart atau diagram alur proses login ini bisa digambarkan sebagai berikut

Membuat Form Login

Salah satu kendala yang cukup menggangu adalah kekurangpahaman terhadap html tags. Namun hal tersebut bisa diatasi dengan memanfaatkan tools seperti Adobe Dreamweaver atau Eclipse untuk membantu membuatkan tag HTML form ini. namun minimal programmer harus paham tag-tag seperti <form> dan <input> untuk membuat form login. dan untuk mebuat tampilan lebih cantik bisa diatus menggunakan <div> atau <table>. Sebagai contoh, berikut ini adalah form login super sederhana karena tidak ada style apapun di dalamnya

<form name="frmLogin" id="frmLogin" method="post">
<table>
	<tr>
		<th colspan="2">Login Form</th>
	</tr>
	<tr>
		<td>Username</td>
		<td><input type="text" id="username" name="username" /></td>
	</tr>
	<tr>
		<td>Password</td>
		<td><input type="password" id="password" name="password" /></td>
	</tr>
	<tr>
		<th colspan="2"><input type="submit" name="login" value="Login"></th>
	</tr>
</table>
</form>

HTML Session

Salah satu sifat dari halaman web html adalah dia stateless, ketika kita berpindah halaman, maka kita tidak bisa mengambil status dari isian form, atau perubahan apapun yang terjadi pada halaman sebelumnya. Kita juga tidak bisa mengambil nilai form atau variabel dari halaman lain. Hal ini sangat bertolak belakang dengan aplikasi Desktop Windows dimana kita bisa bebas mengambil nilai variabel di form lain. Untuk mengatasi hal ini, kita gunakan session. Jadi session adalah sebuah varibel sementara yang diletakkan di server di mana PHP bisa mengambil nilai yang tersimpan di dalamnya walaupun kita membuka halaman baru. Session jadi sangat berguna untuk men-transfer nilai suatu variabel dari satu halaman web ke halaman lainnya. Dan session akan hilang jika anda menutup browser.

Untuk memanfaatkan session di PHP, maka kita hanya perlu memanggil satu baris perintah session_start() di awal halaman, dan untuk melihat isi session, maka gunakanlah variabel $_SESSION. Untuk bahasan kali ini kita akan mengisikan variabel $_SESSION[‘user’] sebagai tempat menyimpan informasi user yang sedang login

Logika Percabangan

logika percabangan adalah logika pemilihan kondisi, dimana kondisi apabila kondisi terpenuhi maka yang akan dieksekusi kondisi terpenuhi, sedangkan kondisi yang lain tidak akan dieksekusi. Semua bahasa pemrograman pasti mempunyai logika percabangan, namun cara penulisannya berbeda-beda. Untuk form login yang sedang kita buat ini, kita akan mengecek keberadaan variabel session $_SESSION[‘user’] menggunakan fungsi isset(). Jika ada maka kita asumsikan user sudah login dengan sukses, dan jika tidak ada maka kita asumsikan user belum login dan tampilkan form loginnya.

if (!isset($_SESSION['user']['login'])) {
	require_once('login.php');
}

else {
	$username=$_SESSION['user']['username'];
	print "
		<center>
		Hello $username!
		Login BERHASIL
		</center>";
	require_once('logout.php');
}

Mengakses Database

Tantangan berikutnya adalah membandingkan hasil input dengan record yang ada di database. Untuk alasan keamanan kita akan memanfaatkan metode hashing MD5 untuk menyimpan password. Sebenarnya ada yang lebih secure dibandingkan MD5, namun bukan di sini pembahasannya. Cara paling sederhana adalah menangkap input user di form HTML dan membandingkannya dengan record yang ada di database menggunakan SQL query. Jika ada record dengan username dan password yang diberikan, maka SQL query tersebut akan mengembalikan row yang valid. Code-nya adalah sebagai berikut,

/*
 * periksa apakah ada 'login' di variable $_POST
 * $_POST['login'] didapat dari button di form login
 * $_POST['username'] didapat dari input text di form login
 * $_POST['password'] didapat dari input password di form login
 ***/
if (isset($_POST['login'])) {
	$username = htmlspecialchars($_POST['username']);
	$password = htmlspecialchars($_POST['password']);

	/*
	 * query ke database
	 * $db_conn didapat dari file koneksi.php
	 ***/
	$sql = "select * from users
		where username='$username' and password=md5('$password')";
	$rs = mysql_query($sql,$db_conn) or die (mysql_error());

	/*
	 * ambil hasil query
	 * jika ada, simpan ke session
	 * jika tidak ada, tampilkan error
	 ***/
	if ($row=mysql_fetch_assoc($rs)) {
		// simpan user info variable session
		$_SESSION['user']['login']=TRUE;
		$_SESSION['user']['username']=$username;
		$_SESSION['user']['password']=$password;
		// redirect ke index.php
		header('location: index.php');
	}

	else {
		// tampilkan error
		print '<center>Proses Login GAGAL</center>';
	}
}

Kesimpulan

Mudah-mudahan artikel ini bisa membantu teman-teman yang sedang membuat form login dan dapat mengembangkannya sesuai dengan kebutuhan masing-masing. Code lengkap berikut dengan script SQL untuk membuat table di database silakan download di sini, atau fork source code dari github di sini.

ArungRuang