Perancangan Form Konfirmasi Pembayaran Cloud Travel Perancangan Halaman Panduan Penyewaan Cloud Travel

18. Perancangan Halaman Utama Web Travel www.namatravel.cloud-travel.net Berikut adalah perancangan halaman utama web travel dapat dilihat pada gambar 3.112. T01 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL SEKILAS PROFIL  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Warna Background : Putih Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Gambar 3.112 Perancangan Halaman Utama Web Travel 19. Perancangan Halaman Informasi Layanan Web Travel Berikut adalah perancangan halaman informasi layanan web travel dapat dilihat pada gambar 3.113. T02 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL LAYANAN  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.113 Perancangan Halaman Informasi Layanan Web Travel 20. Perancangan Halaman Informasi Rute dan Jadwal Web Travel Berikut adalah perancangan halaman informasi rute dan jadwal web travel dapat dilihat pada gambar 3.114. T03 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL RUTE JADWAL  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.114 Perancangan Halaman Informasi Rute dan Jadwal Web Travel 21. Perancangan Form Reservasi Online Web Travel Berikut adalah perancangan form reservasi online web travel dapat dilihat pada gambar 3.115. Gambar 3.115 Perancangan Form Reservasi Online Web Travel 22. Perancangan Halaman Galeri Web Travel Berikut adalah perancangan halaman galeri web travel dapat dilihat pada gambar 3.116. T05 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL GALERI  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk T05  Klik Lowongan untuk masuk T06  Klik Hubungi Kami untuk masuk T07  Klik FAQ untuk masuk T08  Klik Tentang Kami untuk masuk T09  Klik Login untuk masuk T10  Klik Daftar untuk masuk T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Copyright © Travel Cloud Hubungi Kami LOGIN | DAFTAR Nama Album Nama Album Moto Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.116 Perancangan Halaman Galeri Web Travel 23. Perancangan Halaman Informasi Lowongan Web Travel Berikut adalah perancangan halaman informasi lowongan Web Travel dapat dilihat pada gambar 3.117. T06 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL LOWONGAN  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Bckground : Putih Gambar 3.117 Perancangan Halaman Informasi Lowongan Web Travel 24. Perancangan Halaman Hubungi Kami Web Travel Berikut adalah perancangan halaman hubungi kami web travel dapat dilihat pada gambar 3.118. Gambar 3.118 Perancangan Halaman Hubungi Kami Web Travel 25. Perancangan Halaman Informasi FAQ Web Travel Berikut adalah perancangan halaman informasi FAQ web travel dapat dilihat pada gambar 3.119. T08 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL FAQ  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Pertanyaan Jawaban Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.119 Perancangan Halaman Informasi FAQ Web Travel 26. Perancangan Halaman Informasi Tentang Kami Berikut adalah perancangan halaman informasi tentang kami web travel dapat dilihat pada gambar 3.120. T09 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL TENTANG KAMI  Klik Home untuk masuk F06  Klik Layanan untuk masuk F07  Klik Rute Jadwal untuk masuk F08  Klik Reservasi untuk masuk F09  Klik Galeri untuk masuk F10  Klik Lowongan untuk masuk F11  Klik Hubungi Kami untuk masuk F12  Klik FAQ untuk masuk F13  Klik Tentang Kami untuk masuk F14  Klik Profil untuk masuk F17  Klik Pesanan untuk masuk F18  Klik Konfirmasi Pembayaran untuk masuk F19  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami Selamat Datang Profil Motto Kontak Profil | Pesanan Konfirmasi Pembayaran Logout Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.120 Perancangan Halaman Informasi Tentang Kami Web Travel 27. Perancangan Form Login Member Berikut adalah perancangan form login member dapat dilihat pada gambar 3.121. T10 Silahkan Isi Data Login Anda  Klik Tombol Login untuk proses menyimpan data login  Jika data kosong, akan muncul pesan P26 Username Password Login Warna: Putih Font : Times New Roman, Hitam Ukuran :20px Gambar 3.121 Perancangan form login Member 28. Perancangan Form Pendaftaran Member Berikut adalah perancangan form pendaftaran dapat dilihat pada gambar 3.122. T12 Silahkan isi field dibawah untuk mendaftar  Klik Daftar untuk proses menyimpan data pendaftaran  Jika data kosong, akan muncul pesan P22  Jika data diisi semua, akan muncul pesan P23  Jika memasukkan username yang telah terdaftar, akan muncul pesan P24  Jika memasukkan email yang telah terdaftar, akan muncul pesan P25 Nama Username Daftar Email Warna: Putih Font : Times New Roman, Hitam Ukuran :20px Gambar 3.122 Perancangan Form Pendaftaran 29. Perancangan Form Profil Member Berikut adalah perancangan form profil member dapat dilihat pada gambar 3.123. Gambar 3.123 Perancangan Form Profil Member 30. Perancangan Halaman Informasi Pesanan Berikut adalah perancangan Halaman informasi pesanan dapat dilihat pada gambar 3.124. Gambar 3.124 Perancangan Halaman Informasi Pesanan 31. Perancangan Form konfirmasi Pembayaran Berikut adalah perancangan form konfirmasi pembayaran dapat dilihat pada gambar 3.125. Gambar 3.125 Perancangan Form Konfirmasi Pembayaran 32. Perancangan Halaman Informasi Berita Travel Shuttle Berikut adalah perancangan halaman informasi berita travel shuttle dapat dilihat pada gambar 3.126. T15 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL BERITA  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Bckground : Putih Gambar 3.126 Perancangan Halaman Informasi Berita Travel Shuttle 33. Perancangan Halaman Informasi Kegiatan Travel Shuttle Berikut adalah perancangan halaman informasi kegiatan travel shuttle dapat dilihat pada gambar 3.127. T15 Nama Travel Shutle HOME LAYANAN HUBUNGI KAMI LOWONGAN GALERI RESERVASI RUTE JADWAL KEGIATAN  Klik Home untuk masuk ke T01  Klik Layanan untuk masuk ke T02  Klik Rute Jadwal untuk masuk ke T03  Klik Reservasi untuk masuk ke T04  Klik Galeri untuk masuk ke T05  Klik Lowongan untuk masuk ke T06  Klik Hubungi Kami untuk masuk ke T07  Klik FAQ untuk masuk ke T08  Klik Tentang Kami untuk masuk ke T09  Klik Login untuk masuk ke T10  Klik Daftar untuk masuk ke T11  Klik Berita untuk masuk ke T15  Klik Kegiatan untuk masuk ke T16 Logo BERITA KEGIATAN Nama Travel | FAQ |Tentang Kami Hubungi Kami LOGIN | DAFTAR Moto Copyright © Travel Cloud Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Bckground : Putih Gambar 3.127 Perancangan Halaman Informasi Kegiatan Travel Shuttle 34. Perancangan Form Login Admin Travel Shuttle Berikut adalah perancangan form login travel shuttle dapat dilihat pada gambar 3.128. AT01 Nama Travel Cloud  Klik Tombol Login untuk proses menyimpan data login  Klik lupa password untuk masuk ke AT02  Jika data kosong akan muncul pesan P08 Username Password Login Admin Lupa Password Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.128 Perancangan Form Login Admin Travel Shuttle 35. Perancangan Form Lupa Password Admin Travel Shuttle Berikut adalah perancangan form lupa password travel shuttle dapat dilihat pada gambar 3.129. AT02 Nama Travel Cloud  Klik Tombol reset password untuk reset password  Jika data terisi akan muncul pesan P09 Username Password Reset Password Admin Lupa Password Font : Times New Roman, Bold, Hitam Ukuran : 36px Warna disesuaikan Warna Background : Putih Gambar 3.129 Perancangan Form Lupa Password Admin Travel Shuttle 36. Perancangan Halaman Utama Admin Travel Shuttle Berikut adalah perancangan halaman utama travel shuttle dapat dilihat pada gambar 3.130. AT03 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan Selamat Datang, Admin Travel Shuttle  Klik Home untuk masuk ke AT01  Klik Profil Travel untuk masuk ke AT01  Klik Layanan untuk masuk ke AT03  Klik BeritaKegiatan untuk masuk ke AT04  Klik Galeri untuk masuk ke AT05  Klik FAQ untuk masuk ke AT06  Klik Lowongan untuk masuk ke AT07  Klik Olah Data Travel untuk masuk ke AT08, AT09 dan AT10  Klik Ubah Password untuk masuk ke AT11  Klik Logout untuk keluar dari halaman Admin Travel Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Ubah Password Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.130 Perancangan Halaman Utama Admin Travel Shuttle 37. Perancangan Form profil Travel Berikut adalah perancangan form profil travel dapat dilihat pada gambar 3.131. Gambar 3.131 Perancangan Form Profil Travel Shuttle 38. Perancangan Halaman Layanan Travel Shuttle Berikut adalah perancangan halaman layanan travel dapat dilihat pada gambar 3.132. Gambar 3.132 Perancangan Halaman Layanan Travel Shuttle 39. Perancangan Halaman Berita dan Kegiatan Travel Shuttle Berikut adalah perancangan halaman berita dan kegiatan travel dapat dilihat pada gambar 3.133. Gambar 3.133 Perancangan Halaman Berita dan Kegiatan Travel Shuttle 40. Perancangan Halaman Pengolahan Galeri Berikut adalah perancangan halaman pengolahan galeri dapat dilihat pada gambar 3.134. AT07 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan GALERI  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik Tambah Galeri untuk masuk ke AT18  Klik Tombol Tidak tampil untuk mengubah status tampil  Klik tombol hapus untuk menghapus foto  Jika data kosong akan muncul P35  Jika data diisi akan muncul P42  Jika menekan tombol tidak tampil akan muncul P43  Jika menekan tombol hapus akan muncul P44 Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Tambah Galeri Album Status tampil : tampil Status tampil : tampil Tidak tampil Tidak tampil Hapus Hapus Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.134 Perancangan Halaman Pengolahan Galeri 41. Perancangan Halaman Pengolahan FAQ Berikut adalah perancangan halaman pengolahan FAQ dapat dilihat pada gambar 3.135. Gambar 3.135 Perancangan Halaman Pengolahan FAQ 42. Perancangan Halaman Pengolahan Lowongan Berikut adalah perancangan halaman pengolahan lowongan dapat dilihat pada gambar 3.136. Gambar 3.136 Perancangan Halaman Pengolahan Lowongan 43. Perancangan Halaman Pengolahan Rute dan Jadwal Berikut adalah perancangan halaman pengolahan rute dan jadwal dapat dilihat pada gambar 3.137. Gambar 3.137 Perancangan Halaman Pengolahan Rute dan Jadwal 44. Perancangan Halaman Data Pemesanan Tiket Berikut adalah perancangan halaman data pemesanan tiket dapat dilihat pada gambar 3.138. Gambar 3.138. Perancangan Halaman Data Pemesanan Tiket 45. Perancangan Halaman Data Pembayaran Berikut adalah perancangan halaman data pembayaran dapat dilihat pada gambar 3.139. Gambar 3.139 Perancangan Halaman Data Pembayaran 46. Perancangan Form Ubah Password Admin Travel Shuttle Berikut adalah perancangan form ubah password admin travel shuttle dapat dilihat pada gambar 3.140. AT13 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan Selamat Datang, Admin Travel  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol Ubah Password untuk proses penyimpana password  Jika data diisi akan muncul pesan P10 Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Password Baru Ulang Password Ubah Password Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.140 Perancangan Form Ubah Password Admin Travel Shuttle 47. Perancangan Form Tambah Informasi Layanan Travel Shuttle Berikut adalah perancangan form tambah informasi layanan travel shuttle dapat dilihat pada gambar 3.141. Gambar 3.141 Perancangan Form Tambah Informasi Layanan Travel 48. Perancangan Form Ubah Informasi Layanan Travel Shuttle Berikut adalah perancangan form ubah informasi layanan travel shuttle dapat dilihat pada gambar 3.142. AT15 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan LAYANAN  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol Simpan Perubahan untuk proses penyimpana perubahan informasi layanan Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Nama Layanan Deskripsi Layanan Melayani jakarta- Bandung File Gambar Shuttle image Browse Simpan Perubahan Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.142 Perancangan Form Ubah Informasi Layanan Travel 49. Perancangan Form Tambah Informasi BeritaKegiatan Travel Shuttle Berikut adalah perancangan form tambah informasi beritakegiatan travel shuttle dapat dilihat pada gambar 3.143. Gambar 3.143 Perancangan Form Tambah Informasi BeritaKegiatan 50. Perancangan Form Ubah Informasi BeritaKegiatan Travel Shuttle Berikut adalah perancangan form ubah informasi beritakegiatan travel shuttle dapat dilihat pada gambar 3.144. AT17 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol simpan Perubahan untuk proses penyimpan perubahan informasi beritakegiatan Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Judul Isi Berita Kegiatan contoh File Gambar Berita image Browse Simpan Perubahan Jenis Berita Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.144 Perancangan Form Ubah Informasi BeritaKegiatan 51. Perancangan Form Tambah Galeri Travel Shuttle Berikut adalah perancangan form tambah galeri travel shuttle dapat dilihat pada gambar 3.145. AT18 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan GALERI  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol Tambah Foto galeri untuk proses penyimpan foto galeri  Klik Tombol Tidak tampil untuk merubah status tampil  Klik tombol hapus untuk proses menghapus foto Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Album File Gambar Tambah Foto Galeri Tambah Galeri Browse Status tampil : tampil Tidah Tampil Hapus Status tampil : tampil Tidah Tampil Hapus Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.145 Perancangan Form Tambah Galeri Travel Shuttle 52. Perancangan Form Tambah Informasi FAQ Travel Shuttle Berikut adalah perancangan form tambah informasi FAQ travel shuttle dapat dilihat pada gambar 3.146. AT19 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan FAQ  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol Tambah FAQ untuk proses penyimpan informasi FAQ  Klik Tombol TidakYa pada kolom Tampilkan untuk merubah status tampil  Klik tombol hapus untuk proses menghapus informasi FAQ  Klik Tombol Edit untuk masuk ke AT20  Klik tombol Lihat Detail untuk proses menampilkan detail informasil FAQ Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Album File Gambar Tambah Foto Galeri Tambah Galeri Browse FAQ Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.146 Perancangan Form Tambah Informasi FAQ Travel Shuttle 53. Perancangan Form Ubah Informasi FAQ Travel Shuttle Berikut adalah perancangan form ubah informasi FAQ travel shuttle dapat dilihat pada gambar 3.147. AT20 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol simpan Perubahan untuk proses penyimpan perubahan informasi FAQ Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Pertanyaan Jawaban pertanyaan Simpan Perubahan jawaban Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.147 Perancangan Form Ubah Informasi FAQ Travel Shuttle 54. Perancangan Form Tambah Informasi Lowongan Travel Shuttle Berikut adalah perancangan form tambah informasi lowongan travel shuttle dapat dilihat pada gambar 3.148. Gambar 3.148 Perancangan Form Tambah Informasi Lowongan Travel 55. Perancangan Form Ubah Informasi Lowongan Travel Shuttle Berikut adalah perancangan form ubah informasi lowongan travel shuttle dapat dilihat pada gambar 3.149. AT22 Nama Travel Shutle Home Profil Travel Olah Data Reservasi FAQ Galeri BeritaKegiatan Layanan  Klik Home untuk masuk ke AT03  Klik Profil Travel untuk masuk ke AT04  Klik Layanan untuk masuk ke AT05  Klik BeritaKegiatan untuk masuk ke AT06  Klik Galeri untuk masuk ke AT07  Klik FAQ untuk masuk ke AT08  Klik Lowongan untuk masuk ke AT09  Klik Olah Data Travel untuk masuk ke AT10, AT11 dan AT12  Klik Logout untuk keluar dari halaman Admin Travel  Klik tombol Simpan Perubahan untuk proses penyimpan Perubahan informasi lowongan Logo Moto Copyright © Travel Cloud Lowongan Logout Rute Jadwal Pemesanan Pembayaran Nama Posisi DeskripsiSyarat SUPIR Simpan Perubahan SMA Masa Berlaku 22-12-2012 Font : Times New Roman, Bold, Hitam Ukuran : 36px, 5px Warna disesuaikan Warna Background : Putih Gambar 3.149 Perancangan Form Ubah Informasi Lowongan Travel 56. Perancangan Form Tambah Rute Berikut adalah perancangan form tambah rute dapat dilihat pada gambar 3.150. Gambar 3.150 Perancangan Form Tambah Rute 57. Perancangan Form Ubah Rute Kota Berikut adalah perancangan form ubah rute kota dapat dilihat pada gambar 3.151. Gambar 3.151 Perancangan Form Tambah Rute Kota 58. Perancangan Form Ubah Rute Point Berikut adalah perancangan form ubah rute point dapat dilihat pada gambar 3.152. Gambar 3.152 Perancangan Form Tambah Rute Point 59. Perancangan Form Tambah Jadwal Keberangkatan Berikut adalah perancangan form tambah jadwal keberangkatan dapat dilihat pada gambar 3.153. Gambar 3.153 Perancangan Form Tambah Jadwal Keberangkatan 60. Perancangan Form Ubah Jadwal Keberangkatan Berikut adalah perancangan form ubah jadwal keberangkatan dapat dilihat pada gambar 3.154. Gambar 3.154 Perancangan Form Ubah Jadwal Keberangkatan

