Pertemuan 5

LAPORAN RESMI
PRAKTIKUM PEMROGRAMAN WEB
MODUL 5
SESSION, COOKIES, & HALAMAN LOGIN
NIM : 21104410049
NAMA : Viery Nugroho
JURUSAN : Teknik Informatika
KELAS : TI 4B
TGL. PRAKTEK : 12 Juli 2023
JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS ISLAM BALITAR
2023
LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

VIERY NUGROHO (21104410049)
LEMBAR PERSETUJUAN
MODUL 5
SESSION, COOKIES, & HALAMAN LOGIN
NIM : 21104410049
NAMA : Viery Nugroho
JURUSAN : Teknik Informatika
KELAS : TI 4B
TGL. PRAKTEK : 12 Juli 2023
Disetujui,
Blitar, 18 Juli 2023
Dosen Pengampu Praktikum
Abdi Pandu Kusuma, S.Kom., M.T
NIDN. 0710058506

BAB I
PENDAHULUAN
1.1 Pemrograman Web

Web Programming atau Pemrograman Web merupakan istilah yang erat
kaitannya dengan internet dan website. Memang benar, karena pemrograman web
merupakan suatu proses pembuatan website untuk keperluan internet. Orang
banyak mengenal web dengan istilah WWW atau World Wide Web.
World Wide Web adalah halaman-halaman website yang terkoneksi satu
dengan lainnya atau disebut juga dengan hyperlink yang membentuk samudera
informasi yang berjalan dengan protocol HyperText Transfer Protocol (HTTP).
1.2 Bahasa Pemrograman Web
Dalam semua ilmu tentang pemrograman baik itu desktop, mobile, game
maupun software atau aplikasi lainnya pasti selalu ada bahasa-bahasa
pemrograman yang digunakan untuk membuat aplikasi tersebut yang berisikan
statement-statement, perintah, atau pun fungsi agar aplikasi yang dibuat sesuai
dengan apa yang telah didesain oleh si programmer. Oleh karena itu pemrograman
web pun memiliki banyak bahasa yang digunakan, diantaranya:
a. HyperText Markup Language (HTML)
HTML sebenarnya bukan sebuah bahasa pemrograman, melainkan
markup language atau bahasa penandaan yang terdiri dari kumpulan tag.
Pada dasarnya HTML hanya mendeskripsikan bahwa bagian tertentu dalam
sebuah halaman web adalah isi yang harus ditampilkan oleh browser
dengan cara tertentu. HTML merupakan standar internet yang didefinisikan
dan dikendalikan oleh World Wide Web Consortium (W3C).
b. Cascading Style Sheet (CSS)
CSS merupakan bahasa stylesheet yang digunakan untuk mengatur
tampilan suatu dokumen yang ditulis dengan HTML. CSS juga memiliki CSS
Framework dan digunakan untuk menambahkan desain halaman menarik
untuk dilihat. Penggunaan CSS paling umum adalah untuk mengatur
halaman web yang ditulis dengan HTML atau XHTML.
c. Hypertext Preprocessor (PHP)
Bahasa pemrograman PHP merupakan salah satu bahasa scripting
yang wajib dikuasai oleh seorang web developer. Karena sifatnya yang
server side scripting, maka untuk menjalankan bahasa pemrograman PHP

tidak hanya bisa memanggil file yang berekstensi .PHP saja. Bahasa
Pemrograman PHP juga dapat diintegrasikan dengan HTML, JavaScript,
JQuery, Ajax, dan lain sebagainya. Akan tetapi pada umumnya bahasa
pemrograman PHP digunakan bersamaan dengan file yang bertipe HTML
agar file tersebut dapat menjalankan berbagai fungsi.
d. Javascript
Javascript adalah bahasa scripting yang berjalan pada sisi client.
Maksudnya adalah pemrosesan script dilakukan sendiri pada komputer user.
Biasanya Javascript digunakan untuk membuat animasi-animasi dan bentuk
interaktif lain pada halaman web. Terbukti dari banyaknya library-library
JavaScript yang dapat digunakan oleh programmer untuk membuat halaman
web yang dibuat menjadi lebih interaktif. Untuk menjalankan script yang
ditulis dalam JavaScript, kita membutuhkan browser yang mendukung dan
mampu menjalankan JavaScript atau sering disebut dengan javascript-
enabled browser.
e. Structured Query Language (SQL)
SQL merupakan domain-spesific language yang digunakan untuk
mengolah data dalam Relational Database Management System (RDBMS).
Aplikasi RDBMS yang banyak digunakan oleh para programmer aplikasi web
untuk mengolah basis data mereka adalah MySQL. Biasanya digunakan
fungsi-fungsi dalam bahasa pemrograman PHP untuk membuat, membaca,
mengubah ataupun menghapus data dalam SQL yang kemudian dapat
ditampilkan pada halaman web. Istilah ini biasanya dikenal dengan istilah
CRUD (Create, Read, Update, Delete) dalam pemrograman.
Selain bahasa di atas, bisa dikatakan hamper semua bahasa pemrograman

