DOKUMENTASI RESMI

WEBSITE EDUKASI GENRE

Sistem Informasi Edukasi Generasi Berencana Berbasis Web

DPPKBP3A Kabupaten Bengkulu Selatan

Nama Sistem   : EdukASI Genre
Instansi      : DPPKBP3A Kabupaten Bengkulu Selatan
Program       : Generasi Berencana (Genre) — BKKBN
Tahun         : 2025 – 2026
Versi         : 1.0.0
Status        : Aktif / Siap Produksi

DAFTAR ISI

Bab	Judul	Halaman
I	Pendahuluan	—
II	Profil Instansi & Program	—
III	Gambaran Umum Sistem	—
IV	Fitur dan Halaman Website	—
V	Sistem Panel Admin	—
VI	Teknologi yang Digunakan	—
VII	Arsitektur Sistem	—
VIII	Optimasi SEO & Visibilitas Google	—
IX	Keamanan Sistem	—
X	Analytics & Pemantauan Aktivitas	—
XI	Rencana Pengembangan	—
XII	Penutup & Kesimpulan	—

BAB I

PENDAHULUAN

1.1 Latar Belakang

Generasi muda merupakan aset terbesar bangsa Indonesia. Namun, berbagai tantangan serius mengancam kualitas hidup remaja saat ini — mulai dari pernikahan dini, kehamilan tidak terencana, penyalahgunaan narkoba, HIV/AIDS, hingga masalah stunting yang masih tinggi angkanya di berbagai daerah, termasuk Kabupaten Bengkulu Selatan.

Badan Kependudukan dan Keluarga Berencana Nasional (BKKBN) melalui program unggulannya, Generasi Berencana (Genre), hadir sebagai solusi untuk membekali remaja Indonesia dengan pengetahuan, sikap, dan keterampilan yang diperlukan agar dapat merencanakan masa depannya dengan baik. Program Genre diimplementasikan di seluruh kabupaten/kota di Indonesia, termasuk di Kabupaten Bengkulu Selatan melalui Dinas Pengendalian Penduduk, Keluarga Berencana, Pemberdayaan Perempuan dan Perlindungan Anak (DPPKBP3A).

Namun, selama ini penyebaran informasi tentang program Genre masih bersifat konvensional — melalui leaflet, brosur, sosialisasi langsung, dan media sosial yang bersifat satu arah. Pendekatan ini memiliki keterbatasan jangkauan, tidak interaktif, dan tidak dapat diakses kapan saja dan di mana saja oleh remaja yang semakin akrab dengan teknologi digital.

Melihat kondisi tersebut, dibangunlah Website EdukASI Genre — sebuah platform digital interaktif yang menyajikan konten edukasi Generasi Berencana secara terstruktur, menarik, dan mudah diakses oleh seluruh remaja Kabupaten Bengkulu Selatan dan Indonesia pada umumnya.

1.2 Identifikasi Masalah

Berdasarkan latar belakang di atas, dapat diidentifikasi beberapa permasalahan utama:

Keterbatasan Akses Informasi — Tidak ada platform digital resmi yang menyajikan materi edukasi Genre secara lengkap dan terstruktur untuk remaja Bengkulu Selatan.
Minimnya Interaktivitas — Penyampaian materi yang bersifat satu arah (leaflet, brosur) tidak efektif membangun pemahaman remaja yang terbiasa dengan konten digital yang dinamis.
Tidak Ada Evaluasi Pemahaman — Tidak ada mekanisme untuk mengukur tingkat pemahaman remaja terhadap materi edukasi yang telah disampaikan.
Dokumentasi Kegiatan Tidak Terpusat — Dokumentasi kegiatan DPPKBP3A tersebar di berbagai platform dan tidak ada satu wadah digital resmi yang merekamnya secara terorganisir.
Tidak Ada Sistem Manajemen Konten — Setiap pembaruan informasi membutuhkan tenaga teknis eksternal, tidak dapat dilakukan secara mandiri oleh staf instansi.
Tidak Ada Data Analitik — Tidak ada cara untuk mengetahui seberapa banyak remaja yang terpapar informasi Genre secara digital.

1.3 Tujuan Pembangunan Website

Tujuan Umum

Membangun platform website edukasi digital yang interaktif, modern, dan mudah digunakan sebagai media penyebaran informasi Program Generasi Berencana (Genre) BKKBN di Kabupaten Bengkulu Selatan.

Tujuan Khusus

Menyediakan 9 topik materi edukasi Genre yang lengkap, terstruktur, dan berbasis referensi ilmiah (BKKBN, Kemenkes, BNN).
Membangun sistem kuis interaktif untuk menguji dan meningkatkan pemahaman remaja.
Menyediakan galeri kegiatan DPPKBP3A sebagai bukti nyata implementasi program di lapangan.
Menampilkan profil Duta Genre Bengkulu Selatan sebagai panutan bagi remaja lainnya.
Membangun panel administrasi yang memungkinkan pengelolaan konten secara mandiri tanpa keahlian teknis.
Mengimplementasikan sistem analytics untuk memantau jangkauan dan efektivitas platform.
Mengoptimalkan visibilitas di mesin pencari Google (SEO) agar mudah ditemukan oleh remaja.

1.4 Manfaat

Bagi Remaja

Mendapatkan akses mudah ke informasi edukasi Genre yang akurat dan terpercaya, kapan saja dan di mana saja.
Dapat menguji pemahaman diri melalui kuis interaktif dengan umpan balik langsung.
Terinspirasi oleh profil Duta Genre sebagai contoh nyata remaja berprestasi.

Bagi DPPKBP3A Kabupaten Bengkulu Selatan

Memiliki platform digital resmi sebagai wajah instansi di dunia maya.
Dapat mengelola seluruh konten website secara mandiri melalui panel admin.
Mendapatkan data analitik untuk mengukur jangkauan program secara digital.
Mendokumentasikan seluruh kegiatan instansi dalam satu wadah yang terorganisir.

Bagi Program Genre Nasional (BKKBN)

Menjadi contoh implementasi digitalisasi program Genre di tingkat kabupaten.
Meningkatkan jangkauan program Genre melampaui batas geografis.

Bagi Pembangunan Daerah

Mendukung transformasi digital layanan pemerintah daerah.
Berkontribusi pada peningkatan kualitas sumber daya manusia muda Bengkulu Selatan.

1.5 Ruang Lingkup

Website EdukASI Genre mencakup:

Front-end publik — Lima halaman utama yang dapat diakses oleh siapa saja tanpa perlu mendaftar.
Panel admin — Sistem manajemen konten yang hanya dapat diakses oleh administrator terverifikasi.
Basis data cloud — Penyimpanan seluruh data di MongoDB Atlas (cloud database).
Sistem analytics — Pencatatan dan visualisasi aktivitas pengunjung secara real-time.
Optimasi SEO — Konfigurasi lengkap untuk visibilitas di mesin pencari Google.

Website ini tidak mencakup:

Sistem registrasi/login untuk pengguna remaja (akses publik bebas tanpa akun).
Fitur forum diskusi atau komunitas online.
Integrasi pembayaran atau transaksi keuangan.

BAB II

PROFIL INSTANSI & PROGRAM

2.1 DPPKBP3A Kabupaten Bengkulu Selatan

Dinas Pengendalian Penduduk, Keluarga Berencana, Pemberdayaan Perempuan dan Perlindungan Anak (DPPKBP3A) Kabupaten Bengkulu Selatan adalah Organisasi Perangkat Daerah (OPD) yang bertugas melaksanakan urusan pemerintahan daerah di bidang pengendalian penduduk, keluarga berencana, pemberdayaan perempuan, dan perlindungan anak.

Informasi	Detail
Nama Dinas	DPPKBP3A Kabupaten Bengkulu Selatan
Singkatan	Dinas Pengendalian Penduduk, Keluarga Berencana, Pemberdayaan Perempuan dan Perlindungan Anak
Alamat	Jl. Let. Tukiran No.151, Ps. Baru, Kec. Kota Manna, Bengkulu 38511
Kota	Kota Manna, Bengkulu Selatan
Provinsi	Bengkulu
Program Utama	Generasi Berencana (Genre) — BKKBN
Mitra Nasional	BKKBN, Kemenkes RI, BNN

