Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Membuat Fitur LogIn dan LogOut

A. Persiapan
1. Membuat Dummy Data pada Database
Sebelum membuat fitur login, mari kita siapkan dulu dummy data user untuk nanti
dijadkan ujicoba sistem. Untuk itu silakan isikan data pada tabel user pada database. Pada
masing-masing jenis user minimal buatlah 1 user sebagai dummy. Perhatikan dalam
pembuatan data dummy gunakanlah enkripsi pada isian kolom password, kali ini yang akan
kita coba adalah menggunakan enkripsi MD5. Kalian dibebaskan untuk membuat datanya,
untuk memudahkan dalam pembuatan materi maka akan dicoba membuat data seperti pada
tabel 1 berikut.

Tabel 1. Dummy data tabel user

Username Password Nama Level Outlet

admin admin123 Administrator admin pusat
kasir_pusat kasir123 Kasir Pusat kasir pusat
owner owner123 Owner owner pusat

Jika kalian langsung melakukan input data pada database dimungkinkan akan
menemui error, hal ini dikarenakan pada saat membuat database lalu kita membuat
persyaratan bahwasanya kolom outlet pada tabel user mengambil data dari kolom tabel
outlet. Untuk menangani masalah ini maka silakan membuat dulu data dummy pada tabel
outlet, bisa dengan menambahkan sebuah data yaitu data outlet pusat. Untuk dummy data bisa
ditirukan sesuai contoh pada tabel 2.

Tabel 2. Dummy data pada tabel outlet

Nama Outlet Pusat

Alamat Outlet Jl. Paris Km 11, Sabdodadi, Bantul
Telp Outlet 081333909024

Setelah kalian melakukan insert data dummy pada database, maka kita akan
mendapati bahwa kita memiliki serangkain data sebagai berikut. Catatan penting, jangan lupa
mengaktifkan enkripsi MD5 saat mengisikan data password.

Gambar 1. Hasil pembuatan dummy data pada tabel user

2. Membuat Koneksi Database

Bait Syaiful RIjal, M.Pd | 1

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Setelah selesai membuat data dummy, selanjutnya kita akan membuat koneksi dengan
database. Hal ini dilakukan agar project kita akan dapat terhubung dengan database yang
telah kita buat. Caranya sangat mudah, silakan kalian membuat file baru bernama
koneksi.php setelah itu tuliskan syntax sebagai berikut.

<?php

// nama host, Username, password dan nama database

$koneksi = mysqli_connect("localhost","root","","pwpb_laundry");

// Periksa Koneksi
if (mysqli_connect_errno()){
echo "Koneksi database gagal : " . mysqli_connect_error();
}
?>

Untuk dapat memastikan apakah database sudah terkoneksi, kalian bisa mengakses
pada url dengan mengakses file koneksi.php. Jika tidak ada tampilan pesan error, secara
sederhana database kita telah terkoneksi. Silakan dapat kalian lihat pada gambar berikut
untuk detailnya.

Gambar 2. Hasil test koneksi database

3. Membuat htaccess pada project

Setelah membuat koneksi database, kali ini kita akan mencoba menambahkan
htaccess pada project kita. Hal ini dilakukan untuk tujuan menghilangkan ekstensi .php pada
akses data di url project kita. Untuk melakukan hal ini langkahnya silakan buat sebuah file
“.htaccess” lalu tuliskan syntax pada berikut ini.

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php
</IfModule>

Dengan menambahkan file ini kedalam project kita, untuk mengakses suatu file dalam
project yang sebelumnya perlu dituliskan dengan ekstensinya sekarang cukup dengan
memanggil nama filenya saja. Hal ini juga berlaku ketika mengaksesnya ketika melalui url.
B. Membuat Fitur Login

Bait Syaiful RIjal, M.Pd | 2

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

1. Menyiapkan Form Login

Pada materi sebelumnya kita telah membuat tampilan halaman login yaitu pada
index.php yang ada pada direktori root project kita. Bukalah file tersebut dan akan kita
lakukan perubahan pada kode form loginnya. Silakan kalian perhatikan pada syntax berikut.

<form action="login" method="post">