dapat digunakan dalam pemrograman web selama bahasa tersebut dapat bekerja
dalam web server dan dapat menciptakan HTML, XML, dan XHTML. Beberapa
bahasa pemrograman web yang popular diantaranya yaitu PHP, ASP.NET, Ruby
on Rails, PERL, ASP classic, Python, dan JSP.
1.3 PHP
PHP merupakan singkatan dari PHP: Hypertext Preprocessor, adalah salah
satu bahasa scripting open source yang banyak digunakan oleh web developer

untuk pengembangan web. PHP banyak digunakan untuk membuat banyak project
seperti Grafik Antarmuka (GUI), Website Dinamis, dan lain-lain.
Bahasa pemrograman PHP ditemukan pada tahun 1994 oleh Rasmus
Lerdorf, versi pertama PHP tidak dirilis ke public, melainkan digunakanoleh Rasmus
Lerdorf untuk melacak siapa saja yang melihat resume online nya pada homepage
websitenya. Versi pertama digunakan oleh kebanyakan orang tersedia sekitar
tahun 1995 dan dikenal sebagai Personal Home Page Tools.
Kelebihan PHP antara lain:
a. Memiliki Community yang besar
b. Mudah dipelajari
c. Open Source
d. Lebih Ringkas
Dan kekurangan PHP antara lain:
a. Persaingan yang ketat
b. Mudah dibajak
c. Tidak dilengkapi dengan tipe data
Cara kerja bahasa pemrograman PHP meliputi beberapa tahapan:
1. Web browser mengirim permintaan HTTP ke web server, sebagai contohnya
ialah file index.php
2. PHP yang berada di dalam web server akan memproses PHP untuk
menghasilkan file HTML
3. Web Server akan mengirim file HTML Kembali ke web browser
1.4 Web Server
Web Server adalah sebuah software (Perangkat Lunak) yang memberikan
layanan berupa data. Berfungsi untuk menerima permintaan HTTP atau HTTPS
dari klien atau kita kenal dengan Web Browser. Selanjjutnya ia akan mengirimkan
respon atass permitnaan tersebut kepada client dalam bentuk halaman web.
Web Server berfungsi untuk menerima permintaan HTTP atau HTTPS dari
klien atau kita kenal dengan web browser. Mengirimkan respon atas permintaan
client dalam bentuk halaman web umumnya HTML. Jika berbicara secara detail,
maka web server memiliki peran dalam memproses berbagai data yang diminta
oleh klien (web browser). Kemudian ia memberikan hasil atau jawaban berupa
dokumen, video, foto, atau beragam bentuk berkas lainnya.

Adapun kita pecah menjadi beberapa bagian fungsi dari web server:
1. Membersihkan berbagai cache yang terdapat pada penyimpanan serta
semua dokumen yang tidak terpakai lagi.
2. Melakukan pemeriksaan terhadap sistem security yang berasal dari
permintaan HTTP berdasarkan request klien atau web browser.
3. Menyediakan data berdasarkan request atau permitnaan yang masuk agar
dapat menjamin keamanan sistem yang berjalan dengan lancar.
Web server dan paling banyak digunakan kebanyakan orang, yaitu jenis
Apache. Pada awalnya Apache di desain guna mendukung pernuh sistem operasi
UNIX. Selain cukup mudah dalam implementasinya, Apache juga memiliki
beberapa program pendukung sehingga memberikan layanan yang lengkap, seperti
PHP, SSI, dan control akses. Berikut detailnya:
1. PHP (Personal Home Page atau PHP Hypertext Processor)
Program semacam CGI, berfungsi memproses teks yang bekerja di server.
Apache sangat mendukung PHP dengan menempatkannya sebagai salah
satu modulnya (mod_php). Hal tersebut membuat PHP bekerja lebih baik
2. SSI (Server Side Include)
Perintah yang bisa disertakan dalam bekas HTML. Kemudian ia dapat
diproses oleh web server ketika pengguna mengaksesnya.
3. Access Control
Kontrol akses dapat dijalankan berdasarkan nama host atau nomor IP CGI
(Common Gateway Interface). Lalu yang paling umum untuk digunakan
adalah perl (Practical Extraction and Report Language), disupport oleh
Apache dengan menempatkannya sebagai modul (mod_perl).
Apache sangat aman dan nyaman untuk digunakan karena memiliki
beberapa keuntungan seperti proses instalasi yang mudah, freeware, dan sistem
konfigruasi yang masih tergolong mudah. Selain itu juga mampu bekerja pada
sistem oeprasi open atau closed source.
Web Server Nginx
Salah satu pesaing unggul Apache, yaitu Nginx. Nginx dikenal mampu
melayani segala macam permintaan, seperti request pada dengan tingkat
kepadatan traffic yang sangat padat. Nginx memang lebih unggul dari segi kualitas,

