FR.IA.02.

TUGAS PRAKTIK DEMONSTRASI

Skema Sertifikasi Judul : Junior Web Programmer

(KKNI/Okupasi/Klaster) Nomor : RT-025/1/LSP-UG/X/2020
TUK : Sewaktu/Tempat Kerja/Mandiri*
Nama Asesor : EGA HEGARINI
Nama Asesi : DIRA NURUL NEISKA SINULINGGA
Tanggal : 22 JUNI 2023
*Coret yang tidakperlu

Unit Kompetensi Kode Unit - : J.620100.004.02 - Menggunakan Struktur Data

Judul Unit J.620100.005.02 - Mengimplementasikan User Interface
J.620100.011.01 - Melakukan Instalasi Software Tools Pemrograman
J.620100.016.01 - Menulis Kode Dengan Prinsip Sesuai Guidelines Dan Best
Practices
J.620100.017.02 - Mengimplementasikan Pemrograman Terstruktur
J.620100.019.02 - Menggunakan Library Atau Komponen Pre-Existing
J.620100.023.02 - Membuat Dokumen Kode Program
J.620100.025.02 - Melakukan Debugging

A. Petunjuk

1. Baca dan pelajari setiap instruksi kerja di bawah ini dengan cermat sebelum melaksanakan praktek
2. Klarifikasi kepada Asesor apabila ada hal-hal yang belum jelas
3. Laksanakan pekerjaan sesuai dengan urutan proses yang sudah ditetapkan
4. Seluruh proses kerja mengacu kepada SOP/WI yang dipersyaratkan
5. Waktu pelaksanaan adalah 12 jam

B. Skenario

Universitas Jewepe baru mendirikan Lembaga Kursus, bermaksud membuat sebuah sistem pendaftaran
kursus bahasa pemrograman. Sistem yang akan dibuat adalah sistem yang dapat digunakan oleh pihak lembaga
(admin) dan pihak mahasiswa (peserta).
Pihak lembaga kursus memiliki fungsi untuk dapat melakukan manipulasi data kursus apa saja yang ada (nama
kursus, keterangan kursus, dan lama kursus). Phak lembaga juga dapat melakukan manipulasi data mahasiswa
(NPM, kelas, dan nama). Pihak lembaga juga memiliki fungsi untuk melakukan manipulasi jadwal kursus (nama
kursus, dan waktu kursus). Pihak lembaga dapat melakukan manipulasi dan verifikasi terhadap pendaftaran peserta,
dan memiliki fungsi untuk melihat laporan peserta kursus.
Peserta pelatihan dapat melihat informasi kursus yang ada melalui website lembaga dan memiliki fungsi untuk
melakukan pendaftaran (memilih jenis kursus yang diambil dan mengirim bukti KRS aktif). Setelah pendaftaran
diverifikasi admin, peserta mendapat tanda bukti pendaftaran kursus. Diasumsikan mahasiswa sudah memiliki akun
login dengan menggunakan username (NPM) dan password (NPM).

1
 Pertimbangkan kebutuhan akan field untuk data kursus dan data pendaftaran kursus peserta. Tentukan
primary key dari setiap tabel sebagai penghubung, panjang field dan tipe field, Masukkan minimal 3 data untuk setiap
tabel master yang digunakan.
Pertimbangkan bagaimana bentuk struktur navigasi, rancangan halaman, konsep struktur data, kebutuhan
tools dan software, kebutuhan library atau komponen pre-existing, pembuatan aplikasi yang sesuai dengan kaidah.

2
C. Langkah kerja

1. Gambarkan rancangan aplikasi yang akan dibuat dalam bentuk struktur navigasi.
J.620100.005.005.01

- Admin

BERANDA

KOMENTAR ARTIKEL AKUN

CRUD
CRUD ARTIKEL ADMIN
KOMENTAR

- User

BERANDA

KOMENTAR ARTIKEL

TAMBAH
KOMENTAR

3
2. Berdasarkan hasil perancangan, tentukan kebutuhan tools atau software yang akan digunakan untuk membuat
aplikasi website ini.
J.620100.011.01 / J.620100.023.02

Kebutuhan tools atau software yang akan digunakan untuk membuat aplikasi adalah sebagai
berikut :
1. WEB BROWSER : Google Chrome
2. TEXT EDITOR : Visual Studio Code
3. BAHASA PEMROGRAMAN : - HTML, CSS, PHP
4. FRAMEWORK : Bootstrap
5. DATABASE : XAMPP

4
3. Berdasarkan rancangan struktur navigasi yang sudah dibuat, lakukan perancangan halaman dengan menggunakan
objek yang tepat dan sesuai dengan kondisi field/variabel yang akan digunakan (radio button, combo box, text box,
checkbox dan sebagainya).
Buat mock-up dari rancangan halaman yang telah dibuat dengan menggunakan tools atau software yang telah
dipilih.
J.620100.005.01

