Basis data modul 5 & 6

Verin

 BASIS DATA MODUL 5 & 6

 Berdasarkan kode dari folder "website desa" (file utama: admin.html, admin.js, index (1).html, login.html),website ini menggunakan JavaScript dengan localStorage (bukan SQL/database relasional), konsep ini tidak diimplementasikan secara langsung (tidak ada query SQL seperti JOIN atau SUBQUERY). Sebaliknya, bisa dianalogikan dengan operasi JS seperti:

  • Relasi: Hubungan antar array/data (misalnya, menambahkan field ID untuk link data, seperti foreign key).
  • Join: Penggabungan array (misalnya, map atau find untuk gabung atribut dari satu "tabel" ke yang lain).
  • Subquery: Pencarian bersarang (misalnya, findIndex atau filter dengan kondisi nested, seperti scalar/row subquery).

Berikut adalah Kode yang relevan sesuai dengan setiap bagian

1. File admin.js (Bagian Utama untuk Relasi-Join dan Subquery)

  • Pengertian Mudah: File ini adalah "pusat operasi" data. Array seperti this.beritaData, this.layananData, this.wargaData berfungsi sebagai "tabel" sederhana di localStorage. Operasi seperti mencari, menggabung, atau filter data mirip konsep basis data, tapi dilakukan manual di JS.
  • Identifikasi Relasi-Join:
    • Relasi muncul saat data saling terkait (misalnya, berita punya kategori atau adminId konseptual, seperti one-to-many: satu admin kelola banyak berita).
    • Join konseptual ada di loadBeritaTable(): Menggabungkan atribut dari array beritaData dengan data lain (seperti status atau kategori) menggunakan map (mirip INNER JOIN untuk tampil data lengkap).
    • Di saveBerita(): Saat simpan, bisa tambah field relasi seperti adminId (foreign key konseptual), lalu gabung dengan array admin lain (mirip LEFT JOIN untuk tampil nama admin).
  • Identifikasi Subquery:
    • Subquery scalar/row muncul di findIndex(): Mencari satu nilai spesifik (ID) di array, seperti subquery yang kembalikan satu baris untuk update/edit.
    • Subquery table/correlated muncul di deleteBerita() atau filter: Filter array berdasarkan kondisi bersarang (misalnya, hapus jika ID match dengan array lain), mirip WHERE id IN (SELECT id FROM ...) atau EXISTS.

Contoh Potongan Kode Relevan (Relasi-Join di loadBeritaTable()):

