Smart City Frontend #3: Pengembangan Modul Wisata dan Detail Informasi Wisata - Perwira Learning Center

 

1. Latar Belakang

    Modul wisata merupakan salah satu fitur utama dalam portal informasi smart city yang berfungsi untuk memperkenalkan berbagai destinasi wisata kepada masyarakat. Melalui modul ini, pengguna dapat memperoleh informasi lengkap mengenai tempat wisata serta melakukan interaksi lebih lanjut seperti melihat detail dan melakukan pemesanan tiket. Pada artikel ini akan dibahas proses pengembangan modul wisata dari sisi frontend, mulai dari perancangan hingga implementasi tampilan.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lainnya)

- Visual Studio Code (atau text editor lainnya)

- Laravel 12.0

- React 

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Konsep Modul Wisata

    Modul wisata dirancang sebagai media informasi yang menyajikan data destinasi secara terstruktur dan menarik. Informasi yang ditampilkan meliputi nama tempat wisata, deskripsi singkat, gambar wisata, lokasi atau alamat, fasilitas yang disediakan, dan berbagai informasi bermanfaat lainnya.   Selain sebagai media informasi, modul ini juga menjadi pintu masuk menuju fitur lain seperti detail wisata, dan pemesanan tiket.

3.2 Perancangan Halaman Wisata

    Khusus untuk halaman wisata, tampilan disediakan secara lebih informatif ketika card wisata di klik oleh pengguna.

• Detail Wisata

• Pemesanan Tiket

3.3 Implementasi Halaman

    Pada tahap implementasi, perancangan modul wisata direalisasikan ke dalam bentuk tampilan antarmuka menggunakan teknologi frontend yang telah ditentukan. Proses ini meliputi pembuatan halaman daftar wisata, halaman detail wisata, serta integrasi menuju fitur pemesanan tiket. 

a. Implementasi Detail Wisata

    Halaman ini berfungsi untuk menampilkan informasi mendetail mengenai suatu wisata. Selain itu, pada halaman detail wisata, disediakan juga fitur pemesanan tiket wisata.

b. Pemesanan Tiket

    Sistem pemesanan tiket ini menyediakan beberapa metode pembayaran, mulai dari transfer bank hingga e-wallet sejenisnya.

    Proses pemesanan tiket juga dibagi menjadi beberapa tahap, dimulai dari mengisi informasi kunjungan, mengisi identitas pengunjung, dan memilih metode pembayaran yang disediakan secara digital.

3.4 Struktur Data Dummy

    Selama pengembangan informasi wisata ini, dibutuhkan sebuah data yang bersifat dummy untuk membantu proses testing tampilan. Pada tahap ini, saya mulai membuat sebuah Mock Data dan mengelompokkannya pada satu file JavaScript.

export const wisataData = [
    {
        id: 1,
        nama: 'Owabong Water Park',
        slug: 'owabong-water-park',
        kategori: 'Rekreasi',
        gambar: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=600&q=80',
        lokasi: 'Kec. Bojongsari, Purbalingga',
        kecamatan: 'Bojongsari',
        deskripsi: 'Objek wisata air terpopuler di Purbalingga dengan berbagai wahana seru dan kolam renang modern yang menjadi favorit keluarga.',
        deskripsi_panjang: 'Owabong (Obyek Wisata Air Bojongsari) adalah taman air terbesar dan terpopuler di Kabupaten Purbalingga. Dengan luas area lebih dari 5 hektar, Owabong menawarkan berbagai wahana air yang seru dan aman untuk seluruh keluarga.',
        harga_dewasa: 50000,
        harga_anak: 35000,
        rating: 4.5,
        ulasan: 2847,
        jam_buka: '08:00 – 17:00 WIB',
        fasilitas: 'Parkir, Mushola, Food Court',
        kontak: '(0281) 892234',
        lat: -7.3642,
    },
        lng: 109.3456,

    Data-data tersebut akan disamakan dengan kolom pada tabel database yang akan saya gunakan nantinya.

3.5 Kesimpulan

    Modul wisata merupakan bagian penting dalam portal informasi smart city karena menyediakan informasi yang dibutuhkan oleh pengguna terkait destinasi wisata. Melalui implementasi yang telah dilakukan, modul ini berhasil menampilkan daftar dan detail wisata dengan baik. Meskipun masih menggunakan data statis, struktur yang telah dibuat siap untuk dikembangkan lebih lanjut ke tahap backend.

4. Referensi

Pemerintah Kabupaten Purbalingga. (n.d.). Portal resmi Kabupaten Purbalingga. https://www.purbalinggakab.go.id/