Gambar 1. LOGIN ADMIN

5
Gambar 2. INDEX ADMIN

Gambar 3. CRUD ARTIKEL

6
Gambar 4. CRUD KOMENTAR

Gambar 5. BERANDA USER

7
Gambar 6. INDEX USER

8
Gambar 7. KOMENTAR USER

9
4. Buatkan rancangan database yang dibutuhkan untuk membangun sistem tersebut. Setiap tabel jelaskan akan
kebutuhan informasi nama field, type field, length field dan keterangannya.
Implementasikan database untuk seluruh tabel yang dibutuhkan sesuai rancangan dengan menggunakan tools atau
software yang telah dipilih.
J.620100.004.01 / J.620100.017.02

10
11
- Class diagram

12
 5. Tampilkan tulisan “Mading Sekolah Tinggi JeWePe” pada halaman pembuka (first landing page) semenarik mungkin
sebagai judul dari website dengan menggunakan script bahasa pemrograman web. Ikuti aturan penulisan script
yang baik dan benar.
J.620100.011.01 / J.620100.016.01 / J620100.017.02

<?php
require 'koneksi/config.php';
session_start();

$artikel = mysqli_query($conn, 'SELECT * FROM artikel ORDER BY id_artikel DESC LIMIT

0, 2');
?>
<!doctype html>
<html lang="en" >

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JWP E-MADING</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg" data-bs-theme="dark" style="background-
color:#0F044C">
<div class="container">
<a class="navbar-brand" href="index.php"><strong>Mading Sekolah Tinggi
JeWePe</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<span class="navbar-text">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mading.php">Artikel</a>

13
 </li>
</ul>
</span>
</div>
</div>
</nav>

<!-- Hero Section -->

<section class="hero text-dark text-center py-3">
<div class="container ">
<h1 class="display-4">Selamat Datang di JWP E-Mading!</h1>
</div>
</section>

<section class="bg-light py-5">

<div class="container d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-6 g-6">
<?php foreach ($artikel as $row) : ?>
<div class="col-12 col-md-6 col-lg-6">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title"><?= $row['judul'] ?></h5>
<p class="card-text"><?= substr($row['isi'], 0, 100)
?></p>
<a href="detail_artikel.php?id_artikel=<?=
$row["id_artikel"] ?>" class="btn btn-dark">Detail Artikel</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="text-center">
<a href="mading.php" class="btn btn-dark btn-lg">Lihat Artikel Lain</a>
</div>
</section>

<!-- Footer -->

<?php include 'footer.php'?>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

</html>

14
Output :

6. Buatkan program halaman Login admin dengan ketentuan, apabila username dan password tidak sesuai dengan
database, maka akan ada informasi kesalahan dan apabila benar akan masuk ke halaman dashboard admin.
Buatkan script-nya, selalu gunakan penulisan script yang sesuai dengan ketentuan dan selalu gunakan remark.
J.620100.005.01 / J.620100.011.01 / J.620100.016.01 / J.620100.017.01 / J.620100.019.02 / J.620100.023.02
<?php

include 'koneksi/config.php';

error_reporting(0);

session_start();

if (isset($_SESSION['username'])) {
header("Location: admin/index.php");
}

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

$sql = "SELECT * FROM users WHERE email='$email' AND password='$password'";

15
 $result = mysqli_query($conn, $sql);
if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
$_SESSION['username'] = $row['username'];
header("Location: admin/index.php");
} else {
echo "<script>alert('Email atau password Anda salah. Silahkan coba
lagi!')</script>";
}
}

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="style.css">

<title>JWP E-MADING</title>
</head>
<body>
<div class="alert alert-warning" role="alert">
<?php echo $_SESSION['error']?>
</div>

<div class="container">
<form action="" method="POST" class="login-email">
<p class="login-text" style="font-size: 1rem; font-weight: 800;">Admin,
silahkan login!</p>

<hr>
<br><br>
<div class="input-group">
<input type="email" placeholder="Masukkan Email" name="email"
value="<?php echo $email; ?>" required>
</div>
<div class="input-group">
<input type="password" placeholder="Masukkan Kata Sandi"
name="password" value="<?php echo $_POST['password']; ?>" required>
</div>
<div class="input-group">
<button name="submit" class="btn btn-dark">MASUK</button>

16
 </div>

</form>
</div>
</body>
</html>

Output :