3.4.2.3 Perancangan Antarmuka Pesan

Berikut ini merupakan form perancangan antarmuka pesan pada aplikasi ini, dapat dilihat pada gambar 3.155. Isi seluruh form dengan benar untuk mendaftar P01 Registrasi Anda telah kami terima. Silakan cek email Anda untuk mengetahui kode pembayaranya. Terima Ksih. P02 Isi seluruh form dengan benar untuk konfirmasi pembayaran P03 Data konfirmasi pembayaran Anda tidak dapat kami input. Silakan coba kembali P04 Konfirmasi pembayaran Anda telah kami terima. Silakan cek email anda paling lama 1x24 jam untuk mendapatkan link aktivasi.Terima kasih P05 Nama perusahaan travel shuttle yang Anda gunakan sudah terdaftar P06 Email yang Anda gunakan sudah terdaftar P07 Username atau password salah P08 Silakan cek email Anda P09 Password berhasil diubah P10 Silakan isi seluruh field P11 Fitur berhasil ditambah P12 Fitur berhasil diubah P13 Paket berhasil ditambah P14 Paket berhasil diubah P15 Silakan isi field untuk mencari data travel P16 Tidak ada data travel yang Anda cari P17 Status bayar travel berhasil diubah P18 Email aktivasi telah dikirim P19 Status aktif travel berhasil diubah P20 Email aktivasi telah dikirim P21 Silakan isi field dibawah ini untuk mendaftar P22 Data Anda telah terdaftar. Silakan cek email Anda untuk melihat password user Anda. Disarankan untuk mengisi profil Anda setelah login. Terima kasih P23 Username telah digunakan P24 Email telah digunakan P25 Silakan isi data login Anda P26 Profil berhasil diubah P27 Data pemesanan Anda sedang kami proses. Silakan tunggu sebentar untuk mendapatkan sms dan email detail pemesanan Anda. P28 Pemesanan berhasil dibatalkan P29 Kode pemesanan salah P30 Konfirmasi pembayaran Anda telah kami terima. Silakan cek email Anda paling lama 1x24jam untuk mendapatkan tiket Anda. Terima kasih P31 Silakan isi seluruh form dengan benar dan valid P32 Pesan Anda telah terkirim. Silakan tunggu jawaban dari kami. Terima kasih. P33 Profil berhasil disimpan P34 Silakan isi seluruh field P35 Layanan berhasil ditambah P36 OK OK Layanan berhasil diubah P37 Berita berhasil ditambah P38 Berita berhasil diubah P39 Kegiatan berhasil ditambah P40 Kegiatan berhasil diubah P41 Gambar berhasil ditambah P42 Status gambar berhasil diubah P43 Foto berhasil dihapus P44 FAQ berhasil ditambah P45 Yakin akan menghapus data ini? P46 Data FAQ berhasil dihapus P47 Lowongan berhasil ditambah P48 Lowongan berhasil diubah P49 Data lowongan berhasil dihapus P50 Point asal dan point tujuan tidak boleh sama P51 Rute gagal ditambah P52 Rute berhasil ditambah P53 Rute Kota berhasil diubah P54 Ok Cancel Rute Point telah ada P55 Rute Point berhasil diubah P56 Yakin akan menghapus data rute ini? P57 Data rute berhasil dihapus P58 Data rute_kota berhasil dihapus P59 Silakan isi form dengan lengkap P60 Jadwal berhasil ditambah P61 Jadwal berhasil diubah P62 Yakin akan menghapus data jadwal in? P63 Ok Cancel Ok Cancel Data jadwal berhasil dihapus P64 Maaf, data yang Anda cari tidak ada P65 Status bayar berhasil diubah Email berhasil dikirim P66 Gambar 3.155 Perancangan Antarmuka Pesan