Tugas Pokok dan Fungsi (Tupoksi)

DPPKBP3A memiliki enam tupoksi utama:

Pengendalian Penduduk — Mengelola data kependudukan, analisis proyeksi penduduk, dan koordinasi kebijakan kependudukan daerah.
Keluarga Berencana — Mengkoordinasikan pelaksanaan program KB, distribusi alat kontrasepsi, dan pembinaan keluarga.
Ketahanan Keluarga — Membina keluarga melalui program Bina Keluarga Remaja (BKR), Bina Keluarga Balita (BKB), dan UPPKS.
Kesehatan Reproduksi Remaja — Melaksanakan program Genre melalui PIK-R dan Duta Genre.
Pemberdayaan Perempuan — Meningkatkan peran dan kapasitas perempuan dalam pembangunan daerah.
Perlindungan Anak — Mencegah dan menangani kasus kekerasan terhadap anak serta memastikan pemenuhan hak anak.

2.2 Program BKKBN: Generasi Berencana (Genre)

Generasi Berencana (Genre) adalah program nasional BKKBN yang bertujuan membentuk remaja yang berkarakter, berdaya saing, dan mampu merencanakan kehidupannya dengan baik. Program ini menyasar remaja usia 10–24 tahun di seluruh Indonesia.

Tiga Pilar Utama Genre (Triad KRR)

Program Genre berfokus pada tiga isu utama kesehatan remaja:

Pilar	Deskripsi
Kesehatan Reproduksi Remaja	Pemahaman tentang sistem reproduksi, risiko seks bebas, pernikahan dini, dan pentingnya perencanaan keluarga.
Bebas HIV/AIDS	Edukasi tentang HIV/AIDS, cara penularan, pencegahan, dan penghapusan stigma terhadap ODHA.
Anti-Napza	Edukasi tentang bahaya narkoba, psikotropika, dan zat adiktif — serta cara menolak dan melaporkannya.

Media Implementasi Genre

PIK-R (Pusat Informasi dan Konseling Remaja) — Wadah konsultasi remaja di sekolah dan komunitas.
Duta Genre — Remaja pilihan yang menjadi agen perubahan dan duta sosialisasi program Genre.
BKR (Bina Keluarga Remaja) — Program pembinaan orang tua dalam mendampingi remaja.
Website EdukASI Genre (platform ini) — Media digital edukasi yang dapat diakses kapan saja.

2.3 Kabupaten Bengkulu Selatan

Data	Keterangan
Ibu Kota	Kota Manna
Provinsi	Bengkulu
Luas Wilayah	±1.186,10 km²
Jumlah Kecamatan	11 Kecamatan
Jumlah Desa/Kelurahan	142 Desa / 5 Kelurahan
Jumlah Penduduk	±160.000 jiwa
Batas Wilayah	Utara: Kab. Seluma, Timur: Kab. Lebong & Lampung Barat, Selatan: Kab. Kaur, Barat: Samudera Hindia

Kabupaten Bengkulu Selatan memiliki populasi remaja yang signifikan. Program Genre menjadi sangat penting untuk memastikan generasi muda daerah ini dapat merencanakan masa depannya dengan baik dan terhindar dari permasalahan sosial yang merugikan.

BAB III

GAMBARAN UMUM SISTEM

3.1 Deskripsi Website

EdukASI Genre adalah platform web edukasi interaktif yang dikembangkan khusus untuk mendukung Program Generasi Berencana (Genre) BKKBN di Kabupaten Bengkulu Selatan. Platform ini menyajikan materi edukasi kesehatan reproduksi remaja, kuis interaktif berbasis soal pilihan ganda, galeri kegiatan instansi, serta profil Duta Genre — semuanya dalam tampilan modern yang ramah pengguna dan dapat diakses dari perangkat apa pun.

3.2 Identitas Website

Aspek	Detail
Nama Platform	EdukASI Genre
Tagline	"Generasi Berencana"
Deskripsi Singkat	Platform edukasi interaktif Generasi Berencana untuk remaja Indonesia
Instansi Pemilik	DPPKBP3A Kabupaten Bengkulu Selatan
Bahasa	Bahasa Indonesia
Target Usia	Remaja 10–24 tahun
Akses	Publik (tanpa pendaftaran)
Versi	1.0.0
Tahun Peluncuran	2026

3.3 Target Pengguna

Website ini dirancang untuk dua kelompok pengguna utama:

Pengguna Publik (Remaja & Masyarakat)

Siswa/siswi SMP dan SMA/SMK di Kabupaten Bengkulu Selatan.
Mahasiswa dan pemuda usia 18–24 tahun.
Orang tua yang ingin memahami program Genre.
Masyarakat umum yang ingin mengetahui program BKKBN.

Pengguna Admin (Staf DPPKBP3A)

Administrator IT instansi.
Staf yang bertanggung jawab atas pengelolaan konten digital.
Pimpinan yang ingin memantau statistik website.

3.4 Prinsip Desain

Website ini dibangun dengan prinsip-prinsip berikut:

Mobile-First — Dirancang mengutamakan tampilan di smartphone, mengingat mayoritas remaja mengakses internet melalui ponsel.
Modern & Menarik — Menggunakan desain dark theme dengan aksen warna ungu-teal yang menarik perhatian generasi muda.
Informatif & Terstruktur — Setiap konten disajikan dengan hierarki informasi yang jelas.
Cepat & Ringan — Tidak bergantung pada framework berat; dioptimalkan untuk koneksi internet yang tidak selalu stabil.
Mudah Dikelola — Panel admin dirancang agar staf non-teknis pun dapat mengelola konten.
SEO-Friendly — Dioptimalkan agar mudah ditemukan di Google ketika remaja mencari informasi terkait Genre.

3.5 Alur Penggunaan Website (User Journey)

Remaja mencari informasi → Menemukan website via Google/link
        ↓
  Halaman Beranda
  (gambaran umum, 9 topik, CTA belajar)
        ↓
  Memilih Materi Edukasi
  (membaca 9 topik lengkap dengan fakta & data)
        ↓
  Mengikuti Quiz Interaktif
  (20+ soal pilihan ganda, langsung ada umpan balik)
        ↓
  Melihat Kegiatan & Duta Genre
  (galeri dokumentasi, profil inspiratif)
        ↓
  Mengenal Instansi
  (profil DPPKBP3A, kontak, lokasi, peta)

BAB IV

FITUR DAN HALAMAN WEBSITE

4.1 Halaman Beranda (`/`)

Halaman pertama yang dilihat pengunjung. Dirancang untuk memberikan kesan pertama yang kuat dan langsung mengarahkan pengguna ke aksi yang diinginkan.

Komponen Halaman Beranda:

a. Navigasi Bar

Logo dan nama brand "EdukASI Genre" di pojok kiri.
Menu navigasi: Beranda, Materi Edukasi, Kegiatan, Ikuti Quiz.
Tombol hamburger untuk tampilan mobile.
Sticky (menempel di atas saat di-scroll).

b. Section Hero

Headline utama: "Remaja Berpengetahuan, Masa Depan Terencana".
Deskripsi: Perkenalan singkat platform.
Dua tombol CTA: "Mulai Belajar" dan "Coba Quiz".
Office Card: Kartu instansi berisi logo dan nama DPPKBP3A yang dapat diklik menuju halaman profil.
Statistik animasi: 9 Topik Utama, 20 Materi Edukasi, 100% Interaktif.
Visual card: Menampilkan kode singkat 6 topik Genre dan floating badge informasi.
Background: Dark gradient dengan efek blur blob berwarna (ungu, teal, merah muda).

c. Section Tentang Program

Penjelasan apa itu Generasi Berencana.
Tiga pilar Triad KRR (Kesehatan Reproduksi, HIV/AIDS, Napza).
Visual kartu program dengan ikon.

d. Section Topik Edukasi

Grid 9 topik materi edukasi yang tersimpan di database.
Setiap kartu topik menampilkan: kode singkat, judul, ringkasan, dan warna unik.
Dapat diklik langsung menuju halaman materi detail.

e. Section Program Genre

Highlight tiga pilar program: PIK-R, Duta Genre, dan BKR.
Statistik program: jumlah kegiatan, Duta Genre aktif, remaja terjangkau.

