LAPORAN TUGAS PRAKTIKUM

PENGEMBANGAN APLIKASI WEB

TP MODUL 8

Disusun Oleh:
Nama: Naufal Rabbani Sab’ul Fitri
NIM: 230411100100
Kelas: PAW 3E
Dosen Pengampu:
Nama: Devie Rosa Anamisa
NIP: 19841104 200812 2 003
Asisten Praktikum:
Nama: Glendy Hernandez Putra Mahardika G.
NIM: 220411100076

PRODI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
2024
1. Code Program
<?php
session_start();

?>
<?php ob_start(); ?>

<?php

require_once "partials/config.php";

if (isset($_POST['submit'])) {
$username = $_POST['username'];
$password = $_POST['password'];

$result = mysqli_query($conn, "SELECT * FROM user WHERE username =

'$username'");
$users = mysqli_fetch_assoc($result);

if ($users > 0) {
if ($users['password'] == md5($password)) {
$_SESSION['username'] = $username;
$_SESSION['user'] = $users;
if ($users['level'] == '2') {
$_SESSION['admin'] = $users;
$_SESSION['level'] = 'admin';
echo "
<script>
alert('login berhasil sebagai admin');
window.location.href = 'Admin/Index.php';</script>";
} else {
$_SESSION['level'] = 'user';
echo "
<script>
alert('login berhasil sebagai user');
window.location.href = 'Index.php';
</script>";
}
}

}else {
echo "<script> alert('username atau password salah')
</script>";
}

?>

<div class="d-flex justify-content-center align-items-center vh-100 bg-

light">
<div class="card shadow-lg p-4" style="max-width: 400px; width:
100%;">
 <h2 class="text-center mb-4">Login to Your Account</h2>

<form action="" method="POST">

<div class="mb-3">
<label for="username" class="form-
label">Username</label>
<input type="text" name="username" id="username"
class="form-control" placeholder="Enter your username"
required>
</div>

<div class="mb-3">
<label for="password" class="form-
label">Password</label>
<input type="password" name="password" id="password"
class="form-control"
placeholder="Enter your password" required>
</div>

<button type="submit" name="submit" class="btn btn-primary

w-100">Sign In</button>
</form>

</div>
</div>

<?php
$content = ob_get_clean();
include 'partials/Master.php';
?>

Penjelasan Code Program:

Pertama saya menggunakan session_start() untuk memulai session. Kemudian
inputan dari login disimpan ke variabel $_POST kemudian mengambil data dari
tabel user dimana data username dari tabel user sama dengan variabel $username,
setelah itu dijadikan array $users. Kemudian apabila $users ada isinya maka
dilakukan verifikasi password dengan format enkripsi md5. Setelah diverifikasi,
maka $users disimpan sebagai variabel $_SESSION untuk user dan $username
sebagai $_SESSION untuk username. Kemudian dilakukan verifikasi level, jika
level user dalam tabel adalah 2 maka user tersebut dikategorikan sebagai admin,
kemudian terdapat variabel $_SESSION untuk menyimpan user sebagai admin
dan level untuk admin. Kemudian terdapat header yang mengarah ke halaman
dashboard untuk admin. Selain itu, jika level bukan sama dengan 2 maka
dikategorikan sebagai user biasa, jadi level variabel $_SESSION-nya adalah user,
kemudian headernya diarahkan ke halaman home untuk user. Setelah itu, session
login tersebut disimpan dalam $content yang kemudian ditampilkan dalam
halaman master.php
 Hasil Running Program:

2. Code Program
Admin/Indeks.php
<?php
session_start();
ob_start();
?>

<?php

if (!isset($_SESSION['admin'])) {
echo "<script>
window.location.href = '../Login.php';
</script>";
}

?>

<section class="bg-dark text-white text-center d-flex justify-content-

center align-items-center"
style="background-image:
url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg');
background-size: cover; background-position: center; height: 100vh;">
<div class="container py-5">
<h1 class="display-4 fw-bold mb-4">
Welcome, <?= htmlspecialchars($_SESSION['admin']['nama']);
?>
</h1>
<p class="lead mb-4">
Here we focus on markets where technology, innovation, and
capital can unlock long-term value and drive
economic growth.
 </p>
</div>
</section>

<?php
$content = ob_get_clean();
include 'MasterAdmin.php';
?>

Admin/Nav.php
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">

<a class="navbar-brand" href="Index.php">Dashboard Admin</a>

<button class="navbar-toggler" type="button" data-bs-

toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ms-auto">

<li class="nav-item">
<a class="nav-link" href="Index.php">Home</a>
</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-
expanded="false">
Data Master
</a>
<ul class="dropdown-menu" aria-
labelledby="navbarDropdown">
<li><a class="dropdown-item"
href="#">Users</a></li>
<li><a class="dropdown-item"
href="#">Products</a></li>
<li><a class="dropdown-item"
href="#">Categories</a></li>
</ul>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Transaksi</a>
</li>

<li class="nav-item">
 <a class="nav-link" href="#">Laporan</a>
</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#"
id="userDropdown" role="button"
data-bs-toggle="dropdown" aria-
expanded="false">
<img src="../partials/assets/2.png" alt="user
photo" class="rounded-circle" width="30"
height="30">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-
labelledby="userDropdown">
<li><a class="dropdown-item" href="#"> <?=
htmlspecialchars($_SESSION['admin']['username']); ?>
</a></li>
<li><a class="dropdown-item"
href="../Logout.php">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Admin/MasterAdmin.php
<?php require_once '../partials/Config.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Master Admin</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.m
in.css" rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper
.min.js"
integrity="sha384-
I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min
.js"
integrity="sha384-
0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous">
 </script>
</head>

<body>
<?php include __DIR__ . '/Nav.php' ?>

<div class="container mx-auto my-6 px-8 ">

<?php
if (isset($content)) {
echo $content;
} else {
echo "<p>Konten tidak tersedia.</p>";
}
?>
</div>

</body>

</html>

Index.php
<?php
session_start();
ob_start();
?>

<?php

if (!isset($_SESSION['user'])) {
echo "<script>
window.location.href = 'Login.php';
</script>";
}

?>

<section class="bg-dark text-white text-center d-flex justify-content-

center align-items-center"
style="background-image:
url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg');
background-size: cover; background-position: center; height: 100vh;">
<div class="container py-5">
<h1 class="display-4 fw-bold mb-4">
Welcome, <?= htmlspecialchars($_SESSION['user']['nama']);
?>
</h1>
<p class="lead mb-4">
Here we focus on markets where technology, innovation, and
capital can unlock long-term value and drive
economic growth.
</p>
</div>
</section>
 <?php
$content = ob_get_clean();
include 'partials/Master.php';
?>

Partials/nav.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow">
<div class="container">

<a class="navbar-brand" href="Index.php">StoreKu</a>

<button class="navbar-toggler" type="button" data-bs-

toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarContent">

<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active"
href="Index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transaksi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Laporan</a>
</li>
</ul>

<div class="dropdown">
<button type="button" class="btn btn-secondary rounded-
circle p-0" id="user-menu-button"
data-bs-toggle="dropdown" aria-expanded="false">
<img class="rounded-circle"
src="partials/assets/2.png" alt="user photo" width="40" height="40">
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-
labelledby="user-menu-button">
<li>
<div class="dropdown-header text-muted">
<?=
htmlspecialchars($_SESSION['user']['username']); ?>
</div>
</li>
<li>
<a class="dropdown-item" href="Login.php">Sign
In</a>
</li>
 <li>
<a class="dropdown-item" href="Logout.php">Sign
Out</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

Partials/Master.php
<?php require_once 'Config.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Web StoreKu</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.m
in.css" rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper
.min.js"
integrity="sha384-
I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min
.js"
integrity="sha384-
0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous">
</script>
</head>

<body>
<?php include __DIR__ . '/nav.php' ?>

<div class="container mx-auto my-6 ">

<?php
if (isset($content)) {
echo $content;
} else {
echo "<p>Konten tidak tersedia.</p>";
}
?>
</div>
 <script
src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js">
</script>

</body>

</html>

Penjelasan Code Program:

Untuk halaman indeks admin, terdapat verifikasi apabila variabel $_SESSION
bukan admin, maka akan diarahkan ke halaman login. Jika iya, maka akan
menampilkan konten yang ada di indeks admin. Kemudian untuk navbar admin
terdapat ikon dashboard admin, kemudian untuk menunya terdapat menu home,
dropdown data master, transaksi, laporan, dan ikon yang apabila diklik akan
memunculkan nama dari user yang digunakan untuk login dan tombol sign out.
Untuk indeks admin dan navbar admin ditampilkan dalam bentuk content session
pada halaman MasterAdmin.php.

Untuk halaman indeks user, terdapat verifikasi apabila $_SESSION bukan user
maka akan diarahkan ke login sama seperti di indeks admin. Jika iya, maka
menampilkan konten yang ada di indeks user. Untuk navbar user terdapat ikon
StoreKu dan menu dalam navbar user, yaitu home, transaksi, laporan, dan ikon
username serta sign out. Sama seperti admin, konten dalam indeks dan navbar
user ditampilkan dalam Master.php dalam bentuk content session

Hasil Running Program:

Master admin
Master user