3.3 Perancangan Layar
3.3.1 Perancangan Layar Client Side
1. Halaman Login User
Gambar 3.51 Rancangan Layar Halaman Login User
Pada halaman ini user yang memiliki ID dapat melakukan login. Terdapat button login yang ketika di klik maka user yang ada dapat mengakses lembar selanjutnya, forgot password untuk user yang telah memiliki account namun lupa password dan button register untuk user yang ingin membuat ID baru. Terdapat beberapa film yang sedang ada sekarang, dan menu film yang akan datang. Lalu terdapat kolom New dan
gambar daripada film yang terbaru dan yang akan datang yang terdapat di bioskop.
2. Halaman Register
Gambar 3.52 Rancangan Layar Halaman Register
Pada halaman ini user melakukan pendaftaran dengan cara mengisi username, password, dan email sesuai pada Textbox yang tersedia. Setelah selesai melakukan pengisian data, user dapat menekan tombol Register untuk mendaftar dan menekan tombol Back untuk membatalkan pendaftaran.
3. Halaman Home
Gambar 3.53 Rancangan Layar Halaman Home
Pada halaman ini user berada di halaman home dimana user disambut dengan welcome. Ini adalah halaman home yang awalnya user mengakses halaman ini sebelum dia mengakses halaman movie, food, ataupun beverages, lalu terdapat new dan coming soon untuk menjelaskan film yang sedang ada dan akan datang. Lalu terdapat button untuk user mengakses halaman booking ticket, order food and beverage. Selain itu terdapat button untuk user dapat mengakses halaman my ticket dan my
food & beverage dimana user dapat melihat tiket yang telah di beli,
4. Halaman Movie
Gambar 3.54 Rancangan Layar Halaman Movie
Pada halaman ini user dapat melihat judul, gambar, dan video dari suatu film. Lalu juga terdapat deskripsi dari film tersebut, yang menjelaskan cerita singkat tentang film yang sedang di tayangkan di bioskop tersebut. Video trailer film yang menunjukan pemutaran singkat film tersebut, dan terdapat kotak comment sehingga user dapat menginput
comment sehingga mereka dapat memberikan kesan atau pesan mereka
setelah mereka menonton film tersebut, dan menggunakan button submit untuk mengepost comment yang diberikan. Juga terdapat last comment dimana user dapat melihat tanggapan terakhir dari user lain tentang film tersebut.
5. Halaman Booking Ticket
a. Halaman Cinema
Gambar 3.55 Rancangan Layar Halaman Cinema
Pada halaman ini, user dapat memilih bioskop yang menjadi tempat tujuan dimana setelah itu akan ditunjukan dimana letak dan film-film yang akan ditayangkan. User dapat memilih bioskop yang ada/tersedia, setelah selesai memilih user dapat menekan tombol next untuk lanjut ke halaman berikutnya, dan menekan tombol back untuk kembali ke halaman sebelumnya.
b. Halaman Choose Location
Gambar 3.56 Rancangan Layar Halaman Choose Location
Pada halaman ini dijelaskan tentang lokasi dimana user dapat memilih lokasi sesuai dengan daerah masing-masing dengan memilih pilihan pada radio button. User memilih daerah yang menjadi tempat tujuan, setelah selesai user dapat memilih tombol next untuk lanjut ke halaman selanjutnya, dan tombol back jika ingin kembali ke halaman sebelumnya.
c. Halaman Choose Mal Location
Gambar 3.57 Rancangan Layar Halaman Choose Mal Location
Halaman ini menjelaskan tentang lokasi bioskop
terdekat(gedung/pusat perbelanjaan). Terdapat radio button dimana user memilih lokasi gedung dimana terdapat bioskop tersebut. Terdapat tombol back untuk kembali ke halaman sebelumnya , sedangkan ketika
d. Halaman Choose Movie
Gambar 3.58 Rancangan Layar Halaman Choose Movie
Halaman ini menjelaskan tentang daftar film yang diputar di bioskop tersebut. User dapat memilih salah satu film yang diinginkan untuk ditonton beserta jam tayangnya. Setelah memilih, user dapat mengklik button next untuk lanjut ke halaman selanjutnya dan mengklik
e. Halaman Choose Seat
Gambar 3.59 Rancangan Layar Halaman Choose Seat
Pada halaman ini menjelaskan tentang user memilih tempat duduk sesuai jumlah tiket yang di pesan. User dapat menekan tombol next untuk lanjut ke halaman selanjutnya dan menekan tombol back untuk kembali ke halaman sebelumnya.
f. Halaman Payment Ticket
Gambar 3.60 Rancangan Layar Halaman Payment Ticket
Halaman ini menjelaskan tentang terdapat username dari user, judul film, no tempat duduk, no studio, dan harga tiket. Akan muncul QRCode dari tiket dan ketika selesai terdapat tombol submit untuk mengakhiri pembelian tiket.
6. Halaman Order Food and Beverages
a. Halaman Food
Gambar 3.61 Rancangan Layar Halaman Food
Pada halaman ini user melakukan pembelian makanan sesuai dengan apa yang diinginkan. Terdapat gambar dari makanan yang dapat di pesan, lalu user dapat melihat menu- menu apa saja yang ada dalam menu food ini dan mengisi qty untuk jumlah dari makanan yang di pesan melalui box yang ada, dan list harga dari makanan. Ketika selesai melakukan pemesanan, user dapat menekan tombol next untuk pergi ke halaman berikutnya.
b. Halaman Beverages
Gambar 3.62 Rancangan Layar Halaman Beverages
Pada halaman ini user melakukan transaksi untuk pembelian minuman. Pada halaman ini terdapat gambar dari minuman yang dapat di pesan, lalu user dapat melihat menu-menu apa saja yang ada dalam menu Beverages ini dan mengisi qty untuk jumlah dari minuman yang di pesan melalui box yang ada di qty, beserta dengan harga dari minuman yang ada.
User dapat memilih qty sesuai dengan yang di inginkan. Juga terdapat
7. Halaman Payment Food and Beverages
Gambar 3.63 Rancangan Layar Halaman Payment Food and Beverages
Halaman ini menjelaskan tentang terdapat username dari
user,makanan dan minuman yang akan dibeli beserta harganya. Akan
muncul QRCode dari tiket dan ketika selesai terdapat tombol submit untuk mengakhiri pembelian makanan dan minuman. Lalu tombol back untuk kembali ke halaman sebelumnya.
8. Halaman My Ticket
Gambar 3.64 Rancangan Layar Halaman My Ticket
Pada halaman ini, user mengecek film-film yang telah dipesannya. Di halaman ini terdapat juga QR Code dari film-film tersebut. User juga dapat menghapus film-film yang tidak diinginkan untuk ditonton dengan memilih dahulu mana film yang ingin dihapus lalu langsung menekan
button delete. Apabila user ingin kembali ke halaman home maka dapat
9. Halaman My Food and Beverages
Gambar 3.65 Rancangan Layar Halaman My Food and Beverages
Pada halaman ini, user mengecek makanan dan minuman yang telah dipesannya. Di halaman ini terdapat juga QR Code dari makanan dan minuman tersebut. User juga dapat menghapus makanan dan minuman yang tidak diinginkan untuk dibeli dengan memilih dahulu mana makanan dan minuman yang ingin dihapus lalu langsung menekan
button delete. Apabila user ingin kembali ke halaman home maka dapat