<div class="panel">
<br/>
<div class="panel-body">

<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password">
</div>

<input type="submit" class="btn btn-primary" value="Log In">

</div>
<br/>
</div>
</form>

Tambahkan syntax yang ditandai pada sourcode form dalam file index.php project
kalian. Hal ini dimaksudkan kita memberikan perintah ketika submit inputan dari form maka
akan dilemparkan datanya menuju file login.php. Secara prinsip login disitu menuju pada file
login.php yang berisi rangkaian syntax untuk memproses algoritma login. Kita dapat
menuliskan nama filenya saja tanpa ekstensi karena sebelumnya kita telah membuat .htaccess
pada project yang kita kembangkan. Jika tanpa hal tersebut maka perlu dituliskan utuh
dengan ekstensi filenya. Selanjutnya method yang digunakan untuk mengirimkan data adalah
menggunakan method post.

2. Membuat Login.php
Untuk melakukan proses olah data login, maka kita akan menampungnya dalam
rangkaian syntax yang dituliskan didalam file login.php. Dalam file login.php inilah
algoritma login pada project aplikasi kita diproses. Silakan kalian buat file bernama
login.php lalu tuliskan syntax sebagai berikut.

<?php
// menghubungkan dengan koneksi
include 'koneksi.php';

// menangkap data yang dikirim dari form

$username = $_POST['username'];
$password = md5($_POST['password']); //melakukan enkripsi menjadi format MD5

// mencari data pada tabel user sesuai data inputan form

Bait Syaiful RIjal, M.Pd | 3

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

$sql = "SELECT * FROM tb_user WHERE user_username='$username' AND

user_password='$password'";

// membuat variabel mengkonfirmasi data antara aplikasi dengan database

$login = mysqli_query($koneksi, $sql);

//membuat value untuk membaca kondisi data, jika ditemukan value 1 jika tidak 0
$cek = mysqli_num_rows($login);

//membuat algoritma decision menggunakan value kondisi data

if($cek > 0){

//memecah data menjadi perkolom dari tabel

$data = mysqli_fetch_assoc($login);

//membuat algoritma untuk membedakan data level user sebagai bahan penentuan login
if($data['user_level'] == "admin"){
header("location:admin/");
}else if($data['user_level'] == "kasir"){
header("location:kasir/");
}else if($data['user_level'] == "owner"){
header("location:owner/");
}else{
header("location:index?alert=gagal");
}
}else{
header("location:index?alert=gagal");
}

Setelah kalian tulis sourcecode diatas, silakan lakukan test pada aplikasi kalian.
Cobalah untuk melakukan login melalui form dengan mengisikan data username dan
passwordnya. Jika data yang diisikan sesuai dengan yang ada pada database maka user dapat
masuk kepada halaman sesuai jenis level usernya. Namun jika yang diisikan tidak sesuai
makan akan ada pesan gagal yang dapat kalian pada bagian form url.
Jika sudah berhasil maka syntax tersebut sudah berjalan sesuai fungsinya. Namun hal
ini baru dasar dari penerapan fitur login, untuk melangkap fungsional dari fitur login maka
kita akan menambahkan konsep session sebagai penambahan pengamanan pada project
aplikasi kita. Silakan kalian ikuti materi selanjutnya.

3. Menerapkan Session pada Fitur Login

Login yang sudah dibaut sebelumnya memang sudah berjalan, hanya saja jika kalian
mengaksesnya dengan menuliskan halamannya langsung pada url maka masih bisa diakses.
Seharusnya ketika user belum mengisikan data pada form dan hasilnya divalidasi oleh
database, user tersebut tidak bisa mengakses halaman yang dituju. Untuk mencegah hal
tersebut maka kita akan menggunakan konsep session pada pemrogaman web.
Terkait materi teori dan konsep session dapat kalian baca pada materi teori topik 1
yang telah disediakan pada menu referensi materi didalam classroom. Pada materi disini kita
akan langsung melakukan penerapannya aplikatif didalam coding pengembangan project.
Untuk menambahkan session dapat kalian perhatikan mengikuti tutorial berikut ini.

Bait Syaiful RIjal, M.Pd | 4

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