kecepatan, dan dalam hal performa. Nginx memiliki banyak kelebihan dalam hal
fitur, diantaranya URL rewriting, virtual host, file serving, reserve proxying, access
control, dan masih banyak lagi.
Web Server IIS
Web Server IIS (Internet Information Services) adalah web server yang
bekerja pada jenis protocol seperti DNS, TCP/IP, atau beragam software lainnya
yang berguna untuk merangkai sebuah situs.
Web Server Lighttpd
Programmer asal Jerman telah menciptakan web server berbasis open
source guna mendukung sistem Linux dan UNIX. Bila dilihat dari segi keunggulan,
web server yang satu ini memiliki beberapa keunggulan berdasarkan fitur tambahan
yang tersedia seperti FastCGi, Output-Compression, FastCGi, dan URL Writing.
Jika kamu menggunakan web server ini, kamu akan merasakan performa yang
lebih cepat dan efektif.
1.5 Manipulasi Database
Sistem Manajemen Basis Data (DBMS/DataBase Management System) adalah
suatu perangkat lunak (program) yang mengorganisasikan, mengkategorikan,
menyimpan dan menampilkan kembali serta memelihara data di dalam basis data
yang memungkinkan bagi beberapa pemakai untuk mengakses data yang disimpan
dalam basis data tersebut secara bersama-sama dengan menggunakan beberapa
aplikasi.
Dalam DBMS digunakan 3 bahasa data yang berbeda, yaitu:
1. DDL (Data Definition Language)
Adalah struktur basis data yang menggambarkan/mewakili desain basis data
secara keseluruhan dalam membuat table baru, indeks, mengubah table,
menentukan struktur penyimpanan.
Perintah SQL: Create, Alter, Drop
2. DML (Data Manipulation Language)
Adalah bentuk bahasa basis data untuk melakukan manipulasi dan
pengambilan data pada suatu basis data. Merupakan bagian inti dari bahasa
SQL yang digunakan untuk memanipulasi data dalam database yang telah
dibuat. Sub bahasa SQL ini disebut dengan DQL atau bahasa query.
Manipulasi data apda basis data dapat berupa:

i. Penyisipan/penambahan data pada file/table dalam suatu basis data
ii. Penghapusan data pada file/table dalam suatu basis data
iii. Pengubahan data pada file/table dalam suatu basis data
iv. Penelusursan data pada file/table dalam suatu basis data
3. DCL (Data Control Language)
Adalah salah satu komponen SQL yang berfungsi untuk melakukan
pengontrolan data. Pengontrolan yang dimaksud di sini meliputi
pengontrolan terhadap hak user dan pengontrolan terhadap suatu transaksi,
apakah akan disimpan secara permanen ke dalam database atau akan
dibatalkan.
Perintah DCL:
GRAND: untuk memberikan hak/izin akses oleh administrator server kepada
user.
REVOKE: kebalikan GRAND, menghilangkan hak akses.
1.5.1 Menambah Data

INSERT, perintah ini digunakan untuk menyisipkan atau memasukkan data
baru ke dalam table. Penggunaannya setelah database dan table selesai
dibuat. Ada beberapa cara dalam memasukkand ata yaitu dengan
menyamakan kolom dan data, menyebutkan kolom, tanpa menyebutkan
kolom.
Perintah SQL:
INSERT INTO `nama_tabel` (`nama_atribut`) VALUES ('value_atribute');
1.5.2 Menghapus Data
DELETE, perintah ini digunakan untuk menghapus data dari table. Biasanya
data yang dihapus merupakan data yang sudah tidak diperlukan lagi. Pada
saat menghapus data, perintah yang telah dijalankan tidak dapat digagalkan,
sehingga data yang telah hilang tidak dapat dikembalikan lagi
Perintah SQL:
DELETE FROM `nama_database `.`nama_tabel` WHERE kondisi
1.5.3 Meng-Update Data

UPDATE, perintah ini digunakan untuk memperbarui data lama menjadi data
terkini. Jika anda memiliki data yang salah atau kurang up to date dengan

kondisi sekarang, maka dapat diubah isi datanya menggunakan perintah
UPDATE.
Perintah SQL:
UPDATE `nama_database`.`nama_table` SET `nama_atribut` = 'value_baru'
WHERE kondisi
1.5.4 Membaca Data
SELECT, Perintah ini digunakan untuk mengambil data atau menampilkan
data dari satu table atau beberapa table dalam relasi. Data yang diambil
dapat kita tampilkan dalam layar prompt MySQL secara langsung maupun
ditampilkan pada tampilan aplikasi.
Perintah SQL:
SELECT (nama_kolom) nama_tabel
Sintaks SQL Dasar

