Fitur Login, Daftar, Logout dengan PHP dan MySQL


Pada umumnya setiap layanan website memiliki fitur untuk memvalidasi setiap pengguna yang terdaftar secara resmi di layanan mereka setiap kali pengguna mereka hendak mengunjungi website tersebut. Hal ini bertujuan salah satunya adalah untuk menghindari akses account yang tidak sesuai dengan pemilik account yang sebenarnya.

Sebut saja Facebook, Google, Yahoo dan berbagai layanan website lainnya semuanya pasti memiliki fitur login untuk membatasi ruang gerak antara pemilik account yang sah dengan yang tidak.

Nah, pada kesempatan yang berbahagia ini kita akan belajar bagaimana cara membuat fitur login dimana program akan meminta data username dan password sebelum akhirnya mereka dikirimkan ke halaman utama mereka. Untuk keperluan pembuatan fitur tersebut kita membutuhkan sebuah tabel untuk menampung data member kita sebagai berikut:

CREATE TABLE user(
  uid int not null auto_increment primary key,
  username varchar(20) not null,
  fullname varchar(50) not null,
  password varchar(32) not null,
  email varchar(50) not null,
  member_date int not null,
  lastup_date int not null,
  status tinyint(1) not null
);

Buat sebuah file, lalu simpan dengan nama config.php:

<?php 
/**
 * PHP Document
 *
 * @author Andrew Hutauruk | https://blizze.wordpress.com
 * @purpose Sample of experiment on how to create Login, Register, and Logout features in
 * a website application using PHP and MySQL
 *
 * @date 27 Agustus 2012
 * @place Batam, Kepulauan Riau, Indonesia
 */

/* Untuk mengatur seting timezone sesuai jam server */
date_default_timezone_set("Asia/Jakarta");

/* Koneksi ke database dan memilih database */
mysql_connect( 'localhost', 'root', '' );
mysql_select_db( 'latihan' );

/* Variabel untuk menampung data pemanggilan link action */
$action = isset( $_POST['action'] ) ? $_POST['action'] : '';

/* Variabel untuk menampung data pemanggilan link page */
$page = isset( $_GET['page'] ) ? $_GET['page'] : '';
?>

Seperti biasa kita akan memamfaatkan fungsi buatan dalam membantu kita untuk mempercepat proses penulisan koding program (selebihnya tentang fungsi-fungsi tersebut bisa dilihat disini). Lalu simpan dengan nama file fungsi.php

<?php
/**
 * PHP Document
 *
 * @author Andrew Hutauruk | https://blizze.wordpress.com
 * @purpose Sample of experiment on how to create Login, Register, and Logout features in
 * a website application using PHP and MySQL
 *
 * @date 27 Agustus 2012
 * @place Batam, Kepulauan Riau, Indonesia
 */

/* Panggil file config.php */
require_once( 'config.php' );

/* Fungsi untuk melakukan query pada table tertentu */
function query( $str ) {
  return mysql_query( $str );
}

/* Fungsi untuk melakukan fetch data pada sebuah hasil query table tertentu */
function fetch( $str ) {
  return mysql_fetch_array( $str );
}

/* Fungsi untuk menghitung jumlah data dalam sebuah table */
function num( $str ) {
  return mysql_num_rows( $str );
}

/* Fungsi untuk membersihkan string dari karakter-karakter terlarang */
function clean( $str ) {
  return mysql_real_escape_string( $str );
}
?>

Kemudian buat sebuah file bernama index.php dimana file ini akan menangani tampilan halaman depan, proses login-daftar-logout, melihat profil anggota, mengubah data pribadi dan lain sebagainya.

<?php
/**
 * PHP Document
 *
 * @author Andrew Hutauruk | https://blizze.wordpress.com
 * @purpose Sample of experiment on how to create Login, Register, and Logout features in
 * a website application using PHP and MySQL
 *
 * @date 27 Agustus 2012
 * @place Batam, Kepulauan Riau, Indonesia
 */

/* Mulai session */
session_start();

/* Panggil file fungsi.php */
require_once( 'fungsi.php' );