17
 7. Buatkan program untuk halaman-halaman aplikasi sesuai dengan rancangan. Program untuk halaman admin (input
artikel dan hapus artikel).
Buatkan program halaman pembaca dan beri komentar.
Buatkan script-nya, selalu gunakan penulisan script yang sesuai dengan ketentuan dan selalu gunakan remark.
J.620100.004.01 / J.620100.011.01 / J.620100.016.01 / J.620100.017.01 / J.620100.019.02 / J.620100.0123.02

- Tambah artikel admin

<?php
require '../koneksi/config.php';
require '../function/function.php';

session_start();
if (!isset($_SESSION['username'])) {
header("Location:login.php");
exit;
}

if (isset($_POST['tambah'])) {
if (tambah_artikel($_POST) > 0) {
echo "<script>alert('Data Berhasil Ditambah!')</script>";
} else {
echo "<script>alert('Data Gagal Ditambah!')</script>";
}
}

?>

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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin STJ</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg" data-bs-theme="dark" style="background-
color:#0F044C">
<div class="container">
<a class="navbar-brand" href="index.php"><strong>Admin STJ</strong></a>

18
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<span class="navbar-text">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mading.php">Artikel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="laporan.php">Laporan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../index.php">Kunjungi
Situs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../logout.php">Logout</a>
</li>
</ul>
</span>
</div>
</div>
</nav>

<div class="container">

<div class="container mt-3 mb-3 text-center">

<h1><strong>Tambah Daftar Artikel</strong></h1>
</div>

<div class="container">
<form action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">JUDUL</label>
<input type="text" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="" name="judul"><br>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Isi Artikel</label>
<textarea type="text" class="form-control"
id="exampleInputPassword1" placeholder="" name="isi"></textarea><br>

19
 </div>
<button type="submit" class="btn btn-dark"
name="tambah">Tambah</button>
</form>
</div>
</div>

<!-- Footer -->

<?php include '../footer.php'?>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

</html>

Output :

- Hapus artikel admin

<?php
require '../koneksi/config.php';

session_start();
if (!isset($_SESSION['username'])) {

20
 header("Location:login.php");
exit;
}

$artikel = mysqli_query($conn, 'SELECT * FROM artikel ORDER BY id_artikel ASC');

?>

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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin STJ</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg" data-bs-theme="dark" style="background-
color:#0F044C">
<div class="container">
<a class="navbar-brand" href="index.php"><strong>Admin STJ</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<span class="navbar-text">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mading.php">Artikel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="laporan.php">Laporan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../index.php">Kunjungi
Situs</a>
</li>

21
 <li class="nav-item">
<a class="nav-link" href="../logout.php">Logout</a>
</li>
</ul>
</span>
</div>
</div>
</nav>

<div class="container">
<div class="container mt-3 mb-3 text-center">
<h1><strong>Daftar Artikel</strong></h1>
<br>
<br>
</div>

<a href="tambah_artikel.php"><button class="btn btn-dark">Tambah

Artikel</button></a>
<hr>
<hr>
<br>
<br>

<table class="table table-hover">

<div class="container-fluid body">
<thead>
<tr>
<th>Judul Artikel</th>
<th>Isi Artikel</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($artikel as $row) : ?>
<tr>
<td><?= $row['judul'] ?></td>
<td><?= substr($row['isi'], 0, 100) ?>..</td>
<td>
<a href="detail_artikel.php?id_artikel=<?=
$row["id_artikel"] ?>" class="btn btn-dark">Detail Artikel</a>
<br>
<br>
<a href="lihat_komentar.php?id_artikel=<?=
$row["id_artikel"] ?>" class="btn btn-dark">Lihat Komentar</a>
<br>
<br>

22
 <a href="../function/remove.php?id_artikel=<?=
