Cara Membuat Login Page Sederhana
Hallo sobat Atas Programer di artikel pertama saya, saya akan mengasih tau kalian cara membut login page sederhana.
Membuat login page ini adalah salah satu topik yang cukup menantang bagi programmer pemula seperti saya, ada membuat login page atau halaman login sederhana.
Hal menantang bagi programer pemula karena banyaknya hal yang harus dipahami oleh kita sebelum bisa membuat sebuah login page atau halaman login bisa bekerja dengan baik / bisa bekerja dengan benar, antara lain
- Membuat HTML form
- Memahami HTML session
- Logika Percabangan (if else)
- Koneksi ke database
- Query ke database
Form login ini bisa menjadi penting karena kemampuan meracik form login akan sangat membantu membuat aplikasi website yang membutuhkan hak akses dalam penggunannya. Misalkan aplikasi perkantoran, aplikasi perpustakaan, akses halaman admin, dan sebagainya. Oleh karena itu marih sobat Atas Programer kita bahas satu-persatu agar tidak mati penasaran hehe
Diagram alur
Flowchart atau diagram alur proses login ini bisa digambarkan sebagai gambar berikut
Membuat form login adalah salah satu kendala yang bisa di bilang cukup menggangu adalah karena kekurang pahaman terhadap html tags. Namun hal tersebut bisa di atasi dengan 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');
}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 '
Proses Login GAGAL
';
}
}
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.
Belum ada Komentar untuk "Cara Membuat Login Page Sederhana"
Posting Komentar