Cara Membuat Form Login php Dengan Bootstrap
Membuat form login dengan php adalah salah satu tutorial yang cukup poluler, hampir setiap hari ada saja user yang datang untuk belajar bagaimana cara membuat form login oke langsung saja lihat tutorial dibawah ini.
FORM LOGIN DENGAN BOOTSTRAP
langkah pertama kita coba belajar membuat form login dengan bootstrap. Karena tema kita kali ini selain membuat form login dengan php kita juga belajar bootstrap jadi kita buat template form loginnya dulu.
Unduh file bootstrap dari getbootstrap.com
Buatlah sebuah direktori di dalam htdocs dengan nama login-bootstrap dan isi seperti gambar berikut.
ekstrak Bootstrap yang sudah kita download tadi kemudian pindahkan folder css, js, dan fonts ke folder assets
Langkah kedua : buka file login.php dan isikan dengan script berikut. Dan untuk mendalami bagaimana cara menggunakan bootstrap dengan php kalian bisa mempelajarinya di cara menggunakan bootstrap dan untuk memahami system grid atau layouting kalian bisa membaca belajar bootstrap grid system.
<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
/* handle error */
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>Forgot Password ?</p>
</div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
Perhatikan pada tag komentar /* handel error */ dibawah tag tersebut merupakan component Alert dari bootstrap yang dimodifikasi dengan PHP.
ika sudah, kalian bisa mengeceknya dengan mengakses localhost/login-bootstrap/login.php melalui browser kalian.
lho kenapa kok tidak langsung dengan localhost/login-bootstrap saja ? ya karena file index.php belum ada, karena file index.php belum ada maka jika kita akses dengan localhost/login-bootstrap maka akan tampak seperti berikut :
sekarang kita buat file index.php dan isi dengan script berikut :
<?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();
}
di dalam file index.php terdapat fungsi pengkondisian (if) yang akan mengecek apakah user sudah login atau belum dengan
(isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' )
Jika kondisi di atas bernilai TRUE maka kita akan dibawa sesuai dengan nilai $_SESSION['user_login'], $_SESSION['user_login'] memiliki dua nilai yaitu admin dan member. Dia akan bernilai admin jika yang login adalah admin dan bernilai member jika yang login adalah member.
Sehingga, jika dia login sebagai admin maka secara otomatis dia akan dibawa ke folder “on-admin” begitu juga ketika dia login sebagai member maka dia akan dibawa ke halaman “on-member”.
dan jika dia belum login dia akan dibawa kehalaman login.php.
ingat nama folder jangan diganti jika diganti dapat mempengaruhi kinerja sistem login ini hehehe.
Langkah Ketiga : pada langkah ketiga kita akan membuat fungsi cek login dengan membuat file check-login.php. Disini kita menggunakan php mysqli prepare statement yang mana prepare statement ini diklaim cukup ampuh dalam menahan SQL Injection dan kita akan menambahkan hash md5 untuk meningkatkan keamanan password. berikut scriptnya :
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();
}
HOMEARTICLESMembuat Form Login Dengan Bootstrap Dan PHP
ARTICLESMembuat Form login dengan bootstrap dan PHP ONPHPID January 24, 2016
Membuat login dengan php adalah salah satu tutorial yang cukup poluler di situs onphpid.com, hampir setiap hari ada saja user yang datang untuk belajar bagaimana cara membuat form login meskipun onphpid sudah menuliskan tutorial php cara membuat halaman login ini sebanyak tiga kali namun ternyata masih belum mampu memuaskan para pengunjung onphpid.com dan untuk tutorial php kali ini onphpid akan berkolaborasi dengan framework bootstrap sebagai front-end agar form login kita lebih menarik selain itu kita bisa belajar bootstrap secara langsung dalam tutorial membuat form login ini.
Membuat Form login dengan bootstrap
belajar bootstrap login Membuat Form login dengan bootstrap dan PHP gif base64 R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw
Tutorial ini juga tersedia dalam bentuk Video Membuat Form Login dengan Bootstrap dan PHP
Sebagai langkah pertama kita akan belajar membuat form login dengan bootstrap. Karena tema kita kali ini selain membuat form login dengan php kita juga belajar bootstrap jadi kita buat template form loginnya dulu.
Unduh file bootstrap dari getbootstrap.com
Buatlah sebuah direktori di dalam htdocs dengan nama login-bootstrap dan isi seperti gambar berikut.
membuat direktori login bootstrap Membuat Form login dengan bootstrap dan PHP gif base64 R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw
Ekstrak Bootstrap yang sudah kita download tadi kemudian pindahkan folder css, js, dan fonts ke folder assets
Langkah kedua : buka file login.php dan isikan dengan script berikut. Dan untuk mendalami bagaimana cara menggunakan bootstrap dengan php kalian bisa mempelajarinya di cara menggunakan bootstrap dan untuk memahami system grid atau layouting kalian bisa membaca belajar bootstrap grid system.
<!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
/* handle error */
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>Forgot Password ?</p>
</div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
<!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
/* handle error */
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>Forgot Password ?</p>
</div>
</form>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
Perhatikan pada tag komentar /* handel error */ dibawah tag tersebut merupakan component Alert dari bootstrap yang dimodifikasi dengan PHP.
Baca Juga :
Membuat Form dengan Bootstrap
Membuat Form Login dengan Bootstrap Modal (Pop up)
nah jika sudah, kalian bisa mengeceknya dengan mengakses localhost/login-bootstrap/login.php melalui browser kalian.
lho kenapa kok tidak langsung dengan localhost/login-bootstrap saja ? ya karena file index.php belum ada, karena file index.php belum ada maka jika kita akses dengan localhost/login-bootstrap maka akan tampak seperti berikut :
belajar bootstrap login Membuat Form login dengan bootstrap dan PHP gif base64 R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw
bagaimana ? jelek bukan…
nah sekarang kita buat file index.php dan isi dengan script berikut :
<?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();
}
<?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();
}
di dalam file index.php terdapat fungsi pengkondisian (if) yang akan mengecek apakah user sudah login atau belum dengan
(isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' )
1
(isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' )
Jika kondisi di atas bernilai TRUE maka kita akan dibawa sesuai dengan nilai $_SESSION['user_login'], $_SESSION['user_login'] memiliki dua nilai yaitu admin dan member. Dia akan bernilai admin jika yang login adalah admin dan bernilai member jika yang login adalah member.
Sehingga, jika dia login sebagai admin maka secara otomatis dia akan dibawa ke folder “on-admin” begitu juga ketika dia login sebagai member maka dia akan dibawa ke halaman “on-member”.
dan jika dia belum login dia akan dibawa kehalaman login.php.
ingat nama folder jangan diganti jika diganti dapat mempengaruhi kinerja sistem login ini hehehe.
Langkah Ketiga : pada langkah ketiga kita akan membuat fungsi cek login dengan membuat file check-login.php. Disini kita menggunakan php mysqli prepare statement yang mana prepare statement ini diklaim cukup ampuh dalam menahan SQL Injection dan kita akan menambahkan hash md5 untuk meningkatkan keamanan password. berikut scriptnya :
<?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();
}
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();
}
Perhatikan tanda tanya (?) pada syntax SQL diatas merupakan salah satu tanda kita menggunakan prepare statement.
kemudian (ss) pada $check_log->bind_param() , (ss) tersebut diartikan bahwa data yang kita masukan untuk username dan password bertipe “string”, kita bisa memasukan type data lain seperti
bind_param() sendiri berfungsi untuk memastikan tipe data dan data yang kita masukan sama atau tidak.
Kemudian perhatikan $_SESSION nah itu adalah cara kita menyimpan sesi login untuk memastikan kita sudah login atau belum.
Langkah keempat : fungsi check-login.php diatas tidak akan fungsi sebelum ada perintah koneksi ke database. lho kenapa ? karena dalam fungsi check-login.php kita perlu mencocokkan data user yang dimasukkan atau inputkan saat login dengan data yang berada di dalam database dalam hal ini adalah ini username dan password. Jadi kita perlu membuat file koneksi dengan menuliskan script berikut pada file config.php agar bisa berinteraksi dengan database.
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '');
define('DBNAME', 'bootstrap');
/**
* $dbconnect : koneksi kedatabase
*/
$dbconnect = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);
/**
* Check Error yang terjadi saat koneksi
* jika terdapat error maka die() // stop dan tampilkan error
*/
if ($dbconnect->connect_error) {
die('Database Not Connect. Error : ' . $dbconnect->connect_error);
}
Perlu diketahui bahwa kita menggunakan mysqli oop ( object oriented program ) hal ini ditunjukkan dengan “new” dan “->” yang ada di script diatas.
Langkah kelima : pada langkah kelima ini kita akan membuat database untuk form login. Masukanlah localhost/phpmyadmin dan buat database sesuai dengan nilai DBNAME pada langkah keempat. kemudian import atau copy paste script SQL yang berada disini.
Langkah keenam : nah disini kita akan mengisi folder on-admin dan on-member agar terlihat perbedaan antara admin yang login dan member.
buat file index.php didalam folder on-admin dan isi dengan script berikut :
session_start();
/**
* Jika Tidak login atau sudah login tapi bukan sebagai admin
* maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
*/
if ( !isset($_SESSION['user_login']) ||
( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'admin' ) ) {
header('location:./../login.php');
exit();
}
?>
<h2>Hallo Admin <?=$_SESSION['nama'];?> Apakabar ?</h2>
<a href="./../logout.php">Logout</a>
buat file index.php didalam folder on-member dan isi dengan script berikut :
session_start();
/**
* Jika Tidak login atau sudah login tapi bukan sebagai admin
* maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
*/
if ( !isset($_SESSION['user_login']) ||
( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'member' ) ) {
header('location:./../login.php');
exit();
}
?>
<h2>Hallo Member <?=$_SESSION['nama'];?> Apakabar ?</h2>
<a href="./../logout.php">Logout</a>
Perhatikan $_SESSION['nama'] nah seperti yang onphpid uraikan diatas bahwa $_SESSION merupakan tempat penyimpanan sementara. selain untuk menyimpan $_SESSION bisa kita manfaatkan untuk menampilkan nama, level, dan id_user yang sedang login (bisa dilihat di langkah ketiga di dalam script tentang $_SESSION) yang sudah disesuaikan dengan database.
Langkah ketujuh : dapat kita lihat bersama bahwa di halaman admin maupun member terdapat tombol logoutkan.. nah dilangkah ketujuh kita akan membuat script logout .
<?php
session_start();
session_destroy();
header('location:login.php');
Disini kita cukup menggunakan fungsi session_start() dan session_destroy() karena session_start() bertugas memulai/load session dan tanpa fungsi session_start() kita tidak bisa menggunakan $_SESSION. Sedangkan session_destroy() adalah menghapus session yang sudah kita buat saat berada di file check-login.php lalu kita akan dibawa ke halaman login lagi.
Nah terakhir kita akan mengubah tampilan halaman login agar lebih bagus tambahkah script css pada file style.css di assets/css
body{
background: #F8DA56;
}
.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: #21A957;
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: #21A957;
color: #fff;
}
demikian tutorial membuat form login php dengan bootstrap