f. Section Quiz CTA

Ajakan untuk mengikuti kuis dengan desain gradient menarik.
Menampilkan jumlah soal yang tersedia.

g. Footer

Informasi kontak DPPKBP3A (alamat, email, telepon).
Link navigasi cepat ke semua halaman.
Logo dan deskripsi singkat platform.
Copyright.

4.2 Halaman Materi Edukasi (`/materi/:id`)

Halaman utama konten edukasi Genre yang paling penting. Menyajikan 9 topik materi secara lengkap dan terstruktur.

Sembilan (9) Topik Materi Genre:

No	Kode	Topik	Deskripsi Umum
1	SB	Seks Bebas	Bahaya hubungan seks di luar nikah, risiko kesehatan dan sosial
2	BP	Dampak Berganti Pasangan	Risiko kesehatan dari pergantian pasangan seksual
3	GN	Generasi Berencana	Pengenalan program Genre, manfaat, dan implementasi
4	DG	Duta Genre	Peran Duta Genre sebagai agen perubahan remaja
5	ST	Stunting dan Kurang Gizi	Penyebab, dampak, dan pencegahan stunting pada remaja
6	PS	Pencegahan Stunting	Program dan cara mencegah stunting sejak dini
7	NK	Bahaya Narkoba	Jenis, dampak, dan cara menghindari narkoba
8	HA	HIV/AIDS	Penularan, pencegahan, dan cara hidup sehat bebas HIV
9	PD	Pernikahan Dini	Dampak pernikahan dini pada kesehatan, pendidikan, dan ekonomi

Fitur Halaman Materi:

Sidebar navigasi — Daftar semua topik dengan progress navigasi (topik sebelumnya/berikutnya).
Konten terstruktur — Setiap materi terdiri dari: judul, ringkasan, beberapa subjudul dan isi yang lengkap.
Fakta & Data — Setiap materi dilengkapi fakta statistik dengan angka, label, dan sumber referensi (BKKBN, Kemenkes, BNN).
Gambar ilustrasi — Setiap topik dapat disertai gambar dengan keterangan.
Navigasi antar materi — Tombol "Materi Sebelumnya" dan "Materi Berikutnya" untuk kemudahan navigasi.
SEO per halaman — Setiap materi memiliki meta tag, Open Graph, dan canonical URL tersendiri.

Struktur Data Materi (per topik):

Materi
├── Judul Topik
├── Kode Singkat (misal: SB, NK, HA)
├── Warna Tema (biru, ungu, merah, dll)
├── Ringkasan (1 paragraf)
├── Konten (Array subjudul + isi)
│   ├── Subjudul 1 + Isi 1
│   ├── Subjudul 2 + Isi 2
│   └── dst...
├── Gambar + Alt Text + Keterangan
└── Fakta (Array angka + label + sumber)
    ├── Fakta 1: "62%" — "remaja mengetahui HIV" — Sumber: Kemenkes
    ├── Fakta 2: dst...
    └── ...

4.3 Halaman Quiz Interaktif (`/quiz`)

Fitur unggulan yang membedakan EdukASI Genre dari platform informasi biasa. Quiz dirancang untuk menguji sekaligus mempertegas pemahaman remaja tentang materi Genre.

Cara Kerja Quiz:

Halaman Landing Quiz — Ditampilkan jumlah soal yang tersedia dan tombol "Mulai Quiz".
Pengambilan Soal — Sistem memuat semua soal dari database secara dinamis (bisa diupdate admin kapan saja).
Tampilan Per Soal — Soal ditampilkan satu per satu dengan 4 pilihan jawaban (A, B, C, D).
Progress Bar — Menampilkan posisi soal saat ini dari total soal (misal: Soal 5/20).
Pengiriman Jawaban — Semua jawaban dikirim sekaligus ke server setelah selesai.
Penilaian Otomatis — Server menghitung skor, mencocokkan dengan kunci jawaban.
Hasil & Umpan Balik — Ditampilkan:
- Skor akhir (misal: 15/20 = 75%)
- Evaluasi motivasional berdasarkan skor
- Detail jawaban benar/salah per soal
- Penjelasan untuk setiap jawaban

Kategori Evaluasi Skor:

Rentang Skor	Kategori	Pesan Motivasi
90% – 100%	🏆 Luar Biasa	"Kamu sangat memahami materi Generasi Berencana!"
75% – 89%	⭐ Bagus Sekali	"Pemahamanmu sudah sangat baik. Tinggal sedikit lagi!"
60% – 74%	✅ Cukup Baik	"Pelajari kembali bagian yang masih kurang!"
40% – 59%	📚 Perlu Belajar	"Masih banyak materi yang perlu diperdalam!"
0% – 39%	🔄 Yuk Baca Dulu	"Pelajari semua materi terlebih dahulu!"

Struktur Data Soal Quiz:

Soal Quiz
├── Pertanyaan (teks soal)
├── Pilihan (array 4 jawaban: A, B, C, D)
├── Jawaban (index jawaban benar: 0, 1, 2, atau 3)
├── Penjelasan (alasan jawaban yang benar)
└── Urutan (nomor urut tampil)

4.4 Halaman Kegiatan & Dokumentasi (`/kegiatan`)

Halaman galeri yang menampilkan rekam jejak kegiatan nyata DPPKBP3A Kabupaten Bengkulu Selatan — membuktikan bahwa program Genre benar-benar dijalankan di lapangan.

Kategori Kegiatan:

Kategori	Deskripsi
Kunjungan	Kunjungan lapangan ke sekolah, komunitas, atau mitra
Sosialisasi	Kegiatan penyuluhan dan sosialisasi program Genre ke masyarakat
Pelatihan	Workshop, seminar, dan pelatihan untuk remaja dan kader
Duta Genre	Kegiatan khusus yang melibatkan Duta Genre

Fitur Halaman Kegiatan:

Filter Kategori — Tombol filter interaktif untuk menyaring kegiatan berdasarkan kategori.
Grid Galeri — Kartu kegiatan dengan foto, judul, tanggal, lokasi, dan deskripsi.
Badge Highlight — Menandai kegiatan yang dianggap penting/unggulan.
Section Duta Genre — Bagian khusus menampilkan profil para Duta Genre aktif dengan foto, nama, sekolah, angkatan, bidang keahlian, dan prestasi.
Statistik Header — Jumlah kegiatan terlaksana, Duta Genre aktif, dan remaja terjangkau.

Profil Duta Genre:

Setiap profil Duta Genre memuat:

Foto profil
Nama lengkap
Asal sekolah
Angkatan/tahun aktif
Bidang keahlian/fokus
Prestasi yang telah diraih

4.5 Halaman Profil Instansi (`/Bengkulu-Selatan`)

Halaman yang menampilkan informasi lengkap tentang DPPKBP3A Kabupaten Bengkulu Selatan dan Kabupaten Bengkulu Selatan secara umum.

Komponen Halaman:

a. Hero Section

Background gelap dengan efek blur blob animasi (ungu, teal, emas).
Logo Kabupaten Bengkulu Selatan.
Nama dan identitas DPPKBP3A.
Badge program: BKKBN, Perlindungan Anak, Kesehatan Keluarga, Pemberdayaan Perempuan.
Efek wave transisi ke section berikutnya.

b. Identitas Dinas

Tabel informasi resmi: nama dinas, singkatan, kabupaten, provinsi, program utama, referensi.

c. Tugas & Fungsi (Tupoksi)

Enam kartu tupoksi dengan ikon dan deskripsi singkat.
Desain glassmorphism di atas background gelap gradient.

d. Profil Kabupaten Bengkulu Selatan

Empat statistik kabupaten: jumlah kecamatan, desa/kelurahan, luas wilayah, jumlah penduduk.
Deskripsi singkat tentang Kabupaten Bengkulu Selatan.
Tag kategori informasi geografis.

e. Kontak & Informasi

Empat kartu kontak: Alamat, Telepon, Email, Website resmi.

f. Peta Lokasi Kantor

Embed Google Maps menampilkan lokasi kantor DPPKBP3A.
Tombol "Buka di Google Maps" dan "Salin Alamat".

BAB V

SISTEM PANEL ADMIN