javascript22 lines
Click to expand
// Bagian ini dijalankan saat load halaman admin, mengisi tabel berita
loadBeritaTable() {
...

Penjelasan Contoh: map menggabungkan data dari beritaData (tabel utama) dengan logika kondisional untuk status dan kategori (seperti JOIN dengan tabel Kategori/Admin). Ini mirip INNER JOIN karena hanya tampil data yang ada; jika kategori hilang, tampilan rusak (seperti no match di JOIN).

Contoh Potongan Kode Relevan (Subquery di saveBerita() dan deleteBerita()):

javascript35 lines
Click to expand
// Save berita: Subquery scalar untuk cari ID (mirip WHERE id = (SELECT id FROM ...))
saveBerita(e) {
...

Penjelasan Contoh: findIndex adalah subquery scalar (cari satu index/nilai berdasarkan kondisi nested). filter di delete adalah subquery table (filter banyak item berdasarkan kriteria, bisa correlated jika cek array lain seperti layananData). Ini seperti DELETE FROM Berita WHERE id NOT IN (SELECT id FROM Layanan WHERE status = 'Aktif').

  • Bagian Lain di admin.js yang Relevan: Fungsi loadWargaTable() atau setupEventListeners() mirip: find untuk relasi warga-layanan (join konseptual), dan nested loop untuk subquery umur rata-rata (misalnya hitung wargaData.filter(w => w.umur > averageUmur)).

2. File index (1).html (Tampilan Publik, Relasi-Join Sederhana)

  • Pengertian Mudah: Halaman ini tampil data statis (hard-coded), tapi konseptualnya seperti "view" hasil query. Relasi muncul di atribut seperti kategori berita (link ke data lain).
  • Identifikasi Relasi-Join: Di section berita/layanan, atribut seperti <span>Kegiatan Desa</span> adalah relasi one-to-many (kategori ke berita). Join konseptual: Jika JS ditambah, gabung data dari localStorage untuk tampil lengkap (mirip SELECT dengan JOIN).
  • Identifikasi Subquery: Tidak ada langsung (statis), tapi bisa dianalogikan di hard-code "top 3 berita" sebagai subquery untuk filter terbaru.

Contoh Potongan Kode Relevan (Relasi-Join di Section Berita):

html14 lines
Click to expand
<section class="py-16 bg-green-50">
<div class="max-w-6xl mx-auto px-4">
...

Penjelasan Contoh: Span kategori adalah contoh relasi (seperti foreign key ke tabel Kategori). Jika dinamis via JS, ini seperti LEFT JOIN: Tampil berita meski kategori tidak ada. Subquery potensial: Hard-code "terbaru" mirip SELECT * FROM Berita WHERE tanggal > (SELECT MIN(tanggal) FROM Berita).

3. File login.html (Autentikasi, Subquery Sederhana)

  • Pengertian Mudah: Form login cek username/password.
  • Identifikasi Relasi-Join: Tidak ada (sederhana), tapi konseptual relasi ke tabel Admin.
  • Identifikasi Subquery: JS cek kondisi nested seperti scalar subquery (verifikasi satu nilai password).

Contoh Potongan Kode Relevan (Subquery di JS Login):

javascript12 lines
Click to expand
document.getElementById('admin-login-form').addEventListener('submit', function(e) {
e.preventDefault();
...

Penjelasan Contoh: if dengan kondisi ganda adalah subquery row (cari satu record admin yang match username DAN password). Mirip correlated subquery jika cek dari array adminData.

4. File admin.html (Tampilan Admin, Dukungan untuk Operasi)

  • Pengertian Mudah: Layout tabel dan form, diisi JS.
  • Identifikasi Relasi-Join: Tabel body (id="berita-table-body") diisi hasil join dari JS.
  • Identifikasi Subquery: Modal form (id="berita-id") prep untuk subquery edit (cari ID).

Contoh Potongan Kode Relevan (Relasi-Join di Tabel Body):

html4 lines
Click to close
<tbody id="berita-table-body">
<!-- Diisi JS: Relasi tampil kategori/status, mirip JOIN Berita + Kategori -->
...

Penjelasan Contoh: ID ini target join dari loadBeritaTable() (gabung data). Subquery di edit modal: Saat klik edit, JS cari ID (subquery).

Pengertian Konsep Relasi-Join dan Subquery (Dipisahkan, Berdasarkan PDF)

Di akhir ini, saya pisahkan pengertian konsep dari PDF (Modul 5 & 6), dengan bahasa mudah, dan hubungkan ke kode website desa. Ini untuk klarifikasi: Kode JS hanya mirip konseptual, bukan implementasi SQL asli.

Pengertian Relasi (Modul 5 PDF)

  • Mudah Dipahami: Relasi adalah "hubungan keluarga" antar tabel (entitas). Contoh: One-to-Many (satu orang tua punya banyak anak, seperti satu Admin punya banyak Berita via foreign key admin_id). Jenis: One-to-One, One-to-Many, Many-to-Many (butuh tabel tengah).
  • Hubungan ke Kode: Di admin.js (saveBerita()), field kategori atau tambahan adminId adalah relasi one-to-many konseptual (link berita ke admin/kategori). Di HTML (index.html), span kategori adalah tampilan relasi. Keterbatasan: JS manual, bukan otomatis seperti foreign key di DB.

Pengertian Join (Modul 5 PDF)

  • Mudah Dipahami: Join adalah "penggabungan pesta" tabel terkait. INNER JOIN (hanya data match), LEFT JOIN (semua dari kiri + match kanan), RIGHT/FULL (semua dari kedua sisi), SELF JOIN (join tabel sama sendiri, misalnya banding umur warga). Digunakan untuk tampil data lengkap dari relasi.
  • Hubungan ke Kode: Di admin.js (loadBeritaTable()), map gabung atribut (mirip INNER JOIN: tampil judul + kategori jika match). Contoh extended: Gabung beritaData dengan adminData via find (mirip LEFT JOIN: tampil berita meski admin hilang). Di index.html, grid berita adalah hasil "join" statis. Saran: Ganti ke SQL JOIN untuk efisiensi.

Pengertian Subquery (Modul 6 PDF)

  • Mudah Dipahami: Subquery adalah "pencarian dalam pencarian" (nested query). Scalar (kembalikan satu nilai, misalnya rata-rata umur), Row (satu baris), Table (banyak baris). Non-correlated (independen), Correlated (tergantung query luar, seperti loop). Digunakan di WHERE/SELECT/FROM untuk kondisi kompleks.
  • Hubungan ke Kode: Di admin.js (findIndex di saveBerita() adalah scalar subquery: cari satu ID). filter di deleteBerita() adalah table subquery (filter banyak, correlated jika cek array lain). Di login JS, if kondisi adalah row subquery (cari satu match). Keterbatasan: JS lambat untuk data besar; gunakan SQL subquery untuk query seperti "hapus berita tidak aktif" (DELETE WHERE status NOT IN (SELECT status FROM AktifBerita)).

0 Komentar

Posting Komentar