Assalamu'alaikum Wr.Wb
Berjumpa lagi dengan saya, Dwi Febriandaru. Seperti janji saya pada tutorial terdahulu, Kali ini kita akan membahas tentang cara membuat
Membuat Sistem Login dengan Session di PHP & MySQLi. Untuk form loginnya saya akan menggunakan desain form dari posting kemarin, bagi yang belum membacanya saya sarankan untuk membacanya terlebih dahulu demi kelancaran tutorial kali ini.
Membuat Design Halaman Login dengan CSS
oke, langsung saja kita menuju tutorialnya.
untuk skema file dan directorynya bisa dilihat digambar
pertama - tama buatlah database dengan nama
login dan buat table dengan nama
user atau bisa download
DISINI
setelah database selesai dibuat, saatnya membuat kode untuk koneksi ke database tersebut.
Copy kode dibawah dan simpan dengan nama
koneksi.php
<?php
$dbhost = 'localhost';
$dbuser = 'root'; //ini hanya berlaku di Xampp
$dbpass = ''; //ini hanya berlaku di Xampp
$dbname = 'login';
$connect = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die('koneksi gagal');
?>
Setelah kode diatas sobat simpan, selanjutnya kita akan membuat halaman awalnya.
Copy kode dibawah dan simpan dengan nama
index.php.
<html>
<head>
<title>Contoh Form Login</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="badan">
<div class="kepala">
<p class="kepalatext">» Dwi Febriandaru Site «</p>
</div>
<div class="bingkai">
<div style="padding-top:10px; padding-left:10px; padding-right:10px; color:#030033;">
<?php
session_start();
if(empty($_SESSION['username'])){
echo "<center>TAMPILAN SEBELUM LOGIN</center><br/>Maaf sepertinya anda belum Login,silahkan tekan link login dibawah <br/>
<a href='login.php'><center>Login</center></a>";
}else{
echo "<center>TAMPILAN SETELAH LOGIN<br/>Selamat Anda Berhasil Login<br/><a href='logout.php'>Logout</a></center>";
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Halaman diatas adalah halaman awal yaitu halaman yang pertama kali akan ditampilkan saat user menggunjungi web sobat.
Langkah selanjutnya saatnya membuat form loginnya.
Copy kode dibawah dan simpan dengan nama
login.php.
<html>
<head>
<title>Contoh Form Login</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="badan">
<div class="kepala">
<p class="kepalatext">» Login «</p>
</div>
<form class="bingkai" action="proseslogin.php" method="POST">
<div>
<input class="email" type="text" name="username" placeholder="Masukkan Username"/>
<input class="passwd" type="password" name="password" placeholder="Masukkan Pasword"/>
</div>
<div class="bawah">
<input class="daftar" type="submit" name="submit" value="» Login «">
<p class="footertext">© 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Tampilan dari kode diatas kurang lebih adalah seperti gambar dibawah ini.
Selanjutnya, sampailah kita pada step yang sangat penting. karena disinilah sebenarnya inti dari tutorial ini, yaitu membuat kode untuk proses loginnya.
Oke, Copy kode dibawah dan simpan dengan nama
proseslogin.php.
<?php
include "koneksi.php";
$username = $_POST['username'];
$pass = $_POST['password'];
$login = mysqli_query($connect, "SELECT * FROM user WHERE username = '$username' AND password='$pass'");
$row=mysqli_fetch_array($login);
if ($row['username'] == $username AND $row['password'] == $pass)
{
session_start();
$_SESSION['username'] = $row['username'];
$_SESSION['password'] = $row['password'];
header('location:index.php');
}
else
{
echo "<center><br><br><br><br><br><br><b>LOGIN GAGAL! </b><br>
Username atau Password Anda tidak benar.<br>";
echo "<br>";
echo "<input class='btn btn-blue' type=button value='ULANGI LAGI' onclick=location.href='login.php'></a></center>";
}
?>
Sampai sejauh ini Sistem Login dengan Session kita sudah 80% selesai. Kita tinggal membuat 1 file lagi, Yakni file untuk menghapus session.
Oke, Copy kode dibawah dan simpan dengan nama
logout.php.
<?php
session_start();
session_destroy();
header('location:index.php');
?>
Dan selesai sudah tahapan dalam membuat Login dengan Session. Saatnya untuk uji coba dengan browser sobat masing - masing.
Untuk lebih jelasnya sobat bisa pelajari pada demo berikut ini :
DEMO
Username : admin
password : admin
Atau bila sobat malas untuk membuat file satu - persatu bisa download source codenya :
DOWNLOAD
Mungkin sekian saja tutorial kali ini, bila ada pertanyaan, kritik maupun saran bisa di post di komentar.
Happy Coding !!!
Wassalamu'alaikum Wr.Wb