5.1 Gambaran Umum Panel Admin

Panel Admin adalah sistem manajemen konten (CMS) yang memungkinkan staf DPPKBP3A mengelola semua konten website secara mandiri tanpa memerlukan keahlian teknis pemrograman. Panel ini hanya dapat diakses setelah login dengan username dan password yang valid.

Alamat Akses Admin: /admin/login

5.2 Sistem Autentikasi

Login berbasis session — Admin memasukkan username dan password.
Password terenkripsi — Password disimpan dalam bentuk hash bcrypt (tidak pernah tersimpan sebagai teks polos).
Proteksi rute — Semua halaman admin dilindungi middleware requireAdmin yang memverifikasi sesi setiap request.
Session timeout — Sesi login otomatis berakhir setelah 24 jam.
Auto-redirect — Akses halaman admin tanpa login langsung diarahkan ke halaman login.

5.3 Fitur Manajemen Konten

a. Manajemen Kegiatan

Admin dapat:

Menambah kegiatan baru (kategori, judul, deskripsi, tanggal, lokasi, foto, status highlight, urutan tampil).
Mengedit data kegiatan yang sudah ada.
Menghapus kegiatan.
Mengatur urutan tampil kegiatan.
Menandai kegiatan sebagai "highlight" untuk ditampilkan lebih menonjol.

b. Manajemen Duta Genre

Admin dapat:

Menambah profil Duta Genre baru (nama, sekolah, angkatan, bidang, prestasi, foto, warna tema).
Mengedit profil Duta Genre yang sudah ada.
Menghapus profil Duta Genre.
Mengatur urutan tampil profil.

c. Manajemen Materi Edukasi

Admin dapat:

Menambah topik materi baru dengan semua atributnya.
Mengedit konten materi (judul, kode, ringkasan, konten multi-subjudul, fakta statistik).
Menambah, mengedit, dan menghapus subjudul dalam satu materi.
Menambah, mengedit, dan menghapus fakta statistik dalam satu materi.
Mengatur urutan tampil materi.
Menghapus topik materi.

d. Manajemen Soal Quiz

Admin dapat:

Menambah soal quiz baru (pertanyaan, 4 pilihan jawaban, kunci jawaban, penjelasan, urutan).
Mengedit soal yang sudah ada.
Menghapus soal.
Mengatur urutan tampil soal.

e. Pengaturan Situs

Admin dapat mengubah teks yang tampil di website tanpa mengubah kode program:

Nama situs dan tagline.
Deskripsi dan teks hero halaman beranda.
Nama dan alamat instansi.
Statistik di hero (jumlah topik, materi, remaja terjangkau).
Judul dan deskripsi halaman kegiatan.
Informasi footer (email, telepon, alamat).

5.4 Sistem Analytics di Panel Admin

Panel admin dilengkapi halaman analytics (/admin/analytics) yang menampilkan data aktivitas pengunjung website secara real-time.

Metrik yang Ditampilkan:

Metrik	Deskripsi
Total Tayangan	Jumlah total semua halaman yang pernah dibuka sejak website berjalan
Hari Ini	Jumlah tayangan pada hari ini (reset tengah malam)
7 Hari Terakhir	Akumulasi tayangan dalam 7 hari ke belakang
Pengunjung Unik	Jumlah pengunjung berbeda berdasarkan identitas anonim

Visualisasi Data:

Grafik Garis (30 Hari) — Chart interaktif menampilkan tren tayangan harian selama 30 hari terakhir, zona waktu WIB (UTC+7).
10 Halaman Terpopuler — Tabel yang menampilkan halaman mana yang paling banyak dikunjungi beserta jumlah tayangannya.
Distribusi Perangkat — Donut chart yang menunjukkan perbandingan pengunjung dari Mobile, Desktop, dan Tablet beserta persentasenya.

Manajemen Data Analytics:

Admin dapat menghapus data analytics lama (pilihan: 30, 60, 90, atau 180 hari ke belakang) untuk menjaga performa database.

BAB VI

TEKNOLOGI YANG DIGUNAKAN

6.1 Backend (Server-Side)

Node.js

Versi: Node.js 20 (LTS)
Peran: Runtime JavaScript server-side yang menjalankan seluruh logika aplikasi.
Alasan dipilih: Performa tinggi untuk I/O operasi, ekosistem package yang luas, dan konsistensi bahasa dengan frontend.

Express.js

Versi: 4.18.2
Peran: Web framework utama yang menangani routing HTTP, middleware, dan request/response.
Alasan dipilih: Framework paling matang dan terpercaya di ekosistem Node.js, ringan dan fleksibel.

6.2 Template Engine (View)

EJS (Embedded JavaScript Templates)

Versi: 3.1.9
Peran: Menghasilkan halaman HTML dinamis di server dengan data dari database.
Alasan dipilih: Sintaks sederhana mirip HTML biasa, mudah dipelajari oleh non-developer, tidak memerlukan proses build/compile.

6.3 Database

MongoDB Atlas

Jenis: Database NoSQL berbasis dokumen (Document Database).
Hosting: Cloud (MongoDB Atlas — dikelola MongoDB Inc.).
Driver: Mongoose 9.6.1 (ODM — Object Document Mapper).
Alasan dipilih:
- Schema fleksibel, cocok untuk data konten yang strukturnya bisa berubah.
- Gratis hingga 512 MB (lebih dari cukup untuk kebutuhan instansi).
- Tersedia di cloud, tidak perlu server database terpisah.
- Performa tinggi untuk operasi baca yang dominan.
- Backup otomatis oleh MongoDB Atlas.

6.4 Library & Paket NPM

Paket	Versi	Fungsi
`express`	4.18.2	Web framework utama
`ejs`	3.1.9	Template engine
`mongoose`	9.6.1	ODM untuk MongoDB
`express-session`	1.19.0	Manajemen sesi login admin
`connect-mongo`	6.0.0	Menyimpan data sesi di MongoDB
`bcryptjs`	3.0.3	Enkripsi password admin
`method-override`	3.0.0	Mendukung HTTP method PUT dan DELETE
`crypto`	built-in	Hashing IP pengunjung untuk analytics

Library Frontend (CDN — tidak perlu diinstall):

Library	Fungsi
Lucide Icons	Set ikon SVG yang konsisten dan modern
AOS (Animate On Scroll)	Animasi elemen saat di-scroll
Chart.js 4.4.4	Grafik interaktif di halaman analytics admin
Google Fonts	Font Sora (judul) dan Inter (teks)

6.5 Infrastruktur & Deployment

Hosting Platform: Replit

Saat ini website berjalan di Replit — platform cloud development yang mendukung Node.js.
Server berjalan 24/7 dengan konfigurasi port 5000.
Mendukung custom domain jika diperlukan.

Hosting Siap Produksi: Vercel (Opsional)

Website dapat di-deploy ke Vercel untuk performa produksi yang lebih optimal.
Vercel Analytics akan aktif otomatis setelah deployment.
Domain .vercel.app gratis, atau dapat menggunakan custom domain.

Database Hosting: MongoDB Atlas

Database dihosting di MongoDB Atlas (cloud, gratis tier).
Koneksi menggunakan MongoDB URI dengan autentikasi.
Data otomatis tersimpan secara permanen di cloud.

6.6 Kerangka Desain (CSS)

Website tidak menggunakan framework CSS pihak ketiga seperti Bootstrap atau Tailwind CSS. Seluruh desain dibangun dengan CSS kustom murni (vanilla CSS) yang tersimpan di dua file utama:

public/css/style.css — Stylesheet halaman publik (±2.400 baris CSS).
public/css/admin.css — Stylesheet panel admin (±380 baris CSS).

Keunggulan pendekatan ini:

Tidak ada dependency CSS eksternal yang bisa berubah/deprecated.
Ukuran file lebih kecil (hanya memuat style yang benar-benar digunakan).
Kontrol penuh atas tampilan setiap elemen.
Performa loading lebih cepat.

BAB VII

ARSITEKTUR SISTEM

7.1 Pola Arsitektur: MVC (Model-View-Controller)

Website EdukASI Genre dibangun mengikuti pola arsitektur MVC (Model-View-Controller) yang memisahkan logika bisnis, data, dan tampilan secara jelas.