1. Membuat Database
CREATE DATABASE contoh";
Untuk membuat database menggunakan perintah CREATE DATABASE
diikuti dengan nama databasenya.
2. Membuat Table
CREATE TABLE `nama_table` ( ìd` INT NOT NULL , `name`
VARCHAR(30) NOT NULL , àge` INT NOT NULL , PRIMARY KEY (ìd`))
ENGINE = InnoDB;
Untuk membuat table pada database MySQL menggunakan perintah
CREATE TABLE diikuti dengan nama table nya, kemudian pada tanda
dalam kurung berisikan nama atribut, tipe data, length, dll.
3. Membaca Data
SELECT * FROM contoh
Untuk membaca data (read) menggunakan perintah SELECT, tanda * disini
bermaksud untuk memanggil semua data.
4. Menambah Data
INSERT INTO `mahasiswa` (`nim`, `nama`, àlamat`,

`jenis_kelamin`, ùmur`, èmail`) VALUES ('001', 'viery',
'blitar', 'L', '20', 'viery@gmail.com')
Untuk menambahkan data menggunakan perintah INSERT INTO diikuti

dengan nama table dan value table sesuai dengan atributnya
5. Menghapus Data
DELETE FROM `mahasiswa` WHERE `mahasiswa`.`nim` = 1
Untuk menghapus data pada table menggunakan perintah DELETE FROM

yang diikuti dengan nama table dan kondisi yang diawali dengan perintah
WHERE
6. Merubah Data
UPDATE `mahasiswa` SET `nama` = 'viery nugroho' WHERE
`mahasiswa`.`nim` = 1"
Untuk merubah data menggunakan perintah UPDATE diikuti dengan nama

table dan kondisi yang diawali dengan perintah WHERE
1.6 Cookie
Cookie merupakan cara untuk menyimpan informasi dalam variable untuk
digunakan di beberapa halaman yang dimana data tersebut akan tersimpan disisi
komputer/web browser. Untuk membuat cookie menggunakan perintah / method
setcookie() diikuti dengan parameter seperti key, value, exp date, path, dan lain-
lain. Demikian juga ketika ingin merubah nilai cookie kita hanya melakukan
setcookie secara berulang.
Dan untuk menghapusnya kita bisa mengset ulang dan mengatur waktu exp date
dengan waktu yang sudah lewat atau dengan method unset. Dan untuj membaca
cookie (arista prasetyo) juga sama seperti kita membaca array asosiatif.
1.7 Session
Session merupakan cara untuk menyimpan informasi dalam variable untuk
digunakan di beberapa halaman yang dimana data tersebut akan tersimpan disisi
server. Untuk menggunakan session kita diwajibkan untuk menjalankan methos

session_start terlebih dahulu, dan untuk memodifikasi data pada session sama
halnya seperti kita memodifikasi sebuah array asosiatif. Selain itu untuk membaca
session juga sama seperti kita membaca array asosiatif.

BAB II
TUGAS PRAKTIKUM
2.1 Koneksi DB
// TODO koneksi database

$servername = "localhost";
$username = "root";
$password = "";
$database = "db_akademik";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal:
" . mysqli_connect_error() . "</div>";
}
Berikut ini merupakan source code untuk koneksi.php yang akan digunakan untuk
mengoneksikan website dengan database yang sudah dibuat menggunakan mysqli
dan terdapat pengecekan apakah website berhasil terkoneksi ke DB atau tidak.

2.2 Tugas Praktikum 1.1
a. Soal
Buat session pada PHP dan jalankan
b. Source Code
<?php
session_start();
const NIM = 21104410049;
$_SESSION['nama'] = 'Viery Nugroho';

$_SESSION['nim'] = NIM;
if(count($_SESSION) > 0){

echo "Username: {$_SESSION['nama']} <br>";
echo "NIM: {$_SESSION['nim']} <br>";
} else{
echo "Username: <span class='text-danger fw-
bold'>Session Kosong</span> <br>";
echo "NIM: <span class='text-danger fw-bold'>Session
Kosong</span> <br>";
}
?>
c. Tampilan
Gambar 1 session php
d. Penjelasan
Session harus dimulai terlebih dahulu dengan session_start. Kemudian data

diolah dan dimasukkan ke dalam session, yang kemudian akan terjadi
pengecekan jika session ada maka data session akan ditampilkan.

a. Soal
Buat cookie pada PHP dan jalankan
b. Source Code
<?php
const NIM = 21104410049;
// Cookie 1 hari
setcookie('nama', 'Viery Nugroho', time() + 86400, "/");
setcookie('nim', NIM, time() + 86400, "/");
if(count($_COOKIE) > 0){

echo "Username: {$_COOKIE['nama']} <br>";
echo "NIM: {$_COOKIE['nim']} <br>";
} else{
echo "Username: <span class='text-danger fw-bold'>Cookie
echo "NIM: <span class='text-danger fw-bold'>Cookie
}
?>
c. Tampilan
Gambar 2 cookie
Gambar 3 cookie
d. Penjelasan
Seperti penjelasan diatas Cookie dibuat dengan method setcookie, dan

ketika program dijalankan kita dapat melihat cookie pada devtools
application.

a. Soal
Perbedaan dari Tugas Praktikum 1.1 dan 1.2
b. Penjelasan
Cookie: Disimpan di web browser/di komputer, memerlukan sebuah method

