Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Pengembangan Fitur Reservasi Field Trip pada Website Ecotainment Godong Ijo Menggunakan Metode Waterfall Amelia Setya Puspa1.
Aditya Wicaksono*2.
Doni Sahat Tua Manalu3.
Nur Aziezah4, .
Veralianta Br Sebayang5, .
Hikmah Rahmah6, .
Hari Agung Adrianto7 1,2,4 Program Studi Teknologi Rekayasa Perangkat Lunak.
Sekolah Vokasi.
Institut Pertanian Bogor.
3,5 Program Studi Manajemen Agribisnis.
Sekolah Vokasi.
Institut Pertanian Bogor.
6Universitas Mitra Bangsa 7 Departemen Ilmu Komputer.
Sekolah Sains Data.
Matematika, dan Informatika.
Institut Pertanian Bogor.
Email: 1ameliasetyapuspa@apps.
id, 2adityawicaksono@apps.
id , 3donisahat@apps.
nuraziezah@apps.
id , 5vera_bayang@apps.
id , 6 hikmah.
rahmah@gmail.
com, 7agung@apps.
*Penulis Korespondensi Abstrak Pengembangan sistem reservasi berbasis web pada Ecotainment Godong Ijo dilakukan untuk menggantikan proses reservasi manual yang kurang efisien dan rawan kesalahan.
Sistem ini dirancang agar pelanggan dapat melakukan reservasi field trip secara daring dengan fitur yang mencakup pemilihan paket, aktivitas, makanan, dan metode pembayaran seperti down payment maupun full payment.
Penelitian ini menggunakan metode Waterfall yang terdiri dari tahap komunikasi, perencanaan, pemodelan, konstruksi, dan penyebaran.
Implementasi dilakukan menggunakan Vue.
js untuk antarmuka pengguna.
Laravel untuk backend, serta MySQL sebagai basis data.
Pengujian sistem dilakukan dengan metode black-box testing untuk memastikan setiap fitur berjalan sesuai spesifikasi.
Hasil pengujian menunjukkan bahwa seluruh fungsi utama sistem bekerja dengan baik dan mendukung kebutuhan operasional Ecotainment Godong Ijo.
Sistem ini diharapkan dapat meningkatkan efisiensi proses reservasi serta memberikan pengalaman yang lebih nyaman bagi pengguna.
Kata kunci: Field Trip.
Laravel.
Reservasi.
Vue.
Waterfall Abstract This study presents the development of a web-based reservation system for Ecotainment Godong Ijo to replace the inefficient and error-prone manual booking process.
The system enables customers to make field trip reservations online, including features such as package selection, activity and meal options, and flexible payment methods such as down payment and full payment.
The development followed the Waterfall method, which includes communication, planning, modeling, construction, and deployment phases.
The implementation utilizes Vue.
js for the user interface.
Laravel for the backend, and MySQL as the database.
The system was tested using black-box testing to verify each feature according to its specifications.
The results indicate that the system functions well and meets the operational needs of Ecotainment Godong Ijo.
The developed system is expected to improve reservation efficiency and provide a better user experience.
Keywords: Field Trip.
Laravel.
Reservation.
Vue.
Waterfall PENDAHULUAN Godong Ijo merupakan destinasi ekowisata yang menyelenggarakan program field trip interaktif bernama Ecotainment Godong Ijo, ditujukan untuk anak sekolah dan masyarakat umum.
Saat ini, proses reservasi masih dilakukan secara manual, yang sering kali menimbulkan kendala seperti keterlambatan, ketidakakuratan data, dan ketidaknyamanan bagi pelanggan.
Ketergantungan pada metode tersebut juga dapat menghambat kelancaran operasional.
Digitalisasi layanan reservasi menjadi langkah strategis untuk menyederhanakan proses, mengurangi beban administrasi, dan memastikan pengelolaan data yang lebih tertata .
Sistem informasi berbasis web memiliki potensi besar untuk memberikan solusi atas masalah Penerapan sistem reservasi berbasis web dapat memberikan aksesibilitas yang lebih baik, memungkinkan pelanggan untuk melakukan pemesanan kapan saja dan di mana saja .
Selain itu, sistem berbasis web juga mendukung pengelolaan data secara real-time, sehingga memberikan pengalaman pelanggan yang lebih baik dan meningkatkan kepuasan pelanggan .
Hal ini sejalan dengan kebutuhan Halaman - 320 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Ecotainment Godong Ijo untuk memberikan layanan yang lebih profesional dan ramah digital kepada para Penelitian ini berfokus pada pengembangan fitur reservasi field trip berbasis web untuk Ecotainment Godong Ijo.
Sebagai destinasi wisata edukatif yang memadukan pembelajaran dan rekreasi.
Godong Ijo memiliki kebutuhan khusus dalam pengelolaan program field trip.
Digitalisasi sistem reservasi diharapkan tidak hanya menyederhanakan proses administrasi, tetapi juga mendukung pengelolaan data yang lebih tertata dan menjangkau pelanggan lebih luas .
Melalui sistem ini, pelanggan dapat mengakses informasi jadwal, fasilitas, dan harga secara langsung dan terkini .
Metode Waterfall dipilih karena pendekatannya yang terstruktur dan sistematis.
Setiap tahap mulai dari komunikasi hingga penyebaran dilaksanakan secara berurutan untuk memastikan terpenuhinya kebutuhan pengguna.
Metode ini cocok digunakan pada proyek dengan spesifikasi yang jelas sejak awal .
Setiap fase menghasilkan keluaran yang terukur dan terverifikasi, mendukung keberhasilan implementasi sistem di Godong Ijo.
II.
METODE PENELITIAN
Penelitian ini menggunakan metode Waterfall, yaitu model pengembangan perangkat lunak berurutan yang memastikan setiap tahapan diselesaikan secara sistematis sebelum melanjutkan ke tahap Tahapan metode Waterfall dapat dilihat pada Gambar 1.
Gambar 1.
Tahapan Metode Waterfall Sumber: Buku Software Engineering a Practitioner's Approach 9th Edition .
Communication dilakukan melalui wawancara asynchronous dengan mitra Godong Ijo untuk mengidentifikasi kebutuhan sistem, menghasilkan fitur seperti reservasi online, pengelolaan data pelanggan, serta informasi jadwal, aktivitas, dan harga paket.
Planning mencakup penyusunan jadwal pengembangan, pemilihan teknologi, dan penetapan tahapan kerja sesuai metode waterfall.
Modeling meliputi perancangan sistem menggunakan diagram UML (Unified Modeling Languag.
, meliputi diagram use case, activity.
ERD (Entity Relationship Diagra.
untuk basis data, dan class diagram untuk struktur Antarmuka dirancang bertahap melalui wireframe .
ow fidelit.
dan desain visual .
igh fidelit.
Construction mencakup pengembangan frontend dengan Vue.
js dan backend dengan Laravel, terhubung melalui RESTful API dan menyimpan data di MySQL.
Sistem diuji dengan black-box testing untuk memastikan fitur berjalan sesuai spesifikasi.
Deployment dilakukan setelah pengujian, termasuk konfigurasi server agar sistem siap digunakan oleh pengguna.
HASIL DAN PEMBAHASAN
Komunikasi (Communicatio.
Pada tahap Communication, proses pengumpulan kebutuhan sistem dilakukan melalui wawancara secara asynchronous bersama mitra Godong Ijo pada tanggal 26 Februari 2025 melalui platform Zoom.
Wawancara ini melibatkan Ibu Jane Nadeak selaku Manajer Ecotainment Godong Ijo beserta timnya.
Diskusi diawali dengan menggali proses bisnis reservasi field trip Ecotainment Godong Ijo dari awal hingga akhir, mulai dari pemesanan hingga pembayaran.
Selanjutnya, penulis memaparkan rancangan fitur yang akan dikembangkan, seperti daftar paket, pengecekan ketersediaan paket, metode pembayaran .
own payment dan full paymen.
, proses persetujuan pembayaran oleh admin, serta daftar reservasi yang dapat diakses oleh customer.
Wawancara ditutup dengan pembahasan mengenai Halaman - 321 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 pembatasan jumlah pengunjung pada aktivitas tertentu dan pembagian sesi pagi atau siang, yang menjadi acuan penting dalam desain sistem reservasi.
Perencanaan (Plannin.
Untuk mengelola waktu dan pengerjaan sistem secara efektif, proses pengembangan dirancang berdasarkan pembagian modul fungsional.
Setiap modul dikembangkan sesuai prioritas dan keterkaitannya, dengan estimasi waktu pelaksanaan yang realistis.
Tabel berikut menunjukkan jadwal pengembangan sistem berdasarkan modul.
Rincian jadwal pengembangan sistem dapat dilihat pada Tabel 1 berikut.
Tabel 1.
Jadwal Pengembangan Sistem Modul Unified Modeling Language (UML) Waktu Pelaksanaan Modul Autentikasi admin & customer Modul Data Customer & Reservasi Modul Paket.
Aktivitas.
Makanan Modul Pembayaran & Invoice Modul Approval Admin Modul Riwayat & Detail Reservasi Meret 2025 .
inggu ke-2 & ke.
2 3 Pengujian & Deployment Maret 2025 .
inggu ke-.
Maret 2025 .
inggu ke-.
& April .
inggu ke-.
April 2025 .
inggu ke-2 & ke.
April 2025 .
inggu ke-.
Mei 2025 .
inggu ke-1 dan minggu ke-.
Mei 2025 .
inggu ke-.
Mei 2025 .
inggu ke-.
Output Use case diagram, activity diagram, entity relationship diagram, & class diagram Login, register, & dashboard Form reservasi, simpan data customer dan reservor Tampilan dan pemilihan paket, aktivitas, dan makanan Upload bukti bayar, generate invoice, validasi pembayaran Approve/reject pembayaran dan Daftar riwayat reservasi, status pembayaran & menampilkan Sistem diuji dan dipasang ke Selain penyusunan jadwal, tahap Planning juga mencakup pemilihan teknologi yang akan digunakan dalam pengembangan sistem.
Pemilihan dilakukan berdasarkan kebutuhan sistem, kemudahan integrasi, serta efisiensi dalam proses pengembangan.
Tabel 2 berikut menyajikan daftar komponen sistem beserta teknologi yang digunakan serta alasan pemilihannya.
Tabel 2.
Teknologi yang digunakan Komponen Frontend Teknologi Vue.
Backend Laravel 10 Database Desain Antarmuka MySQL Figma Alasan Pemilihan Mendukung SPA (Single Page Applicatio.
, interaktif, cocok untuk UI modern Framework PHP yang stabil, aman, dan cepat dalam development Ringan, stabil, cocok untuk data relasional Memudahkan pembuatan desain visual sebelum Pemodelan (Modelin.
Tahap Modeling bertujuan untuk menerjemahkan kebutuhan fungsional ke dalam bentuk rancangan visual.
Modeling dilakukan melalui beberapa pendekatan visual, antara lain diagram UML (Unified Modeling Languag.
, perancangan basis data, serta desain antarmuka pengguna.
Diagram pertama yang dibuat adalah use case diagram.
Use case diagram digunakan untuk menggambarkan apa saja yang dapat dilakukan aktor pada sistem secara umum .
Penyusunan use case diagram ini bertujuan untuk memberikan gambaran awal terhadap cakupan fungsionalitas sistem yang akan Halaman - 322 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Rancangan use case diagram untuk sistem reservasi field trip Ecotainment Godong Ijo ditampilkan pada Gambar 2.
Gambar 2.
Use Case Diagram Ecotainment Reservation System Setelah ruang lingkup fungsi sistem tergambar, langkah berikutnya adalah menyusun activity diagram untuk menjelaskan alur proses utama secara lebih rinci.
Activity diagram ini memetakan langkah demi langkah proses reservasi field trip, mulai dari pengisian data oleh customer hingga Halaman - 323 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 validasi pembayaran oleh admin.
Pada Gambar 3 ditampilkan contoh activity diagram untuk fungsi customer membuat reservasi baru.
Gambar 3.
Activity Diagram Membuat Reservasi Baru Halaman - 324 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Selanjutnya, untuk mendukung kebutuhan penyimpanan data, disusunlah Entity Relationship Diagram (ERD).
ERD menggambarkan struktur basis data sistem, termasuk entitas seperti customer, reservasi, paket kegiatan, aktivitas, makanan, pembayaran, dan relasi antar entitas tersebut.
Dengan adanya ERD, memudahkan implementasi pada sistem dengan membuatnya dalam bentuk model visual sebagai dasar pembuatan basis data .
Hasil rancangan ERD dapat dilihat pada Gambar 4.
Gambar 4.
Entity Relationship Diagram Ecotainment Reservation System Untuk melengkapi struktur data dan proses, dilakukan juga penyusunan class diagram guna memodelkan struktur objek dan relasinya.
Class diagram menyajikan atribut dan hubungan dari masingmasing kelas serta keterkaitannya .
Hal ini memudahkan proses pengembangan backend dengan pendekatan berorientasi objek menggunakan Laravel.
Gambar 5 menampilkan hasil pemodelan class diagram sistem reservasi field trip Ecotainment Godong Ijo.
Halaman - 325 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Gambar 5.
Class Diagram Ecotainment Reservation System Setelah aspek fungsional dan data dipetakan, fokus beralih ke aspek tampilan antarmuka pengguna.
Rancangan awal dibuat dalam bentuk wireframe (Low-Fidelity Desig.
, yang menampilkan sketsa sederhana dari layout halaman sistem seperti halaman form reservasi, detail reservasi, dan dashboard.
Tujuan wireframe adalah untuk memvalidasi struktur UI sebelum masuk ke tahap desain visual akhir.
Pada Gambar 6 ditampilkan contoh dari wireframe untuk halaman mengecek ketersediaan paket.
Gambar 6.
Wireframe Cek Ketersediaan Paket Sebagai tahap akhir dari modeling, disusunlah Hi-Fi Design (High-Fidelity Desig.
Desain ini mencerminkan tampilan akhir yang akan diimplementasikan dalam frontend menggunakan Vue.
js, dan menjadi pedoman visual bagi pengembang dalam menyusun antarmuka yang menarik dan responsif.
Gambar 7 menunjukan hasil desain halaman ketersediaan paket field trip setelah dilakukan proses Hi-Fi Design.
Halaman - 326 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Gambar 7.
Hi-Fi Cek Ketersediaan Paket Konstruksi (Constructio.
Tahap Construction merupakan fase di mana seluruh hasil perancangan sistem mulai diimplementasikan ke dalam bentuk kode program.
Proses ini diawali dengan pembangunan struktur basis data, yang disesuaikan dengan rancangan Entity Relationship Diagram (ERD) pada tahap Basis data dibangun menggunakan MySQL dan mencakup berbagai entitas utama seperti customer detail, reservor, reservasi, paket kegiatan, makanan, aktivitas, pembayaran, dan invoice.
Setiap tabel diatur untuk mendukung integrasi data antar fitur secara konsisten.
Implementasi struktur basis data sistem reservasi dapat dilihat pada Gambar 8.
Gambar 8.
Implementasi Basis Data Setelah struktur data selesai dibangun, langkah selanjutnya adalah pengembangan antarmuka pengguna menggunakan Vue.
Desain antarmuka yang telah dirancang pada tahap Modeling dijadikan acuan untuk membangun halaman frontend secara modular dan responsif.
Pengembangan mencakup halaman utama sistem seperti halaman registrasi, login, pemesanan reservasi, pemilihan paket, daftar aktivitas, riwayat reservasi, serta dashboard untuk admin.
Salah satu hasil implementasi antarmuka pengguna ditampilkan pada Gambar 9.
Halaman - 327 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Gambar 8.
Implementasi Frontend Pada isi backend, dilakukan implementasi Application Programming Interface (API) menggunakan framework Laravel 10, yang disusun berdasarkan struktur dan logika yang tergambar pada class Setiap fitur seperti pengelolaan reservasi, manajemen akun, pemrosesan pembayaran, dan verifikasi admin dikembangkan melalui model dan controller.
Seluruh endpoint dirancang mengikuti standar RESTful agar mudah diintegrasikan dengan frontend.
Proses selanjutnya adalah integrasi antara frontend dan backend, yang dilakukan secara bertahap mengikuti urutan pengembangan modul yang telah dirancang pada tahap Planning.
Setelah implementasi front-end menggunakan Vue.
js 3 dan back-end menggunakan Laravel 10 selesai, dilakukan proses integrasi untuk memastikan seluruh komponen sistem dapat berfungsi secara terpadu.
Selanjutnya, sistem diuji menggunakan metode black-box testing untuk memastikan bahwa setiap fitur memberikan keluaran .
yang sesuai dengan skenario penggunaan yang telah ditentukan.
Pengujian difokuskan pada fungsi-fungsi utama sistem tanpa melihat struktur kode program.
Tabel 3 berikut menyajikan hasil pengujian sistem pada fitur utama menggunakan metode black-box testing berdasarkan skenario test case yang telah disusun.
Tabel 3.
Hasil Blackbox Testing Modul Uji
Deskripsi Pengujian Ekspektasi
Status
TC01
Registrasi Mendaftar akun baru Email verifikasi akun terkirim ke Sesuai Customer dengan data lengkap email customer TC02 Verifikasi Customer melakukan Sistem menampilkan pesan akun Sesuai Email verifikasi dengan berhasil diverifikasi dan Customer menekan link pada email mengarahkan ke halaman login yang telah dikirim TC03 Login Pengguna melakukan Pengguna berhasil masuk ke Sesuai login dengan kredensial dashboard sesuai perannya yang benar TC04 Cek Customer input tanggal.
Sistem menampilkan paket yang Sesuai Kersediaan sesi, dan jumlah tersedia dan jumlah partisipan yang Paket Field Lalu menekan tersedia sesuai dengan ketersediaan.
Trip tombol AuReservasi Sistem menuju halaman reservasi SekarangAy paket untuk pengguna yang sudah Halaman - 328 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan TC05
Membuat Reservasi
Field Trip
TC06
Upload Bukti Pembayaran Down Payment (Admi.
Validasi Pembayaran Down Payment (Admi.
TC07 Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025 Customer mengisi form reservasi paket, makanan .
, daj pemesan secara lengkap dan Customer mengunggah bukti pembayaran Down Payment Reservasi tersimpan dalam Riwayat reservasi dan customer ditujukan ke halaman upload pembayaran Down Payment.
Sesuai File terunggah dan status pembayaran menunggu verifikasi Sesuai Admin memverifikasi pembayaran dengan status "approve" Status pembayaran DP berubah menjadi AuLunasAy, status reservasi berubah menjadi AuMenunggu PelunasanAy dan sistem mengirimkan notifikasi melalui email serta invoice untuk File terunggah, perubahan status pembayaran AuMenunggu VerifikasiAy dan status reservasi AuMenunggu Verifikasi PelunasanAy Status pembayaran FP berubah menjadi AuLunasAy, status reservasi berubah menjadi AuLunasAy dan sistem mengirimkan notifikasi melalui email.
Sesuai TC08
Upload Bukti
Pembayaran Full Payment
Customer mengunggah bukti pembayaran Full
Payment
TC09
Validasi Pembayaran Full Payment (Admi.
Admin memverifikasi pembayaran dengan status "approve" Sesuai Sesuai Penyebaran (Deploymen.
Setelah proses pengujian selesai dan sistem dinyatakan berjalan sesuai dengan fungsinya, tahap selanjutnya adalah Deployment.
Pada tahap ini, sistem diunggah ke server agar dapat diakses secara publik oleh pengguna melalui jaringan internet.
Konfigurasi dilakukan pada sisi hosting dan basis data untuk memastikan sistem dapat berjalan stabil dan aman.
Sistem yang telah di-deploy memungkinkan pelanggan untuk melakukan reservasi secara langsung, serta memungkinkan admin untuk memantau dan mengelola data reservasi pada dashboard.
IV.
KESIMPULAN
Berdasarkan hasil pengembangan dan pengujian sistem, dapat disimpulkan bahwa sistem reservasi field trip berbasis web pada website Ecotainment Godong Ijo telah berhasil dibangun dan berjalan sesuai dengan kebutuhan yang telah ditetapkan.
Sistem ini memungkinkan pelanggan untuk melakukan reservasi secara daring, memilih paket kegiatan, menambahkan pendamping dan makanan, serta mengunggah bukti pembayaran melalui antarmuka yang interaktif.
Penerapan metode Waterfall dalam pengembangan sistem ini terbukti mendukung proses kerja yang terstruktur dan terarah, mulai dari pengumpulan kebutuhan hingga tahap pengujian akhir.
Hasil pengujian menggunakan metode black-box testing menunjukkan bahwa seluruh fungsi utama dalam sistem berjalan dengan baik dan menghasilkan keluaran yang sesuai dengan Sistem yang telah dikembangkan masih memiliki ruang untuk pengembangan lebih lanjut.
Salah satu saran pengembangan yang dapat dilakukan adalah menambahkan fitur notifikasi otomatis melalui WhatsApp kepada pelanggan, yang berfungsi untuk menginformasikan status reservasi, konfirmasi pembayaran, maupun pengingat jadwal kunjungan.
Fitur ini diharapkan dapat meningkatkan kenyamanan pengguna serta memperkuat komunikasi antara pengelola dan pelanggan.
Halaman - 329 Prosiding Seminar Nasional KARSA NUSANTARA Kolaborasi Rekayasa dan Sains Nasional untuk Teknologi.
Riset, dan Kecerdasan Buatan Fakultas Teknik.
Universitas Wijaya Kusuma Surabaya ISSN 3090-1154 (Media Onlin.
Volume 2.
Tahun 2025
REFERENSI