┌─────────────────────────────────────────────────────────┐
│                    BROWSER PENGUNJUNG                   │
│              (Laptop, HP, Tablet, dll.)                 │
└─────────────────────┬───────────────────────────────────┘
                      │ HTTP Request (GET/POST)
                      ▼
┌─────────────────────────────────────────────────────────┐
│                    EXPRESS SERVER                       │
│                  (Node.js — Port 5000)                  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              MIDDLEWARE PIPELINE                 │   │
│  │  Static Files → Session → Base URL → Settings   │   │
│  │  → Page View Tracking → Routes                  │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │   ROUTES     │  │ CONTROLLERS  │  │    VIEWS     │  │
│  │  (Router)    │→ │  (Route      │→ │  (EJS        │  │
│  │              │  │  Handlers)   │  │  Templates)  │  │
│  └──────────────┘  └──────┬───────┘  └──────────────┘  │
│                           │                             │
│                    ┌──────▼───────┐                     │
│                    │    MODELS    │                     │
│                    │  (Mongoose)  │                     │
│                    └──────┬───────┘                     │
└───────────────────────────┼─────────────────────────────┘
                            │ MongoDB Driver
                            ▼
┌─────────────────────────────────────────────────────────┐
│                   MONGODB ATLAS (Cloud)                 │
│           Collections: materi, quizs, kegiatans,       │
│           dutagenres, admins, sitesettings, pageviews   │
└─────────────────────────────────────────────────────────┘

7.2 Struktur Direktori Proyek

edukasi-genre/
│
├── app.js                    # Entry point utama — server, middleware, routes
├── config.js                 # Konfigurasi global (DB URI, port, base URL)
├── package.json              # Daftar dependensi dan script
│
├── models/                   # Layer Data (MongoDB Schemas)
│   ├── Admin.js              # Schema akun administrator
│   ├── Materi.js             # Schema topik materi edukasi
│   ├── Quiz.js               # Schema soal quiz
│   ├── Kegiatan.js           # Schema kegiatan & dokumentasi
│   ├── DutaGenre.js          # Schema profil Duta Genre
│   ├── SiteSettings.js       # Schema pengaturan situs
│   └── PageView.js           # Schema data analytics kunjungan
│
├── routes/                   # Layer Controller (Route Handlers)
│   ├── index.js              # Route halaman beranda (/)
│   ├── materi.js             # Route halaman materi (/materi/:id)
│   ├── quiz.js               # Route halaman quiz (/quiz)
│   ├── kegiatan.js           # Route halaman kegiatan (/kegiatan)
│   ├── tentang.js            # Route halaman profil (/Bengkulu-Selatan)
│   └── admin.js              # Route semua fitur admin (/admin/*)
│
├── views/                    # Layer View (EJS Templates)
│   ├── index.ejs             # Template halaman beranda
│   ├── materi.ejs            # Template halaman materi
│   ├── quiz.ejs              # Template halaman quiz
│   ├── kegiatan.ejs          # Template halaman kegiatan
│   ├── tentang.ejs           # Template halaman profil instansi
│   ├── 404.ejs               # Template halaman error 404
│   ├── 500.ejs               # Template halaman error 500
│   ├── partials/
│   │   ├── header.ejs        # Template header (nav, SEO meta, script)
│   │   └── footer.ejs        # Template footer
│   └── admin/
│       ├── _header.ejs       # Template header admin (sidebar, topbar)
│       ├── _footer.ejs       # Template footer admin
│       ├── login.ejs         # Halaman login admin
│       ├── dashboard.ejs     # Halaman dashboard admin
│       ├── analytics.ejs     # Halaman analytics pengunjung
│       ├── settings.ejs      # Halaman pengaturan situs
│       ├── materi-list.ejs   # Daftar materi
│       ├── materi-form.ejs   # Form tambah/edit materi
│       ├── quiz-list.ejs     # Daftar soal quiz
│       ├── quiz-form.ejs     # Form tambah/edit soal quiz
│       ├── kegiatan-list.ejs # Daftar kegiatan
│       ├── kegiatan-form.ejs # Form tambah/edit kegiatan
│       ├── duta-list.ejs     # Daftar Duta Genre
│       └── duta-form.ejs     # Form tambah/edit Duta Genre
│
└── public/                   # File Statis (diakses langsung browser)
    ├── css/
    │   ├── style.css         # Stylesheet halaman publik
    │   └── admin.css         # Stylesheet panel admin
    ├── js/
    │   └── main.js           # JavaScript halaman publik
    ├── images/
    │   ├── logo-bengkulu-selatan.png  # Logo resmi Bengkulu Selatan
    │   └── og-image.jpg               # Gambar preview sosial media
    ├── icons/
    │   ├── icon-192.png      # Icon PWA 192x192
    │   ├── icon-512.png      # Icon PWA 512x512
    │   └── apple-touch-icon.png  # Icon untuk iOS
    ├── favicon.svg           # Favicon utama (vektor)
    ├── favicon.ico           # Favicon fallback (lama)
    ├── robots.txt            # Instruksi untuk mesin pencari
    └── site.webmanifest      # Manifest PWA

7.3 Alur Data: Pengunjung Membaca Materi

1. Browser → GET /materi/[id]
2. Express Router → routes/materi.js
3. Middleware Page View Tracking (async, non-blocking):
   - Hash IP pengunjung (SHA-256)
   - Deteksi perangkat dari User-Agent
   - Simpan ke collection pageviews (MongoDB)
4. Route Handler:
   - Ambil semua materi dari DB (untuk sidebar navigasi)
   - Ambil materi dengan ID yang diminta
   - Cari materi sebelumnya dan berikutnya
5. Render views/materi.ejs dengan data:
   - title, pageDescription, pageKeywords (untuk SEO)
   - canonical URL (untuk SEO)
   - materi (data topik yang dipilih)
   - allMateri (untuk sidebar)
   - prevMateri, nextMateri (untuk navigasi)
6. Browser menerima HTML yang sudah terisi data
7. Browser merender halaman, Lucide Icons diinisialisasi

7.4 Model Database (Skema Lengkap)

Model: Materi

{
  id:       String  (unique, primary key kustom, misal: "seks-bebas")
  judul:    String  (required — judul topik)
  kode:     String  (singkatan, misal: "SB")
  warna:    String  (tema warna kartu)
  ringkasan: String (deskripsi singkat 1 paragraf)
  konten:   Array of { subjudul: String, isi: String }
  gambar:   String  (URL gambar)
  gambarAlt:  String (alt text gambar)
  gambarKeterangan: String (caption gambar)
  fakta:    Array of { angka: String, label: String, sumber: String }
  urutan:   Number  (nomor urut tampil)
  createdAt / updatedAt: Date (otomatis)
}

Model: Quiz

{
  pertanyaan: String (required — teks soal)
  pilihan:    [String] (array 4 pilihan jawaban)
  jawaban:    Number (index 0-3 dari pilihan yang benar)
  penjelasan: String (penjelasan jawaban)
  urutan:     Number (nomor urut soal)
  createdAt / updatedAt: Date (otomatis)
}

Model: Kegiatan

{
  kategori:  String (enum: kunjungan|sosialisasi|pelatihan|dutaGenre)
  label:     String (label singkat)
  judul:     String (required — judul kegiatan)
  deskripsi: String (deskripsi lengkap)
  tanggal:   String (tanggal pelaksanaan)
  lokasi:    String (lokasi kegiatan)
  foto:      String (URL foto dokumentasi)
  highlight: Boolean (apakah ditampilkan sebagai highlight)
  urutan:    Number (nomor urut)
  createdAt / updatedAt: Date (otomatis)
}

Model: DutaGenre

{
  nama:     String (required — nama Duta Genre)
  sekolah:  String (asal sekolah/instansi)
  angkatan: String (tahun/angkatan)
  bidang:   String (bidang fokus/keahlian)
  prestasi: String (prestasi yang diraih)
  foto:     String (URL foto profil)
  warna:    String (enum: purple|teal|amber|blue|green|red)
  urutan:   Number (nomor urut)
  createdAt / updatedAt: Date (otomatis)
}

Model: PageView (Analytics)

