S. Widodo
Didalam sebuah website tentunya memiliki hak akses kepada member untuk bisa menggunakan aplikasi atau konten yang diberikan oleh web itu, untuk itu web harus memiliki form registrasi maupun login kepada member oleh karena itu kami s-widodo.com akan memberikan tutorial mengenai hak akses atau registrasi member, sebelumnya tutorial hak akses sudah pernah dibahas pada artikel sebelumnya diantaranya membuat form login tanpa menggunakan database dan Membuat form multi login, untuk itu kita akan membahas cara membuat sebuah form registrasi dan login pada member, disini saya menggunakan beberapa halaman seperti halaman login,registrasi dan member untuk halaman forgot atau reset password pada member jika suatu saat si member lupa dengan passwordnya anda bisa membuka artikel ini Cara membuat fasilitas forgot password, pembuatan form login dan registrasi ini kami mengunakan framework bootstrap jadi anda bisa siapkan file css dan Js Bootrap untuk filenya sendiri bisa di download Webnya.
untuk itu langsung aja kita bahas bersama-sama :
1. Siapkan bahan-bahan kalian diantaranya
Editor Web,Xammp,Borwser dan Segelas kopi hitam bagi yang suka.
2. Sekarang buatlah database dengan nama tutorial dan buat tabel dengan nama member seperti dibawah ini:
3. Silahkan Buat folder dengan nama tutorial dan halaman index.php halaman ini nanti akan buat untuk form login
Sekarang panggil file bootstrap.css dan bootstrap.js dalam file index.php
<link rel="stylesheet" href="assets/bootstrap.min.css">
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap.min.js"></script>
Jangan lupa tambahkan plugin jquery.js semua file diatas di simpan dalam 1 folder assets
4. Sekerang buatlah koneksi database tambah file baru dengan nama koneksi.php dan masukkan scipt dibwah ini :
<?php session_start();
date_default_timezone_set("Asia/Jakarta");
$Host = "localhost";
$User = "root";
$Pass = "";
$Db_name = "tutorial";
$mysqli = new mysqli( $Host, $User, $Pass, $Db_name );
if ($mysqli->connect_error){
echo 'Gagal koneksi ke database';
} else { } ?>
Sekarang include koneksi.php di paling atas kode <html>
5. Buatlah navigasi menu simpan dengan nama menu-nav.php dan simpan didalam folder assets
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">S-WIDODO.COM</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="./">Login<span class="sr-only">(current)</span></a></li> <li><a href="./registrasi.php">Registrasi</a></li> <li><a href="./member.php">Member</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="./logout.php">Logout</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
Setelah jadi jangan lupa di include kelaman halaman index.php taruh dibwah <body>
6. Sekarang kita tinggan buat form login seperti dibawah ini :
<form class="row-border" name="form1" action="" method="post"> <div class="form-group"> <label>Username <span class="required">*</span></label> <input name="member_username" type="text" class="required form-control" required> </div> <div class="form-group"> <label>Password <span class="required">*</span></label> <input name="member_password" type="password" class="form-control" required> </div> <div class="form-actions"> <button class="btn btn-warning" type="reset">Reset</button> <button class="btn btn-primary" name="login" type="submit">Login</button> </div> </form> </div></div>
Setelah itu buatlah sebuah file login-proses.php simpan didalam folder include dan conoth scriptnya seperti dibawah ini :
<?php if (isset($_POST['login'])) {
$error = array();
if (empty($_POST['member_username'])) {
$error[] = 'Username tidak boleh kosong';
} else {
$member_username=mysqli_real_escape_string($mysqli, $_POST['member_username']);
}
if (empty($_POST['member_password'])) {
$error[] = 'Password tidak boleh kosong';
} else {
$member_password=mysqli_real_escape_string($mysqli, md5($_POST['member_password']));
}
if (empty($error)){
$member_jam_tgl_login =date("h:i:s-j-M-Y");
$login="SELECT * FROM member WHERE member_username='$member_username' AND member_password='$member_password'";
$result = $mysqli->query($login) or die($mysqli->error.__LINE__);
$rows= $result->fetch_assoc();
extract($rows);
// Apabila username dan password ditemukan
if($result->num_rows > 0){
$_SESSION['member_id'] = $member_id;
header('location:./member.php');
echo "<meta http-equiv='refresh' content='0; url=./member.php";
$update="UPDATE member SET member_status='Online', member_jam_tgl_login='$member_jam_tgl_login' WHERE member_id='$member_id'" or die($conn->error.__LINE__);
$mysqli->query($update);
} else{
echo'<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Username atau Password salah..!</div>';
}
}
else {echo'<div class="alert alert-danger alert-dismissable"><ul>';
foreach ($error as $key => $values) {
echo'<li>'.$values.'</li>';}
echo'</ul></div>';
}
unset($_POST['login']);}
Penting setelah proses membuat script untuk login sekarang include di atas form login yang tadi kita buat require_once"include/login-proses.php";
7. Sekarang anda sudah bisa login, lantas bagaimana buat registrasinya kita lanjutkan lagi ke tahap registasi
Buatlah halaman baru dengan nama registrasi.php dan jangan lupa ulangi lagi include nav-menunya seperti tutorial nomer 5
Setelah itu buatlah form registrasinya seperti dibawah ini
<form class="row-border" name="form1" action="" method="post"> <div class="form-group"> <label>Nama Lengkap <span class="required">*</span></label> <input name="member_nama" type="text" class="required form-control"> </div> <div class="form-group"> <label>Email <span class="required">*</span></label> <input name="member_email" type="email" class="required form-control"> </div> <div class="form-group"> <label>Username <span class="required">*</span></label> <input name="member_username" type="text" class="required form-control"> </div> <div class="form-group"> <label>Password <span class="required">*</span></label> <input name="member_password" type="password" class="required form-control"> </div> <div class="form-actions"> <button class="btn btn-warning" type="reset">Reset</button> <button class="btn btn-primary" name="registrasi" type="submit">Registrasi</button> </div> </form> </div></div>
Setelah itu ikutin tutorial nomer 6 prosesnya hampir sama buatlah sebuah file registrasi-proses.php simpan didalam folder include diatas from dan contoh scriptnya seperti dibawah ini :
<?PHP
if (isset($_POST['registrasi'])) {
$error = array();
if (empty($_POST['member_nama'])) {
$error[] = 'Nama lengkap tidak boleh kosong';
} else {
$member_nama =mysqli_real_escape_string($mysqli, $_POST['member_nama']);
}
if (empty($_POST['member_username'])) {
$error[] = 'Username tidak boleh kosong';
} else {
$member_username =mysqli_real_escape_string($mysqli, $_POST['member_username']);
}
if (empty($_POST['member_password'])) {
$error[] = 'Kata sandi tidak boleh kosong'; }
if(strlen($_POST['member_password']) < 5 || strlen($_POST['member_password']) > 15){
$error['password'] = "Masukkan Pasword minimal 5 karakter maksimal 15 karakter";
} else {
$member_password = mysqli_real_escape_string($mysqli,md5($_POST['member_password']));}
$member_email = mysqli_real_escape_string($mysqli, $_POST['member_email']);
if (!filter_var($member_email, FILTER_VALIDATE_EMAIL)) {
$error[] = 'Alamat Email yang anda masukkan salah';
} else {
$member_email = mysqli_real_escape_string($mysqli, $_POST['member_email']);
}
$member_tgl_daftar=date("j-M-Y");
$member_jam_tgl_login =date("h:i:s-j-M-Y");
if(!empty($_SERVER['HTTP_CLIENT_IP'])){
$member_ip=$_SERVER['HTTP_CLIENT_IP'];
}
elseif(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
$member_ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
}
else{
$member_ip=$_SERVER['REMOTE_ADDR'];
}
if (empty($error)){
// query untuk mencari email yg sdh ada di database
$query ="SELECT * FROM member WHERE member_email ='$member_email'";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
if(!$result->num_rows > 0){
$insert="INSERT INTO member values('','$member_nama', '$member_username', '$member_password', '$member_email', '$member_tgl_daftar', '$member_ip', '$member_jam_tgl_login', 'Ofline')"
or die($mysqli->error.__LINE__);
if($mysqli->query($insert) === false) {
echo'<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Maaf anda tidak bisa mendaftar karena sistem kami ada kesalahan..!</div>';
}
else {
echo'<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Pendaftaran menjadi member berhasil..!</div>';
}
}
else {
echo'<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Maaf Sebelumnya akun ini sudah terdaftar...!</div>';
}
}
else {echo'<div class="alert alert-danger alert-dismissable"><ul>';
foreach ($error as $key => $values) {
echo'<li>'.$values.'</li>';}
echo'</ul></div>';
}
unset($_POST['registrasi']);
mysqli_close($mysqli); }
Penting setelah proses membuat script untuk login sekarang include di atas form login yang tadi kita buat require_once"include/login-proses.php";
Sekarang sudah bisa digunakan form registrasi dan loginya untuk itu kita harus membuat halaman member, dihalaman member ini kami berikan contoh simplenya
8. Sekarang buat halaman baru dengan nama member.php, sama seperti biasa panggil nav menunya setelah itu kita buat session untuk menyimpan id user maupun username ke server conothnya seperti dibawah ini :
if(empty($_SESSION['member_id'])) {
header ('location:./');//jika member tidak login
} else{//jika member login
}?>
Untuk Script keselurhanya seperti ini :
<?PHP require_once"koneksi.php";
if(empty($_SESSION['member_id'])) {
header ('location:./');
} else{
$query = "SELECT * FROM member WHERE member_id='$_SESSION[member_id]'"; $no=0;
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$rows= $result->fetch_assoc();
extract($rows);
echo'
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial membuat form Registrasi dan Login</title>
<link rel="stylesheet" href="assets/bootstrap.min.css">
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap.min.js"></script>
<style>
body { background:#eeeeee;}
</style>
</head>
<body>';
require_once"./assets/menu-nav.php";
echo'
<div class="container"><div class="row">
<h3>Selamat Datang '.$member_nama.'</h3>
<hr>
<div class="panel panel-default">
<div class="panel-heading">Daftar Member</div>
<div class="panel-body">
<table class="table no-margn">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Tanggal Daftar</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
if($result->num_rows > 0){$no++;
echo'
<tr>
<td>'.$no.'</td>
<td>'.$member_nama.'</td>
<td>'.$member_username.'</td>
<td>'.$member_email.'</td>
<td>'.$member_tgl_daftar.'</td>
<td>'.$member_status.'</td>
</tr>';}
echo'
</tbody>
</table>
</div>
</div>
</div></div>
</body>
</html>';}
9. Selesai gan yang terakhit kita tinggal buat logoutnya seperti dibawah ini
<?PHP
require_once"koneksi.php";
$member_id=$_SESSION['member_id'];
$update="UPDATE member SET member_status='Ofline' WHERE member_id='$_SESSION[member_id]'" or die($conn->error.__LINE__);
$mysqli->query($update);
session_destroy();
unset($_SESSION['member_id']);
header("location:./");
Buat kalian yang masih belum paham anda bisa download contoh form registrasi dan login dibwah ini :
Komentar