untuk membuat cookie
Session: Disimpan di sisi server, dimulai dengan session_start
a. Soal
Buat table akun pada database akademik
b. Tampilan
c. Penjelasan
Id merupakan sebuah primary key bertipe data integer dan bersifat auto
increment, sedangkan username dan password merupakan field bertipe data
varchar dengan length 255.
a. Soal
Buat program PHP untuk menakisme login dan logout
b. Source Code
Login
<?php
// TODO session start
session_Start();

$username = "root";
$password = "";

if (!$conn) {
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal: "
. mysqli_connect_error() . "</div>";
}
// TODO Login
if (isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql_login = "SELECT * FROM accounts WHERE ùsername` =

'$username' AND `password` = '$password'";
$query_login = mysqli_query($conn, $sql_login);
if ($query_login->num_rows > 0) {
$user_login = mysqli_fetch_assoc($query_login);
// Add Data Login to SSESSION

$_SESSION['id'] = $user_login['id'];
$_SESSION['login'] = true;
header('Location: ./index.php');
} else {
// alert gagal login
echo "<script>
Toast.fire({
icon: 'error',
title: 'Email atau Password Salah'
})
</script>";
}
}
?>

Login Index.php

session_Start();

$username = "root";
$password = "";
if (!$conn) {
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal: " .
mysqli_connect_error() . "</div>";
}
// TODO Cek Jika Belum Login

if ($_SESSION['login'] != true) {
header("Location:login.php");
}
// TODO Ambil data user login

$id_user_login = $_SESSION['id'];
$sql_user_login = "SELECT * FROM accounts WHERE ìd` = $id_user_login";
$query_user_login = mysqli_query($conn, $sql_user_login);
$data_user_login = mysqli_fetch_assoc($query_user_login);
Logout
// TODO Logout
if (isset($_POST['logout'])) {
echo "<script>
Toast.fire({
icon: 'success',
title: 'Logout Sukses!'
})

</script>";
session_destroy();
}
c. Penjelasan
Login:
Mekanisme login sama seperti pada Latihan, hanya saja pesan yang
dikirimkan berupa alert dengan pesan sesuai eror yang terjadi.
Login index.php:
Mekanisme login sama seperti pada Latihan, hanya saja terdapat pesan
yang dikirimkan berupa alert dan pada halaman index juga akan menerima
semua data yang dimiliki user yang telah login.
Logout:
Mekanisme logout sama dengan pada Latihan, dan mengirimkan pesan

berupa alert ketika logout berhasil.

a. Soal
Isi beberapa data user pada database
b. Tampilan
c. Penjelasan
Untuk mengisi data pada database menggunakan perintah SQL bisa dengan
perintah INSERT INTO nama_table diikuti dengan attribute kemudian diikuti
dengan values nya. Atau bisa dengan cara instan yaitu input secara GUI
pada phpMyAdmin.

a. Soal
Perbaiki tampilan
b. Source Code
Login
<!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,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>21104410049 - Login</title>
<link rel="shortcut icon" href="./../assets/Viery_Nugroho.png"
type="image/x-icon">


<link href="./../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400
,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">


<link href="./../assets/css/sb-admin-2.css" rel="stylesheet">


<link href="
https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.min.css
" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="
https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.
js
"></script>
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
</head>
<body class="bg-gradient-bts">
<?php
session_Start();
// TODO Logout
if (isset($_POST['logout'])) {
echo "<script>
Toast.fire({
icon: 'success',
title: 'Logout Sukses!'
})
</script>";
session_destroy();
}

$username = "root";
$password = "";

if (!$conn) {
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal: "
. mysqli_connect_error() . "</div>";
}
// TODO Login
if (isset($_POST['login'])) {
$sql_login = "SELECT * FROM accounts WHERE ùsername` =

'$username' AND `password` = '$password'";
$query_login = mysqli_query($conn, $sql_login);
if ($query_login->num_rows > 0) {
$user_login = mysqli_fetch_assoc($query_login);
// Add Data Login to SSESSION

$_SESSION['id'] = $user_login['id'];
$_SESSION['login'] = true;
header('Location: ./index.php');
} else {
// alert gagal login
echo "<script>
Toast.fire({
icon: 'error',
title: 'Email atau Password Salah'
})
</script>";
}
}
?>
<div class="container">

<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">


<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-
login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-
4">Selamat Datang, Di Tugas Viery</h1>
</div>
<form class="user" method="post">
<div class="form-group">
<input type="text"
class="form-control form-control-user" id="username"
placeholder="Username"
name="username">
</div>
<div class="form-group">
<input type="password"
class="form-control form-control-user" id="password"
placeholder="Password"
name="password">
</div>
<button type="submit" name="login"
class="btn btn-bts btn-user
btn-block text-white fw-bold">login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<script src="./../assets/vendor/jquery/jquery.min.js"></script>
<script
src="./../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>


<script src="./../assets/vendor/jquery-
easing/jquery.easing.min.js"></script>


