Beberapa waktu yang lalu, saya membuat postingan tentang membuat Login dan Register untuk seri Belajar CodeIgniter [Baca: Membuat Simple Login dan Register Menggunakan CodeIgniter]. Karena postingan itu, salah seorang kawan di grup pernah bertanya tentang cara membuat Login dan Register Sistem menggunakan PHP OOP. Untuk menjawab pertanyaan kawan saya ini, di edisi Belajar PHP OOP kali ini, saya akan menjabarkan langkah - langkah dalam membuat Login dan Register Sistem menggunakan PHP OOP.
Kalau sudah bicara tentang OOP, sudah pasti kita akan membuat class akan digunakan dalam pembuatan objek. Dan di edisi kali ini kita akan membuat class yang berisi fungsi-fungsi yang nantinya digunakan aplikasi kita untuk pendaftaran user aplikasi, untuk login user dan tentu saja logout. Nah, class ini biasanya dinamakan dengan Auth Class.
Bisa dilihat di class diagram di atas, dalam Auth Class ini terdapat fungsi - fungsi yang berhubungan dengan user seperti fungsi Register, fungsi Login dan aneka fungsi lainnya. Dan sudah pasti nanti akan kita gunakan untuk proses Login dan Register dalam sebuah aplikasi. Lalu, apa saja langkah-langkah dalam membuat Login dan Register menggunakan PHP OOP di edisi kali ini? Check this out ya!
[1] Persiapan
Seperti biasa, Sebelum memulai alangkah baiknya kita berdoa terlebih dahulu, supaya codingnya berjalan dengan lancar. Hihi. :)
Selanjutnya, kita buat dulu folder 'Auth' di dalam direktori document root kamu atau folder htdocs (Asumsi kamu pakai Xampp). Folder Auth ini nanti akan kita gunakan untuk menyimpan file-file php dari aplikasi yang kita buat.
[2] membuat Database
Langkah selanjutnya adalah membuat database. Buka phpMyadmin, lalu kita buat database dengan nama 'belajar_oop'. Yep, kalau kamu sudah mencoba edisi sebelumnya, kamu boleh pakai database di edisi sebelumnya. Soalnya masih pakai database yang sama. Nah, selanjutnya kita buat tabel 'tbAuth' klik menu SQL di phpMyadmin.
Lalu, kamu ketik perintah SQL ini di dalam textarea :
CREATE TABLE IF NOT EXISTS `tbAuth` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Nah, kalau sudah diketik, kamu klik tombol 'Go' untuk menjalankan perintah SQL tersebut.
[3] Konfigurasi Database
Ya, untuk mengatur konfigurasi database, masih sama seperti di edisi Belajar PHP OOP sebelumnya, kita akan membuat file config dengan nama dbconfig.php. Buka text editor kesayanganmu, lalu ketik kode di bawah ini:
<?php
try
{
$con = new PDO('mysql:host=localhost;dbname=belajar_oop', 'root', '', array(PDO::ATTR_PERSISTENT => true));
}
catch(PDOException $e)
{
echo $e->getMessage();
}
include_once 'AuthClass.php';
$user = new Auth($con);
?>
Nah, file dbconfig.php ini kita simpan di folder 'Auth' yang sudah kita persiapkan. Ok, kalau sudah kamu ketik langsung disimpan ya! ^^
Di script di atas, kita akan membuat objek baru dari class PDO yang disimpan dalam variabel
$con. Dan seperti biasa, kita masukkan beberapa parameter saat membuat objek $con seperti informasi data source name dan user credential. Selain konfigurasi database, dalam file dbconfig.php, kita juga akan memanggil file 'AuthClass.php' menggunakan fungsi $include_once() (bisa kita lihat di line 12). Karena dalam file AuthClass.php ini terdapat Auth Class, kita bisa membuat objek baru $user dari Auth class (lihat line 13) dengan $con sebagai parameter. [4] Membuat file Class Auth
Sekarang kita buat file AuthClass.php, lalu ketik kode berikut ini:
<?php
/**
* Class Auth untuk melakukan login dan registrasi user baru
*/
class Auth
{
private $db; //Menyimpan Koneksi database
private $error; //Menyimpan Error Message
## Contructor untuk class Auth, membutuhkan satu parameter yaitu koneksi ke database ##
function __construct($db_conn)
{
$this->db = $db_conn;
// Mulai session
session_start();
}
### Start : Registrasi User baru ###
public function register($nama, $email, $password)
{
try
{
// buat hash dari password yang dimasukkan
$hashPasswd = password_hash($password, PASSWORD_DEFAULT);
//Masukkan user baru ke database
$stmt = $this->db->prepare("INSERT INTO tbAuth(nama, email, password) VALUES(:nama, :email, :pass)");
$stmt->bindParam(":nama", $nama);
$stmt->bindParam(":email", $email);
$stmt->bindParam(":pass", $hashPasswd);
$stmt->execute();
return true;
}catch(PDOException $e){
// Jika terjadi error
if($e->errorInfo[0] == 23000){
//errorInfor[0] berisi informasi error tentang query sql yg baru dijalankan
//23000 adalah kode error ketika ada data yg sama pada kolom yg di set unique
$this->error = "Email sudah digunakan!";
return false;
}else{
echo $e->getMessage();
return false;
}
}
}
### End : Registrasi User baru ###
### Start : fungsi login user ###
public function login($email, $password)
{
try
{
// Ambil data dari database
$stmt = $this->db->prepare("SELECT * FROM tbAuth WHERE email = :email");
$stmt->bindParam(":email", $email);
$stmt->execute();
$data = $stmt->fetch();
// Jika jumlah baris > 0
if($stmt->rowCount() > 0){
// jika password yang dimasukkan sesuai dengan yg ada di database
if(password_verify($password, $data['password'])){
$_SESSION['user_session'] = $data['id'];
return true;
}else{
$this->error = "Email atau Password Salah";
return false;
}
}else{
$this->error = "Email atau Password Salah";
return false;
}
} catch (PDOException $e) {
echo $e->getMessage();
return false;
}
}
### End : fungsi login user ###
### Start : fungsi cek login user ###
public function isLoggedIn(){
// Apakah user_session sudah ada di session
if(isset($_SESSION['user_session']))
{
return true;
}
}
### End : fungsi cek login user ###
### Start : fungsi ambil data user yang sudah login ###
public function getUser(){
// Cek apakah sudah login
if(!$this->isLoggedIn()){
return false;
}
try {
// Ambil data user dari database
$stmt = $this->db->prepare("SELECT * FROM tbAuth WHERE id = :id");
$stmt->bindParam(":id", $_SESSION['user_session']);
$stmt->execute();
return $stmt->fetch();
} catch (PDOException $e) {
echo $e->getMessage();
return false;
}
}
### End : fungsi ambil data user yang sudah login ###
### Start : fungsi Logout user ###
public function logout(){
// Hapus session
session_destroy();
// Hapus user_session
unset($_SESSION['user_session']);
return true;
}
### End : fungsi Logout user ###
### Start : fungsi ambil error terakhir yg disimpan di variable error ###
public function getLastError(){
return $this->error;
}
### End : fungsi ambil error terakhir yg disimpan di variable error ###
}
?>
Setelah kamu ketik kode di atas, simpan file AuthClass.php di folder Auth.
Auth Class ini merupakan penerapan Class Diagram di atas, yang berisi fungsi-fungsi yang berhubungan dengan autentikasi pengguna aplikasi, seperti Register, login dan fungsi lainnya.
Bisa kita lihat dalam constructor, selain variabel
$db, kita juga akan menggunakan fungsi $session_start() untuk memulai session.Session adalah tempat untuk menyimpan informasi sementara ketika kamu membuka suatu website. variable session akan hilang ketika dihapus atau menutup broswer.
Selain fungsi
$session_start(), kita juga akan menggunakan fungsi $password_hash() pada method register dan fungsi $password_verify() pada method login. (Pembahasan $password_hash() sama $password_verify() sudah saya bahas di postingan beberapa waktu yang lalu) ^^[5] Membuat file login.php
Ya, file ini akan kita gunakan untuk menampilkan form login dan juga prosesnya. Sekarang buat file login.php, lalu ketik kode berikut ini:
<?php
// Lampirkan dbconfig
require_once "dbconfig.php";
// Cek status login user
if($user->isLoggedIn()){
header("location: index.php"); //redirect ke index
}
//jika ada data yg dikirim
if(isset($_POST['kirim'])){
$email = $_POST['email'];
$password = $_POST['password'];
// Proses login user
if($user->login($email, $password)){
header("location: index.php");
}else{
// Jika login gagal, ambil pesan error
$error = $user->getLastError();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form" method="post">
<?php if (isset($error)): ?>
<div class="error">
<?php echo $error ?>
</div>
<?php endif; ?>
<input type="email" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<button type="submit" name="kirim">login</button>
<p class="message">Not registered? <a href="register.php">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>
Simpan file login.php di folder Auth.
[6] Membuat file register.php
Sudah terlihat di namanya ya.. file ini akan kita gunakan untuk menampilkan form dan juga proses registrasi user. Sekarang yuk kita buat file lagi dengan register.php, lalu kita ketik kode di bawah ini ya! ^^
<?php
// Lampirkan dbconfig
require_once "dbconfig.php";
// Cek status login user
if($user->isLoggedIn()){
header("location: index.php"); //Redirect ke index
}
//Cek adanya data yang dikirim
if(isset($_POST['kirim'])){
$nama = $_POST['nama'];
$email = $_POST['email'];
$password = $_POST['password'];
// Registrasi user baru
if($user->register($nama, $email, $password)){
// Jika berhasil set variable success ke true
$success = true;
}else{
// Jika gagal, ambil pesan error
$error = $user->getLastError();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Register</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form" method="post">
<?php if (isset($error)): ?>
<div class="error">
<?php echo $error ?>
</div>
<?php endif; ?>
<?php if (isset($success)): ?>
<div class="success">
Berhasil mendaftar. Silakan <a href="login.php">login</a>.
</div>
<?php endif; ?>
<input type="text" name="nama" placeholder="nama" required/>
<input type="email" name="email" placeholder="email address" required/>
<input type="password" name="password" placeholder="password" required/>
<button type="submit" name="kirim">create</button>
<p class="message">Already registered? <a href="login.php">Sign In</a></p>
</form>
</div>
</div>
</body>
</html>
Kalau sudah diketik, kamu simpan file register.php di folder Auth.
[7] Membuat file logout.php
Yep, ini kita gunakan untuk logout dari aplikasi. Sekarang kita buat file logout.php ya!
<?php
// Lampirkan dbconfig
require_once "dbconfig.php";
// Logout! hapus session user
$user->logout();
// Redirect ke login
header('location: login.php');
?>
Kalau sudah, kita simpan file logout.php di folder yang sama. ^^
[8] Membuat file index.php
Kalau sudah login, biasanya kita dialihkan ke halaman user. Nah, file index.php ini fungsinya untuk menampilkan halaman user tersebut. Sekarang buka kembali text editor kesayanganmu. Buat file index.php, lalu ketik kode di bawah ini ya..
<?php
// Lampirkan dbconfig
require_once "dbconfig.php";
// Cek status login user
if(!$user->isLoggedIn()){
header("location: login.php"); //Redirect ke halaman login
}
// Ambil data user saat ini
$currentUser = $user->getUser();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="container">
<div class="info">
<h1>Selamat datang <?php echo $currentUser['nama'] ?></h1>
</div>
<a href="logout.php"><button type="button">Logout</button></a>
</div>
</body>
</html>
Simpan file index.php di folder Auth.
Ya, bisa kita lihat di file index.php. Pada line ke-6, ada proteksi halaman dengan mengecek status user, apakah user tersebut sudah login atau belum. Jika belum nanti akan dialihkan ke halaman login. Selain itu, kode pada line ke-11 ini digunakan untuk mengambil data user, lalu di simpan dalam variabel
$currentUser. Dan terakhir, di line ke-25 kita menampilkan nama user dan juga tombol logout pada line berikutnya.[9] Membuat file style.css
Daaaan terakhir, yuk kita buat file style.css untuk mempercantik tampilan aplikasi yang kita buat. Nah, buka kembali text editor kesayanganmu. Buat file style.css, lalu ketik kode di bawah ini ya!
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form .error {
color: #FFFFFF;
background: #ef3b3a;
border: 0;
margin: 0 0 15px;
padding: 15px;
}
.form .success {
color: #FFFFFF;
background: #30A2A0;
border: 0;
margin: 0 0 15px;
padding: 15px;
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
button:hover, button:active, button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Simpan file style.css di folder Auth.
Ya, codingnya sudah selesai. Jadi, di folder Auth ada 7 file (file php dan css).
Selanjutnya, kita coba run program yang kita buat. Buka browser kesayanganmu, lalu ketik di address bar :
localhost/auth/
Maka, akan tampil halaman login dari aplikasi kita.
Karena kita belum punya akun, yuk kita buat dulu. Klik tautan 'Create an account' untuk membuat akun. Lalu kita isi form registrasi user.
kalau sudah diisi, klik tombol 'Create'. Nanti bakalan tampil pemberitahuan kalau kita sudah berhasi mendaftar.
Nah, selanjutnya kita kembali ke halaman login dengan mengklik tautan login atau Sign In. Isi form login dengan mengisi email dan juga passwordnya, lalu klik tombol 'LOGIN'. Voila~~ kita berhasil login dan masuk ke halaman user. Dan untuk logout dari aplikasi kamu pasti sudah tahu mesti ngapain kan? ^^
Sampai bertemu di edisi berikutnya. Pertanyaan atau request bisa disampaikan melalui kolom komentar atau melalui email gungunpriatna02@gmail.com dengan subject "Belajar PHP OOP: [ASK]". Happy Coding.
***
Referensi:
Situs utama PHP @ http://www.php.net;
Manual PHP @ http://php.net/manual/en/index.php;
PDO @ http://php.net/manual/en/book.pdo.php
Password Hash @ http://php.net/manual/en/function.password-hash.php
Session @ http://php.net/manual/en/book.session.php
