Smart City Frontend #5: Pengembangan Fitur Interaksi Pengguna (Pencarian, Profil, dan Pemesanan Tiket) - Perwira Learning Center

 

1. Latar Belakang

    Pada pengembangan portal informasi, tidak hanya penyajian informasi yang menjadi fokus utama, tetapi juga interaksi antara pengguna dengan sistem. Fitur interaksi pengguna memungkinkan pengguna untuk berpartisipasi secara langsung, seperti mencari informasi, mengelola profil, hingga melakukan pemesanan. Pada artikel ini akan dibahas pengembangan fitur interaksi pengguna yang meliputi pencarian (search), profil pengguna, serta pemesanan tiket wisata dari sisi frontend.

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 Implementasi Fitur Pencarian

    Fitur pencarian digunakan untuk membantu pengguna menemukan informasi secara cepat berdasarkan kata kunci yang dimasukkan. Pada implementasinya, search bar diletakkan pada bagian utama halaman agar mudah diakses.

    Sistem pencarian dirancang untuk menampilkan hasil secara langsung berdasarkan input pengguna. Selain itu, ditambahkan fitur trending search untuk menampilkan kata kunci yang sering dicari.

3.2 Implementasi Profil Pengguna

    Menu profil pengguna ditampilkan lewat icon di atas kanan navbar, yang mana ketika di klik akan memunculkan dropdown "Profil Saya" dan "Riwayat Tiket". Masing-masing memiliki fungsi yang berbeda.

    Ketika "Profil Saya" di klik, maka akan memunculkan informasi seputar akun milik pengguna. Pengguna juga dapat merubah beberapa informasi tentang identitas sang pemilik akun.

3.3 Implementasi Fitur Pemesanan Tiket

    Fitur pemesanan tiket merupakan salah satu layanan utama dalam portal, khususnya pada modul wisata. Pada implementasinya, pengguna dapat mengakses fitur ini melalui halaman detail wisata dan dapat memesan tiket wisata tersebut pada tombol "Beli Tiket Sekarang".

    Setelah tombol di klik, pengguna akan diarahkan ke halaman pemesanan tiket dan mengharuskan pengguna untuk mengisi beberapa langkah pemesanan.

    Langkah pertama yang disediakan adalah untuk memilih tanggal kunjungan dan jumlah pengunjung yang datang.

    Langkah kedua yaitu mengisi beberapa identitas diri seperti nama, nomor yang aktif, email, dan lain-lain.

    Langkah terakhir yaitu memilih metode pembayaran yang disediakan secara digital. Metode-metode berikut masih bersifat sementara dan masih butuh pembaruan di masa yang akan datang.

    Setelah pemesanan selesai, pengguna akan melihat tata cara menunjukkan e-ticket yang telah didapat setelah membayar secara digital. E-ticket ini dapat dilihat di halaman "Riwayat Tiket" yang hanya berlaku sekali pakai setelah status tiket diubah menjadi "Sudah Digunakan" oleh staff wisata.

Berikut gambaran e-ticket yang di dapat oleh pengguna.

    Setelah tiket sudah digunakan, akan muncul sebuah notifikasi untuk memberikan rating wisata di halaman Riwayat Tiket milik pengguna dan hasil rating ini akan muncul pada bagian informasi wisata.

3.4 Kendala dan Solusi

Kendala:

• Data masih statis (belum dinamis)
• Fitur pencarian belum optimal
• Belum ada sistem autentikasi pengguna
• Pemesanan tiket belum terintegrasi

Solusi:

• Menyiapkan struktur untuk integrasi backend
• Mengembangkan algoritma pencarian
• Menambahkan sistem login dan database
• Integrasi dengan sistem pembayaran

4. Referensi

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