3.4.2.4 Jaringan Semantik

Berikut ini adalah gambar aliran dari menu-menu yang ada dalam aplikasi. 1. Jaringan semantik menu cloud travel Jaringan semantik menu cloud travel dapat dilihat pada gambar 3.156. F01 F02 F03 F04 F05 P01 P02 P06 P03 P04 P05 P07 Gambar 3.156 Jaringan Semantik Menu Cloud Travel 2. Jaringan semantik menu admin cloud provider Jaringan semantik menu admin cloud provider dapat dilihat pada gambar 3.157. A02 A01 A03 A04 A09 A10 A05 A11 A12 A06 A07 P08 P10 P11 P12 P13 A08 P14 P15 P16 P17 P18 P19 P09 P21 P16 P17 P20 P11 Gambar 3.157 Jaringan Semantik Menu Admin Cloud Provider 3. Jaringan Semantik Menu Pengunjung Non Member Jaringan semantik untuk menu pengunjung non member dapat dilihat pada gambar 3.158. T01 T02 T03 T05 T06 T07 T08 T09 T11 T15 T16 P23 P22 P32 P33 P24 P25 Gambar 3.158 Jaringan Semantik Menu Pengunjung Non Member 4. Jaringan Semantik Menu Pengunjung Member Jaringan semantik untuk menu pengunjung member dapat dilihat pada gambar 3.159. T01 T02 T03 T04 T07 T08 T09 T10 T15 T05 T06 P32 P33 T16 T12 T13 T14 P27 P26 P28 P03 P30 P31 P29 Gambar 3.159 Jaringan Semantik Menu Pengunjung Member 5. Jaringan Semantik Menu Admin Travel Shuttle Jaringan semantik untuk menu admin travel shuttle dapat dilihat pada gambar 3.160. AT03 AT12 AT13 AT01 AT06 AT07 AT08 AT09 AT10 AT04 AT05 AT11 AT21 AT02 P09 P08 AT14 AT15 AT16 AT17 AT18 AT19 AT20 AT22 AT23 AT24 AT25 AT26 P34 P35 P10 AT27 P35 P35 P35 P36 P37 P38 P39 P40 P41 P42 P43 P44 P45 P46 P47 P46 P48 P49 P50 P55 P65 P65 P66 Gambar 3.160 Jaringan Semantik Menu Admin Travel Shuttle