/* Jika tombol DAFTAR diklik */
if( $action == 'DAFTAR' ) {
  /* Variable untuk menyimpan data kesalahan */
  $salah = array();
  
  /* cek seluruh data yang dikirimkan dari form */
  $username = clean( $_POST['username'] );
  $fullname = clean( $_POST['fullname'] );
  $password = clean( $_POST['password'] );
  $email = clean( $_POST['email'] );
  $time = time();
  
  if( empty( $username ) ) {
	$salah[] = '- Username tidak boleh kosong';
  }
  if( empty( $fullname ) ) {
    $salah[] = '- Nama tidak boleh kosong';
  }
  if( empty( $password ) ) {
    $salah[] = '- Password tidak boleh kosong';
  }
  if(empty( $email ) ) {
    $salah[] = '- Email tidak boleh kosong';
  }
  
  /* Jika tidak ada kesalahan */
  if( !count( $salah ) ) {
    if( num( query( "SELECT * FROM user WHERE username='$username' OR email='$email'" ) ) == 0 ) {
	  $password = md5( $password );
	  query( "INSERT INTO user VALUES( '$uid', '$username', '$fullname', '$password', '$email', '$time', '$time', '0' )" );
	} else {
	  $salah[] = '- Anggota dengan username dan email ini sudah terdaftar. Pilih yang lain coy...';
	}
  }
  
  /* Simpan data kesalahan dalam session */
  if( count( $salah ) ) {
    $_SESSION['salah-daftar']['duplikasi-akun'] = implode( '<br>', $salah );
  }
  
  /* Kirimkan ke halaman yang sesuai */
  if( count( $salah ) ) {
    header( "Location: index.php?page=daftar" );
  } else {
    header( "Location: index.php?page=login" );
  }
  exit;
} elseif( $action == 'LOGIN PENGGUNA' ) {
  /* Jika tombol Login Pengguna diklik */
  $salah = array();
  $emailusername = clean( $_POST['emailusername'] );
  $password = clean( $_POST['password'] );
  if( empty( $emailusername ) ) {
    $salah[] = '- Isi username atau email Anda';
  }
  if( empty( $password ) ) {
    $salah[] = '- Isi password Anda';
  }
  if( !count( $salah ) ) {
    $row = fetch( query( "SELECT * FROM user WHERE username='$emailusername' OR email='$emailusername' AND password='".md5( $password )."'" ) );
	if( $row) {
	  $_SESSION['uid'] = $row['uid'];
	  query( "UPDATE user SET status='1' WHERE uid='".$row['uid']."'" );
	} else {
	  $salah[] = '- Maaf, password Anda salah';
	}
  }
  if( count( $salah ) ) {
    $_SESSION['login-gagal']['password-salah'] = implode( '<br>', $salah );
  }
  if( count( $salah ) ) {
    header( "Location: index.php?page=login" );
  } else {
    header( "Location: index.php" );
  }
  exit;
} elseif( $page == 'logout' ) {
  /* Jika link logout diklik */
  query("UPDATE user SET lastup_date='".time()."',status='0' WHERE uid='".$_SESSION['uid']."'" );
  session_start();
  session_destroy();
  header( "Location: index.php" );
  exit;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fitur Login dengan PHP dan MySQL &laquo; Blizze.net</title>
<link href="style.css" type="text/css" media="screen" rel="stylesheet" />
</head>
<body>

<h1>Website</h1>
<ul>
  <li><a href="index.php">Beranda</a></li>
  <li><a href="index.php?page=daftar">Daftar Gratis</a></li>
  <?php
  if( isset( $_SESSION['uid'] ) ){
    echo "<li><a href=\"index.php?page=logout\">Logout</a></li>";
  } else {
    echo "<li><a href=\"index.php?page=login\">Login</a></li>";
  }
  ?>
</ul>
<hr>

<?php
/* Jika link daftar diklik */
if( $page == 'daftar' ) {
  echo "<h1>Daftar Gratis</h1>";

  /* Jika ada kesalahan yang terekan oleh browser selama pendaftaran */
  if( isset( $_SESSION['salah-daftar']['duplikasi-akun'] ) ) {
    echo "<p class=\"error\">".$_SESSION['salah-daftar']['duplikasi-akun']."</p>";
    unset( $_SESSION['salah-daftar']['duplikasi-akun'] );
  }

  echo "<form method=\"post\" action=\"\">";
  echo "<p>Username Anda:<br> <input type=\"text\" name=\"username\" size=\"50\"></p>";
  echo "<p>Nama Anda:<br> <input type=\"text\" name=\"fullname\" size=\"50\"></p>";
  echo "<p>Password Anda:<br> <input type=\"password\" name=\"password\" size=\"50\"></p>";
  echo "<p>Email Anda:<br> <input type=\"text\" name=\"email\" size=\"50\"></p>";
  echo "<p><input type=\"submit\" name=\"action\" value=\"DAFTAR\"></p>";
  echo "</form>";
} elseif( $page == 'login' ) {
  /* Jika link login diklik */
  echo "<h1>Login Pengguna</h1>";

  /* Jika ada kesalahan yang terakan selama proses login */
  if( isset( $_SESSION['login-gagal']['password-salah'] ) ) {
    echo "<p class=\"error\">".$_SESSION['login-gagal']['password-salah']."</p>";
    unset( $_SESSION['login-gagal']['password-salah'] );
  }

  echo "<form method=\"post\" action=\"\">";
  echo "  <p>Username/email:<br> <input type=\"text\" name=\"emailusername\" size=\"30\"></p>";
  echo "  <p>Password:<br> <input type=\"password\" name=\"password\" size=\"30\"></p>";
  echo "  <p><input type=\"submit\" name=\"action\" value=\"LOGIN PENGGUNA\"></p>";
  echo "</form>";
} else {
  /* Jika ada user yang login */
  if( isset( $_SESSION['uid'] ) ) {
    $sql = fetch( query( "SELECT * FROM user WHERE uid='".$_SESSION['uid']."'" ) );
    echo "<h1>Welcome, ".$sql['fullname']." | <a href=\"index.php?page=logout\">Logout</a></h1>";
    echo "<p>Selamat datang di halaman utama, <b>".$sql['fullname']."</b> | Tanggal daftar: ".date( "d-m-Y H:i", $sql['member_date'] ).", terakhir kali login: ".date( "d-m-Y H:i", $sql['lastup_date'] )."</p>";
    echo "<p>Untuk menu selanjutnya sedang dalam pengembangan. Silahkan tunggu info selanjutnya dari webmaster.</p>";
  } else {
    /* Jika tidak ada member yang login */
    echo "<h1>Welcome coy...</h1>";
    echo "<p>Inilah website saya</p>";
  }
  
}
?>

Sedangkan untuk pengaturan kode stylesheet bisa dilihat sebagai berikut ini:

/**
 * CSS Document
 *
 * @author Andrew Hutauruk | https://blizze.wordpress.com
 * @purpose Sample of experiment on how to create Login, Register, and Logout features in
 * a website application using PHP and MySQL
 *
 * @date 27 Agustus 2012
 * @place Batam, Kepulauan Riau, Indonesia
 */
 
*{
	margin: 0;
	padding: 0;
}

body{
	margin: 0;
	padding: 0;
	font: 12px arial;
	color: #666;
	text-align: justify;
	background: #eee;
	line-height: 1.6em;
}

a{
	color: #0000CC;
	text-decoration: none;
}

a:hover{
	color: #FF0000;
	text-decoration:none;
}

ol,ul{
	margin: 0;
	padding: 0;
	list-style-type: none; 
	height: 35px;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 0px #fff;
}
li{
	float: left;
	display: inline;
}

li a{
	margin: 0;
	padding: 10px 20px;
	line-height: 35px;
	font-weight: bold;
	border-right: 1px solid #ccc; 
	box-shadow: 1px 0px 0px #fff;
} 
li a:hover{
	background: #F2f9fd;
}

p.error{
	margin:10px 0;
	padding: 10px;
	color: #FF0000;
	font-weight: bold; 
	background: #F2F9FD;
	border: 1px solid #ddd;
}

form{
	margin: 10px 0;
	padding: 10px;
	text-shadow: 0px 1px0px #fff;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 0px #fff;
	text-transform: uppercase;
	font-weight: normal;
	text-shadow: 0px 1px 0px #fff;
}

input{
	margin: 2px 0 20px 0;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 0px #fff;
	border-radius: 6px;
}

input#button{
	margin: 0;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 0px #fff;
	border-radius: 6px;
	background: #fbcfed;
	cursor: pointer;
}
input#button:hover{
	background: #F2F9FD;
	color: #000;
	border: 1px solid #555;
}