<script src="./../assets/js/sb-admin-2.min.js"></script>
</body>
</html>
Index.php
<?php
session_Start();

$username = "root";
$password = "";
if (!$conn) {
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal: " .
mysqli_connect_error() . "</div>";
}
// TODO Cek Jika Belum Login

if ($_SESSION['login'] != true) {
header("Location:login.php");
}
// TODO Ambil data user login

$id_user_login = $_SESSION['id'];
$sql_user_login = "SELECT * FROM accounts WHERE ìd` = $id_user_login";
$query_user_login = mysqli_query($conn, $sql_user_login);
$data_user_login = mysqli_fetch_assoc($query_user_login);
?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>21104410049 - Dashboard</title>
<link rel="shortcut icon" href="./../assets/Viery_Nugroho.png"

type="image/x-icon">


<link href="./../assets/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400
,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">


<link href="./../assets/css/sb-admin-2.css" rel="stylesheet">
</head>
<body id="page-top">


<div id="wrapper">


<ul class="navbar-nav bg-gradient-bts sidebar sidebar-dark
accordion" id="accordionSidebar">


<a class="sidebar-brand d-flex align-items-center justify-
content-center" href="index.php">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">Prak Webpro</div>

</a>


<hr class="sidebar-divider my-0">


<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>


<hr class="sidebar-divider d-none d-md-block">


<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0"
id="sidebarToggle"></button>
</div>


<div class="sidebar-card d-none d-lg-flex">
<img class="sidebar-card-illustration mb-2"
src="./../assets/img/undraw_rocket.svg" alt="...">
<p class="text-center mb-2"><strong>Viery Nugroho</strong>
<br> 21104410049 <br> Tugas Praktikum 5</p>
<a class="btn btn-dark btn-sm" target="_blank"
href="https://drive.google.com/drive/folders/15SFkQ4UuMvM1MKjm7fxsR8Vswo4F
F4gG?usp=sharing"> <i
class="fas fa-tasks"></i> Link
Tugas</a>
</div>
</ul>



<div id="content-wrapper" class="d-flex flex-column">


<div id="content">


<nav class="navbar navbar-expand navbar-light bg-white
topbar mb-4 static-top shadow">


<button id="sidebarToggleTop" class="btn btn-link d-
md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>


<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-

block"></div>


<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#"
id="userDropdown" role="button"
data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
<span class="mr-2 d-lg-inline text-gray-
600 small"> <i class="fas fa-user"></i>
<?= $data_user_login['username'] ?>
</span>
<img class="img-profile rounded-circle"
src="./../assets/img/undraw_profile.svg">
</a>

<div class="dropdown-menu dropdown-menu-right
shadow animated--grow-in"
aria-labelledby="userDropdown">

<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-
toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm

fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>



<div class="container-fluid">


<div class="d-sm-flex align-items-center justify-
content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"> <i class="fas
fa-home"></i> Dashboard</h1>
</div>


<div class="row">
<div class="col">
<div class="content">
<h1>Assalamualaikum, <span
class="text-danger fw-bold"><?=
$data_user_login['username'] ?></span></h1>
</div>
</div>
</div>
</div>
</div>

</div>

</div>


</div>



<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>


<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Anda
Akan Logout?</h5>
<button class="close" type="button" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Pilih "Logout" Maka Sesi Login
Akan Berakhir.</div>
<form method="post" action="login.php">
<div class="modal-footer">
<button class="btn btn-secondary" type="button"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" type="submit"
name="logout">Logout</button>
</div>
</form>
</div>
</div>
</div>


<script src="./../assets/vendor/jquery/jquery.min.js"></script>
<script
src="./../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>


<script src="./../assets/vendor/jquery-

easing/jquery.easing.min.js"></script>


<script src="./../assets/js/sb-admin-2.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="
https://cdn.jsdelivr.net/npm/sweetalert2@11.7.12/dist/sweetalert2.all.min.
js
"></script>
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: 'Signed in successfully'
})
</script>
</body>
</html>

c. Tampilan
Gambar 4 login
Gambar 5 index.php
Gambar 6 contoh alert pesan kesalahan

d. Penjelasan
Mekanisme login dan logout sama seperti penerapan pada Latihan-latihan

diatas, hanya saja tampilan website sudah diperbarui dan dimodifikasi
semaksimal mungkin demi kenyamanan user.

BAB III
IMPLEMENTASI PRAKTIKUM
3.1 Latihan Session 1
a. Soal
Memulai Session
b. Tampilan
Gambar 7 vardump session
c. Source Code
<?php
// TODO Memulai Session
session_start();
$_SESSION['username'] = "administrasi";
$_SESSION['password'] = "12345678";
?>
d. Penjelasan
Untuk menggunakan session PHP selalu awali dengan memanggil method

session_start() untuk menggunakan session, dan untuk membuat session
sama dengan membuat array pada umunya karena pada $_SESSION data
yang disimpan akan dimasukkan ke dalam $_SESSION.

