Pada postingan sebelumnya kita telah membahas tentang bagaimana cara membuat form login dengan menggunakan bootstrap, tetapi itu masih tampilannya saja, belum bisa digunakan untuk proses login yang sebenarnya seperti yang ada pada Facebook, Twitter atau aplikasi-aplikasi lainnya.
Nah.. pada kesempatan kali ini saya akan berbagi tutorial tentang bagaimana cara membuat sistem login dengan menggunakan php & mysql.. (Saya asumsikan teman-teman sudah mengerti dasar dari php dan mysql)..
Oke tanpa basa basi kita langsung ke T K P..
1. Pertama siapkan sebuah database dan sebuah tabel (database dengan nama db_coba) dan (tabel dengan nama tbl_login), atur supaya struktur database dan tabel nya seperti gambar di bawah ini :
2. Masukan (Insert) satu data saja ke dalam tbl_login misalnya sbb :
- id : (kosongkan karena akan terinput otomatis)
- nama_lengkap : Shinta Purnama
- username : admin
- password : admin
4. Masukkan script dibawah pada file "index.php"
<?php
error_reporting(0);
session_start();
include 'koneksi.php';
if($_SESSION['login']){
header('location:home.php');
}else{
?>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
<h2 class="login-header">Form Login</h2>
<form method="post" class="login-container">
<p>
<input type="text" name="username">
</p>
<p>
<input type="password" name="password">
</p>
<p>
<input type="submit" value="Log in" name="submit">
</p>
</form>
<?php
if(isset($_POST['submit'])){
$user = $_POST['username'];
$pass = $_POST['password'];
if($user=="" or $pass==""){
echo '<script type="text/javascript">
alert("Username dan Password Tidak Boleh Kosong !!");window.location="index.php";
</script>';
}else{
global $koneksi;
$query = "SELECT * FROM tbl_login WHERE username='$user' and password='$pass'";
$result = mysqli_query($koneksi,$query) or die ('error fungsi');
$data = mysqli_fetch_array($result);
$cek = mysqli_num_rows($result);
if($cek>0){
echo '<script type="text/javascript">
alert("Login Suksess");window.location="home.php";
</script>';
$_SESSION['login'] = $data['id'];
}else{
echo '<script type="text/javascript">
alert("Kombinasi Username dan Password Salah");window.location="index.php";
</script>';
}
}
}
?>
</div>
</body>
</html>
<?php
}
?>
error_reporting(0);
session_start();
include 'koneksi.php';
if($_SESSION['login']){
header('location:home.php');
}else{
?>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
<h2 class="login-header">Form Login</h2>
<form method="post" class="login-container">
<p>
<input type="text" name="username">
</p>
<p>
<input type="password" name="password">
</p>
<p>
<input type="submit" value="Log in" name="submit">
</p>
</form>
<?php
if(isset($_POST['submit'])){
$user = $_POST['username'];
$pass = $_POST['password'];
if($user=="" or $pass==""){
echo '<script type="text/javascript">
alert("Username dan Password Tidak Boleh Kosong !!");window.location="index.php";
</script>';
}else{
global $koneksi;
$query = "SELECT * FROM tbl_login WHERE username='$user' and password='$pass'";
$result = mysqli_query($koneksi,$query) or die ('error fungsi');
$data = mysqli_fetch_array($result);
$cek = mysqli_num_rows($result);
if($cek>0){
echo '<script type="text/javascript">
alert("Login Suksess");window.location="home.php";
</script>';
$_SESSION['login'] = $data['id'];
}else{
echo '<script type="text/javascript">
alert("Kombinasi Username dan Password Salah");window.location="index.php";
</script>';
}
}
}
?>
</div>
</body>
</html>
<?php
}
?>
5. Masukkan script dibawah pada file "home.php"
<?php
session_start();
if($_SESSION['login']){
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Halaman Utama</title>
</head>
<body>
<h2>Halaman Utama</h2>
<a href="logout.php">logout</a>
</body>
</html>
<?php
}else{
header('location:index.php');
}
?>
session_start();
if($_SESSION['login']){
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Halaman Utama</title>
</head>
<body>
<h2>Halaman Utama</h2>
<a href="logout.php">logout</a>
</body>
</html>
<?php
}else{
header('location:index.php');
}
?>
6. Masukkan script dibawah pada file "logout.php"
<?php
session_start();
session_destroy();
echo '<script type="text/javascript">
alert("Logout Sukses !!");window.location="index.php";
</script>';
?>
session_start();
session_destroy();
echo '<script type="text/javascript">
alert("Logout Sukses !!");window.location="index.php";
</script>';
?>
7. Masukkan script dibawah pada file "koneksi.php"
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_coba';
$koneksi = mysqli_connect($host,$user,$pass,$db) or die (mysqli_error($koneksi));
?>
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_coba';
$koneksi = mysqli_connect($host,$user,$pass,$db) or die (mysqli_error($koneksi));
?>
8. Masukkan script dibawah pada file "style.css"
body {
background: #456;
font-family: 'Open Sans', sans-serif;
}
.login {
width: 400px;
margin: 16px auto;
font-size: 16px;
}
/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
margin-top: 0;
margin-bottom: 0;
}
.login-header {
background: #28d;
padding: 20px;
font-size: 1.4em;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.login-container {
background: #ebebeb;
padding: 12px;
}
/* Every row inside .login-container is defined with p tags */
.login p {
padding: 12px;
}
.login input {
box-sizing: border-box;
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
padding: 16px;
outline: 0;
font-family: inherit;
font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
background: #fff;
border-color: #bbb;
color: #555;
}
/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
border-color: #888;
}
.login input[type="submit"] {
background: #28d;
border-color: transparent;
color: #fff;
cursor: pointer;
}
.login input[type="submit"]:hover {
background: #17c;
}
/* Buttons' focus effect */
.login input[type="submit"]:focus {
border-color: #05a;
}
9. Jalankan program di localhost maka hasilnya akan sbb :
Setelah berhasil membuat sistem login dengan langkah-langkah di atas, teman-teman tinggal mendesain tampilan "home.php" dan halaman-halaman lainnya sesuai kebutuhan.
Semoga artikel ini dapat membantu teman-teman yang sedang membutuhkan referensi untuk membuat sistem login. :D
Sampai jumpa di artikel berikut nya..
Tidak ada komentar:
Posting Komentar