Login Authentication dengan PHP

Posted by: dEn t0w0 on: 2 February 2009

In: Berbagi
Comment!

Sekarang kita akan membuat suatu skema login dengan PHP ditambah sedikit Javascript, secara garis besar skemanya adalah user membuat account di form registrasi, lalu data user tersebut disimpan ke dalam database, lalu dengan data itu user melakukan login untuk mengakses halaman utama, jika berhasil user dapat mengakses halaman utama lalu logout kembali ke halaman login.

Membuat direktori

Seperti biasa, untuk pertama kali kita akan membuat suatu direktori (folder) yang nantinya akan digunakan untuk menyimpan file-file skema login yang akan kita buat. Lihat tulisan saya sebelumnya, buatlah direktori dengan nama login di dalam direktori belajarphp sehingga anda mendapati (C:\xampp\htdocs\belajarphp\login)

Database

Selanjutnya kita akan membuat database yang akan digunakan untuk menyimpan data user, buat database di MySQL dengan PHPMyAdmin (Saya menggunakan MySQL Front). Buatlah database dengan nama belajarphp, lalu buatlah tabel dengan nama anggota pada database belajarphp yang memiliki empat field (username, password, nama dan alamat), lihat strukturnya dibawah ini.

Field	Type (Length)	Keterangan
username	char (20)	Primary
password	varchar (32)
nama	varchar (50)
alamat	varchar (200)

Membuat koneksi

Lalu kita akan membuat suatu file php untuk koneksi dengan database belajarphp di MySQL, beri file ini dengan nama koneksi berekstensi *.php (koneksi.php), skripnya adalah seperti dibawah ini :

<?php

$dbname = ‘belajarphp’;

