Membuat Login PHP dengan Leveling Admin dan Member
Assalamualaikum wr.wb
Pagi Kawan, pada hari ini Saya akan Sharing tentang Membuat Login PHP dengan Leveling Admin dan Member
A. Pengertian
Halaman login merupakan pintu masuk kedalam sebuah sistem. Sebagai contoh ketika anda membuka halaman Facebook, Gmail, Yahoo Mail atau halaman untuk mengecek nilai IPK anda pasti anda akan membuka halaman login. Mari kita bahas lebih jauh mengenai seluk beluk halaman login dan cara membuatnya menggunakan PHP dan MySQL.
B. Latar Belakang
didalam pembuatan sebuah website, tujuannya adalah untuk melindungi data anda dari tangan tangan jahil yang berkeliaran di internet.
C. Maksud dan Tujuan
Fungsi utama dari halaman login adalah untuk melindungi sistem anda.
D. Alat dan Bahan
- Komputer / Laptop
- Text Editor
- File Bootstrap
- Database Users
E. Langkah - langkah
1. Buat struktur folder seperti dibawah ini, Untuk folder assets bisa di download disini.
2. Membuat Database " users " dan tabel " users ".
3. Insert tabel users seperti dibawah ini.
4. Membuat file " config.php "
<?php
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '');
define('DBNAME', 'users');
$dbconnect = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);
if ($dbconnect->connect_error) {
die('Database Not Connect. Error : ' . $dbconnect->connect_error);
}
5. Membuat file " index.php "<?php
session_start();
if ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' ) {
$halaman = $_SESSION['user_login'];
header('location:on-'. $halaman);
exit();
} else {
header('location:login.php');
exit();
}
6. Membuat file " login.php "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halaman Login</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="col-md-4 col-md-offset-4 form-login">
<?php
if (isset($_GET['error'])) : ?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> <?=base64_decode($_GET['error']);?>
</div>
<?php endif;?>
<div class="outter-form-login">
<div class="logo-login">
<em class="glyphicon glyphicon-user"></em>
</div>
<form action="check-login.php" class="inner-login" method="post">
<h3 class="text-center title-login">Login Member</h3>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
<div class="text-center forget">
<p>Username : member</p>
<p>Password : member</p>
</div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
7. Membuat file " check-login.php "
<?php
session_start();
require 'config.php';
if ( isset($_POST['username']) && isset($_POST['password']) ) {
$sql_check = "SELECT nama,level_user,id_user FROM users WHERE username=? AND password=? LIMIT 1";
$check_log = $dbconnect->prepare($sql_check);
$check_log->bind_param('ss', $username, $password);
$username = $_POST['username'];
$password = md5( $_POST['password'] );
$check_log->execute();
$check_log->store_result();
if ( $check_log->num_rows == 1 ) {
$check_log->bind_result($nama, $level_user, $id_user);
while ( $check_log->fetch() ) {
$_SESSION['user_login'] = $level_user;
$_SESSION['sess_id'] = $id_user;
$_SESSION['nama'] = $nama;
}
$check_log->close();
header('location:on-'.$level_user);
exit();
} else {
header('location: login.php?error='.base64_encode('Username dan Password Invalid!!!'));
exit();
}
} else {
header('location:login.php');
exit();
}
8. Membuat file " logout.php "<?php
session_start();
session_destroy();
header('location:login.php');
9. Agar Tampilannya menarik kita tambahkan file " style.css " di "assets/css/style.css"
body{ background: #66ccff; } .form-login{ margin-top: 13%; } .outter-form-login { padding: 20px; background: #EEEEEE; position: relative; border-radius: 5px; } .logo-login { position: absolute; font-size: 35px; background: #0066ff; color: #FFFFFF; padding: 10px 18px; top: -40px; border-radius: 50%; left: 40%; } .inner-login .form-control { background: #D3D3D3; } h3.title-login { font-size: 20px; margin-bottom: 20px; } .forget { margin-top: 20px; color: #ADADAD; } .btn-custom-green { background: #0066ff; color: #fff; }
10. Membuat file " index.php " di folder on-admin.
<?php
session_start();
if ( !isset($_SESSION['user_login']) ||
( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'admin' ) ) {
header('location:./../login.php');
exit();
}
?>
<h2>Selamat datang <?=$_SESSION['nama'];?> Apakabar ?</h2>
<a href="./../logout.php">Logout</a>
11. Sekarang tinggal membuat file " index.php " di folder on-member.<?php
session_start();
if ( !isset($_SESSION['user_login']) ||
( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'member' ) ) {
header('location:./../login.php');
exit();
}
?>
<h2>Selamat datang <?=$_SESSION['nama'];?> Apakabar ?</h2>
<a href="./../logout.php">Logout</a>
12. Kalau sudah selesai, kita jalankan di web browser.
F. Referensi
- http://belajarngoding.com/membuat-halaman-login-menggunakan-php-dan-mysql/#.V_W1Q81v48w
- https://www.onphpid.com/membuat-form-login-dengan-bootstrap-dan-php.html
G. Hasil dan Kesimpulan
dengan penggunaan Css bootstrap. Bootstrap memberikan efek tampilan yang lebih elegan dan menarik pada form, dengan penggunaan Bootstrap ini tidak akan merubah struktur coding suatu fungsi, kita cukup menginclude kan css nya dan menyesuaikan sesuai tampilan bootsrap yang kita inginkan seperti pada Form Login Sederhana yang akan kita buat ini.
Yak, itu tadi penjelasan singkat tentang Membuat Login PHP dengan Leveling Admin dan Member, jangan lupa untuk kunjungi terus blog saya untuk mengetahui kelanjutan materi ini Sekian Termiakasih.
Wassalamualaikum wr.wb