Tulis:
- Judul aplikasi
- Latar belakang aplikasi
- Masalah pengguna yang ingin diatasi
Jelaskan setidaknya tiga fitur yang diimplementasikan:
- Cara kerja fitur tersebut
- Nilai tambah fitur tersebut
- Teknologi dan Alasan Pemilihan Sebutkan:
- Teknologi front-end
- Teknologi back-end
- Sistem penyimpanan data
- Alasan memilih teknologi tersebut
Tulis:
- Tautan repositori
- Panduan instalasi dan peluncuran aplikasi
- Struktur file utama
Jelaskan:
- Tanggung jawab Anda
- Kesulitan yang dihadapi
- Solusi yang diimplementasikan
- Penilaian hasil kerja Anda sendiri
Tuliskan:
- Keterampilan atau pemahaman baru
- Bagian yang paling menantang
* Background of the application: Trevio adalah aplikasi berbasis web yang dirancang untuk mempermudah proses pencarian dan pemesanan hotel secara daring. Latar belakang dari pembuatan aplikasi ini berasal dari kebutuhan yang semakin meningkat di kalangan masyarakat untuk bepergian dengan cara yang lebih efisien, hemat waktu, dan praktis. Dalam dunia yang semakin serba digital, banyak orang mulai meninggalkan metode konvensional dan memilih layanan online yang cepat dan mudah digunakan. Namun, kenyataannya, tidak semua platform menyediakan pengalaman pemesanan yang lengkap dan terintegrasi. Oleh karena itu, Trevio hadir sebagai solusi all-in-one yang memungkinkan pengguna mencari, membandingkan, dan memesan hotel hanya dalam beberapa langkah sederhana, tanpa perlu membuka banyak aplikasi atau situs.
* User problems it aims to address: Pengguna sering kali mengalami kesulitan dalam menemukan hotel yang sesuai dengan anggaran, lokasi strategis, dan fasilitas yang mereka butuhkan. Selain itu, proses pemesanan hotel secara manual seperti menelepon pihak hotel atau mengunjungi situs berbeda untuk membandingkan informasi sering kali tidak efisien dan memakan waktu. Masalah lain yang umum adalah kurangnya informasi detail dan visualisasi yang memadai, sehingga pengguna merasa ragu sebelum mengambil keputusan. Trevio ingin menyelesaikan semua permasalahan ini dengan menyatukan fitur pencarian, filter, tampilan detail hotel, dan sistem pemesanan dalam satu aplikasi yang intuitif dan user-friendly.
Cara kerja: Pengguna memasukkan kata kunci seperti nama kota atau destinasi, lalu sistem akan menampilkan daftar hotel yang tersedia dari database. Pengguna juga dapat menerapkan filter berdasarkan harga, bintang hotel, fasilitas tertentu, dan lainnya. Sistem memanfaatkan query SQL untuk mencari hasil paling relevan dan menampilkannya dalam tampilan yang rapi dan mudah dipahami. Nilai tambah: Fitur ini memudahkan pengguna untuk langsung menemukan hotel yang sesuai preferensi tanpa harus melihat satu per satu. Filter yang beragam juga membuat pengalaman pencarian lebih cepat, personal, dan menyenangkan, serta menghemat waktu pengguna secara signifikan.
Cara kerja: Setelah pengguna memilih salah satu hasil pencarian, mereka akan diarahkan ke halaman detail hotel. Halaman ini menyajikan informasi lengkap seperti nama hotel, lokasi, rating, ulasan pengguna (jika ada), daftar fasilitas, tipe kamar yang tersedia, harga per malam, dan galeri foto hotel. Nilai tambah: Dengan informasi yang lengkap dan visual yang mendukung, pengguna bisa mengambil keputusan dengan lebih percaya diri. Adanya galeri gambar juga membantu pengguna untuk membayangkan suasana hotel, yang menjadi faktor penting dalam proses pemesanan.
Cara kerja: Setelah memilih hotel dan kamar, pengguna dapat mengisi form booking yang terdiri dari data pribadi, tanggal menginap, dan preferensi lainnya. Data ini akan disimpan ke dalam database dan ditampilkan pada halaman konfirmasi sebelum proses pembayaran dilakukan. Nilai tambah: Proses booking yang terintegrasi secara langsung membuat pengguna tidak perlu lagi menghubungi pihak hotel secara manual. Selain itu, dengan sistem konfirmasi yang langsung tampil, pengguna bisa memastikan semua data sudah benar sebelum melanjutkan ke pembayaran, sehingga mengurangi potensi kesalahan.
* Reasons for choosing the technology: HTML dan Tailwind CSS dipilih karena keduanya ringan, mudah digunakan, dan cocok untuk membangun antarmuka yang bersih serta responsif. Tailwind sangat cocok untuk desain mobile-first dan memberikan kemudahan dalam proses styling dengan class utility yang fleksibel. PHP dipilih karena sudah banyak digunakan di berbagai proyek web, mudah dipelajari, dan mendukung integrasi dengan sistem database secara efisien. Sementara itu, MySQL merupakan sistem penyimpanan data yang andal dan cocok untuk menyimpan informasi relasional, seperti data hotel, kamar, pengguna, dan transaksi booking. Semua teknologi ini sangat mendukung pengembangan proyek berskala kecil hingga menengah dengan keterbatasan waktu dan sumber daya.
-
Repository link: https://github.com/Buthzz/trevio-project.git (branch: development)
-
Application installation and launch guide:
- Clone repository dari GitHub menggunakan perintah git clone.
- Buat database baru di MySQL, kemudian import file SQL yang terdapat di folder database/trevio_final.sql.
- Buka file config/database.php dan sesuaikan konfigurasi koneksi database (DB_HOST, DB_NAME, DB_USER, DB_PASSWORD).
- Arahkan web server (XAMPP/Laragon) ke folder public/ sebagai root directory.
- Akses aplikasi melalui browser dengan alamat http://localhost/trevio-project/public
- Pastikan semua dependensi berjalan baik seperti versi PHP sesuai dan modul database aktif.
-
Main file structure:
- app/views/ : berisi file tampilan halaman frontend untuk user.
- app/controllers/ : mengatur proses logika aplikasi dan pengolahan data.
- public/ : folder untuk file publik seperti CSS, JavaScript, dan gambar.
- database/ : berisi file struktur database dan data awal yang bisa di-import.
5.Your responsibilities: Saya bertugas di bagian desain UI/UX serta implementasi halaman frontend untuk customer, meliputi landing page, halaman hasil pencarian, detail hotel, dan form booking. Di sisi backend, saya juga mengerjakan logika pencarian hotel dengan membuat SearchController yang menyesuaikan query berdasarkan input pengguna.
* Difficulties encountered: Tantangan terbesar saya adalah adaptasi dengan Tailwind CSS karena sebelumnya saya lebih terbiasa dengan CSS konvensional. Selain itu, membuat desain yang benar-benar responsif untuk berbagai ukuran layar juga cukup menyita waktu. Membuat logika pencarian hotel yang fleksibel tetapi tetap efisien juga menjadi tantangan tersendiri.
* Solutions implemented: Saya menyiasatinya dengan membaca dokumentasi Tailwind secara rutin, mencoba berbagai pendekatan untuk membuat komponen UI yang konsisten, serta melakukan testing terus-menerus di berbagai device. Saya juga berdiskusi dengan tim backend untuk memastikan query SQL yang saya susun sudah optimal dan tidak membebani sistem.
* Assessment of your own work results: Saya cukup puas dengan hasil yang saya capai. Semua halaman yang menjadi tanggung jawab saya berhasil ditampilkan dengan baik, desain UI konsisten dan bersih, serta fungsi pencarian berjalan dengan baik. Saya juga berhasil memastikan bahwa halaman dapat berjalan lancar di berbagai perangkat, baik desktop maupun mobile.
* New skills or understanding: Saya memperoleh banyak pemahaman baru, khususnya dalam penggunaan Tailwind CSS dan penerapan prinsip mobile-first dalam desain UI. Selain itu, saya juga belajar menyusun query SQL untuk keperluan pencarian yang dinamis, serta memahami struktur MVC meskipun tanpa framework.
* Most challenging part: Bagian paling menantang adalah menyusun tampilan responsif yang tidak hanya terlihat bagus, tapi juga fungsional dan bisa beradaptasi terhadap berbagai kondisi data. Menghubungkan frontend dengan backend dan memastikan semuanya sinkron juga menjadi bagian penting yang perlu banyak percobaan dan debugging untuk menyempurnakannya.
Latar Belakang: Aplikasi ini dikembangkan sebagai solusi untuk memudahkan wisatawan dalam memesan akomodasi dan layanan travel secara online. Dalam industri pariwisata, calon pelancong sering harus menggunakan banyak situs atau agen untuk mencari hotel dan penerbangan terpisah. Trevio hadir dengan latar belakang kebutuhan akan satu platform terpadu yang menyederhanakan proses pencarian hingga pemesanan. Proyek ini juga merupakan implementasi praktis dari pembelajaran pengembangan web terpadu (front-end, back-end, database) dalam satu aplikasi real-world.
Masalah Pengguna yang Diatasi: Trevio mengatasi beberapa masalah umum yang dihadapi pengguna. Pertama, kesulitan mencari dan membandingkan hotel – pengguna dapat dengan mudah mencari hotel sesuai lokasi, harga, atau fasilitas yang diinginkan, sehingga tidak perlu membuka banyak platform lain. Kedua, proses pemesanan manual yang tidak efisien – melalui Trevio, pemesanan kamar hotel dapat dilakukan secara online dengan cepat tanpa harus menelepon atau datang langsung. Ketiga, keterbatasan informasi – aplikasi ini memberikan detail lengkap (deskripsi, foto, ketersediaan kamar, ulasan) sehingga pengguna dapat membuat keputusan dengan informasi yang memadai. Bagi pemilik hotel, Trevio juga membantu mereka menjangkau lebih banyak pelanggan secara digital dan mengelola pemesanan dengan lebih terorganisir. Daftar Fitur dan Penjelasannya
Pencarian dan Filter Hotel: Aplikasi menyediakan fitur pencarian hotel dimana pengguna dapat memasukkan lokasi/tujuan, tanggal, atau kata kunci tertentu. Sistem akan melakukan query database untuk menampilkan daftar hotel yang sesuai dengan kriteria pencarian tersebut. Pengguna juga bisa memfilter hasil (misalnya berdasarkan harga atau kategori). Cara kerja: pengguna mengisi form pencarian di halaman landing, lalu SearchController pada back-end memproses input ini dengan menjalankan perintah SQL SELECT untuk mengambil data hotel yang cocok. Nilai tambah: fitur ini memudahkan pengguna menemukan opsi penginapan yang paling relevan dengan cepat, tanpa harus melihat semua hotel satu per satu. Filter yang tersedia membantu menyaring hasil sehingga pengalaman pencarian lebih efisien dan personal.
Halaman Detail Hotel: Setiap hotel dalam hasil pencarian dapat diklik untuk melihat informasi detail. Halaman detail hotel menampilkan deskripsi lengkap hotel, fasilitas yang tersedia, foto-foto, tipe kamar beserta harga, dan ulasan (jika ada). Cara kerja: front-end menampilkan data detail yang diambil dari basis data (melalui model Hotel dan Room) untuk hotel terpilih. Jika pengguna memilih tanggal menginap, halaman ini juga dapat menampilkan ketersediaan kamar. Nilai tambah: fitur ini memberikan transparansi dan informasi lengkap sebelum booking – pengguna dapat menilai apakah hotel tersebut cocok dengan kebutuhannya. Dengan adanya detail lengkap dalam satu halaman, pengguna tidak perlu mencari informasi di tempat lain, sehingga proses pengambilan keputusan lebih cepat.
Pemesanan Kamar (Booking): Trevio memungkinkan pengguna melakukan pemesanan kamar hotel langsung dari aplikasi. Setelah memilih hotel dan kamar, pengguna dapat mengisi formulir booking (data diri, tanggal check-in/out, dll) di halaman Booking. Cara kerja: ketika formulir pemesanan dikirim, BookingController (bagian back-end) akan menyimpan data pemesanan ke database. Sistem juga terintegrasi dengan metode pembayaran: pengguna mendapatkan instruksi pembayaran online, dan admin akan memverifikasi pembayaran tersebut melalui panel admin. Nilai tambah: fitur booking online ini mengotomatisasi proses pemesanan yang sebelumnya manual. Pengguna mendapatkan kemudahan karena bisa memesan kapan saja dan langsung mendapat konfirmasi ketersediaan. Terintegrasinya pembayaran online membuat proses transaksi aman dan cepat; pengguna cukup mengikuti petunjuk pembayaran (misalnya melalui gateway Xendit) tanpa khawatir konfirmasi, karena sistem akan mencatat status pembayaran dan bahkan mendukung proses refund jika terjadi pembatalan.
Teknologi dan Alasan Pemilihan
Front-end: Aplikasi ini dibangun menggunakan HTML, CSS (Tailwind CSS), dan sedikit JavaScript untuk interaksi dasar. Dipilihnya Tailwind CSS sebagai kerangka kerja CSS utama karena pendekatan utility-first-nya mempercepat proses styling dan memastikan konsistensi desain sesuai Design System. Tailwind juga memudahkan pembuatan tampilan responsif (mobile-first) berkat utility classes yang siap pakai, sehingga pengalaman pengguna di berbagai ukuran layar tetap optimal. Selain itu, tim sudah familiar dengan HTML dan CSS dasar, sehingga integrasi Tailwind terasa ringan tanpa kurva belajar yang terlalu tinggi.
Back-end: Teknologi back-end yang digunakan adalah PHP dengan arsitektur MVC sederhana (tanpa framework besar seperti Laravel). Tim mengimplementasikan struktur MVC manual: folder controllers, models, dan views dikelola sendiri. Alasan pemilihan PHP adalah karena kemudahan penggunaan dan ketersediaannya yang luas. PHP cocok untuk proyek web seperti ini dan banyak pustaka tambahan (misal PHPMailer untuk email, integrasi WhatsApp API) yang siap digunakan. Dengan MVC, kode menjadi lebih terstruktur: logic terpisah dari tampilan, sehingga pengembangan oleh beberapa anggota tim (front-end & back-end) bisa paralel. PHP juga dipilih karena tim sudah pernah mempelajarinya dalam perkuliahan dan hosting PHP-MySQL mudah didapat (sesuai kebutuhan deployment di server).
Penyimpanan Data: Untuk database, MySQL (MariaDB) digunakan sebagai sistem manajemen basis data relasional. MySQL dipilih karena sudah menjadi standar umum untuk aplikasi web, mendukung relasi data yang kompleks (antar table seperti users, hotels, rooms, bookings, payments, dll), serta handal menangani transaksi. MySQL juga terintegrasi baik dengan PHP (tersedia ekstensi mysqli/PDO), sehingga mempermudah implementasi query dan operasi CRUD dari kode PHP. Selain itu, pilihan MySQL didukung oleh pertimbangan bahwa tim telah mendesain schema database (lihat database/trevio_final.sql) secara relasional untuk memastikan konsistensi data (misal menjaga integritas data booking, ketersediaan kamar, transaksi pembayaran).
Alasan Pemilihan: Secara umum, kombinasi teknologi di atas dipilih dengan pertimbangan kemudahan, familiaritas tim, dan kebutuhan fungsional proyek. Tailwind CSS dan PHP-MySQL adalah teknologi yang ringan dan cukup bagi scope aplikasi ini. Menggunakan teknologi populer tersebut juga memastikan jika ada kendala, banyak referensi komunitas yang tersedia. Pendekatan mobile-first responsif dipenuhi oleh Tailwind, sedangkan kebutuhan autentikasi, transaksi, dll dapat ditangani oleh PHP-MySQL dengan tambahan library saat diperlukan. Dengan stack ini, pengembangan dapat diselesaikan dalam waktu terbatas proyek dan hasil aplikasi tetap memenuhi kebutuhan fungsional yang diinginkan.
Dokumentasi Akses Proyek
Link Repository: Aplikasi ini bersifat open-source dan kode sumbernya dapat diakses di GitHub pada repositori berikut: trevio-project – GitHub (branch utama: development).
Panduan Instalasi & Menjalankan: Untuk menjalankan aplikasi secara lokal, diperlukan environment PHP 8 dan MySQL. Langkah instalasi secara ringkas:
Clone repositori dari GitHub ke komputer lokal.
Buat sebuah database MySQL baru (misal nama: trevio), lalu import file SQL schema database/trevio_final.sql ke dalam database tersebut. (Opsional: import juga database/seeders.sql untuk data contoh).
Salin file konfigurasi contoh .env.example menjadi .env, kemudian ubah pengaturan di dalamnya sesuai lingkungan lokal (terutama konfigurasi DB_HOST, DB_DATABASE, DB_USERNAME, DB_PASSWORD). Pastikan web server mengarah ke folder public/ sebagai document root. Jika menggunakan XAMPP, bisa menaruh proyek di htdocs/trevio-project dan mengakses via http://localhost/trevio-project/public. Jalankan aplikasi. Halaman utama (landing page) seharusnya dapat diakses dan menampilkan halaman pencarian hotel. Akun default untuk testing juga disediakan (misal: admin@trevio.com/password untuk admin). Catatan: Detail lebih lanjut untuk deployment produksi (misal di VPS dengan Nginx) tersedia di dokumen docs/Deployment_Guide.md pada repositori. Struktur Berkas Utama: Proyek Trevio menggunakan struktur berbasis MVC. Secara garis besar: Folder app/ – berisi kode aplikasi utama: controllers/ (logic per halaman atau aksi, dipisah per peran admin/owner/customer), models/ (kelas untuk koneksi dan operasi data ke database, merepresentasikan entitas seperti User, Hotel, Booking), dan views/ (file PHP/HTML untuk tampilan UI, dipisah per sub-folder sesuai modul). Folder config/ – berisi file konfigurasi seperti database.php (untuk kredensial koneksi DB), google-oauth.php (untuk OAuth Google), dll. Folder libraries/ – berisi library tambahan yang digunakan, seperti Mailer.php (untuk email notifikasi menggunakan PHPMailer) dan WhatsApp.php (wrapper untuk integrasi API WhatsApp). Folder public/ – berisi aset publik dan entry point aplikasi. Di dalamnya terdapat index.php yang menjadi front controller (pintu masuk semua request). Juga terdapat public/css/ (file CSS seperti tailwind.min.css dan custom.css), public/js/ (file JS seperti inisialisasi Chart.js untuk grafik, SweetAlert2 untuk popup notifikasi), serta public/uploads/ (folder penyimpanan file upload seperti gambar hotel, bukti pembayaran, dll). Folder database/ – berisi file SQL untuk inisialisasi skema database (trevio_final.sql) dan juga data contoh (seeders.sql). Folder docs/ – berisi dokumentasi proyek, misalnya Design_System.md (panduan desain UI/UX agar konsisten) dan Deployment_Guide.md (panduan deploy di server). Peran dan Kontribusi Pribadi Tanggung Jawab: Dalam tim pengembang Trevio, peran saya fokus pada UI/UX dan Frontend untuk sisi pelanggan (customer) serta sedikit kontribusi backend ringan. Saya bertanggung jawab mendesain tampilan antarmuka pengguna dengan membuat mockup di Figma dan menuangkannya ke dalam kode menggunakan Tailwind CSS. Halaman-halaman utama yang saya kerjakan meliputi Landing Page (halaman utama pencarian), halaman hasil Pencarian Hotel, halaman Detail Hotel, dan formulir Booking. Selain aspek tampilan, saya juga mengimplementasikan logika pencarian hotel pada sisi back-end (melalui SearchController.php), di mana saya menulis kode PHP untuk mengambil data hotel dari database sesuai kata kunci/filter yang dimasukkan pengguna. Saya memastikan seluruh halaman responsif mobile-first, artinya di perangkat mobile tampilan tetap rapi dan user-friendly, namun juga skalabel ke layar lebih besar. Kendala yang Dihadapi: Selama mengerjakan tugas ini, beberapa kendala yang saya temui antara lain: 1) Adaptasi dengan Tailwind CSS – ini pertama kalinya saya menggunakan framework CSS berbasis utility, sehingga perlu waktu untuk terbiasa dengan kelas-kelas Tailwind dan konsep desain utility-first. 2) Responsive Design – menata layout agar otomatis menyesuaikan untuk berbagai ukuran layar cukup menantang; saya harus berkali-kali melakukan pengujian di browser mobile dan mempelajari teknik CSS responsif (seperti grid dan flexbox) yang optimal. 3) Logika Pencarian – di sisi backend, saya harus merancang query SQL yang benar untuk fitur filter hotel (misalnya mencari substring nama hotel atau lokasi tertentu). Awalnya, menyusun query dengan beberapa kondisi filter sempat membingungkan, terutama memastikan hasil yang keluar sesuai input pengguna. Terakhir, koordinasi antara desain UI dan data juga menantang – saya harus memastikan data dari database (seperti daftar hotel, detail kamar) dapat ditampilkan tepat di komponen UI yang sudah saya buat, yang terkadang membutuhkan penyesuaian struktur HTML atau format data. Solusi Implementasi: Untuk mengatasi kendala-kendala tersebut, saya mengambil beberapa langkah. Dalam penggunaan Tailwind, saya mempelajari dokumentasi resmi Tailwind dan melihat contoh implementasi komponen UI sehingga lama-kelamaan saya semakin mahir menerapkannya. Saya juga berdiskusi dengan anggota tim lain yang sudah familiar, dan kami membuat file docs/Design_System.md yang membantu menjaga konsistensi UI (misal panduan warna, font, spacing yang sudah disepakati). Untuk desain responsif, saya menerapkan pendekatan mobile-first – memulai desain dari layar kecil kemudian menambahkan breakpoint Tailwind untuk layar lebih besar. Saya rutin menguji setiap halaman di emulator mobile dan berbagai ukuran browser, lalu memperbaiki CSS jika ada elemen yang tidak proporsional. Dalam hal logika pencarian back-end, saya berkonsultasi dengan anggota tim backend mengenai cara menulis query filter yang efisien. Setelah beberapa iterasi, saya berhasil membuat fungsi pencarian dengan SQL SELECT ... WHERE name LIKE ... sederhana dan menambah kondisi filter lain (seperti range harga) sesuai kebutuhan. Pengujian dilakukan dengan beberapa kata kunci untuk memastikan akurasi hasil. Di samping itu, komunikasi tim yang baik membantu saya menyelaraskan antara data yang disediakan di back-end dan tampilan front-end – misalnya ketika model database berubah, saya segera menyesuaikan bagian view agar tetap sinkron. Kendala-kendala tersebut akhirnya bisa teratasi dengan kombinasi belajar mandiri dan kolaborasi tim. Penilaian Hasil Kerja: Saya menilai bahwa kontribusi yang saya berikan pada proyek ini berjalan dengan baik dan sesuai dengan yang diharapkan. Semua halaman antarmuka pelanggan yang menjadi tanggung jawab saya telah selesai dan tampak menarik serta konsisten dengan desain yang direncanakan. Fitur-fitur yang saya implementasikan, terutama pencarian hotel, berfungsi dengan benar dan memberikan hasil sesuai input pengguna. Responsivitas layout juga berhasil dicapai – berdasarkan pengujian, situs tetap mudah digunakan di smartphone maupun laptop. Saya juga turut membantu memastikan pengalaman pengguna mulus, misalnya dengan menambahkan notifikasi yang jelas saat hasil pencarian tidak ditemukan atau validasi sederhana pada form booking. Tentu, dari sudut pandang pribadi, masih ada ruang peningkatan seperti optimalisasi tampilan agar lebih interaktif atau penambahan fitur sortir hasil pencarian. Namun secara keseluruhan, saya puas dengan hasil kerja saya dan tugas yang diamanahkan kepada saya dapat diselesaikan tepat waktu. Kontribusi saya melengkapi bagian front-end sehingga terintegrasi baik dengan komponen back-end yang dikerjakan rekan tim lain. Evaluasi Diri Keterampilan/Pemahaman Baru: Proyek ini memberikan saya banyak pelajaran baru, baik dari segi teknis maupun kolaborasi. Secara teknis, saya mendapatkan keterampilan baru dalam menggunakan Tailwind CSS – saya belajar konsep utility classes dan bagaimana memanfaatkannya untuk membangun UI dengan cepat tanpa menulis CSS dari nol. Saya juga semakin paham prinsip Responsive Web Design, terutama teknik mobile-first dan penggunaan breakpoint untuk memastikan tampilan optimal di berbagai device. Di sisi back-end, saya memperoleh pemahaman lebih tentang cara membuat query SQL dasar dan mengintegrasikannya dengan PHP, serta cara kerja arsitektur MVC sederhana (misalnya bagaimana controller berinteraksi dengan model dan view). Selain itu, saya mengalami langsung workflow pengembangan tim dengan Git (branching, pull request, code review), yang meningkatkan pemahaman saya tentang version control dan kerja kolaboratif dalam proyek perangkat lunak. Bagian Paling Menantang: Bagian paling menantang dalam proyek ini bagi saya adalah menjaga konsistensi desain UI di seluruh fitur sekaligus memastikan tiap elemen fungsional. Menerapkan desain yang konsisten berarti saya harus teliti mengikuti panduan desain (spacing, warna, tipografi) di setiap halaman, dan tantangannya muncul saat tenggat waktu sempit namun detail tidak boleh diabaikan. Selain itu, tantangan besar lainnya adalah implementasi desain responsif. Meskipun konsepnya sudah dipahami, praktiknya membutuhkan trial and error; misalnya menyesuaikan ukuran teks, tata letak grid, atau visibilitas komponen pada mode mobile vs desktop. Saya harus berulang kali memperbaiki CSS hingga semua halaman tampak rapi di layar kecil. Integrasi antara front-end dan back-end pada fitur pencarian juga menantang karena saya perlu memastikan data yang diinput user dapat ditangani dan ditampilkan dengan benar tanpa bug. Terlepas dari itu, tantangan-tantangan tersebut justru menjadi pengalaman berharga. Saya belajar untuk lebih sabar dan teliti, serta meningkatkan kemampuan problem-solving saat menghadapi isu antar-disiplin (UI vs logic). Bagian tersulit ini mengajarkan saya bagaimana merencanakan fitur dengan lebih matang dari sisi desain maupun teknis, sehingga ke depannya saya dapat mengelola tugas serupa dengan lebih percaya diri dan efisien.
Sources
No file chosenNo file chosen ChatGPT can make mistakes. Check important info. See Cookie Preferences.
Gambaran Aplikasi Judul Aplikasi: Trevio – Platform Pemesanan Travel (Hotel & Penerbangan). Latar Belakang: Aplikasi ini dikembangkan sebagai solusi untuk memudahkan wisatawan dalam memesan akomodasi dan layanan travel secara online. Dalam industri pariwisata, calon pelancong sering harus menggunakan banyak situs atau agen untuk mencari hotel dan penerbangan terpisah. Trevio hadir dengan latar belakang kebutuhan akan satu platform terpadu yang menyederhanakan proses pencarian hingga pemesanan. Proyek ini juga merupakan implementasi praktis dari pembelajaran pengembangan web terpadu (front-end, back-end, database) dalam satu aplikasi real-world. Masalah Pengguna yang Diatasi: Trevio mengatasi beberapa masalah umum yang dihadapi pengguna. Pertama, kesulitan mencari dan membandingkan hotel – pengguna dapat dengan mudah mencari hotel sesuai lokasi, harga, atau fasilitas yang diinginkan, sehingga tidak perlu membuka banyak platform lain. Kedua, proses pemesanan manual yang tidak efisien – melalui Trevio, pemesanan kamar hotel dapat dilakukan secara online dengan cepat tanpa harus menelepon atau datang langsung. Ketiga, keterbatasan informasi – aplikasi ini memberikan detail lengkap (deskripsi, foto, ketersediaan kamar, ulasan) sehingga pengguna dapat membuat keputusan dengan informasi yang memadai. Bagi pemilik hotel, Trevio juga membantu mereka menjangkau lebih banyak pelanggan secara digital dan mengelola pemesanan dengan lebih terorganisir. Daftar Fitur dan Penjelasannya Pencarian dan Filter Hotel: Aplikasi menyediakan fitur pencarian hotel dimana pengguna dapat memasukkan lokasi/tujuan, tanggal, atau kata kunci tertentu. Sistem akan melakukan query database untuk menampilkan daftar hotel yang sesuai dengan kriteria pencarian tersebut. Pengguna juga bisa memfilter hasil (misalnya berdasarkan harga atau kategori). Cara kerja: pengguna mengisi form pencarian di halaman landing, lalu SearchController pada back-end memproses input ini dengan menjalankan perintah SQL SELECT untuk mengambil data hotel yang cocok. Nilai tambah: fitur ini memudahkan pengguna menemukan opsi penginapan yang paling relevan dengan cepat, tanpa harus melihat semua hotel satu per satu. Filter yang tersedia membantu menyaring hasil sehingga pengalaman pencarian lebih efisien dan personal. Halaman Detail Hotel: Setiap hotel dalam hasil pencarian dapat diklik untuk melihat informasi detail. Halaman detail hotel menampilkan deskripsi lengkap hotel, fasilitas yang tersedia, foto-foto, tipe kamar beserta harga, dan ulasan (jika ada). Cara kerja: front-end menampilkan data detail yang diambil dari basis data (melalui model Hotel dan Room) untuk hotel terpilih. Jika pengguna memilih tanggal menginap, halaman ini juga dapat menampilkan ketersediaan kamar. Nilai tambah: fitur ini memberikan transparansi dan informasi lengkap sebelum booking – pengguna dapat menilai apakah hotel tersebut cocok dengan kebutuhannya. Dengan adanya detail lengkap dalam satu halaman, pengguna tidak perlu mencari informasi di tempat lain, sehingga proses pengambilan keputusan lebih cepat. Pemesanan Kamar (Booking): Trevio memungkinkan pengguna melakukan pemesanan kamar hotel langsung dari aplikasi. Setelah memilih hotel dan kamar, pengguna dapat mengisi formulir booking (data diri, tanggal check-in/out, dll) di halaman Booking. Cara kerja: ketika formulir pemesanan dikirim, BookingController (bagian back-end) akan menyimpan data pemesanan ke database. Sistem juga terintegrasi dengan metode pembayaran: pengguna mendapatkan instruksi pembayaran online, dan admin akan memverifikasi pembayaran tersebut melalui panel admin. Nilai tambah: fitur booking online ini mengotomatisasi proses pemesanan yang sebelumnya manual. Pengguna mendapatkan kemudahan karena bisa memesan kapan saja dan langsung mendapat konfirmasi ketersediaan. Terintegrasinya pembayaran online membuat proses transaksi aman dan cepat; pengguna cukup mengikuti petunjuk pembayaran (misalnya melalui gateway Xendit) tanpa khawatir konfirmasi, karena sistem akan mencatat status pembayaran dan bahkan mendukung proses refund jika terjadi pembatalan. Teknologi dan Alasan Pemilihan Front-end: Aplikasi ini dibangun menggunakan HTML, CSS (Tailwind CSS), dan sedikit JavaScript untuk interaksi dasar. Dipilihnya Tailwind CSS sebagai kerangka kerja CSS utama karena pendekatan utility-first-nya mempercepat proses styling dan memastikan konsistensi desain sesuai Design System. Tailwind juga memudahkan pembuatan tampilan responsif (mobile-first) berkat utility classes yang siap pakai, sehingga pengalaman pengguna di berbagai ukuran layar tetap optimal. Selain itu, tim sudah familiar dengan HTML dan CSS dasar, sehingga integrasi Tailwind terasa ringan tanpa kurva belajar yang terlalu tinggi. Back-end: Teknologi back-end yang digunakan adalah PHP dengan arsitektur MVC sederhana (tanpa framework besar seperti Laravel). Tim mengimplementasikan struktur MVC manual: folder controllers, models, dan views dikelola sendiri. Alasan pemilihan PHP adalah karena kemudahan penggunaan dan ketersediaannya yang luas. PHP cocok untuk proyek web seperti ini dan banyak pustaka tambahan (misal PHPMailer untuk email, integrasi WhatsApp API) yang siap digunakan. Dengan MVC, kode menjadi lebih terstruktur: logic terpisah dari tampilan, sehingga pengembangan oleh beberapa anggota tim (front-end & back-end) bisa paralel. PHP juga dipilih karena tim sudah pernah mempelajarinya dalam perkuliahan dan hosting PHP-MySQL mudah didapat (sesuai kebutuhan deployment di server). Penyimpanan Data: Untuk database, MySQL (MariaDB) digunakan sebagai sistem manajemen basis data relasional. MySQL dipilih karena sudah menjadi standar umum untuk aplikasi web, mendukung relasi data yang kompleks (antar table seperti users, hotels, rooms, bookings, payments, dll), serta handal menangani transaksi. MySQL juga terintegrasi baik dengan PHP (tersedia ekstensi mysqli/PDO), sehingga mempermudah implementasi query dan operasi CRUD dari kode PHP. Selain itu, pilihan MySQL didukung oleh pertimbangan bahwa tim telah mendesain schema database (lihat database/trevio_final.sql) secara relasional untuk memastikan konsistensi data (misal menjaga integritas data booking, ketersediaan kamar, transaksi pembayaran). Alasan Pemilihan: Secara umum, kombinasi teknologi di atas dipilih dengan pertimbangan kemudahan, familiaritas tim, dan kebutuhan fungsional proyek. Tailwind CSS dan PHP-MySQL adalah teknologi yang ringan dan cukup bagi scope aplikasi ini. Menggunakan teknologi populer tersebut juga memastikan jika ada kendala, banyak referensi komunitas yang tersedia. Pendekatan mobile-first responsif dipenuhi oleh Tailwind, sedangkan kebutuhan autentikasi, transaksi, dll dapat ditangani oleh PHP-MySQL dengan tambahan library saat diperlukan. Dengan stack ini, pengembangan dapat diselesaikan dalam waktu terbatas proyek dan hasil aplikasi tetap memenuhi kebutuhan fungsional yang diinginkan. Dokumentasi Akses Proyek Link Repository: Aplikasi ini bersifat open-source dan kode sumbernya dapat diakses di GitHub pada repositori berikut: trevio-project – GitHub (branch utama: development). Panduan Instalasi & Menjalankan: Untuk menjalankan aplikasi secara lokal, diperlukan environment PHP 8 dan MySQL. Langkah instalasi secara ringkas: Clone repositori dari GitHub ke komputer lokal. Buat sebuah database MySQL baru (misal nama: trevio), lalu import file SQL schema database/trevio_final.sql ke dalam database tersebut. (Opsional: import juga database/seeders.sql untuk data contoh). Salin file konfigurasi contoh .env.example menjadi .env, kemudian ubah pengaturan di dalamnya sesuai lingkungan lokal (terutama konfigurasi DB_HOST, DB_DATABASE, DB_USERNAME, DB_PASSWORD). Pastikan web server mengarah ke folder public/ sebagai document root. Jika menggunakan XAMPP, bisa menaruh proyek di htdocs/trevio-project dan mengakses via http://localhost/trevio-project/public. Jalankan aplikasi. Halaman utama (landing page) seharusnya dapat diakses dan menampilkan halaman pencarian hotel. Akun default untuk testing juga disediakan (misal: admin@trevio.com/password untuk admin). Catatan: Detail lebih lanjut untuk deployment produksi (misal di VPS dengan Nginx) tersedia di dokumen docs/Deployment_Guide.md pada repositori. Struktur Berkas Utama: Proyek Trevio menggunakan struktur berbasis MVC. Secara garis besar: Folder app/ – berisi kode aplikasi utama: controllers/ (logic per halaman atau aksi, dipisah per peran admin/owner/customer), models/ (kelas untuk koneksi dan operasi data ke database, merepresentasikan entitas seperti User, Hotel, Booking), dan views/ (file PHP/HTML untuk tampilan UI, dipisah per sub-folder sesuai modul). Folder config/ – berisi file konfigurasi seperti database.php (untuk kredensial koneksi DB), google-oauth.php (untuk OAuth Google), dll. Folder libraries/ – berisi library tambahan yang digunakan, seperti Mailer.php (untuk email notifikasi menggunakan PHPMailer) dan WhatsApp.php (wrapper untuk integrasi API WhatsApp). Folder public/ – berisi aset publik dan entry point aplikasi. Di dalamnya terdapat index.php yang menjadi front controller (pintu masuk semua request). Juga terdapat public/css/ (file CSS seperti tailwind.min.css dan custom.css), public/js/ (file JS seperti inisialisasi Chart.js untuk grafik, SweetAlert2 untuk popup notifikasi), serta public/uploads/ (folder penyimpanan file upload seperti gambar hotel, bukti pembayaran, dll). Folder database/ – berisi file SQL untuk inisialisasi skema database (trevio_final.sql) dan juga data contoh (seeders.sql). Folder docs/ – berisi dokumentasi proyek, misalnya Design_System.md (panduan desain UI/UX agar konsisten) dan Deployment_Guide.md (panduan deploy di server). Peran dan Kontribusi Pribadi Tanggung Jawab: Dalam tim pengembang Trevio, peran saya fokus pada UI/UX dan Frontend untuk sisi pelanggan (customer) serta sedikit kontribusi backend ringan. Saya bertanggung jawab mendesain tampilan antarmuka pengguna dengan membuat mockup di Figma dan menuangkannya ke dalam kode menggunakan Tailwind CSS. Halaman-halaman utama yang saya kerjakan meliputi Landing Page (halaman utama pencarian), halaman hasil Pencarian Hotel, halaman Detail Hotel, dan formulir Booking. Selain aspek tampilan, saya juga mengimplementasikan logika pencarian hotel pada sisi back-end (melalui SearchController.php), di mana saya menulis kode PHP untuk mengambil data hotel dari database sesuai kata kunci/filter yang dimasukkan pengguna. Saya memastikan seluruh halaman responsif mobile-first, artinya di perangkat mobile tampilan tetap rapi dan user-friendly, namun juga skalabel ke layar lebih besar. Kendala yang Dihadapi: Selama mengerjakan tugas ini, beberapa kendala yang saya temui antara lain: 1) Adaptasi dengan Tailwind CSS – ini pertama kalinya saya menggunakan framework CSS berbasis utility, sehingga perlu waktu untuk terbiasa dengan kelas-kelas Tailwind dan konsep desain utility-first. 2) Responsive Design – menata layout agar otomatis menyesuaikan untuk berbagai ukuran layar cukup menantang; saya harus berkali-kali melakukan pengujian di browser mobile dan mempelajari teknik CSS responsif (seperti grid dan flexbox) yang optimal. 3) Logika Pencarian – di sisi backend, saya harus merancang query SQL yang benar untuk fitur filter hotel (misalnya mencari substring nama hotel atau lokasi tertentu). Awalnya, menyusun query dengan beberapa kondisi filter sempat membingungkan, terutama memastikan hasil yang keluar sesuai input pengguna. Terakhir, koordinasi antara desain UI dan data juga menantang – saya harus memastikan data dari database (seperti daftar hotel, detail kamar) dapat ditampilkan tepat di komponen UI yang sudah saya buat, yang terkadang membutuhkan penyesuaian struktur HTML atau format data. Solusi Implementasi: Untuk mengatasi kendala-kendala tersebut, saya mengambil beberapa langkah. Dalam penggunaan Tailwind, saya mempelajari dokumentasi resmi Tailwind dan melihat contoh implementasi komponen UI sehingga lama-kelamaan saya semakin mahir menerapkannya. Saya juga berdiskusi dengan anggota tim lain yang sudah familiar, dan kami membuat file docs/Design_System.md yang membantu menjaga konsistensi UI (misal panduan warna, font, spacing yang sudah disepakati). Untuk desain responsif, saya menerapkan pendekatan mobile-first – memulai desain dari layar kecil kemudian menambahkan breakpoint Tailwind untuk layar lebih besar. Saya rutin menguji setiap halaman di emulator mobile dan berbagai ukuran browser, lalu memperbaiki CSS jika ada elemen yang tidak proporsional. Dalam hal logika pencarian back-end, saya berkonsultasi dengan anggota tim backend mengenai cara menulis query filter yang efisien. Setelah beberapa iterasi, saya berhasil membuat fungsi pencarian dengan SQL SELECT ... WHERE name LIKE ... sederhana dan menambah kondisi filter lain (seperti range harga) sesuai kebutuhan. Pengujian dilakukan dengan beberapa kata kunci untuk memastikan akurasi hasil. Di samping itu, komunikasi tim yang baik membantu saya menyelaraskan antara data yang disediakan di back-end dan tampilan front-end – misalnya ketika model database berubah, saya segera menyesuaikan bagian view agar tetap sinkron. Kendala-kendala tersebut akhirnya bisa teratasi dengan kombinasi belajar mandiri dan kolaborasi tim. Penilaian Hasil Kerja: Saya menilai bahwa kontribusi yang saya berikan pada proyek ini berjalan dengan baik dan sesuai dengan yang diharapkan. Semua halaman antarmuka pelanggan yang menjadi tanggung jawab saya telah selesai dan tampak menarik serta konsisten dengan desain yang direncanakan. Fitur-fitur yang saya implementasikan, terutama pencarian hotel, berfungsi dengan benar dan memberikan hasil sesuai input pengguna. Responsivitas layout juga berhasil dicapai – berdasarkan pengujian, situs tetap mudah digunakan di smartphone maupun laptop. Saya juga turut membantu memastikan pengalaman pengguna mulus, misalnya dengan menambahkan notifikasi yang jelas saat hasil pencarian tidak ditemukan atau validasi sederhana pada form booking. Tentu, dari sudut pandang pribadi, masih ada ruang peningkatan seperti optimalisasi tampilan agar lebih interaktif atau penambahan fitur sortir hasil pencarian. Namun secara keseluruhan, saya puas dengan hasil kerja saya dan tugas yang diamanahkan kepada saya dapat diselesaikan tepat waktu. Kontribusi saya melengkapi bagian front-end sehingga terintegrasi baik dengan komponen back-end yang dikerjakan rekan tim lain. Evaluasi Diri Keterampilan/Pemahaman Baru: Proyek ini memberikan saya banyak pelajaran baru, baik dari segi teknis maupun kolaborasi. Secara teknis, saya mendapatkan keterampilan baru dalam menggunakan Tailwind CSS – saya belajar konsep utility classes dan bagaimana memanfaatkannya untuk membangun UI dengan cepat tanpa menulis CSS dari nol. Saya juga semakin paham prinsip Responsive Web Design, terutama teknik mobile-first dan penggunaan breakpoint untuk memastikan tampilan optimal di berbagai device. Di sisi back-end, saya memperoleh pemahaman lebih tentang cara membuat query SQL dasar dan mengintegrasikannya dengan PHP, serta cara kerja arsitektur MVC sederhana (misalnya bagaimana controller berinteraksi dengan model dan view). Selain itu, saya mengalami langsung workflow pengembangan tim dengan Git (branching, pull request, code review), yang meningkatkan pemahaman saya tentang version control dan kerja kolaboratif dalam proyek perangkat lunak. Bagian Paling Menantang: Bagian paling menantang dalam proyek ini bagi saya adalah menjaga konsistensi desain UI di seluruh fitur sekaligus memastikan tiap elemen fungsional. Menerapkan desain yang konsisten berarti saya harus teliti mengikuti panduan desain (spacing, warna, tipografi) di setiap halaman, dan tantangannya muncul saat tenggat waktu sempit namun detail tidak boleh diabaikan. Selain itu, tantangan besar lainnya adalah implementasi desain responsif. Meskipun konsepnya sudah dipahami, praktiknya membutuhkan trial and error; misalnya menyesuaikan ukuran teks, tata letak grid, atau visibilitas komponen pada mode mobile vs desktop. Saya harus berulang kali memperbaiki CSS hingga semua halaman tampak rapi di layar kecil. Integrasi antara front-end dan back-end pada fitur pencarian juga menantang karena saya perlu memastikan data yang diinput user dapat ditangani dan ditampilkan dengan benar tanpa bug. Terlepas dari itu, tantangan-tantangan tersebut justru menjadi pengalaman berharga. Saya belajar untuk lebih sabar dan teliti, serta meningkatkan kemampuan problem-solving saat menghadapi isu antar-disiplin (UI vs logic). Bagian tersulit ini mengajarkan saya bagaimana merencanakan fitur dengan lebih matang dari sisi desain maupun teknis, sehingga ke depannya saya dapat mengelola tugas serupa dengan lebih percaya diri dan efisien. All Sources