3.5 Perancangan Method

Sebagai langkah terakhir dalam proses perancangan yaitu merancang method yang akan diimplementasikan ke dalam sistem. Metode ini akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan method untuk membangun aplikasi cloud computing pada untuk perusahaan jasa travel shuttle yang akan dibangun adalah sebagai berikut :

1. Method Pendaftaran Cloud Travel

Method pendaftaran terjadi ketika admin travel melakukan pendaftaran. Method pendaftaran dapat dilihat pada gambar 3.161 di bawah ini. Mulai Tampil Halaman Produk Tampil Form Pendaftaran Mengisi Data Registrasi Data Registrasi valid? Ya Tidak Tampil Pesan”Isi Seluruh Form untuk mendaftar” Tampil pesan”Registrasi berhasil” Selesai Simpan data Data_travel Pilih menu Produk Memilih Paket yang akan didaftarkan Tambah data registrasi Gambar 3.161 Method Pendaftaran Travel

2. Method Pendaftaran Member

Method pendaftaran terjadi ketika pengunjung non member melakukan pendaftaran. Method pendaftaran dapat dilihat pada gambar 3.162 di bawah ini. Mulai Pilih menu daftar Tampil Form Pendaftaran Mengisi data pendaftaran Data Pendaftaran valid? Tampil pesan “silakan cek email Anda untuk melihat password user Anda. Disarankan untuk mengisi profil Anda setelah login Simpan data Tampil pesan” masukkan data diri anda” Member Selesai Ya Tidak Tambah data pendaftaran Gambar 3.162 Method Pendaftaran Member