$link = mysql_connect(“localhost”,”root”,”") or die(“Koneksi gagal.”);

$db = mysql_select_db($dbname, $link) or die(“Tidak dapat memilih database”);

Membuat desain CSS

Agar tampilan halaman seragam baik itu dalam bentuk font (style huruf) dan lain sebagainya, ada baiknya kita mendesainnya terlebih dahulu dengan CSS (Cascading Style Sheet). Maka kita buat saja sebuah file berekstensi *.css dengan nama stylelogin (stylelogin.css) dengan skrip sebagai berikut:

a:link {

color: #0000FF;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #9900FF;

}

a:hover {

text-decoration: none;

color: #3366FF;

}

a:active {

text-decoration: none;

color: #000000;

}

a {

font-family: Tahoma;

}

.style1 {

font-size: x-large;

font-weight: bold;

font-family:Tahoma

}

.style2 {

font-family:Tahoma

}

.style3 {

font-size: x-small;

font-family:Tahoma

}

Membuat form login

Form login ini nantinya akan digunakan user untuk melakukan login menuju halaman utama. Tampilannya adalah seperti dibawah ini.

form-login

Form Login

Beri nama file ini dengan nama login (login.php), skripnya adalah seperti dibawah ini.

<html>

<head>

<title>.:Login</title>

</head>

document.write(‘<link rel=”SHORTCUT ICON” href=” http://localhost/belajarphp/gambar/it_beastie.jpg”>’);

</script>

<body>

<tr>

<td class=”style1″>Login Anggota</td>

</tr>

<tr>

<tr>

<td class=”style2″>Username</td>

</tr>

<tr>

<td class=”style2″>Password</td>

</tr>

<tr>

<input type=”submit” value=”Login” /> | <a href=”daftar.php”>Daftar</a></div></td>

</tr>

</table>

</form> </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Memproses Login

Form login yang kita buat sebelumnya, akan melakukan sebuah proses ketika user mengklik tombol login, maka kita akan membuat file pemroses login, beri nama qlogin dengan ekstensi *.php (qlogin.php). lihat pada file login.php di baris skrip <form name=”login” method=”post” action=”qlogin.php”>, form login menggunakan method POST, dan action-nya dilakukan oleh file ini (qlogin.php), action akan dilakukan setelah user mengklik tombol login pada form login, berikut adalah skrip file qlogin.php.

<?php

session_start();

//koneksi database

require_once(“koneksi.php”);

//pilih database

mysql_select_db($database);

//deklarasi variabel

$username=$_POST['username'];

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

//ambil data dari database

$sql=”select * from ANGGOTA where username=’$username’”;

$hasil=mysql_query($sql) or die (“Query salah:”.mysql_error());

//output variabel

$num=mysql_num_rows($hasil);

$row=mysql_fetch_array($hasil);

//jika variabel bernilai 0 atau salah

if ($num==0 OR $password!=$row['password']) {/*1*/

//arahnya kesini

echo “<script>

alert(‘Login gagal’);

parent.location = ‘login.php’;

</script>”;

//jika variabel tidak 0

}/*1*/ else {/*2*/

//jika benar arahnya kesini

$_SESSION['login']=1;

header(“Location:utama.php”);

}/*2*/

Pertama adalah menyertakan file koneksi ke database (require_once(“koneksi.php”);), karena file ini akan mengambil data dari database. Lalu memilih database (mysql_select_db($database);) dan memeriksa isian dari user dengan data di database pada field username ($username=$_POST['username'];) dan password ($password=md5($_POST['password']);), lalu mengambil datanya dari database ($sql=”select * from ANGGOTA where username=’$username’”; $hasil=mysql_query($sql) or die (“Query salah:”.mysql_error());).

Login gagal

Ini terjadi karena user salah dalam mengetikkan username atau password atau keduanya, jika hal ini terjadi maka setelah user mengklik tombol login akan tampil sebuah pesan “Login gagal”, berikut tampilannya.

Login gagal

Perhatikan baris ini :

$num=mysql_num_rows($hasil);

$row=mysql_fetch_array($hasil);

if ($num==0 OR $password!=$row['password']) {

echo “<script>

alert(‘Login gagal’);

parent.location = ‘login.php’;

</script>”;}

….

Namun jika login berhasil maka user akan mendapat akses menuju ke halaman utama.

Halaman Utama

Halaman ini dapat di akses setelah user berhasil melakukan login pada form login, berikut tampilan halaman utama.

halaman-utama

Halaman Utama

Buat file dengan nama utama berekstensi *.php (utama.php), berikut adalah skrip halaman utama:

<?php

session_start();

if(!isset($_SESSION['login']))

{

echo “<script>

alert(‘Anda belum login’);

parent.location = ‘login.php’;

</script>”;

} else {

<html>

<head>

<title>.: Halaman Utama</title>

</head>

document.write(‘<link rel=”SHORTCUT ICON” href=” http://localhost/belajarphp/gambar/it_beastie.jpg”>’);

</script>

<body>

<span class=”style2″>Anda berhak mengakses halaman ini

</span><br /><br />

<a href=”logout.php”>Logout</a>

</body>

</html>

<?php

}

Terkadang ada saja user yang mencoba mengakali masuk ke halaman utama tanpa login, dengan cara langsung mengetikkan URL address halaman utama pada browser. Dalam hal ini cobalah dari form login, tanpa melakukan login anda ketikan http://localhost/belajarphp/login/utama.php pada URL di browser, lihat hasilnya, apakah anda berhasil masuk ke halaman utama??. Jika anda benar mengetikkan skripnya, anda pasti akan mendapati sebuah pesan bahwa “anda belum login”, seperti gambar dibawah ini.

belum-login1

Belum Login

Perhatikan skrip pada qlogin.php:

…..

else {

$_SESSION['login']=1;

header(“Location:utama.php”);

}

Jika pada form login, data yang di isikan user cocok dengan yang tersimpan di database maka baris skrip diatas akan dijalankan. Dibuatkan terdahulu sebuah session login, jika bernilai = 1/ benar ($_SESSION['login']=1;) maka akan di arahkan menuju ke halaman utama (header(“Location:utama.php”);). Dan perhatikan juga skrip pada utama.php.

<?php

session_start();

if(!isset($_SESSION['login']))

{

echo “<script>

alert(‘Anda belum login’);

parent.location = ‘login.php’;

</script>”;

} else {

…. (Isi halaman utama) …

<?php

}

Skrip diawali dengan sebuah session start dan fungsi isset hal ini adalah untuk menginisiasi apakah session login pada qlogin sudah ada atau belum, jika belum maka pesan error anda belum login akan muncul (echo “<script> alert (‘Anda belum login’); parent.location = ‘login.php’; </script>”;), jika sudah maka isi halaman utama akan ditampilkan atau dapat diakses (…. else {?>…. (Isi halaman utama) …)

Logout

Pada halaman utama terdapat sebuah link bertuliskan logout, jika anda mengklik link tersebut maka anda akan keluar dari halaman utama menuju kembali ke halaman login. Setelah user mengklik logout pada halaman utama maka akan muncul pesan bertuliskan “Anda telah logout” lalu klik “Ok” maka user pun kembali ke halaman login.

logout

Logout

Setelah kembali ke halaman login, cobalah tekan tombol back pada browser anda, apakah anda berhasil masuk kembali ke halaman utama??. Jika berhasil, maka periksa lagi skrip yang anda buat pada file utama.php, itu pasti terjadi kesalahan.

Skripnya adalah seperti dibawah ini, lalu simpan dengan nama logout (logout.php).

<?php

session_start();

unset($_SESSION['login']);

session_destroy();

alert(“Anda Telah Logout”);

parent.location = “login.php”;

</script>

Session login di unset (unset($_SESSION['login']);) dan memunculkan sebuah pesan peringatan (<script> alert(“Anda Telah Logout”); parent.location = “login.php”; </script>) dibuat dengan javascript.

Halaman Registrasi

Lalu bagaimana jika user yang belum mempunyai account untuk mengakses halaman utama??. Buatlah account pada form daftar dengan cara pada form login klik daftar, maka akan muncul tampilan seperti dibawah ini :

registrasi

Registrasi

Isikan semua field isian (username, password, nama dan alamat) lalu klik kirim maka data user akan disimpan ke dalam database, berilah file ini dengan nama daftar (daftar.php) skripnya adala seperti dibawah ini.

<html>

<head>

<title>.: Daftar Member Baru</title>

</head>

document.write(‘<link rel=”SHORTCUT ICON” href=” http://localhost/belajarphp/gambar/it_beastie.jpg”>’);

</script>

<body>

<tr>

<td class=”style1″>Daftar Anggota Baru</td>

</tr>

<tr>

<tr>

<td class=”style2″>Username *)</td>

</tr>

<tr>

<td class=”style2″>Password *)</td>

</tr>

<tr>

</tr>

<tr>

<td valign=”top” class=”style2″>Alamat *)</td>

</label></td>

</tr>

<tr>

| <a href=”login.php”>Batal</a></div></td>

</tr>

</table></form>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Memproses Registrasi

Setelah user mengklik tombol kirim pada form daftar maka proses selanjutnya akan di proses oleh sebuah file pemroses registrasi. Beri saja nama qdaftar (qdaftar.php) sebagai pemroses registrasi data-data user, skripnya adalah seperti dibawah ini.

<?php

session_start();

//koneksi database

require_once(“koneksi.php”);

//pilih database

mysql_select_db($database);

//deklarasi variabel

$username=$_POST['username'];

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

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

$stop=0;

//string SQL

$sql=”select username from ANGGOTA”;

$hasil=mysql_query($sql) or die (“Query salah:”.mysql_error());

//validasi entri

if ($username==”") {//1

echo “<script>

alert(‘Username harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}//1

elseif (strlen($password) ==0){//2

echo “<script>

alert(‘Password harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}//2

elseif (strlen($nama)==0) {//3

echo “<script>

alert(‘Nama harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}//3

elseif (strlen($alamat)==0) {//4

echo “<script>

alert(‘Nama harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}//4

else {//5

//periksa duplikasi username

while($row=mysql_fetch_array($hasil)) {//6

if ($username==$row['username']) {//7

echo “<script>

alert(‘Cari username yang lain’);

parent.location = ‘daftar.php’;

</script>”;

$stop=1;

break;

}//7

}//6

if(stop==0){//8

$sql=”insert into ANGGOTA values (‘$username’, ‘$password’, ‘$nama’, ‘$alamat’)”;

$hasil=mysql_query($sql) or die (“Query salah:”.mysql_error());

echo “<script>

alert(‘Data anda telah disimpan’);

</script>”;

echo”<a href=’login.php’> Klik disini <a/> untuk melakukan login”;

}//8

}//5

<title>.: Daftar Membar Baru</title>

document.write(‘<link rel=”SHORTCUT ICON” href=” http://localhost/belajarphp/gambar/it_beastie.jpg”>’);

</script>

Pada form login, semua field isian harus diisi sebelum mengklik tombol kirim karena jika tidak maka akan muncul pesan peringatan, seperti dibawah ini.

validasi-isian

Validasi isian

Untuk hal diatas perhatikan baris skrip dibawah ini:

….

//validasi entri

if ($username==”") {

echo “<script>

alert(‘Username harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}

elseif (strlen($password)==0){

echo “<script>

alert(‘Password harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}

elseif (strlen($nama)==0) {

echo “<script>

alert(‘Nama harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}

elseif (strlen($alamat)==0) {

echo “<script>

alert(‘Nama harus diisi’);

parent.location = ‘daftar.php’;

</script>”;

}

….

Jika user memasukan username yang telah dipakai sebelumnya oleh user lain maka akan muncul peringatan seperti gambar dibawah ini

duplikasi-user

Duplikasi user

Untuk hal diatas perhatikan baris skrip dibawah ini:

…..

//deklarasi variabel

$stop=0;

…..

//periksa duplikasi username

while($row=mysql_fetch_array($hasil)) {

if ($username==$row['username']) {

echo “<script>

alert(‘Cari username yang lain’);

parent.location = ‘daftar.php’;

</script>”;

$stop=1;

break;

}

Jika isian user lengkap dan benar (tidak terjadi duplikasi username) maka klik lah tombol kirim untuk menyimpan data maka akan muncul pesan bahwa user berhasil menyimpan datanya ke dalam database.

simpan-data

Simpan data

Klik Ok maka akan muncul gambar seperti dibawah ini:

proses-akhir-registrasi

Proses akhir registrasi

Tambahan

Perhatikan fungsi hash MD5 pada isian password, perhatikan baris skrip pada file qdaftar.php :

//deklarasi variabel

$username=$_POST['username'];

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

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

Perhatikan juga baris skrip pada file qlogin.php:

//deklarasi variabel

$username=$_POST['username'];

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

Ini berfungsi untuk mengenkripsi nilai password yang user isikan pada field password di form daftar, misalnya seorang user mengisikan password dengan nilai ‘1234’ maka akan di enkripsi menjadi ‘81dc9bdb52d04dc20036dbd8313ed055’, dengan panjang 32 karakter dengan format heksadesimal itulah kenapa panjang field password saya buat 32 saat membuat database.

Enkripsi password

Berikut adalah piranti lunak yang saya gunakan :

XAMPP 1.6.4 (Apache 2.2.6, MySQL 5.0.45, PHP 5.2.4, PHPMyAdmin 2.11.1);
MySQL Front 2.5
Browser Google Chrome ver 1.0.154.46

Kiranya sekian saja dulu perjumpaan kita kali ini, selamat mencoba aplikasi ini, ayo kita terus belajar dan belajar agar lepas dari kebodohan.

F	S	S	M	T	W	T
« Jan				Mar »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28

	dEn t0w0 on 00.00
	Nia Febriyanti on 00.00
	dEn t0w0 on Semoga Kafirku di Ridhai …
	evi on Semoga Kafirku di Ridhai …
	dEn t0w0 on Semoga Kafirku di Ridhai …
	dEn t0w0 on Hitung Grand Total (Javas…
	dEn t0w0 on Si Kupu – Kupu Mala…
	dEn t0w0 on Stupidfreak
	dEn t0w0 on Cara Memasak Kulit Pisang
	huhuhuhuhu on Cara Memasak Kulit Pisang

T	Timeless
O	Orderly
W	Witty
O	Odd

stupidfreak

Login Authentication dengan PHP

2 Responses to "Login Authentication dengan PHP"

Leave a Reply

Stupidmeter

Dimulai dari sesuatu yang bodoh

Penanggalan

Kamu di :

Arsip

Coretan

Top Posts

Recent Comments

Berita Detikcom

Technology

Afiliasi

Punya Gue

Sido Mampir

Teman

Meta

Baneria

Teu Ngarti??

Twitter gue

stupidfreak

Login Authentication dengan PHP

2 Responses to "Login Authentication dengan PHP"

Leave a Reply

Stupidmeter

Dimulai dari sesuatu yang bodoh

Penanggalan

Kamu di :

Arsip

Kategori

Coretan

Top Posts

Recent Comments

Berita Detikcom

Technology

Afiliasi

Punya Gue

Sido Mampir

Teman

Meta

Baneria

Teu Ngarti??

Twitter gue