Studi Kasus: Membuat Halaman Login dengan PHP dan MySQL

Sekarang sudah saatnya saya berbagi sebuah kasus sederhana yang saya kira sesuatu yang cukup bermanfaat dan penting, yakni seputaran login dengan php dan mysql. Pada kasus yang akan saya bahas disini level user yang login dibagi menjadi 2, yakni sebagai admin dan user biasa. Adapun hasil akhir yang dadapat dari contoh ini adalah seperti di bawah ini!

File login.html

Jika login berhasil, maka akan dialihkan ke halaman sesuai dengan levelnya yakni ke halaman admin.php untuk user admin dan ke halaman user.php untuk level user. Adapun tampilannya seperti berikut

Tampilan halaman sukses login admin, admin.php

Tampilan halaman sukses login user, user.php

Bagaimana Script di PHP dan MySQL nya???

Setelah melihat alur proses dan tampilan di atas, pastinya dong sahabat AJN semuanya bertanya-tanya gimana sih cara bikinnya. Ya saya kira begitu karena pada awal saya belajar cari tahu mau bikin sistem login juga kasusnya begitu, termasuk teman-teman saya yang lagi belajar PHP. Kebanyakan diantaranya pada saat baca tutorial seperti ini langsung cari link downloadnya. Namun di ARI JULIANTO Network, bukan sekedar berbagi file, tapi lebih dititikberatkan pada pemahaman prosesnya. Jadi akan saya coba bahas prosesnya secara mendetail supaya bisa dengan mudah dipahami sehingga suatu saat nanti ketika membutuhkannya (mungkin bisa saja dengan sistem yang lebih kompleks) tidak lagi kerepotan dan browsing sana sini cari link download karena sudah paham alurnya. Oke langsung saja kita tampilkan dan bahas source code nya.

Untuk membuat sebuah halaman proses login dengan PHP sibutuhkan minimal 3 file, yakni file untuk form login, file untuk proses dan file untuk ditampilkan setelah login sukses. Sebenarnya dengan satu file juga bisa, hanya saja kalau untuk belajar saya coba pecah menjadi 3 agar kelihatan alur prosesnya.

File login.html

File login.html ini tidak ada yang spesial, hanya sebatas form untuk melakukan login saja, tidak ada proses oleh PHP. Istilahnya file login.html adalah halaman untuk input informasi yang nantinya akan diproses oleh PHP. Maka dari itulah saya buat file login.html yang hanya berupa form ini dibuat dengan ekstensi .html (file HTML). Source code nya seperti berikut!

<h2>Login</h2>

<form method="post" action="login.php">

<table><tr>

	<td>Username:</td>

	<td><input type="text" name="username" /></td>

</tr>

<tr>

	<td>Password:</td>

	<td><input type="password" name="password" /></td>

</tr>

<tr>

	<td>&nbsp;</td>

	<td><input type="submit" name="login" value="LOGIN" /></td>

</tr>

</table>

</form>

Benar kan tidak ada yang istimewa dari file login.html ini? Untuk selanjutnya adalah kita menyiapkan sebuah file yang diinputkan di action pada form. Filenya mau tidak mau harus file PHP karena disanalah proses login dibuat oleh PHP, dan dicontoh saya di atas adalah file login.php. Oiya ada yang hampir lupa, harusnya sebelum ke PHP kita harusnya buat dulu sebuah tabel di database dimana tabel inin nantinya digunakan untuk dicek datanya dengan inputan di form login. Struktur tabelnya kira-kira seperti pada gambar di bawah ini.

File login.php

Selanjutnya adalah membuat halaman untuk parsing data login, yakni di file login.php. Proses yang terjadi di file login.php adalah mencocokkan data yang diinput dengan data yang ada di database, kalo data ada dan informasi login sudah benar maka akan dipindah ke halaman berhasil login, kalo tidak akan dibalikkan ke halaman sebelumnya menggunakan javascript. Berikut adalah source code file login.php

