Tugas Membuat, Menelusuri dan memperbaiki BUG (Implementasi QA : "Quality Assurance")
Tugas Kelas X PPLG1 dan X PPLG2 SMKN 2 Bandung.
Catatan :
- Tugas dikerjakan secara kelompok (5 orang/kelompok), silahkan dibentuk kelompoknya dipimpin oleh KM. Cantumkan nama anggota kelompoknya di komentar, dengan format :
[Kelas...][Kelompok...][Nama² Anggota]
- Silahkan cari bug pada coding, kemudian perbaiki agar aplikasi berjalan lancar
- Dikerjakan 2xpertemuan. Setelah selesai, akan dipresentasikan pada pertemuan-pertemuan selanjutnya.
>> Silahkan membuat sebuah aplikasi berita-website dengan ketentuan sebagai berikut :
1. Struktur Folder :
2. index.php
<?php
$pageTitle = "Home";
include 'includes/header.php';
?>
<!-- Berita Utama -->
<section class="berita-utama">
<div class="berita-card">
<img src="img/berita1.jpg" alt="Bandung Bangun Kawasan Wisata Baru">
<div class="berita-info">
<h3>Bandung Bangun Kawasan Wisata Edukasi Baru di Area Dago</h3>
<p class="tanggal">27 Januari 2026</p>
<p>Pemerintah Kota Bandung resmi meresmikan kawasan wisata edukasi yang dilengkapi dengan taman ilmu dan pusat budaya lokal...</p>
<button class="btn-baca" onclick="tampilSelengkapnya('berita1')">Baca Selengkapnya</button>
</div>
</div>
</section>
<!-- Berita Lainnya -->
<section class="berita-lainnya">
<h3>Berita Lainnya</h3>
<div class="berita-grid">
<div class="berita-card kecil">
<img src="img/berita2.jpg" alt="Festival Kuliner Bandung">
<div class="berita-info">
<h4>Festival Kuliner Bandung 2026 Siap Digelar</h4>
<p class="tanggal">26 Januari 2026</p>
<buttonclass="btn-baca" onclick="tampilSelengkapnya('berita2')">Baca</button>
</div>
</div>
<div class="berita-card kecil">
<img src="img/berita3.jpg" alt="Perbaikan Jalan">
<div class="berita-info">
<h4>Jalan Sudirman Akan Diberi Jalur Khusus Sepeda</h4>
<p class="tanggal">25 Januari 2026</p>
<buttonclass="btn-baca" onclick="tampilSelengkapnya('berita3')">Baca</button>
</div>
</div>
</div>
</section>
<!-- Modal Selengkapnya -->
<div class="modal" id="modalBerita">
<div class="modal-content">
<span class="close-modal">×</span>
<h3 id="modalJudul"></h3>
<p class="tanggal" id="modalTanggal"></p>
<img id="modalGambar" alt="Gambar Berita" style="width:100%;margin:10px 0;">
<p id="modalIsi"></p>
</div>
</div>
<?php include 'includes/footer.php'; ?>
2. Profil.php
<?php
$pageTitle = "Profil";
include 'includes/header.php';
?>
<section class="profil-section">
<div class="profil-card">
<img src="img/profil.jpg" alt="Profil Redaksi">
<div class="profil-info">
<h3>Tentang BeritaKita</h3>
<p>BeritaKita berdiri sejak 2026 dengan tujuan menyampaikan informasi akurat dan relevan tentang perkembangan Kota Bandung. Kami fokus pada berita lokal yang berdampak pada kehidupan masyarakat.</p>
<h4>Visi</h4>
<p>Menjadi sumber berita lokal terpercaya dan terdepan di Jawa Barat.</p>
<h4>Misi</h4>
<ul>
<li>Menyampaikan berita dengan objektif dan transparan</li>
<li>Mendorong partisipasi masyarakat dalam pembangunan kota</li>
<li>Mengangkat isu-isu penting bagi warga Bandung</li>
</ul>
</div>
</div>
</section>
<?php include 'includes/footer.php'; ?>
3. informasi.php
<?php
$pageTitle = "Informasi";
include 'includes/header.php';
?>
<section class="informasi-section">
<h3>Informasi Penting</h3>
<div class="informasi-grid">
<div class="informasi-card">
<i class="fas fa-clock"></i>
<h4>Waktu Publikasi</h4>
<p>Berita diperbarui setiap hari Senin hingga Sabtu pukul 08.00 dan 18.00 WIB.</p>
</div>
<div class="informasi-card">
<i class="fas fa-envelope"></i>
<h4>Kontak Redaksi</h4>
<p>Email: redaksi@beritakita.id<br>Alamat: Jl. Merdeka No. 100, Bandung</p>
</div>
<div class="informasi-card">
<i class="fas fa-file-alt"></i>
<h4>Kirim Berita</h4>
<p>Anda bisa mengirimkan laporan atau berita melalui form yang tersedia di email redaksi.</p>
</div>
<div class="informasi-card">
<i class="fas fa-shield-alt"></i>
<h4>Kebijakan Privasi</h4>
<p>Kami menjaga kerahasiaan data pengguna dan tidak menyebarkan informasi tanpa izin.</p>
</div>
</div>
</section>
<?php include 'includes/footer.php'; ?>
4. style.css
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Navbar */
.navbar {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 50px;
margin-right: 10px;
}
.menu {
display: flex;
list-style: none;
}
.menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
transition: background 0.3s;
}
.menu li a.active, .menu li a:hover {
background-color: #3498db;
border-radius: 4px;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/bandung.jpg');
background-size: cover;
background-position: center;
color: white;
padding: 4rem 0;
text-align: center;
}
.hero-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
/* Content */
.content {
padding: 2rem 0;
}
/* Berita Cards */
.berita-utama, .profil-section, .informasi-section {
margin-bottom: 3rem;
}
.berita-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
overflow: hidden;
margin-bottom: 2rem;
}
.berita-card img {
width: 100%;
height: 300px;
object-fit: cover;
}
.berita-info {
padding: 1.5rem;
}
.berita-info h3, .berita-info h4 {
margin-bottom: 0.5rem;
color: #2c3e50;
}
.tanggal {
color: #7f8c8d;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.btn-baca {
background-color: #3498db;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.btn-baca:hover {
background-color: #2980b9;
}
.berita-lainnya h3 {
margin-bottom: 1rem;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.berita-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.berita-card.kecil img {
height: 150px;
}
/* Profil */
.profil-card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
align-items: center;
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.profil-card img {
width: 100%;
border-radius: 8px;
}
/* Informasi */
.informasi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.informasi-card {
background-color: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
}
.informasi-card i {
font-size: 2rem;
color: #3498db;
margin-bottom: 1rem;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 200;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 2rem;
width: 90%;
max-width: 800px;
border-radius: 8px;
position: relative;
}
.close-modal {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 1.5rem;
cursor: pointer;
color: #7f8c8d;
}
/* Footer */
.footer {
background-color: #2c3e50;
color: white;
padding: 2rem 0;
text-align: center;
}
.social-icons a {
color: white;
font-size: 1.5rem;
margin: 0 0.5rem;
text-decoration: none;
}
/* Responsif */
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #2c3e50;
padding: 1rem 0;
}
.menu.active {
display: flex;
}
.menu-toggle {
display: block;
}
.profil-card {
grid-template-columns: 1fr;
}
}
5. script.js
// Toggle Menu Mobile
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('active');
});
// Data Berita untuk Modal
const dataBerita = {
berita1: {
judul: "Bandung Bangun Kawasan Wisata Edukasi Baru di Area Dago",
tanggal: "27 Januari 2026",
gambar: "img/berita1.jpg",
isi: "Pemerintah Kota Bandung resmi meresmikan kawasan wisata edukasi yang berlokasi di area Dago pada hari Selasa (27/1). Kawasan seluas 5 hektar ini dilengkapi dengan taman ilmu, pusat budaya lokal, dan area bermain edukatif untuk anak-anak. Menurut Walikota Bandung, tujuan pembangunan kawasan ini adalah untuk meningkatkan literasi masyarakat dan mempromosikan ...budaya lokal kepada generasi muda. Selain itu, kawasan ini juga dirancang ramah lingkungan dengan penggunaan energi terbarukan dan taman hijau yang luas. Wisatawan dapat mengunjunginya mulai bulan Maret 2026 dengan tiket masuk terjangkau, dan akan ada program paket edukasi untuk sekolah-sekolah di Kota Bandung."
},
berita2: {
judul: "Festival Kuliner Bandung 2026 Siap Digelar",
tanggal: "26 Januari 2026",
gambar: "img/berita2.jpg",
isi: "Festival Kuliner Bandung yang ke-15 akan digelar pada tanggal 10-19 Februari 2026 di Alun-Alun Bandung. Acara ini akan menghadirkan lebih dari 200 pedagang makanan khas Bandung dan Jawa Barat, mulai dari makanan jalanan hingga hidangan mewah dari restoran ternama. Selain menikmati kuliner, pengunjung juga dapat menyaksikan pertunjukan musik lokal dan kegiatan workshop memasak. Panitia menyatakan bahwa festival tahun ini akan fokus pada promosi produk makanan lokal yang menggunakan bahan baku dari petani sekitar Bandung."
},
berita3: {
judul: "Jalan Sudirman Akan Diberi Jalur Khusus Sepeda",
tanggal: "25 Januari 2026",
gambar: "img/berita3.jpg",
isi: "Dinas Perhubungan Kota Bandung mengumumkan rencana pembuatan jalur khusus sepeda di sepanjang Jalan Sudirman mulai bulan April 2026. Proyek ini merupakan bagian dari program kota untuk mengurangi kemacetan dan mendorong penggunaan transportasi ramah lingkungan. Jalur khusus yang memiliki lebar 2 meter akan menghubungkan kawasan Cihampelas hingga Simpang Lima Gumul. Selain itu, akan dibangun juga titik parkir sepeda dan stasiun penyewaan sepeda listrik di beberapa titik strategis. Pekerjaan konstruksi akan dilakukan secara bertahap untuk meminimalkan gangguan lalu lintas."
}
};
// Fungsi Tampilkan Modal Berita
const modalBerita = document.getElementById('modalBerita');
const modalJudul = document.getElementById('modalJudul');
const modalTanggal = document.getElementById('modalTanggal');
const modalGambar = document.getElementById('modalGambar');
const modalIsi = document.getElementById('modalIsi');
const closeModal = document.querySelector('.close-modal');
function tampilSelengkapnya(idBerita) {
const berita = dataBerita[idBerita];
modalJudul.textContent = berita.judul;
modalTanggal.textContent = berita.tanggal;
modalGambar.src = berita.gambar;
modalGambar.alt = berita.judul;
modalIsi.textContent = berita.isi;
modalBerita.style.display = "block";
}
// Tutup Modal
closeModal.addEventListener('click', () => {
modalBerita.style.display = "none";
});
// Tutup Modal Saat Klik di Luar Area
window.addEventListener('click', (e) => {
if (e.target === modalBerita) {
modalBerita.style.display = "none";
}
});
// Animasi Scroll untuk Navbar
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.backgroundColor = "#1a252f";
navbar.style.padding = "0.8rem 0";
} else {
navbar.style.backgroundColor = "#2c3e50";
navbar.style.padding = "1rem 0";
}
});
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Berita Kota Bandung - <?php echo $pageTitle; ?></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="Logo Berita Bandung">
<h1>BeritaKita</h1>
</div>
<ul class="menu" id="menu">
<li><a href="index.php" <?php if($pageTitle == "Home") echo "class='active'"; ?>>Home</a></li>
<li><a href="profil.php" <?php if($pageTitle == "Profil") echo "class='active'"; ?>>Profil</a></li>
<li><a href="informasi.php" <?php if($pageTitle == "Informasi") echo "class='active'"; ?>>Informasi</a></li>
</ul>
<button class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Hero Section (Hanya di Home) -->
<?php if($pageTitle == "Home"): ?>
<section class="hero">
<div class="container hero-content">
<h2>Berita Terkini dari Kota Bandung</h2>
<p>Informasi terpercaya dan update sehari-hari</p>
</div>
</section>
<?php endif; ?>
<main class="container content">
</main>
<footer class="footer">
<div class="container">
<p>© 2026 BeritaKita - Semua hak dilindungi</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
#Cara Menjalankan
1. Simpan semua file sesuai struktur folder di atas.
2. Letakkan folder berita-website di direktori root server lokal (misal: htdocs/ untuk XAMPP atau www/ untuk WAMP).
3. Jalankan server lokal dan akses melalui browser dengan alamat http://localhost/berita-website/
4. Video Penjelasan Tugas :
Contoh Tampilan yang dihasilkan :
Halaman Home
Halaman Profil
Halaman Informasi
===== SELAMAT MENGERJAKAN =====
by Achdijat.S.
Contoh pencantuman kelompok :
BalasHapus[X PPLG1][Kelompok Java][Budi*, Ari, Agus, Ria, Rara].
Nama yg ditandai " * " adalah sbg Ketua kelompok.
Sip..
Hapus[X PPLG 1][Kelompok 1][Keanu*, Mirza, Putra, Revanno, Fawwaz, Chintia, Firli]
BalasHapusSiiip...
Hapus[X PPLG 2][KELOPOK PEMBURU MBG][Angel*, Atsillah, Bening, Bulan, Marsya, Nisa]
BalasHapus