LEMBAR KEGIATAN PESERTA DIDIK

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

MENERAPKAN APLIKASI WEB STATEFULL

NAMA SISWA : Allief Rahman

KELAS : XII ACP

Pertemuan 3 Hari / Tanggal : 21 SEPTEMBER 2022

KOMPETENSI DASAR
3.19. Menerapkan aplikasi web statefull
Indikator:
3.19.3 Menjelaskan prosedur konsep session dan cookies dalam pemrograman aplikasi
web.
3.19.4 Menerapkan konsep session dan cookies dalam pemrograman aplikasi web
(LOGIN).

4.19. Membuat aplikasi web statefull

Indikator:
4.19.3. Merancang program aplikasi web (LOGIN) yang menerapkan konsep statefull yakni
Session dan Cookies
4.19.4. Membuat kode program aplikasi web (LOGIN) menggunakan statefull yakni
session dan cookies.

TUJUAN PEMBELAJARAN
1. Melalui pengamatan dan literasi, dengan rasa ingin tahu Peserta didik mampu menjelaskan
prosedur konsep session dan cookies dalam pemrograman aplikasi web dengan baik

2. Melalui pengamatan literasi, dengan rasa ingin tahu Peserta didik mampu menerapkan konsep
session dan cookies dalam pemrograman aplikasi web (LOGIN) sesuai SOP.

3. Melalui pengamatan dan literasi,dengan rasa ingin tahu Peserta didik mampu Merancang
program aplikasi web (LOGIN) yang menerapkan konsep statefull yakni Session dan Cookies
dengan benar.

4. Melalui diskusi,praktek dan pengembangan project, Peserta didik mampu Membuat kode
program aplikasi web (LOGIN) menggunakan statefull yakni session dan cookies sehingga dapat
dieksekusi dengan baik.
MATERI PEMBELAJARAN

PENDAHULUAN

Kalau website Anda membedakan pengunjung yang datang, misalnya member dan non
member, membuat PHP login session sangat diperlukan.

Dengan login session PHP, Anda dapat membatasi hak akses pengunjung agar dapat mengakses
konten atau menu sesuai role yang dimiliki.

Lalu, bagaimana cara membuat login dengan PHP menggunakan session? Tidak rumit, kok. Yuk,
langsung saja simak panduan lengkapnya!