<?php

session_start();

include "koneksi.php"; // include file koneksi database

// periksa dulu bahwa tombol login telah ditekan

if(isset($_POST['login'])){

// parsing data yang diinput user

$username = mysql_real_escape_string(strtolower(trim($_POST['username'])));

$password = md5($_POST['password']);

// buat query untuk cek data

$sql = mysql_query("SELECT * from users where lower(username)='$username' AND password='$password'");

$cek = mysql_num_rows($sql); // hitung jumlah data

// cek data, kalao ada di tabel users (login sudah benar)

if($cek>0){

	$data = mysql_fetch_array($sql); // fetch data sql

	// buat sesi

	$_SESSION['login'] = 1;

	$_SESSION['user'] = $data['username'];

	$_SESSION['nama'] = $data['nama'];

	$_SESSION['level'] = $data['level'];



	// alihkan halaman sesuai level

	if($data['level']=="admin")

		header("location:admin.php");

	else

		header("location:user.php");

}else{

	echo "<script>history.back()</script>";

}

}

?>

Penjelasan script di atas adalah seperti berikut

Baris pertama PHP dimulai dengan fungsi session_start() yang berfungsi untuk membuka sesi di sisi client. Kemudian melakukan include file koneksi.php yang didalamnya adalah script untk koneksi ke database mysql. Berikutnya pada baris if(isset($_POST['login'])){ berfungsi untuk mengecek bahwa ada sebuat tombol yang dikirim (ditekan/diklik/disubmit) yang bernama tombol "login". Jadi statement hanya akan dijalankan kalau user telah menekan tombol login. Selanjutnya mysql_real_escape_string(strtolower(trim($_POST['username']))). Di sini saya menggunakan 3 fungsi PHP sekaligus. Pertama trim() yang berguna untuk menghapus spasi di awal dan akhir inputan username, lalu diikuti strtolower() untuk mengubah inputan menjai huruf kecil semua supaya user tidak harus selalu persis sama mengetikkan usernamenya, misal ketika username "arijulianto" maka di login bisa mengetik " arijulianto","Arijulianto", "AriJulianto", atau bahkan "ARIJULIANTO" kesemuanya akan dianggap sama. Adapun lower(username) adalah sama seperti strtolowe, hanya saja itu adalah perintah di mysql. dan yang terakhir adalah mysql_real_escape_string merupakan fungsi untuk filter input string untuk query agar aman. Untuk baris selanjutnya saya kira sahabat AJN semuanya sudah mengetahuinya, jadi tidak akan saya bahas lagi. Intinya ada sebuah variabel global bernama $_SESSION (berupa array dan ditulis huruf besar semua) yang disediakan oleh PHP dimana isi session ini bisa dipanggil dimanapun selama membutuhkannya. Untuk browser tertentu secara default umur session adalah 30 menit sampai 1 jam, bila tidak ada aktivitas sama sekali akan logout secara otomatis dan nilai-nilai variabel yang kita buat terhapus dengan sendirinya.

File admin.php dan user.php

2 file ini adalah halaman informasi sukses dan menu untuk olah data yang disesuaikan dengan keperluan di level masing-masing. Source codenya seperti di bawah ini!

<?php session_start(); ?>

<h3>Selamat Datang Admin</h3>

<b>Selamat datang <?php echo $_SESSION['nama']; ?></b><br />

Terima kasih sudah melakukan login<br />

Sekarang Anda bisa melakukan olah data meliputi proses tambah, edit dan hapus data...<br />

Jangan lupa untuk logout kalau sudah selesai demi keamanan.

<?php session_start(); ?>

<h3>SSelamat datang <?php echo $_SESSION['nama']; ?></h3>

Terima kasih sudah melakukan login<br />

Setelah login Anda bisa melakukan edit profil Anda dan jangan lupa log out kalo sudah selesai... .

Lihat Demo | Lihat Source