The latest articles on Forem by Aris Candra Muzaffar (@ariscandra). https://forem.com/ariscandra https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3877427%2Fb8a43761-8567-400e-8a5b-e4b0dada08c0.jpeg https://forem.com/ariscandra en Aris Candra Muzaffar Thu, 07 May 2026 13:13:30 +0000 https://forem.com/ariscandra/pegangan-3gpn https://forem.com/ariscandra/pegangan-3gpn <h1> Pegangan Breakdown Laman Big Golf </h1> <p>Dokumen ini dirapikan khusus untuk sesi tanya jawab penguji.<br> Fokus utamanya bukan cuma “route ke mana”, tapi juga “komponen ini pakai stack apa dan fungsinya untuk apa”.<br> Semua rujukan dibatasi ke <code>big-golf/</code>.</p> <h2> Ringkasan arsitektur satu napas </h2> <ul> <li>Entry request web ada di <code>big-golf/public/index.php</code> </li> <li>Router manual ada di <code>big-golf/config/router.php</code> </li> <li>Render halaman lewat layout tunggal <code>big-golf/views/layouts/utama.php</code> </li> <li>Pola MVC dipakai lewat <code>controllers/</code>, <code>models/</code>, dan <code>views/</code> </li> <li>Data utama diproses lewat MySQL PDO dari <code>big-golf/koneksi.php</code> </li> </ul> <h2> Peta stack per komponen global </h2> <h3> Navbar </h3> <ul> <li> <strong>Pakai apa:</strong> PHP partial + Bootstrap dropdown + Bootstrap Icons + CSS kustom + JS vanilla</li> <li> <strong>Dipakai untuk apa:</strong> render menu desktop dan mobile, state aktif menu, dan perubahan gaya saat scroll</li> <li> <strong>File bukti:</strong> <code>big-golf/views/partials/navbar.php</code>, <code>big-golf/public/assets/css/tema.css</code>, <code>big-golf/views/layouts/utama.php</code> </li> </ul> <h3> Footer </h3> <ul> <li> <strong>Pakai apa:</strong> PHP partial + Bootstrap utility + Bootstrap Icons + Vue 3 mini mount</li> <li> <strong>Dipakai untuk apa:</strong> quick links, ikon kontak, dan tahun dinamis di elemen footer</li> <li> <strong>File bukti:</strong> <code>big-golf/views/partials/footer.php</code>, <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/public/assets/css/tema.css</code> </li> </ul> <h3> Sistem layout umum </h3> <ul> <li> <strong>Pakai apa:</strong> Bootstrap CDN, Vue CDN, partial include, helper render</li> <li> <strong>Dipakai untuk apa:</strong> memastikan semua laman punya kerangka UI yang konsisten</li> <li> <strong>File bukti:</strong> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/config/bootstrap.php</code> </li> </ul> <h3> Form handling umum </h3> <ul> <li> <strong>Pakai apa:</strong> endpoint <code>aksi_*.php</code> + controller method + flash session</li> <li> <strong>Dipakai untuk apa:</strong> memisahkan alur GET halaman dan POST aksi data</li> <li> <strong>File bukti:</strong> <code>big-golf/public/aksi_kirim_ulasan.php</code>, <code>big-golf/public/aksi_kirim_kontak.php</code>, <code>big-golf/public/aksi_login_admin.php</code> </li> </ul> <h3> Keamanan umum </h3> <ul> <li> <strong>Pakai apa:</strong> CSRF token, <code>hash_equals</code>, session hardening, <code>password_verify</code>, <code>htmlspecialchars</code> </li> <li> <strong>Dipakai untuk apa:</strong> menahan request palsu, mengamankan autentikasi admin, dan mencegah XSS pada output</li> <li> <strong>File bukti:</strong> <code>big-golf/controllers/AdminAuthController.php</code>, <code>big-golf/controllers/UlasanController.php</code>, <code>big-golf/config/bootstrap.php</code>, <code>big-golf/views/ulasan/halaman.php</code> </li> </ul> <h2> Breakdown per laman dan komponen internalnya </h2> <h2> 1) Beranda (<code>/</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/</code> </li> <li>Controller: <code>big-golf/controllers/BerandaController.php</code> (<code>tampil</code>)</li> <li>View utama: <code>big-golf/views/beranda/index.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Hero</strong> <ul> <li>Pakai HTML + CSS tema untuk visual utama dan CTA</li> <li>Dipakai untuk menyampaikan value cepat di layar pertama</li> <li>Bukti: <code>big-golf/views/beranda/index.php</code>, <code>big-golf/public/assets/css/tema.css</code> </li> </ul> </li> <li> <strong>Section ulasan ringkas</strong> <ul> <li>Pakai PHP render data + JS interaksi ulasan + modal Bootstrap</li> <li>Dipakai untuk preview social proof tanpa pindah halaman</li> <li>Bukti: <code>big-golf/public/assets/js/beranda-ulasan.js</code>, <code>big-golf/views/partials/ulasan/modal_tulis.php</code> </li> </ul> </li> <li> <strong>Section lokasi</strong> <ul> <li>Pakai Google Maps iframe + animasi ringan saat masuk viewport</li> <li>Dipakai untuk mempercepat user memahami letak bisnis</li> <li>Bukti: <code>big-golf/views/beranda/index.php</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Beranda kami pakai kombinasi server render untuk konten inti dan JS ringan untuk interaksi. Jadi cepat dimuat, tapi tetap terasa hidup.”</p> <h2> 2) Tentang (<code>/tentang</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/tentang</code> </li> <li>Controller: <code>big-golf/controllers/TentangController.php</code> (<code>tampil</code>)</li> <li>View: <code>big-golf/views/tentang/index.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Timeline sejarah</strong> <ul> <li>Pakai script vanilla di view untuk pergantian titik timeline</li> <li>Dipakai agar narasi profil tidak monoton</li> <li>Bukti: <code>big-golf/views/tentang/index.php</code> </li> </ul> </li> <li> <strong>Layout konten</strong> <ul> <li>Pakai Bootstrap grid dan utility class</li> <li>Dipakai untuk menjaga hierarki konten tetap rapi di mobile dan desktop</li> <li>Bukti: <code>big-golf/views/tentang/index.php</code>, <code>big-golf/views/layouts/utama.php</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Laman Tentang sengaja lebih ringan dari sisi data. Fokusnya storytelling, jadi stack kami pakai untuk pengalaman baca yang enak.”</p> <h2> 3) Fasilitas (<code>/fasilitas</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/fasilitas</code> </li> <li>Controller: <code>big-golf/controllers/FasilitasController.php</code> (<code>tampil</code>)</li> <li>View: <code>big-golf/views/fasilitas/index.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Tabel paket</strong> <ul> <li>Pakai tabel Bootstrap</li> <li>Dipakai agar informasi harga cepat dipindai</li> <li>Bukti: <code>big-golf/views/fasilitas/index.php</code> </li> </ul> </li> <li> <strong>Card fasilitas pendukung</strong> <ul> <li>Pakai card Bootstrap + CSS tema + efek reveal</li> <li>Dipakai untuk menambah konteks layanan tanpa bikin halaman berat</li> <li>Bukti: <code>big-golf/views/fasilitas/index.php</code>, <code>big-golf/public/assets/css/tema.css</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Di Fasilitas, Bootstrap kami pakai bukan sekadar gaya, tapi buat menata informasi harga dan layanan supaya cepat dibaca pengunjung.”</p> <h2> 4) Galeri (<code>/galeri</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/galeri</code> </li> <li>Controller: <code>big-golf/controllers/GaleriController.php</code> (<code>tampil</code>)</li> <li>View: <code>big-golf/views/galeri/index.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Grid galeri</strong> <ul> <li>Pakai server render URL gambar + CSS galeri</li> <li>Dipakai agar konten visual tetap konsisten dan mudah dikelola</li> <li>Bukti: <code>big-golf/controllers/GaleriController.php</code>, <code>big-golf/views/galeri/index.php</code> </li> </ul> </li> <li> <strong>Lightbox</strong> <ul> <li>Pakai JavaScript vanilla dan elemen dialog</li> <li>Dipakai untuk pengalaman lihat foto yang lebih fokus</li> <li>Bukti: <code>big-golf/public/assets/js/galeri.js</code> </li> </ul> </li> <li> <strong>Proxy aset</strong> <ul> <li>Pakai script aset endpoint</li> <li>Dipakai untuk jalur akses gambar yang konsisten dari web root</li> <li>Bukti: <code>big-golf/public/galeri-aset.php</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Galeri kami mengutamakan UX lihat foto. Makanya ada lightbox, navigasi keyboard, dan kontrol state supaya nyaman dipakai.”</p> <h2> 5) Lokasi dan Kontak (<code>/lokasi-kontak</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/lokasi-kontak</code> </li> <li>Controller tampil: <code>big-golf/controllers/LokasiKontakController.php</code> (<code>tampil</code>)</li> <li>Controller submit: <code>big-golf/controllers/LokasiKontakController.php</code> (<code>prosesKirimForm</code>)</li> <li>Endpoint POST: <code>big-golf/public/aksi_kirim_kontak.php</code> </li> <li>View: <code>big-golf/views/lokasi_kontak/index.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Map dan informasi lokasi</strong> <ul> <li>Pakai iframe map + layout Bootstrap</li> <li>Dipakai untuk memberikan konteks lokasi tanpa langkah tambahan</li> <li>Bukti: <code>big-golf/views/lokasi_kontak/index.php</code> </li> </ul> </li> <li> <strong>Form kontak</strong> <ul> <li>Pakai validasi server-side dengan util validator</li> <li>Dipakai supaya data masuk bersih sebelum diproses</li> <li>Bukti: <code>big-golf/lib/InputValidator.php</code>, <code>big-golf/controllers/LokasiKontakController.php</code> </li> </ul> </li> <li> <strong>Redirect kanal komunikasi</strong> <ul> <li>Pakai URL builder ke WA</li> <li>Dipakai untuk alur kontak cepat, sesuai kebutuhan bisnis walk in</li> <li>Bukti: <code>big-golf/controllers/LokasiKontakController.php</code>, <code>big-golf/config/url_publik.php</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Laman ini titik konversi utama. User dapat info lokasi dan langsung lanjut komunikasi lewat alur form yang tervalidasi.”</p> <h2> 6) Ulasan (<code>/ulasan</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route list: <code>/ulasan</code> </li> <li>Route vote: <code>/ulasan/vote</code> </li> <li>Controller: <code>big-golf/controllers/UlasanController.php</code> (<code>tampilDaftar</code>, <code>kirimVote</code>, <code>simpanBaru</code>)</li> <li>Endpoint kirim ulasan: <code>big-golf/public/aksi_kirim_ulasan.php</code> </li> <li>View: <code>big-golf/views/ulasan/halaman.php</code> </li> <li>Model: <code>big-golf/models/UlasanModel.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>List ulasan</strong> <ul> <li>Pakai query model dengan filter dan sorting</li> <li>Dipakai supaya data publik hanya menampilkan status <code>disetujui</code> </li> <li>Bukti: <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/views/ulasan/halaman.php</code> </li> </ul> </li> <li> <strong>Vote helpful</strong> <ul> <li>Pakai endpoint POST + CSRF + validasi input integer</li> <li>Dipakai untuk interaksi user yang tetap aman</li> <li>Bukti: <code>big-golf/controllers/UlasanController.php</code> </li> </ul> </li> <li> <strong>Modal kirim ulasan</strong> <ul> <li>Pakai Bootstrap modal + JS bintang rating</li> <li>Dipakai untuk menurunkan friksi input user</li> <li>Bukti: <code>big-golf/views/partials/ulasan/modal_tulis.php</code>, <code>big-golf/public/assets/js/ulasan-modal.js</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Di laman Ulasan, stack backend kami kerja untuk kualitas data, dan stack frontend kami kerja untuk membuat pengisian ulasan tetap gampang.”</p> <h2> 7) Login Admin (<code>/login.php</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Entry GET: <code>big-golf/public/login.php</code> </li> <li>Controller form: <code>big-golf/controllers/AdminAuthController.php</code> (<code>tampil_form_login</code>)</li> <li>Endpoint POST: <code>big-golf/public/aksi_login_admin.php</code> </li> <li>Controller proses: <code>big-golf/controllers/AdminAuthController.php</code> (<code>proses_login</code>)</li> <li>View: <code>big-golf/views/admin/login.php</code> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Form login</strong> <ul> <li>Pakai Bootstrap form</li> <li>Dipakai untuk UI sederhana yang mudah dipakai admin non teknis</li> </ul> </li> <li> <strong>Verifikasi kredensial</strong> <ul> <li>Pakai <code>password_verify</code> pada hash DB</li> <li>Dipakai untuk keamanan password</li> </ul> </li> <li> <strong>Anti brute force dasar</strong> <ul> <li>Pakai counter session dan lock waktu singkat</li> <li>Dipakai untuk membatasi percobaan gagal berulang</li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Login admin tidak cuma cek password, tapi juga dilapisi CSRF, lock percobaan gagal, dan regenerasi session ID.”</p> <h2> 8) Dashboard Admin (<code>/admin/dashboard</code>) </h2> <p><strong>Route dan alur</strong></p> <ul> <li>Route: <code>/admin/dashboard</code> </li> <li>Controller: <code>big-golf/controllers/AdminAuthController.php</code> (<code>dashboard</code>)</li> <li>View: <code>big-golf/views/admin/dashboard.php</code> </li> <li>Endpoint aksi moderasi: <ul> <li><code>big-golf/public/aksi_setujui_ulasan.php</code></li> <li><code>big-golf/public/aksi_sembunyikan_ulasan.php</code></li> <li><code>big-golf/public/aksi_kembalikan_menunggu_ulasan.php</code></li> <li><code>big-golf/public/aksi_edit_ulasan.php</code></li> <li><code>big-golf/public/aksi_hapus_ulasan.php</code></li> </ul> </li> </ul> <p><strong>Komponen dan penerapan stack</strong></p> <ul> <li> <strong>Daftar antrian ulasan</strong> <ul> <li>Pakai query model terparameter</li> <li>Dipakai untuk menampilkan item yang harus dimoderasi</li> <li>Bukti: <code>big-golf/models/UlasanModel.php</code> </li> </ul> </li> <li> <strong>Aksi moderasi</strong> <ul> <li>Pakai POST endpoint terpisah + CSRF moderasi</li> <li>Dipakai supaya alur audit dan kontrol status lebih jelas</li> <li>Bukti: <code>big-golf/controllers/AdminAuthController.php</code> </li> </ul> </li> <li> <strong>Audit trail</strong> <ul> <li>Pakai log moderasi di model saat update status</li> <li>Dipakai untuk jejak perubahan data</li> <li>Bukti: <code>big-golf/models/UlasanModel.php</code> </li> </ul> </li> </ul> <p><strong>Kalimat siap ucap</strong><br> “Dashboard kami sengaja dibuat fokus. Admin tinggal moderasi, sistem yang menjaga validasi status, token, dan log aksi.”</p> <h2> Cheat sheet cepat saat penguji nanya stack </h2> <ul> <li> <strong>“Navbar kalian pakai apa”</strong> Jawab: “<code>views/partials/navbar.php</code> pakai Bootstrap dropdown dan icon, styling di <code>public/assets/css/tema.css</code>, perilaku scroll di script layout.”</li> <li> <strong>“Footer kenapa ada Vue”</strong> Jawab: “Kami pakai Vue mini untuk tahun dinamis di footer, jadi Vue tidak dipakai berlebihan.”</li> <li> <strong>“Galeri ini library apa”</strong> Jawab: “Lightbox dibuat dengan JavaScript vanilla di <code>public/assets/js/galeri.js</code>, bukan plugin berat.”</li> <li> <strong>“Form kontak backendnya apa”</strong> Jawab: “POST ke <code>aksi_kirim_kontak.php</code>, diproses <code>LokasiKontakController</code>, divalidasi <code>InputValidator</code>.”</li> <li> <strong>“Moderasi aman dari request palsu”</strong> Jawab: “Aksi dashboard wajib POST plus token CSRF dan cek session admin.”</li> </ul> <h2> Gate dokumen </h2> <ul> <li>Spesifikasi stack per komponen: terpenuhi</li> <li>Mapping route, controller, view, dan endpoint aksi: terpenuhi</li> <li>Bahasa sudah dinaturalkan untuk kebutuhan lisan sidang: terpenuhi</li> <li>Rujukan file di luar <code>big-golf/</code>: tidak ada</li> </ul> <p><strong>Status: LULUS</strong></p> architecture backend php webdev Aris Candra Muzaffar Thu, 07 May 2026 13:12:52 +0000 https://forem.com/ariscandra/bank-soal-pbw-k16 https://forem.com/ariscandra/bank-soal-pbw-k16 <h1> Bank Pertanyaan Penguji Big Golf </h1> <p>Dokumen ini versi upgrade untuk latihan sidang.<br> Isi pertanyaan dibuat lebih lebar, dari konsep dasar sampai keputusan teknis yang bisa ditanya mendadak.<br> Semua rujukan file hanya dari <code>big-golf/</code>.</p> <h2> Cara pakai biar tidak kaku </h2> <ul> <li>Jawab dulu 20 detik dengan pola konsep, alasan, bukti file</li> <li>Kalau penguji minta detail, baru masuk ke alur kode</li> <li>Jangan buru buru buka banyak file</li> <li>Buka satu file yang paling relevan, jelaskan dulu konteksnya</li> </ul> <h2> Ringkasan inti yang harus nempel di kepala </h2> <ul> <li>Arsitektur pakai PHP native dengan pola MVC ringan</li> <li>Routing ditangani manual di <code>big-golf/config/router.php</code> </li> <li>UI pakai Bootstrap 5 dan styling kustom di <code>big-golf/public/assets/css/tema.css</code> </li> <li>Vue dipakai tipis untuk interaksi kecil, bukan sebagai SPA penuh</li> <li>Data ulasan diproses via PDO prepared statements</li> <li>Area admin diamankan dengan session auth, CSRF, dan verifikasi password hash</li> </ul> <h2> A. Konsep dasar web dan stack </h2> <h3> 1) Kenapa pilih PHP native </h3> <p><strong>Jawaban singkat</strong><br><br> Kami sengaja pakai PHP native karena scope proyek jelas dan instruksi akademik memang mendorong itu. Dengan struktur MVC, kode tetap rapi meski tidak memakai framework besar.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/index.php</code>, <code>big-golf/config/router.php</code>, <code>big-golf/controllers/</code></p> <h3> 2) Kapan Bootstrap membantu paling terasa </h3> <p><strong>Jawaban singkat</strong><br><br> Bootstrap membantu di grid, form, button, modal, dan utilitas responsif. Ini bikin tim bisa fokus ke alur bisnis tanpa mengulang CSS dasar dari nol.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/views/admin/login.php</code></p> <h3> 3) Kenapa masih pakai CSS kustom kalau sudah ada Bootstrap </h3> <p><strong>Jawaban singkat</strong><br><br> Bootstrap dipakai sebagai fondasi komponen. Identitas visual proyek tetap kami bentuk di <code>tema.css</code> supaya tidak terasa template generik.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/assets/css/tema.css</code></p> <h3> 4) Vue dipakai di mana dan buat apa </h3> <p><strong>Jawaban singkat</strong><br><br> Vue dipakai tipis untuk kebutuhan interaksi kecil seperti mount tahun footer. Jadi penggunaannya hemat, tidak over engineering.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/views/partials/footer.php</code></p> <h3> 5) Kenapa tidak dijadikan SPA sekalian </h3> <p><strong>Jawaban singkat</strong><br><br> Kebutuhan aplikasi ini lebih cocok server rendered pages dengan interaksi lokal. Pendekatan itu lebih sederhana, cepat dijelaskan saat sidang, dan pas untuk scope company profile.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/config/router.php</code></p> <h3> 6) Apa nilai tambah arsitektur MVC di proyek ini </h3> <p><strong>Jawaban singkat</strong><br><br> MVC memudahkan pemisahan tanggung jawab. View fokus tampilan, controller fokus alur request, model fokus data.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/UlasanController.php</code>, <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/views/ulasan/halaman.php</code></p> <h2> B. Arsitektur request dan route </h2> <h3> 7) Alur request dari browser sampai HTML jadi apa </h3> <p><strong>Jawaban singkat</strong><br><br> Request masuk ke <code>public/index.php</code>, diteruskan ke router, lalu controller memilih view. Data yang perlu diambil dipanggil dari model sebelum render.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/index.php</code>, <code>big-golf/config/router.php</code>, <code>big-golf/config/bootstrap.php</code></p> <h3> 8) Kenapa route admin dipisah dengan endpoint aksi </h3> <p><strong>Jawaban singkat</strong><br><br> Kami pisahkan supaya alur GET halaman dan POST mutasi data tidak campur. Ini bikin kontrol keamanan dan audit lebih jelas.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code>, <code>big-golf/public/aksi_setujui_ulasan.php</code></p> <h3> 9) Route publik apa saja yang paling penting dihafal </h3> <p><strong>Jawaban singkat</strong><br><br> Yang wajib hafal adalah <code>/</code>, <code>/tentang</code>, <code>/fasilitas</code>, <code>/galeri</code>, <code>/lokasi-kontak</code>, <code>/ulasan</code>, <code>/admin/dashboard</code>. Daftar ini biasanya muncul saat penguji cek cakupan fitur.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code></p> <h3> 10) Kenapa tidak pakai dynamic routing </h3> <p><strong>Jawaban singkat</strong><br><br> Karena kebutuhan route masih terbatas dan stabil. Route statis membuat alur lebih mudah diuji dan minim kompleksitas.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code></p> <h3> 11) Apa fungsi helper render halaman </h3> <p><strong>Jawaban singkat</strong><br><br> Helper render dipakai untuk konsistensi layout, data title, dan include partial umum. Jadi tidak perlu copy render logic di banyak controller.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/bootstrap.php</code></p> <h2> C. Frontend dan UI detail komponen </h2> <h3> 12) Navbar pakai stack apa </h3> <p><strong>Jawaban singkat</strong><br><br> Navbar dirender dari partial PHP, interaksi mobile pakai dropdown Bootstrap, icon pakai Bootstrap Icons, dan gaya visual disetel di <code>tema.css</code>.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/partials/navbar.php</code>, <code>big-golf/public/assets/css/tema.css</code></p> <h3> 13) Footer pakai stack apa </h3> <p><strong>Jawaban singkat</strong><br><br> Footer dibangun dari partial PHP dengan utility Bootstrap, icon links, dan mini mount Vue untuk tahun dinamis. Ini contoh penggunaan Vue yang proporsional.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/partials/footer.php</code>, <code>big-golf/views/layouts/utama.php</code></p> <h3> 14) Lightbox galeri pakai apa </h3> <p><strong>Jawaban singkat</strong><br><br> Lightbox digerakkan JavaScript vanilla, bukan library tambahan besar. Ini cukup untuk navigasi foto dan tetap ringan.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/assets/js/galeri.js</code>, <code>big-golf/views/galeri/index.php</code></p> <h3> 15) Modal tulis ulasan pakai apa </h3> <p><strong>Jawaban singkat</strong><br><br> Modal memakai komponen Bootstrap, form dirender dari partial, dan interaksi bintang ditangani script JS khusus.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/partials/ulasan/modal_tulis.php</code>, <code>big-golf/public/assets/js/ulasan-modal.js</code></p> <h3> 16) Kenapa tetap pakai inline script di beberapa laman </h3> <p><strong>Jawaban singkat</strong><br><br> Untuk interaksi yang benar benar lokal pada satu halaman, inline script bisa lebih praktis dan mudah ditelusuri saat debugging. Selama tetap terkontrol, ini masih valid.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/tentang/index.php</code>, <code>big-golf/views/fasilitas/index.php</code></p> <h3> 17) Bagaimana responsivitas dijaga </h3> <p><strong>Jawaban singkat</strong><br><br> Responsivitas dijaga lewat grid Bootstrap, utility class, dan tuning CSS tema. Targetnya supaya konten tetap terbaca rapi di mobile sampai desktop.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/public/assets/css/tema.css</code></p> <h2> D. Backend dan alur bisnis </h2> <h3> 18) Alur kirim ulasan dari user ke database </h3> <p><strong>Jawaban singkat</strong><br><br> User kirim form ke endpoint aksi, controller validasi input, lalu model simpan ke tabel ulasan dengan status awal menunggu. Data baru tampil ke publik setelah moderasi admin.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/aksi_kirim_ulasan.php</code>, <code>big-golf/controllers/UlasanController.php</code>, <code>big-golf/models/UlasanModel.php</code></p> <h3> 19) Alur vote ulasan di-handle di mana </h3> <p><strong>Jawaban singkat</strong><br><br> Vote masuk lewat route <code>/ulasan/vote</code>, lalu controller memvalidasi payload dan model melakukan update terparameter. Ini menjaga jalur vote tetap aman dari input liar.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code>, <code>big-golf/controllers/UlasanController.php</code></p> <h3> 20) Kenapa contact form tidak langsung simpan DB </h3> <p><strong>Jawaban singkat</strong><br><br> Karena tujuan bisnisnya mengarahkan komunikasi ke WhatsApp. Jadi form lebih ke pre formatting pesan, bukan ticketing system.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/aksi_kirim_kontak.php</code>, <code>big-golf/controllers/LokasiKontakController.php</code></p> <h3> 21) Moderasi ulasan alurnya bagaimana </h3> <p><strong>Jawaban singkat</strong><br><br> Admin buka dashboard, pilih aksi setujui sembunyikan edit atau hapus, lalu endpoint POST memproses perubahan status lewat model. Setiap aksi utama disertai proteksi token.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/admin/dashboard.php</code>, <code>big-golf/public/aksi_setujui_ulasan.php</code>, <code>big-golf/models/UlasanModel.php</code></p> <h3> 22) Kenapa memakai endpoint <code>aksi_*.php</code> </h3> <p><strong>Jawaban singkat</strong><br><br> Pendekatan ini bikin jalur mutasi data sangat eksplisit dan mudah diaudit. Saat sidang pun lebih gampang dijelaskan endpoint mana yang melakukan apa.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/aksi_login_admin.php</code>, <code>big-golf/public/aksi_hapus_ulasan.php</code></p> <h2> E. Database dan data integrity </h2> <h3> 23) Kenapa memilih PDO </h3> <p><strong>Jawaban singkat</strong><br><br> PDO memberi prepared statement yang rapi dan konsisten untuk berbagai query. Ini memudahkan binding parameter dan mengurangi risiko SQL injection.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/koneksi.php</code>, <code>big-golf/models/UlasanModel.php</code></p> <h3> 24) Apa bukti query aman dari SQL injection </h3> <p><strong>Jawaban singkat</strong><br><br> Query model menggunakan <code>prepare</code>, <code>bindValue</code>, dan <code>execute</code>, bukan menyusun string SQL mentah dari input user.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/models/AdminPenggunaModel.php</code></p> <h3> 25) Status ulasan dipakai untuk apa </h3> <p><strong>Jawaban singkat</strong><br><br> Status dipakai untuk memisahkan data publik dan data antrian moderasi. Artinya kontrol kualitas konten tetap di tangan admin.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/views/ulasan/halaman.php</code></p> <h3> 26) Apa fungsi log moderasi </h3> <p><strong>Jawaban singkat</strong><br><br> Log moderasi dipakai sebagai jejak perubahan saat status ulasan diubah admin. Ini penting untuk audit internal.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/sql/skema.sql</code></p> <h3> 27) Bagaimana relasi tabel dijaga </h3> <p><strong>Jawaban singkat</strong><br><br> Skema dibuat dengan constraint dan indeks untuk mendukung integritas data dan performa query utama.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/sql/skema.sql</code></p> <h2> F. Security dan hardening </h2> <h3> 28) CSRF dipasang di mana saja </h3> <p><strong>Jawaban singkat</strong><br><br> CSRF ada di login, logout, moderasi admin, vote ulasan, kirim ulasan, dan form kontak. Token diverifikasi server side memakai <code>hash_equals</code>.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/AdminAuthController.php</code>, <code>big-golf/controllers/UlasanController.php</code>, <code>big-golf/controllers/LokasiKontakController.php</code></p> <h3> 29) Kenapa <code>hash_equals</code> penting </h3> <p><strong>Jawaban singkat</strong><br><br> <code>hash_equals</code> dipakai untuk perbandingan token yang lebih aman terhadap timing attack sederhana. Ini praktik standar saat verifikasi token.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/AdminAuthController.php</code></p> <h3> 30) Session hardening ada apa saja </h3> <p><strong>Jawaban singkat</strong><br><br> Session cookie disetel dengan <code>httponly</code> dan <code>samesite</code>, lalu session ID diregenerasi saat login. Ini mengurangi risiko pencurian atau fixation sesi.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/bootstrap.php</code>, <code>big-golf/controllers/AdminAuthController.php</code></p> <h3> 31) Mitigasi brute force login ada atau tidak </h3> <p><strong>Jawaban singkat</strong><br><br> Ada pembatasan berbasis percobaan gagal dan lock sementara. Ini belum kelas enterprise, tapi sudah cukup untuk baseline proyek akademik.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/AdminAuthController.php</code></p> <h3> 32) XSS dicegah bagaimana </h3> <p><strong>Jawaban singkat</strong><br><br> Output dinamis yang tampil di view di escape pakai <code>htmlspecialchars</code>. Jadi data user tidak diproses sebagai HTML aktif.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/ulasan/halaman.php</code>, <code>big-golf/views/admin/dashboard.php</code></p> <h3> 33) Kenapa validasi input tetap wajib walau ada CSRF </h3> <p><strong>Jawaban singkat</strong><br><br> CSRF melindungi asal request, bukan kualitas data. Validasi tetap wajib agar data konsisten dan aman diproses sistem.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/lib/InputValidator.php</code></p> <h2> G. QA, testing, dan maintainability </h2> <h3> 34) Bagian mana yang paling rawan regresi UI </h3> <p><strong>Jawaban singkat</strong><br><br> Biasanya navbar mobile, galeri lightbox, dan modal ulasan. Tiga area ini punya interaksi lebih banyak dibanding section statis.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/partials/navbar.php</code>, <code>big-golf/public/assets/js/galeri.js</code>, <code>big-golf/public/assets/js/ulasan-modal.js</code></p> <h3> 35) Bagaimana cara cepat smoke test setelah perubahan </h3> <p><strong>Jawaban singkat</strong><br><br> Buka route utama, cek form kontak, kirim ulasan dummy, lalu verifikasi moderasi dari dashboard admin. Itu sudah menutup jalur kritis publik dan admin.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code>, <code>big-golf/views/admin/dashboard.php</code></p> <h3> 36) Apa indikator quality yang kalian pakai </h3> <p><strong>Jawaban singkat</strong><br><br> Kami pakai indikator sederhana tapi konkret yaitu alur utama jalan, responsif dasar aman, input tervalidasi, dan konten publik terkurasi.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/controllers/UlasanController.php</code></p> <h3> 37) Kenapa struktur ini mudah dipelihara </h3> <p><strong>Jawaban singkat</strong><br><br> Karena alur file cukup jelas. Controller tahu ke model mana, view tahu layoutnya, dan endpoint aksi punya tanggung jawab tegas.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/</code>, <code>big-golf/models/</code>, <code>big-golf/views/</code></p> <h2> H. Performa dan pengalaman pengguna </h2> <h3> 38) Apa keputusan performa paling penting di frontend </h3> <p><strong>Jawaban singkat</strong><br><br> Kami menghindari framework berat di sisi client. Interaksi yang dibutuhkan ditangani script kecil yang fokus.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/assets/js/galeri.js</code>, <code>big-golf/public/assets/js/beranda-ulasan.js</code></p> <h3> 39) Kenapa gambar diakses lewat endpoint aset </h3> <p><strong>Jawaban singkat</strong><br><br> Agar jalur URL konsisten dengan web root dan lebih gampang dikontrol dari sisi server. Ini membantu menghindari masalah path saat deploy.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/galeri-aset.php</code>, <code>big-golf/public/lokasi-aset.php</code></p> <h3> 40) Bagaimana kalian menjaga interaksi tetap halus </h3> <p><strong>Jawaban singkat</strong><br><br> Kami batasi animasi pada bagian yang punya nilai UX jelas dan tetap sediakan fallback reduced motion. Fokusnya pengalaman nyaman, bukan efek berlebihan.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/assets/css/tema.css</code>, <code>big-golf/views/beranda/index.php</code></p> <h2> I. Deployment, operasi, dan reasoning produk </h2> <h3> 41) Kalau pindah server apa yang paling diperhatikan </h3> <p><strong>Jawaban singkat</strong><br><br> Yang paling penting adalah document root ke <code>public</code>, konfigurasi env database, dan URL publik Maps atau WA. Tiga ini kalau salah biasanya aplikasi jalan setengah.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/index.php</code>, <code>big-golf/.env</code>, <code>big-golf/config/url_publik.php</code></p> <h3> 42) Kenapa fitur reservasi tidak dibuat booking slot penuh </h3> <p><strong>Jawaban singkat</strong><br><br> Karena kebutuhan bisnis aktual mengarah ke walk in plus komunikasi WhatsApp. Jadi kami pilih solusi yang relevan, bukan fitur kompleks yang tidak terpakai.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/lokasi_kontak/index.php</code>, <code>big-golf/controllers/LokasiKontakController.php</code></p> <h3> 43) Kenapa admin dipusatkan untuk moderasi ulasan </h3> <p><strong>Jawaban singkat</strong><br><br> Karena alur bisnis butuh kontrol kualitas konten publik. Dengan moderasi terpusat, risiko konten tidak layak bisa ditekan.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/admin/dashboard.php</code>, <code>big-golf/models/UlasanModel.php</code></p> <h3> 44) Apa kompromi teknis terbesar di proyek ini </h3> <p><strong>Jawaban singkat</strong><br><br> Komprominya ada pada kesederhanaan arsitektur versus fitur enterprise. Kami pilih pondasi yang cukup kuat untuk scope akademik tanpa menambah beban kompleksitas.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/config/router.php</code>, <code>big-golf/controllers/AdminAuthController.php</code></p> <h3> 45) Kalau disuruh lanjut versi berikutnya, prioritasnya apa </h3> <p><strong>Jawaban singkat</strong><br><br> Prioritasnya test automation dasar, monitoring error yang lebih jelas, dan hardening login di level global bukan hanya session scoped.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/AdminAuthController.php</code>, <code>big-golf/views/admin/dashboard.php</code></p> <h2> J. Pertanyaan menjebak dan contoh jawaban aman </h2> <h3> 46) “Pakai Bootstrap berarti kalian tinggal copy template, ya” </h3> <p><strong>Jawaban aman</strong><br><br> Bootstrap kami pakai sebagai fondasi komponen, bukan jadi desain final. Identitas visual tetap kami bentuk sendiri di tema dan konten domain Big Golf.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/public/assets/css/tema.css</code>, <code>big-golf/views/beranda/index.php</code></p> <h3> 47) “Kalau native, pasti lebih tidak aman dari framework” </h3> <p><strong>Jawaban aman</strong><br><br> Yang menentukan aman atau tidak itu praktik implementasi. Di proyek ini kami pakai prepared statements, CSRF token, escaping output, dan session hardening.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/models/UlasanModel.php</code>, <code>big-golf/controllers/AdminAuthController.php</code></p> <h3> 48) “Kenapa tidak sekalian pakai React atau Next” </h3> <p><strong>Jawaban aman</strong><br><br> Untuk scope company profile plus moderasi ulasan, stack sekarang sudah pas dari sisi effort dan hasil. Kami memilih teknologi yang paling relevan, bukan paling ramai.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/views/layouts/utama.php</code>, <code>big-golf/config/router.php</code></p> <h3> 49) “Kalau ada CSRF, berarti pasti aman semua dong” </h3> <p><strong>Jawaban aman</strong><br><br> CSRF hanya salah satu lapisan. Tetap perlu validasi input, kontrol auth, dan output escaping agar perlindungannya lengkap.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/lib/InputValidator.php</code>, <code>big-golf/views/ulasan/halaman.php</code></p> <h3> 50) “Kenapa data kontak tidak disimpan database saja” </h3> <p><strong>Jawaban aman</strong><br><br> Karena target operasionalnya komunikasi langsung ke WhatsApp. Jadi kami pilih alur yang paling dipakai di lapangan.<br> <strong>Rujukan file</strong><br><br> <code>big-golf/controllers/LokasiKontakController.php</code></p> <h2> Tips delivery supaya terdengar natural </h2> <ul> <li>Pakai kalimat sederhana seperti menjelaskan ke partner tim</li> <li>Hindari jawaban hafalan panjang</li> <li>Kalau bingung, balik ke tiga kata kunci yaitu alasan, implementasi, dan bukti file</li> <li>Saat ditanya tajam, tenang dulu lalu jawab dari sudut kebutuhan bisnis dan keamanan teknis</li> </ul> <h2> File standby saat presentasi </h2> <ul> <li><code>big-golf/config/router.php</code></li> <li><code>big-golf/views/layouts/utama.php</code></li> <li><code>big-golf/views/partials/navbar.php</code></li> <li><code>big-golf/views/partials/footer.php</code></li> <li><code>big-golf/controllers/UlasanController.php</code></li> <li><code>big-golf/controllers/AdminAuthController.php</code></li> <li><code>big-golf/models/UlasanModel.php</code></li> <li><code>big-golf/lib/InputValidator.php</code></li> <li><code>big-golf/public/assets/css/tema.css</code></li> </ul> <h2> Gate dokumen </h2> <ul> <li>Pertanyaan diperluas lintas lingkup: terpenuhi</li> <li>Bahasa dibuat lebih natural untuk lisan sidang: terpenuhi</li> <li>Rujukan spesifik ke codebase: terpenuhi</li> <li>Rujukan di luar <code>big-golf/</code>: tidak ada</li> </ul> <p><strong>Status: LULUS</strong></p> architecture interview php webdev Aris Candra Muzaffar Tue, 05 May 2026 09:04:55 +0000 https://forem.com/ariscandra/skrip-presentasi-knn-2kh5 https://forem.com/ariscandra/skrip-presentasi-knn-2kh5 <h2> Judul Presentasi </h2> <p><strong>Jejak Digital Mahasiswa: Data Pribadi Kita Dipakai untuk Apa?</strong></p> <h2> Tujuan Presentasi (1 kalimat) </h2> <p>Membantu audiens memahami bahwa jejak digital itu nyata, bernilai, berisiko, dan bisa dikelola lewat kebiasaan sederhana.</p> <h2> Alokasi Waktu (Total 5 Menit) </h2> <ul> <li> <strong>Aris (Pembuka + hook):</strong> 0:00–0:50 </li> <li> <strong>Yudha (Konteks data):</strong> 0:50–1:40 </li> <li> <strong>Dewa (Risiko nyata):</strong> 1:40–2:35 </li> <li> <strong>Jabbar (Hak pengguna + UU PDP):</strong> 2:35–3:30 </li> <li> <strong>Pian (Solusi praktis + penutup CTA):</strong> 3:30–5:00</li> </ul> <h2> Skrip Lengkap (Siap Pakai) </h2> <h3> 1) Aris — Pembuka &amp; Interaksi Awal (0:00–0:50) </h3> <p><strong>Skrip:</strong></p> <blockquote> <p>Assalamu’alaikum, selamat [pagi/siang], teman-teman. </p> <p>Coba angkat tangan, siapa yang hari ini sudah buka minimal tiga aplikasi: chat, media sosial, sama marketplace? </p> <p>Oke, hampir semua, ya. Nah, tiap klik, tiap like, tiap lokasi yang kita izinkan, itu bukan aktivitas biasa aja. Itu semua ninggalin <strong>jejak digital</strong>. </p> <p>Pertanyaan intinya: <strong>data kita sebenarnya dipakai untuk apa?</strong> </p> <p>Dalam 5 menit ini, kami mau bahas tiga hal singkat: </p> <ol> <li>Seberapa besar paparan data kita,</li> <li>Risikonya buat mahasiswa,</li> <li>Dan kebiasaan sederhana supaya lebih aman.</li> </ol> </blockquote> <p><strong>Catatan delivery:</strong> </p> <ul> <li>Setelah “angkat tangan”, kasih jeda 2–3 detik, lihat audiens. </li> <li>Tone santai tapi tetap tegas.</li> </ul> <h3> 2) Yudha — Konteks Data (0:50–1:40) </h3> <p><strong>Skrip:</strong></p> <blockquote> <p>Kita mulai dari gambaran besarnya dulu. </p> <p>Menurut APJII 2024, pengguna internet di Indonesia sudah sekitar <strong>221 juta</strong>, dengan penetrasi sekitar <strong>79,5%</strong>. Artinya, mayoritas aktivitas kita sekarang memang terjadi di dunia maya. </p> <p>Dan kelompok usia muda, termasuk usia mahasiswa, adalah pengguna paling aktif. Jadi, topik ini bukan isu jauh—ini isu harian kita sendiri. </p> <p>Sekarang pertanyaan cepat: menurut kalian, data apa yang paling sering kita kasih ke aplikasi tanpa mikir panjang? </p> <p>Biasanya jawabannya: nomor HP, lokasi, kontak, bahkan kebiasaan belanja atau jam online. </p> <p>Dari sini kelihatan: makin praktis aplikasi, biasanya makin banyak data yang diminta.</p> </blockquote> <p><strong>Catatan delivery:</strong> </p> <ul> <li>Saat tanya audiens, ambil 1 jawaban spontan kalau ada. </li> <li>Kalau kelas pasif, langsung lanjut dengan “Biasanya jawabannya...”.</li> </ul> <h3> 3) Dewa — Dampak Nyata (1:40–2:35) </h3> <p><strong>Skrip:</strong></p> <blockquote> <p>Masalahnya bukan cuma “data terkumpul”, tapi <strong>data bisa bocor atau disalahgunakan</strong>. </p> <p>BSSN pernah menyampaikan bahwa dugaan insiden kebocoran data di Indonesia masih tinggi, dan sebagian besar menyasar layanan penting. </p> <p>Buat kita sebagai mahasiswa, dampaknya bisa langsung terasa: </p> <ul> <li>spam dan phishing makin personal, </li> <li>akun bisa diambil alih, </li> <li>sampai penyalahgunaan identitas untuk pinjol atau scam.</li> </ul> <p>Sampai sini, kebayang ya: jejak digital bukan sekadar teori, tapi dampaknya bisa langsung kena ke hidup kita.</p> </blockquote> <p><strong>Catatan delivery:</strong> </p> <ul> <li>Fokus ke bahasa awam, jangan terlalu legalistik. </li> <li>Hindari istilah teknis berlebihan.</li> </ul> <h3> 4) Jabbar — Hak Pengguna + UU PDP (2:35–3:30) </h3> <p><strong>Skrip:</strong></p> <blockquote> <p>Kabar baiknya, Indonesia sudah punya <strong>UU Pelindungan Data Pribadi, yaitu UU No. 27 Tahun 2022</strong>. </p> <p>Artinya, kita sebagai pemilik data punya hak yang jelas: </p> <ul> <li>berhak tahu data kita dipakai untuk apa, </li> <li>berhak minta perbaikan kalau data salah, </li> <li>dan berhak dapat notifikasi kalau ada kebocoran data.</li> </ul> <p>Jadi, posisinya jelas: kita bukan objek pasif. Kita punya hak, tapi kita juga perlu aktif menjaga data kita sendiri.</p> </blockquote> <p><strong>Catatan delivery:</strong> </p> <ul> <li>Sampaikan dengan tempo tenang, jangan terdengar seperti baca pasal hukum. </li> <li>Tekankan kata "hak" agar audiens merasa ini relevan buat dirinya.</li> </ul> <h3> 5) Pian — Solusi Praktis + Penutup Kuat (3:30–5:00) </h3> <p><strong>Skrip:</strong></p> <blockquote> <p>Penutup dari kami: jejak digital itu nggak bisa dihapus total, tapi bisa <strong>dikelola</strong>. </p> <p>Tiga kebiasaan simpel yang bisa langsung kita mulai:<br><br> <strong>Pertama</strong>, cek izin aplikasi sebelum klik “setuju”. Kalau minta akses yang nggak relevan, tolak.<br><br> <strong>Kedua</strong>, pakai password berbeda untuk akun penting dan aktifkan 2FA.<br><br> <strong>Ketiga</strong>, jangan asal unggah data pribadi—termasuk dokumen, tiket, atau info lokasi real-time. </p> <p>Inti presentasi kami satu kalimat:<br><br> <strong>Di era sistem informasi, yang paling berharga bukan cuma perangkat kita, tapi data diri kita.</strong> </p> <p>Terima kasih.</p> </blockquote> <p><strong>Catatan delivery:</strong> </p> <ul> <li>Tutup dengan tempo lebih lambat di kalimat inti. </li> <li>Setelah “terima kasih”, semua anggota mengangguk/step maju sedikit (kompak visual).</li> </ul> <h2> Cadangan Kalimat (Jika Dosen Tanya) </h2> <p>Gunakan jawaban singkat ini kalau ada pertanyaan mendadak.</p> <ul> <li> <strong>“Apa jejak digital pasti buruk?”</strong> Tidak. Jejak digital itu netral; bisa bermanfaat untuk personalisasi layanan, tapi jadi risiko kalau pengguna tidak sadar batas berbagi data.</li> <li> <strong>“Kenapa mahasiswa harus peduli sekarang?”</strong> Karena mahasiswa adalah pengguna digital paling aktif, jadi paling sering terpapar phishing, social engineering, dan penyalahgunaan data.</li> <li> <strong>“Solusi paling realistis satu apa?”</strong> Mulai dari audit izin aplikasi + aktifkan 2FA pada akun utama (email, kampus, keuangan).</li> </ul> <h2> Rujukan Data (untuk pegangan tim) </h2> <ul> <li> <a href="https://apjii.or.id/berita/d/apjii-jumlah-pengguna-internet-indonesia-tembus-221-juta-orang" rel="noopener noreferrer">APJII 2024: Pengguna internet Indonesia 221 juta, penetrasi 79,5%</a> </li> <li> <a href="https://www.antaranews.com/berita/3790086/bssn-55-persen-kebocoran-data-terjadi-pada-administrasi-pemerintah" rel="noopener noreferrer">ANTARA (kutipan BSSN): 207 dugaan insiden kebocoran data pada 2023</a> </li> <li><a href="https://peraturan.bpk.go.id/Details/229798/uu-no-27-tahun-2022" rel="noopener noreferrer">UU No. 27 Tahun 2022 tentang Pelindungan Data Pribadi (BPK)</a></li> </ul> cybersecurity data privacy socialmedia Aris Candra Muzaffar Fri, 01 May 2026 16:32:56 +0000 https://forem.com/ariscandra/bank-tanya-jawab-pengujian-j9m https://forem.com/ariscandra/bank-tanya-jawab-pengujian-j9m <h1> Bank Tanya Jawab Pengujian SaryPOS Berdasarkan Materi Praktikum </h1> <p>Dokumen ini disusun untuk membantu sesi tanya jawab saat pengujian aplikasi <strong>SaryPOS</strong>. Isi pertanyaan dan jawaban dirangkum dari materi:</p> <ol> <li><code>materi_praktikum/Pertemuan 1 Widget Dasar.pdf</code></li> <li><code>materi_praktikum/Pertemuan 2 State Management Dasar.pdf</code></li> <li><code>materi_praktikum/Modul 3 Navigation dan Data Flow Antar Halaman.pdf</code></li> <li><code>materi_praktikum/Modul 4 Supabase.pdf</code></li> <li><code>materi_praktikum/Pertemuan 5 Deployment App.pdf</code></li> </ol> <p>Tujuan dokumen ini adalah memberi jawaban yang mudah dipahami, tetap teknis, dan relevan dengan konteks aplikasi POS.</p> <h2> A. Pertanyaan Dasar Konsep Flutter dan Widget </h2> <h3> 1) Apa itu widget pada Flutter? </h3> <p>Widget adalah komponen penyusun antarmuka aplikasi. Hampir semua elemen visual di Flutter adalah widget, mulai dari teks, tombol, ikon, sampai seluruh halaman.</p> <h3> 2) Mengapa konsep widget penting pada SaryPOS? </h3> <p>Karena semua tampilan SaryPOS dibangun dari widget, seperti daftar produk, keranjang, tombol checkout, dan kartu ringkasan laporan.</p> <h3> 3) Apa perbedaan <code>StatelessWidget</code> dan <code>StatefulWidget</code>? </h3> <ul> <li> <code>StatelessWidget</code>: tampilan statis, tidak berubah setelah dibangun.</li> <li> <code>StatefulWidget</code>: tampilan dinamis, bisa berubah sesuai interaksi atau data.</li> </ul> <h3> 4) Kapan SaryPOS memakai <code>StatefulWidget</code>? </h3> <p>Saat tampilan harus berubah real-time, misalnya jumlah item keranjang, total harga, status proses transaksi, atau loading data.</p> <h3> 5) Kapan <code>StatelessWidget</code> lebih tepat? </h3> <p>Untuk komponen presentasi yang hanya menampilkan data tanpa mengelola perubahan internal, misalnya judul section, label, atau kartu informasi sederhana.</p> <h3> 6) Apa fungsi <code>Container</code> dalam UI POS? </h3> <p><code>Container</code> dipakai untuk pembungkus elemen agar mudah mengatur ukuran, warna, padding, margin, border, dan alignment.</p> <h3> 7) Apa fungsi <code>Row</code> dan <code>Column</code>? </h3> <ul> <li> <code>Row</code>: menyusun komponen horizontal.</li> <li> <code>Column</code>: menyusun komponen vertikal. Dalam POS, kombinasi keduanya dipakai untuk layout tombol aksi dan ringkasan transaksi.</li> </ul> <h3> 8) Apa beda <code>padding</code> dan <code>margin</code>? </h3> <ul> <li> <code>padding</code>: jarak di dalam komponen.</li> <li> <code>margin</code>: jarak antar komponen. Analogi: padding itu ruang di dalam kotak, margin itu jarak antar kotak.</li> </ul> <h3> 9) Mengapa pemilihan widget interaksi penting? </h3> <p>Karena memengaruhi kecepatan kasir dan meminimalkan salah tekan. Tombol aksi utama harus jelas terlihat, ukuran sentuh nyaman, dan responsif.</p> <h3> 10) Mengapa layout rapi penting dalam aplikasi kasir? </h3> <p>Karena kasir bekerja cepat. Layout yang rapi membuat input lebih cepat, kesalahan lebih sedikit, dan pengalaman pengguna lebih stabil saat jam sibuk.</p> <h2> B. Pertanyaan State Management Dasar </h2> <h3> 11) Apa itu state? </h3> <p>State adalah data yang dapat berubah selama aplikasi berjalan dan memengaruhi tampilan UI.</p> <h3> 12) Apa itu state management? </h3> <p>State management adalah cara mengelola perubahan state agar UI tetap sinkron dengan data terbaru.</p> <h3> 13) Apa bedanya Ephemeral State dan App State? </h3> <ul> <li>Ephemeral State: state lokal pada satu widget/halaman.</li> <li>App State: state global yang dipakai banyak bagian aplikasi.</li> </ul> <h3> 14) Contoh Ephemeral State di SaryPOS? </h3> <p>Nilai input pencarian produk, toggle filter sementara, atau status expand/collapse panel di satu halaman.</p> <h3> 15) Contoh App State di SaryPOS? </h3> <p>Data sesi pengguna, tema aplikasi, dan informasi peran owner atau karyawan yang memengaruhi banyak layar.</p> <h3> 16) Kapan menggunakan <code>setState()</code>? </h3> <p>Saat data lokal widget berubah dan perlu memicu rebuild UI pada widget tersebut.</p> <h3> 17) Apakah <code>setState()</code> cukup untuk semua kebutuhan? </h3> <p>Tidak selalu. Untuk aplikasi besar, state global lebih baik dikelola dengan pola yang lebih terstruktur agar mudah dipelihara.</p> <h3> 18) Mengapa state management penting untuk aplikasi POS? </h3> <p>Karena transaksi butuh akurasi real-time. Jika state berantakan, subtotal, stok, atau status transaksi bisa tidak konsisten.</p> <h3> 19) Apa risiko jika state tidak sinkron? </h3> <p>UI bisa menampilkan nilai lama, total salah hitung, atau aksi pengguna tidak tercermin di tampilan.</p> <h3> 20) Bagaimana menjelaskan state management dengan analogi sederhana? </h3> <p>State seperti papan skor pertandingan. Saat skor berubah, papan harus langsung diperbarui agar semua orang melihat data yang benar.</p> <h2> C. Pertanyaan Navigasi dan Data Flow Antar Halaman </h2> <h3> 21) Apa itu navigation? </h3> <p>Navigation adalah perpindahan antar halaman (screen) dalam aplikasi.</p> <h3> 22) Apa itu data flow antar halaman? </h3> <p>Data flow adalah proses mengirim data ke halaman tujuan dan menerima data balik ke halaman asal.</p> <h3> 23) Apa perbedaan navigasi native Flutter dan GetX? </h3> <ul> <li>Native Flutter memakai <code>Navigator</code> dan <code>BuildContext</code>.</li> <li>GetX menyediakan cara lebih ringkas untuk route, state, dan dependency. Pada SaryPOS, pendekatannya dapat bersifat hybrid sesuai kebutuhan modul.</li> </ul> <h3> 24) Apa fungsi <code>push</code> dalam alur POS? </h3> <p><code>push</code> membuka halaman baru tanpa menghapus halaman lama, misalnya dari daftar produk ke detail produk.</p> <h3> 25) Apa fungsi <code>pop</code>? </h3> <p><code>pop</code> menutup halaman aktif dan kembali ke halaman sebelumnya.</p> <h3> 26) Apa itu <code>off</code> (GetX)? </h3> <p><code>off</code> mengganti halaman saat ini dan menghapus satu halaman sebelumnya dari stack.</p> <h3> 27) Apa itu <code>offAll</code> (GetX)? </h3> <p><code>offAll</code> membersihkan seluruh stack dan menyisakan halaman tujuan, cocok setelah login sukses agar tidak kembali ke halaman auth.</p> <h3> 28) Bagaimana cara kirim data ke halaman detail? </h3> <p>Data dikirim lewat parameter constructor saat pindah halaman.</p> <h3> 29) Bagaimana mengembalikan data ke halaman asal? </h3> <p>Gunakan hasil balik saat <code>pop</code> atau <code>Get.back(result: ...)</code> lalu tangkap hasilnya di halaman pemanggil.</p> <h3> 30) Contoh skenario data flow di SaryPOS? </h3> <p>Halaman checkout membuka dialog diskon, dialog mengembalikan nilai diskon, lalu total pembayaran dihitung ulang di checkout.</p> <h3> 31) Mengapa manajemen stack penting? </h3> <p>Agar alur back navigation konsisten. Pengguna tidak boleh kembali ke layar yang seharusnya sudah selesai (misalnya layar login setelah masuk).</p> <h3> 32) Analogi sederhana stack navigasi? </h3> <p>Seperti tumpukan kertas: halaman baru ditaruh di atas (<code>push</code>), saat kembali kita ambil yang paling atas (<code>pop</code>).</p> <h2> D. Pertanyaan Supabase dan Integrasi ke Aplikasi </h2> <h3> 33) Apa itu Supabase? </h3> <p>Supabase adalah platform backend-as-a-service berbasis PostgreSQL yang menyediakan database, auth, storage, dan API siap pakai.</p> <h3> 34) Kenapa Supabase cocok untuk SaryPOS? </h3> <p>Karena mempercepat pengembangan backend tanpa membangun server dari nol, namun tetap kuat untuk CRUD data bisnis.</p> <h3> 35) Fitur Supabase apa yang paling relevan? </h3> <ul> <li>Database PostgreSQL</li> <li>Authentication</li> <li>Auto API</li> <li>Storage</li> <li>Realtime (opsional sesuai kebutuhan fitur)</li> </ul> <h3> 36) Data apa saja yang umum dikelola di Supabase untuk POS? </h3> <p>Data pengguna, produk, stok, transaksi penjualan, dan log aktivitas.</p> <h3> 37) Apa fungsi URL project Supabase? </h3> <p>Sebagai alamat endpoint agar aplikasi Flutter terhubung ke project backend yang benar.</p> <h3> 38) Apa fungsi anon/publishable key? </h3> <p>Sebagai kredensial client-side untuk akses aman yang tetap dibatasi oleh aturan auth dan RLS.</p> <h3> 39) Apa beda publishable key dan secret/service role key? </h3> <ul> <li>Publishable key: untuk aplikasi client.</li> <li>Secret/service role key: hak akses tinggi, hanya untuk server aman, tidak boleh disimpan di aplikasi publik.</li> </ul> <h3> 40) Kenapa tidak boleh menaruh service role key di aplikasi mobile? </h3> <p>Karena berisiko bocor lewat reverse engineering dan dapat membuka akses data berbahaya.</p> <h3> 41) Apa itu CRUD dalam konteks Supabase? </h3> <ul> <li>Create: tambah data</li> <li>Read: baca data</li> <li>Update: ubah data</li> <li>Delete: hapus/nonaktifkan data</li> </ul> <h3> 42) Contoh CRUD di SaryPOS? </h3> <p>Tambah produk baru, tampilkan daftar produk, ubah harga, dan hapus produk yang tidak lagi dijual.</p> <h3> 43) Apa itu RLS (Row Level Security)? </h3> <p>RLS adalah aturan akses level baris data untuk memastikan user hanya bisa mengakses data yang diizinkan.</p> <h3> 44) Kenapa RLS penting meskipun menu sudah disembunyikan? </h3> <p>Karena keamanan tidak boleh hanya mengandalkan UI. Pembatasan utama harus terjadi di backend.</p> <h3> 45) Contoh penerapan role owner vs karyawan di Supabase? </h3> <p>Owner bisa mengelola data strategis (produk, karyawan, laporan), karyawan fokus ke transaksi operasional sesuai izin.</p> <h3> 46) Apa yang dilakukan jika data tidak muncul saat demo? </h3> <p>Lakukan cek berurutan: status login, role user, policy RLS, query/filter, lalu koneksi project Supabase yang dipakai.</p> <h2> E. Pertanyaan Deployment Aplikasi Android </h2> <h3> 47) Persiapan minimum sebelum deployment? </h3> <p>Pastikan aplikasi stabil di debug, <code>flutter doctor</code> bersih, ikon aplikasi sudah disesuaikan, dan konfigurasi build benar.</p> <h3> 48) Mengapa <code>flutter doctor</code> penting sebelum build release? </h3> <p>Karena memastikan environment toolchain Android/Flutter siap, sehingga mengurangi risiko gagal build.</p> <h3> 49) Kenapa app icon dan app name perlu disesuaikan? </h3> <p>Agar aplikasi siap dipresentasikan atau didistribusikan secara profesional, bukan tampilan default template.</p> <h3> 50) Apa yang perlu dicek di konfigurasi Android sebelum rilis? </h3> <p><code>applicationId</code>, <code>versionCode</code>, <code>versionName</code>, permission yang diperlukan saja, dan label aplikasi.</p> <h3> 51) Kenapa pengujian release penting, bukan hanya debug? </h3> <p>Karena perilaku release bisa berbeda (optimasi, minify, konfigurasi env), jadi validasi final wajib dilakukan di mode release.</p> <h3> 52) Apa checklist uji cepat sebelum APK dibagikan? </h3> <p>Login berhasil, CRUD utama berjalan, transaksi selesai, data sinkron ke backend, logout aman, dan tidak ada crash.</p> <h2> F. Pertanyaan Integratif Khusus SaryPOS (Lintas Materi) </h2> <h3> 53) Bagaimana hubungan widget, state, dan navigation dalam satu alur transaksi? </h3> <p>Widget membentuk UI, state menyimpan perubahan data transaksi, navigation mengatur perpindahan layar. Ketiganya harus sinkron agar alur kasir lancar.</p> <h3> 54) Mengapa arsitektur yang rapi memudahkan pengujian? </h3> <p>Karena pemisahan tanggung jawab membuat bug lebih cepat dilacak: UI, logika state, dan data backend bisa diuji bertahap.</p> <h3> 55) Jika dosen bertanya “buktinya ini bukan hanya UI”, jawab apa? </h3> <p>Jelaskan bahwa data transaksi tersimpan ke backend Supabase, dapat dibaca ulang, dan dibatasi aturan role/RLS, jadi bukan sekadar tampilan.</p> <h3> 56) Jika ditanya “apa kontribusi GetX di proyek ini?”, jawab apa? </h3> <p>GetX dipakai selektif untuk mempermudah bagian tertentu (misalnya route/dialog), sementara alur lain tetap bisa memakai Navigator native sesuai pola proyek.</p> <h3> 57) Jika ditanya “bagaimana menjaga konsistensi data saat banyak interaksi?”, jawab apa? </h3> <p>Dengan state management yang disiplin, pemisahan state lokal dan global, serta sinkronisasi operasi CRUD ke backend secara terkontrol.</p> <h3> 58) Jika ditanya “bagaimana mitigasi kesalahan kasir?”, jawab apa? </h3> <p>Gunakan UI yang jelas, validasi input, konfirmasi aksi penting, update state real-time, dan fallback error message yang informatif.</p> <h3> 59) Jika ditanya “kenapa memilih Supabase dibanding backend manual?”, jawab apa? </h3> <p>Karena lebih cepat untuk pengembangan akademik, tetap mendukung praktik backend modern (auth, database, policy), dan fokus tim bisa ke kualitas fitur aplikasi.</p> <h3> 60) Jika ditanya “apa risiko terbesar saat demo live?”, jawab apa? </h3> <p>Risiko terbesar ada pada environment (network, key salah, policy) dan alur data. Solusinya adalah checklist pra-demo dan skenario fallback yang sudah disiapkan.</p> <h2> G. Tips Jawaban Saat Pengujian </h2> <ol> <li>Mulai dari jawaban singkat 1 kalimat, lalu lanjut teknis bila diminta.</li> <li>Gunakan contoh langsung dari alur SaryPOS, bukan contoh umum saja.</li> <li>Jika ada kekurangan, sampaikan jujur lalu jelaskan rencana perbaikan.</li> <li>Hindari jawaban terlalu teoritis tanpa kaitan implementasi.</li> <li>Tekankan bahwa keamanan akses bukan hanya di UI, tetapi juga di backend.</li> </ol> <h2> H. Template Jawaban Cepat (Bisa Dihafal) </h2> <ul> <li> <strong>Definisi singkat:</strong> “X adalah ... yang berfungsi untuk ...”</li> <li> <strong>Implementasi di SaryPOS:</strong> “Di SaryPOS, ini dipakai pada fitur ...”</li> <li> <strong>Alasan pemilihan:</strong> “Dipilih karena ... (efisiensi, konsistensi, keamanan).”</li> <li> <strong>Risiko jika salah:</strong> “Jika tidak benar, dampaknya ...”</li> <li> <strong>Penutup aman:</strong> “Karena itu kami validasi lewat pengujian ...”</li> </ul> <p>Dengan pola ini, jawaban tetap terstruktur walaupun pertanyaannya spontan.</p> flutter mobile testing tutorial Aris Candra Muzaffar Fri, 01 May 2026 13:23:58 +0000 https://forem.com/ariscandra/teks-pegangan-44e https://forem.com/ariscandra/teks-pegangan-44e <h1> Teks Pegangan Presentasi - Radar Pramuka (Audit Final) </h1> <p><strong>Nama Kelompok:</strong> Radar Pramuka<br><br> <strong>Durasi target:</strong> 10 menit<br><br> <strong>Tema:</strong> Pengujian Keamanan Jaringan pada Web Dummy DesignNet Studio</p> <h2> 1) Run Sheet 10 Menit (Urut Slide Deck) </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Waktu</th> <th>Durasi</th> <th>Pembicara</th> <th>Slide</th> <th>Fokus</th> </tr> </thead> <tbody> <tr> <td>00:00-00:50</td> <td>50 detik</td> <td>Dimas</td> <td>1-3</td> <td>Pembuka, tujuan, alur</td> </tr> <tr> <td>00:50-02:30</td> <td>1:40</td> <td>Aris</td> <td>4-5</td> <td>Latar belakang, tools</td> </tr> <tr> <td>02:30-03:40</td> <td>1:10</td> <td>Ariel</td> <td>6-7</td> <td>Pengantar hasil, reconnaissance &amp; scanning</td> </tr> <tr> <td>03:40-04:50</td> <td>1:10</td> <td>Aripin</td> <td>8</td> <td>Web dummy &amp; analisis trafik</td> </tr> <tr> <td>04:50-06:00</td> <td>1:10</td> <td>Ariel</td> <td>9</td> <td>Eksploitasi dasar (reverse/bind shell)</td> </tr> <tr> <td>06:00-07:30</td> <td>1:30</td> <td>Aripin</td> <td>10</td> <td>Validasi dengan Metasploit</td> </tr> <tr> <td>07:30-09:30</td> <td>2:00</td> <td>Dimas</td> <td>11</td> <td>Analisis pertahanan sistem</td> </tr> <tr> <td>09:30-10:00</td> <td>30 detik</td> <td>Dimas</td> <td>12-13</td> <td>Penutup dan Q&amp;A</td> </tr> </tbody> </table></div> <p><strong>Catatan proporsi:</strong></p> <ul> <li>Urutan sudah mengikuti deck: <code>1 -&gt; 2 -&gt; 3 -&gt; 4 -&gt; 5 -&gt; 6 -&gt; 7 -&gt; 8 -&gt; 9 -&gt; 10 -&gt; 11 -&gt; 12 -&gt; 13</code>.</li> <li>Pembagian porsi tetap sesuai instruksi anggota.</li> <li>Handoff antar pembicara dibuat ringkas agar tidak mengganggu ritme.</li> </ul> <h2> 2) Script Ringkas per Pembicara (Siap Ucap) </h2> <h2> A) Dimas - Pembuka (Slide 1-3 | 50 detik) </h2> <p>Selamat [pagi/siang], kami dari kelompok <strong>Radar Pramuka</strong>.<br><br> Pada sesi ini, kami menyampaikan hasil pengujian keamanan jaringan pada studi kasus <strong>DesignNet Studio</strong>.</p> <p>Fokus kami ada tiga: <strong>temuan kerentanan, dampak, dan mitigasi realistis</strong>.<br><br> Alurnya singkat: latar belakang, tools, hasil uji teknis, lalu rekomendasi pertahanan.</p> <p><strong>Transisi:</strong> Saya persilakan Aris menjelaskan latar belakang dan perangkat yang kami gunakan.</p> <h2> B) Aris - Latar Belakang dan Tools (Slide 4-5 | 1 menit 40 detik) </h2> <p>Risiko keamanan infrastruktur digital terus meningkat, termasuk pada studio desain yang menyimpan aset dan data klien.<br><br> Karena itu, kami melakukan simulasi penetration testing di lingkungan uji yang terkontrol dan etis.</p> <p>Yang kami ukur ada tiga: seberapa mudah attack surface dipetakan, apakah ada jalur eskalasi, dan seberapa kuat kontrol pertahanan awal.</p> <p>Tools yang kami pakai: <strong>Kali Linux, Nmap, Wireshark, Netcat, Metasploit</strong>, dan web dummy berbasis <strong>Apache/MySQL/Docker</strong>.<br><br> Kombinasi ini dipakai dari tahap discovery sampai validasi dampak.</p> <p><strong>Transisi:</strong> Berikutnya Ariel membuka bagian hasil pengujian dan menjelaskan information gathering serta network scanning.</p> <h2> C) Ariel - Pengantar Hasil + Recon &amp; Scanning (Slide 6-7 | 1 menit 10 detik) </h2> <p>Pada bagian hasil, kami menyusun alur dari pemetaan jaringan sampai validasi dampak.<br><br> Tahap awal adalah mengidentifikasi host dan service aktif.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>ip a nmap <span class="nt">-sV</span> <span class="nt">-sC</span> 192.168.6.216 </code></pre> </div> <p><code>ip a</code> kami gunakan untuk verifikasi interface mesin penguji, sedangkan enumerasi target dilakukan oleh Nmap.<br><br> Hasil scanning menunjukkan port penting terbuka, termasuk MySQL (<code>3306</code>) pada host uji.<br><br> Temuan ini menjadi dasar pemilihan jalur uji berikutnya.</p> <p><strong>Transisi:</strong> Selanjutnya Aripin membahas web dummy dan analisis trafik jaringan.</p> <h2> D) Aripin - Web Dummy &amp; Analisis Trafik (Slide 8 | 1 menit 10 detik) </h2> <p>Di sisi aplikasi, kami observasi request/response web dummy dengan Wireshark untuk menilai paparan data saat transit.<br><br> Analisis ini kami korelasikan dengan hasil scanning agar terlihat jalur risiko dari layer jaringan ke layer aplikasi.</p> <p>Pada segmen uji yang kami amati, terlihat indikasi risiko ketika kanal komunikasi belum diamankan konsisten dengan TLS.</p> <p><strong>Transisi:</strong> Saya kembalikan ke Ariel untuk validasi eksploitasi dasar.</p> <h2> E) Ariel - Eksploitasi Dasar (Slide 9 | 1 menit 10 detik) </h2> <p>Pada tahap validasi dampak, kami mensimulasikan skenario <strong>reverse shell</strong> dan <strong>bind shell</strong> pada lingkungan uji terkontrol.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="nb">whoami hostname </span>ipconfig </code></pre> </div> <p>Jika shell aktif dan perintah dasar merespons, ini menunjukkan potensi akses command-level bila ada celah eksekusi perintah jarak jauh.<br><br> Untuk host non-Windows, verifikasi jaringan dapat memakai <code>ip a</code> atau <code>ifconfig</code>.</p> <p><strong>Transisi:</strong> Berikutnya Aripin menampilkan validasi lanjutan menggunakan Metasploit.</p> <h2> F) Aripin - Validasi Metasploit (Slide 10 | 1 menit 30 detik) </h2> <p>Pada tahap ini, kami melakukan uji <strong>kredensial lemah/default</strong> pada layanan MySQL.<br><br> Keberhasilan login menunjukkan kelemahan manajemen kredensial dan kontrol akses, bukan otomatis membuktikan CVE tertentu.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>msfconsole use auxiliary/scanner/mysql/mysql_login <span class="nb">set </span>RHOSTS 192.168.6.183 <span class="nb">set </span>USERNAME root <span class="nb">set </span>PASSWORD root <span class="nb">set </span>CreateSession <span class="nb">true </span>run sessions <span class="nt">-i</span> 1 query show databases<span class="p">;</span> query use designnet<span class="p">;</span> query show tables<span class="p">;</span> query <span class="k">select </span><span class="nb">id</span>, username from <span class="nb">users </span>limit 3<span class="p">;</span> </code></pre> </div> <p>Jika sesi terbuka dan query minimal berhasil, dampaknya langsung ke kerahasiaan data ketika kontrol akses tidak ketat.</p> <p><strong>Transisi:</strong> Saya kembalikan ke Dimas untuk analisis pertahanan dan penutup.</p> <h2> G) Dimas - Analisis Pertahanan (Slide 11 | 2 menit) </h2> <p>Tiga temuan prioritas dari pengujian:</p> <ol> <li>Eksposur service penting, termasuk MySQL pada port <code>3306</code>.</li> <li>Indikasi risiko kebocoran data login pada segmen komunikasi yang belum terenkripsi konsisten.</li> <li>Kebutuhan hardening konfigurasi dan pembaruan komponen secara berkala.</li> </ol> <p>Rekomendasi yang kami prioritaskan:</p> <ul> <li> <strong>Batasi akses jaringan:</strong> batasi <code>3306</code> hanya dari host aplikasi yang sah melalui firewall/ACL.</li> <li> <strong>Amankan data in transit:</strong> terapkan TLS dengan konfigurasi benar pada kanal web/login.</li> <li> <strong>Amankan data dan identitas:</strong> simpan password dengan hash kuat, nonaktifkan akun default, dan rotasi secret.</li> <li> <strong>Disiplin operasional:</strong> patch rutin, logging, dan monitoring untuk deteksi dini.</li> </ul> <p>Intinya, keamanan bukan pekerjaan sekali selesai, tetapi proses berkelanjutan.</p> <h2> H) Dimas - Penutup (Slide 12-13 | 30 detik) </h2> <p>Kesimpulannya, sistem uji masih memiliki celah yang dapat dieksploitasi.<br><br> Namun, risiko dapat diturunkan signifikan dengan kontrol dasar yang diterapkan secara konsisten.</p> <p>Terima kasih atas perhatian Bapak/Ibu dan rekan-rekan.<br><br> Kami siap masuk ke sesi tanya jawab.</p> <h2> 3) Cue Cepat per Slide (1 Baris, Urut Deck) </h2> <ul> <li> <strong>Slide 1:</strong> salam, identitas tim, konteks proyek.</li> <li> <strong>Slide 2:</strong> tiga tujuan: temuan, dampak, mitigasi.</li> <li> <strong>Slide 3:</strong> peta alur presentasi 10 menit.</li> <li> <strong>Slide 4:</strong> kenapa kasus ini penting dan etis.</li> <li> <strong>Slide 5:</strong> tools dan fungsi singkat masing-masing.</li> <li> <strong>Slide 6:</strong> pengantar hasil dan urutan tahap pengujian.</li> <li> <strong>Slide 7:</strong> identifikasi host/service dan hasil scanning.</li> <li> <strong>Slide 8:</strong> analisis trafik web dummy dan indikasi risiko transit.</li> <li> <strong>Slide 9:</strong> simulasi reverse/bind shell pada lingkungan uji.</li> <li> <strong>Slide 10:</strong> validasi kredensial lemah melalui Metasploit.</li> <li> <strong>Slide 11:</strong> prioritas mitigasi yang bisa langsung diterapkan.</li> <li> <strong>Slide 12:</strong> kesimpulan 1 kalimat.</li> <li> <strong>Slide 13:</strong> terima kasih dan buka Q&amp;A.</li> </ul> <h2> 4) Aturan Pacing Saat Latihan </h2> <ul> <li>Targetkan <strong>1 kalimat = 6-10 detik</strong> saat bicara normal.</li> <li>Maksimum <strong>2 kalimat utama per slide</strong> sebelum transisi.</li> <li>Jika lewat waktu, potong detail command, jangan potong kesimpulan.</li> <li>Gunakan pola jawab Q&amp;A: <strong>temuan -&gt; dampak -&gt; mitigasi</strong>.</li> </ul> cybersecurity networking security testing Aris Candra Muzaffar Mon, 13 Apr 2026 21:26:01 +0000 https://forem.com/ariscandra/panduan-pengujian-implementasi-widget-properti-dan-arsitektur-sarypos-hp1 https://forem.com/ariscandra/panduan-pengujian-implementasi-widget-properti-dan-arsitektur-sarypos-hp1 <p>Dokumen ini merangkum hasil audit codebase aplikasi <strong>SaryPOS</strong> (folder <code>sarypos/</code>) untuk persiapan demonstrasi dan tanya jawab dengan dosen. Setiap bagian menyertakan <strong>lokasi berkas</strong> dan <strong>cuplikan kode</strong> yang dapat Anda tunjukkan langsung di IDE.</p> <p><strong>Konteks proyek:</strong> aplikasi POS (Point of Sale) ritel untuk Sary Mart, dibuat dengan <strong>Flutter</strong> dan backend <strong>Supabase</strong> (PostgreSQL + Storage), dengan pemisahan peran <strong>owner</strong> vs <strong>karyawan/kasir</strong>.</p> <h2> 1. Ringkasan arsitektur (kalimat untuk pembuka presentasi) </h2> <p>SaryPOS memuat konfigurasi dan font di <code>main</code>, menginisialisasi Supabase, lalu menjalankan <code>GetMaterialApp</code> dengan <strong>tumpukan warisan (InheritedNotifier)</strong> untuk tema, sesi pengguna, dan notifikasi in-app. <strong>State utama</strong> dikelola lewat <code>ChangeNotifier</code> (<code>PengaturSesi</code>, <code>PengaturTema</code>, <code>PengelolaNotifikasiInApp</code>) dan diwariskan ke seluruh pohon widget. <strong>Navigasi tab</strong> ada di <code>HalamanUtamaDenganNav</code> (<code>IndexedStack</code>); <strong>halaman detail</strong> banyak memakai <code>Navigator.push</code> + <code>MaterialPageRoute</code>, sementara <strong>guard owner</strong> memakai <strong>GetX</strong> (<code>Get.to</code>, <code>Get.dialog</code>).</p> <h2> 2. Stack teknologi dan dependensi utama </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Area</th> <th>Paket / pilihan</th> <th>Berkas acuan</th> </tr> </thead> <tbody> <tr> <td>Framework</td> <td>Flutter (SDK Dart <code>^3.11.1</code> di <code>pubspec.yaml</code>)</td> <td><code>sarypos/pubspec.yaml</code></td> </tr> <tr> <td>Backend klien</td> <td><code>supabase_flutter</code></td> <td><code>lib/data/sources/supabase_klien.dart</code></td> </tr> <tr> <td>Navigasi/GetX</td> <td> <code>get</code> — terutama <code>GetMaterialApp</code>, <code>Get.to</code>, <code>Get.dialog</code> </td> <td> <code>lib/main.dart</code>, <code>lib/core/penjaga_rute_owner.dart</code> </td> </tr> <tr> <td>Konfigurasi rahasia</td> <td> <code>flutter_dotenv</code> + <code>--dart-define</code> </td> <td><code>lib/config/supabase_konfigurasi.dart</code></td> </tr> <tr> <td>Preferensi lokal</td> <td> <code>shared_preferences</code> (tema, “lanjut kasir tanpa owner”)</td> <td> <code>lib/core/pengatur_tema.dart</code>, <code>lib/core/pengatur_sesi.dart</code> </td> </tr> <tr> <td>UI</td> <td> <code>google_fonts</code>, <code>intl</code>, <code>flutter_typeahead</code>, <code>image_picker</code>, <code>file_picker</code>, <code>barcode</code>, <code>http</code> </td> <td><code>pubspec.yaml</code></td> </tr> <tr> <td>Ekspor</td> <td> <code>pdf</code>, <code>printing</code>, <code>share_plus</code>, <code>csv</code>, <code>path_provider</code> </td> <td><code>lib/core/ekspor/</code></td> </tr> </tbody> </table></div> <p><strong>State management yang dipakai di kode:</strong> tidak ada Provider/Bloc/Riverpod; yang dominan adalah <strong>ChangeNotifier + ListenableBuilder/InheritedNotifier</strong> dan <strong>GetX sebagian</strong> untuk dialog/rute owner.</p> <h2> 3. Titik masuk aplikasi dan pemilihan “home” </h2> <p>Berkas: <code>sarypos/lib/main.dart</code></p> <p>Alur singkat:</p> <ol> <li><code>WidgetsFlutterBinding.ensureInitialized()</code></li> <li>Muat <code>.env</code> (bukan web; error ditelan jika berkas tidak ada)</li> <li>Preload font Plus Jakarta Sans</li> <li><code>inisialisasiSupabase()</code></li> <li> <code>PengaturTema.muatAwal()</code> lalu <code>runApp(MainApp(...))</code> </li> <li> <code>MainApp</code> membungkus anak dengan <code>WarisanTema</code> → <code>WarisanSesi</code> → <code>WarisanNotifikasiInApp</code> → <code>GetMaterialApp</code> </li> <li> <code>home</code> ditentukan oleh <code>_pilihHome()</code>: loading → error koneksi → pembuka owner pertama → <code>HalamanUtamaDenganNav</code> </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Future&lt;void&gt; main() async { WidgetsFlutterBinding.ensureInitialized(); if (!kIsWeb) { try { await dotenv.load(fileName: '.env'); } catch (_) {} } try { await GoogleFonts.pendingFonts([GoogleFonts.plusJakartaSans()]); } catch (_) {} await inisialisasiSupabase(); final pengaturTema = PengaturTema(); await pengaturTema.muatAwal(); runApp(MainApp(pengaturTema: pengaturTema)); } // ... child: GetMaterialApp( title: 'SaryPOS', theme: temaSaryposTerang(), darkTheme: temaSaryposGelap(), themeMode: widget.pengaturTema.modeMaterial, home: _pilihHome(), builder: (context, child) { return Stack( fit: StackFit.expand, children: [ child ?? const SizedBox.shrink(), const Positioned( top: 0, left: 0, right: 0, child: SafeArea( bottom: false, child: Padding( padding: EdgeInsets.fromLTRB(16, 8, 16, 0), child: BannerNotifikasiInApp(), ), ), ), ], ); }, ), // ... Widget _pilihHome() { if (_sesi.sedangMemeriksaSesi) { return const Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator(), SizedBox(height: 16), Text('Menyiapkan SaryPOS…'), ], ), ), ); } if (_sesi.sedangMengalamiError) { return HalamanErrorKoneksi( pesan: _sesi.pesanErrorSesi ?? 'Gagal menyiapkan SaryPOS.', cobaLagi: _sesi.muatUlangSesi, ); } if (_sesi.perluHalamanPembukaOwner) { return HalamanPembukaOwnerPertama(pengatur: _sesi); } return const HalamanUtamaDenganNav(); } } </code></pre> </div> <p><strong>Properti / perilaku penting untuk ditanya dosen:</strong></p> <ul> <li> <strong>Tidak ada <code>routes</code>/<code>onGenerateRoute</code></strong> — satu <code>home</code> dinamis.</li> <li> <strong>Banner notifikasi</strong> selalu di atas konten lewat <code>Stack</code> di <code>builder</code> <code>GetMaterialApp</code>.</li> </ul> <h2> 4. Konfigurasi Supabase (URL, anon key, service role) </h2> <p>Berkas: <code>sarypos/lib/config/supabase_konfigurasi.dart</code></p> <ul> <li> <code>SUPABASE_URL</code> dan <code>SUPABASE_ANON_KEY</code> <strong>wajib</strong> (dari <code>String.fromEnvironment</code> atau <code>.env</code>).</li> <li> <code>SUPABASE_SERVICE_ROLE_KEY</code> <strong>opsional</strong>; jika ada, dipakai untuk operasi admin tertentu (mis. form karyawan) — <strong>ini topik sensitif keamanan</strong> untuk diskusi dengan dosen (anon key untuk klien umum; service role sebaiknya tidak tersebar di aplikasi produksi). </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>String _ambilKonfigurasiWajib({ required String namaKunci, required String nilaiDartDefine, }) { final nilaiDefine = nilaiDartDefine.trim(); if (nilaiDefine.isNotEmpty) { return nilaiDefine; } final nilaiEnv = (dotenv.env[namaKunci] ?? '').trim(); if (nilaiEnv.isNotEmpty) { return nilaiEnv; } throw StateError( 'Konfigurasi `$namaKunci` belum tersedia. ' 'Isi di .env atau kirim lewat --dart-define.', ); } // ... String? get supabaseServiceRoleKey { final nilaiDefine = _supabaseServiceRoleDartDefine.trim(); if (nilaiDefine.isNotEmpty) { return nilaiDefine; } final nilaiEnv = (dotenv.env['SUPABASE_SERVICE_ROLE_KEY'] ?? '').trim(); if (nilaiEnv.isNotEmpty) { return nilaiEnv; } return null; } </code></pre> </div> <h2> 5. Sesi pengguna (owner, kasir tanpa owner, retry) </h2> <p>Berkas: <code>sarypos/lib/core/pengatur_sesi.dart</code></p> <p><strong>Getter penting untuk logika UI:</strong></p> <ul> <li> <code>perluHalamanPembukaOwner</code> — true jika belum ada owner aktif, belum login, dan pengguna belum memilih “lanjut kasir tanpa owner”.</li> <li>Retry <strong>3 kali</strong>, timeout <strong>5 detik</strong> per percobaan (konstanta di kelas). </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class PengaturSesi extends ChangeNotifier { PengaturSesi() { _inisialisasi(); } static const int _maksPercobaanMuatSesi = 3; static const Duration _timeoutPercobaanMuatSesi = Duration(seconds: 5); static const _kunciPrefLanjutKasir = 'sarypos_lanjut_tanpa_owner'; // ... bool get perluHalamanPembukaOwner =&gt; _adaOwnerAktif == false &amp;&amp; _pengguna == null &amp;&amp; !_lanjutKasirTanpaOwner; </code></pre> </div> <h2> 6. Warisan state: <code>InheritedNotifier</code> </h2> <h3> 6.1 <code>WarisanSesi</code> </h3> <p>Berkas: <code>sarypos/lib/core/warisan_sesi.dart</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class WarisanSesi extends InheritedNotifier&lt;PengaturSesi&gt; { const WarisanSesi({ super.key, required PengaturSesi pengatur, required super.child, }) : super(notifier: pengatur); static PengaturSesi dari(BuildContext context) { final w = context.dependOnInheritedWidgetOfExactType&lt;WarisanSesi&gt;(); assert(w != null, 'WarisanSesi tidak ditemukan di pohon widget'); return w!.notifier!; } static PengaturSesi? mungkinDari(BuildContext context) { return context.dependOnInheritedWidgetOfExactType&lt;WarisanSesi&gt;()?.notifier; } } </code></pre> </div> <p><strong>Jawaban singkat ujian:</strong> <code>dependOnInheritedWidgetOfExactType</code> membuat widget <strong>rebuild</strong> saat notifier (<code>PengaturSesi</code>) memanggil <code>notifyListeners</code>.</p> <h3> 6.2 <code>WarisanTema</code> </h3> <p>Berkas: <code>sarypos/lib/core/warisan_tema.dart</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class WarisanTema extends InheritedNotifier&lt;PengaturTema&gt; { const WarisanTema({ super.key, required PengaturTema pengatur, required super.child, }) : super(notifier: pengatur); static PengaturTema dari(BuildContext context) { final w = context.dependOnInheritedWidgetOfExactType&lt;WarisanTema&gt;(); assert(w != null, 'WarisanTema tidak ditemukan di pohon widget'); return w!.notifier!; } } </code></pre> </div> <h2> 7. Penjaga akses: login dan owner </h2> <h3> 7.1 Cegah aksi jika belum login </h3> <p>Berkas: <code>sarypos/lib/core/penjaga_aksi_masuk.dart</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>bool cegahJikaBelumLogin( BuildContext context, { String? pesan, }) { final s = WarisanSesi.dari(context); if (s.sedangMemeriksaSesi) { return true; } if (s.pengguna != null) { return false; } tampilkanSnackbarSarypos( context, tipe: TipeSnackbarSarypos.info, pesan: pesan ?? 'Masuk ke akun terlebih dahulu untuk mengakses fitur ini.', ); return true; } </code></pre> </div> <p><strong>Properti perilaku:</strong> mengembalikan <code>true</code> artinya <strong>aksi harus dibatalkan</strong> (caller biasanya <code>if (cegahJikaBelumLogin(context)) return;</code>).</p> <h3> 7.2 Hanya owner yang boleh membuka halaman tertentu </h3> <p>Berkas: <code>sarypos/lib/core/penjaga_rute_owner.dart</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Future&lt;T?&gt; dorongJikaOwner&lt;T extends Object?&gt;( BuildContext context, WidgetBuilder builder, { String pesanDitolak = 'Hanya pemilik toko (owner) yang dapat membuka halaman ini.', }) async { final sesi = WarisanSesi.dari(context); final p = sesi.pengguna; if (p == null || !p.isOwner) { if (!context.mounted) { return null; } await Get.dialog&lt;void&gt;( AlertDialog( title: const Text('Akses Ditolak'), content: Text(pesanDitolak), actions: [ TextButton( onPressed: () =&gt; Get.back&lt;void&gt;(), child: const Text('Oke'), ), ], ), ); return null; } if (!context.mounted) { return null; } return Get.to&lt;T&gt;(() =&gt; builder(context)); } bool penggunaAdalahOwner(BuildContext context) { return WarisanSesi.dari(context).pengguna?.isOwner ?? false; } </code></pre> </div> <p><strong>Catatan ujian:</strong> pengecekan owner memakai <code>PenggunaModel.isOwner</code> (<code>peran == 'owner'</code> di model).</p> <h2> 8. Shell navigasi utama (tab Beranda / Kasir / Saya) </h2> <p>Berkas: <code>sarypos/lib/features/dashboard/halaman_utama_dengan_nav.dart</code></p> <ul> <li> <code>IndexedStack</code> menjaga <strong>state tiap tab</strong> tetap hidup saat pindah tab.</li> <li>AppBar menampilkan ikon log aktivitas <strong>hanya</strong> jika tab Beranda <strong>dan</strong> pengguna owner.</li> <li>FAB tengah mengarah ke tab Kasir. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> @override Widget build(BuildContext context) { final isKasirAktif = _indeksSaatIni == 1; final pemilikBeranda = _indeksSaatIni == 0 &amp;&amp; (WarisanSesi.dari(context).pengguna?.isOwner ?? false); return Scaffold( extendBody: true, appBar: AppBarSarypos( judul: _judulTab[_indeksSaatIni], aksi: pemilikBeranda ? [ IconButton( onPressed: () async { await dorongJikaOwner( context, (_) =&gt; const HalamanLogAktivitas(), ); }, icon: const Icon(Icons.notifications_none_outlined), tooltip: 'Log Aktivitas', ), ] : null, ), body: IndexedStack( index: _indeksSaatIni, children: [ HalamanDashboard(key: _kunciDashboard), const HalamanKasirMenu(), const HalamanUserPengaturan(), ], ), </code></pre> </div> <h2> 9. Tema dan palet warna merek </h2> <p>Berkas: <code>sarypos/lib/config/theme/sarypos_theme.dart</code></p> <p><strong>Kelas <code>WarnaSarypos</code></strong> memusatkan warna merek (merah Sary, teal, emas, abu hangat, hijau sukses). Fungsi <code>temaSaryposTerang()</code> / <code>temaSaryposGelap()</code> membangun <code>ThemeData</code> Material 3 dengan teks <strong>Plus Jakarta Sans</strong>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class WarnaSarypos { static const Color saryRed = Color(0xFFD3291E); static const Color deepTeal = Color(0xFF1C4546); static const Color saryGold = Color(0xFFE4AF1A); static const Color cleanWhite = Color(0xFFFEFEFE); static const Color warmGray = Color(0xFFCDC5BB); static const Color darkStone = Color(0xFF6E6B61); static const Color hijauSukses = Color(0xFF1E8E3E); // ... } </code></pre> </div> <p><strong>Transisi halaman:</strong> <code>PageTransitionsTheme</code> memakai <code>CupertinoPageTransitionsBuilder</code> untuk Android/iOS/macOS (geser seperti iOS).<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const PageTransitionsTheme _transisiHalamanStandar = PageTransitionsTheme( builders: &lt;TargetPlatform, PageTransitionsBuilder&gt;{ TargetPlatform.android: CupertinoPageTransitionsBuilder(), TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), TargetPlatform.macOS: CupertinoPageTransitionsBuilder(), TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(), TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(), TargetPlatform.fuchsia: FadeUpwardsPageTransitionsBuilder(), }, ); </code></pre> </div> <h2> 10. Widget reusable di <code>lib/widgets/</code> — properti dan implementasi </h2> <h3> 10.1 <code>CardSarypos</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/card_sarypos.dart</code><br><br> <strong>Jenis:</strong> <code>StatelessWidget</code><br><br> <strong>Properti konstruktor:</strong></p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Properti</th> <th>Tipe</th> <th>Default</th> <th>Fungsi</th> </tr> </thead> <tbody> <tr> <td><code>child</code></td> <td><code>Widget</code></td> <td>wajib</td> <td>Isi kartu</td> </tr> <tr> <td><code>margin</code></td> <td><code>EdgeInsetsGeometry?</code></td> <td>null</td> <td>Margin <code>Card</code> </td> </tr> <tr> <td><code>borderRadius</code></td> <td><code>BorderRadius?</code></td> <td>12 px all</td> <td>Sudut membulat</td> </tr> <tr> <td><code>elevation</code></td> <td><code>double?</code></td> <td>dari <code>cardTheme</code> atau 2</td> <td>Bayangan; jika ≤0, “datar”</td> </tr> <tr> <td><code>onTap</code></td> <td><code>VoidCallback?</code></td> <td>null</td> <td>Jika ada, dibungkus <code>InkWell</code> </td> </tr> <tr> <td><code>tampilkanKonturTipis</code></td> <td><code>bool</code></td> <td>false</td> <td>Garis tipis saat elevasi datar</td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class CardSarypos extends StatelessWidget { const CardSarypos({ super.key, required this.child, this.margin, this.borderRadius, this.elevation, this.onTap, this.tampilkanKonturTipis = false, }); final Widget child; final EdgeInsetsGeometry? margin; final BorderRadius? borderRadius; final double? elevation; final VoidCallback? onTap; final bool tampilkanKonturTipis; </code></pre> </div> <p><strong>Ide desain:</strong> gradien latar dari <code>cleanWhite</code> / <code>surfaceContainerHighest</code> ke aksen teal transparan, dengan “blob” dekoratif emas/merah sangat halus.</p> <h3> 10.2 <code>CardRingkasan</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/card_ringkasan.dart</code><br><br> Membungkus konten dengan <code>CardSarypos(elevation: 0)</code> dan layout baris: teks kiri, ikon bundar kanan.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Properti</th> <th>Tipe</th> <th>Keterangan</th> </tr> </thead> <tbody> <tr> <td><code>judul</code></td> <td><code>String</code></td> <td>Label ringkas</td> </tr> <tr> <td><code>nilaiUtama</code></td> <td><code>String</code></td> <td>Angka/teks besar (mis. format rupiah)</td> </tr> <tr> <td><code>ikon</code></td> <td><code>IconData</code></td> <td>Ikon ringkasan</td> </tr> <tr> <td><code>warnaAksen</code></td> <td><code>Color?</code></td> <td>Opsional; default teal (terang) / secondary (gelap)</td> </tr> <tr> <td><code>margin</code></td> <td><code>EdgeInsetsGeometry?</code></td> <td>Default <code>EdgeInsets.zero</code> </td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class CardRingkasan extends StatelessWidget { const CardRingkasan({ super.key, required this.judul, required this.nilaiUtama, required this.ikon, this.warnaAksen, this.margin, }); final String judul; final String nilaiUtama; final IconData ikon; final Color? warnaAksen; final EdgeInsetsGeometry? margin; </code></pre> </div> <h3> 10.3 <code>AppBarSarypos</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/appbar_sarypos.dart</code><br><br> Mengimplementasikan <code>PreferredSizeWidget</code> (<code>preferredSize</code> = tinggi toolbar standar).</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Properti</th> <th>Tipe</th> <th>Keterangan</th> </tr> </thead> <tbody> <tr> <td><code>judul</code></td> <td><code>String</code></td> <td>Judul utama AppBar</td> </tr> <tr> <td><code>aksi</code></td> <td><code>List&lt;Widget&gt;?</code></td> <td>Aksi kustom; digabung dengan tombol siklus tema</td> </tr> </tbody> </table></div> <p><strong>Perilaku tema:</strong> membaca <code>WarisanTema.dari(context)</code>, siklus <code>ikutiSistem</code> → <code>terang</code> → <code>gelap</code> lewat <code>pengaturTema.atur(...)</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class AppBarSarypos extends StatelessWidget implements PreferredSizeWidget { const AppBarSarypos({super.key, required this.judul, this.aksi}); final String judul; final List&lt;Widget&gt;? aksi; </code></pre> </div> <h3> 10.4 <code>EmptyStateGenerik</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/empty_state_generik.dart</code><br><br> Memakai <code>LayoutBuilder</code> untuk menyesuaikan padding dan ukuran ikon jika ruang vertikal sangat kecil (<code>maxHeight &lt; 90</code>).</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Properti</th> <th>Tipe</th> <th>Keterangan</th> </tr> </thead> <tbody> <tr> <td><code>ikon</code></td> <td><code>IconData?</code></td> <td>Opsional</td> </tr> <tr> <td><code>judul</code></td> <td><code>String?</code></td> <td>Opsional</td> </tr> <tr> <td><code>pesan</code></td> <td><code>String</code></td> <td>Wajib — pesan utama</td> </tr> <tr> <td><code>labelTombol</code></td> <td><code>String?</code></td> <td>Perlu dipasangkan dengan <code>onTekanTombol</code> </td> </tr> <tr> <td><code>onTekanTombol</code></td> <td><code>VoidCallback?</code></td> <td>Menampilkan <code>ElevatedButton</code> jika keduanya non-null</td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class EmptyStateGenerik extends StatelessWidget { const EmptyStateGenerik({ super.key, this.ikon, this.judul, required this.pesan, this.labelTombol, this.onTekanTombol, }); final IconData? ikon; final String? judul; final String pesan; final String? labelTombol; final VoidCallback? onTekanTombol; </code></pre> </div> <h3> 10.5 <code>tampilkanSnackbarSarypos</code> dan <code>TipeSnackbarSarypos</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/snackbar_sarypos.dart</code><br><br> Bukan widget, tetapi <strong>API imperatif</strong> untuk feedback konsisten.</p> <ul> <li>Enum: <code>sukses</code>, <code>error</code>, <code>info</code>, <code>peringatan</code> </li> <li>Memanggil <code>ScaffoldMessenger.of(context).clearSnackBars()</code> lalu <code>showSnackBar</code> dengan konten gradien custom (bukan warna flat default) </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>enum TipeSnackbarSarypos { sukses, error, info, peringatan } void tampilkanSnackbarSarypos( BuildContext context, { required TipeSnackbarSarypos tipe, required String pesan, }) { </code></pre> </div> <h3> 10.6 Skeleton loading (<code>SkeletonBox</code>, <code>SkeletonLine</code>, <code>SkeletonCircle</code>) </h3> <p>Berkas: <code>sarypos/lib/widgets/skeleton_sarypos.dart</code><br><br> <code>SkeletonBox</code> memakai <code>_ShimmerSkeletonCore</code> (<code>AnimationController.repeat</code>) untuk gelombang sorot.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Widget</th> <th>Properti utama</th> </tr> </thead> <tbody> <tr> <td><code>SkeletonBox</code></td> <td> <code>width</code>, <code>height</code>, <code>borderRadius</code> (default 12), <code>baseColor?</code>, <code>highlightColor?</code>, <code>duration</code> (default 1300 ms)</td> </tr> <tr> <td><code>SkeletonLine</code></td> <td> <code>width</code>, <code>height</code> (12), <code>borderRadius</code> (999)</td> </tr> <tr> <td><code>SkeletonCircle</code></td> <td><code>diameter</code></td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class SkeletonBox extends StatelessWidget { const SkeletonBox({ super.key, required this.width, required this.height, this.borderRadius = 12, this.baseColor, this.highlightColor, this.duration = const Duration(milliseconds: 1300), }); final double width; final double height; final double borderRadius; final Color? baseColor; final Color? highlightColor; final Duration duration; </code></pre> </div> <h3> 10.7 <code>BannerNotifikasiInApp</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/banner_notifikasi_in_app.dart</code><br><br> Tanpa properti publik; membaca <code>WarisanNotifikasiInApp.mungkinDari(context)</code> dan <code>ListenableBuilder</code> pada pengelola. Tap menutup lewat <code>pengelola.tutup()</code>.</p> <h3> 10.8 <code>PengelolaNotifikasiInApp</code> (inti logika banner) </h3> <p>Berkas: <code>sarypos/lib/core/pengelola_notifikasi_in_app.dart</code></p> <ul> <li> <code>tampilkan(tipe, pesan, durasi)</code> — deduplikasi pesan identik dalam <strong>2 detik</strong> </li> <li>Timer otomatis menghapus notifikasi setelah <code>durasi</code> (default 4 detik) </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class PengelolaNotifikasiInApp extends ChangeNotifier { ItemNotifikasiInApp? _aktif; Timer? _timer; String? _pesanTerakhir; DateTime? _waktuPesanTerakhir; ItemNotifikasiInApp? get aktif =&gt; _aktif; void tampilkan({ required TipeNotifikasiInApp tipe, required String pesan, Duration durasi = const Duration(seconds: 4), }) { final sekarang = DateTime.now(); if (_pesanTerakhir == pesan &amp;&amp; _waktuPesanTerakhir != null &amp;&amp; sekarang.difference(_waktuPesanTerakhir!) &lt; const Duration(seconds: 2)) { return; } _pesanTerakhir = pesan; _waktuPesanTerakhir = sekarang; _timer?.cancel(); _aktif = ItemNotifikasiInApp( id: '${sekarang.microsecondsSinceEpoch}', tipe: tipe, pesan: pesan, ); notifyListeners(); _timer = Timer(durasi, () { _aktif = null; notifyListeners(); }); } </code></pre> </div> <h3> 10.9 <code>HalamanErrorKoneksi</code> </h3> <p>Berkas: <code>sarypos/lib/widgets/halaman_error_koneksi.dart</code></p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Properti</th> <th>Tipe</th> <th>Keterangan</th> </tr> </thead> <tbody> <tr> <td><code>pesan</code></td> <td><code>String</code></td> <td>Detail error untuk pengguna</td> </tr> <tr> <td><code>cobaLagi</code></td> <td><code>Future&lt;void&gt; Function()</code></td> <td>Async callback tombol “Coba Lagi”</td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class HalamanErrorKoneksi extends StatelessWidget { const HalamanErrorKoneksi({ super.key, required this.pesan, required this.cobaLagi, }); final String pesan; final Future&lt;void&gt; Function() cobaLagi; </code></pre> </div> <h2> 11. Lapisan data: contoh model dan alur transaksi </h2> <h3> 11.1 Model pengguna dan peran owner </h3> <p>Berkas: <code>sarypos/lib/data/models/pengguna_model.dart</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class PenggunaModel { const PenggunaModel({ required this.id, required this.idAuth, required this.namaLengkap, required this.email, required this.peran, required this.aktif, this.sandiLogin, }); final String id; final String idAuth; final String namaLengkap; final String email; final String peran; final bool aktif; final String? sandiLogin; bool get isOwner =&gt; peran == 'owner'; factory PenggunaModel.dariBaris(Map&lt;String, dynamic&gt; row) { return PenggunaModel( id: row['id'].toString(), idAuth: row['id_auth'].toString(), namaLengkap: row['nama_lengkap']?.toString() ?? '', email: row['email']?.toString() ?? '', peran: row['peran']?.toString() ?? 'karyawan', aktif: row['aktif'] == true, sandiLogin: row['sandi_login']?.toString(), ); } } </code></pre> </div> <h3> 11.2 Penyimpanan transaksi + detail + kurangi stok </h3> <p>Berkas: <code>sarypos/lib/data/sources/transaksi_sumber.dart</code></p> <p>Alur: hitung subtotal dari <code>ItemKeranjang</code> → validasi <code>totalAkhir</code> → <code>insert</code> ke tabel <code>transaksi</code> → <code>insert</code> batch ke <code>detail_transaksi</code> → loop <code>kurangiStokSetelahPenjualan</code> per item.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> Future&lt;String?&gt; simpanTransaksi({ String? idPengguna, required List&lt;ItemKeranjang&gt; itemKeranjang, required String metodePembayaran, int? totalAkhir, }) async { if (itemKeranjang.isEmpty) { return null; } final subtotal = itemKeranjang.fold&lt;int&gt;( 0, (sebelumnya, item) =&gt; sebelumnya + item.subtotal, ); final total = totalAkhir ?? subtotal; if (total &lt; 0 || total &gt; subtotal) { throw ArgumentError( 'totalAkhir harus antara 0 dan subtotal ($subtotal), dapat: $total', ); } final potongan = subtotal - total; final barisTransaksi = &lt;String, dynamic&gt;{ 'waktu': DateTime.now().toUtc().toIso8601String(), 'subtotal': subtotal, 'potongan': potongan, 'total': total, 'metode_pembayaran': metodePembayaran, }; if (idPengguna != null) { barisTransaksi['id_pengguna'] = idPengguna; } final responsTransaksi = await supabaseKlien .from('transaksi') .insert(barisTransaksi) .select('id') .single(); // ... await supabaseKlien.from('detail_transaksi').insert(detail); for (final item in itemKeranjang) { await _stokSumber.kurangiStokSetelahPenjualan( produkId: item.produk.id, kuantitasTerjual: item.kuantitas, ); } return transaksiId; } </code></pre> </div> <h3> 11.3 Peta berkas sumber data (ringkas) </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Berkas</th> <th>Tabel / bucket (umum)</th> </tr> </thead> <tbody> <tr> <td><code>pengguna_sumber.dart</code></td> <td><code>pengguna</code></td> </tr> <tr> <td><code>profil_karyawan_sumber.dart</code></td> <td> <code>profil_karyawan</code>, bucket <code>karyawan-foto</code> </td> </tr> <tr> <td><code>produk_dan_stok_sumber.dart</code></td> <td> <code>produk</code>, <code>stok</code>, bucket <code>produk-gambar</code> </td> </tr> <tr> <td><code>transaksi_sumber.dart</code></td> <td> <code>transaksi</code>, <code>detail_transaksi</code> </td> </tr> <tr> <td><code>dashboard_sumber.dart</code></td> <td>agregat dari <code>transaksi</code> </td> </tr> <tr> <td><code>laporan_sumber.dart</code></td> <td> <code>transaksi</code> (+ relasi ke <code>pengguna</code>)</td> </tr> <tr> <td><code>log_aktivitas_sumber.dart</code></td> <td><code>log_aktivitas</code></td> </tr> <tr> <td><code>supabase_klien.dart</code></td> <td>inisialisasi + tes koneksi ke <code>pengguna</code> </td> </tr> </tbody> </table></div> <h2> 12. Modul fitur (<code>lib/features/</code>) — cakupan untuk demo </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Folder</th> <th>Layar utama</th> <th>Catatan ujian</th> </tr> </thead> <tbody> <tr> <td><code>auth/</code></td> <td>Pembuka owner pertama, login, daftar owner</td> <td>Alur belum ada owner di DB vs lanjut kasir</td> </tr> <tr> <td><code>dashboard/</code></td> <td>Dashboard, shell nav</td> <td>Carousel, pintasan ke produk/stok/laporan</td> </tr> <tr> <td><code>pos/</code></td> <td>Menu kasir, POS, pencatatan transaksi</td> <td>Keranjang, diskon, notifikasi in-app</td> </tr> <tr> <td><code>produk/</code></td> <td>Daftar &amp; form produk</td> <td>Upload gambar ke storage</td> </tr> <tr> <td><code>stok/</code></td> <td>Stok</td> <td>Penyesuaian kuantitas</td> </tr> <tr> <td><code>karyawan/</code></td> <td>Daftar &amp; form</td> <td>Operasi admin (kaitkan dengan service role)</td> </tr> <tr> <td><code>laporan/</code></td> <td>Laporan penjualan</td> <td>PDF/CSV</td> </tr> <tr> <td><code>log_aktivitas/</code></td> <td>Log aktivitas</td> <td>Owner</td> </tr> <tr> <td><code>pengaturan/</code></td> <td>Profil/saya, tentang, panel transaksi terakhir karyawan</td> <td>Perbedaan menu owner vs karyawan</td> </tr> </tbody> </table></div> <h2> 13. Pengujian otomatis </h2> <p>Berkas: <code>sarypos/test/skeleton_sarypos_test.dart</code> — hanya uji widget skeleton. <strong>Tidak ada</strong> test integrasi Supabase atau alur POS; ini jawaban jujur jika dosen menanyakan cakupan test.</p> <h2> 14. Pertanyaan yang sering muncul saat pengujian (beserta jawaban singkat) </h2> <ol> <li><p><strong>Mengapa memakai <code>IndexedStack</code> untuk tab?</strong><br><br> Agar state tiap tab (mis. scroll posisi) tidak hilang saat ganti tab; hanya tab aktif yang “terlihat”, sisanya tetap di pohon widget.</p></li> <li><p><strong>Bagaimana cara aplikasi tahu user owner?</strong><br><br> Dari baris <code>pengguna</code> di Supabase: field <code>peran</code>; di kode <code>PenggunaModel.isOwner</code> membandingkan dengan <code>'owner'</code>.</p></li> <li><p><strong>Di mana pembatasan fitur owner diimplementasikan?</strong><br><br> Kombinasi <code>dorongJikaOwner</code>, <code>penggunaAdalahOwner</code>, <code>cegahJikaBelumLogin</code>, dan kondisi UI di <code>HalamanUtamaDenganNav</code> / halaman pengaturan.</p></li> <li><p><strong>Bagaimana state tema diwariskan?</strong><br><br> <code>WarisanTema</code> (<code>InheritedNotifier&lt;PengaturTema&gt;</code>); <code>AppBarSarypos</code> memanggil <code>WarisanTema.dari(context)</code> untuk mengubah tema.</p></li> <li><p><strong>GetX dipakai untuk apa saja?</strong><br><br> Terutama <code>GetMaterialApp</code> dan navigasi/dialog di <code>dorongJikaOwner</code>; tidak ada pola reactive massal (<code>Obx</code> massal).</p></li> <li><p><strong>Bagaimana alur simpan transaksi?</strong><br><br> <code>TransaksiSumber.simpanTransaksi</code>: insert header <code>transaksi</code>, insert lines <code>detail_transaksi</code>, lalu kurangi stok per produk.</p></li> <li><p><strong>Di mana konfigurasi Supabase?</strong><br><br> <code>supabase_konfigurasi.dart</code>; wajib URL + anon key dari <code>.env</code> atau <code>--dart-define</code>.</p></li> <li><p><strong>Apa risiko <code>SUPABASE_SERVICE_ROLE_KEY</code> di aplikasi?</strong><br><br> Kunci ini melewati RLS; untuk produksi seharusnya tidak dibundel di klien. Untuk proyek kuliah, siapkan penjelasan pembatasan dan skenario ideal (Edge Function/server).</p></li> </ol> <h2> 15. Teks pegangan (ringkas, untuk dibaca sebelum masuk ruang ujian) </h2> <ul> <li> <strong>Akar widget:</strong> <code>main.dart</code> → <code>MainApp</code> → <code>GetMaterialApp</code> + <code>Stack</code> banner.</li> <li> <strong>Tiga warisan:</strong> Tema (<code>WarisanTema</code>), Sesi (<code>WarisanSesi</code>), Notifikasi (<code>WarisanNotifikasiInApp</code>).</li> <li> <strong>Home dinamis:</strong> loading → error (<code>HalamanErrorKoneksi</code>) → pembuka owner → <code>HalamanUtamaDenganNav</code>.</li> <li> <strong>Tab:</strong> Beranda = <code>HalamanDashboard</code>, Kasir = <code>HalamanKasirMenu</code>, Saya = <code>HalamanUserPengaturan</code>.</li> <li> <strong>Kartu UI:</strong> <code>CardSarypos</code> = wadah visual; <code>CardRingkasan</code> = pola ringkasan angka + ikon.</li> <li> <strong>Feedback:</strong> snackbar = <code>tampilkanSnackbarSarypos</code>; banner atas = <code>PengelolaNotifikasiInApp</code> + <code>BannerNotifikasiInApp</code>.</li> <li> <strong>Guard:</strong> <code>cegahJikaBelumLogin</code> (snackbar info); <code>dorongJikaOwner</code> (dialog + <code>Get.to</code>).</li> <li> <strong>Data:</strong> model di <code>lib/data/models/</code>, akses Supabase di <code>lib/data/sources/</code>, klien tunggal <code>supabaseKlien</code>.</li> <li> <strong>Tema warna:</strong> <code>WarnaSarypos</code> + <code>temaSaryposTerang</code>/<code>Gelap</code> + font Plus Jakarta.</li> <li> <strong>Transaksi:</strong> tabel <code>transaksi</code> + <code>detail_transaksi</code>, stok dikurangi setelah sukses insert.</li> <li> <strong>Bukti di kode:</strong> selalu bisa buka berkas yang dicantumkan di atas dan tunjukkan blok baris yang sama dengan dokumen ini.</li> </ul> <p><em>Dokumen ini disusun berdasarkan audit struktural codebase SaryPOS pada repositori lokal Anda; jika ada perubahan signifikan setelah commit tertentu, sesuaikan referensi baris dengan mencari ulang simbol yang sama di IDE.</em></p> architecture flutter mobile testing