a. Soal
Menampilkan Nilai Session
b. Tampilan
Gambar 8 menampilkan session
c. Source Code
<?php
session_start();
echo "Username : " . $_SESSION['username'];
echo "<br>";
echo "Password : " . $_SESSION['password'];
?>
d. Penjelasan
Untuk menampilkan session sama juga halnya seperti menampilkan sebuah

array, hanya saja untuk menampilkan session kita hanya bisa memanggil
nilainya seperti ketika memanggil array asosiatif.

a. Soal
Menghapus Session
b. Tampilan
Gambar 9 tampilan hapus session
c. Source Code
<?php
session_start();
session_unset();
session_destroy();
echo "Username : " . $_SESSION['username'];
echo "<br>";
echo "Password : " . $_SESSION['password'];
?>
d. Penjelasan
Untuk menghapus array bisa dengan 2 cara yaitu session_unset dan

session_destroy.

3.4 Latihan Cookie 1
a. Soal
Membuat Cookie
b. Tampilan
Gambar 10 cookie
c. Source Code
<?php
setcookie('username', 'administrator', time() + (60 * 60 * 24 * 5),
'/');
setcookie('nama', 'Viery Nugroho', time() + (60 * 60 * 24 * 15),
'/');
?>
d. Penjelasan
Untuk membuat cookie dapat menggunakan fungsi setcookie() yang pada

method tersebut terdapat parameter yang harus dimasukkan.

a. Soal
Membaca Cookie
b. Tampilan
Gambar 11 membaca cookie
c. Source Code
<?php
echo "Username : " . $_COOKIE['username'];
echo "<br>";
echo "Nama : " . $_COOKIE['nama'];
?>
d. Penjelasan
Sama seperti halnya session, untuk membaca cookie sama halnya seperti
membaca array asosiatif.

a. Soal
Membaca Cookie
b. Tampilan
Gambar 12 menghapus cookie unset
c. Source Code
<?php
// unset($_COOKIE['username']);
// unset($_COOKIE['nama']);
setcookie('username', '');
echo "Username : " . $_COOKIE['username'];

echo "<br>";
echo "Nama : " . $_COOKIE['nama'];
?>
d. Penjelasan
Untuk menghapus sebuah cookie bisa dengan meng set ulang value dan
exp date menjadi waktu sebelum sekarang atau bisa dengan menggunakan
method unset.

3.7 Latihan Login 1
a. Soal
Membuat Koneksi Database
b. Source Code
<?php
session_Start();

$username = "root";
$password = "";
$database = "db_coba";
if(mysqli_connect_errno()){
echo "<div class='alert alert-danger m-2 fw-bold'>Koneksi Gagal:
" . mysqli_connect_error() . "</div>";
}
c. Penjelasan
Koneksi Database dengan Mysqli dan memulai session.

3.8 Latihan Login 2
a. Soal
Membuat form Login
b. Tampilan
Gambar 13 form login
c. Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login Dengan PHP</title>
</head>
<body>
<h2>Login</h2>
<br>
<?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == 'gagal'){
echo "Login Gagal! Username / Password Salah!";
} else if($_GET['pesan'] == 'logout'){
echo "Anda telah berhasil logout!";
} else if($_GET['pesan'] == 'belum_login'){
echo "Anda harus login untuk mengakses halaman admin";
}
}
?>
<form action="cek_login.php" method="post">

<table>
<tr>
<td>Username</td>
<td>:</td>
<td>
<input type="text" name="username" id="username"
placeholder="masukkan username">
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input type="password" name="password"
id="password" placeholder="masukkan password">
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="LOGIN"></td>
</tr>
</table>
</form>
</body>
</html>
d. Penjelasan
Terdapat pengecekan pesan yang dikirim melalui URL dengan method get.
Dan juga form login sederhana yang dimana data akan dikirimkan ke
cek_login.php dengan method post.