3. Method Login

Method login terjadi ketika pengguna melakukan login. Method login dapat dilihat pada gambar 3.163 di bawah ini. Mulai Pilih menu Login Memasukan username dan password Tampil Halaman Utama Tampil Form Login Username dan password valid? Tampil Pesan”username dan password salah” Tampil halaman utama Selesai Ya Tidak Autentikasi username dan password Gambar 3.163 Method Login

4. Method Tambah Data

Method tambah data terjadi ketika pengguna melakukan penambahan data. Method tambah data dapat dilihat pada gambar 3.164 di bawah ini. Mulai Data Kosong? Tampil menu Pilih Tambah data Tampil form Tambah data Memasukan data yang akan ditambah Tampil pesan”silakan isi seluruh field” Tampil pesan”Data berhasil diubah” Selesai Ya Tidak Tambah Data Simpan data Gambar 3.164 Method Tambah Data

5. Method Ubah Data

Method ubah data terjadi ketika pengguna melakukan pengubahan data. Method ubah data dapat dilihat pada gambar 3.165 di bawah ini. Mulai Data Kosong? Tampil menu Pilih Edit data Tampil form edit data Mengisi form data yang akan diubah Tampil pesan”silakan isi seluruh field” Tampil pesan”Data berhasil diubah” Selesai Ya Tidak Ubah Data Simpan Data Gambar 3.165 Method Ubah Data