SESSION
Session merupakan hal yang cukup penting dalam aplikasi berbasis web. Dengan session
memungkinkan programmer menyimpan informasi user secara semi-permanen, artinya selama
masa tertentu informasi akan tersimpan. Penyimpanan isi variabel session berada di server, jadi
tidak bisa diakses secara langsung oleh client1
Dalam penanganan session terdapat beberapa proses yang perlu diperhatikan :
- Proses pembuatan session
- Proses pemeriksaan session
- Proses penghapusan session
COOKIE

                                                   (sumber: http://www.transiskom.com/)

Gambar Cara Kerja Cookies

Cookies atau bisa isebut HTTP cookies, web cookies, atau browser cookies adalah data
atau informasi yang diciptakan oleh suatu website untuk disimpan di web browser, ketika user
sedang menjelajahi website tersebut.

Cookie mempunyai umur, artinya adalah setiap data yang kita simpan dalam komputer
user suatu saat bisa hilang atau musnah. Ini dikarenakan bahwa cookie mempunyai umur atau
masa disimpan dalam komputer user.
Beberapa jenis cookies diantaranya:
1. Non persistent (session) cookies. Suatu cookie yang akan hilang sewaktu user menutup
browser dan biasanya digunakan pada ‘shopping carts’ di toko belanja online untuk
menelusuri item-item yang dibeli,

1
2. Persistent cookies. Diatur oleh situs-situs portal, banner / media iklan situs dan lainnya yang
ingin tahu ketika user kembali mengunjungi site mereka. (misal dengan cara memberikan opsi
”Remember Me” saat login). File file ini tersimpan di hardisk user.

Dalam penanganan cookies juga terdapat beberapa proses yang perlu diperhatikan :
- Proses pembuatan cookies
- Proses pemeriksaan cookies
- Proses penghapusan cookies

Ada beberapa hal yang perlu Anda siapkan lebih dulu sebelum membuat login session
PHP, yaitu :

Web Server. PHP tidak dapat dijalankan tanpa web server. Nah, jika Anda membuat
aplikasi PHP pada komputer lokal (sebelum di hosting), Anda dapat menggunakan
aplikasi web server seperti XAMPP.
Text Editor. Dibutuhkan untuk menulis kode pemrograman, pada tutorial ini kami
menggunakan Visual Studio Code.
Web Browser. Digunakan untuk mengakses website, pada tutorial ini kami
menggunakan Google Chrome.

Jika ketiga tools diatas sudah disiapkan, Anda dapat langsung mengikuti 9 langkah
membuat php login session sebagai berikut :

1. Menjalankan XAMPP
2. Membuat Database
3. Membuat Struktur Project
4. Menghubungkan Database
5. Membuat Halaman Login
6. Membuat Halaman Register
7. Membuat Halaman Berhasil Login
8. Membuat File logout.php
9. Menambahkan File style.css

Untuk lebih Jelasnya mari kita ikuti pada langkah-langkah selanjutnya.

ALAT DAN BAHAN:

1. Alat : Komputer, Software Web Server (XAMPP) , Software Notepad++, Web Browser
2. Bahan : -

SUMBER PEMBELAJARAN:
Internet : https://id.wikipedia.org/wiki/HTML, https://www.w3schools.com/
https://www.duniailkom.com/pengertian-dan-fungsi-php-dalam-
pemograman-web/
https://www.ilmuwebsite.com/
http://jagocoding.com/category/php_pure
https://www.youtube.com/user/phpacademy
https://www.udemy.com/topic/php/
https://www.codepolitan.com/interactive-coding/php
 https://www.niagahoster.co.id/blog/php-login-session/

Buku Digital: Rekayasa Perangkat Lunak, BSE Kemdikbud, bse.kemdikbud.go.id

LANGKAH-LANGKAH MEMBUAT LOGIN dengan Session

Tuliskan / salin setiap script,query atau langkah demi langkah pada kolom perintah dibawah ini,
kemudian tampilkan hasilnya (Sreen Shoot) dan isi penjelasan / keterangannya:

1. Menjalankan XAMPP

XAMPP merupakan aplikasi cross-platform (Windows, Linux, MacOS) yang digunakan

untuk membuat web server lokal pada komputer Anda.
Dengan aplikasi ini, Anda dapat mengembangkan dan melakukan testing website. Namun,
Anda perlu menginstall XAMPP dulu pada komputer Anda.
Nah, jika XAMPP sudah terinstall, langsung saja buka aplikasi, lalu jalankan web server
Apache dan MySQL. Caranya, klik tombol Start seperti pada gambar berikut :

Screen Shoot:

2. Membuat Database
Langkah pada tutorial php login session berikutnya adalah membuat database.
Database diperlukan sebagai tempat penyimpanan data user, seperti username,
maupun password yang digunakan untuk login.
Untuk membuat database, Anda perlu mengakses localhost/phpmyadmin pada
web browser, atau melalui CMD. Lengkapi Database yang sudah dibuat
sebelumnya:

Nama Database: multilogin.

Nama Table : user.
Structur Table : iduser int(10), namalengkap varchar(30), username
varchar(30), password varchar(30), level enum(‘admin,’siswa’,’guru’).

Screen Shoot:
(Tampilkan Database,Table dan data yang sudah dibuat sebelumnya :)
3. Membuat Struktur Project
Setelah menyiapkan database, sekarang waktunya untuk menulis kode program
php login session. Tapi, sebelumnya siapkan dulu struktur project webnya.
Pertama-tama, Anda harus membuat folder khusus untuk menyimpan project web.
Namun, folder tersebut harus ditempatkan di dalam folder htdocs yang merupakan
folder home dari web server. Folder htdocs berada pada path C:\xampp\htdocs

Screen Shoot:
(Tampilkan folder,file-file,berikut image (jika ada) yang sudah dibuat :)

4. Menghubungkan Database
Untuk membuat login session PHP, Anda perlu menghubungkan database yang
baru dibuat dengan website. Caranya, isilah file config.php yang telah dibuat pada
langkah sebelumnya dengan kode untuk membuat koneksi ke database sebagai
berikut :

Script koneksi :
<?php
$koneksi = mysqli_connect("localhost","root","","multilogin");
?>

Screen Shoot:
5. Membuat Halaman Login

Pada tutorial php session login ini, index.php berisi kode yang digunakan untuk
halaman login. Jika Anda perhatikan, dalam file ini terdapat 2 bagian.

Bagian pertama adalah kode PHP yang digunakan untuk validasi username dan
password untuk login. Sedangkan, bagian kedua merupakan kode HTML halaman
login yang terdiri dari link file CSS dan kerangka form login.

Script :
 LOGIN.PHP
<!DOCTYPE html>
<html>
<head>
<title>LOGIN MULTI USER !!!</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>

<body>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- script bootstrap -->
<input type="text" id="registerUsername" class="form-control" />
<section class="vh-100">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5">
<img src="https://tse3.mm.bing.net/th?
id=OIP.WSsEL2SsjDjinezmtypErgHaHa&pid=Api&P=0"
class="img-fluid" alt="Sample image">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form method="POST" action="proslog.php">
 <div class="d-flex flex-row align-items-center justify-content-center justify-
content-lg-start">

</div>

<div class="divider d-flex align-items-center my-4">

</div>

<!-- Email input -->

<div class="form-outline mb-4">
<label class="form-label" for="form3Example3">Username</label>
<input type="text" class="form-control form-control-lg" name="username"
placeholder="Masukan Username Anda">
</div>

<!-- Password input -->

<div class="form-outline mb-3">
<label class="form-label" for="form3Example4">Password</label>
<input type="password" class="form-control form-control-lg" name="password"
placeholder="Masukan Password Anda">

</div>

<div class="d-flex justify-content-between align-items-center">

<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value=""
id="form2Example3" />
<label class="form-check-label" for="form2Example3">
Remember me
</label>
</div>
<a href="#!" class="text-body">Lupa password?</a>
</div>

<div class="text-center text-lg-start mt-4 pt-2">

<button type="Submit" class="btn btn-primary btn-lg">Login</button>
<p class="small fw-bold mt-2 pt-1 mb-0">Belum Punya Akun? <a
href="register.php"
class="link-danger">Registrasi</a></p>
<a href="Registrasi.php"> Registrasi</a>
</div>

</div>
</div>
</div>

<div
class="d-flex flex-column flex-md-row text-center text-md-start justify-content-
between py-4 px-4 px-xl-5 bg-primary">
<!-- Copyright -->
 <td></td> <td></td>

<div class="text-white mb-3 mb-md-0">

Copyright © 2020. All rights reserved.
</div>
<!-- Copyright -->

<!-- Right -->

<div>
<a href="#!" class="text-white me-4">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-twitter"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-google"></i>
</a>
<a href="#!" class="text-white">
<i class="fab fa-linkedin-in"></i>
</a>

</div>
<!-- Right -->
</div>
</section>

<!-- Submit button -->

</form>
</div>
</div>
</body>
</html>
<!-- Pills content-->
 PROSLOG.PHP
<?php
session_start();
include 'koneksi.php';

$username = $_POST['username'];
$password = $_POST['password'];

$sql = mysqli_query($koneksi,"SELECT * FROM user WHERE

username='$username' AND password='$password' " );
$data = mysqli_fetch_array($sql);
$cek = mysqli_num_rows($sql);

if ($cek>0) {
if ($data['level']=="admin"){
$_SESSION['username']=$username;
$_SESSION['status']="login_admin";
 $_SESSION['iduser']=$data[0];
header("location:admin/index.php");

}else if ($data['level']=="siswa"){
$_SESSION['username']=$username;
$_SESSION['status']="login_siswa";
$_SESSION['iduser']=$data[0];
header("location:siswa/index.php");

}else if ($data['level']=="guru"){
$_SESSION['username']=$username;
$_SESSION['status']="login_guru";
$_SESSION['iduser']=$data[0];
header("location:guru/index.php");
}
}else{
?>
<script type="text/javascript">
alert("username atau password SALAH");
window.location="login.php";
</script>

<?php
}

?>
 LOGOUT.PHP
<?php
session_start();
session_destroy();
header("location:login.php");
?>

Screen Shoot:
 LOGIN.PHP
 PROSLOG.PHP

 LOGOUT.PHP
 6. Membuat Halaman Register

Pada halaman ini, Anda akan membuat form registrasi. Halaman ini dibuat karena
untuk melakukan login, Anda memerlukan data user yang tersimpan di database.
Sama seperti halaman login, halaman register juga terdiri dari 2 bagian, kode PHP
dan HTML.
Bagian PHP berisi kode untuk menambahkan data user yang dimasukkan pada
kolom registrasi, yaitu : username, dan password.
Untuk jaminan keamanan, password yang dimasukkan akan langsung dienkripsi
pada database sehingga admin sekalipun tidak dapat mengetahui password Anda.
Bagian HTML berisi kode untuk membuat struktur halaman dan form registrasi.
Agar lebih jelas, silahkan salin kode di bawah ini pada file register.php
Script :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>

<section class="vh-200 bg-image"

style="background-image:
url('https://png.pngtree.com/thumb_back/fw800/background/20190626/pngtree-hand-drawn-
decorative-batik-pattern-with-abstract-flowers-image_259153.jpg');">

<div class="mask d-flex align-items-center h-100 gradient-custom-3">

<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>

<form action="prosreg.php" method="POST" name="form1">

<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Nama</label>
</div>

<div class="form-outline mb-4">

<input type="text" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Username</label>
</div>

<div class="form-outline mb-4">

 <input type="password" id="form3Example4cg" class="form-control form-control-
lg" />
<label class="form-label" for="form3Example4cg">Password</label>
</div>

<div class="form-outline mb-4">

<input type="password" id="form3Example4cdg" class="form-control form-control-
lg" />
<label class="form-label" for="form3Example4cdg">Level</label>
</div>

<div class="d-flex justify-content-center">

<button type="submit" class="btn btn-success btn-block btn-lg gradient-custom-4
text-body">Register</button>
</div>

<p class="text-center text-muted mt-5 mb-0">Have already an account? <a

href="login.php"
class="fw-bold text-body"><u>Login here</u></a></p>

</form>

</div>
</div>
</div>
</div>
</div>
</div>
</section>

Screen Shoot:
7. Membuat Halaman Berhasil Login
Untuk mengecek apakah php login session sudah berhasil dibuat, kami membuat
lagi sebuah halaman baru dengan nama berhasil_login.php.
Jika Anda dapat mengakses halaman ini setelah melakukan login, artinya php
session login berhasil dibuat.
Pada halaman ini, kami hanya menampilkan ucapan selamat datang dan tombol
untuk melakukan logout.

Screen Shoot:
8. Membuat File logout.php
Ketika tombol Logout di klik, script logout.php akan dijalankan. Script ini berfungsi
untuk menghapus session. session_destroy() menandakan bahwa session telah
berakhir dan Anda akan diarahkan ke halaman index.php (halaman login).
Script Lengkap:
<?php
session_start();
session_destroy();
header("location:login.php");
?>

Screen Shoot:

9. Menambahkan File style.css

Untuk memperindah tampilan web, Anda perlu menambahkan file CSS. File style.css ini
dipanggil pada script HTML halaman login, halaman register serta halaman berhasil login.
Sebelumnya, siapkan gambar yang akan Anda gunakan untuk background, ya. Lalu, ganti
nama file background-image yang terdapat pada selektor body.
 KESIMPULAN

NILAI Guru Mata Pelajaran

Irwan Kurniawan,S.T