Tutorial kali ini akan membahas tentang bagaimana membuat login menggunakan php native. Maksud dari native disini adalah tidak menggunakan framework apapun jadi murni menggunakan php. Jadi yang perlu disiapkan adalah tentu saja web server beserta dbms, kemudian text editor yang cukup mumpuni. Untuk web server dan dbms itu bisa memakai XAMPP bisa didownload disini, untuk text editornya bisa pakai atom, bracket, notepad++, vscode dan masih banyak lagi, pakai yang menurut kalian nyaman untuk digunakan.
Ok sekarang langsung menuju langkah – langkahnya :
Membuat Database
Langkah pertama ialah membuat database. Karena ketika akan membuat sistem autentikasi maka kita perlu tempat untuk menyimpan semua data user tersebut. Disini saya menggunakan phpmyadmin sebagai management database, karena fungsi – fungsi yang disediakan cukup lengkap dan juga sudah dimasukan menjadi satu paket di XAMPP untuk mengaksesnya pastikan Xampp sudah terinstall dengan baik dan benar setelah itu aktifkan Apache dan MySQL lalu ketikan http://localhost/phpmyadmin pada browser. Ketika tampilan phpmyadmin sudah muncul, pada menu samping sebelah kiri click new untuk membuat database baru.
Lalu isi nama database pada kolom Create Database kemudian click Create.
Setelah berhasil membuat database langkah selanjutnya adalah membuat tabel. Phpmyadmin akan otomatis mengaktifkan database yang baru saja dibuat jadi langsung saja isi nama tabel dan jumlah kolom.
kemudian click Go.
Buat struktur tabel seperti screen shot di bawah ini.
pada field id pastikan kolom A_I dicentang itu berfungsi agar setiap record yang kita masukan pada tabel maka id akan otomatis terisi dengan angka yang akan meningkat otomatis setiap kali record ditambahkan, kemudian click Save.
Sekarang kita akan menambahkan 1 record kedalam tabel. Click insert ditab atas kemudian isi data sebagai berikut :
Disini pada password kita menggunakan fungsi md5 dimana fungsi tersebut akan mengenkripsi password yang sudah kita buat, Click Go.
Membuat Halaman Login
Sebelum membuat halaman login, pertama – tama masuk kedalam directory xampp/htdocs jika di windows biasanya terletak pada drive C kemudian didalam folder htdocs buat sebuah folder yang bernama tutorlogin folder ini yang akan menjadi folder kerja kita selama tutorial ini. Kemudian buka text editor kalian berikut adalah kode untuk halaman login.
<html>
<head>
<title>www.bcodes.net</title>
<style>
.login-container{
margin-top: 5%;
margin-bottom: 5%;
}
.login-logo{
position: relative;
margin-left: -41.5%;
}
.login-logo img{
position: absolute;
width: 20%;
margin-top: 19%;
background: #282726;
border-radius: 4.5rem;
padding: 5%;
}
.login-form-1{
padding: 9%;
background:#282726;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-1 h3{
text-align: center;
margin-bottom:12%;
color:#fff;
}
.login-form-2{
padding: 9%;
background: #f05837;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-form-2 h3{
text-align: center;
margin-bottom:12%;
color: #fff;
}
.btnSubmit{
font-weight: 600;
width: 50%;
color: #282726;
background-color: #fff;
border: none;
border-radius: 1.5rem;
padding:2%;
cursor: pointer;
}
.btnForgetPwd{
color: #fff;
font-weight: 600;
text-decoration: none;
}
.btnForgetPwd:hover{
text-decoration:none;
color:#fff;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container login-container">
<div class="row">
<div class="col-md-6 offset-3 login-form-2">
<h2 class="text-center">Form Login</h2>
<form action="action_page.php">
<div class="form-group">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" class="form-control" required>
</div>
<div class="form-group">
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="btnSubmit">Login</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Agar tampilan lebih menarik saya menggunakan bootstrap sebagai framework dasarnya, oh iyaa karena saya menggunakan cdn jadi pastikan kalian terkoneksi internet agar bootstrapnya bisa ter-load dengan baik.
Jika sudah simpan file tersebut dengan nama index.php, agar ketika kita mengaksesnya dibrowser file yang dibuka pertama kali adalah index.php tersebut.
Membuat Halaman Register
Secara tampilan halaman register ini tidak jauh beda dengan halaman login tadi, hanya saja ada tambahan 1 field yaitu Password Confirmation.
Oh iya jangan lupa ganti value tombol submitnya menjadi Register.
<label for="psw_confirmation"><b>Retype Password</b></label>
<input type="password" placeholder="Retype Password" name="psw_confirmation" required>Tambahkan field tersebut setelah field password, dan juga pada tag form ubah action menjadi pregister.php.
Sekarang buka browser kalian ketik http://localhost/tutorlogin pada address bar dan kurang lebih maka tampilannya akan seperti berikut:
Membuat File Koneksi ke Database
File yang kedua yang akan kita buat adalah connect.php, berikut adalah kodenya :
<?php
$servername = "mysql";
$username = "root";
$password = "root";
$dbname = 'dbtutorlogin';
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>Untuk $username dan $password sesuaikan dengan konfigurasi mysql kalian, tapi biasanya settingan standarnya sudah seperti ini dan pastikan $dbname sudah sesuai dengan yang kalian buat. Untuk membuktikan bahwa koneksi berhasil atau tidak kita tinggal akses file connect.php dibrowser http://localhost/tutorlogin/connect.php jika hasilnya Connected successfully maka koneksipun berhasil.
Membuat Proses Register
Berikut adalah kode untuk file pregister.php.
<?php
session_start();
require 'connect.php';
$username = $_POST['uname'];
$password = md5($_POST['psw']);
$password_confirmation = md5($_POST['psw_confirmation']);
if($password == $password_confirmation){
$query = $conn->query('insert into tbuser(username,password) values("'.$username.'","'.$password.'")');
header("Location: index.php");
}else{
echo "Password tidak cocok!";
}
?>Nah pada proses login diatas terdapat sedikit validasi untuk password, jika password berbeda dengan password konfirmasinya maka akan muncul pesan “Password tidak cocok!”.
Membuat Proses Login
File selanjutnya yang dibuat adalah plogin.php, file inilah yang bertanggung jawab untuk memproses form yang sudah dibuat lagi dan memberikan feedback pada user apakan email. Sebelum membuat file tersebut pertama buka kembali file index.php cari pada tag form ubah action-nya menjadi plogin.php dan tambahkan attribut method=”post” dan juga pada file connect.php hilangkan baris echo “Connection successfully” karna itu akan ikut menjadi output pada saat proses login nanti. Berikut adalah isi dari plogin.php.
<?php
session_start();
require 'connect.php';
$username = $_POST['uname'];
$password = md5($_POST['psw']);
$query = $conn->query('select * from tbuser where username = "'.$username.'" and password = "'.$password.'" ');
if($query->num_rows > 0){
$_SESSION['user'] = $username;
echo "Login Success, Selamat datang <strong>".$_SESSION['user']."</strong>";
echo " <a href='logout.php'>Logout</a>";
}else{
echo "login failed";
}
?>Bisa dilihat pada kode diatas saya menggunakan session yg diawali dengan memanggil fungsi session_start() pada baris pertama. Kemudian dibaris kedua kita memanggil file koneksi yang sudah dibuat sebelumnya fungsinya agar kita tidak membuat koneksi terus menerus pada tiap file.
Pada password harus dienkripsi md5 karena pada saat memasukan record kita menggunakan fungsi md5 juga. $_POST adalah sebuah variable super global variable pada php yang bertugas untuk memproses input dengan method post.
Selanjutnya kita meng-query user yang memiliki memiliki username yang telah diinputkan user dan passwordnya setelah itu dihitung jumlah baris dari hasil query tersebut. Jika hasilnya lebih besar dari 0 maka user yang dimaksud ditemukan didatabase.
Membuat Logout
Setelah login berhasil saya menyertakan link untuk logout user. Karena kita belum memiliki file logout maka kita akan membuatnya terlebih dahulu. Buat file bernama logout.php:
<?php
session_start();
session_destroy();
header('Location: index.php');
?>Initi dari proses logout adalah untuk mengapus session karena diproses login tadi kita menggunakan session untuk menyimpan data user. Selanjutnya user di-redirect ke halaman index.php lagi.
Oh iya berikut saya share link githubnya jadi kalian bisa download source codenya langsung disana ya, siapa tahu ada yang lagi buat tugas udah h-1 hahaha.