6. Method Hapus Data

Method hapus terjadi ketika pengguna melakukan penghapusan data. Method hapus data dapat dilihat pada gambar 3.166 di bawah ini. Mulai Tampil menu Hapus Data Pilih Data yang akan dihapus Tampil pesan”Data berhasil dihapus” Selesai Ya Yakin akan menghapus data ini Tidak Gambar 3.166 Method Hapus Data

7. Method Cari Data

Method cari data terjadi ketika pengguna melakukan pencarian data. Method cari data dapat dilihat pada gambar 3.167 di bawah ini. Mulai Data ditemukan? Tampil menu Msukan data yang dicari berdasarkan kategori pencarian Tampil data yang dicari Selesai Ya Tidak Tampil pesan”Maaf, data yang anda cari tidak ditemukan Cari Data Gambar 3.167 Method Cari Data

8. Method Reservasi

Method reservasi terjadi ketika pengguna melakukan reservasi. Method cari data dapat dilihat pada gambar 3.168 di bawah ini. Mulai Pilih menu reservasi Tampil Form reservasi Mengisi data reservasi Kursi tersedia Tampil pesan”Data pemesanan Anda sedang kami proses. Silakan tunggu sebentar untuk mendapat SMS dan email detai pemesanan Anda Tampil pesan”kursi telah habis Selesai Ya Tidak Tambah data reservasi Simpan pemesanan Pemesanan_detail Gambar 3.168 Method Reservasi