4. Menambahkan Alert Message pada Halaman Login

Ketika sebelumnya kita mencoba melakukan login, saat data tidak sesuai maka akan
ada pesan gagal melalui url. Sekarang kita akan membuat pesan tersebut dapat ditampilkan
pada halaman aplikasi kita. Namun, pesan yang akan kita buat kali ini tidak hanya sebatas
ketika terjadi gagal karena kesalahan data saja. Kita juga akan menampilkan pesan gagal
ketika user mencoba melakukan bypass tanpa melakukan pengisian form terlebih dahulu. Hal
ini sejalan dengan penerapan session yang akan kita terapkan pada project kita selanjutnya.
Jika kalian sudah memahami deskripsi pekerjaan yang akan kita lakukan saat ini,
silakan kalian dapat membuka file index.php lalu kalian lakukan perubahan pada sourcecode
nya sesuai panduan berikut.

<!-- Menambahkan alert messages -->

<?php
if(isset($_GET['alert'])){
if($_GET['alert'] == "gagal"){
echo "<div class='alert alert-danger'>Login gagal! username dan password salah!
</div>";
}else if($_GET['alert'] == "belum_login"){
echo "<div class='alert alert-danger'>Anda harus login untuk mengakses halaman
admin</div>";
}
}
?>

Kalian bisa menambahkan syntax diatas kedalam file index.php, letakkan didalam
container diatas syntax form. Jika kalian sesuai dalam penerapannya maka akan
menghasilkan tampilan pesan sebagai berikut.

Gambar 3. Tampilan alert messages pada aplikasi

Bait Syaiful RIjal, M.Pd | 5

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

5. Menambahkan Session
Untuk menambahkan session, kita akan melakukan 2 proses dalam penerapannya.
Yang pertama melakukan penambahan session pada algoritma di file login.php. Langkah
pertama ini bertujuan untuk mengaktifkan session dan membuat data session. Lalu yang
kedua menambahkan session pada sisi dashboard masing-masing user, yaitu pada file
index.php di masing-masing folder user. Langkah kedua bertujuan membuat syarat kondisi
ketika ingin mengakses file ini maka memerlukan suatu data session tertentu. Untuk lebih
jelasnya kalian dapat mengikuti panduan sebagai berikut.
Bukalah file login.php lalu lakukan perubahan pada sourcecode nya dengan
menambahkan beberapa syntax session sebagai berikut. Merubah susunan sourcode pada
bagian decision didalam file login.php.

if($cek > 0){

//memecah data menjadi perkolom dari tabel

$data = mysqli_fetch_assoc($login);

//mengaktifkan session
session_start();
$_SESSION['id'] = $data['user_id'];
$_SESSION['username'] = $data['user_username'];
$_SESSION['nama'] = $data['user_nama'];
$_SESSION['level'] = $data['user_level'];

//membuat algoritma untuk membedakan data level user sebagai bahan penentuan login
if($data['user_level'] == "admin"){
header("location:admin/");
//membuat kondisi session untuk akses data
$_SESSION['status'] = "admin_login";

}else if($data['user_level'] == "kasir"){

header("location:kasir/");
//membuat kondisi session untuk akses data
$_SESSION['status'] = "kasir_login";

}else if($data['user_level'] == "owner"){

header("location:owner/");
//membuat kondisi session untuk akses data
$_SESSION['status'] = "owner_login";

}else{
header("location:index?alert=gagal");
}
}else{
header("location:index?alert=gagal");
}

Setelah melakukan perubahan pada file login.php selanjutnay kita akan menambahkan
session pada bagian index.php dimasing-masing folder user yang ada dalam project aplikasi

Bait Syaiful RIjal, M.Pd | 6

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

kita. Penambahan syntax yang dilakukan dapat mengikuti panduan sebagai berikut. Kalian
dapat meletakan syntax didalam bagian head pada file index.

<!-- Menambahkan session pada dashboard admin -->

<?php
include '../koneksi.php';
session_start();
if($_SESSION['status'] != "admin_login"){
header("location:../index?alert=belum_login");
}
?>

