Seri Studi Kasus: Aplikasi Wisata Indonesia (Node.js + React + MySQL)
Tujuan Akhir: Membangun aplikasi web yang menampilkan informasi tempat wisata, penginapan, dan transportasi di Indonesia, lengkap dengan galeri foto, fasilitas, dan paket harga. Aplikasi memiliki halaman publik (daftar dan detail) serta halaman admin untuk mengelola konten.
Tahap Persiapan dan Perancangan
-
Studi Kasus #1: Gambaran Proyek dan Perancangan Database
- Memahami kebutuhan fitur: tempat wisata, penginapan, transportasi, galeri, paket harga.
- Merancang ERD dan struktur tabel MySQL (destinations, accommodations, transportations, categories, galleries, packages, dll).
-
Studi Kasus #2: Persiapan Lingkungan Development
- Instalasi Node.js, MySQL, React (Vite/CRA), Postman, VS Code.
- Membuat folder proyek terpisah untuk backend dan frontend.
Backend (Node.js + Express + MySQL)
-
Studi Kasus #3: Membuat Server Express dan Koneksi Database
- Inisialisasi proyek Node.js, instalasi package (express, mysql2, cors, dotenv, multer).
- Konfigurasi koneksi ke MySQL dan membuat fungsi query dasar.
-
Studi Kasus #4: Membuat API untuk Kategori (Categories)
- CRUD kategori tempat wisata/penginapan/transportasi.
- Uji endpoint dengan Postman.
-
Studi Kasus #5: Membuat API untuk Tempat Wisata (Destinations)
- Endpoint GET, POST, PUT, DELETE untuk data wisata.
- Menyertakan relasi dengan kategori dan galeri (gambar cover).
-
Studi Kasus #6: Membuat API untuk Penginapan (Accommodations)
- API serupa dengan destinations, dengan informasi kamar dan fasilitas.
-
Studi Kasus #7: Membuat API untuk Transportasi
- API untuk data transportasi (jenis, rute, dll).
-
Studi Kasus #8: Mengelola Galeri Foto (Upload dan Penyajian Gambar)
- Menggunakan multer untuk upload gambar.
- Endpoint untuk menambah dan mengambil gambar berdasarkan entitas (destinasi/penginapan/transportasi).
-
Studi Kasus #9: Membuat API untuk Paket dan Harga (Packages)
- Menangani data paket/layanan (misal: "Paket Reguler", "Hotel Kamar Deluxe") beserta harga.
- Relasi dengan destinations/accommodations/transportations.
-
Studi Kasus #10: Menambahkan Autentikasi JWT untuk Admin
- Membuat endpoint register/login.
- Proteksi rute admin menggunakan middleware.
Frontend (React)
-
Studi Kasus #11: Inisialisasi React dan Setup Router
- Membuat proyek React dengan Vite, install react-router-dom.
- Struktur folder komponen dan halaman.
-
Studi Kasus #12: Menghubungkan Frontend dengan Backend (Axios)
- Instalasi axios, membuat service untuk memanggil API.
- Menampilkan data dari API di console sebagai tes.
-
Studi Kasus #13: Membuat Halaman Beranda (Daftar Wisata)
- Menampilkan card tempat wisata dengan foto cover, nama, lokasi, dan deskripsi singkat.
- Mengambil data dari API destinations.
-
Studi Kasus #14: Membuat Halaman Detail Tempat Wisata
- Menampilkan informasi lengkap: deskripsi, fasilitas, galeri foto, paket harga.
- Menggunakan parameter ID di URL.
-
Studi Kasus #15: Membuat Halaman Penginapan dan Detailnya
- Sama seperti wisata, untuk data penginapan.
-
Studi Kasus #16: Membuat Halaman Transportasi dan Detailnya
- Menampilkan daftar transportasi dan detail layanan.
-
Studi Kasus #17: Menambahkan Filter Berdasarkan Kategori
- Dropdown atau tab untuk memilih kategori (wisata, penginapan, transportasi) di halaman utama.
-
Studi Kasus #18: Fitur Pencarian (Search)
- Search bar untuk mencari berdasarkan nama atau lokasi.
Fitur Lanjutan & Integrasi
-
Studi Kasus #19: Membuat Halaman Admin (CRUD) Sederhana
- Halaman untuk menambah, mengedit, dan menghapus data (destinasi, penginapan, transportasi, paket).
- Form dengan upload gambar.
-
Studi Kasus #20: Proteksi Rute Admin dengan Autentikasi
- Implementasi login di frontend, menyimpan token JWT.
- Membatasi akses ke halaman admin hanya jika sudah login.
-
Studi Kasus #21: Mengelola State Global dengan Context API
- Membuat context untuk data keranjang (jika ada fitur pemesanan) atau notifikasi.
-
Studi Kasus #22: Menampilkan Galeri Foto dengan Lightbox
- Saat gambar di klik, tampil dalam ukuran besar dengan navigasi.
Deployment
-
Studi Kasus #23: Deployment Backend ke Platform Cloud (Render/Cyclic)
- Menyiapkan environment variables, mengubah koneksi database ke cloud (misal Aiven).
- Deploy dan testing API.
-
Studi Kasus #24: Deployment Frontend ke Netlify/Vercel
- Build React, mengatur environment variables untuk URL API.
- Deploy dan menghubungkan ke backend.
Penutup
-
Studi Kasus #25: Uji Coba, Evaluasi, dan Pengembangan Lebih Lanjut
- Menjalankan aplikasi secara keseluruhan.
- Ide fitur tambahan: sistem pemesanan, rating, komentar, peta interaktif.