Pada postingan sebelumnya kita telah membahas perihal bagaimana cara menciptakan form login dengan memakai bootstrap, tetapi itu masih tampilannya saja, belum sanggup dipakai untuk proses login yang sesungguhnya menyerupai yang ada pada Facebook, Twitter atau aplikasi-aplikasi lainnya.
Nah.. pada kesempatan kali ini aku akan membuatkan tutorial perihal bagaimana cara menciptakan sistem login dengan memakai php & mysql.. (Saya asumsikan teman-teman sudah mengerti dasar dari php dan mysql)..
Oke tanpa basa bau kita pribadi ke T K P..
1. Pertama siapkan sebuah database dan sebuah tabel (database dengan nama db_coba) dan (tabel dengan nama tbl_login), atur biar struktur database dan tabel nya menyerupai gambar di bawah ini :
2. Masukan (Insert) satu data saja ke dalam tbl_login contohnya sbb :
- id : (kosongkan sebab 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 aktivitas di localhost maka akhirnya akan sbb :
Setelah berhasil menciptakan sistem login dengan langkah-langkah di atas, teman-teman tinggal mendesain tampilan "home.php" dan halaman-halaman lainnya sesuai kebutuhan.
Semoga artikel ini sanggup membantu teman-teman yang sedang membutuhkan rujukan untuk menciptakan sistem login. :D
Sampai jumpa di artikel berikut nya..