h1{
	margin: 10px 0;
	padding: 10px;
	clear: both;
	font-size: 25px;
	text-shadow: 0px 1px0px #fff;
	border: 1px solid #CCC;
	box-shadow: 0px 1px 0px #fff;
	text-transform: uppercase;
	font-weight: normal;
	text-shadow: 0px 1px 0px #fff;
}
	
.wrap{
	margin:30px auto;
	padding: 0;
	width: 50%;
}

.box{
	margin: 10px 0;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 15px 0 15px 0;
}	

Demikianlah salah satu bentuk perancangan dan penggunaan fiture login, register, dan logout yang cukup sederhana dengan menggunakan PHP dan MySQL. Memang, tutorial ini masih jauh dari kata bagus, sempurna dan lain sebagainya namun harapan saya setidaknya tutorial ini bisa bermamfaat bagi Anda yang merasakannya.

Jika Anda merasa malas dan jenuh untuk mempelajari script di atas, Anda bisa langsung mendownloadnya di link di bawah ini:

Download File Latihan Login, Register, dan Logout

Untuk lebih bisa sama-sama maju dalam dunia pemrograman saya harap Anda berkenan untuk berkomentar di bawah ini. Terimakasih.

Artikel terkait:

8 thoughts on “Fitur Login, Daftar, Logout dengan PHP dan MySQL

      1. Maksih min ilmunya.. Mhon bantuannya ketika login user dengan memasukkan pass yg salah tetap bsa login kecuali pass d kosongkan .. dan kalo saya ingin buat untuk login admin sendiri gimana ya .. mhon pencerhannya min ..

      1. Mas saya sudah coba script diatas, saya mengalami masalah di tampilan index.php nya
        di pojok kiri atas web muncul code “?>” setelah tag body. Gimana cara menghilangkannya? saya dah coba hapus tp malah error? Tapi ngomong-ngomong terima kasih banyak atas tutorialnya, sangat membantu bwt belajar & the code almost works, good example!! =)

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s