7
BAB III
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Koordinasi
Praktik kerja magang dimulai dari penandatanganan kontrak kerja magang yang kemudian diberikan juga surat tanggapan kerja magang sebagai Oval Tech Developer di Corporate IT & IS (CITIS) Kompas Gramedia. Bapak Sigit Nurseto selaku Software Engineering Manager menggunakan agile software development dan menerapkan scrum process untuk melakukan koordinasi terhadap tim pengembang MySantika. Metode tersebut diterapkan dengan melakukan standup meeting atau daily scrum meeting setiap hari yang dihadiri oleh setiap anggota tim pengembang MySantika, yaitu Muhammad Iqbal selaku Mobile Developer aplikasi MySantika, Kevin Alexander dan Calvin Chandra Gunawan selaku Frontend Engineer website MySantika, serta Edison Tantra selaku Backend Engineer Mysantika dan Supervisor website ekstranet MySantika. Dalam tim, Muhammad Iqbal, Kevin Alexander, dan Edison Tantra menjadi scrum master secara bergilir setiap minggunya. Standup meeting dilakukan agar setiap anggota tim dapat saling mengetahui dan memantau tugas yang telah dilakukan kemarin, kendala yang ditemukan kemarin, dan tugas yang akan dikerjakan hari ini.
Di dalam kerangka kerja proses tersebut digunakan development cycle yang dikenal dengan istilah sprint review. Sprint review dilakukan satu minggu sekali setiap hari Selasa. Dalam sprint review, seluruh tim produk, desainer, dan juga engineer MySantika berkumpul untuk membahas tugas yang telah dikerjakan minggu lalu dan tugas yang akan dikerjakan di minggu berikutnya. Pemantauan
8 perkembangan aplikasi dan pemberian tugas secara umum untuk masing-masing tim dilakukan oleh Bapak Adya Danaditya dari tim produk. Lalu tugas yang lebih rinci mengenai website ekstranet diberikan oleh Edison Tantra. Tampilan UI/UX website ekstranet dibuat oleh Thomas Dwi Putra dari tim desainer dengan koordinasi dari Bapak Adya Danaditya. Selain itu, tim produk juga melakukan testing dan survei kepada para stakeholder MySantika.
Koordinasi dengan anggota tim lain dilakukan dengan menggunakan Slack, Figma, dan Microsoft Azure. Slack digunakan untuk berbagi informasi ataupun melakukan komunikasi secara personal maupun seluruh tim. Figma digunakan untuk melihat tampilan website ekstranet yang telah dibuat oleh tim desainer.
Microsoft Azure digunakan untuk menulis task dan subtask yang telah, sedang, dan akan dikerjakan dalam pengembangan, sehingga setiap orang orang dalam tim dapat memantau pekerjaan. Microsoft Azure juga digunakan sebagai wadah untuk mengorganisir setiap project files.
3.3 Tugas yang Dilakukan
Tugas dalam pelaksanaan kerja magang tersebut adalah membuat website ekstranet MySantika. Website ekstranet tersebut dapat digunakan oleh internal perusahaan seperti admin hotel (user) ataupun stakeholder perusahaan (super user) untuk melakukan manajemen hotel milik perusahaan Kompas Gramedia, seperti Hotel Santika, Hotel Amaris, dan lain-lain. Karena website ekstranet tersebut hanya akan digunakan oleh internal perusahaan, maka fungsionalitas website lebih diutamakan daripada tampilan website. Oleh sebab itu, pembuatan website lebih terfokus pada fungsionalitas setiap fiturnya sehingga hasil tampilan website tidak sepenuhnya mirip dengan desain yang telah dibuat. Selain itu, tampilan
9 website juga tidak dibuat responsif. Bahasa pemrograman yang digunakan adalah Python dengan framework Django untuk mengolah data, sedangkan HTML digunakan untuk membuat tampilan website. Daftar tugas yang dikerjakan setiap minggunya dapat dilihat pada Tabel 3.1
Ada beberapa modul utama pada website yang telah dibuat sebelumnya, yaitu modul Hotel, Rate Plan, Brand, Promo, Booking, Review, dan User. Modul Hotel berisi beberapa halaman website, yaitu Hotel List, Create Hotel, dan Hotel Detail yang di dalamnya terdapat Create Room, Room Detail, Create Backoffice Contact, dan Backoffice Contact Detail. Modul Rate Plan berisi halaman Rate Plan List, Create Rate Plan, dan Rate Plan Detail. Modul Brand berisi halaman Brand List, Create Brand, dan Brand Detail. Modul Promo berisi halaman Promo List, Create Promo, dan Promo Detail. Modul Booking berisi halaman Search Booking, Booking List, dan Booking Detail. Modul Review berisi halaman Search Review dan Review List. Modul User berisi halaman User List, Create User, User Detail, dan Change User Password.
Saat awal mula kerja magang, beberapa modul telah dibuat oleh pengembang website ekstranet sebelumnya. Modul yang telah dibuat adalah modul Hotel, Rate Plan, Brand, Promo, Booking, Review, Login dan Logout. Namun, tampilan yang telah dibuat masih sederhana dan tingkat readability code-nya masih rendah.
Selain itu, hanya sedikit fungsionalitas setiap halaman yang telah dibuat dan berfungsi dengan baik, seperti login, logout, perpindahan antar halaman, dan menampilkan daftar beserta detail hotel, rate plan, brand, promo, booking, dan review pada halaman Hotel List, Rate Plan List, Brand List, Promo List.
10 Dalam modul Hotel, halaman Hotel List berisi daftar hotel perusahaan.
Halaman Create Hotel berisi formulir penambahan hotel baru. Halaman Hotel Detail terbagi dalam beberapa menu, diantaranya adalah menu General yang berisi detail utama dari suatu hotel, menu Facility berisi daftar fasilitas yang dimiliki ataupun tidak dimiliki suatu hotel, menu Room berisi daftar tipe kamar yang terdapat di suatu hotel, menu Rate Plan Occurance berisi daftar waktu terjadinya setiap rate plan yang ada di suatu hotel, menu Gallery berisi kumpulan gambar suatu hotel, dan menu Availability berisi daftar rincian setiap tipe kamar dengan rate plan-nya.
Dalam modul Rate Plan, halaman Rate Plan List berisi daftar Rate Plan yang ada, halaman Create Rate Plan berisi formulir penambahan Rate Plan baru.
Halaman Rate Plan Detail berisi detail dari rate plan. Modul Brand, Promo, dan User memiliki halaman yang mirip dengan modul Rate Plan. Namun, pada halaman Promo List terbagi dalam dua menu, diantaranya adalah menu Promo Management yang berisi daftar promo dan menu Banner Promo Photo berisi kumpulan gambar banner promo.
Dalam modul Booking, halaman Search Booking digunakan untuk melakukan pencarian pemesanan hotel. Halaman Booking List berisi daftar booking yang sesuai dengan hasil pencarian. Halaman Booking Detail berisi detail dari suatu booking. Modul Review memiliki halaman yang mirip dengan modul Booking. Hanya saja, modul Review tidak memiliki halaman detail.
11 Tabel 3.1 Deskripsi Pekerjaan Mingguan Pelaksanaan Kerja Magang
Minggu ke- Deskripsi Pekerjaan
1 - Melakukan setup proyek.
2 - Membuat menu Availability pada halaman Hotel Detail.
3 - Membuat lazy loading pada Availability.
- Memberikan plugin Select2 pada halaman Search Booking dan Search Review.
- Refactoring code.
4 - Melanjutkan refactoring code.
- Membuat permission untuk Admin Hotel.
- Membuat halaman Booking List.
5 - Refactor tampilan formulir pada halaman Create Rate Plan dan Rate Plan Detail.
- Membuat halaman Booking Detail.
- Menambahkan fitur filter booking berdasarkan statusnya pada halaman Booking List.
- Menambahkan tampilan cancellation booking messages pada halaman Booking List dan Booking Detail.
6 - Refactor tampilan formulir pada halaman Create Brand, Brand Detail, Create Promo, dan Promo Detail.
- Refactor tampilan formulir thumbnail dan gallery pada halaman Hotel Detail.
7 - Refactor tampilan formulir thumbnail, gallery, rate plan, dan information pada halaman Room Detail.
- Menambahkan menu Rate Plan Occurance pada Hotel Detail 8 - Membuat fitur multiple delete data pada halaman Room List,
Rate Plan List, Brand List, Promo List dan Review List.
- Menambahkan tampilan payment source pada halaman Booking Detail.
- Menambahkan fitur resend email pada halaman Booking Detail.
9 - Membuat halaman Create Room.
- Mengubah tampilan identitas teks setiap rate plan yang awalnya menggunakan nama rate plan menjadi ratecode dari rate plan.
- Membuat fitur soft delete rate plan pada halaman Room Detail.
- Membuat fitur filter semua hotel pada halaman Search Booking.
12 Tabel 3.1 Deskripsi Pekerjaan Mingguan Pelaksanaan Kerja Magang (Lanjutan)
Minggu ke- Deskripsi Pekerjaan
10 - Refactor Django View code.
- Membuat filter checkout date range pada halaman Search Booking.
- Membuat fitur export daftar booking ke .csv file pada halaman Booking List.
- Membuat menu Banner Promo Photo pada halaman Promo List.
11 - Membuat modul User (halaman User List, Create User, User Detail, dan Change User Password).
- Menambahkan fitur resend booking reservation pada Booking Detail.
- Melakukan optimasi database query untuk mengurangi waktu loading setiap halaman.
12 - Membuat fungsionalitas halaman Create Hotel.
- Melakukan fix pada setiap bug yang ditemukan.
3.3 Uraian Pelaksanaan Kerja Magang
Pada minggu pertama, dilakukan setup proyek dengan melakukan instalasi dan konfigurasi Docker dengan proyek dalam laptop pribadi. Selama menunggu proses instalasi, waktu yang tersedia digunakan untuk mempelajari dasar-dasar penggunaan Docker, Django Template, serta kode website ekstranet yang telah dibuat sebelumnya. Docker digunakan untuk melakukan build pada proyek, sedangkan Django Template digunakan untuk penggunaan data dari Django pada HTML. Selain itu, pembimbing lapangan juga menjelaskan alat dan kebutuhan apa saja yang perlu dipersiapkan untuk mengerjakan proyek, serta menjelaskan bagaimana alur pengerjaan proyek tersebut.
Pada minggu berikutnya, diadakan sprint review pertama yang membahas proyek yang akan dikerjakan. Kepala tim produk menjelaskan secara rinci alasan
13 pengerjaan proyek tersebut dilakukan, kebutuhan stakeholder, dan kriteria-kriteria yang harus dipenuhi dalam mengembangkan aplikasi website ekstranet MySantika. Rancangan tampilan antarmuka pengguna yang telah dibuat oleh tim desain yang telah disepakati oleh stakeholder juga dipresentasikan.
Setelah itu, tugas atau backlog untuk satu minggu tersebut dimasukkan di Microsoft Azure oleh Engineering Manager sesuai hasil sprint review tersebut.
Tugas yang dikerjakan pada minggu kedua adalah membuat tampilan dan fungsionalitas halaman Availability sebagai bagian dari menu pada halaman Hotel Detail. Halaman Availability berisi daftar relasi setiap room dengan rate plan yang ada di hotel tersebut dalam bentuk accordion. Relasi room dengan rate plan disebut dengan rate. Setiap accordion tersebut berisi sebuah tabel yang berisi beberapa atribut, diantaranya yaitu jumlah yang tersedia (Inventory), harga (Price), minimum tinggal (Min. Stay), maksimum tinggal (Max. Stay), apakah tidak bisa dipesan pada tanggal tertentu (Close to Arrival (CTA)), dan apakah tidak bisa check-out pada tanggal tertentu (Close to Departure (CTD)). Nilai-nilai setiap atribut tersebut merepresentasikan nilai rate tersebut setiap harinya.
Nilai-nilai setiap atribut didapat dari Fastbooking. Halaman Availability memiliki tabel kalender per minggu. Nilai-nilai atribut berubah menyesuaikan kalender yang ditampilkan. Halaman Availability juga memiliki fitur pencarian untuk mencari data berdasarkan room atau rate plan.
Pada minggu ketiga, saat halaman Availability diuji pada saat sprint review, tim produk menganggap waktu loading untuk membuka halaman tersebut sangat lama. Sehingga tugas yang dikerjakan pada minggu ketiga adalah memberikan fitur lazy loading dimana data availability hanya akan di-load ketika accordion
14 dibuka. Kemudian, accordion akan ditutup kembali ketika tanggal kalender diubah. Selain itu, backlog yang diberikan adalah pengguna dapat memilih multiple hotel saat melakukan pencarian pada halaman Search Booking dan Search Review. Oleh karena itu, ditambahkan plug-in Select2 untuk kedua halaman tersebut. Kedua tugas tersebut dikerjakan sangat cepat, sehingga masih banyak waktu luang hingga sprint review berikutnya. Oleh karena itu, supervisor meminta untuk refactor code semua halamannya. Kode dirapihkan dengan cara menghapus bagian-bagian code HTML atau CSS yang tidak diperlukan dan juga mengganti styles pada CSS dengan framework Bootstrap seperlunya.
Pada minggu keempat, refactor code dilanjutkan hingga selesai. Lalu, dibuat permission untuk Admin Hotel. Privilege Admin Hotel terbatas dibandingkan dengan super user. Admin Hotel hanya dapat melihat modul Hotel, Booking, dan Review. Admin Hotel juga hanya dapat melihat detail dari satu hotel yang sesuai dengan dirinya saja. Selain itu, Admin Hotel tidak dapat menambah, mengubah dan menghapus data apapun. Kemudian, tugas lainnya yang dikerjakan adalah membuat halaman Booking List. Booking List berisi sebuah tabel yang memiliki atribut Booking ID yang menampilkan id dari suatu booking. Atribut Guest menampilkan nama, nomor telepon, dan email dari customer yang melakukan pemesanan hotel. Atribut Hotel berisi nama hotel beserta beberapa daftar kamar beserta rate plan yang dipesan. Atribut Booking Time berisi waktu dilakukannya pemesanan. Atribut Stay Date yang menampilkan tanggal check-in dan check-out.
Atribut Total Fare yang berisi harga total pemesanan. Atribut Status yang menampilkan status dari pemesanan tersebut. Admin Hotel dan super user dapat melakukan pembatalan satu atau lebih pemesanan hotel dalam halaman ini
15 beserta dengan pemberian alasan pembatalannya (cancellation booking messages) yang berupa text field dalam suatu pop-up modal. Halaman ini juga terdapat fitur sort dan search untuk mencari dan mengurutkan data booking tanpa perlu refresh halaman. Selain itu, halaman Booking List juga terdapat fitur filter untuk mencari booking berdasarkan range dari book date dan stay date.
Pada minggu kelima, user interface (UI) halaman Create Rate Plan dan Rate Plan Detail yang sebelumnya masih menggunakan formulir standar dari Django Form dilakukan refactor agar mengikuti desain yang telah dibuat oleh tim desain.
Lalu, halaman Booking Detail juga pada dibuat pada minggu ini. Selain itu, ditambahkan juga fitur filter booking berdasarkan status booking-nya pada halaman Booking List. Tugas lainnya yang dikerjakan pada minggu ini adalah menambahkan teks cancellation booking messages dalam halaman Booking List dan Booking Detail pada booking yang telah dibatalkan.
Pada minggu keenam, tidak ada pekerjaan yang diberikan oleh tim produk pada saat sprint review. Jadi, pekerjaan yang dilakukan pada minggu ini sama seperti minggu sebelumnya, yaitu refactor UI. Plug-in Dropzone dipelajari untuk dapat melakukan refactor formulir UI dilakukan pada halaman Create Brand, Brand Detail, Create Promo, dan Promo Detail. Selain itu, dilakukan refactor juga pada formulir thumbnail dan gallery pada halaman Hotel Detail.
Pada minggu ketujuh, dilanjutkan refactor UI pada formulir thumbnail, gallery, rate plan, dan information dalam halaman Room Detail. Lalu, dibuat menu baru pada halaman Hotel Detail, yaitu Rate Plan Occurance. Menu tersebut berisi daftar availability day setiap rate plan dalam suatu hotel. Super user dapat
16 mengubah availability day tersebut, sedangkan Admin Hotel hanya dapat melihatnya saja.
Pada minggu kedelapan, dibuat fitur multiple delete data pada halaman Room List, Rate Plan List, Brand List, Promo List dan Review List. Fitur tersebut hanya dapat digunakan oleh super user. Lalu, ditambahkan teks payment source (payment option dan payment method) pada halaman Booking Detail. Selain itu, halaman Booking Detail juga ditambahkan fitur resend email untuk mengirimkan email pada customer dan juga hotel yang bersangkutan (backoffice contact).
Tombol untuk menggunakan fitur tersebut hanya muncul pada booking yang memiliki status cancelled, booked, paid, checkout, dan reviewed. Fungsionalitas untuk mengirimkan email telah dibuat oleh supervisor, sehingga hanya perlu memanggil method-nya saja.
Pada minggu kesembilan, dibuat halaman Create Room. Halaman tersebut terbagi menjadi beberapa formulir, yaitu information, facility, thumbnail, gallery, dan rate plan. Lalu, setiap halaman selain modul Rate Plan yang menampilkan teks nama-nama rate plan, diubah menjadi menggunakan teks ratecode dari rate plan tersebut. Kemudian, fitur delete rate pada halaman Room Detail dibuat menjadi soft delete, yaitu data yang dihapus hanya tidak ditampilkan lagi pada ekstranet, tetapi data tersebut masih tersimpan dalam database. Kemudian, halaman Search Booking ditambahkan fitur untuk dapat melakukan pencarian semua hotel dengan cara tidak memilih hotel apapun pada kolom input hotelnya.
Pada minggu kesepuluh, dilakukan refactor pada kode di Django View.
Django View yang mulanya menggunakan function-based view, kini diubah menjadi class-based generic view (CBGV). Setelah itu, ditambahkan fitur filter
17 range berdasarkan checkout date pada halaman Search Booking dan Booking List.
Selain itu, halaman Booking List juga dibuat fitur export daftar booking yang telah di-filter ke sebuah file berekstensi csv. Lalu, halaman Promo List dibagi menjadi dua menu, yaitu menu Promo Management yang berisi daftar promo dan menu Banner Promo Photo yang UI-nya sama seperti gallery pada Hotel Detail dan Room Detail.
Pada minggu kesebelas, dibuat modul User (halaman User List, Create User, User Detail, dan Change User Password). Halaman User List berisi daftar user Admin Hotel. Halaman Create User berisi formulir untuk membuat user baru.
Halaman User Detail berisi detail dari suatu user dan juga dibuat halaman yang berbeda untuk mengubah password user. Modul User hanya dapat diakses oleh super user. Kemudian, dalam halaman Booking Detail ditambahkan fitur resend booking reservation. Kemunculan tombol fitur tersebut sama seperti resend email.
Fungsionalitas fitur tersebut juga telah dibuat oleh supervisor sehingga hanya perlu memanggil method-nya saja. Setelah itu, dilakukan optimasi database query untuk mengurangi waktu loading setiap halaman ekstranet.
Pada minggu terakhir, dibuat fitur terakhir pada praktik kerja magang ini, yaitu fungsionalitas halaman Create Hotel. Halaman tersebut hanya dapat diakses oleh super user. Setelah itu, dilakukan fix pada setiap bug yang ditemukan sebagai penutup berakhirnya kerja magang.
3.3.1 Proses Pelaksanaan
Proses pelaksanaan praktik kerja magang dijelaskan pada bagian analisis kebutuhan, perancangan aplikasi dan hasil implementasi.
18 A. Analisis Kebutuhan
Aplikasi website ekstranet MySantika dibuat untuk stakeholder dan admin hotel pada semua hotel milik Kompas Gramedia untuk mengelola hotel, mulai dari hotel itu sendiri, brand hotel tersebut, kamar-kamar, rate plan, promo, booking yang dilakukan pelanggan beserta dengan review yang diberikan pelanggan, hingga admin-admin hotelnya yang juga akan menggunakan website ekstranet tersebut. Aplikasi website ekstranet ini bisa diakses oleh pengguna melalui browser di perangkat desktop masing-masing dengan koneksi internet.
Agar stakeholder bisa mengelola hotel, aplikasi website ekstranet MySantika yang dibangun memiliki tujuh modul utama dengan beberapa halaman setiap modulnya yang mendukung proses pengelolaannya, yaitu sebagai berikut.
1. Modul Hotel 2. Modul Rate Plan 3. Modul Brand 4. Modul Promo 5. Modul Booking 6. Modul Review 7. Modul User
Agar admin setiap hotel dapat melihat informasi-informasi hotel dan juga dapat membantu mengelola pemesanan yang dilakukan oleh customer. Admin hotel memiliki akses terhadap tiga modul utama. Modul utama yang dapat diakses admin hotel adalah sebagai berikut.
1. Modul Hotel 2. Modul Booking
19 3. Modul Review
Stakeholder mendapatkan akses sebagai super user dalam ekstranet. Super user memiliki wewenang untuk melihat, menambah, mengubah dan menghapus data. Admin hotel mendapatkan akses sebagai staff yang diberi nama Admin Hotel. Admin Hotel hanya dapat melihat data hotel yang bersangkutan saja.
Selain itu, super user dan Admin Hotel dapat melakukan pembatalan booking yang dilakukan customer, mengirim ulang email pemesanan kepada customer dan hotel, serta melakukan reservasi ulang jika terjadi suatu kesalahan pada pemesanan.
Dalam pembuatan frontend aplikasi website ekstranet MySantika, bahasa pemrograman yang digunakan adalah JavaScript dengan menggunakan jQuery versi 3.4.1 dan untuk styling digunakan Bootstrap versi 4.3.1. Penggunaan data-data ditampilkan menggunakan HTML5 dengan Django Template. Ada beberapa plug-in tambahan yang digunakan, tetapi yang cukup penting adalah plug-in DataTables untuk membuat tabel-tabelnya, Dropzone untuk membuat fitur drag-and-drop gambar-gambar, dan Select2 untuk dapat melakukan multiple select data.
Dalam pembuatan backend aplikasi website ekstranet MySantika pada praktik kerja magang ini, bahasa pemrograman yang digunakan adalah Python dengan framework Django. Pembuatan formulir-formulir menggunakan Django Form, sedangkan untuk mengolah, mengirim, dan menerima data-data menggunakan Django View. Data-data dikirim dan diterima oleh Django Template.
20 B. Hirarki Map
Daftar dan alur setiap modul beserta setiap halaman yang dikerjakan dalam praktik kerja magang dapat dilihat pada Gambar 3.1. Modul Hotel diawali dengan halaman Hotel List yang kemudian dapat menuju halaman Hotel Detail dan Create Hotel. Hotel Detail terdapat menu yang disebut Room List dan Backoffice Contact List. Room List dapat menuju halaman Room Detail dan Create Room.
Backoffice Contact dapat menuju Backoffice Contact Detail dan Create Backoffice Contact. Modul Rate Plan terdiri dari halaman Rate Plan List, Rate Plan Detail dan Create Rate Plan. Modul Brand, modul Promo dan modul User memiliki halaman yang mirip seperti modul Rate Plan Modul Booking terdiri dari halaman Search Booking, Booking List dan Booking Detail. Modul Review hanya terdiri dua halaman, yaitu Search Review dan Review List.
Gambar 3.1 Hirarki Map Aplikasi Website Ekstranet MySantika
21 C. Entity Relationship Diagram (ERD)
Dalam pembuatan aplikasi website ekstranet MySantika, ada beberapa entitas dalam database yang digunakan. Entitas-entitas tersebut dapat direpresentasikan dalam bentuk Entity Relationship Diagram (ERD). Gambar 3.2 menunjukkan seluruh entitas yang digunakan dalam pembuatan aplikasi website ekstranet MySantika. Setiap garis penghubung pada gambar merepresentasikan relasi one to many. Secara total, pembuatan aplikasi website ekstranet MySantika menggunakan 25 tabel database. Tabel Transaction dan Payment Gateway pada gambar tidak menampilkan keseluruhan field dikarenakan kedua tabel tersebut hanya digunakan untuk menampilkan data sederhana saja, yaitu teks payment method pada halaman Booking List dan Booking Detail.
22 Gambar 3.2 ERD Aplikasi Website Ekstranet MySantika
23 D. Perancangan Aplikasi
Perancangan alur kerja dari aplikasi website ekstranet MySantika digambarkan melalui flowchart. Flowchart merepresentasikan bagaimana setiap halaman beserta komponennya mampu menyelesaikan tugasnya. Gambar 3.3 merupakan flowchart umum aplikasi website ekstranet MySantika. Pada saat website diakses, tampilan pertama adalah halaman Login, lalu dilakukan pemeriksaan apakah user telah terauntetikasi atau belum. Jika sudah, maka selanjutnya membaca navbar mana yang sedang aktif. Navbar yang aktif pertama kali adalah “Hotel” yang selanjutnya diarahkan menuju tampilan halaman Hotel List. Namun, user dapat menuju ke halaman lain dengan cara melakukan input klik pada menu navbar.
Gambar 3.3 Flowchart Umum Aplikasi Website Ekstranet MySantika
24 D.1 Komponen Navbar
Setiap halaman memiliki komponen navigation bar (navbar). Terdapat tujuh menu utama dan satu menu logout pada komponen ini. Flowchart komponen navbar dapat dilihat pada Gambar 3.4.
Gambar 3.4 Flowchart Komponen Navbar
25 D.2 Halaman Hotel List
Pada halaman Hotel List, data Hotel diambil berdasarkan pemeriksaan user yang sedang login. Lalu terdapat fitur filter data berdasarkan nama hotel dan brand. Apabila data diklik, website akan dialihkan ke halaman Hotel Detail.
Halaman ini juga terdapat sebuah button untuk dialihkan menuju halaman Create Hotel. Rincian proses halaman Hotel List dapat dilihat pada Gambar 3.5.
Gambar 3.5 Flowchart Halaman Hotel List
26 D.3 Halaman Create Hotel
Karena halaman Create Hotel hanya boleh diakses oleh super user sehingga terdapat pemeriksaan permission terlebih dahulu saat mengakses halaman ini.
Lalu, terdapat validasi formulir ketika button “Save Changes” diklik sebelum data disimpan dalam database. Flowchart halaman Create Hotel dapat dilihat pada Gambar 3.6.
Gambar 3.6 Flowchart Halaman Create Hotel
27 D.4 Halaman Hotel Detail
Halaman Hotel Detail memiliki fungsionalitas breadcrumb yang sama dengan halaman Create Hotel. Halaman Hotel Detail memiliki beberapa komponen menu, diantaranya adalah General, Facility, Room (halaman Room List), Rate Plan Occurance, Gallery, dan Availability. Flowchart halaman Hotel Detail dapat dilihat pada Gambar 3.7.
Gambar 3.7 Flowchart Halaman Hotel Detail
28 Pada menu General di halaman Hotel Detail, terdapat tujuh sub-menu yang dapat dilihat oleh user. Namun, hanya super user saja yang mempunyai akses untuk mengubah informasi detail suatu hotel. Flowchart halaman Hotel Detail menu General dapat dilihat pada Gambar 3.8.
Gambar 3.8 Flowchart Halaman Hotel Detail - General
29 Pada menu Facility di halaman Hotel Detail, formulir Hotel Facility yang ditampilkan berupa checkbox daftar fasilitas hotel. Sehingga, tidak mungkin validasi formulir gagal. Oleh karena itu, flowchart Gambar 3.9 tidak menampilkan proses validasi formulir.
Gambar 3.9 Flowchart Halaman Hotel Detail - Facility
30 Pada menu Rate Plan Occurance di halaman Hotel Detail, tampilan formulir hanya dapat diakses oleh super user. Rincian tampilan menu ini dapat dilihat pada Gambar 3.10.
Gambar 3.10 Flowchart Halaman Hotel Detail - Occurance
Pada menu Gallery di halaman Hotel Detail, website menampilkan formulir Hotel Gallery yang hanya dapat diubah datanya oleh super user. Flowchart menu ini dapat dilihat pada Gambar 3.11.
Gambar 3.11 Flowchart Halaman Hotel Detail - Gallery
31 Pada menu Availability di halaman Hotel Detail, digunakan lazy loading untuk mengambil dan menampilkan data Fastbooking Availability. Data diambil berdasarkan kalender mingguan yang dipilih oleh user. Rincian tampilan menu ini dapat dilihat pada Gambar 3.12.
Gambar 3.12 Flowchart Halaman Hotel Detail - Availability
D.5 Halaman Backoffice Contact
Halaman Backoffice Contact List merupakan bagian dari menu General pada halaman Hotel Detail, yaitu sub-menu Backoffice. Flowchart Gambar 3.13 menunjukkan proses halaman Backoffice Contact List. Halaman ini dapat menuju ke dua halaman lainnya, yaitu Create Backoffice Contact dan Backoffice Contact Detail.
32 Gambar 3.13 Flowchart Halaman Backoffice Contact List
Halaman Create Backoffice Contact hanya menampilkan formulir kosong yang selanjutnya akan disimpan untuk database. Flowchart halaman Create Backoffice Contact dapat dilihat pada Gambar 3.14.
33 Gambar 3.14 Flowchart Halaman Create Backoffice Contact
Halaman Backoffice Contact Detail memiliki tampilan yang mirip dengan Create Backoffice Contact. Perbedaannya hanyalah halaman ini mengambil data terlebih dahulu untuk dipakai sebagai inisialisasi formulirnya. Flowchart halaman Backoffice Contact Detail dapat dilihat pada Gambar 3.15.
34 Gambar 3.15 Flowchart Halaman Backoffice Contact Detail
D.6 Halaman Room List
Halaman Room List merupakan bagian dari halaman Hotel Detail, tepatnya pada menu Room. Flowchart halaman ini mirip seperti flowchart Backoffice
35 Contact List. Hanya saja, Admin Hotel dapat mengakses halaman Room Detail dengan cara klik pada data room yang ditampilkan. Flowchart halaman Room List dapat dilihat pada Gambar 3.16.
Gambar 3.16 Flowchart Halaman Room List
36 D.7 Tampilan Halaman Create Room
Pada halaman Create Room, formulir terbagi menjadi lima langkah. Namun, hanya formulir Information saja yang memerlukan validasi. Rincian alur proses tampilan halaman Create Room dapat dilihat pada Gambar 3.17.
Gambar 3.17 Flowchart Halaman Create Room
37 D.8 Tampilan Halaman Room Detail
Halaman Room Detail memiliki flowchart yang hampir mirip dengan flowchart halaman Hotel Detail. Hanya terdapat perbedaan jumlah menu.
Flowchart halaman Room Detail dapat dilihat pada Gambar 3.18.
Gambar 3.18 Flowchart Halaman Room Detail
38 Pada menu General di halaman Room Detail, flowchart hampir mirip dengan menu General di halaman Hotel Detail. Hanya terdapat perbedaan jumlah sub-menu saja. Flowchart menu ini dapat dilihat pada Gambar 3.19.
Gambar 3.19 Flowchart Halaman Room Detail – General
Menu Facility dan Gallery pada halaman Room Detail memiliki tampilan yang mirip dengan menu Facility dan Gallery pada halaman Hotel Detail sehingga tidak ditampilkan flowchart-nya.
39 D.9 Halaman Rate Plan List
Halaman Rate Plan List memiliki alur proses yang mirip dengan halaman Room List. Hanya saja, halaman ini hanya dapat diakses oleh super user.
Flowchart halaman Rate Plan List dapat dilihat pada Gambar 3.20.
Gambar 3.20 Flowchart Halaman Rate Plan List
40 D.10 Halaman Create Rate Plan
Mirip seperti halaman Rate Plan List, halaman Create Rate Plan juga hanya dapat diakses oleh super user saja. Halaman ini hanya menampilkan formulir kosong untuk menyimpan data rate plan. Rincian tampilan halaman Create Rate Plan dapat dilihat pada flowchart Gambar 3.21.
Gambar 3.21 Flowchart Halaman Create Rate Plan
41 D.11 Halaman Rate Plan Detail
Halaman Rate Plan Detail mirip seperti halaman Create Rate Plan.
Perbedaannya hanyalah proses pengambilan data dilakukan pada halaman ini untuk inisialisasi formulir. Flowchart halaman Rate Plan Detail dapat dilihat pada Gambar 3.22.
Gambar 3.22 Flowchart Halaman Rate Plan Detail
42 D.12 Halaman Brand List
Tampilan halaman Brand List mirip seperti halaman Rate Plan List.
Flowchart halaman Brand List dapat dilihat pada Gambar 3.23.
Gambar 3.23 Flowchart Halaman Brand List
43 D.13 Halaman Create Brand
Tampilan halaman Create Brand mirip seperti halaman Create Rate Plan.
Flowchart halaman Create Brand dapat dilihat pada Gambar 3.24.
Gambar 3.24 Flowchart Halaman Create Brand
44 D.14 Halaman Brand Detail
Tampilan halaman Brand Detail mirip seperti halaman Rate Plan Detail.
Flowchart halaman Brand Detail dapat dilihat pada Gambar 3.25.
Gambar 3.25 Flowchart Halaman Brand Detail
45 D.15 Halaman Promo List
Halaman Promo List mirip seperti halaman Brand List. Hanya saja, halaman Promo List terbagi menjadi dua menu, yaitu menu Promo Management yang menampilkan daftar promo dan menu Banner Promo Photo yang menampilkan gallery promo. Flowchart halaman Promo List menu Promo Management dapat dilihat pada Gambar 3.26.
Gambar 3.26 Flowchart Halaman Promo List
46 Menu kedua yang ada pada halaman Promo List adalah Banner Promo Photo.
Halaman ini mirip seperti menu Gallery pada halaman Hotel Detail. Flowchart menu Banner Promo Photo dapat dilihat pada Gambar 3.27.
Gambar 3.27 Flowchart Halaman Promo - Banner Promo Photo
47 D.16 Halaman Create Promo
Halaman Create Promo juga menjadi bagian dari menu Promo Management sehingga menu Promo Management dan Banner Promo Photo masih tetap ditampilkan pada halaman ini. Flowchart halaman Create Promo dapat dilihat pada Gambar 3.28.
Gambar 3.28 Flowchart Halaman Create Promo
48 D.17 Halaman Promo Detail
Tampilan halaman Promo Detail mirip dengan halaman Create Promo.
Perbedaannya hanyalah terdapat proses pengambilan data promo pada halaman ini untuk inisialisasi formulir. Flowchart halaman Promo Detail dapat dilihat pada Gambar 3.29.
Gambar 3.29 Flowchart Halaman Promo Detail
49 D.18 Halaman Booking
Secara garis besar, halaman Search Booking dan Booking List memiliki URL yang sama. Namun, parameter yang ada pada URL yang membedakannya.
Flowchart proses penentuan kedua halaman tersebut dapat dilihat pada Gambar 3.30.
Gambar 3.30 Flowchart Umum Halaman Search Booking dan Booking List
50 D.19 Halaman Search Booking
Halaman Search Booking memiliki dua macam formulir pencarian, yaitu pencarian berdasarkan hotel dan pencarian berdasarkan booking id. Pengambilan data nama hotel digunakan untuk multiple selection hotel pada formulir.
Flowchart halaman Search Booking dapat dilihat pada Gambar 3.31.
Gambar 3.31 Flowchart Halaman Search Booking
51 D.20 Halaman Booking List
Tampilan halaman Booking List memiliki fitur yang berbeda dibandingkan halaman lainnya. Halaman Booking List memiliki fitur export data hasil search ke file CSV. Selain itu, tidak ada fitur hapus data, melainkan cancel booking.
Flowchart halaman Booking List dapat dilihat pada Gambar 3.32.
Gambar 3.32 Flowchart Halaman Booking List
52 D.21 Halaman Booking Detail
Halaman Booking Detail memiliki tiga fitur, yaitu cancel reservation, resend email, dan resend reservation. Semua fitur tersebut dapat muncul dengan melalui pemeriksaan berdasarkan beberapa status booking. Flowchart Booking Detail dapat dilihat pada Gambar 3.33.
Gambar 3.33 Flowchart Halaman Booking Detail
53 D.22 Halaman Review
Sama seperti modul Booking, URL halaman Search Review dan Review List hanya dibedakan oleh URL parameternya saja. Flowchart proses penentuan kedua halaman tersebut dapat dilihat pada Gambar 3.34.
Gambar 3.34 Flowchart Umum Halaman Search Review dan Review List
D.23 Halaman Search Review
Halaman Search Review memiliki tampilan yang lebih sederhana dibandingkan halaman Search Booking. Flowchart halaman Search Review dapat dilihat pada Gambar 3.35.
Gambar 3.35 Flowchart Halaman Search Review
54 D.24 Halaman Review List
Halaman Review List memiliki fitur yang lebih sedikit dibandingkan dengan halaman-halaman lainnya karena setiap datanya tidak dapat diklik. Flowchart halaman Review List dapat dilihat pada Gambar 3.36.
Gambar 3.36 Flowchart Halaman Review List
D.25 Halaman User List
Halaman User List memiliki tampilan yang mirip dengan halaman Brand List.
Daftar user yang ditampilkan adalah data user Admin hotel. Flowchart User List dapat dilihat pada Gambar 3.37.
55 Gambar 3.37 Flowchart Halaman User List
56 D.26 Halaman Create User
Halaman Create User memiliki satu fitur tambahan dibandingkan halaman-halaman lainnya, yaitu pembuatan data beberapa user sekaligus dengan cara upload file berekstensi csv berisikan data user. Flowchart halaman Create User dapat dilihat di Gambar 3.38.
Gambar 3.38 Flowchart Halaman Create User
57 D.27 Halaman User Detail
Halaman User detail mirip seperti halaman Create User. Perbedaannya hanyalah terdapat proses pengambilan data sebagai inisialisasi formulir dan tidak terdapat fitur upload csv, melainkan button untuk menuju halaman Change User Password. Flowchart halaman User Detail dapat dilihat pada Gambar 3.39.
Gambar 3.39 Flowchart Halaman User Detail
58 D.26 Halaman Change User Password
Halaman Change User Password digunakan khusus untuk mengganti password suatu user. Flowchart halaman Change User Password dapat dilihat pada Gambar 3.40.
Gambar 3.40 Flowchart Halaman Change User Password
59 E. Rancangan Desain Tampilan Antarmuka
Rancangan tampilan antarmuka sudah dibuat oleh tim desain dan disetujui oleh stakeholder. Setiap tampilan memiliki navigation bar (navbar) sebagai cara untuk bernavigasi antar modul. Pada navbar juga ditampilkan user siapa yang sedang login dan bila diklik akan memunculkan dropdown untuk logout. Berikut ini beberapa rancangan tampilan antarmuka yang telah dibuat oleh tim desain.
Pada Gambar 3.41, desain menampilkan sebuah tabel yang berisi daftar hotel yang dimiliki Kompas Gramedia. Jika login sebagai super user, daftar seluruh hotel akan ditampilkan. Jika login sebagai Admin Hotel, hanya ada satu hotel yang sesuai saja yang ditampilkan. Setiap baris pada daftar tersebut dapat diklik dan menuju halaman Hotel Detail.
Gambar 3.41 Rancangan Desain Halaman Hotel List
Pada Gambar 3.42, desain menampilkan halaman Hotel Detail. Di bawah navbar terdapat tombol “Back” dan juga breadcrumb yang apabila diklik akan kembali ke halaman Hotel List. Halaman Hotel Detail terdiri dari beberapa menu,
60 yaitu General, Facility, Room, Rate Plan Occurance, Gallery, dan Availability.
Pada menu General, terdapat beberapa sub-menu yang berisi formulir-formulir untuk dapat mengubah informasi hotel. Sub-menu General, Contact, Facility, Policy, dan Others memiliki desain yang mirip, sedangkan tampilan sub-menu Thumbnail dapat dilihat pada Gambar 3.42 (a). Teks “Reset Information”
digunakan untuk me-reset formulir dalam keadaan sebelumnya. Tombol
“Cancel” digunakan untuk kembali ke halaman Hotel list. Tombol “Save Changes” digunakan untuk menyimpan perubahan informasi yang dilakukan.
Gambar 3.42 Rancangan Desain Halaman Hotel Detail
61 Pada Gambar 3.42 (a), formulir sub-menu Thumbnail terdiri dari dua field yang dapat diisi dengan foto dengan cara melakukan drag and drop suatu foto atau dengan menekan tombol “Browse”.
Gambar 3.42 (a) Rancangan Desain Halaman Hotel Detail (Lanjutan)
Pada Gambar 3.42 (b), menu Facility pada halaman Hotel Detail berisi daftar-daftar fasilitas yang dimiliki dan tidak dimiliki oleh hotel, ditandai dengan checkbox untuk setiap fasilitasnya. Pada bagian atas, terdapat fitur search yang berfungsi untuk melakukan filter terhadap fasilitas-fasilitasnya. Fungsi-fungsi setiap tombol pada bagian bawah mirip seperti formulir pada menu General.
62 Gambar 3.42 (b) Rancangan Desain Halaman Hotel Detail (Lanjutan)
Pada Gambar 3.42 (c), menu Room pada halaman Hotel Detail berisi daftar tipe kamar yang ada pada hotel beserta kapasitas kamar dan Linked Rate Plan-nya. Menu ini disebut juga sebagai halaman Room List. Apabila salah satu tipe kamar diklik, website akan diarahkan pada halaman Room Detail. Tombol
“Add Room” digunakan untuk menuju ke halaman Create Room. Checkbox digunakan apabila ingin menghapus beberapa kamar secara bersamaan.
63 Gambar 3.42 (c) Rancangan Desain Halaman Hotel Detail (Lanjutan)
Pada Gambar 3.42 (d), menu Rate Plan Occurance menampilkan daftar rate plan yang tersedia pada hotel beserta occurance-nya. Penandaan checkbox berarti rate plan tersebut tersedia pada hari yang ditandai. Namun, checkbox ini hanya dapat dilihat saja, tidak dapat diubah. Tombol “Edit Occurance” akan memunculkan pop-up seperti pada Gambar 3.42 (e) yang digunakan untuk mengubah occurance tersebut. Namun, tombol tersebut hanya dapat digunakan oleh super user. Tombol tersebut disabled bila user yang sedang login adalah Admin Hotel.
64 Gambar 3.42 (d) Rancangan Desain Halaman Hotel Detail (Lanjutan)
Gambar 3.42 (e) Rancangan Desain Halaman Hotel Detail (Lanjutan)
65 Pada Gambar 3.42 (f), menu Gallery berisi daftar gambar suatu hotel. Setiap gambar memiliki field title dan caption. Pengguna dapat menambahkan gambar baru dengan cara drag and drop gambar ke kotak yang tersedia atau menekan tombol “Browse”. Gambar yang sudah dimasukkan dapat diganti dengan cara hover gambar seperti pada Gambar 3.42 (g) dan klik tombol “Change”.
Gambar 3.42 (f) Rancangan Desain Halaman Hotel Detail (Lanjutan)
Gambar 3.42 (g) Rancangan Desain Halaman Hotel Detail (Lanjutan)
66 Pada Gambar 3.42 (h), menu Availability menampilkan daftar rate (relasi kamar dengan rate plan) setiap harinya pada hotel. Terdapat fitur search untuk filter accordion berdasarkan nama tipe kamar atau rate plan.
Gambar 3.42 (h) Rancangan Desain Halaman Hotel Detail (Lanjutan) Halaman Room Detail pada Gambar 3.43 menunjukkan bahwa halaman ini memiliki tiga menu, yaitu General, Facility, dan Gallery. Menu General berisi tiga sub-menu, yaitu Rate Plan, Information, dan Thumbnail. Sub-menu Rate Plan berisi formulir untuk membuat rate beserta dengan add-on dan harganya yang terdapat pada rate tersebut. Teks “Add Rate Plan” untuk menambah rate baru. Tombol “+” untuk menambah add-on baru. Tombol “-” untuk menghapus suatu rate atau add-on. Setiap rate memiliki add-on yang berbeda-beda. Oleh sebab itu, tampilan field add-on dibuat seperti dikelompokkan dalam suatu rate agar mudah dipahami.
67 Gambar 3.43 Rancangan Desain Halaman Room Detail
Sub-menu Information pada Gambar 3.43 (a) berisi formulir informasi kamar.
Sub-menu Thumbnail, menu Facility, dan menu Gallery pada Room Detail mirip dengan halaman Hotel Detail.
68 Gambar 3.43 (a) Rancangan Desain Halaman Room Detail (Lanjutan) Pada Gambar 3.44, halaman Create Room berisi lima step formulir yang perlu diisi secara berurutan, dimulai dari Information, Facility, Thumbnail, Gallery, dan Rate Plan. Tampilan setiap formulir mirip seperti halaman Room Detail. Tombol “Previous” digunakan untuk kembali ke formulir sebelumnya.
Tombol “Add Room” digunakan untuk membuat kamar dan kembali ke halaman Hotel Detail.
69 Gambar 3.44 Rancangan Desain Halaman Create Room
Pada Gambar 3.45, halaman Rate Plan List menampilkan daftar semua rate plan dan beberapa informasi singkat. Checkbox digunakan untuk menghapus beberapa rate plan seperti pada Gambar 3.45 (a). Tombol “Delete Item” dan icon tempat sampah digunakan untuk memunculkan pop-up seperti pada Gambar 3.45 (b) untuk menghapus rate plan. Halaman ini juga terdapat fitur search untuk filter rate plan. Suatu baris pada tabel yang diklik akan menuju ke halaman Rate Plan Detail. Tombol “Create Rate Plan” digunakan untuk menuju ke halaman Create Rate Plan.
70 Gambar 3.45 Rancangan Desain Halaman Rate Plan List
Gambar 3.45 (a) Rancangan Desain Halaman Rate Plan List (Lanjutan)
71 Gambar 3.45 (b) Rancangan Desain Halaman Rate Plan List (Lanjutan) Pada Gambar 3.46, halaman Rate Plan Detail berisi sebuah formulir yang dibagi menjadi tiga bagian, yaitu Basic Information, Period, dan Information.
Pada bagian Period, apabila checkbox Rate Activation Period ditandai, maka akan enable field dibawahnya, yaitu start from dan until. Rancangan desain halaman Create Rate Plan mirip seperti halaman Rate Plan Detail.
Gambar 3.46 Rancangan Desain Halaman Rate Plan Detail
72 Pada Gambar 3.47, tampilan halaman Brand List memiliki desain yang mirip seperti Rate Plan List. Fungsionalitas yang dimilikinya juga mirip. Suatu brand yang diklik akan menuju ke halaman Brand Detail. Tombol “Create Brand” akan menuju ke halaman Create Brand.
Gambar 3.47 Rancangan Desain Halaman Brand List
Pada Gambar 3.48, desain halaman Brand Detail berisi sebuah formulir suatu brand. Desain halaman Create Brand mirip seperti halaman Brand Detail.
Gambar 3.48 Rancangan Desain Halaman Brand Detail
73 Pada Gambar 3.49, halaman Promo List menunjukkan dua menu, yaitu Promo Management dan Banner Promo Photo. Menu Promo Management menampilkan daftar promo. Fungsionalitasnya mirip seperti Rate Plan List.
Desain menu Banner Promo Photo mirip seperti menu Gallery pada Hotel Detail.
Gambar 3.49 Rancangan Desain Halaman Promo List
Pada Gambar 3.50, halaman Promo Detail menampilkan sebuah formulir untuk mengubah informasi suatu promo. Tampilan halaman Create Promo memiliki desain yang mirip seperti halaman Promo Detail.
Gambar 3.50 Rancangan Desain Halaman Promo Detail
74 Gambar 3.51 menampilkan halaman Search Booking dimana terdapat dropdown multi-select hotel, radio-button tipe tanggal, dan field kalendar untuk mengatur range tanggal. Tombol “Search” digunakan untuk menuju ke halaman Booking List berdasarkan search. Teks “Search by Booking ID” untuk mengubah tampilan menjadi Search Booking berdasarkan booking id seperti pada Gambar 3.51 (a).
Gambar 3.51 Rancangan Desain Halaman Search Booking
Gambar 3.51 (a) Rancangan Desain Halaman Search Booking (Lanjutan)
75 Pada bagian atas halaman Booking List di Gambar 3.52 terdapat fitur search yang mirip seperti halaman Search Booking. Tombol “Apply” digunakan untuk me-refresh halaman Booking List dan menampilkan data booking sesuai dengan hasil search. Halaman Booking List ini menampilkan daftar booking dan beberapa informasi singkat terkait booking tersebut. Checkbox digunakan untuk melakukan pembatalan beberapa booking. Tombol “Cancel Bookings” dan icon X digunakan untuk menampilkan pop-up seperti pada Gambar 3.52 (a) untuk melakukan pembatalan booking beserta dengan alasannya. Apabila salah satu booking diklik, akan menuju ke halaman Booking Detail.
Gambar 3.52 Rancangan Desain Halaman Booking List
Gambar 3.52 (a) Rancangan Desain Halaman Booking List (Lanjutan)
76 Pada Gambar 3.53, halaman Booking Detail menampilkan informasi suatu booking secara rinci. Tombol “Cancel Reservation” digunakan untuk melakukan pembatalan booking tersebut. Tombol “Resend Email” digunakan untuk mengirim email kepada customer dan juga admin hotel yang bersangkutan.
Tombol “Edit Check Out Date” untuk mengubah check out date booking tersebut.
Gambar 3.53 Rancangan Desain Halaman Booking Detail
Pada Gambar 3.54, halaman Search Review memiliki desain yang mirip seperti halaman Search Booking. Fungsionalitasnya setiap field-nya juga sama.
Apabila Tombol “Search” diklik, akan menuju ke halaman Review List.
Gambar 3.54 Rancangan Desain Halaman Search Review
77 Pada Gambar 3.55, halaman Review List juga memiliki desain yang mirip seperti halaman Booking List. Fungsionalitas yang tersedia juga mirip. Pada bagian atas, digunakan untuk melakukan pencarian seperti halaman Search Review. Checkbox digunakan untuk seleksi review yang kemudian digunakan untuk menghapus beberapa review. Tombol “Delete Items” digunakan untuk menghapus review yang telah diseleksi dan icon tempat sampah digunakan untuk menghapus suatu review.
Gambar 3.55 Rancangan Desain Halaman Review List
Tim desain tidak membuat rancangan desain untuk modul User dikarenakan backlog pembuatan modul User ada di sprint review ke-11 (seminggu sebelum praktik kerja magang selesai). Sehingga, pembuatan modul User dikerjakan tanpa menunggu tim desain. Namun, tampilan modul User dibuat mirip seperti modul Rate Plan dan Brand. Ada beberapa halaman lain yang tidak dibuat oleh tim desain juga dikarenakan memiliki tampilan yang mirip dengan halaman lainnya.
78 F. Hasil Implementasi
Hasil implementasi aplikasi website ekstranet MySantika ditunjukkan melalui hasil screenshot setiap halaman beserta komponennya yang sudah dibuat.
Pada bagian navbar, tidak ditampilkan gambar profil user dikarenakan database tidak memiliki atribut gambar untuk user. Sesuai rancangan yang sudah dibuat, Gambar 3.56 menunjukkan hasil screenshot layar pada halaman Hotel List.
Gambar tersebut diambil saat keadaan super user yang sedang login, sedangkan gambar 3.56 (a) menunjukkan keadaan Admin Hotel yang sedang login.
Gambar 3.56 Hasil Screenshot Halaman Hotel List
Gambar 3.56 (a) Hasil Screenshot Halaman Hotel List (Admin Hotel)
79 Pada halaman Create Hotel, sesuai rancangan yang telah dibuat, halaman ini hanya dapat diakses oleh super user. Halaman ini berisi sebuah formulir untuk membuat data hotel yang baru. Gambar 3.57 menunjukkan bagian atas halaman, sedangkan Gambar 3.57 (a) menunjukkan bagian bawah halaman beserta dengan tampilan ketika telah memberikan input thumbnail dan belum.
Gambar 3.57 Hasil Screenshot Halaman Create Hotel
Gambar 3.57 (a) Hasil Screenshot Halaman Create Hotel (Lanjutan) Sesuai dengan rancangan, halaman Hotel Detail memiliki enam menu seperti pada Gambar 3.58 yang menunjukkan hasil screenshot halaman Hotel Detail menu General. Formulir dapat diubah oleh super user. Namun, formulir tidak dapat diubah oleh Admin Hotel seperti yang ditunjukkan pada Gambar 3.58 (a).
80 Gambar 3.58 Hasil Screenshot Halaman Hotel Detail - General
Gambar 3.58 (a) Hasil Screenshot Halaman Hotel Detail - General (Admin Hotel)
Hasil sub-menu Contact, Facility, Policy, Thumbnails, dan Others pada menu General mirip seperti menu General. Sub-menu Backoffice dapat dilihat hasilnya pada Gambar 3.59 yang menunjukkan screenshot bagi super user, sedangkan Gambar 3.59 (a) yang menunjukkan screenshot bagi Admin Hotel. Sesuai yang telah dirancangkan, Admin Hotel tidak dapat membuat, menghapus, dan mengubah data Backoffice. Namun, Admin Hotel maupun super user tetap bisa menggunakan fitur filter dan juga sort yang berada di atas daftar backoffice.
81 Gambar 3.59 Hasil Screenshot Halaman Backoffice List
Gambar 3.59 (a) Hasil Screenshot Halaman Backoffice List (Admin Hotel)
Hasil halaman Backoffice Contact Detail dapat dilihat pada Gambar 3.60.
Halaman Create Backoffice Contact memiliki halaman yang mirip kecuali pada formulirnya tidak ada inisialiasi data.
Gambar 3.60 Hasil Screenshot Halaman Backoffice Contact Detail
82 Hasil menu Facility pada Gambar 3.61 mirip seperti desain yang telah dibuat.
Super user maupun Admin Hotel memiliki hasil yang mirip kecuali pada checkbox dan button “Save Changes” di-disable untuk Admin Hotel.
Gambar 3.61 Hasil Screenshot Halaman Hotel Detail - Facility
Hasil menu Rate Plan Occurance pada Gambar 3.62 mirip seperti desain yang telah dibuat. Button “Edit Occurance” di-disable untuk Admin Hotel.
Apabila button tersebut diklik oleh super user, akan menampilkan pop-up seperti Gambar 3.62 (a).
Gambar 3.62 Hasil Screenshot Halaman Hotel Detail - Occurance
Gambar 3.62 (a) Hasil Screenshot Halaman Hotel Detail - Occurance (Lanjutan)
83 Hasil menu Gallery untuk Hotel ditunjukkan pada Gambar 3.63. Sesuai rancangan, data gambar dapat diubah dengan cara hover pada gambar. Data baru dapat ditambah dengan cara drag and drop atau klik button “Browse”.
Gambar 3.63 Hasil Screenshot Halaman Hotel Detail - Gallery
Hasil menu Availability dapat dilihat pada Gambar 3.64. Sesuai rancangan yang telah dibuat, terdapat daftar rate berupa accordion yang apabila diklik akan mengambil data secara lazy loading dan menampilkan detail fastbooking berdasarkan kalender yang muncul. Apabila kalender mingguan diganti, maka semua accordion yang telah terbuka otomatis tertutup.
Gambar 3.64 Hasil Screenshot Halaman Hotel Detail - Availability
84 Hasil halaman Room List dapat dilihat pada Gambar 3.65. Sesuai rancangan, super user dapat menghapus data maupun mengakses halaman Create Room.
Halaman Room List untuk Admin Hotel ditunjukkan pada Gambar 3.65 (a).
Penghapusan data dapat dilakukan secara satu per satu ataupun beberapa data sekaligus dan memunculkan pop-up seperti pada Gambar 3.65 (b).
Gambar 3.65 Hasil Screenshot Halaman Room List
Gambar 3.65 (a) Hasil Screenshot Halaman Room List (Admin Hotel)
Gambar 3.65 (b) Hasil Screenshot Halaman Room List (Lanjutan)
85 Hasil halaman Create Room mirip seperti rancangan, yaitu terdiri dari 5 tahap. Screenshot dapat dilihat pada Gambar 3.66 untuk tahap pertama dan Gambar 3.66 (a) untuk tahap terakhir. Tahap kedua, ketiga dan keempat memiliki tampilan formulir yang mirip seperti formulir-formulir yang ada pada halaman Hotel Detail.
Gambar 3.66 Hasil Screenshot Halaman Create Room
Gambar 3.66 (a) Hasil Screenshot Halaman Create Room (Lanjutan)
Hasil halaman Room detail telah sesuai dengan rancangan yang telah dibuat.
Hasil screenshot halaman Room Detail menu General dapat dilihat pada Gambar 3.67. Admin Hotel memiliki field yang di-disable pada formulir sehingga tidak
86 dapat diubah datanya. Menu-menu lainnya memiliki hasil yang mirip seperti halaman Hotel Detail.
Gambar 3.67 Hasil Screenshot Halaman Room Detail
Hasil halaman Rate Plan List dapat dilihat pada Gambar 3.68. Halaman ini memiliki fitur yang mirip dengan halaman Hotel List dengan tambahan fitur penghapusan data secara satu per satu ataupun beberapa data sekaligus. Pop-up konfirmasi seperti Gambar 3.68 (a) muncul saat mencoba menghapus data.
Gambar 3.68 Hasil Screenshot Halaman Rate Plan List
Gambar 3.68 (a) Hasil Screenshot Halaman Rate Plan List (Lanjutan)
87 Bagian atas hasil halaman Rate Plan Detail ditunjukkan pada Gambar 3.69.
Pada Gambar tersebut dapat terlihat terdapat field berupa text editor sebagai bentuk pengimplementasian What You See Is What You Get (WYSIWYG).
Bagian bawah halaman Rate Plan Detail ditunjukkan pada Gambar 3.69 (a).
Telah sesuai rancangan bahwa field “Start From” dan “Until” hanya dapat di-enable ketika menandai checkbox field “Rate Activation Period”. Hasil implementasi halaman Create Rate Plan mirip seperti halaman Rate Plan Detail, namun dengan formulir yang kosong.
Gambar 3.69 Hasil Screenshot Halaman Rate Plan Detail
Gambar 3.69 (a) Hasil Screenshot Halaman Rate Plan Detail (Lanjutan)
88 Modul Brand memiliki tampilan dan fitur yang sama seperti modul Rate Plan.
Hasil halaman Brand List dapat dilihat pada Gambar 3.70. Halaman Create Brand juga memiliki kesamaan dengan halaman Brand Detail yang dapat dilihat pada Gambar 3.71.
Gambar 3.70 Hasil Screenshot Halaman Brand List
Gambar 3.71 Hasil Screenshot Halaman Brand Detail
Hasil modul Promo telah sesuai dengan rancangan yang telah dibuat, yaitu memiliki dua menu, Promo Management dan Banner Promo Photo. Gambar 3.72 menunjukkan hasil halaman Promo List. Halaman ini juga memiliki fitur hapus data juga yang akan menampilkan pop-up konfirmasi penghapusan data.
89 Gambar 3.72 Hasil Screenshot Halaman Promo List
Hasil menu Banner Promo Photo pada modul Promo mirip seperti menu Gallery pada halaman Hotel Detail. Hasilnya dapat dilihat pada Gambar 3.73.
Gambar 3.73 Hasil Screenshot Halaman Promo - Banner Promo Photo
Hasil halaman Promo Detail ditunjukkan pada screenshot Gambar 3.74.
Halaman Create Promo mirip dengan halaman Promo Detail, namun dengan formulir yang kosong. Halaman ini juga dapat mengakses menu Banner Promo Photo.
Gambar 3.74 Hasil Screenshot Halaman Promo Detail
90 Hasil halaman Search Booking menampilkan formulir yang dapat di-toggle untuk melakukan pencarian booking berdasarkan hotel atau booking id. Hasil halaman Search Booking dapat dilihat pada Gambar 3.75 dan Gambar 3.75 (a).
Admin Hotel hanya ada satu pilihan hotel pada formulir pencarian berdasarkan hotel seperti pada Gambar 3.75 (b).
Gambar 3.75 Hasil Screenshot Halaman Search Booking
Gambar 3.75 (a) Hasil Screenshot Halaman Search Booking (Lanjutan)
Gambar 3.75 (b) Hasil Screenshot Halaman Search Booking (Admin Hotel)
91 Hasil halaman Booking List sudah sesuai dengan perancangan, yaitu memiliki fitur search booking by hotel pada bagian atas daftar booking. Terlebih lagi, halaman ini juga memiliki fitur export to csv untuk melakukan export data hasil pencarian ke dalam sebuah file csv. Hasil Halaman Booking List dapat dilihat pada Gambar 3.76. Selain itu, terdapat fitur cancel booking yang dapat dilakukan oleh super user maupun Admin Hotel. Pop-up formulir alasan dimunculkan ketika mencoba membatalkan booking seperti yang dapat dilihat pada Gambar 3.76 (a).
Gambar 3.76 Hasil Screenshot Halaman Booking List
Gambar 3.76 (a) Hasil Screenshot Halaman Booking List (Lanjutan)
92 Hasil halaman Booking Detail telah sesuai perancangan, dimana terdapat fitur cancel booking, resend email, dan resend reservation. Fitur tersebut tidak selalu tersedia, melainkan melalui pemeriksaan terhadap status booking-nya.
Sebagai contoh, Gambar 3.77 menunjukkan hasil halaman Booking Detail untuk status booking-nya checkout, sedangkan Gambar 3.77 (a) menunjukkan keadaan saat status booking-nya booking expired.
Gambar 3.77 Hasil Screenshot Halaman Booking Detail
Gambar 3.77 (a) Hasil Screenshot Halaman Booking Detail (Lanjutan)
93 Hasil halaman Search Review lebih sederhana dibandingkan halaman Search Booking, dikarenakan tidak terdapat fitur pencarian berdasarkan review id. Hasil halaman Search Review dapat dilihat pada Gambar 3.78.
Gambar 3.78 Hasil Screenshot Halaman Search Review
Hasil halaman Review List mirip seperti halaman Booking List. Namun, halaman Review List tidak terdapat fitur export data. Hasil halaman Review List dapat dilihat pada Gambar 3.79.
Gambar 3.79 Hasil Screenshot Halaman Review List
Hasil halaman User List mirip seperti halaman Rate Plan List dan juga Brand List. Hasil halaman User List dapat dilihat pada Gambar 3.80.
94 Gambar 3.80 Hasil Screenshot Halaman User List
Hasil halaman Create User telah sesuai dengan perancangan yang telah dibuat, yaitu memiliki fitur uplaod csv untuk membuat banyak data user secara bersamaan. Hasil halaman Create User dapat dilihat pada Gambar 3.81.
Gambar 3.81 Hasil Screenshot Halaman Create User
Hasil halaman User Detail hanya memiliki sedikit perbedaan dengan halaman Create User, yaitu pada formulirnya tidak terdapat field password.
Selain itu, halaman User Detail memiliki button untuk menuju halaman Change User Password. Hasil halaman User Detail dapat dilihat pada Gambar 3.82.
95 Gambar 3.82 Hasil Screenshot Halaman User Detail
Hasil halaman Change User Password digunakan untuk mengubah password dari suatu user Admin Hotel. Field yang digunakan sama seperti field password pada umumnya. Hasil halaman Change User Password dapat dilihat pada Gambar 3.83.
Gambar 3.83 Hasil Screenshot Halaman Change User Password
96 3.3.2 Kendala yang Ditemukan
Selama mengerjakan aplikasi website ekstranet MySantika, kendala yang ditemui adalah sebagai berikut.
1. Penggunaan aplikasi Docker untuk sistem operasi Windows sering bermasalah sehingga seringkali waktu terbuang untuk memperbaiki aplikasi Docker untuk Windows.
2. Aplikasi website ekstranet tidak dibangun dari awal sehingga memerlukan waktu untuk mempelajari code yang telah ada.
3. Framework Django yang digunakan belum pernah diajarkan dalam perkuliahan sehingga membutuhkan waktu untuk beradaptasi.
3.3.3 Solusi Atas Kendala yang Ditemukan
Solusi dari kendala yang ditemui selama mengerjakan aplikasi website ekstranet MySantika adalah sebagai berikut.
1. Aktif mencari solusi di internet untuk memperbaiki Docker setiap terjadi masalah.
2. Merombak ulang code website yang telah dibuat agar menjadi lebih rapi dan meningkatkan readability.
3. Aktif mencari bahan pembelajaran di forum, artikel, ataupun dokumentasi di internet.