$row["id_artikel"] ?>" class="btn btn-outline-primary" onclick="return confirm('Yakin
Ingin Menghapus Data ?')">Hapus Artikel</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</div>
</table>
</div>
<br>
<br>
<br>
<br>
<!-- Footer -->
<?php include '../footer.php'?>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

</html>

Output :

23
 - Halaman pembaca artikel user

<?php
require 'koneksi/config.php';

$artikel = mysqli_query($conn, 'SELECT * FROM artikel ORDER BY id_artikel ASC');

?>

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

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JWP E-MADING</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg" data-bs-theme="dark" style="background-
color:#0F044C">
<div class="container">
<a class="navbar-brand" href="index.php"><strong>Mading Sekolah Tinggi
JeWePe</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<span class="navbar-text">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mading.php">Artikel</a>
</li>
</ul>
</span>
</div>
</div>

24
 </nav>

<div class="container text-center">

<div class="container mt-3 mb-3 text-center">
<h1><strong>Daftar Artikel</strong></h1>
<br>
<br>
</div>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search"
placeholder="Cari Artikel Disini..." aria-label="Search">
<button class="btn btn-dark" type="submit">CARI</button>

</form>
<br>
<br>
<table class="table table-hover">
<div class="thead-dark">
<thead>
<tr>
<th scope="col">Judul Artikel</th>
<th scope="col">Isi Artikel</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($artikel as $row) : ?>
<tr>
<td><?= $row['judul'] ?></td>
<td><?= substr($row['isi'], 0, 100) ?>..</td>
<td>
<a href="detail_artikel.php?id_artikel=<?=
$row["id_artikel"] ?>" class="btn btn-outline-dark">Detail Artikel</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</div>
</table>
</div>
<br>
<br>
<br>
<!-- Footer -->
<?php include 'footer.php'?>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"

25
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

</html>

Output :

- Halaman tambah komentar user

<?php
require 'koneksi/config.php';

if (isset($_GET['id_artikel'])) {
$artikel = $_GET['id_artikel'];
} else {
echo "<script>alert('Data Tidak Ada')</script>";
}

$query = mysqli_query($conn, "SELECT * FROM artikel WHERE id_artikel='$artikel'");

$result = mysqli_fetch_array($query);
?>

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

26
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JWP E-MADING</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg" data-bs-theme="dark" style="background-
color:#0F044C">
<div class="container">
<a class="navbar-brand" href="index.php"><strong>Mading Sekolah Tinggi
JeWePe</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<span class="navbar-text">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mading.php">Artikel</a>
</li>
</ul>
</span>
</div>
</div>
</nav>

<div class="container">
<div class="container mt-3 mb-3 text-center">
<h1><strong><?= $result['judul'] ?></strong></h1>
</div>

<p style="text-align:justify"><?= $result['isi'] ?></p>

<!-- Menampilkan daftar komentar -->

<div class="container mt-4">
<div class="container text-center mt-3 mb-3">

27
 <h3>Daftar Komentar</h3>
</div>
<?php
$sql_komentar = "SELECT * FROM komentar WHERE id_artikel = '$artikel'";
$result_komentar = $conn->query($sql_komentar);
?>

<?php if ($result_komentar && $result_komentar->num_rows > 0) : ?>

<?php while ($row_komentar = $result_komentar->fetch_assoc()) : ?>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title"><strong><?= $row_komentar['nama'];
?></strong></h5>
<hr>
<h6 class="card-subtitle mb-2 text-muted"><?=
$row_komentar['email']; ?></h6>
<p class="card-text"><?= $row_komentar['isi']; ?></p>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p>Belum ada komentar.</p>
<?php endif; ?>
</div><br>
<!-- Akhir menampilkan daftar komentar -->

<div class="container" style="margin-bottom: 10%">

<div class="container text-center mt-3 mb-3">
<h3>Masukkan Komentar Anda</h3>
</div>
<form action="simpan_komentar.php" method="post">
<input type="hidden" class="form-control" name="id_artikel"
value="<?= $result['id_artikel'] ?>">
<div class="mb-3">
<label for="name" class="form-label">Nama</label>
<input type="text" class="form-control" id="name"
placeholder="Masukkan nama Anda" name="nama">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email"
placeholder="Masukkan email Anda" name="email">
</div>
<div class="mb-3">
<label for="comment" class="form-label">Komentar</label>
<textarea class="form-control" id="comment" rows="5"
placeholder="Tuliskan komentar Anda" name="isi"></textarea>
</div>

28
 <button type="submit" class="btn btn-dark">Kirim</button>
</form>
</div>
</div>

<!-- Footer -->

<?php include 'footer.php'?>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>

</html>

Output :

29
8. Jalankan aplikasi web melalui local host . gunakan 3 data sampel untuk data artikel.
J.620100.005.01 / J.620100.022.02 / J.620100.025.02

- User

30
31
32
- Admin

33
34
35
36
37
38
 9. Untuk admin, saat melakukan input artikel, lakukan penambahan fungsi untuk izin menampilkan (buka) atau tidak
menampilkan (tutup) komentar pada artikel yang diinput admin.
J.620100.005.01 / J.620.100.02 / J.620100.025.02

- Sembunyikan komentar

<?php
// Ambil data komentar dari database atau sumber lainnya
$comments = get_comments(); // Misalnya, fungsi get_comments() mengambil data
komentar dari database

// Loop melalui setiap komentar

foreach ($comments as $comment) {
// Cek kondisi untuk menyembunyikan komentar
if ($comment['status'] == 'hidden') {
continue; // Jika status komentar adalah 'hidden', lewati komentar ini
}

// Tampilkan komentar ke layar

echo '<div class="comment">';
echo '<p>' . $comment['content'] . '</p>';

39
 echo '</div>';
}
?>

Output :

40