Setelah pada tutorial sebelumnya kita telah membuat sebuah tampilan html form register dan form login menggunakan bootstrap, pada tutorial kali ini kita akan melanjutkanya dengan membuat register Login Logout dengan PHP dan Mysqli. Register , login dan logout biasanya ada pada sebuah website yang membutuhkan izin tertentu untuk mengaksesnya. Proses Register , login dan logout diciptakan dalam rangka untuk meng authentikasi user yang masuk kedalam sistem tersebut. Autorisasi ini di set up oleh administrator, webmaster atau pemilik situs (pemegang hak tertinggi atau mereka yang ditunjuk di sistem tersebut). Contoh penggunaan register login dan logout sendiri sering kita temui pada aplikasi-aplikasi seperti facebook, instagram ,twitter dan lain-lain.
Sebenarnya proses register, login dan logout terbagi kedalam 3 tahapan yang berbeda dimana tahapan pertama adalah proses registrasi user. Registrasi bisanya ada pada sebuah sistem yang membutuhkan login untuk masuk kedalamnya. Registrasi ini digunakan sebagai pendaftaran user baru untuk memperoleh izin masuk kedalam sistem tersebut.
Menyiapkan Database MYSQL
Sebelum kita memulai proses coding nya terlebih dahulu kita harus menyiapkan database untuk menyimpan data registrasi user. Maka dari itu jalankan XAMPP kalian (pada tutorial ini saya menggunakan xampp jika kalian terbiasa dengan lampp, laragon atau dll kalianpun dapat menggunakanya).
Silahkan buka Phpmyadmin kalian melalui browser kalian masing-masing dengan mengetikkan url http://localhost/phpmyadmin dan buat database baru dengan nama belajar_authentikasi. Setelah itu buat sebuah tabel baru dengan nama users dan isikan kolomnya seperti pada gambar berikut ini :
Atau kalian juga dapat menggunakan sql berikut ini untuk mengisikan kolom-kolom pada tabel users.
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; CREATE TABLE `users` ( `id` int(11) NOT NULL, `name` varchar(70) NOT NULL, `username` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `password` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ALTER TABLE `users` ADD PRIMARY KEY (`id`); ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8; COMMIT;
Membuat Koneksi Database PHP Mysqli
Setelah database siap langkah selanjutnya yang perlu kita kerjakan untuk membuat koneksi PHP ke database mysql. Cara membuat koneksi php ke database mysql dapat dilakukan dengan cara membuat sebuah file baru dengan nama koneksi.php pada folder belajar-authentikasi yang sebelumnya telah kalian buat. Setelah itu tambahkan sintak koneksi php kedalam file yang telah kalian buat :
<?php
$host = 'localhost';
$user = 'root'; // diisi dengan user database kalian biasanya
// defaultnya bernama root jika kita belum
// merubahnya
$password = ''; //diisi dengan password database kalian biasanya
// defaultnya kosong
$db = 'belajar_authentikasi'; //diisi dengan nama database kalian
$con = mysqli_connect($host, $user, $password, $db) or die(mysqli_error());
?>
Kita telah berhasil membuat koneksi ke database mysql . Untuk melakukan koneksi ke database mysql pada file php lainya kita perlu mengincludekan file koneksi ini dalam file php yang membutuhkan koneksi ke database. Selanjutnya kita akan Membuat login dan register dengan PHP , namun sebelum membuat proses login terlebih dahulu kita harus membuat file register .
Membuat Register PHP dengan Mysqli
Dalam contoh saya kali ini , saya telah membuat registrasi user di PHP menggunakan mysqli .
Skenario dari program yang telah saya buat kali ini adalah ketika user membuka halaman register maka akan didapati sebuah form untuk menginputkan data informasi user seperti nama,username,password serta email. Pengisian data-data ini sifatnya wajib harus terisi semua sehingga ketika user tidak menginputkan salah satu atau bahkan semua inputan maka akan didapati pesan error. Selain itu saya juga melakukan validasi terhadap password yang diinputkan user untuk memastikan bahwa password yang diinputkan user telah benar. Ketika user telah berhasil melakukan registrasi maka data akan disimpan kedalam sebuah database mysql. Untuk keamanan sebelum password disimpan ke database mysql sebelumnya password harus di hashing terlebih dahulu untuk mengamankan informasi user ketika ada peretas yang berhasil masuk ke database sistem. Setelah data berhasil tersimpan di database MYSQL maka user akan diredirect ke halaman index.php serta data user akan disimpan pada sebuah session di register.php. Data pada session inilah yang akan digunakan untuk memvalidasi user apakah user telah berhasil registrasi/login atau belum.
Proses Coding Register PHP MYSQLI
Setelah database telah siap semua kemudian buka folder dengan nama belajar-authentikasi yang sebelumnya telah kalian buat pada tutorial sebelumnya Contoh Form Registrasi Bootstrap dan Cara Membuatnya. Kemudian buka file register.php dan modifikasi menjadi seperti berikut ini :
<?php
//menyertakan file program koneksi.php pada register
require('koneksi.php');
//inisialisasi session
session_start();
$error = '';
$validate = '';
//mengecek apakah form registrasi di submit atau tidak
if( isset($_POST['submit']) ){
// menghilangkan backshlases
$username = stripslashes($_POST['username']);
//cara sederhana mengamankan dari sql injection
$username = mysqli_real_escape_string($con, $username);
$name = stripslashes($_POST['name']);
$name = mysqli_real_escape_string($con, $name);
$email = stripslashes($_POST['email']);
$email = mysqli_real_escape_string($con, $email);
$password = stripslashes($_POST['password']);
$password = mysqli_real_escape_string($con, $password);
$repass = stripslashes($_POST['repassword']);
$repass = mysqli_real_escape_string($con, $repass);
//cek apakah nilai yang diinputkan pada form ada yang kosong atau tidak
if(!empty(trim($name)) && !empty(trim($username)) && !empty(trim($email)) && !empty(trim($password)) && !empty(trim($repass))){
//mengecek apakah password yang diinputkan sama dengan re-password yang diinputkan kembali
if($password == $repass){
//memanggil method cek_nama untuk mengecek apakah user sudah terdaftar atau belum
if( cek_nama($name,$con) == 0 ){
//hashing password sebelum disimpan didatabase
$pass = password_hash($password, PASSWORD_DEFAULT);
//insert data ke database
$query = "INSERT INTO users (username,name,email, password ) VALUES ('$username','$nama','$email','$pass')";
$result = mysqli_query($con, $query);
//jika insert data berhasil maka akan diredirect ke halaman index.php serta menyimpan data username ke session
if ($result) {
$_SESSION['username'] = $username;
header('Location: index.php');
//jika gagal maka akan menampilkan pesan error
} else {
$error = 'Register User Gagal !!';
}
}else{
$error = 'Username sudah terdaftar !!';
}
}else{
$validate = 'Password tidak sama !!';
}
}else {
$error = 'Data tidak boleh kosong !!';
}
}
//fungsi untuk mengecek username apakah sudah terdaftar atau belum
function cek_nama($username,$con){
$nama = mysqli_real_escape_string($con, $username);
$query = "SELECT * FROM users WHERE username = '$nama'";
if( $result = mysqli_query($con, $query) ) return mysqli_num_rows($result);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- costum css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid mb-4">
<!-- justify-content-center untuk mengatur posisi form agar berada di tengah-tengah -->
<section class="row justify-content-center">
<section class="col-12 col-sm-6 col-md-4">
<form class="form-container" action="register.php" method="POST">
<h4 class="text-center font-weight-bold"> Sign-Up </h4>
<?php if($error != ''){ ?>
<div class="alert alert-danger" role="alert"><?= $error; ?></div>
<?php } ?>
<div class="form-group">
<label for="name">Nama</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Masukkan Nama">
</div>
<div class="form-group">
<label for="InputEmail">Alamat Email</label>
<input type="email" class="form-control" id="InputEmail" name="email" aria-describeby="emailHelp" placeholder="Masukkan email">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username">
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" id="InputPassword" name="password" placeholder="Password">
<?php if($validate != '') {?>
<p class="text-danger"><?= $validate; ?></p>
<?php }?>
</div>
<div class="form-group">
<label for="InputPassword">Re-Password</label>
<input type="password" class="form-control" id="InputRePassword" name="repassword" placeholder="Re-Password">
<?php if($validate != '') {?>
<p class="text-danger"><?= $validate; ?></p>
<?php }?>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block">Register</button>
<div class="form-footer mt-2">
<p> Sudah punya account? <a href="login.php">Login</a></p>
</div>
</form>
</section>
</section>
</section>
<!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan yang terakhit Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Membuat Halaman Index.php
Setelah membuat halaman register kemudian buat sebuah file lagi didalam folder belajar-authentikasi dengan nama index.php . File ini nantinya akan digunakan sebagai halaman home yang akan ditampilkan ketika user berhasil melakukan registrasi. Kemudian buka file index.php dan isikan script php berikut ini di dalamnya :
<?php
//inisialisasi session
session_start();
//mengecek username pada session
if( !isset($_SESSION['username']) ){
$_SESSION['msg'] = 'anda harus login untuk mengakses halaman ini';
header('Location: login.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-dark bg-dark text-light '>
<div class="container">
<a href="index.php" class="navbar-brand">HOME</a>
<button class="navbar-toggler" type="button" data-togle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ml-auto pt-2 pb-2">
<li class="nav-item">
<a href="index.php" class="nav-link text-light">Home</a>
</li>
<li class="nav-item ml-4">
<a href="logout.php" class="nav-link text-light"> Log Out </a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-light" style="height:90vh">
<div class="container">
<h1 class="display-4 text-center mt-4">HOME</h1>
<p class="lead text-center">LOGIN OR REGISTER SUCCESSFULLY ):</p>
</div>
</div>
</body>
<!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan yang terakhit Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Setelah membuat register php menggunakan mysqli , pada tutorial selanjutnya kita akan membuat login user sehingga user yang sudah melakukan registrasi tidak perlu melakukan pendaftaran lagi untuk dapat masuk kedalam aplikasi.
Membuat Login Dengan PHP
Setelah kita berhasil membuat sebuah sistem registrasi user maka pada tahap selanjutnya yang perlu kita lakukan adalah membuat login dengan php mysqli.
Skenario dari script login yang akan kita buat ini adalah ketika user membuka halaman login.php maka akan didapati sebuah form untuk menginputkan username dan password yang telah didaftarkan oleh user sebelumnya. Pengisian data-data ini sifatnya wajib harus terisi semua sehingga ketika user tidak menginputkan salah satu atau bahkan semua inputan maka akan didapati pesan error. Proses login dimulai dengan mengecek apakah username yang di inputkan user ada tidak di database. Jika ada maka data password yang ada di database selanjutnya dilakukan pencocokan dengan data password yang di inputkan user pada form login yang sebelumnya telah di lakukan proses hashing. Jika didapati kecocokan antara password dari database dengan password inputan user yang telah di hashing maka user akan diredirect ke halaman index.php serta data user akan disimpan pada sebuah session . Penyimpanan data user pada session ini bertujuan agar ketika user keluar dari sistem tanpa melakukan logout maka ketika user masuk ke sistem kembali , user tidak perlu melakukan login kembali.
Proses Coding Login PHP MYSQLI
Cara membuat login dengan PHP menggunakan session dapat dilakukan dengan cara sebagai berikut ini. yang pertama buat sebuah file dengan nama login.php pada folder yang sama dengan file register sebelumnya. Kemudian copykan script login php mysqli berikut ini :
<?php
//menyertakan file program koneksi.php pada register
require('koneksi.php');
//inisialisasi session
session_start();
$error = '';
$validate = '';
//mengecek apakah sesssion username tersedia atau tidak jika tersedia maka akan diredirect ke halaman index
if( isset($_SESSION['username']) ) header('Location: index.php');
//mengecek apakah form disubmit atau tidak
if( isset($_POST['submit']) ){
// menghilangkan backshlases
$username = stripslashes($_POST['username']);
//cara sederhana mengamankan dari sql injection
$username = mysqli_real_escape_string($con, $username);
// menghilangkan backshlases
$password = stripslashes($_POST['password']);
//cara sederhana mengamankan dari sql injection
$password = mysqli_real_escape_string($con, $password);
//cek apakah nilai yang diinputkan pada form ada yang kosong atau tidak
if(!empty(trim($username)) && !empty(trim($password))){
//select data berdasarkan username dari database
$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($con, $query);
$rows = mysqli_num_rows($result);
if ($rows != 0) {
$hash = mysqli_fetch_assoc($result)['password'];
if(password_verify($password, $hash)){
$_SESSION['username'] = $username;
header('Location: index.php');
}
//jika gagal maka akan menampilkan pesan error
} else {
$error = 'Register User Gagal !!';
}
}else {
$error = 'Data tidak boleh kosong !!';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- costum css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid mb-4">
<!-- justify-content-center untuk mengatur posisi form agar berada di tengah-tengah -->
<section class="row justify-content-center">
<section class="col-12 col-sm-6 col-md-4">
<form class="form-container" action="login.php" method="POST">
<h4 class="text-center font-weight-bold"> Sign-In </h4>
<?php if($error != ''){ ?>
<div class="alert alert-danger" role="alert"><?= $error; ?></div>
<?php } ?>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Masukkan username">
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" id="InputPassword" name="password" placeholder="Password">
<?php if($validate != '') {?>
<p class="text-danger"><?= $validate; ?></p>
<?php }?>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block">Sign In</button>
<div class="form-footer mt-2">
<p> Belum punya account? <a href="register.php">Register</a></p>
</div>
</form>
</section>
</section>
</section>
<!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, dan yang terakhit Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Membuat logout PHP MySQLi
Tahap terakhir dari tutorial membuat register login logout dengan PHP dan Mysqli adalah membuat form untuk logout. Fungsi logout sendiri berguna ketika user ingin keluar dari sistem sehingga informasi user yang tadinya disimpan di session akan dihapus semua sehingga ketika user akan masuk kembali ke sistem user harus login kembali. Cara membuat logout dengan php dan MySQLI adalah sebagai berikut ini.
Yang pertama buat sebuah file dengan nama logout.php pada folder yang sama dengan file register dan file login sebelumnya. Kemudian copykan script logout php mysqli berikut ini pada file logout.php :
<?php
session_start(); //inisialisasi session
if(session_destroy()) {//menghapus session
header("Location: index.php"); //jika berhasil maka akan diredirect ke file index.php
}
?>
Hasil Script Program Login, Register dan Logout
Tampilan halaman register.php
Tampilan halaman login.php
Tampilan Halaman index.php
Sekian artikel kali ini tentang Membuat register Login Logout dengan PHP dan Mysqli untuk sourcode lengkapnya kalian dapat melihatnya di link berikut ini download script login php .
Pencarian Terkait :
- cara membuat form daftar, login dan logout dengan php mysql
- cara membuat login dengan php menggunakan session
- membuat login dengan php mysqli
- registerphp mysqli
- cara membuat database login di xampp
mujahis dujud
kalau setelah register ngga langsung masuk ke halaman index , tapi ke halaman login itu harus gmn?
firman
header(‘Location: index.php’); pada file register.php di rubah jadi header(‘Location: login.php’); kemudian $_SESSION[‘username’] = $username; dihapus saja
cndra
min ko saya gagal regist user terus yak?
firman
udah sesuai kah user dan password databasenya pada file koneksi.php …
her
kalo pas mencet login selalu balik ke halaman awal knp y
Iyan
permisi min, kalau udah buat file untuk website sendiri terus cara gabungin dengan login logout sama register nya gimana??
Iyan
permisi min, kalau udah buat file untuk website sendiri terus cara gabungin dengan file login logout sama register nya gimana??
firman
tergantung kebutuhan apakah semua tampilan website yang kamu buat butuh proses login atau tidak , jika semua butuh proses login ya berarti halaman login di kasih dihalaman pertama sebelum user mengakses halaman lain….nanti di halaman website yang telah kamu buat tinggal dicek sessionnya saja ,kalau user belum login tinggal diarahin lagi ke halaman login… coba kamu cek di file index.php di artikel saya lagi dan perhatikan bagian atas scribt untuk pengecekan session
iyan
jadi gini min kan saya ada tugas pembuatan web nha rencana nya mau saya kasih login, untuk website nya sudah jadi terus cara penggabungan agar masuk ke website harus login dahulu bagaimana?(harus login dahulu agar bisa meng akses web) inti nya seperti itu min
Iyan
mohon bantuannya min:)
firman
coba dulu aja kalau ada error nanti komen lagi, insyaallah saya jawab
firman
jadi kamu tinggal rubah file index.php pada tutorial ini dengan halaman website yang telah kamu buat, terus perhatikan scribt php nya untuk mengecek sessionnya, scribt tersebut kamu taruh disetiap halaman web yang sudah kamu buat yang membutuhkan akses login kalau mau membukanya… kunci ada pada session ini sih kalau sessionnya gak ada maka dikembalikan ke halaman login tetapi kalau sessionnya ada user dapat mengakses halamanya.. gitu sih konsep sederhananya..
Asep
min saya sudah mengikuti tutor dari awal sampai akhir sudah saya teliti juga tapi kenapa letak form login nya di samping kiri ya? tidak di tengah? solusinya min
Asep
saya sudah mengikuti tutor dari awal sampai akhir sudah saya teliti juga tapi kenapa letak form login nya di samping kiri ya? tidak di tengah? solusinya dong
firman
kamu bisa lihat di tutorial saya sebelumnya contoh form registrasi terus perhatikan file register.php cari scribt
Putra
Min kenapa punya saya username sudah terdaftar terus ya padahal belum
Haidar
Min ada tutor di youtubenya ngga
firman
wah maaf belum sempet mas mungkin next time kalo kerjaan udah agak longgar
luvi
Min ko saya gagal registrasi user terus ya?
firman
ada errornya tidak mas ? … pastikan username dan password sesuai ya
raka
saya mau tanya, saya sudah registrasi pas saya nyoba login kok malah tetap di halaman login ya?
sinta
saya tidak bisa login padahal username dan password sudah benar, itu bagaimana ya? mohon bantuannya