Membuat form login sangat dibutuhkan untuk website yang memiliki sistem membership atau admin area. Sehingga memberikan hak akses kepada user untuk mengakses bagian halaman tertentu dari website anda. Disini akan dibahas tentang tutorial membuat form login dengan PHP dan Bootstrap.
Apa itu Bootstrap ?
Bootstrap adalah sebuah framework (kerangka kerja) CSS , sehingga dengan Bootstrap anda tidak perlu lagi pusing-pusing mendesain CSS halaman login, cukup dengan memanggil CSS dari Bootstrap ke dalam form anda. Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton, dan nama lengkap framework Bootstrap adalah Twitter Bootstrap. Hal ini terjadi karena memang Bootstrap dikembangkan dan diimplementasikan ke dalam website Twitter, dengan kata lain dibuat untuk Twitter.
Framework Bootstrap sangat populer dikalangan pengembang website, hal ini dikarenakan Bootstrap sangat responsif (dapat mengikuti ukuran perangkat saat diakses), mudah dalam penggunaan, dan tersedia banyak resource yang dapat digunakan secara gratis. Sebagai contoh anda dapat dengan mudah mencari template bootstrap untuk halaman login atau halaman member area.
Dimanakah bisa mendapatkan Bootstrap?
Anda dapat mendapatkan bootstrap dengan mendownload file di https://getbootstrap.com/, terdapat 2 cara untuk memasang Bootstrap di website anda.
- Dengan download file Bootstrap dan dimasukkan ke dalam folder yang sama dengan file website anda.
- Dengan memanggil URL link dari CDN Bootstrap dan ditempatkan diantara tag <head>….</head> di website anda. Kelemahannya, saat anda tidak terhubung dengan benar ke URL Bootstrap saat mengakses website anda, maka website anda akan nampak berantakan di layar anda.
Sebelum kita membuat form dengan Bootstrap maka disini saya akan memberikan panduan membuat form hanya dengan PHP dan HTML saja dahulu, tanpa adanya CSS . Akan nampak seperti gambar berikut:
Panduan Membuat Form Login Dasar
1.Buat database dengan nama “latihan” , kemudian buat tabel “user” dengan data kolom sebagai berikut:
- id = tipe data INT , index=PRIMARY, Auto Increment.
- username = tipe data VARCHAR , length = 20.
- password = tipe data VARCHAR , length = 50.
- email = tipe data VARCHAR , length = 30.
2. Isi data pada tabel user tersebut dengan mengklik insert , dan isi dengan data sebagai berikut:
- id = 1.
- username = admin.
- password = admin , dienkripsi dengan sha1. (perhatikan gambar).
- email = admin@email.com
dan hasilnya akan seperti berikut:
3. Kemudian buat folder latihan dan isi dengan file koneksi.php , dengan kode sebagai berikut:
$host = "localhost";
$user = "root";
$pass = "";
$dbase = "latihan";
$con = mysqli_connect($host,$user,$pass,$dbase);
if (mysqli_connect_errno()){
echo "Koneksi gagal !" . mysqli_connect_error();
}
4. Lanjutkan dengan membuat file index.php dan diisi dengan baris kode berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Login Dari Alexistdev.com</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<p><font color="red">
<?php if (isset($_GET['pesan'])){
switch ($_GET['pesan']){
case 'errorpass':
echo "username dan password salah";
header('Refresh: 1; URL=index.php');
break;
}
}
;?>
</font></p>
</div>
<form action="cek.php" method="post">
<div class="col-md-12">
<div class="form-group">
<label>Username</label><br />
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Password</label><br />
<input type="text" class="form-control" name="password" />
</div>
<input type="submit" value="Login" class="btn btn-primary"/>
</div>
</form>
</div>
</div>
</body>
</html>
5. Buat file cek.php untuk melakukan pengecekan setelah tombol Login diklik.
session_start();
include "koneksi.php";
//menangkap hasil dari input form login
$user= $_POST['username'];
$pass = sha1($_POST['password']); //password dengan enkripsi sha1
//validasi jika username dan password kosong
if(empty($user)){
header ('location:index.php?pesan=errorpass');
}elseif(empty($pass)){
header ('location:index.php?pesan=errorpass');
} else {
$sql = "SELECT * FROM user WHERE username = '$user' AND password = '$pass'";
$hasil = mysqli_query($con,$sql);
$valid = mysqli_num_rows($hasil);
$row = mysqli_fetch_array($hasil);
if ($valid > 0 ){
session_start();
//buat variabel session
$_SESSION['username'] = $row['username'];
$_SESSION['password'] = $row['password'];
header ('location:member.php');
}else{
header ('location:index.php?pesan=errorpass');
}
}
6. Dan hasilnya akan nampak seperti di bawah ini:
Penjelasan Kode Script
A. File koneksi.php adalah file untuk melakukan koneksi ke dalam database mysql anda. Dimana jika anda upload ke dalam hosting maka konfigurasinya detailnya adalah:
- $user = adalah username anda di phpmyadmin.
- $password = adalah password database anda.
- $dbase = nama database yang anda buat.
B. File index.php berisi kode yang utamanya adalah form login, dimana saat tombol submit ditekan akan mengarah ke file cek.php
Memanggil file bootstrap
Untuk memanggil file Bootstrap anda wajib menempatkan link seperti dibawah ini diantara tag <head>…</head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Metode pemanggilan file tersebut adalah dengan CDN yang disediakan oleh Bootstrap , dengan kata lain anda harus online saat mengakses script tersebut agar file bootstrap dapat diimplementasikan ke dalam form, jika anda tidak terhubung ke internet maka tampilan form login akan menjadi standart (tanpa css bootstrap). Cara ini bisa diganti dengan mendownload file bootstrap kemudian memanggilnya, sehingga saat offline pun bisa diakses file bootstrap karena file bootstrap anda simpan di dalam folder anda sendiri.
Penerapan atribut Bootstrap pada form
Penerapan CSS bootstrap pada form selalu diawali dengan tag <div class=…> </div>, jika anda perhatikan bahwa form login tersebut selalu dilengkapi tag <div class=…>…</div>. Untuk lebih jelasnya anda bisa melihat dokumentasi form atau atribut pada pembuatan form dengan Bootstrap di getbootstrap.com.
Sedikit saya jabarkan tentang form bootstrap, pada body selalu diawali dengan:
<div class="container" >
container merupakan elemen dasar dalam pembuatan layout pada bootstrap, sehingga selanjutnya anda dapat memasukkan elemen GRID bootstrap ke dalam kode anda. Elemen grid bootstrap inilah yang mengatur bagaimana lebar web anda akan diakses dengan perangkat yang berbeda (dengan kata lain : RESPONSIF) sebagai contoh:
<div class="col-md-12" ></div>
Pada file diatas ditentukan nilai md-12, dimana pada sistem grid bootstrap membagi layar perangkat ke dalam 12 grid. Dan jika anda ingin membagi menjadi 2 kolom maka nilainya menjadi col-md-6 diperoleh dari 12:2 = 6. Sedangkan atribut md adalah kategori perangkat seperti pada tabel berikut:
Dari penjabaran tabel diatas , sebagai contoh jika anda ingin mengatur nilai atribut saat diakses melalui smartphone maka anda dapat menggunakan col-sm-6. Anda dapat mempelajari lebih banyak dokumentasi Grid system bootstrap disini.
Pesan Validasi
kode berikut mengatur pesan validasi dengan method GET , saat halaman ditolak dan diarahkan ke “index.php?pesan=errorpass”
if (isset($_GET['pesan'])){
switch ($_GET['pesan']){
case 'errorpass':
echo "username dan password salah";
header('Refresh: 1; URL=index.php');
break;
}
}
C. Yang terakhir adalah file cek.php , dimana hasil input akan dimasukkan ke variabel $user dan $pass dimana sebelum dimasukkan ke dalam variable $pass, dilakukan enkripsi dahulu dengan sha1().
kodenya:
//menangkap hasil dari input form login $user= $_POST['username']; $pass = sha1($_POST['password']); //password dengan enkripsi sha1
Kemudian divalidasi jika form kosong akan diarahkan ke halaman form login dengan ditambah atribut: ?pesan=errorpass, dan jika lolos validasi akan langsung disimpan di database dan diarahkan ke member.php dengan kode:
$sql = "SELECT * FROM user WHERE username = '$user' AND password = '$pass'";
$hasil = mysqli_query($con,$sql);
$valid = mysqli_num_rows($hasil);
$row = mysqli_fetch_array($hasil);
if ($valid > 0 ){
session_start();
//buat variabel session
$_SESSION['username'] = $row['username'];
$_SESSION['password'] = $row['password'];
header ('location:member.php');
}else{
header ('location:index.php?pesan=errorpass');
}
Catatan Penulis
Anda bisa download file lengkapnya DISINI, untuk login script gunakan user: admin dan pass:admin
Jika ada yang membutuhkan pertanyaan silahkan chat saja di kolom komentar, dan jika membutuhkan versi yang sudah filter sql injection dan xss , bisa chat di kolom komentar.