3.9 Latihan Login 3
a. Soal
Membuat Cek Login
b. Source Code
<?php
session_start();
require_once './../database/database.php';
$data = mysqli_query($conn, "SELECT * FROM user WHERE ùsername` =

'$username' AND `password` = '$password'");
$cek = mysqli_num_rows($data);
if($cek > 0){

$_SESSION['username'] = $username;
$_SESSION['status'] = "login";
header('Location: ./admin/index.php');
} else{
header('Location: ./login.php');
}
?>
c. Penjelasan
Berisikan halaman validasi sederhana dimana pengecekan dilakukan

dengan pencocokan value dari input user dengan data yang ada pada
database.
Dan jika terdapat data yang sesuai akan dilanjutkan ke inisialisasi variable
session username yang diisi dengan variable username dan juga session
status yang diisi dengan login, kemudian akan diarahkan ke halaman admin,
dan jika gagal akan dikembalikan ke halaman login

3.10 Latihan Login 4
a. Soal
Membuat Halaman Admin
b. Tampilan
Gambar 14 halaman admin
c. Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login Dengan PHP</title>
</head>
<body>
<h2>Halaman Admin</h2>
<br>
<?php
session_start();
if($_SESSION['status'] != 'login'){
header("Location: ../login.php?pesan='belum_login'");
}
?>

<h4>Selamat Datang, <?= $_SESSION['username']?>! Anda Telah
Login</h4>
<br>
<br>
<a href="./logout.php">LOGOUT</a>
</body>
</html>
d. Penjelasan
Halaman admin berisikan halaman web sederhana untuk mengucapkan

selamat datang kepada admin. Dimana sebelum masuk ke halaman ini akan
terjadi pengecekan apakah terdapat session status bernilai login atau tidak,
dan jika tidak ada maka akan dikembalikan ke halaman login dan mengirim
pesan belum login.
3.11 Latihan Login 5
a. Soal
Membuat Halaman logout
b. Source Code
<?php
session_start();
session_destroy();
header("Location: ../login.php?pesan='logout'");
?>
c. Penjelasan
Halaman logout berisikan penghapusan session dimana hal ini akan

menghilangkan status login dan data username user yang telah login. Dan
jika selesai maka akan dikembalikan lagi ke halaman login dengan
mengirimkan pesan logout.

BAB IV
PENUTUP
4.1 Kesimpulan
Kesimpulan dari praktikum pertama mengenai Session, Cookie, Login pada PHP.
Bahwa pada PHP kita dapat menyimpan data padadengan aman dan data akan dapat
digunakan di berbagai halaman sehingga akan memudahkan kita sebagai developer untuk
mengelola sebuah data.
Dengan adanya PHP tentu saja akan mempemudah programmer untuk

membangun sebuah website yang dinamis.
4.2 Saran
Praktikum pemrograman web pertemuan mengenai Session, Cookie, dan Login

serta database sudah baik, dan mungkin juga bisa ditingkatkan seperti bobot tugas
dengan penerapan Latihan yang lebih kompleks. Dengan begitu kemampuan mahasiswa
dapat meningkat dan pastinya akan sangat membantu untuk proses belajar mahasiswa.

DAFTAR PUSTAKA
arista prasetyo, S. S. (n.d.). Cookie dan Session Pada PHP. dosenIT.com.
C., A. (2023). Cara Membuat Koneksi PHP ke Database MySQL. hostinger.co.id.
Esaputra, F. S. (2019). Berkenalan Dengan Pemrograman Web. Bandung: Dicoding.
Hendra, A. (2022). Apa itu PHP? Pengertian, Sejarah, Dan bagaimana Cara Kerjanya. Bandung: Teknik
Informatika Universitas Pasundan.
Juliarto, R. (2021). Apa Itu Web Server dan Fungsinya. Bandung: Dicoding.

Pertemuan 5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 5

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN RESMI

PRAKTIKUM PEMROGRAMAN WEB

JURUSAN TEKNIK INFORMATIKA

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Blitar, 18 Juli 2023

Dosen Pengampu Praktikum

Abdi Pandu Kusuma, S.Kom., M.T

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

1.1 Pemrograman Web

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Selain bahasa di atas, bisa dikatakan hamper semua bahasa pemrograman

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

1.5.1 Menambah Data

1.5.3 Meng-Update Data

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Sintaks SQL Dasar

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Untuk menambahkan data menggunakan perintah INSERT INTO diikuti

Untuk menghapus data pada table menggunakan perintah DELETE FROM

Untuk merubah data menggunakan perintah UPDATE diikuti dengan nama

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

// TODO koneksi database

$conn = mysqli_connect($servername, $username, $password, $database);

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Buat session pada PHP dan jalankan

const NIM = 21104410049;

$_SESSION['nama'] = 'Viery Nugroho';

if(count($_SESSION) > 0){

Gambar 1 session php

Session harus dimulai terlebih dahulu dengan session_start. Kemudian data

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Buat cookie pada PHP dan jalankan

if(count($_COOKIE) > 0){

Seperti penjelasan diatas Cookie dibuat dengan method setcookie, dan

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Perbedaan dari Tugas Praktikum 1.1 dan 1.2

Cookie: Disimpan di web browser/di komputer, memerlukan sebuah method

Session: Disimpan di sisi server, dimulai dengan session_start

2.5 Tugas Praktikum 2.1

Buat table akun pada database akademik

2.6 Tugas Praktikum 2.2

Buat program PHP untuk menakisme login dan logout

// TODO koneksi database

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

$conn = mysqli_connect($servername, $username, $password, $database);

$sql_login = "SELECT * FROM accounts WHERE `username` =

// Add Data Login to SSESSION

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

// TODO session start

// TODO koneksi database

$conn = mysqli_connect($servername, $username, $password, $database);

// TODO Cek Jika Belum Login

// TODO Ambil data user login

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Mekanisme logout sama dengan pada Latihan, dan mengirimkan pesan

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB

Isi beberapa data user pada database

LAPORAN KE-5 PRAKTIKUM PEMROGRAMAN WEB