Letakan penambahan syntax ini pada bagian head dalam file index.php dimasing-
masing folder user. Untuk lebih detailnya dapat kalian lihat pada ganbar berikut.

Gambar 4. Penambahan syntax session pada index.php didalam folder admin

Lakukan hal yang sama pada file index.php lainnya yang ada didalam folder user
selanjutnya. Sesuaikan syntax sesuai jenis usernya, dengan kalian bisa mengganti pada isian
status yang diatas awalnya “admin_login” disesuaikan dengan file mana yang kalian rubah.
Jika kasir maka menjadi “kasir_login” dan jika owner maka menjadi “owner_login”.
Hal ini diseragamkan sesuai ketika kalian membuat data session didalam file login.php.
Sampai sini silakan kalian pahami terlebih dahulu detail dari sourcecode yang sudah kita
tuliskan dalam project aplikasi ini.
Sekarang lakukan test pada aplikasi yang telah diupdate. Silakan mencoba login
dengan cara mengakses langsung pada halaman dashboard tanpa melalui form, dengan cara
mengakses alamat langsung melalui url. Jika tertampil pesan eror maka penambahan session
yang dilakukan sudah benar. Jika belum, silakan cek lagi coding yang kalian lakukan dan
perbaiki permasalahan tersebut.

C. Membuat Fitur Logout

Bait Syaiful RIjal, M.Pd | 7

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Setelah sebelumnya kita belajar membuat fitur login pada aplikasi, selanjutnya kita
akan menambahkan fitur logout sebagai pasangan dari login. Caranya sangat mudah, tidak
sepanjang ketika kita membuat login. Kalian dapat mengikuti cara membuat fitur logout
sebagai berikut.
Fitur logout dapat digunakan ketika user sudah melakukan login terlebih dahulu.
Secara prinsip begitulah cara fitur ini bekerja, sehingga kita bisa membuat logout dari menu
yang ada didalam aplikasi masing-masing user. Untuk itu, silakan buka file index.php dari
masing-masing user lalu tambahkan syntax untuk mengakses file logout.php yang berisi
algoritma untuk melakukan perintah logout. Silakan perhatikan pada gambar berikut.

Gambar 5. Menambahkan syntax mengakses fitur logout

Lakukan perubahan tersebut diatas pada ketiga file index.php yang berada didalam
folder masing-masing user. Kegunaan syntax tersebut adalah untuk membuat link
mengakses menuju ke file logout.php. Selanjutnya kita akan menyiapkan file logout.php itu
sendiri. Buatlah file dengan nama logout.php pada masing-masing folder user, lalu tuliskan
syntax sebagai berikut.

<?php
session_start();
session_destroy();

header("location:../index?alert=logout");
?>

Jika sudah menambahkan file tersebut, selanjutnya kita akan melakukan penambahan
alert sesuai dengan yang kita lakukan pada fitur logout, yaitu alert “logout”. Untuk itu
silakan kalian buka index.php yang ada di root aplikasi atau index.php halaman login.
Lakukan update alert dengan menambahkan syntax sebagai berikut.

Bait Syaiful RIjal, M.Pd | 8

 Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Gambar 6. Penambahan alert logout pada halaman login

Setelah maenambahkan alert, sekarang silakan kalian coba untuk login lalu
melakukan logout. Jika sudah tertampil pesan bahwa anda sudah berhasil logout maka update
fitur yang kita tambahkan sudah berjalan dengan benar. Dan ini adalah akhir dari materi pada
tutorial kali ini, untuk selanjutnya kita akan masuk pada materi CRUD pada masing-masing
tabel sesuai fitur yang ada pada aplikasi yang kita kembangkan.
Hasil report progres aplikasi kita hingga materi ini diselesakan dapat kalian lihat pada
gambar berikut. Jika kalian mengikuti sesuai dengan tutorial yang ada di classroom maka
kurang lebih struktur project kita akan seperti pada gambar, namun kalian tetap
diperkenankan melakukan eksplorasi mandiri sesuai dengan minat dna hasil belajar masing-
masing siswa.

Gambar 7. Struktur Project Progress

__ Selamat Belajar dan Berkarya __

Bait Syaiful RIjal, M.Pd | 9