{
  page:     String (URL path yang dikunjungi, misal: "/materi/seks-bebas")
  referrer: String (dari mana pengunjung berasal — URL atau kosong)
  ua:       String (User-Agent string — informasi browser/OS)
  ipHash:   String (SHA-256 hash dari IP + salt — untuk privasi)
  device:   String (enum: mobile|tablet|desktop)
  ts:       Date   (timestamp kunjungan — default: sekarang)
}

Model: SiteSettings

{
  key:           String (fixed: "main")
  siteName:      String (nama website)
  siteTagline:   String (tagline)
  heroDesc:      String (deskripsi hero beranda)
  officeName:    String (nama instansi)
  officeAddress: String (alamat instansi)
  heroStat1-3:   String (angka dan label statistik hero)
  kegiatanHeroTitle/Desc: String (judul dan deskripsi hero kegiatan)
  kegiatanStat1-3: String (statistik kegiatan)
  footerDesc/Email/Phone/Address: String (informasi footer)
  createdAt / updatedAt: Date (otomatis)
}

BAB VIII

OPTIMASI SEO & VISIBILITAS GOOGLE

8.1 Pentingnya SEO untuk Platform Edukasi Pemerintah

SEO (Search Engine Optimization) adalah serangkaian teknik yang memastikan website muncul di halaman pertama Google ketika seseorang mencari informasi terkait. Untuk platform edukasi pemerintah seperti EdukASI Genre, SEO sangat penting karena:

Remaja yang butuh informasi Genre akan mencarinya pertama kali di Google.
SEO yang baik berarti jangkauan program Genre lebih luas tanpa biaya iklan.
Meningkatkan kredibilitas dan kepercayaan platform di mata pengguna.

8.2 Implementasi SEO: Meta Tags Lengkap

Setiap halaman website memiliki meta tags yang unik dan spesifik:

<!-- Meta dasar -->
<title>[Judul Halaman] | EdukASI Genre — DPPKBP3A Bengkulu Selatan</title>
<meta name="description" content="[Deskripsi unik per halaman]">
<meta name="keywords" content="[Kata kunci relevan per halaman]">
<meta name="author" content="DPPKBP3A Kabupaten Bengkulu Selatan">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">

<!-- URL Kanonik (mencegah duplikasi konten) -->
<link rel="canonical" href="[URL lengkap halaman]">

8.3 Open Graph & Twitter Card (Preview Sosial Media)

Ketika link website dibagikan di WhatsApp, Facebook, Twitter/X, atau aplikasi lain, sistem akan menampilkan preview yang menarik dengan gambar, judul, dan deskripsi — bukan sekadar URL mentah.

<!-- Open Graph (Facebook, WhatsApp, Telegram, dll.) -->
<meta property="og:type" content="website">
<meta property="og:url" content="[URL halaman]">
<meta property="og:title" content="[Judul halaman]">
<meta property="og:description" content="[Deskripsi halaman]">
<meta property="og:image" content="[URL gambar preview 1200x630]">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="EdukASI Genre">
<meta property="og:locale" content="id_ID">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[Judul halaman]">
<meta name="twitter:description" content="[Deskripsi halaman]">
<meta name="twitter:image" content="[URL gambar preview]">

8.4 JSON-LD Structured Data (Schema.org)

Structured Data membantu Google memahami konten website lebih dalam, memungkinkan tampilan Rich Results (hasil pencarian yang diperkaya) di Google Search.

Website EdukASI Genre mengimplementasikan tiga schema utama di setiap halaman:

a. Organization Schema

Memberitahu Google tentang identitas lembaga pemilik website:

{
  "@type": "Organization",
  "name": "DPPKBP3A Kabupaten Bengkulu Selatan",
  "alternateName": "EdukASI Genre",
  "url": "[domain website]",
  "logo": "[URL logo instansi]",
  "address": {
    "addressLocality": "Kota Manna",
    "addressRegion": "Bengkulu Selatan",
    "addressCountry": "ID"
  }
}

b. WebSite Schema dengan SearchAction

Memungkinkan tampilan search box langsung di hasil pencarian Google:

{
  "@type": "WebSite",
  "name": "EdukASI Genre",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "[domain]/materi?q={search_term_string}"
  }
}

c. WebPage Schema dengan BreadcrumbList

Menampilkan breadcrumb navigasi di hasil pencarian Google:

{
  "@type": "WebPage",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Beranda" }]
  }
}

8.5 Sitemap XML Dinamis (`/sitemap.xml`)

Sitemap adalah peta website yang membantu Google menemukan semua halaman secara cepat. Sitemap EdukASI Genre dihasilkan secara dinamis — setiap kali admin menambah materi baru, sitemap otomatis diperbarui.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://[domain]/</loc>
    <lastmod>2026-05-04</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://[domain]/materi</loc>
    <priority>0.9</priority>
  </url>
  <!-- + semua halaman materi per ID dari database -->
  <!-- + /quiz, /kegiatan, /Bengkulu-Selatan -->
</urlset>

8.6 Robots.txt (`/robots.txt`)

File yang memberitahu mesin pencari halaman mana yang boleh dan tidak boleh diindeks:

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /quiz/data
Disallow: /quiz/submit
Sitemap: /sitemap.xml

Halaman admin dan endpoint API internal diblokir dari indexing untuk keamanan.

8.7 Web App Manifest & Favicon Lengkap

Website dilengkapi konfigurasi Progressive Web App (PWA) yang memungkinkan website "diinstall" seperti aplikasi:

// site.webmanifest
{
  "name": "EdukASI Genre — DPPKBP3A Bengkulu Selatan",
  "short_name": "EdukASI Genre",
  "display": "standalone",
  "theme_color": "#1A0A3E",
  "background_color": "#0A0722",
  "lang": "id",
  "categories": ["education", "health"],
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192" },
    { "src": "/icons/icon-512.png", "sizes": "512x512" },
    { "src": "/favicon.svg", "sizes": "any" }
  ]
}

Set ikon yang tersedia:

favicon.svg — Favicon vektor (semua browser modern)
favicon.ico — Favicon fallback (browser lama)
icons/icon-192.png — Icon Android/PWA
icons/icon-512.png — Icon Android splash screen
icons/apple-touch-icon.png — Icon iOS (saat tambah ke Home Screen)

BAB IX

KEAMANAN SISTEM

9.1 Autentikasi Admin

Alur Login

Admin memasukkan username dan password di /admin/login.
Server mencari admin di database berdasarkan username.
Jika ditemukan, password yang dimasukkan dibandingkan dengan hash bcrypt di database.
Jika cocok, session ID disimpan di server dan cookie session dikirim ke browser admin.
Setiap request berikutnya ke halaman admin diverifikasi session-nya.

Enkripsi Password (bcryptjs)

Password admin tidak pernah disimpan sebagai teks biasa di database.
Menggunakan algoritma bcrypt dengan salt rounds yang menghasilkan hash yang tidak bisa di-reverse.
Meskipun database bocor, password asli tetap tidak dapat diketahui.

Password asli: "admin123"
Tersimpan di DB: "$2a$10$N9qo8uLOickgx2ZMRZoMyeIjZAgcfl7p92ldGxad68LJZdL17lhy7"

9.2 Manajemen Sesi

Menggunakan express-session dengan penyimpanan session di MongoDB (connect-mongo).
Session bukan di memory server, sehingga aman meski server restart.
Session token dienkripsi dengan SESSION_SECRET yang tersimpan sebagai environment variable rahasia.
Session cookie berlaku 24 jam, setelah itu admin harus login ulang.
HttpOnly cookie — Cookie tidak dapat diakses oleh JavaScript di browser (mencegah XSS attack).

9.3 Perlindungan Rute Admin

Semua rute admin dilindungi middleware requireAdmin:

function requireAdmin(req, res, next) {
  if (!req.session.adminId) return res.redirect('/admin/login');
  next();
}

Jika seseorang mencoba mengakses /admin/dashboard tanpa login, mereka langsung diarahkan ke halaman login — bukan mendapat error atau akses halaman.

9.4 Privasi Data Pengunjung

Sistem analytics EdukASI Genre dirancang dengan mengedepankan privasi pengunjung:

