minmon/docs/report-outline.md

Report Outline (BAB 1–4)

BAB 1 - Pendahuluan

1.1 Latar Belakang

• Pentingnya pendataan server, layanan, domain, dan dokumentasi internal secara terpusat
• Kebutuhan dashboard web sederhana untuk membantu admin memantau aset server private
• Kebutuhan pemeriksaan DNS dasar agar domain dapat diverifikasi terhadap IP server yang diharapkan

1.2 Rumusan Masalah

• Bagaimana membangun aplikasi web terproteksi untuk mengelola server, service, domain, dan note dalam satu dashboard?
• Bagaimana memeriksa apakah domain mengarah ke IP server yang benar secara sederhana?
• Bagaimana menampilkan relasi data, misalnya note per server, langsung dari halaman detail?

1.3 Batasan Masalah

• Aplikasi berupa dashboard CRUD + monitoring ringan
• Hanya satu aktor admin
• DNS checking terbatas pada A record / IPv4
• Tidak mencakup SSH, deployment automation, Docker orchestration, atau reverse proxy management
• Fokus implementasi pada web app + server app + PostgreSQL

1.4 Tujuan

• Membangun dashboard manajemen layanan server private berbasis web
• Menyediakan CRUD untuk server, service, domain, dan note
• Menyediakan pemeriksaan DNS sederhana dan ringkasan dashboard

1.5 Manfaat

• Membantu admin mendokumentasikan dan memantau aset server
• Membantu proses pembelajaran relasi data, CRUD, auth, dan monitoring dasar
• Menjadi contoh implementasi full-stack berbasis React, tRPC, Drizzle, dan PostgreSQL

BAB 2 - Tinjauan Pustaka

2.1 Sistem Informasi Berbasis Web

2.2 Konsep CRUD

2.3 Konsep Dashboard Monitoring

2.4 DNS dan Resolusi A Record

2.5 Otentikasi pada Aplikasi Web

2.6 Teknologi yang Digunakan

• React
• TanStack Router
• TanStack Query
• tRPC
• PostgreSQL
• Drizzle ORM
• better-auth
• Effect
• Bun

BAB 3 - Analisis dan Perancangan Sistem

3.1 Analisis Kebutuhan

Kebutuhan Fungsional

• Admin dapat sign in untuk mengakses dashboard
• Sistem mengarahkan / ke /dashboard atau /login berdasarkan sesi
• Admin dapat mengelola data server
• Admin dapat mengelola data service
• Admin dapat mengelola data domain
• Admin dapat menjalankan DNS check untuk domain
• Admin dapat mengelola note server
• Admin dapat melihat note yang terkait langsung dari halaman detail server
• Sistem menampilkan ringkasan dashboard dan data terbaru

Kebutuhan Non-Fungsional

• Antarmuka sederhana dan student-friendly
• Relasi data dipilih melalui select input agar mengurangi kesalahan input ID manual
• Data list ditampilkan dengan urutan stabil
• Aksi hapus memakai konfirmasi dua langkah berbasis ikon

3.2 Perancangan Sistem

• Use case diagram
• Class diagram
• Activity diagram
• State chart diagram
• Sequence diagram
• Collaboration diagram

3.3 Perancangan Database

• Tabel server
• Tabel service
• Tabel domain
• Tabel note
• Tabel auth bawaan better-auth
• Relasi:
  • server -> services
  • server -> notes
  • service -> domains
• Aturan cascade delete pada relasi utama

3.4 Perancangan Antarmuka

• Halaman login (/login)
• Redirect root (/)
• Dashboard summary (/dashboard)
• Halaman list/detail/form server
• Halaman list/detail/form service
• Halaman list/detail/form domain
• Halaman list/detail/form note
• Section note terkait pada detail server

BAB 4 - Implementasi dan Pengujian

4.1 Implementasi Sistem

Backend

• Router tRPC untuk server, service, domain, note, dan dashboard summary
• Validasi relasi parent-child pada create/update
• DNS check menggunakan resolver IPv4 A record
• Persist hasil DNS check ke database

Frontend

• Protected routes untuk area dashboard
• CRUD forms dengan TanStack Form
• Select input untuk relasi:
  • service -> server
  • domain -> service
  • note -> server
• Resource tables dengan stable row key dan ordering stabil dari backend
• Delete action berbasis ikon dengan dua klik konfirmasi
• DNS status pada domain list sebagai tombol check dengan styling status badge

Authentication

• better-auth client + protected route redirect
• Akses tanpa sesi diarahkan ke /login

4.2 Pengujian

• Pengujian login admin
• Pengujian CRUD server
• Pengujian CRUD service
• Pengujian CRUD domain
• Pengujian CRUD note
• Pengujian select relasi pada form
• Pengujian DNS check domain
• Pengujian note terkait pada halaman detail server
• Pengujian ringkasan dashboard
• Pengujian typecheck web dan API

4.3 Hasil Pengujian

• Tabel atau screenshot untuk setiap skenario berhasil
• Bukti hasil DNS check (MATCH, MISMATCH, UNRESOLVED)
• Bukti relasi data tampil benar di halaman detail dan list

4.4 Evaluasi

Kelebihan

• Struktur data relasional jelas
• UI CRUD sudah konsisten dengan select untuk foreign key utama
• Ringkasan dashboard dan detail page saling terhubung
• DNS checking sudah terintegrasi langsung di alur domain

Keterbatasan

• DNS checking hanya untuk A record / IPv4
• Belum ada multi-role auth
• Belum ada fitur pagination, search, atau sorting manual dari UI
• Full workspace typecheck masih terhalang issue pre-existing pada apps/desktop

Saran Pengembangan

• Tambah filter, search, dan pagination
• Tambah histori DNS check
• Tambah role/permission management
• Tambah monitoring yang lebih luas selain DNS A record