Oke kali ini untuk yang pertama kalinya saya ingin berbagi tutorial mengenai cara Membuat login sederhana dengan PHP dan MySQL, sesuai dengan judul diatas. Untuk membuat Login seperti tampilan diatas, kita memerlukan bantuan Framework tambahan yaitu bootstrap, untuk penjelasan lebih rinci apa itu bootstrap mungkin nanti lain kesempatan akan dibahas tentang apa itu bootstrap, oke deh langsung aja nih untuk tahapan-tahapannya bisa dilihat sendiri, cekibrot... Hahaha
- Pertama, kita siapkan database untuk login tersebut, disini yang saya gunakan adalah XAMPP, okedeh langsung aja kita buat database dengan nama tutorial, create...
- Kedua, pada database tutorial kita buat tabel dengan nama admin, jumlah kolom yaitu 3, Goo...
- Ketiga, kita inputkan username, password, level, dengan tipe data yang sama yaitu varchar, dengan length username (50), password (50), level (10), jangan lupa disini untuk username index nya kita ubah Primary, Save...
- Keempat, selesai database dengan tabel admin sudah kita buat, lalu pada tabel admin kita klik insert...
- Kelima, maka muncul kolom-kolom seperti gambar dibawah ini, lalu kita inputkan username admin, password admin, level admin, Goo...
Oke, langsung aja nih kita buat folder di htdocs dengan nama login (terserah kalian) dan di dalam folder tersebut kita siapkan alat bantu yaitu bagian dari bootstrap, css, fonts, js, seperti gambar dibawah ini, bagi kalian yang belum mempunyai bisa di download disini...
- Pertama, kita buat file dengan nama index.php, dan masukan kode seperti dibawah ini, perlu diingat untuk username dan password pada input name nya disesuaikan...
<!DOCTYPE html>- Kedua, setelah index.php kita sudah buat, karena disini untuk header dengan footer nya saya pisahkan dan saya panggil kembali seperti yang tertera pada source code index.php diatas, maka disini kita buat kembali yaitu head.php, dan footer.php, masukan kode seperti dibawah ini, yang pertama untuk head.php, cekibrot...
<html lang="en">
<?php require_once "head.php" ?>
<body onLoad="document.login.username.focus();" style="padding-top:100px;padding-bottom:100px;">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><strong> Info!</strong> Untuk dapat mengakses halaman Admin ini diwajibkan untuk Login terlebih dahulu.
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<center><h3><span class="glyphicon glyphicon-user"></span> Administrator</h3></center>
</div>
<div class="panel-body">
<form name="login" action="cek_login.php" method="POST" onSubmit="return validasi(this)" class="form-3" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="username">Username :</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="Username" title="Username">
</div>
</div>
<div class="form-group">
<label for="password">Password :</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" name="password" placeholder="Password" title="Password">
</div>
</div>
<div class="panel-footer">
<button type="submit" name="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Login</button>
<div class="pull-right">
<button type="reset" name="reset" class="btn btn-danger"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?php require_once "footer.php"; ?>
</body>
</html>
<head>lalu untuk footer.php, cekibrot...
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Administrator</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="js/jquery-1.11.3.js"></script>
<script language="javascript">
function validasi(form){
if (form.username.value == "") {
alert("Anda belum mengisikan Username.");
form.username.focus();
return (false);
}
if (form.password.value == "") {
alert("Anda belum mengisikan Password.");
form.password.focus();
return (false);
}
return (true);
}
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav class="navbar navbar-default navbar-fixed-bottom">- Ketiga, di index.php pada form action disitu ada yang namanya cek_login.php, sesuai dengan namanya fungsi cek_login.php disini untuk mengecek login pada saat tampilan awal index.php pertama kali di load oleh browser, maka disini kita buat kembali dengan nama cek_login.php, cekibrot...
<div class="container">
<p class="navbar-text"><strong>Copyright © 2015 <a href="catatan-rizkihp.blogspot.co.id" target="_blank">Catatan Rizki</a></strong></p>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/bootstrap.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery1.11.3.js"></script>
<?php- Keempat, cek_login.php selesai, lalu pada cek_login.php diatas ada yang namanya config/koneksi.php, disini kembali lagi kita buat folder dengan nama config dan buat file baru dengan nama koneksi.php, seperti nama nya koneksi.php disini berfungsi untuk menghubungkan dengan database yang sudah kita buat sebelumnya, oke langsung aja deh nih masukan kode dibawah ini untuk koneksi.php, cekibrot...
include "config/koneksi.php";
$username = $_POST['username'];
$pass = $_POST['password'];
$login = mysql_query("SELECT * FROM admin WHERE username='$username' AND password='$pass'");
$ketemu = mysql_num_rows($login);
$r = mysql_fetch_array($login);
// Apabila username dan password ditemukan
if ($ketemu > 0){
session_start();
$_SESSION['namauser'] = $r['username'];
$_SESSION['passuser'] = $r['password'];
$_SESSION['leveluser'] = $r['level'];
header('location:admin.php');
}
else{
require_once "head.php";
echo "
<div class='alert alert-danger' role='alert'>
<center>LOGIN GAGAL! <br>
Username atau Password Anda salah,<br>
Atau account Anda sedang diblokir...<br>
<a href=index.php><b>Ulangi kembali</b></a>
</center>
</div>";
}
?>
<?php- Kelima, sampai tahapan ini sebenarnya sudah bisa untuk kita coba, tapi kembali dilihat pada cek_login.php ada kode "header(location:admin.php)" fungsi kode disitu yaitu, apabila username, password, dan level benar akan langsung memanggil file admin.php, dan disini sekarang kita buat kembali file dengan nama admin.php, masukan kode dibawah ini...
$server = "localhost";
$username = "root";
$password = "";
$database = "tutorial";
// Koneksi dan memilih database di server
mysql_connect($server, $username, $password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
<?php- Keenam, oke sampai tahapan ini selesai, tapi ada satu lagi yang kurang yaitu logout.php, seperti yang sudah tidak asing lagi fungsi dari logout.php ini untuk keluar dari halaman login tersebut, okelah langsung aja masukin kode dibawah ini untuk logout.php, cekibrot...
error_reporting(0);
session_start();
if (empty($_SESSION['username']) AND empty($_SESSION['passuser'])) {
echo "
<div class='alert alert-danger' role='alert'>
<center>Untuk mengakses modul, Anda harus login <br>
<a href='index.php'><b>LOGIN</b></a>
</center>
</div>";
}
else{
?>
<!DOCTYPE html>
<html lang="en">
<?php require_once "head.php" ?>
<body style="padding-top:10px;padding-bottom:80px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<center><h1>Administrator</h1></center>
</div>
<ol class="breadcrumb">
<a href="logout.php" class="text-right"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a> |
<li class="active">Anda Login sebagai <strong><?php echo $_SESSION['namauser'] ;?></strong></li>
</ol>
</div>
</div>
</div>
<?php require_once "footer.php"; ?>
</body>
</html>
<?php
}
?>
<?php- Terakhir, nah selesai deh sampai sini untuk cara Membuat login sederhana dengan PHP dan MySQL, mudah-mudahan bermanfaat dan menambah pengetahuan anda tentang PHP dan MySQL, untuk yang mau langsung download full nya bisa didownload disini, tapi alangkah indahnya bila di baca-baca terlebih dahulu tutorialnya, oke cukup sekian terima kasih... Salam Sukses
session_start();
session_destroy();
echo "<script>alert('Anda telah keluar dari Halaman Administrator');
window.location = 'index.php'</script>";
?>
Sangat membantu saya :)
BalasHapusMakasih riski
Oke, sama-sama... :D
Hapusterimakasih bapa,, unduh ia dan ane baca
BalasHapusOke, sama-sama... :D
Hapus