IP tidak disimpan langsung — Alamat IP pengunjung di-hash menggunakan SHA-256 sebelum disimpan. Hash ini tidak bisa di-reverse untuk mendapatkan IP asli.
Tambahan salt — Hash menggunakan salt unik untuk mencegah rainbow table attack.
Hasil: Sistem dapat menghitung pengunjung unik tanpa mengetahui siapa mereka sebenarnya.

// Implementasi di app.js
const ipHash = crypto
  .createHash('sha256')
  .update(ip + 'edukasi-genre')  // salt unik
  .digest('hex')
  .slice(0, 16);                  // dipotong 16 karakter

9.5 Proteksi Endpoint API

Endpoint data sensitif dilindungi dari akses publik:

/admin/* — Semua rute admin diproteksi session.
/quiz/data — Diblokir di robots.txt dari indexing.
/quiz/submit — Hanya menerima POST request (tidak bisa diakses GET langsung).

BAB X

ANALYTICS & PEMANTAUAN AKTIVITAS

10.1 Sistem Analytics Internal (Custom + MongoDB)

EdukASI Genre memiliki sistem analytics sendiri yang terintegrasi langsung dengan database MongoDB. Ini berarti data sepenuhnya dimiliki dan dikontrol oleh DPPKBP3A, tanpa bergantung pada pihak ketiga.

Cara Kerja (Technical Flow):

Pengunjung membuka halaman publik
        ↓
Middleware res.on('finish') dipicu setelah response dikirim
        ↓
Cek: apakah response berhasil (status 200)?
        ↓ Ya
Ekstrak informasi:
  - Path URL yang dikunjungi
  - Referrer (dari mana datangnya)
  - User-Agent (browser & OS)
  - IP → Di-hash SHA-256 → ipHash (16 karakter)
  - Deteksi device: Mobile / Tablet / Desktop
        ↓
Simpan ke collection pageviews di MongoDB
(operasi async, tidak memperlambat halaman)
        ↓
Admin buka /admin/analytics → Data divisualisasikan

Keunggulan Sistem Internal:

Aspek	Keterangan
Kepemilikan Data	Data 100% milik instansi, tersimpan di MongoDB sendiri
Privasi	IP tidak tersimpan, hanya hashnya
Non-blocking	Pencatatan async, tidak memperlambat loading halaman
Customizable	Bisa dimodifikasi sesuai kebutuhan instansi
Gratis	Tidak ada biaya langganan pihak ketiga

10.2 Vercel Analytics (Siap Aktif di Produksi)

Selain sistem internal, website sudah mengintegrasikan Vercel Analytics — layanan analytics profesional dari Vercel yang memberikan data tambahan seperti Core Web Vitals dan performa halaman.

<!-- Sudah terpasang di setiap halaman publik -->
<script defer src="/_vercel/insights/script.js"></script>

Status: Script sudah terpasang. Data akan mengalir secara otomatis begitu website di-deploy ke Vercel. Dashboard tersedia di vercel.com/analytics.

10.3 Metrik Pemantauan

Metrik	Sumber	Tampil Di
Total tayangan	Analytics Internal	Admin Panel
Tayangan hari ini	Analytics Internal	Admin Panel
Tayangan 7 hari	Analytics Internal	Admin Panel
Pengunjung unik	Analytics Internal (IP hash)	Admin Panel
Tren 30 hari (grafik)	Analytics Internal	Admin Panel
Halaman terpopuler	Analytics Internal	Admin Panel
Distribusi perangkat	Analytics Internal (UA detection)	Admin Panel
Core Web Vitals	Vercel Analytics	Vercel Dashboard
Performa halaman	Vercel Analytics	Vercel Dashboard

BAB XI

RENCANA PENGEMBANGAN

11.1 Fitur yang Direncanakan (Fase 2)

Berdasarkan evaluasi kebutuhan awal dan umpan balik pengguna, berikut adalah fitur-fitur yang direncanakan untuk pengembangan selanjutnya:

Jangka Pendek (0–3 Bulan)

Fitur	Deskripsi	Prioritas
Custom Domain	Menggunakan domain resmi (misal: edukasigenre.bengkuluselatankab.go.id)	Tinggi
Upload Foto Langsung	Admin dapat upload foto dari komputer, bukan hanya URL	Tinggi
OG Image Dinamis	Gambar preview sosial media yang unik per halaman	Sedang
Pengumuman / Banner	Admin dapat menambah pengumuman/banner di beranda	Sedang
Halaman Kontak	Form kontak untuk remaja yang ingin konsultasi	Rendah

Jangka Menengah (3–6 Bulan)

Fitur	Deskripsi
Sertifikat Quiz	Remaja mendapat sertifikat digital setelah menyelesaikan quiz dengan nilai tertentu
Leaderboard Quiz	Papan peringkat peserta quiz untuk meningkatkan motivasi belajar
Video Edukasi	Embed video YouTube/Vimeo pendek di setiap materi untuk pembelajaran visual
Download Materi	Opsi download materi dalam format PDF
Google Analytics	Integrasi Google Analytics 4 untuk data yang lebih komprehensif

Jangka Panjang (6–12 Bulan)

Fitur	Deskripsi
Aplikasi Mobile	Versi mobile app (Android/iOS) menggunakan React Native
Sistem Notifikasi	Push notification untuk kegiatan dan materi baru
Forum Diskusi	Wadah tanya jawab antar remaja yang termoderasi
PIK-R Digital	Layanan konsultasi online dengan konselor Genre
Multi-bahasa	Dukungan bahasa daerah (Bahasa Bengkulu)

11.2 Skalabilitas Teknis

Website EdukASI Genre dibangun dengan pertimbangan skalabilitas:

Database Cloud — MongoDB Atlas dapat di-upgrade kapasitasnya tanpa perubahan kode.
Stateless Server — Server tidak menyimpan state lokal, sehingga bisa di-scale horizontal.
Session di Database — Session tersimpan di MongoDB, aman untuk multi-instance.
Static Assets di CDN — Dapat dipindahkan ke CDN untuk performa lebih baik.
Modular Codebase — Struktur MVC memudahkan penambahan fitur tanpa mengganggu yang sudah ada.

BAB XII

PENUTUP & KESIMPULAN

12.1 Kesimpulan

Website EdukASI Genre telah berhasil dibangun sebagai solusi digital yang komprehensif untuk mendukung Program Generasi Berencana (Genre) DPPKBP3A Kabupaten Bengkulu Selatan. Platform ini menjawab seluruh permasalahan yang diidentifikasi di awal:

Masalah	Solusi yang Diimplementasikan
Tidak ada platform digital resmi	Website lengkap dengan 5 halaman publik
Penyampaian materi tidak interaktif	Materi terstruktur + Quiz interaktif dengan umpan balik
Tidak ada evaluasi pemahaman	Sistem quiz 20+ soal dengan penilaian otomatis
Dokumentasi kegiatan tidak terpusat	Galeri kegiatan dengan kategori dan filter
Tidak bisa update konten mandiri	Panel admin lengkap tanpa keahlian teknis
Tidak ada data analitik	Sistem analytics dengan grafik dan statistik real-time
Tidak terindeks Google	SEO lengkap: meta tags, OG, JSON-LD, sitemap

Ringkasan Teknis Akhir:

Aspek	Detail
Platform	Node.js 20 + Express 4.18 + EJS
Database	MongoDB Atlas (Cloud NoSQL)
Halaman Publik	5 halaman utama
Panel Admin	7 modul manajemen
Model Database	7 collection MongoDB
Materi Edukasi	9 topik Genre
Quiz	20+ soal pilihan ganda
SEO	Meta tags + OG + Twitter Card + JSON-LD + Sitemap + Robots.txt
Analytics	Custom MongoDB + Vercel Analytics (siap)
Keamanan	Bcrypt + Session + IP Hashing + Route Protection
Responsif	Mobile-first, optimal di semua ukuran layar

12.2 Rekomendasi

Untuk memaksimalkan dampak platform EdukASI Genre, berikut rekomendasi yang dapat segera ditindaklanjuti:

Daftarkan ke Google Search Console — Setelah website memiliki domain resmi, daftarkan sitemap ke Google Search Console agar Google lebih cepat mengindeks semua halaman.
Gunakan Custom Domain Resmi — Domain dengan format *.bengkuluselatankab.go.id akan meningkatkan kepercayaan pengguna dan nilai SEO.
Lengkapi Konten Database — Pastikan semua 9 topik materi terisi lengkap dengan konten berkualitas dan fakta yang terverifikasi dari sumber resmi (BKKBN, Kemenkes, BNN).
Aktifkan di Sosial Media — Bagikan link website di semua kanal sosial media DPPKBP3A agar jangkauan lebih luas. Preview sosial media (OG) sudah siap.
Sosialisasikan ke Sekolah — Distribusikan QR Code yang mengarah ke website kepada sekolah-sekolah di Bengkulu Selatan.
Rutin Update Konten — Update kegiatan terbaru, tambah soal quiz, dan perbarui materi secara berkala untuk menjaga engagement pengunjung.
Pantau Analytics Mingguan — Manfaatkan panel analytics setiap minggu untuk memahami halaman mana yang paling banyak dikunjungi dan sesuaikan strategi konten.

12.3 Penutup

Platform EdukASI Genre merupakan wujud nyata komitmen DPPKBP3A Kabupaten Bengkulu Selatan dalam bertransformasi digital demi menjangkau lebih banyak remaja dengan informasi yang tepat, akurat, dan mudah dipahami. Di era digital ini, remaja tidak lagi hanya bisa dijangkau melalui pendekatan konvensional — mereka ada di internet, dan program Genre pun harus hadir di sana.

Dengan dibangunnya platform ini, diharapkan:

Remaja Kabupaten Bengkulu Selatan memiliki akses mudah ke informasi Genre yang berkualitas.
Program BKKBN semakin dikenal dan dipahami oleh masyarakat luas.
DPPKBP3A Kabupaten Bengkulu Selatan menjadi contoh implementasi digitalisasi program Genre yang dapat direplikasi oleh kabupaten lain.

"Remaja Berpengetahuan, Masa Depan Terencana."

LAMPIRAN

Lampiran A: Daftar Rute (URL) Website

Rute	Metode	Deskripsi	Akses
`/`	GET	Halaman Beranda	Publik
`/materi`	GET	Redirect ke materi pertama	Publik
`/materi/:id`	GET	Detail materi per topik	Publik
`/quiz`	GET	Halaman landing quiz	Publik
`/quiz/data`	GET	Data soal quiz (JSON API)	Publik
`/quiz/submit`	POST	Kirim & nilai jawaban quiz	Publik
`/kegiatan`	GET	Halaman kegiatan & Duta Genre	Publik
`/Bengkulu-Selatan`	GET	Profil instansi	Publik
`/sitemap.xml`	GET	Sitemap dinamis	Publik
`/robots.txt`	GET	Instruksi mesin pencari	Publik
`/admin/login`	GET/POST	Login admin	Terbatas
`/admin/dashboard`	GET	Dashboard admin	Admin
`/admin/analytics`	GET	Halaman analytics	Admin
`/admin/analytics/clear`	POST	Hapus data lama	Admin
`/admin/kegiatan`	GET	Daftar kegiatan	Admin
`/admin/kegiatan/tambah`	GET/POST	Tambah kegiatan	Admin
`/admin/kegiatan/:id/edit`	GET/POST	Edit kegiatan	Admin
`/admin/kegiatan/:id/hapus`	POST	Hapus kegiatan	Admin
`/admin/duta`	GET	Daftar Duta Genre	Admin
`/admin/duta/tambah`	GET/POST	Tambah Duta Genre	Admin
`/admin/duta/:id/edit`	GET/POST	Edit Duta Genre	Admin
`/admin/duta/:id/hapus`	POST	Hapus Duta Genre	Admin
`/admin/materi`	GET	Daftar materi	Admin
`/admin/materi/tambah`	GET/POST	Tambah materi	Admin
`/admin/materi/:id/edit`	GET/POST	Edit materi	Admin
`/admin/materi/:id/hapus`	POST	Hapus materi	Admin
`/admin/quiz`	GET	Daftar soal quiz	Admin
`/admin/quiz/tambah`	GET/POST	Tambah soal	Admin
`/admin/quiz/:id/edit`	GET/POST	Edit soal	Admin
`/admin/quiz/:id/hapus`	POST	Hapus soal	Admin
`/admin/settings`	GET/POST	Pengaturan situs	Admin

Lampiran B: Dependensi Lengkap

{
  "dependencies": {
    "bcryptjs": "^3.0.3",
    "connect-mongo": "^6.0.0",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-session": "^1.19.0",
    "method-override": "^3.0.0",
    "mongoose": "^9.6.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}

Lampiran C: Checklist Kesiapan Website

Dokumen ini disusun sebagai referensi teknis dan presentasi resmi Website EdukASI Genre — DPPKBP3A Kabupaten Bengkulu Selatan.

Versi Dokumen: 1.0 | Tanggal: Mei 2026

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

DOKUMENTASI RESMI

WEBSITE EDUKASI GENRE

Sistem Informasi Edukasi Generasi Berencana Berbasis Web

DPPKBP3A Kabupaten Bengkulu Selatan

DAFTAR ISI

BAB I

PENDAHULUAN

1.1 Latar Belakang

1.2 Identifikasi Masalah

1.3 Tujuan Pembangunan Website

Tujuan Umum

Tujuan Khusus

1.4 Manfaat

Bagi Remaja

Bagi DPPKBP3A Kabupaten Bengkulu Selatan

Bagi Program Genre Nasional (BKKBN)

Bagi Pembangunan Daerah

1.5 Ruang Lingkup

BAB II

PROFIL INSTANSI & PROGRAM

2.1 DPPKBP3A Kabupaten Bengkulu Selatan

Tugas Pokok dan Fungsi (Tupoksi)

2.2 Program BKKBN: Generasi Berencana (Genre)

Tiga Pilar Utama Genre (Triad KRR)

Media Implementasi Genre

2.3 Kabupaten Bengkulu Selatan

BAB III

GAMBARAN UMUM SISTEM

3.1 Deskripsi Website

3.2 Identitas Website

3.3 Target Pengguna

Pengguna Publik (Remaja & Masyarakat)

Pengguna Admin (Staf DPPKBP3A)

3.4 Prinsip Desain

3.5 Alur Penggunaan Website (User Journey)

BAB IV

FITUR DAN HALAMAN WEBSITE

4.1 Halaman Beranda (/)

Komponen Halaman Beranda:

a. Navigasi Bar

b. Section Hero

c. Section Tentang Program

d. Section Topik Edukasi

e. Section Program Genre

f. Section Quiz CTA

g. Footer

4.2 Halaman Materi Edukasi (/materi/:id)

Sembilan (9) Topik Materi Genre:

Fitur Halaman Materi:

Struktur Data Materi (per topik):

4.3 Halaman Quiz Interaktif (/quiz)

Cara Kerja Quiz:

Kategori Evaluasi Skor:

Struktur Data Soal Quiz:

4.4 Halaman Kegiatan & Dokumentasi (/kegiatan)

Kategori Kegiatan:

Fitur Halaman Kegiatan:

Profil Duta Genre:

4.5 Halaman Profil Instansi (/Bengkulu-Selatan)

Komponen Halaman:

a. Hero Section

b. Identitas Dinas

c. Tugas & Fungsi (Tupoksi)

d. Profil Kabupaten Bengkulu Selatan

e. Kontak & Informasi

f. Peta Lokasi Kantor

BAB V

SISTEM PANEL ADMIN

5.1 Gambaran Umum Panel Admin

5.2 Sistem Autentikasi

5.3 Fitur Manajemen Konten

a. Manajemen Kegiatan

b. Manajemen Duta Genre

c. Manajemen Materi Edukasi

d. Manajemen Soal Quiz

e. Pengaturan Situs

4.1 Halaman Beranda (`/`)

4.2 Halaman Materi Edukasi (`/materi/:id`)

4.3 Halaman Quiz Interaktif (`/quiz`)

4.4 Halaman Kegiatan & Dokumentasi (`/kegiatan`)

4.5 Halaman Profil Instansi (`/Bengkulu-Selatan`)

8.5 Sitemap XML Dinamis (`/sitemap.xml`)

8.6 Robots.txt (`/robots.txt`)