Membuat login ialah salah satu langkah awal setiap proses pembuatan sistem aplikasi sehingga tidak semua orang sanggup masuk kedalam system aplikasi yang telah kita buat. pada postingan kali ini gudang coding akan menawarkan isu mengenai pembuatan Login dengan memakai PHP dan memakai Framework Bootsrap sehingga tampilan Login yang akan kita buat menjadi terlihat menarik, keren dan tentunya responsive dan dinamis.
Sebagai langkah pertama kita akan berguru menciptakan form login dengan bootstrap. Karena tema kita kali ini selain menciptakan form login dengan php kita juga berguru bootstrap jadi kita buat template form loginnya dulu.
1. Unduh file bootstrap dari getbootstrap.com
2. Buatlah sebuah direktori di dalam htdocs dengan nama login-bootstrap dan isi menyerupai gambar berikut.
3. Ekstrak Bootstrap yang sudah kita unduh tadi kemudian pindahkan folder css, js, dan fonts ke folder assets
bagaimana ? buruk bukan…
Langkah kedua : buka file login.php dan isikan dengan script berikut.
<!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.
nah jikalau sudah, sahabat gudang coding sanggup mengeceknya dengan mengakses localhost/login-bootstrap/login.php melalui browser kalian.
lho kenapa kok tidak pribadi dengan localhost/login-bootstrap saja ? ya alasannya file index.php belum ada, alasannya file index.php belum ada maka jikalau kita terusan dengan localhost/login-bootstrap maka akan tampak menyerupai berikut :
nah kini kita buat file index.php dan isi dengan script berikut :
<?phpsession_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'] mempunyai dua nilai yaitu admin dan member. Dia akan bernilai admin jikalau yang login ialah admin dan bernilai member jikalau yang login ialah member.
Sehingga, jikalau beliau login sebagai admin maka secara otomatis beliau akan dibawa ke folder “on-admin” begitu juga ketika beliau login sebagai member maka beliau akan dibawa ke halaman “on-member”. dan jikalau beliau belum login beliau akan dibawa kehalaman login.php. ingat nama folder jangan diganti jikalau diganti sanggup mensugesti kinerja sistem login ini hehehe.
Langkah Ketiga : pada langkah ketiga kita akan menciptakan fungsi cek login dengan menciptakan file check-login.php. Disini kita memakai 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 :
<?phpsession_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 memakai prepare statement.
kemudian (ss) pada $check_log->bind_param() , (ss) tersebut diartikan bahwa data yang kita masukan untuk username dan password bertipe “string”, kita sanggup memasukan type data lain seperti
– i untuk integer
– s untuk string
– b untuk blob
– d untuk double
bind_param() sendiri berfungsi untuk memastikan tipe data dan data yang kita masukan sama atau tidak. Kemudian perhatikan $_SESSION nah itu ialah 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 ? alasannya dalam fungsi check-login.php kita perlu mencocokkan data user yang dimasukkan atau inputkan ketika login dengan data yang berada di dalam database dalam hal ini ialah ini username dan password. Makara kita perlu menciptakan file koneksi dengan menuliskan script berikut pada file config.php biar sanggup berinteraksi dengan database.
<?phpdefine('DBHOST', 'localhost'); define('DBUSER', 'root'); define('DBPASS', ''); define('DBNAME', 'bootstrap'); /** * $dbconnect : koneksi kedatabase */ $dbconnect = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME); /** * Check Error yang terjadi ketika koneksi * jikalau terdapat error maka die() // stop dan tampilkan error */ if ($dbconnect->connect_error) { die('Database Not Connect. Error : ' . $dbconnect->connect_error);}
Perlu diketahui bahwa kita memakai mysqli oop ( object oriented aktivitas ) hal ini ditunjukkan dengan “new” dan “->” yang ada di script diatas.
Langkah kelima : pada langkah kelima ini kita akan menciptakan 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 biar terlihat perbedaan antara admin yang login dan member.
buat file index.php didalam folder on-admin dan isi dengan script berikut :
<?phpsession_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 :
<?phpsession_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 menyerupai yang onphpid uraikan diatas bahwa $_SESSION merupakan kawasan penyimpanan sementara. selain untuk menyimpan $_SESSION sanggup kita manfaatkan untuk menampilkan nama, level, dan id_user yang sedang login (bisa dilihat di langkah ketiga di dalam script perihal $_SESSION) yang sudah diubahsuaikan dengan database.
Langkah ketujuh : sanggup kita lihat bersama bahwa di halaman admin maupun member terdapat tombol logoutkan.. nah dilangkah ketujuh kita akan menciptakan script logout.
Disinikita cukup memakai fungsi session_start() dan session_destroy() alasannya session_start() bertugas memulai/load session dan tanpa fungsi session_start() kita tidak sanggup memakai $_SESSION. Sedangkan session_destroy() ialah menghapus session yang sudah kita buat ketika berada di file check-login.php kemudian kita akan dibawa ke halaman login lagi.<?phpsession_start(); session_destroy();header('location:login.php');
Nah terakhir kita akan mengubah tampilan halaman login biar lebih manis 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; } Sekian dari kami semoga tutorial menciptakan form login php dengan bootstrap ini sanggup bermanfaat bagi kita semua. sumeber : www.onphpid.com
Sahabat gudang coding juga sanggup mendownload file script login di atas di link Unduh Berikit :
Link Download
0 Comments: