Laporan Praktikum Pemrograman Internet Kelompok 6 FIX

PRAKTIKUM
PEMROGRAMAN INTERNET
Oleh:
KELOMPOK IV
1. I Putu Gede Eka Yuda Arista (1605551018)

2. Made Prastha Nugraha (1605551043)
3. Kevin Christopher Bakkara (1605551045)
4. Made Gede Gumiar Putra Redana (1605551085)
5. I Putu Krisna Arynasta (1605551110)
6. I Nyoman Andi Nugraha (1605552002)
7. I Gede Agus Putra Dewantara (1605552021)
PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK UNIVERSITAS UDAYANA
2018
KATA PENGANTAR
Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa, karena berkat
rahmat-Nyalah penulis dapat menyelesaikan laporan akhir Praktikum Pemrograman
Internet dengan tepat waktu. Laporan akhir ini tentunya tidak akan berhasil tanpa
bimbingan dan bantuan dari berbagai pihak yang telah membantu penulis dalam
penyusunan laporan ini. Dalam kesempatan ini, penulis mengucapkan terimakasih
yang sebesar-besarnya kepada:
1. Bapak I Nyoman Piarsa, S.T., M.T. selaku dosen pengampu mata kuliah
Praktikum Pemrogrman Internet
2. Asisten dosen yang telah membimbing dalam melakukan praktikum dan
penyusunan laporan akhir Praktikum Pemrograman Internet
3. Seluruh pihak yang telah membantu memberikan ide atas terselesaikannya
laporan Praktikum Pemrograman Internet
Penulis menyadari bahwa dalam penyusunan laporan ini masih banyak
kekurangan yang tidak bisa penulis jabarkan secara utuh karena keterbatasan
kemampuan, waktu, dan pengalaman penulis. Namun demikian, laporan ini diharapkan
dapat memberikan manfaat bagi masyarakat luas.
Jimbaran, 1 Mei 2018
Penulis
ii
ABSTRAK
Teknologi Informasi merupakan istilah umum untuk teknologi apapun yang

membantu manusia dalam mengolah hingga menyebarkan informasi. Teknologi
informasi membuka peluang lebih baik untuk mengembangkan berbagai jenis
infrastruktur ataupun peluang bisnis dengan menggunakan laman web, baik berbasis
lokal, nasional, maupun internasional. Berdasarkan perkembangan tersebut, dibuatlah
berbagai jenis laman web dengan berbagai tujuan dan kebutuhan, salah satunya untuk
menyebarkan informasi terkait objek wisata suatu daerah yang ditujukan kepada
masyarakat luas. Laman web dengan informasi objek wisata saat ini juga dapat
menampilkan fasilitas berupa tempat penginapan dan tempat rekreasi yang terdapat
pada objek wisata tersebut. Laman web dibuat menggunakan bahasa pemrograman
internet dan dipadukan dengan penggunaan basis data untuk proses pengolahan data
yang disimpan ataupun ditampilkan untuk membuat sebuah sistem informasi penyedia
jasa travel. Bahasa pemrograman yang digunakan pada sistem informasi penyedia jasa
travel adalah PHP versi 7 dan menggunakan framework CodeIgniter. Sistem informasi
penyedia jasa travel menggunakan konsep model, view, dan controller dalam
pembuatannya.
Kata Kunci: CodeIgniter, model, view, controller, database, framework
iii
DAFTAR ISI
PRAKTIKUM PEMROGRAMAN INTERNET ...................................................... i

KATA PENGANTAR ................................................................................................. ii
ABSTRAK .................................................................................................................. iii
DAFTAR ISI ............................................................................................................... iv
DAFTAR GAMBAR ................................................................................................ viii
DAFTAR TABEL ...................................................................................................... xi
DAFTAR KODE PROGRAM ................................................................................. xii
BAB I PENDAHULUAN ............................................................................................ 1
1.1 Latar Belakang .................................................................................................. 1
1.2 Rumusan Masalah ............................................................................................. 2
1.3 Tujuan Penelitian............................................................................................... 2
1.4 Manfaat Penelitian............................................................................................. 3
1.5 Batasan Masalah ................................................................................................ 3
1.6 Sistematika Penulisan ........................................................................................ 3
BAB II TINJAUAN PUSTAKA................................................................................. 5
2.1 Travel ................................................................................................................ 5
2.2 Sistem Informasi ............................................................................................... 6
2.3 Model, View, dan Controller ............................................................................. 9
2.4 XAMPP ........................................................................................................... 10
2.5 MySQL ............................................................................................................ 10
2.6 PHP.................................................................................................................. 11
2.7 HTML.............................................................................................................. 11
2.7.1 Pengertian HTML ........................................................................... 11
2.7.2 Fungsi dan Kegunaan HTML ......................................................... 12
2.7.3 Struktur Dasar HTML..................................................................... 12
2.8 CodeIgniter ...................................................................................................... 13
2.9 Application ...................................................................................................... 13
iv
2.9.1 Config ............................................................................................. 13
2.10 Assets ............................................................................................................... 14
2.10.1 CSS ................................................................................................. 14
2.10.2 JavaScript ........................................................................................ 15
2.10.3 Datepicker ....................................................................................... 15
2.11 Htaccess ........................................................................................................... 16
BAB III METODOLOGI PENELITIAN ............................................................... 17
3.1 Tempat dan Waktu Penelitian ......................................................................... 17
3.2 Metode Observasi ............................................................................................ 17
3.3 Analisis Data ................................................................................................... 17
3.4 Sumber Data .................................................................................................... 18
3.5 Gambaran Umum Sistem ................................................................................ 18
3.6 Perancangan Database .................................................................................... 19
BAB IV HASIL DAN PEMBAHASAN .................................................................. 21
4.1 Source Code .................................................................................................... 21
4.1.1 Model .............................................................................................. 21
4.1.2 Controller ........................................................................................ 38
4.1.3 View ................................................................................................ 72
4.2 Tampilan........................................................................................................ 181
4.2.1 Header Dashboard ....................................................................... 181
4.2.2 Dashboard .................................................................................... 181
4.2.3 Login User .................................................................................... 182
4.2.4 Registrasi User.............................................................................. 183
4.2.5 Paket Jasa Travel .......................................................................... 184
4.2.6 Deskripsi Paket ............................................................................. 184
4.2.7 Destinasi Travel ............................................................................ 185
4.2.8 Deskripsi Wisata ........................................................................... 186
4.2.9 Pembayaran ................................................................................... 187
4.2.10 Input Pembayaran ......................................................................... 188
4.2.11 Moment ......................................................................................... 189
4.2.12 Tentang Kami ............................................................................... 190
v
4.2.13 Kontak........................................................................................... 191
4.2.14 Booking ......................................................................................... 193
4.2.15 Rancangan Perjalanan ................................................................... 194
4.2.16 Login Admin.................................................................................. 195
4.2.17 Dashboard Admin ......................................................................... 196
4.2.18 Data Hotel ..................................................................................... 197
4.2.19 Edit Data Hotel ............................................................................. 198
4.2.20 Tambah Data Hotel ....................................................................... 200
4.2.21 Data Wisata ................................................................................... 201
4.2.22 Edit Data Wisata ........................................................................... 201
4.2.23 Tambah Data Jenis Wisata............................................................ 203
4.2.24 Tambah Data Wisata..................................................................... 203
4.2.25 Data Paket Wisata ......................................................................... 205
4.2.26 Edit Data Paket Wisata ................................................................. 205
4.2.27 Data Tujuan Wisata ...................................................................... 206
4.2.28 Tambah Data Wisata Tujuan Paket .............................................. 207
4.2.29 Data Tempat Penginapan Paket .................................................... 208
4.2.30 Tambah Data Hotel Penginapan Paket ......................................... 209
4.2.31 Data Moment ................................................................................. 210
4.2.32 Edit Moment.................................................................................. 211
4.2.33 Tambah Data Moment ................................................................... 213
4.2.34 Data Booking ................................................................................ 213
4.2.35 Edit Data Booking ......................................................................... 214
4.2.36 Data Pembayaran .......................................................................... 215
4.2.37 Laporan Data Masukan ................................................................. 217
4.2.38 Laporan Data Pembatalan ............................................................. 217
4.2.39 Laporan Data Paket Terfavorit ..................................................... 218
4.3 Uji Coba ........................................................................................................ 219
4.3.1 Dashboard User............................................................................ 219
4.3.2 Register User ................................................................................ 220
4.3.3 Login User .................................................................................... 222
vi
4.3.4 Booking ......................................................................................... 224
4.3.5 Pembayaran ................................................................................... 227
4.3.6 Login Admin.................................................................................. 229
4.3.7 Validasi Booking ........................................................................... 230
4.3.8 Tambah Data Hotel ....................................................................... 232
4.3.9 Ubah Data Hotel ........................................................................... 235
4.3.10 Tambah Data Wisata..................................................................... 238
4.3.11 Ubah Data Wisata ......................................................................... 242
4.3.12 Tambah Data Paket ....................................................................... 245
4.3.13 Ubah Data Paket ........................................................................... 251
BAB V PENUTUP ................................................................................................... 255
5.1. Kesimpulan.................................................................................................... 255
5.2. Saran .............................................................................................................. 256
DAFTAR PUSTAKA .............................................................................................. 257
vii
DAFTAR GAMBAR
Gambar 3.1 Use Case Diagram Sistem Informasi Penyedia Jasa Travel ................... 18
Gambar 3.2 PDM dari Sistem Informasi Penyedia Jasa Travel .................................. 20
Gambar 4.1 Tampilan Header Dashboard................................................................ 181
Gambar 4.2 Tampilan Dashboard ............................................................................ 182
Gambar 4.3 Tampilan Login User ............................................................................ 182
Gambar 4.4 Tampilan Registrasi User ...................................................................... 183
Gambar 4.5 Tampilan Paket Travel .......................................................................... 184
Gambar 4.6 Tampilan Deskripsi Paket ..................................................................... 185
Gambar 4.7 Tampilan Destinasi Travel .................................................................... 186
Gambar 4.8 Tampilan Deskripsi Destinasi ............................................................... 187
Gambar 4.9 Tampilan Pembayaran ........................................................................... 188
Gambar 4.10 Tampilan Input Pembayaran ............................................................... 189
Gambar 4.11 Tampilan Moment Travel ................................................................... 190
Gambar 4.12 Tampilan Tentang Kami...................................................................... 191
Gambar 4.13 Tampilan Kontak ................................................................................. 192
Gambar 4.14 Tampilan Booking Langkah Pertama .................................................. 193
Gambar 4.15 Tampilan Booking Langkah Kedua ..................................................... 193
Gambar 4.16 Tampilan Booking Langkah Ketiga..................................................... 194
Gambar 4.17 Tampilan Rencana Perjalanan Pelanggan ........................................... 195
Gambar 4.18 Tampilan Login Admin ........................................................................ 196
Gambar 4.19 Tampilan Dashboard Admin ............................................................... 197
Gambar 4.20 Tampilan Data Hotel ........................................................................... 198
Gambar 4.21 Edit Data Hotel .................................................................................... 199
Gambar 4.22 Tampilan Tambah Data Hotel ............................................................. 200
Gambar 4.23 Tampilan Data Wisata ......................................................................... 201
Gambar 4.24 Tampilan Edit Data Wisata ................................................................. 202
Gambar 4.25 Tampilan Data Jenis Wisata ................................................................ 203
Gambar 4.26 Tampilan Tambah Data Wisata ........................................................... 204
Gambar 4.27 Tampilan Data Paket Wisata ............................................................... 205
Gambar 4.28 Tampilan Edit Data Paket Wisata ....................................................... 206
Gambar 4.29 Tampilan Data Tujuan Wisata............................................................. 207
Gambar 4.30 Tampilan Data Wisata Tujuan Paket ................................................... 208
Gambar 4.31 Tampilan Data Tempat Penginapan Paket .......................................... 209
Gambar 4.32 Tampilan Data Hotel Penginapan Paket.............................................. 210
Gambar 4.33 Tampilan Data Moment ....................................................................... 210
Gambar 4.34 Tampilan Edit Moment ........................................................................ 212
Gambar 4.35 Tampilan Tambah Data Moment ......................................................... 213
viii
Gambar 4.36 Tampilan Data Booking ...................................................................... 214
Gambar 4.37 Tampilan Edit Data Booking ............................................................... 215
Gambar 4.38 Tampilan Data Pembayaran ................................................................ 216
Gambar 4.39 Tampilan Data Masukan ..................................................................... 217
Gambar 4.40 Tampilan Laporan Data pembatalan ................................................... 218
Gambar 4.41 Tampilan Laporan Data Paket Terfavorit............................................ 219
Gambar 4.42 Tampilan Dashboard Website ............................................................. 220
Gambar 4.43 Form Registrasi ................................................................................... 221
Gambar 4.44 Notifikasi Berhasil Registrasi.............................................................. 222
Gambar 4.45 Tampilan Login User .......................................................................... 223
Gambar 4.46 Tampilan Dashboard dengan Login User ........................................... 223
Gambar 4.47 Tampilan Menu Booking ..................................................................... 224
Gambar 4.48 Tampilan Lanjutan Menu Booking ...................................................... 225
Gambar 4.49 Tampilan Akhir Menu Booking........................................................... 226
Gambar 4.50 Tampilan Notifikasi Booking Berhasil ................................................ 227
Gambar 4.51 Pilihan Menu pada Profil .................................................................... 227
Gambar 4.52 Tampilan Menu Profil Trip ................................................................. 228
Gambar 4.53 Tampilan Pembayaran Data Booking .................................................. 228
Gambar 4.54 Notifikasi Pembayaran Berhasil .......................................................... 229
Gambar 4.55 Tampilan Login Admin ........................................................................ 230
Gambar 4.56 Dashboard Admin ............................................................................... 230
Gambar 4.57 Menu Data Pembayaran ...................................................................... 231
Gambar 4.58 Notifikasi Warning Validasi................................................................ 231
Gambar 4.59 Booking yang Sudah Tervalidasi ......................................................... 232
Gambar 4.60 Tampilan Pilihan Tambah Data Hotel ................................................. 233
Gambar 4.61 Tampilan Form Tambah Data Hotel ................................................... 233
Gambar 4.62 Tampilan Form yang sudah diisi Data ................................................ 234
Gambar 4.63 Tampilan Data Hotel Baru yang Sudah Masuk pada Daftar Hotel ..... 235
Gambar 4.64 Tampilan Pilihan Ubah Data Hotel ..................................................... 235
Gambar 4.65 Tampilan Form Ubah Data Hotel........................................................ 236
Gambar 4.66 Tampilan Form yang sudah Diubah .................................................... 237
Gambar 4.67 Tampilan Data Hotel Baru yang Sudah Dirubah ................................ 238
Gambar 4.68 Tampilan Pilihan Tambah Data Wisata .............................................. 238
Gambar 4.69 Tampilan Form Tambah Data Wisata ................................................. 239
Gambar 4.71 Tampilan Data Wisata Baru yang Sudah Masuk pada Daftar Wisata. 241
Gambar 4.72 Tampilan Pilihan Ubah Data Wisata ................................................... 242
Gambar 4.73 Tampilan Form Ubah Data Wisata ..................................................... 243
Gambar 4.75 Tampilan Data Wisata Baru yang Sudah Dirubah .............................. 245
Gambar 4.76 Tampilan Pilihan Tambah Data Paket Wisata..................................... 245
Gambar 4.77 Tampilan Form Tambah Data Paket Wisata ....................................... 246
ix
Gambar 4.79 Tampilan Data Paket Wisata Baru yang Sudah Masuk pada Daftar Paket
Wisata........................................................................................................................ 247
Gambar 4.80 Tampilan Letak Menu Tujuan Wisata ................................................. 247
Gambar 4.81 Tampilan Menu Tujuan Wisata ........................................................... 248
Gambar 4.82 Tampilan Daftar Tempat Wisata ......................................................... 248
Gambar 4.83 Daftar Tempat Wisata yang Masuk Dalam Paket ............................... 249
Gambar 4.84 Tampilan Letak Menu Hotel ............................................................... 249
Gambar 4.85 Tampilan Menu Hotel ......................................................................... 250
Gambar 4.86 Tampilan Daftar Hotel ........................................................................ 250
Gambar 4.87 Daftar Hotel yang Masuk Dalam Paket............................................... 251
Gambar 4.88 Tampilan Pilihan Ubah Data Paket Wisata ......................................... 251
Gambar 4.89 Tampilan Form Ubah Data Paket Wisata ........................................... 252
Gambar 4.91 Tampilan Data Wisata Baru yang Sudah Dirubah .............................. 253
x
DAFTAR TABEL
Tabel 1.1 Sistematika Penulisan ................................................................................... 3
xi
DAFTAR KODE PROGRAM
Kode Program 4.1 Model Admin................................................................................. 22

Kode Program 4.2 Model Booking .............................................................................. 23
Kode Program 4.3 Model Data Booking ..................................................................... 24
Kode Program 4.4 Model Destinasi ............................................................................ 25
Kode Program 4.5 Model Home ................................................................................. 27
Kode Program 4.6 Model Laporan .............................................................................. 29
Kode Program 4.7 Model Moment .............................................................................. 30
Kode Program 4.8 Model Data Paket .......................................................................... 33
Kode Program 4.9 Model Pembayaran ....................................................................... 34
Kode Program 4.10 Model Data Pembayaran ............................................................. 35
Kode Program 4.11 Model User ................................................................................. 36
Kode Program 4.12 Model Wisata .............................................................................. 37
Kode Program 4.13 Controller Admin ....................................................................... 39
Kode Program 4.14 Sintaks Controller Booking ........................................................ 42
Kode Program 4.15 Sintaks Controller BookingData ................................................ 43
Kode Program 4.16 Sintaks Controller Destinasi ....................................................... 45
Kode Program 4.17 Sintaks Controller DetDestinasi ................................................. 46
Kode Program 4.18 Controller Detpaket .................................................................... 47
Kode Program 4.19 Controller Hotel ......................................................................... 49
Kode Program 4.20 Controller Kontak....................................................................... 49
Kode Program 4.21 Controller Laporan ..................................................................... 51
Kode Program 4.22 Controller Main .......................................................................... 52
Kode Program 4.23 Controller moment ...................................................................... 53
Kode Program 4.24 Controller Momenttdata ............................................................. 55
Kode Program 4.25 Controller Paket ......................................................................... 58
Kode Program 4.26 Controller PaketData .................................................................. 63
Kode Program 4.27 Controller Pembayaran ............................................................... 64
Kode Program 4.28 Controller Pembayarandata ........................................................ 65
Kode Program 4.29 Controller Tentang ..................................................................... 66
Kode Program 4.30 Controller User ........................................................................... 68
Kode Program 4.31 Controller Wisata ....................................................................... 72
Kode Program 4.32 Sintaks Tampilan Header Dashboard ........................................ 76
Kode Program 4.33 Sintak Tampilan Dashboard ....................................................... 86
Kode Program 4.34 Sintaks Tampilan Login User ..................................................... 92
Kode Program 4.35 Sintaks Tampilan Registrasi User .............................................. 93
Kode Program 4.36 Sintaks Tampilan Paket Travel ................................................... 96
Kode Program 4.37 Sintaks Tampilan Deskripsi Paket .............................................. 98
xii
Kode Program 4.38 Sintaks Tampilan Destinasi Travel ........................................... 101
Kode Program 4.39 Sintaks Tampilan Deskripsi Destinasi ...................................... 103
Kode Program 4.40 Sintaks Tampilan Pembayaran ................................................. 108
Kode Program 4.41 Sintaks Tampilan Input Pembayaran ........................................ 111
Kode Program 4.42 Sintaks Tampilan Moment ........................................................ 113
Kode Program 4.43 Sintaks Tampilan Tentang Kami .............................................. 116
Kode Program 4.44 Sintaks Tampilan Kontak ......................................................... 119
Kode Program 4.45 Sintaks Tampilan Booking ........................................................ 129
Kode Program 4.46 Sintaks Rencana Perjalanan Pelanggan .................................... 137
Kode Program 4.47 Sintaks Tampilan Login Admin ................................................ 139
Kode Program 4.48 Sintaks Tampilan Dashboard Admin ........................................ 140
Kode Program 4.49 Sintak Tampilan Data Hotel ..................................................... 142
Kode Program 4.50 Sintak Tampilan Edit Data Hotel.............................................. 144
Kode Program 4.51 Sintak Tampilan Tambah Data ................................................. 145
Kode Program 4.52 Sintaks Tampilan Data Wisata ................................................. 147
Kode Program 4.53 Sintaks Edit Data Wisata .......................................................... 150
Kode Program 4.54 Sintaks Tampilan Tambah Data Jenis Wisata .......................... 151
Kode Program 4.55 Sintaks Tampil Tambah Data Wisata ....................................... 154
Kode Program 4.56 Sintaks Tampilan Data Paket Wisata........................................ 156
Kode Program 4.57 Sintaks Tampilan Edit Data Paket Wisata ................................ 159
Kode Program 4.58 Sintak Tampilan Data Tujuan Wisata ....................................... 160
Kode Program 4.59 Sintaks Tampilan Tambah Data Wisata Tujuan ....................... 161
Kode Program 4.60 Sintaks Tampilan Data Tempat Penginapan ............................. 162
Kode Program 4.61 Sintaks Tampilan Tambah Data Hotel Penginapan .................. 164
Kode Program 4.62 Sintaks Tampilan Data Moment ............................................... 165
Kode Program 4.63 Sintaks Tampilan Edit Moment ................................................ 167
Kode Program 4.64 Sintaks Tampilan Tambah Data Moment ................................. 169
Kode Program 4.65 Sintaks Tampilan Data Booking ............................................... 171
Kode Program 4.66 Sintak Tampilan Edit Booking .................................................. 172
Kode Program 4.67 Sintaks Tampilan Data Pembayaran ......................................... 174
Kode Program 4.68 Sintak Tampilan Laporan Data Masukan ................................. 176
Kode Program 4.69 Sintak Tampilan Laporan Data Pembatalan Booking ............... 178
Kode Program 4.70 Sintak Tampilan Laporan Data Paket Terfavorit ...................... 180
xiii
BAB I
PENDAHULUAN
BAB I Pendahuluan membahas tentang latar belakang, rumusan masalah,

tujuan, manfaat, batasan masalah dan sistematika penulisan yang digunakan dalam
laporan praktikum Pemrograman Internet ini.
1.1 Latar Belakang
Suatu sistem informasi sangatlah dibutuhkan dalam suatu perusahaan atau
instansi pemerintahan, karena sistem sangatlah menunjang terhadap kinerja perusahaan
atau instansi pemerintah, baik yang berskala kecil maupun besar. Supaya dapat berjalan
dengan baik diperlukan kerjasama diantara unsur-unsur yang terkait dalam sistem
tersebut. Istilah sistem secara umum dapat didefinisikan sebagai kumpulan hal atau
elemen yang saling bekerja sama atau yang dihubungkan dengan cara-cara tertentu
sehingga membentuk satu kesatuan untuk melaksanakan suatu fungsi guna mencapai
suatu tujuan.
Daerah wisata merupakan suatu tempat destinasi atau tujuan utama dari
wisatawan atau tamu yang berkunjung ke suatu daerah. Daerah wisata memiliki
kelebihan tersendiri dibandingkan daerah lain yang terletak berdekatan, seperti
keindahan alam ataupun keadaan wilayah yang unik dan tidak dapat ditemukan di
daerah lainya.
Daerah wisata yang indah tidak selalu dikunjungi oleh wisatawan, karena
terbatasnya fasilitas serta sarana yang dibutuhkan untuk menjangkau daerah tersebut,
sehingga walaupun tempat wisata tersebut memiliki keindahan yang sangat baik,
daerah wisata tersebut tetap tidak dikenal bahkan tidak dikenal oleh wisatawan.
1
2
Daerah wisata akan lebih dikenal dan memiliki potensi pengembangan yang
lebih baik apabila memiliki sebuah sarana untuk mengatur serta menyebarkan
kelebihan yang terdapat pada daerah tersebut, walaupun terdapat daerah wisata yang
serupa. Sarana promosi yang baik sangat penting untuk pengembangan daerah wisata,
karena sebaik apapun keindahan alam yang terdapat pada daerah wisata tersebut,
apabila tidak diketahui oleh wisatawan, akan mengalami kesulitan untuk
mengembangkan potensinya.
Sistem Informasi Penyedia Jasa Travel dibuat untuk memberikan dan
menyebarkan informasi seputar daerah wisata yang terdapat dalam suatu wilayah.
Sistem informasi ini akan memuat berbagai fitur seperti menyediakan lokasi menginap
di sekitar tempat wisata beserta harga yang ditentukan. Sistem informasi wisata
Penyedia Jasa Travel juga memberikan penawaran paket-paket daerah wisata yang
terdapat dalam satu wilayah yang sama.
1.2 Rumusan Masalah

Rumusan masalah yang terdapat dalam Pembuatan Laporan Praktikum
Pemrograman Internet adalah sebagai berikut.
a. Bagaimana merancang dan mengembangkan Sistem Informasi Penyedia Jasa
Travel.
b. Bagaimana melakukan pengolahan paket destinasi wisata, harga paket, serta
sarana yang tersedia.
1.3 Tujuan Penelitian

Tujuan dari pembuatan Sistem Informasi Penyedia Jasa Travel pada
Praktikum Pemrograman Internet adalah sebagai berikut.
a. Dapat merancang dan mengembangkan Sistem Informasi Penyedia Jasa
Travel.
b. Memudahkan dalam proses pengolahan paket destinasi wisata, harga paket,
serta sarana yang tersedia.
3
1.4 Manfaat Penelitian

Manfaat yang diperoleh dari pembuatan Sistem Informasi Penyedia Jasa
Travel pada Praktikum Pemrograman Internet adalah sebagai berikut.
a. Dapat mempermudah pengguna dalam proses pencarian daerah wisata.
b. Memudahkan pengguna dalam mengelola moment di daerah wisata.
c. Mempermudah admin dalam mengelola data daerah wisata yang tersedia serta
harga paket perjalanan.
1.5 Batasan Masalah

Batasan-batasan masalah dalam perancangan Praktikum Pemrograman
Internet adalah sebagai berikut.
a. Menggunakan framework CodeIgniter dalam pembuatan Sistem Informasi
Penyedia Jasa Travel.
b. Menggunakan bootstrap dalam pembuatan desain dari Sistem Informasi
Penyedia Jasa Travel.
1.6 Sistematika Penulisan

Sistematika penulisan dari laporan Praktikum Pemrograman Internet pada
perancangan Sistem Informasi Penyedia Jasa Travel adalah sebagai berikut.
Tabel 1.1 Sistematika Penulisan

NO BAB Keterangan
BAB I merupakan pendahuluan yang berisikan latar
belakang, rumusan masalah, tujuan, manfaat, batasan
1 BAB I PENDAHULUAN
masalah, dan sistematika penulisan pada laporan akhir
praktikum Pemrograman Internet.
BAB II BAB II merupakan tinjauan pustaka yang berisikan
2
TINJAUAN PUSTAKA landasan teori secara umum sebagai pendukung dari teori-
4
teori dalam pengerjaan laporan praktikum Pemrograman

Internet.
BAB III merupakan metodologi penelitian yang berisikan
tentang pokok mengenai tempat dam waktu penelitian,
BAB III METODOLOGI
3 sumber data, Gambaran umum sistem, serta perancangan
PENELITIAN
database yang digunakan dalam Pembuatan Sistem
Informasi Penyedia Jasa Travel.
BAB IV pada laporan Praktikum Pemrograman Internet
membahas gambaran umum sistem, bisnis proses,
4 BAB IV PEMBAHASAN
flowchart, kode program dari fungsi yang digunakan,
screenshoot dari Sistem Informasi Penyedia Jasa Travel.
BAB V merupakan penutup yang berisikan kesimpulan dari
BAB V keseluruhan modul-modul yang telah dikerjakan serta kritik
5
PENUTUP dan saran dari teman-teman maupun dosen pengampu
Praktikum Pemrograman Internet.
Tabel 1.1 merupakan tabel yang menjelaskan isi dari setiap bab yang dibuat
dalam laporan praktikum pemrograman internet.
BAB II
TINJAUAN PUSTAKA
BAB II merupakan tinjauan pustaka yang digunakan dalam praktikum

Pemrograman Internet. Tinjauan pustaka meliputi materi–materi yang digunakan
dalam mengerjakan setiap modul dalam praktikum Pemrograman Internet.
2.1 Travel
Pengertian Travel adalah ranah internet tingkat teratas yang digunakan
dalam Sistem Penamaan Domain Internet. Pergerakan orang antara lokasi geografis
yang relatif jauh, dan dapat melibatkan perjalanan dengan berjalan kaki,
sepeda, mobil, kereta api, kapal, pesawat, atau cara lain, dengan atau tanpa bagasi, dan
dapat menjadi salah satu cara atau round trip. Travel juga dapat mencakup menginap
yang relatif singkat. Perkataan travel dapat diartikan sebagai perjalanan pada umumnya
yang mempunyai tujuan untuk bermacammacam motif dan pada dasarnya bukan untuk
tujuan pariwisata. Adapun Tugas dari Travel Agent yaitu sebagai berikut.
a. Melengkapi bermacam macam informasi bagi calon wisatawan daerah,
pengurusan dokumen perjalanan, peraturan lalu lintas, pakaian dan
perlengkapan yang harus dibawa.
b. Menyediakan tiket langganan dalam bermacam macam bentuk tranportasi
yang diinghinkan dan menurus barang yang dibawa.
c. Memilih perusahaan akomodasi hotel yang baik.
d. Memberikan informasi tentang hotel diantaranya ada informasi mengenai
lokasi, kategori, kamar yang tersedia, room rate makanan dan minuman.
e. Membantu reservasi hotel.
f. Menyediakan tranportasi
5
6
g. Mengatur perncanaan tour yang akan diselenggarakan serta mengunjungi

obyek dan atraksi wisata.
h. Menjual tiket.
i. Membantu mengirim barang barang souvenir.
2.2 Sistem Informasi

Sistem informasi tidak harus melibatkan komputer. Sistem informasi yang
menggunakan komputer biasa disebut sistem informasi berbasis komputer (Computer-
Based Information Systems atau CBIS). Konsep dasar sistem informasi memiliki istilah
yang lebih sering dipakai tanpa embel-embel berbasis komputer walaupun dalam
kenyataannya komputer merupakan bagian yang penting. Pembahasan konsep dasar
sistem informasi ini akan diuraikan pengertian sistem informasi, oleh para ahli.
Disimpulkan bahwa sistem informasi mencakup sejumlah hal yaitu: tantangangan
manajemen, teknologi informasi, konsp-konsep dasar, proses pengembangan dan
aplikasi bisnis seperti yang ditunjukan pada Gambar 2.1.
Gambar 2.1 Hal yang Berkaitan dengan Sistem Informasi

7
Gambar 2.1 merupakan hal-hal yang berkaitan dengan system informasi yang
terdiri dari tantangan manajemen, teknologi informasi, konsep-konsep dasar, proses
pengembangan, dan aplikasi bisnis.
Sistem informasi memiliki beberapa konsep dasar didalamnya. Konsep dasar
sistem informasi adalah sebagai berikut.
a. Input, melibatkan pengumpulan data mentah dari dalam organisasi atau dari
lingkungan eksternal untuk pengolahan dalam suatu sistem informasi.
b. Process, melibatkan proses mengkonversi input mentah ke bentuk yang lebih
bermakna.
c. Output, mengirimkan proses informasi kepada orang yang akan
menggunakannya atau kepada aktivitas yang akan digunakan.
d. Feedback, output yang di kembalikan ke anggota organisasi yang sesuai untuk
kemudian membantu mengevaluasi atau mengkoreksi tahap Input.
Sistem informasi juga memiliki blok-blok didalamnya. John Burch dan Gary
Grudnitski mengemukakan bahwa sistem informasi terdiri dari komponen-komponen
yang disebut dengan istilah building block yaitu blok masukan, blok model, blok
keluaran, blok teknologi, blok basis data, dan blok kendali. Menurut Jogiyanto,
keenam blok tersebut membentuk suatu kesatuan untuk mencapai sasaran seperti yang
ditunjukkan pada Gambar 2.2.
Gambar 2.2 Blok-blok Dalam Sistem Informasi

8
Blok-blok dalam sistem informasi terdiri dari enam bagian yang akan
dijelaskan sebagai berikut.
a. Blok Masukan, input mewakili data yang masuk kedalam sistem
informasi. Input disini termasuk metode-metode dan media untuk menangkap
data yang akan dimasukan, yang dapat berupa dokumen-dokumen dasar.
b. Blok Model, Blok model ini terdiri dari kombinasi prosedur logika dan
model matematik yang akan memanipulasi data input dan data yang
tersimpan didasar data dengan cara yang sudah tertentu untuk menghasilkan
keluaran yang diinginkan.
c. Blok Keluaran, Produk dari sistem informasi adalah keluaran yang
merupakan informasi yang berkualitas dan dokumentasi yang berguna untuk
semua tingkatan manajemen serta semua pemakai sistem.
d. Blok Teknologi, Teknologi merupakan “kotak alat” (toolbox) dari pekerjaan
sistem informasi, teknologi digunakan untuk menerima input, menjalankan
model, menyimpan dan mengakses data, menghasilkan dan
mengirimkan keluaran dan membantu pengendaliaan dari sistem keseluruhan.
Teknologi terdiri dari 3 bagian utama, yaitu teknisi (humanware
atau brainware), perangkat lunak (software) dan perangkat keras (hardware).
e. Blok Basis Data, Basis data (database) merupakan kumpulan dari data
yang saling berhubungan satu dengan yang lainnya, tersimpan diperangkat
keras komputer dan digunakan perangkat lunak untuk memanipulasinya. Data
perlu disimpan di dalam basis data untuk keperluan penyediaan informasi
lebih lanjut. Data didalam basis data perlu diorganisasikan sedemikian
rupa, supaya informasi yang dihasilkan berkualitas. Organisasi basis data
yang baik juga berguna untuk efisiensi kapasitas penyimpanannya. Basis
data diakses atau dimanipulasi dengan menggunakan perangkat yang
disebut dengan DBMS (Data Base Management Sistem).
9
f. Blok Kendali, Supaya sistem informasi dapat berjalan sesuai dengan

yang diinginkan, maka perlu diterapkan pengendalian-pengendalian di
dalamnya. Beberapa pengendalian perlu dirancang dan diterapkan
untuk meyakinkan bahwa hal-hal yang dapat merusak sistem dapat
dicegah ataupun bila terlanjur terjadi kesalahan dapat langsung cepat diatasi.
2.3 Model, View, dan Controller

Model View Controller merupakan suatu konsep yang cukup populer dalam
pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC
memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun
sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi
kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern
dalam suatu aplikasi yaitu sebagai berikut.
a. View, merupakan bagian yang menangani presentation logic. Pada suatu
aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh
controller. View berfungsi untuk menerima dan merepresentasikan data kepada
user. Bagian ini tidak memiliki akses langsung terhadap bagian model.
b. Model, biasanya berhubungan langsung dengan database untuk memanipulasi
data (insert, update, delete, search), menangani validasi dari bagian controller,
namun tidak dapat berhubungan langsung dengan bagian view.
c. Controller, merupakan bagian yang mengatur hubungan antara bagian model
dan bagian view, controller berfungsi untuk menerima request dan data dari
user kemudian menentukan apa yang akan diproses oleh aplikasi.
Penggunaan prinsip MVC pada suatu aplikasi dapat dikembangkan sesuai

dengan kemampuan developer-nya, yaitu programmer yang menangani bagian model
dan controller, sedangkan designer yang menangani bagian view, sehingga
penggunaan arsitektur MVC dapat meningkatkan maintanability dan organisasi kode.
10
Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan

designer dalam menangani variabel-variabel yang akan ditampilkan
2.4 XAMPP
XAMPP merupakan sebuah perangkat lunak atau software yang bebas
(maksudnya open source) yang dapat digunakan di berbagai sistem operasi. XAMPP
merupakan kompilasi dari beberapa program. XAMPP juga adalah software web server
Apache yang di dalamnya tertanam server MySQL yang didukung dengan bahasa
pemrograman PHP untuk membuat website yang dinamis. XAMPP sendiri mendukung
dua sistem operasi yaitu Windows dan Linux. Proses instalasi dalam Linux
menggunakan command line sedangkan untuk Windows dalam proses instalasinya
menggunakan interface grafis sehingga lebih mudah dalam penggunaaan XAMPP di
Windows di banding dengan Linux. XAMPP dikembangkan dari sebuah tim proyek
bernama Apache Friends, yang terdiri dari Tim Inti (Core Team), Tim Pengembang
(Development Team) & Tim Dukungan (Support Team). Di dalam XAMPP ada 3
komponen utama yang di tanam di dalamnya yaitu web server Apache, PHP, dan
MySQL.
2.5 MySQL
MySQL dapat digunakan untuk membuat dan mengola database beserta
isinya. MySQL dapat dimanfaatkan untuk menambahkan, mengubah dan menghapus
data yang berada dalam database. MySQL merupakan sistem manajemen database
yang bersifat relational yang berarti data yang dikelola dalam database akan diletakkan
pada beberapa tabel yang terpisah sehingga manipulasi data akan menjadi jauh lebih
cepat. MySQL dapat digunakan untuk mengelola database mulai dari yang kecil
sampai dengan yang sangat besar. MySQL juga dapat menjalankan perintah-perintah
Structured Query Language (SQL) untuk mengelola database-database yang ada di
dalamnya. Hingga kini, MySQL sudah berkembang hingga versi 6. MySQL 6 sudah
mendukung trigger untuk memudahkan pengelolaan tabel dalam database.
11
2.6 PHP
PHP meupakan bahasa pemrograman yang digunakan untuk membuat website
dinamis yang memungkinkan kita melakukan update website setiap saat. PHP bersifat
server-side scripting yang mampu berjalan di berbagai sistem operasi seperti Windows,
Linux, Mac OS, dll. PHP memiliki kedinamisan dalam hal database yang bisa
dihubungkan dengan PHP seperti MySQL, Oracle, MS Access, PostgreSQL. Namun
untuk pemrograman website yang paling digunakan adalah MySQL. PHP sendiri
sampai sekarang sudah mengalami perkembangan yang pesat dan sudah mencapai PHP
7.
2.7 HTML
HTML merupakan singkatan dari Hyper Text Markup Language. HTML
adalah bahasa web berupa kode dan simbol yang dimasukkan kedalam sebuah file yang
ditujukan untuk ditampilkan didalam sebuah website. Website yang dibuat dengan
HTML dapat dilihat oleh semua orang yang terkoneksi dengan internet dengan
menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla
Firefox dan Google Chrome.
2.7.1 Pengertian HTML
Pengertian dari masing-masing kata dari HTML akan dijabarkan lebih lanjut
yaitu sebagai berikut.
2.7.1.1 HyperText
HyperText adalah metode perpindahan antar web, dengan menggunakan
sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks khusus di internet,
dimana saat teks tersebut diklik akan membawa pengguna ke halaman web
selanjutnya/halaman web lain yang telah ditentukan apabila diklik.
12
2.7.1.2 Markup
Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada
didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks tertentu.
Misalnya saja jika kita menandai sebuah teks dengan tag html <i>, maka teks tersebut
akan berubah menjadi italic (huruf yang miring). Sedangkan jika kita menandainya
dengan <b>, maka teks tersebut akan berubah menjadi bold (huruf tebal).
2.7.1.3 Language
Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki
kata-kata berupa kode dan syntax seperti bahasa yang lain.
2.7.2 Fungsi dan Kegunaan HTML

Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan
kegunaan. Beberapa manfaat HTML diantaranya adalah sebagai berikut.
a. Membuat halaman web. Bahasa HTML digunakan untuk membuat halaman
web. Semua halaman web pasti dibuat dengan menggunakan HTML.
b. Sebagai sebuah sarana penghubung dalam menggunakan CSS (bahasa untuk
mendesain website), Javascript (bahasa untuk menambah prilaku website),
dan PHP (bahasa pemrograman server website).
c. Untuk menandai teks pada halaman web.
d. Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki
beberapa bagian seperti header, navigasi, main dan footer.
2.7.3 Struktur Dasar HTML

HTML terdiri dari beberapa struktur dasar yang memiliki keterkaitan dalam
membuat suatu sistem informasi. Struktur dasar dari HTML yaitu sebagai berikut.
a. Element, yang terdiri dari tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
13
b. Tag, yang merupakan teks khusus yang terletak diantara dua buah karakter <
dan >. Contoh tag yaitu tag <head> dengan nama head dan tag <body>
dengan nama body.
c. Atribut, yang terdapat di dalam script sebuah elemen, yang berfungsi untuk
memberikan informasi tambahan tentang elemen. Nilai dari elemen harus
ditutup dengan tanda kutip.
2.8 CodeIgniter
CodeIgniter merupakan aplikasi open source yang berupa framework PHP
dengan MVC (Model, View, Controller) untuk membangun sebuah website dinamis
dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat
aplikasi web dengan cepat mudah dibandingkan dengan membuatnya dari awal.
CodeIgniter dirilis pertama kali pada 28 Februari 2006.
2.9 Application
Application merupakan sebuah folder yang berisikan segala hal yang
dibutuhkan untuk mengembangkan sebuah web yang telah disediakan oleh
CodeIgniter. Adapun isi dari folder application adalah sebagai berikut.
2.9.1 Config
Folder config merupakan folder yang menyimpan informasi mengenai
konfigurasi aplikasi seperti database, routes dan file config itu sendiri. Penjelasan lebih
rinci dari pengertian bagian-bagian config adalah sebagai berikut.
2.9.1.1 Config
File Config.php digunakan untuk membuat pengaturan dasar untuk web app
CodeIgniter, seperti base url, index page, cookie, proxy dan lain lain.
14
2.9.1.2 Database
File database.php digunakan untuk mengatur koneksi web dari aplikasi yang
sudah dibuat ke database.
2.9.1.3 Routes
File routes.php digunakan untuk mengatur default controller dan melakukan
override 404.
2.10 Assets
Assets merupakan sebuah folder yang digunakan untuk menampung file dari
CSS dan JS, yang dapat digunakan untuk membuat tampilan dari web yang dibuat
menjadi lebih menarik. Pengertian lebih rinci dari CSS dan JS akan dijelaskan sebagai
berikut.
2.10.1 CSS
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda (markup language).
CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang
meliputi layout, warna, dan font. Pemisahan ini dapat meningkatkan daya akses konten
pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari
sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman
untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur
dari konten, contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai
style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen,
in-print, by voice, dan lain-lain. Pemilik konten web bisa menentukan link yang
menghubungkan konten dengan file CSS.
15
2.10.2 JavaScript
JavaScript adalah bahasa pemrograman berbasis prototype yang berjalan
disisi klien, yang berjalan khusus untuk di browser atau halaman web agar halaman
web menjadi lebih hidup.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada
objek yang dibenamkan. Contoh sederhana dari penggunaan JavaScript adalah
membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke
server dan merubah icon kursor ketika melewati objek tertentu.
Javascript pada browser dapat merespon perintah user dengan cepat, dan
membuat halaman web menjadi lebih responsif. JavaScript dapat menangani hal-hal
yang membutuhkan respon cepat terhadap aksi dari pengguna.
Implementasi terpopuler dari pemrograman JavaScript adalah teknik AJAX,
yang merupakan singkatan dari Asynchronous JavaScript and XML. teknik ini sering
digunakan oleh aplikasi berbasis web seperti Gmail dan Google Reader. Teknik yang
membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga
interaksi antara user dan aplikasi web semakin responsif.
2.10.3 Datepicker
Datepicker merupakan salah satu JQuery yang digunakan dalam
pengembangan web yang memerlukan input penanggalan berdasarkan kalender yang
dilekatkan pada bidang form input. Datepicker memiliki fokus terhadap input untuk
membuka sebuah kalender interaktif dengan sedikit overlay. JQuery UI Datepicker
adalah plugin sangat dapat dikonfigurasi yang menambahkan fungsi Datepicker ke
halaman Anda. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi
rentang tanggal yang dipilih dan menambahkan tombol dan pilihan navigasi lainnya
dengan mudah.
16
2.11 Htaccess
Htaccess meruakan sebuah file konfigurasi yang disediakan oleh
web server Apache, yang digunakan untuk mengubah pengaturan default dari Apache.
Apache digunakan oleh sebagian besar web hosting di internet sebagai server-nya.
File Htaccess merupakan file teks ASCII sederhana yang biasanya diletakkan
dalam root direktori. File ini diharuskan dalam format ASCII dan bukan binary dan
untuk file permission (atribut file) pada server hosting harus di set 644 (rw-r-r). Hal
tersebut dimaksudkan agar server dapat mengakses file Htaccess, tapi mencegah user
untuk mengakses file Htaccess dari browser mereka. File Htaccess yang diletakkan
dalam root direktori dapat digunakan untuk mengubah konfigurasi dari subdirektori-
subdirektori yang ada didalamnya, sehingga dalam satu website cukup untuk
mempunyai 1 file Htaccess saja yang diletakkan dalam root direktori.
BAB III
METODOLOGI PENELITIAN
BAB III membahas tentang tempat dan waktu penelitian, observasi, analisis
data dan sumber data yang digunakan. Metode-metode yang digunakan akan
dipaparkan sebagai berikut.
3.1 Tempat dan Waktu Penelitian
Tempat yang digunakan selama pengerjaan Praktikum Pemrograman Internet
yaitu bertempat pada gedung program studi Teknologi Informasi Fakultas Teknik
Universitas Udayana dan waktu penelitian dimulai dari Bulan Maret hingga bulan Mei
2018.
3.2 Metode Observasi

Observasi yang dilakukan yaitu pengumpulan data dengan melakukan
pengamatan dan dokumentasi langsung terhadap perancangan database dan sistem
Sistem Informasi Penyedia Jasa Travel
3.3 Analisis Data

Analisis data dilakukan guna mendapatkan informasi yang tepat mengenai
bisnis proses yang terjadi di dalam sebuah perusahaan penyedia jasa travel. Data yang
terkumpul akan digunakan untuk menyusun struktur data dan alur dari sistem yang
akan dibuat.
17
18
3.4 Sumber Data

Sumber data yang digunakan dalam proses pengerjaan Praktikum
Pemrograman Internet yaitu bersumber dari literatur buku tentang pemrograman
internet serta bersumber dari website-website resmi yang berkaitan dengan
pemrograman internet.
3.5 Gambaran Umum Sistem
Gambaran umum sistem dari Sistem Informasi Penyedia Jasa Travel akan
dijelaskan melalui Use Case Diagram sebagai berikut.
Gambar 3.1 Use Case Diagram Sistem Informasi Penyedia Jasa Travel
19
Gambar 3.1 merupakan use case diagram dari Sistem Informasi Penyedia Jasa
Travel, yang dimana terdapat dua buah aktor yaitu pengguna dengan admin yang
memiliki batasan tersendiri.
Pengguna berdasarkan use case diagram dapat melakukan login, yang
kemudian akan dilanjutkan dengan menampilkan dashboard. Pengguna yang sudah
login kemudian dapat melihat paket yang tersedia dan melakukan booking serta
melakukan pembayaran.
Admin berdasarkan use case diagram dapat melakukan login seperti
pengguna, lalu menuju dashboard admin jika berhasil login. Menu yang tersedia dalam
dashboard admin salah satunya adalah data paket wisata. Admin dapat melakukan
penambahan paket serta melakukan perubahan terhadap paket yang sudah tersedia.
Admin kemudian dapat mevalidasi bukti pembayaran yang sudah dikirim oleh
pengguna dan membuat laporan.
3.6 Perancangan Database

Database dari Sistem Informasi Penyedia Jasa Travel dapat dilihat pada
Physical Data Model yang terdapat pada gambar 3.2 berikut.
20
Gambar 3.2 PDM dari Sistem Informasi Penyedia Jasa Travel

Gambar 3.2 merupakan bentuk Physical Data Model yang digunakan untuk
menyimpan seluruh data yang digunakan pada Sistem Informasi Penyedia Jasa Travel.
Tabel yang terdapat pada database Sistem Informasi Penyedia Jasa Travel adalah tabel
tbl_admin, tbl_booking, tbl_det_paket_hotel, tbl_det_paket_wisata,
tbl_hotel, tbl_jenis_wisata, tbl_momentt, tbl_paket, tbl_pembayaran,
tbl_user, dan tbl_wisata.

BAB IV
HASIL DAN PEMBAHASAN
BAB IV Hasil dan Pembahasan membahas mengenai modul yang dipraktikan

dalam laporaan praktikum Praktikum Pemrograman Internet. Modul dalam praktikum
ini meliputi rancangan database, controller, model, view dan tampilan aplikasi berbasis
web untuk setiap fungsi pada sistem informasi jasa pelayanan travel.
4.1 Source Code

Sistem informasi Jasa Pelayanan Travel memiliki memiliki source code yang
terdiri dari model, controller dan view. Berikut merupakan penjelasan dari source code
dari program website Jasa Pelayanan Travel.
4.1.1 Model
Model merupakan sebuah class PHP yang bertugas untuk berhubungan
dengan informasi yang ada dalam database. Model berfungsi untuk menuliskan kode
program CRUD (Create, Read, Update, Delete) pada database, atau segala sesuatu
yang berhubungan dengan penyimpanan database. Berikut merupakan model yang
terdapat pada website Jasa Pelayanan Travel.
4.1.1.1 Model Admin
Model Admin merupakan salah satu dari model website Jasa Layanan Travel.
Admin dapat melakukan login dan logout melalui model ini. Sintaks dari model admin
dapat dilihat pada Kode Program 4.1.
21
22
<?php if ( ! defined('BASEPATH')) exit('No direct script access

allowed');
class AdminModel extends CI_Model {
public function view_content(){

$this->db->select('*');
$this->db->from('tbl_content c');
$this->db->join('tbl_parent p', 'c.id_parent =
p.id_parent');
$query = $this->db->get()->result();
return $query;
}
public function view_gallery(){

return $this->db->get('tbl_gallery')->result();
}
public function login($where){

$hasil=$this->db->get_where('tbl_admin', $where);
return $hasil;
}
}
Kode Program 4.1 Model Admin
Kode Program 4.1 merupakan sintaks dari model admin. Model admin
berisikan fungsi untuk memanipulasi data admin. Terdapat fungsi view_content yang
digunakan untuk mendapatkan 10 data booking dari user yang akan melakukan
perjalanan hari ini. Function login digunakan untuk mendapatkan semua data user
berdasarkan parameter yg diterima.
4.1.1.2 Model Booking

Model Booking merupakan salah satu dari model website Jasa Layanan Travel.
User dapat melakukan booking melalui model ini. Sintaks dari model booking dapat
dilihat pada Kode Program 4.2.

allowed');
class BookingModel extends CI_Model {

23
public function harga($id){

$this->db->select('harga_paket');
$this->db->from('tbl_paket');
$this->db->where('id_paket', $id);
return $query;
}
public function booking($data){

$this->db->insert('tbl_booking', $data);
}
}
Kode Program 4.2 Model Booking
Kode Program 4.2 merupakan sintaks dari model booking. Model booking
berisikan fungsi untuk memanipulasi data booking yang akan ditampilkan kepada user.
Terdapat fungsi harga yang digunakan untuk menampilkan harga paket. Fungsi
booking digunakan oleh user untuk melakukan proses booking paket wisata.
4.1.1.3 Model Data Booking

Model Data Booking merupakan salah satu dari model website Jasa Layanan
Travel. Admin dapat melihat data booking yang dilakukan oleh user melalui model ini.
Sintaksnya dapat dilihat pada Kode Program 4.3.

allowed');
class bookingdataModel extends CI_Model {
public function view_booking(){

$this->db->from('tbl_booking b');
$this->db->join('tbl_user u', 'b.id_user = u.id_user');
$this->db->join('tbl_paket p', 'b.id_paket =
p.id_paket');
return $query;
}
public function view_biaya($id){

$this->db->where('id_booking',$id);
$query = $this->db->get()->row_array();
24
return $query;
}
public function update($id,$data){

$this->db->where('id_booking', $id);
$this->db->update('tbl_booking', $data);
}
public function cancel($id,$data){

}
}
Kode Program 4.3 Model Data Booking
Kode Program 4.3 merupakan sintaks dari model data booking. Model data
booking berisikan fungsi untuk memanipulasi data booking yang akan ditampilkan
kepada admin. Terdapat fungsi view_booking yang digunakan oleh admin untuk
melihat data booking. Fungsi view_biaya digunakan untuk melihat data biaya paket
yang di-booking. Fungsi update digunakan untuk mengubah data booking. Fungsi
cancel digunakan membatalkan booking milik salah satu user.
4.1.1.4 Model Destinasi

Model Destinasi merupakan salah satu dari model website Jasa Layanan
Travel. Model Destinasi merupakan model yang menampilkan tujuan wisata yang
nantinya akan dipilih oleh user. Sintaksnya dapat dilihat pada Kode Program 4.4.

allowed');
class DestinasiModel extends CI_Model {
public function view_wisata(){

$this->db->from('tbl_wisata w');
$this->db->join('tbl_jenis_wisata jw',
'w.id_jenis_wisata = jw.id_jenis_wisata');
return $query;
}
25
public function get_total(){

return $this->db->count_all("tbl_wisata");
}
public function get_filter($lokasi, $jenis){

if(!$lokasi==0)$this->db->like('lokasi', $lokasi);
if(!$jenis==0)$this->db->where('id_jenis_wisata',
$jenis);
$query=$this->db->get("tbl_wisata");
return $query->num_rows();
}
public function get_current_page_records($limit, $start){

$this->db->limit($limit, $start);
$query = $this->db->get("tbl_wisata");
if ($query->num_rows() > 0) {
foreach ($query->result() as $row)
{
$data[] = $row;
}
return $data;
}
return false;
}
public function get_current_page_records_filter($limit,

$start, $lokasi, $jenis){
$this->db->limit($limit, $start);
if(!$lokasi==0)$this->db->like('lokasi', $lokasi);
if(!$jenis==0)$this->db->where('id_jenis_wisata',
$jenis);
$query = $this->db->get("tbl_wisata");
if ($query->num_rows() > 0) {
foreach ($query->result() as $row)
{
$data[] = $row;
}
return $data;
}
return false;
}
}
Kode Program 4.4 Model Destinasi
26
Kode Program 4.4 merupakan sintaks dari model destinasi. Model destinasi
berisikan fungsi untuk menampilkan data destinasi kepada user. Terdapat fungsi
view_wisata yang digunakan untuk menampilkan tujuan tempat wisata yang tersedia.
Fungsi get_total digunakan untuk menampilkan total jumlah wisata yang tersedia.
Fungsi get_filter digunakan untuk menghitung banyak data tempat wisata yang
lokasi dan jenisnya sesuai dengan yang diminta user. Fungsi
get_current_page_records digunakan untuk menampilkan data sebanyak limit dan
dimulai dari data ke berapa pada halaman destinasi. Fungsi
get_current_page_records_filter digunakan untuk menampilkan data sebanyak
limit dan dimulai dari data ke berapa juga di-filter berdasarkan lokasi dan jenisnya pada
halaman destinasi nantinya.
4.1.1.5 Model Home

Model Home merupakan salah satu dari model website Jasa Layanan Travel.
Home merupakan model yang menampilkan halaman utama untuk user. Sintaksnya

allowed');
class Home extends CI_Model {
public function destinasi_limit(){

$this->db->from('tbl_wisata w');
$this->db->join('tbl_jenis_wisata jw',
'w.id_jenis_wisata = jw.id_jenis_wisata');
$this->db->order_by('rand()');
$this->db->limit(4);
return $query;
}
public function view_paket(){

$this->db->from('tbl_paket p');
27
$this->db->where('status_aktif_paket', 1);
return $query;
}
public function view_momentt(){

$this->db->from('tbl_momentt');
$this->db->order_by('tanggal_momentt','desc');
return $query;
}
public function view_jenis_wisata(){

$this->db->from('tbl_jenis_wisata');
return $query;
}
}
Kode Program 4.5 Model Home
Kode Program 4.5 merupakan sintaks dari model home. Model home berisikan
fungsi untuk menampilkan halaman utama website kepada user. Terdapat fungsi
destinasi_limit yang digunakan untuk menampilkan 4 destinasi secara acak.
Fungsi view_paket digunakan untuk melihat data paket wisata yang tersedia. Fungsi
view_momentt digunakan untuk menampilkan 2 moment terbaru berupa foto-foto
yang diambil dari tempat wisata. Fungsi view_jenis_wisata digunakan untuk
menampilkan jenis wisata yang tersedia seperti hiking dan snorkling.
4.1.1.6 Model Laporan

Model Laporan merupakan salah satu dari model website Jasa Layanan Travel.
Model Laporan merupakan model yang menampilkan laporan data paket dan data
pembatalan booking yang tersedia untuk admin. Sintaksnya dapat dilihat pada Kode
Program 4.6.

allowed');
28
class LaporanModel extends CI_Model {
public function view_booking(){

p.id_paket');
$this->db->where('status_pembayaran', 1);
$this->db->order_by('tgl_booking', "DESC");
return $query;
}
public function cari_pemasukan($data){

p.id_paket');
$this->db->where($data);
return $query;
}
public function view_pembatalan(){

p.id_paket');
$this->db->where('status_cancle', 1);
return $query;
}
public function cari_pembatalan($data){

p.id_paket');
return $query;
}

29
$this->db->select('*, count(b.id_paket) as
banyak_perjalanan, sum(banyak_traveler) as total_traveler');
$this->db->join('tbl_booking b', 'b.id_paket =
p.id_paket');
$this->db->where('status_pembayaran', 1);
$this->db->group_by('b.id_paket');
$this->db->order_by('count(b.id_paket)', "DESC");
return $query;
}
public function cari_paket($data){

$this->db->select('*, count(b.id_paket) as
banyak_perjalanan, sum(banyak_traveler) as total_traveler');
$this->db->join('tbl_booking b', 'b.id_paket =
p.id_paket');
$this->db->group_by('b.id_paket');
$this->db->order_by('count(b.id_paket)', "DESC");
return $query;
}
}
Kode Program 4.6 Model Laporan
Kode Program 4.6 merupakan sintaks dari model laporan. Model laporan
berisikan fungsi untuk menampilkan data laporan kepada admin. Terdapat fungsi
view_booking yang digunakan untuk melihat data booking paket oleh user yang
tersedia. Fungsi cari_pemasukan digunakan untuk mencari data booking yang sudah
dibayar lunas dan tanggal travelling-nya diantara 2 tanggal yang sudah ditentukan.
Fungsi view_pembatalan digunakan untuk menampilkan data pembatalan booking
oleh user. Fungsi cari_pembatalan digunakan untuk mencari data pembatalan.
Fungsi view_paket digunakan untuk menampilkan data paket yang pembayarannya
sudah sudah lunas dan diurutkan dari yang terbanyak di booking. Fungsi cari_paket
digunakan untuk mencari data paket yang pembayarannya sudah lunas.
30
4.1.1.7 Model Moment

Model Moment merupakan salah satu dari model website Jasa Layanan Travel.
Model Moment merupakan model yang menampilkan moment-moment penting berupa
foto dari tempat wisata yang tersedia untuk menarik minat user. Sintaksnya dapat

allowed');
class momenttModel extends CI_Model {

$this->db->from('tbl_momentt m');
return $query;
}
public function save($data){

$this->db->insert('tbl_momentt', $data);
}
public function view_id_momentt($id){

$this->db->from('tbl_momentt');
$this->db->where('id_momentt', $id);
return $query;
}

$this->db->where('id_momentt', $id);
$this->db->update('tbl_momentt', $data);
}
}
Kode Program 4.7 Model Moment
Kode Program 4.7 merupakan sintaks dari model moment. Model moment
berisikan fungsi untuk memanipulasi data moment yaitu berupa foto-foto yang akan
ditampilkan kepada user. Terdapat fungsi view_wisata yang digunakan untuk melihat
data tempat wisata yang tersedia. Fungsi save digunakan untuk menyimpan data
31
tempat wisata. Fungsi view_id_momentt digunakan untuk mencari moment

berdasarkan id_momentt . Fungsi update digunakan untuk mengubah data moment.
4.1.1.8 Model Data Paket

Model Data Paket merupakan salah satu dari model website Jasa Layanan
Travel. Admin dapat memanipulasi data paket melalui model ini. Sintaksnya dapat

allowed');
class PaketdataModel extends CI_Model {

$this->db->where('status_aktif_paket', 1);
return $query;
}
public function view_paket_byID($id){

return $query;
}

$this->db->insert('tbl_paket', $data);
}
public function delete($id,$data){

$this->db->update('tbl_paket', $data);
}

$this->db->update('tbl_paket', $data);
}
public function view_paket_hotel($id){

32
$this->db->from('tbl_det_paket_hotel ph');
$this->db->join('tbl_paket p', 'ph.id_paket =
p.id_paket');
$this->db->join('tbl_hotel h', 'ph.id_hotel =
h.id_hotel');
$this->db->where('ph.id_paket', $id);
return $query;
}
public function delete_hotel($id){

$this->db->where('id_det_hotel', $id);
$this->db->delete('tbl_det_paket_hotel');
}
public function view_hotel_aviable($id){

$this->db->select('id_hotel');
$this->db->from('tbl_det_paket_hotel');
$ignore = $this->db->get()->result();
$this->db->select('id_hotel, nama_hotel');
$this->db->from('tbl_hotel ');
foreach ($ignore as $ignore){$this->db-
>where_not_in('id_hotel', $ignore->id_hotel);}
$this->db->where('status_aktif', 1);
return $query;
}
public function add_hotel($data){

$this->db->insert('tbl_det_paket_hotel', $data);
}
public function view_paket_wisata($id){

$this->db->from('tbl_det_paket_wisata pw');
$this->db->join('tbl_paket p', 'pw.id_paket =
p.id_paket');
$this->db->join('tbl_wisata w', 'pw.id_wisata =
w.id_wisata');
$this->db->where('pw.id_paket', $id);
return $query;
}
public function delete_wisata($id){

$this->db->where('id_det_wisata', $id);
$this->db->delete('tbl_det_paket_wisata');
}
public function view_wisata_aviable($id){

$this->db->select('id_wisata');
33
$this->db->from('tbl_det_paket_wisata');
$ignore = $this->db->get()->result();
$this->db->select('id_wisata, nama_tempat_wisata');
$this->db->from('tbl_wisata ');
foreach ($ignore as $ignore){$this->db-
>where_not_in('id_wisata', $ignore->id_wisata);}
return $query;
}
public function add_wisata($data){

$this->db->insert('tbl_det_paket_wisata', $data);
}
}
Kode Program 4.8 Model Data Paket
Kode Program 4.8 merupakan sintaks dari model data booking. Model data
paket berisikan fungsi untuk memanipulasi data paket wisata yang akan ditampilkan
kepada admin. Terdapat fungsi view_paket yang digunakan untuk menampilkan data
paket tempat wisata yang tersedia. Fungsi view_paket_byID digunakan untuk
menampilkan data paket berdasarkan id_paket. Fungsi save digunakan untuk
menyimpan data paket. Fungsi delete digunakan untuk menghapus data paket yang
tersedia. Fungsi update digunakan untuk mengubah data paket yang tersedia. Fungsi
view_paket_hotel digunakan untuk menampilkan hotel yang termasuk dalam paket
wisata yang tersedia. Fungsi delete_hotel digunakan untuk menghapus data hotel
pada paket yang tersedia. Fungsi view_hotel_aviable digunakan untuk
menampilkan hotel yang belum dimasukkan kedalam suatu paket wisata. Fungsi
add_hotel digunakan untuk menambah data hotel pada suatu paket. Fungsi
view_paket_wisata digunakan untuk menampilkan paket wisata yang tersedia.
Fungsi delete_wisata digunakan untuk menghapus data paket wisata yang tersedia.
Fungsi view_wisata_aviable digunakan untuk menampilkan tempat wisata yang
belum dimasukkan kedalam suatu paket wisata. Fungsi wisata_hotel digunakan
untuk menambah data paket wisata.
34
4.1.1.9 Model Pembayaran

Model Pembayaran merupakan salah satu dari model website Jasa Layanan
Travel. User dapat melakukan pembayaran melalui model ini. Sintaksnya dapat dilihat
pada Kode Program 4.9.

allowed');
class PembayaranModel extends CI_Model {
public function cari_booking($id){

return $query;
}
public function pembayaran($data){

$this->db->insert('tbl_pembayaran', $data);
}
public function status_pembayaran($id,$data){

}
}
Kode Program 4.9 Model Pembayaran
Kode Program 4.9 merupakan sintaks dari model pembayaran. Model
pembayaran berisikan fungsi untuk memanipulasi data pembayaran yang akan
ditampilkan kepada user. Terdapat fungsi cari_booking yang digunakan untuk
melakukan pencarian terhadap data booking berdasarkan id_booking. Fungsi
pembayaran digunakan oleh user untuk melakukan proses pembayaran. Fungsi
status_pembayaran digunakan oleh admin untuk mengecek apakah user sudah
membayar atau belum.
35
4.1.1.10 Model Data Pembayaran

Model Data Pembayaran merupakan salah satu dari model website Jasa
Layanan Travel. Admin dapat melihat data pembayaran yang dilakukan oleh user
melalui model ini. Sintaksnya dapat dilihat pada Kode Program 4.10.

allowed');
class pembayarandataModel extends CI_Model {
public function view_pembayaran(){

$this->db->from('tbl_pembayaran p');
$this->db->join('tbl_booking b', 'p.id_booking =
b.id_booking');
return $query;
}
public function view_biaya($id){

$this->db->where('id_booking',$id);
return $query;
}

}
public function valid($id,$data){

$this->db->where('id_pembayaran', $id);
$this->db->update('tbl_pembayaran', $data);
}
}
Kode Program 4.10 Model Data Pembayaran
Kode Program 4.10 merupakan sintaks dari model data pembayaran. Model
data pembayaran berisikan fungsi untuk memanipulasi data pembayaran dari user yang
akan ditampilkan kepada admin. Terdapat fungsi view_pembayaran yang digunakan
oleh admin untuk melihat data pembayaran. Fungsi view_biaya digunakan untuk
melihat data biaya paket yang di-booking. Fungsi update digunakan untuk mengubah
36
data booking. Fungsi valid digunakan memberikan status sudah terbayar terhadap
salah satu transaksi.
4.1.1.11 Model User

Model Admin merupakan salah satu dari model website Jasa Layanan Travel.
User dapat melakukan login dan logout melalui model ini. Sintaksnya dapat dilihat

allowed');
class UserModel extends CI_Model {
public function login($where){

$hasil=$this->db->get_where('tbl_user', $where);
return $hasil;
}

$this->db->insert('tbl_usert', $data);
}
}
Kode Program 4.11 Model User
Kode Program 4.11 merupakan sintaks dari model user. Model user berisikan
fungsi untuk memanipulasi data booking user. Terdapat fungsi login untuk masuk ke
dalam akun yang sudah dibuat. Fungsi save digunakan untuk menyimpan hasil
perubahan yang dilakukan.
4.1.1.12 Model Wisata

Model Wisata merupakan salah satu dari model website Jasa Layanan Travel.
Model Wisata merupakan model yang menampilkan data tempat wisata yang tersedia
untuk user. Sintaksnya dapat dilihat pada Kode Program 4.12.

allowed');
37
class WisataModel extends CI_Model {

$this->db->from('tbl_wisata w');;
$this->db->join('tbl_jenis_wisata jw', 'w.id_jenis_wisata =
jw.id_jenis_wisata');
return $query;
}
public function jenis_wisata(){

$this->db->from('tbl_jenis_wisata');
return $query;
}
public function savejenis($data){

$this->db->insert('tbl_jenis_wisata', $data);
}

$this->db->insert('tbl_wisata', $data);
}
public function delete($id,$data){

$this->db->where('id_hotel', $id);
$this->db->update('tbl_hotel', $data);
}
public function view_id_wisata($id){

$this->db->from('tbl_wisata');;
$this->db->where('id_wisata', $id);
return $query;
}

$this->db->where('id_wisata', $id);
$this->db->update('tbl_wisata', $data);
}
}
Kode Program 4.12 Model Wisata
Kode Program 4.12 merupakan sintaks dari model wisata. Model wisata
berisikan fungsi untuk memanipulasi data tempat wisata yang akan ditampilkan kepada
user. Terdapat fungsi view_wisata yang digunakan untuk menampilkan data tempat
38
wisata yang tersedia. Fungsi jenis_wisata digunakan untuk menampilkan jenis

wisata yang tersedia seperti hiking atau snorkling. Fungsi savejenis digunakan untuk
menyimpan data jenis wisata. Fungsi save digunakan untuk menyimpan data tempat
wisata. Fungsi delete digunakan untuk menghapus data tempat wisata. Fungsi
update digunakan untuk mengubah data tempat wisata. Fungsi view_id_wisata
digunakan untuk menampilkan data wisata berdasarkan id_wisata.
4.1.2 Controller
Controller merupakan bagian yang mengatur hubungan antara bagian model
dan bagian view. Controller berfungsi untuk menerima request dan data dari user
kemudian menentukan apa yang akan diproses oleh aplikasi. Controller yang terdapat
pada Sistem Informasi Penyedia Jasa Travel adalah sebagai berikut.
4.1.2.1 Admin
Controller admin adalah controller yang digunakan untuk menghubungkan
model adminmodel dengan tampilan admin/index dan admin/dashboard. Sintaks
dari Controller Admin adalah sebagai berikut.

allowed');
class Admin extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('AdminModel');
$this->load->helper(array('form', 'url'));
}
public function index(){

if($this->session->userdata('status_admin') !=
"login"){
$this->load->view('Admin/index');
}
else{
$hasil['data']=$this->AdminModel->view_content();
$this->load->view('Admin/dashboard',$hasil);
}
}
39
public function login(){

$user=$this->input->post('username');
$pass=$this->input->post('password');
$where = array(
'username' => $user,
'password' => $pass
);
$hasil=$this->AdminModel->login($where);
$cek=$hasil->num_rows();
if($cek==1){
$data_session = array(
'admin' => $user,
'status_admin' => "login"
);
$this->session->set_userdata($data_session);
$data['data']=$this->AdminModel->view_content();
$this->load->view('Admin/dashboard',$data);
}
else{
echo "<script>alert('Login Failed');
window.history.back();</script>";
}
}
public function logout(){

$this->session->set_userdata('status_admin', "");
redirect(base_url('Admin'));
}
}
Kode Program 4.13 Controller Admin
Kode Program 4.13 merupakan sintaks dari Controller admin, dimana akan
dilakukan pengambilan data dari adminmodel terlebih dahulu. Admin yang ingin login
membutuhkan username dan password yang dapat diinput di halaman admin/index.
Username dan password yang sesuai akan melempar admin menuju halaman
admin/dashboard, sedangkan jika username dan password tidak sesuai, maka admin
akan diberikan notifikasi login failed yang kemudian dikembalikan ke halaman
admin/index. Admin yang melakukan logout akan diubah statusnya dan dibawa ke
halaman admin/index.
40
4.1.2.2 Booking
Controller booking menghubungkan antara BookingModel dengan tampilan
Booking. Sintaks dari Controller booking akan dijelaskan sebagai berikut.

allowed');
class Booking extends CI_Controller {

$this->load->model('BookingModel');
$this->load->library('pagination');
}

$total_records = $this->BookingModel->get_total();
// init params
$params = array();
$limit_per_page = 6;
$start_index = ($this->uri->segment(3)) ? $this->uri-
>segment(3) : 0;
if ($total_records > 0) {
// get current page records
$params["data"] = $this->BookingModel-
>get_current_page_records($limit_per_page, $start_index);
$config['base_url'] =
base_url().'Booking/index';
$config['total_rows'] = $total_records;
$config['per_page'] = $limit_per_page;
$config["uri_segment"] = 3;
//bootstrap class
$config['first_link'] = 'First';
$config['last_link'] = 'Last';
$config['next_link'] = 'Next';
$config['prev_link'] = 'Prev';
$config['full_tag_open'] = '<div
class="pagging text-center"><nav><ul class="pagination justify-
content-center">';
$config['full_tag_close'] =
'</ul></nav></div>';
$config['num_tag_open'] = '<li class="page-
item"><span class="page-link">';
$config['num_tag_close'] = '</span></li>';
$config['cur_tag_open'] = '<li class="page-
item active"><span class="page-link">';
41
$config['cur_tag_close'] = '<span class="sr-

only">(current)</span></span></li>';
$config['next_tag_open'] = '<li class="page-
$config['next_tagl_close'] = '<span aria-
hidden="true">»</span></span></li>';
$config['prev_tag_open'] = '<li class="page-
$config['prev_tagl_close'] = '</span>Next</li>';
$config['first_tag_open'] = '<li class="page-
$config['first_tagl_close'] = '</span></li>';
$config['last_tag_open'] = '<li class="page-
$config['last_tagl_close'] = '</span></li>';
// build paging links

$this->pagination->initialize($config);
$params["links"] = $this->pagination-
>create_links();
}
if($this->session->userdata('status_user') != "login"){
$this->load->view('User/login');
}
else{
$this->load->view('booking/booking', $params);
}
}
public function load_harga_paket($id){

$hasil=$this->BookingModel->harga($id);
echo json_encode($hasil);
}
public function booking(){

$data = array(
"id_user" => $this->input-
>post('id_user'),
"banyak_traveler" => $this->input-
>post('pack'),
"tgl_traveling" => $this->input-
>post('tanggal'),
"tgl_booking" => date("Y-m-d"),
"id_paket" => $this->input-
>post('pk'),
"biaya_traveling" => $this->input-
>post('total_harga'),
"permintaan_spesial" => $this->input-
>post('msg'),
"status_pembayaran" => -1
42
);
$this->BookingModel->booking($data);
echo "success";
}
}
Kode Program 4.14 Sintaks Controller Booking
Kode program 4.14 merupakan sintaks dari Controller Booking. User harus
melakukan login terlebih dahulu sebelum dapat melakukan booking. Data booking akan
disimpan dalam database, yang terdiri dari id user, banyaknya traveler, tanggal
traveling dan tanggal booking, id paket yang dipilih, biaya traveling, permintaan
spesial, dan status pembayaran.
4.1.2.3 Bookingdata
Controller bookingdata berfungsi untuk menghubungkan
bookingdataModel dengan tampilan data_booking pada dashboard admin. Sintak
dari Controller booking data akan dijelaskan sebagai berikut.

allowed');
class Bookingdata extends CI_Controller {

$this->load->model('bookingdataModel');
$this->load->library('email');
$this->email->set_newline("\r\n");
}

"login"){
redirect(base_url("Admin"));
}
$hasil['data'] = $this->bookingdataModel-
>view_booking();
$this->load->view('admin/data/data_booking', $hasil);
}
public function edit($id){

43
$hasil_select['data_edit'] = $this->bookingdataModel-
>view_biaya($id);
echo json_encode($hasil_select);
}
public function update(){

$id = $this->input->post('id');
$data = array(
"biaya_tambahan" => $this->input->post('biaya'),
"ket_biaya_tambahan" => $this->input->post('ket')
);
$this->bookingdataModel->update($id,$data);
echo "success";
}
public function cancel($id){

$data = array(
"status_cancle" => 1
);
$this->bookingdataModel->cancel($id,$data);
echo "success";
}
}
Kode Program 4.15 Sintaks Controller BookingData
Kode program 4.15 merupakan sintaks dari controller bookingdata.
Bookingdata dapat menampilkan seluruh data booking, mengubah dan meng-update
data booking, serta melakukan pembatalan melalui dashboard admin.
4.1.2.4 Destinasi
Controller Destinasi berfungsi sebagai penghubung antara
Destinasimodel dengan tampilan list destinasi. Sintaks dari controller destinasi
akan dijelaskan sebagai berikut.

allowed');
class Destinasi extends CI_Controller {

$this->load->model('DestinasiModel');
44
}

if(empty($this->input->post('lokasi'))){
$lokasi=0;
}
else{
$lokasi=$this->input->post('lokasi');
}
if(empty($this->input->post('jenis'))){
$jenis=0;
}
else{
$jenis=$this->input->post('jenis');
}
if($this->input->post('cari')){
$total_records = $this->DestinasiModel-
>get_filter($lokasi, $jenis);
}
else{
$total_records = $this->DestinasiModel-
>get_total();
}
// init params
$params = array();
>segment(3) : 0;
$params["data"] = $this->DestinasiModel-
>get_current_page_records_filter($limit_per_page, $start_index,
$lokasi, $jenis);
}
else{
$params["data"] = $this->DestinasiModel-
}
$config['base_url'] = base_url().'destinasi/index';
45
content-center">';

$params["links"] = $this->pagination->create_links();
}
$this->load->view('destinasi/destinasi', $params);
}
}
Kode Program 4.16 Sintaks Controller Destinasi
Kode program 4.16 merupakan sintaks dari controller destinasi. Controller
Destinasi akan mengambil data dari DestinasiModel dan menampilkan data lokasi
dan jenis dari destinasi apabila di-filter oleh user. Data kemudian ditampilkan pada
menu destinasi.
46
4.1.2.5 DetDestinasi
Controller DetDestinasi berfungsi untuk menghubungkan wisatamodel
dengan tampilan detail destinasi. Sintaks dari controller DetDestinasi dapat dilihat
pada kode program berikut.

allowed');
class DetDestinasi extends CI_Controller {

$this->load->model('WisataModel');
}
public function index($id){

$hasil['data'] = $this->WisataModel-
>view_wisata_byID($id);
$this->load->view('destinasi/detail-destinasi',$hasil);
}
}
Kode Program 4.17 Sintaks Controller DetDestinasi
Kode program 4.17 merupakan sintaks dari controller detdestinasi, yang
berfungsi untuk menampilkan informasi detail dari destinasi yang telah dipilih. Data
didapatkan dari WisataModel.
4.1.2.6 DetPaket
Controller detpaket berfungsi untuk menghubungkan antara
paketDataModel dengan tampilan detail paket. Sintaks dari controller detpaket dapat
dilihat pada kode program berikut.

allowed');
class DetPaket extends CI_Controller {

$this->load->model('PaketdataModel');
}
47
public function index($id){

$hasil['data'] = $this->PaketdataModel-
>view_paket_byID($id);
$hasil['data_hotel'] = $this->PaketdataModel-
>view_paket_hotel($id);
$hasil['data_wisata'] = $this->PaketdataModel-
>view_paket_wisata($id);
$hasil['data_wisata_foto'] = $this->PaketdataModel-
$this->load->view('paket/detail-paket',$hasil);
}
}
Kode Program 4.18 Controller Detpaket
Kode program 4.18 merupakan sintaks dari controller detpaket. Controller
detpaket akan mengambil data dari paketdatamodel, yang kemudian akan
ditampilkan pada tampilan detail paket yang dipilih.
4.1.2.7 Hotel
Controller hotel berfungsi untuk menghubungkan hotelmodel dengan
tampilan hotel yang tersedia pada dashboard admin. Sintaks dari controller hotel
dapat dilihat pada kode program berikut.

allowed');
class Hotel extends CI_Controller {

$this->load->model('HotelModel');
}

"login"){
}
$hasil['data'] = $this->HotelModel->view_hotel();
48
$this->load->view('admin/data/data_hotel', $hasil);
}
public function load_data(){

$hasil['data'] = $this->HotelModel->view_hotel();
}
public function tambah_hotel(){

$data = array(
"nama_hotel" => $this->input-
>post('nama'),
"alamat_hotel" => $this->input-
>post('alamat'),
"tlpn_hotel" => $this->input-
>post('tlpn'),
"biaya_permalam" => $this->input->post('biaya'),
"status_aktif" => 1
);
$this->HotelModel->save($data);
echo "success";

$hasil_select['data_edit'] = $this->HotelModel-
>view_id_hotel($id);
}
public function update(){

$id = $this->input->post('idED');
$data = array(
"nama_hotel" => $this->input->post('namaED'),
"alamat_hotel" => $this->input->post('alamatED'),
"tlpn_hotel" => $this->input->post('tlpnED'),
"biaya_permalam" => $this->input->post('biayaED')
);
$this->HotelModel->update($id,$data);
echo "success";
}
public function delete(){

$data = array(
"status_aktif" => 0
);
$this->HotelModel->delete($id,$data);
echo "success";
}
49
}
Kode Program 4.19 Controller Hotel
Kode program 4.19 menampilkan sintak dari controller hotel yang terdiri dari
tujuh fungsi. Controller hotel akan mengambil data dari hotelmodel, yang kemudian
akan ditampilkan pada menu data hotel pada dashboard admin. Admin dapat
melakukan penambahan, perubahan, serta penghapusan terhadap data hotel.
4.1.2.8 Kontak
Controller kontak berfungsi untuk menampilkan data kontak yang tersedia
pada halaman web. Sintaks dari controller kontak dapat dilihat pada kode program
berikut.

allowed');
class Kontak extends CI_Controller {

}

$this->load->view('kontak/kontak');
}
}
Kode Program 4.20 Controller Kontak
Kode program 4.20 merupakan sintak dari Controller kontak yang berfungsi
untuk menampilkan kontak yang dapat dihubungi untuk pemesanan paket yang akan
ditampilkan pada menu kontak.
4.1.2.9 Laporan
Controller laporan berfungsi untuk menghubungkan laporanmodel dengan
menu data laporan yang terdapat pada dashboard admin. Sintaks dari controller
laporan dapat dilihat pada kode program berikut.
50

allowed');
class Laporan extends CI_Controller {

$this->load->model('LaporanModel');
}

"login"){
}
$hasil['data'] = $this->LaporanModel->view_booking();
$hasil['data_pembatalan'] = $this->LaporanModel-
>view_pembatalan();
$hasil['data_paket'] = $this->LaporanModel-
>view_paket();
$this->load->view('admin/data/data_laporan', $hasil);
}
public function cari_pemasukan(){

$awal = $this->input->post('awal');
$akhir = $this->input->post('akhir');
$data = array(
'tgl_traveling >=' => $awal,
'tgl_traveling <= ' => $akhir,
'status_pembayaran' => 1
);
$hasil['awal_pemasukan'] = $awal;
$hasil['akhir_pemasukan'] = $akhir;
>view_pembatalan();
>view_paket();
$hasil['data'] = $this-
>LaporanModel->cari_pemasukan($data);
}
public function cari_pembatalan(){

$awal_pembatalan = $this->input-
>post('awal_pembatalan');
$akhir_pembatalan = $this->input-
>post('akhir_pembatalan');
$data = array(
'tgl_traveling >=' => $awal_pembatalan,
51
'tgl_traveling <= ' => $akhir_pembatalan,

'status_cancle' => 1
);
$hasil['awal_pembatalan'] = $awal_pembatalan;
$hasil['akhir_pembatalan'] = $akhir_pembatalan;
>LaporanModel->view_booking();
>view_paket();
>cari_pembatalan($data);
}
public function cari_paket(){

$awal_paket = $this->input->post('awal_paket');
$akhir_paket = $this->input->post('akhir_paket');
$data = array(
'tgl_traveling >=' => $awal_paket,
'tgl_traveling <= ' => $akhir_paket,
'status_pembayaran' => 1
);
$hasil['awal_paket'] = $awal_paket;
$hasil['akhir_paket'] = $akhir_paket;
>LaporanModel->view_booking();
>view_pembatalan();
>cari_paket($data);
}
}
Kode Program 4.21 Controller Laporan
Kode program 4.21 merupakan sintak dari controller laporan. Controller
laporan akan mengambil data dari laporanmodel yang akan ditampilkan pada menu
laporan pada dashboard admin. Admin dapat melihat laporan dari transaksi yang sudah
masuk. Admin juga dapat melakukan pencarian berdasarkan kriteria pemasukan,
pembatalan, serta kriteria paket.
52
4.1.2.10 Main
Controller main berfungsi untuk menampilkan data destinasi serta paket
wisata pada dashboard user. Sintaks dari controller main dapat dilihat pada kode
program berikut.

allowed');
class Main extends CI_Controller {

$this->load->model('Home');
}

$hasil['data_wisata'] = $this->Home->destinasi_limit();
$hasil['data_paket'] = $this->Home->view_paket();
$hasil['data_momentt'] = $this->Home->view_momentt();
$hasil['data_jenis_wisata'] = $this->Home-
>view_jenis_wisata();
$this->load->view('home/index',$hasil);
}
}
Kode Program 4.22 Controller Main
Kode program 4.22 merupakan sintaks dari controller menu. Controller menu
akan mengambil data dari model home, yang kemudian ditampilkan menggunakan
function index melalui halaman utama dashboard user.
4.1.2.11 Moment
Controller moment berfungsi untuk menghubungkan momenttmodel
dengan menu moment pada dashboard user. Sintaks dari controller moment dapat
allowed');
53
class Momentt extends CI_Controller {

$this->load->model('momenttModel');
}

$hasil['data'] = $this->momenttModel->view_wisata();
$this->load->view('momentt/momentt',$hasil);
}
}
Kode Program 4.23 Controller moment
Kode program 4.23 merupakan sintaks dari controller moment. Controller
moment akan mengambil data dari momenttmodel, yang kemudian akan ditampilkan
pada view_wisata.
4.1.2.12 Momenttdata
Controller momenttdata digunakan untuk menghubungkan momenttmodel
dengan menu data moment pada dashboard admin. Sintaks dari controller
momenttdata ditunjukkan pada kode program berikut.

allowed');
class Momenttdata extends CI_Controller {

$this->load->model('momenttModel');
}

"login"){
}
54
$this->load->view('admin/data/data_momentt', $hasil);
}

}
public function tambah_wisata(){

$config['upload_path'] = './images/momentt';
$config['allowed_types'] = 'gif|jpg|png';
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('foto_momentt')){
$error = $this->upload->display_errors();
echo $error;
}
else{
//dapatkan data file yg d upload

$upload_data = $this->upload->data();
//dapatkan nama file

$image = $upload_data['file_name'];
$data = array(
"judul_momentt" => $this->input-
>post('nama'),
"lokasi_momentt" => $this->input-
>post('lokasi'),
"tanggal_momentt" => $this->input-
>post('tanggal'),
"deskripsi_momentt" => $this->input-
>post('deskripsi'),
"foto_momentt" => $this->input-
>post('foto_momentt'),
"foto_momentt" => $image
);
$this->momenttModel->save($data);
echo "success";
}
}

$hasil_select['data_edit'] = $this->momenttModel-
>view_id_momentt($id);
}
public function update_without_image(){

55
$data = array(
"judul_momentt" => $this->input->post('namaED'),
>post('lokasiED'),
>post('tanggalED'),
>post('deskripsiED')
);
$this->momenttModel->update($id,$data); // Panggil
fungsi edit() yang ada di SiswaModel.php
echo "success";
}
public function update_with_image(){

echo $this->input->post('fotomomenttED');
$config['upload_path'] = './images/momentt';
if(!$this->upload->do_upload('fotomomenttED')){
echo $error;
}
else{
$file_lama=$this->input->post('file_lama');
//menghapus gambar lama, variabel dibawa dari

form
$data = array(
"judul_momentt" => $this->input-
>post('namaED'),
>post('lokasiED'),
>post('tanggalED'),
>post('deskripsiED'),
"foto_momentt" => $this->input-
>post('fotomomenttED'),
"foto_momentt" => $image
);
$this->momenttModel->update($id,$data);
echo "success";
}
}
}
Kode Program 4.24 Controller Momenttdata
56
Kode program 4.24 merupakan sintaks controller momenttdata. Controller

momenttdata mengambil data dari momenttmodel, dan terdiri dari enam buah fungsi
utama yang berfungsi apabila admin sudah login, yaitu function index, function
load_data, function tambah_wisata, function edit, function
update_without_image, dan function update_with_image. Function index

berfungsi untuk menampilkan data yang telah diambil dari momenttmodel pada menu
data momentt dashboard admin. Function load_data berfungsi untuk menampilkan
data melalui json. Function tambah_wisata berfungsi untuk menambahkan destinasi
wisata dengan menginputkan data yang dibutuhkan. Function edit digunakan untuk
mengubah data momentt. Function update_without_image dan function
update_with_image berfungsi untuk melakukan update data momentt.
4.1.2.13 Paket
Controller paket berfungsi untuk menghubungkan paketmodel dengan
halaman paket. Sintaks dari controller paket dapat dilihat pada kode program berikut.

allowed');
class Paket extends CI_Controller {

$this->load->model('PaketModel');
}

if(empty($this->input->post('hari'))){
$hari=0;
}
else{
$hari=$this->input->post('hari');
}
if(empty($this->input->post('harga'))){
$harga=99999999;
}
else{
57
$harga=$this->input->post('harga');
}
//jika cari pada halam index ditekan atau tidak

$total_records = $this->PaketModel-
>get_filter($hari, $harga);
}
else{
$total_records = $this->PaketModel->get_total();
}
// init params
$params = array();
>segment(3) : 0;
$params["data"] = $this->PaketModel-
>get_current_page_records_filter($limit_per_page, $start_index,
$hari, $harga);
}
else{
$params["data"] = $this->PaketModel-
}
$config['base_url'] = base_url().'Paket/index';
//bootstrap class
content-center">';
58


$params["links"] = $this->pagination-
>create_links();
}
$this->load->view('paket/paket', $params);
}
}
Kode Program 4.25 Controller Paket
Kode program 4.25 merupakan sintaks dari controller paket. Controller
paket akan mengambil data dari paketmodel dan menampilkan data jumlah hari dan
harga dari paket apabila di-filter oleh user. Data kemudian ditampilkan pada menu
paket.
4.1.2.14 Paketdata
Controller paketdata berfungsi untuk menghubungkan Paketdatamodel,
hotelmodel dan wisatamodel dan menampilkan data paket pada dashboard admin.
Sintaks dari controller paketdata dapat dilihat pada kode program berikut.

allowed');
class Paketdata extends CI_Controller {

$this->load->model('PaketdataModel');
59
$this->load->model('HotelModel');
}

"login"){
}
$hasil['data'] = $this->PaketdataModel->view_paket();
$hasil['data_wisata'] = $this->WisataModel-
>view_wisata();
$this->load->view('admin/data/data_paket', $hasil);
}

$hasil['data'] = $this->PaketdataModel->view_paket();
}
public function tambah_jenis_wisata(){

$data = array(
"jenis_wisata" => $this->input-
>post('namajeniswisata'),
);
$this->WisataModel->savejenis($data);
echo "success";
}
public function tambah_paket(){

$config['upload_path'] = './images/package';
if ( ! $this->upload->do_upload('foto')){
echo $error;
}
else{

60
$data = array(
"nama_paket" => $this->input->post('nama'),
"banyak_hari" => $this->input-
>post('hari'),
"banyak_malam" => $this->input-
>post('malam'),
//"harga_paket" => $this->input-
>post('harga'),
"deskripsi_paket" => $this->input-
>post('deskripsi'),
"foto_paket" => $this->input-
>post('foto'),
"foto_paket" => $image
);
$this->PaketdataModel->save($data);
echo "success";
}
}

$hasil_select['data_edit'] = $this->PaketdataModel-
>view_paket_byID($id);
}

$data = array(
"nama_paket" => $this->input->post('namaED'),
"banyak_hari" => $this->input->post('hariED'),
"banyak_malam" => $this->input->post('malamED'),
);
$this->PaketdataModel->update($id,$data);
echo "success";
}

echo $this->input->post('fotoED');
$config['upload_path'] = './images/package/';
if(!$this->upload->do_upload('fotoED')){
echo $error;
}
else{
61

form
unlink($config['upload_path'].$file_lama);
$data = array(
"nama_paket" => $this->input-
>post('namaED'),
"banyak_hari" => $this->input-
>post('hariED'),
"banyak_malam" => $this->input-
>post('malamED'),
"harga_paket" => $this->input-
>post('hargaED'),
"foto_paket" => $this->input-
>post('fotoED'),
"foto_paket" => $image
);
$this->PaketdataModel->update($id,$data);
echo "success";
}

$data = array(
"status_aktif_paket" => 0
);
$this->PaketdataModel->delete($id,$data);
echo "success";
}
// HOTEL PAKET
public function load_data_hotel($id){
>view_paket_hotel($id);
}
public function delete_hotel(){

$this->PaketdataModel->delete_hotel($id);
echo "success";
}
62
public function load_all_hotel($id){

>view_hotel_aviable($id);
}
public function tambah_data_hotel(){

$id_paket = $this->input->post('id_paket');
$id_hotel = $this->input->post('id_hotel');
$lama = $this->input->post('lama_menginap');
$data = array(
"id_paket" => $id_paket,
"id_hotel" => $id_hotel,
"banyak_malam_hotel" => $lama
);
$this->PaketdataModel->add_hotel($data);
echo "success";
}
// WISATA PAKET
public function load_data_wisata($id){
}
public function delete_wisata(){

$this->PaketdataModel->delete_wisata($id);
echo "success";
}
public function load_all_wisata($id){

>view_wisata_aviable($id);
}
public function tambah_data_wisata(){

$id_wisata = $this->input->post('id_wisata');
$data = array(
"id_paket" => $id_paket,
"id_wisata" => $id_wisata
);
$this->PaketdataModel->add_wisata($data);
echo "success";
}
//UPDATE HARGA PAKET

63
public function update_harga_paket(){

$harga_paket = $this->input->post('harga_paket');
$data = array(
"harga_paket" => $harga_paket
);
$this->PaketdataModel-
>update_harga_paket($id_paket,$data);
echo "success";
}
}
Kode Program 4.26 Controller PaketData
Kode program 4.26 merupakan sintaks dari controller paketdata yang
mengambil data dari tiga buah model, yaitu paketdatamodel, hotelmodel, dan
wisatamodel. Controller paketdata terdiri dari 17 function utama yang digunakan
untuk menampilkan, mengubah, ataupun menghapus data dari hotel dan wisata dalam
satu paket, serta dapat mengubah harga dari paket destinasi.
4.1.2.15 Pembayaran
Controller pembayaran berfungsi sebagai penghubung antara
pembayaranmodel dengan halaman pembayaran. Sintaks dari controller pembayaran
dapat dilihat pada kode program berikut.

allowed');
class Pembayaran extends CI_Controller {

$this->load->model('PembayaranModel');
}

$this->load->view('pembayaran/pembayaran');
}
public function cari_booking($id){

$hasil['data']=$this->PembayaranModel-
>cari_booking($id);
64
public function pembayaran(){

$config['upload_path'] =
'./images/Pembayaran';
$config['allowed_types'] = 'jpg|png';
if ( ! $this->upload->do_upload('bukti')){
echo $error;
}
else{

$data = array(
"id_booking" => $this->input-
>post('id_book'),
"atas_nama_pengirim" => $this->input-
>post('atas_nama'),
"bukti_transaksi" => $this->input-
>post('bukti'),
"bukti_transaksi" => $image,
"tgl_upload_bukti" => date("Y-m-d"),

"status_valid" =>0
);
$status = array(
"status_pembayaran" => 0
);
$this->PembayaranModel->pembayaran($data);
$this->PembayaranModel->status_pembayaran($this-
>input->post('id_book'),$status);
echo "success";
}
}
}
Kode Program 4.27 Controller Pembayaran
Kode program 4.27 merupakan sintaks dari controller pembayaran yang
menerima request dari user mengenai pembayaran yang sedang dilakukan oleh user
setelah melakukan booking. Controller pembayaran terdiri dari tiga buah fungsi utama,
yaitu function index yang digunakan untuk menampilkan data pembayaran,
65
function search yang digunakan untuk mencari id booking, dan function

pembayaran yang digunakan untuk melakukan upload bukti pembayaran.
4.1.2.16 Pembayarandata
Controller pembayarandata berfungsi untuk menghubungkan
pembayarandatamodel dengan menu data pembayaran pada dashboard admin.
Sintaks dari controller pembayarandata dapat dilihat pada kode program berikut.

allowed');
class Pembayarandata extends CI_Controller {

$this->load->model('pembayarandataModel');
}

"login"){
}
$hasil['data'] = $this->pembayarandataModel-
>view_pembayaran();
$this->load->view('admin/data/data_pembayaran',
$hasil);
}
public function valid($id){

$data = array(
"status_valid" => 1
);
$this->pembayarandataModel->valid($id,$data);
echo "success";
}
}
Kode Program 4.28 Controller Pembayarandata
Kode program 4.28 merupakan sintaks dari controller pembayarandata yang
mengambil data dari pembayarandatamodel dan memiliki dua buah function, yakni
66
function index untuk menampilkan data dari seluruh pembayaran yang dilakukan dan
function valid yang digunakan untuk melakukan validasi terhadap bukti pembayaran
yang telah dikirim oleh user.
4.1.2.17 Tentang
Controller tentang digunakan untuk menampilkan data dari tim pengembang
website Sistem Informasi Penyedia Jasa Travel. Sintaks dari controller tentang dapat

allowed');
class Tentang extends CI_Controller {

}

$this->load->view('tentang/tentang');
}
}
Kode Program 4.29 Controller Tentang
Kode program 4.29 merupakan sintaks dari controller tentang yang hanya
terdiri dari sebuah function, yaitu function index yang digunakan untuk menampilkan
data tentang tim pengembang website pada dashboard user.
4.1.2.18 User
Controller user merupakan sebuah controller yang menerima inputan yang
diberikan oleh user kepada sistem informasi. Sintaks dari controller user dapat dilihat

allowed');
class User extends CI_Controller {

67
$this->load->model('UserModel');
}

if($this->session->userdata('status') != "login"){
$this->load->view('user/login');
}
else{
redirect(base_url(''));
}
public function login(){

$email=$this->input->post('email');
$pass=$this->input->post('password');
$where = array(
'email' => $email,
'password' => $pass
);
$hasil=$this->UserModel->login($where);
foreach ($hasil->result() as $data){
$id_user= $data->id_user;
$nama= $data->nama_user;
$no_id= $data->no_indentittas;
$tlpn= $data->tlpn_user;
$negara= $data->negara_user;
$alamat= $data->alamat;
$email= $data->email;
}
$cek=$hasil->num_rows();
if($cek==1){
$data_session = array(
'id_user' => $id_user,
'user' => $nama,
'no_id' => $no_id,
'tlpn' => $tlpn,
'negara' => $negara,
'alamat' => $alamat,
'email' => $email,
'status_user' => "login"
);
$user_data=$this->session-
>set_userdata($data_session);
}
else{
68
echo "<script>alert('Login Failed');

window.history.back();</script>";
}
}
public function logout(){

$this->session->set_userdata('status_user',"");
}
public function daftar(){

$data = array(
"email" => $this->input->post('emailDaf'),
"password" => $this->input->post('passDaf'),
"nama_user" => $this->input->post('namaDaf'),
"no_indentitas" => $this->input->post('idDaf'),
"tlpn_user" => $this->input->post('tlpnDaf'),
"alamat_user" => $this->input->post('alamatDaf')
);
$this->UserModel->daftar($data);
echo "success";
}
public function profil($id){

$hasil['data'] = $this->UserModel->view_booking($id);
$this->load->view('user/profil', $hasil);
}
}
Kode Program 4.30 Controller User
Kode program 4.30 merupakan sintaks dari controller user yang digunakan
untuk melakukan kebutuhan yang dapat user lakukan dalam menggunakan Sistem
Informasi Penyedia Jasa Travel. Controller user terdiri dari 5 function, yaitu function
index untuk menampilkan nama user danstatus user pada dashboard, function login
yang digunakan user untuk melakukan login, function logout yang berfungsi
menjalankan proses logout user, function daftar untuk menerima request user untuk
mendaftar sebagai member baru, serta function profil yang digunakan untuk
menampilkan seluruh booking yang dimiliki oleh user.
69
4.1.2.19 Wisata
Controller wisata berfungsi untuk menghubungkan wisatamodel dengan
menu data wisata pada dashboard admin. Sintaks dari controller wisata dapat dilihat

allowed');
class Wisata extends CI_Controller {

}

"login"){
}
$hasil['data'] = $this->WisataModel->view_wisata();
$hasil['data_jenis'] = $this->WisataModel-
>jenis_wisata();
$this->load->view('admin/data/data_wisata', $hasil);
}
public function load_jenis(){

>jenis_wisata();
}

$hasil['data'] = $this->WisataModel->view_wisata();
>jenis_wisata();
}
public function tambah_jenis_wisata(){

$data = array(
"jenis_wisata" => $this->input-
>post('namajeniswisata'),
);
70
$this->WisataModel->savejenis($data);
echo "success";
}
public function tambah_wisata(){

$config['upload_path'] = './images/top-
destination';
if ( ! $this->upload->do_upload('foto')){
echo $error;
}
else{


$data = array(
"nama_tempat_wisata" => $this->input-
>post('nama'),
"lokasi" => $this->input->post('lokasi'),
"id_jenis_wisata" => $this->input-
>post('jenis'),
"frame_peta" => $this->input->post('map'),
"harga_tiket" => $this->input-
>post('harga'),
"deskripsi_wisata" => $this->input-
>post('deskripsi'),
"foto_wisata" => $this->input-
>post('foto'),
"foto_wisata" => $image
);
$this->WisataModel->save($data);
echo "success";
}
}

$hasil_select['data_edit'] = $this->WisataModel-
>view_id_wisata($id);
$hasil_select['data_jenis'] = $this->WisataModel-
>jenis_wisata();
}

$data = array(
71

>post('namaED'),
"lokasi" => $this->input->post('lokasiED'),
>post('jenisED'),
"frame_peta" => $this->input->post('mapED'),
"harga_tiket" => $this->input->post('hargaED'),
);
$this->WisataModel->update($id,$data); // Panggil
fungsi edit() yang ada di SiswaModel.php
echo "success";
}

echo $this->input->post('fotoED');
$config['upload_path'] = './images/top-
destination/';
if(!$this->upload->do_upload('fotoED')){
echo $error;
}
else{

form
unlink($config['upload_path'].$file_lama);
$data = array(
>post('namaED'),
"lokasi" => $this->input->post('lokasiED'),
>post('jenisED'),
"frame_peta" => $this->input-
>post('mapED'),
"harga_tiket" => $this->input-
>post('hargaED'),
"foto_wisata" => $this->input-
>post('fotoED'),
"foto_wisata" => $image
);
72
$this->WisataModel->update($id,$data);
echo "success";
}
}

$data = array(
"status_aktif" => 0
);
$this->WisataModel->delete($id,$data);
echo "success";
}
}
Kode Program 4.31 Controller Wisata
Kode program 4.31 merupakan sintaks dari controller wisata. Controller
wisata memiliki 9 function tambahan, yaitu function index untuk menampilkan data
seluruh wisata pada menu data wisata dashboard admin, function load_jenis dan
function load_data untuk menampilkan data tentang wisata dan jenis wisata yang
ditawarkan, function tambah_jenis_wisata untuk menambahkan kategori jenis
wisata yang tersedia, function tambah_wisata yang berguna untuk menambahkan
data destinasi wisata baru serta function edit, function update_without_image,
function upload_with_image dan function delete untuk melakukan pengubahan
dan penghapusan data terhadap data wisata yang tersedia.
4.1.3 View
View, merupakan bagian yang menangani presentation logic. Pada suatu
aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh
controller. View berfungsi untuk menerima dan merepresentasikan data kepada user.
Bagian ini tidak memiliki akses langsung terhadap bagian model.
4.1.3.1 Header Dashboard
Header dashboard berfungsi untuk menampilkan informasi pengguna dan
fungsi untuk melakukan pengecekan tour sampai hingga melakukan transaksi. Berikut
sintaks untuk menampilkan header dashboard dapat dilihat pada Kode Program 4.32.
73
<!DOCTYPE html>
<html>
<head>

<title><?=$title?> | Travel N Tour</title>

<meta name="viewport" content="width=device-width, initial-
scale=0.1">
<link rel="stylesheet"
href="<?=base_url()?>assets/css/jquery.fancybox.css"
type="text/css">
href="<?=base_url()?>assets/css/bootstrap.min.css" type="text/css">
href="<?=base_url()?>assets/css/style.min.css" type="text/css">
href="<?=base_url()?>assets/css/flexslider.css" type="text/css">
href="<?=base_url()?>assets/css/responsive-mobile.css"
type="text/css">
href="<?=base_url()?>assets/css/owl.carousel.min.css"
type="text/css">
href="<?=base_url()?>assets/css/owl.theme.default.min.css"
type="text/css">
href="<?=base_url()?>assets/css/jquery-ui.css" type="text/css" />
href="<?=base_url()?>assets/css/datepicker.css" type="text/css">
<link rel="stylesheet" href="<?=base_url()?>assets/css/font-
awesome/css/font-awesome.min.css" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="<?=base_url()?>assets/js/jquery.min.js"></script>
src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
74
src="<?=base_url()?>assets/dashboard-
admin/datatables/jquery.dataTables.js"></script>
admin/datatables/dataTables.bootstrap.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"
type="text/javascript"></script>
<script src="<?=base_url()?>assets/js/jquery-ui.js"
</head>
<div id="preloader">
<div id="status"></div>
</div>
<div class="container">
<div class="row">
<div class="header-top">
<div class="container clear-padding" style="border-
bottom: 1px solid #ddd">
<div class="navbar-contact">
<div class="col-md-4 clear-padding mr-1">
<p>Kontak Kami : <i class="fa fa-
phone"></i> +6283213144</p>
</div>
<div class="col-md-8 col-xs-12 clear-

padding mr-1">
<?php
if($this->session-
>userdata('status_user') != "login"){
?>
<div class="icon-sosmed">
<ul>
<li><a
href="<?=base_url('User')?>">MASUK</a></li>
<li><a
style="border-right:1px inset
#888686"href="<?=base_url('User')?>"></a></li>
<li><a
href="<?=base_url('User')?>">DAFTAR </a></li>
</ul>
</div>
<?php
}else{
?>
75
<ul class="nav
navbar-right top-nav">
<li
class="dropdown">
<a
href="#" class="dropdown-toggle" data-toggle="dropdown"
style="color:#888686">
<span style="font-size:14px"><b>Hallo <?=$this->session-

>userdata('user')?></b></span>
<span class="caret"></span>
</a>
<ul
class="dropdown-menu" role="menu">
<li><a href="<?=base_url("User/profil/")?><?=$this->session-
>userdata('id_user')?>"><i class="fa fa-map"></i> Trip</a></li>
<li class="divider"></li>
<li><a href="<?=base_url('User/logout'); ?>"><i class="fa fa-

fw fa-power-off"></i> Logout</a></li>
</ul>
</li>
</ul>
<?php } ?>

</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="light-menu">
<div class="col-lg-12 clear-padding">
<nav class="navbar navbar-default affix" data-
spy="affix" data-offset-top="40" role="navigation">
<div class="container clear-padding">
76
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-
only">Navigation</span>
<span class="icon-bar"></span>
</button>
<a href="<?=base_url()?>" class="navbar-
brand">Tour & Travels</a>
</div>
<div class="collapse navbar-collapse clear-

padding" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li <?php if($title=="Beranda")echo
"class='active'";?>><a href="<?=base_url()?>">BERANDA</a></li>
<li <?php if($title=="Paket")echo
"class='active'";?>><a href="<?=base_url('Paket')?>">PAKET</a></li>
<li <?php if($title=="Destinasi")echo
"class='active'";?>><a
href="<?=base_url('Destinasi')?>">DESTINASI</a></li>
<li <?php
if($title=="Pembayaran")echo "class='active'";?>><a
href="<?=base_url('Pembayaran')?>">PEMBAYARAN</a></li>
<li <?php if($title=="Momentt")echo
href="<?=base_url('Momentt')?>">MOMENTT</a></li>
<li <?php if($title=="Tentang")echo
"class='active'";?>><a href="<?=base_url('Tentang')?>">TENTANG
KAMI</a></li>
<li <?php if($title=="Kontak")echo
href="<?=base_url('Kontak')?>">KONTAK</a></li>
<a
href="<?=base_url('Booking')?>"><button type="button" class="btn-
bn">BOOK NOW</button></a>
</ul>
</div>
</div>
</nav>
</div>
</div>
Kode Program 4.32 Sintaks Tampilan Header Dashboard
Kode Program 4.32 merupakan sintaks header dashboard yang terdapat
dalam header.php. Header dashboard terdapat profil user, kontak website, beranda,
paket, destinasi, pembayaran, momentt, tentang kami, kontak dan booking now.
77
4.1.3.2 Dashboard
Dashboard berfungsi untuk menampilkan informasi pemilihan booking,
informasi moment wisata, informasi diskon, paket tour, dan kontak website. Berikut
sintaks untuk menampilkan dashboard dapat dilihat pada Kode Program 4.33.
<body>
<?php
$title['title'] = 'Beranda';
$this->load->view('file_js');
$this->load->view('header',$title);
?>
<div class="banner">
<div id="carousel-banner" class="carousel slide" data-
ride="carousel">




<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?=base_url()?>images/resize/dd.jpg"
alt="Slide 1" class="img-responsive" style="width:100%">
<div class="carousel-caption">
<h2>Tempat Tempat Terpopuler</h2>
<h4>bersama kami <br>buat kenangan tak
terlupakan</h4>
<a href="<?=base_url('Destinasi')?>"
style="display:none;">LIHAT SELENGKAPNYA</a>
</div>
</div>
<div class="item">
<img src="<?=base_url()?>images/resize/aa.jpg"
alt="Slide 2" class="img-responsive" style="width:100%">
<div class="carousel-caption">
<h2>Tempat Tempat Terpopuler</h2>
<h4>bersama kami <br>buat kenangan tak
terlupakan</h4>
</div>
</div>
</div>
78


<a href="#carousel-banner" class="carousel-control left" data-
slide="prev" role="button">
<span class="fa fa-chevron-left"></span>
</a>
<a href="#carousel-banner" class="carousel-control right" data-
slide="next" role="button">
<span class="fa fa-chevron-right"></span>
</a>
</div>
</div>
<div class="col-lg-8 col-lg-offset-2 clear-padding tours-src">

<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-
toggle="tab">TEMUKAN TRIP MU</a></li>
<li><a href="#tab2" data-
toggle="tab">TELUSURI WISATA <i class="fa fa-angle-
down"></i></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="col-lg-12 clear-padding tab-pane fade

in active" id="tab1">
<?php echo form_open_multipart("Paket/index");
?>

79
<div class="col-xs-6 mr-src-panel">

addon"><i class="fa fa-hourglass-start"></i></span>
<select name="hari"
class="form-control custom-form">
<option value="">Banyak
Hari</option>
<option value="1">1
Hari</option>
<option value="2">2
Hari</option>
<option value="3">3
Hari</option>
<option value="4">4
Hari</option>
<option value="5">5
Hari</option>
<option value="6">6
Hari</option>
<option value="7">7
Hari</option>
</select>
</div>
</div>

addon"><i class="fa fa-money"></i></span>
<select name="harga"
<option
value="">Budget</option>
<option
value="1000000">dibawah IDR.1000 K / pack</option>
<option
<option
<option
<option
</select>
</div>
</div>
<div class="col-lg-12 clear-padding"

style="margin-top: 20px;">
80
<div class="col-xs-3 col-xs-offset-9

button-find">
<input type="submit"
value="CARI" class="btn-bn" style="width:100%" name="cari">
</div>
</div>
<?php echo form_close();?>
</div>
<div class="col-lg-12 clear-padding tab-

pane fade" id="tab2">
<?php echo
form_open_multipart("Destinasi/index"); ?>
addon"><i class="fa fa-map-marker"></i></span>
<input type="text"
name="lokasi" class="form-control custom-form"
placeholder="Lokasi">
</div>
</div>

addon"><i class="fa fa-map-signs"></i></span>
<select name="jenis"
<option value="0">Jenis
Wisata</option>
<?php
if(
!empty($data_jenis_wisata)){
foreach($data_jenis_wisata as $data_jenis_wisata){
?>
<option
value="<?=$data_jenis_wisata-
>id_jenis_wisata?>"><?=$data_jenis_wisata->jenis_wisata?></option>
<?php } } ?>
</select>
</div>
</div>
<div class="col-lg-12 clear-padding"

style="margin-top: 20px;">
<div class="col-xs-3 col-xs-
offset-9 button-find">
value="CARI" class="btn-bn" style="width:100%" name="cari">
81
</div>
</div>
<?php echo form_close();?>
</div>
</div>
</div>
</div>
</div>


<section class="section-padd margin-bot">
<div class="col-md-4">
<div class="item-triped">
<img src="<?=base_url()?>images/icon/1.png"
class="img-responsive" />
<h4>DESTINATION</h4>
<p>We have recomendations of
attractions</p>
</div>
</div>
<h4>TOP PLACE</h4>
<p>We provide travel information media</p>
</div>
</div>
<h4>BOOK NOW</h4>
<p>Safe and reliable booking</p>
</div>
</div>
</div>
<hr class="hr-custom">
</section>
<div class="cd-title">
<h3>MOMENTT BARU TERCIPTA</h3>
<hr class="hr-style">
</div>
<section class="section-padd">
82
<div id="owl-momentt" class="owl-carousel owl-theme">
<?php
if( !empty($data_momentt)){
foreach($data_momentt as $data_momentt){
?>
<div style="width: 100%;">

<div class="col-sm-6">
<img
src="<?=base_url()?>images/momentt/<?=$data_momentt-
>foto_momentt?>" class="img-responsive" />
</div>
<div class="desc-popular">
<h3><?=$data_momentt-
>judul_momentt?></h3>
<h5><?=$data_momentt-
>lokasi_momentt?>, <?=$data_momentt->tanggal_momentt?></h5>
<p><?=$data_momentt-
>deskripsi_momentt?></p>
<div class="btn-ctn6">
<a
href="<?=base_url('Momentt')?>">LIHAT LEBIH BANYAK</a>
</div>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
</section>
<div class="parallax-content" style="background-image:
url('<?=base_url()?>images/M_bg.jpg'); height: 360px;">
<div class="overlay">
<h3>dapatkan diskon <r>20-30%</r> dari semua
paket kami</h3>
<p>pesan sekarang dan buat trip yang tak

terlupakan dengan harga spesial</p>
<div class="parallax-btn">
83
<a
href="<?=base_url('Booking')?>">Rencanakan Petualangan mu</a>
</div>
</div>
</div>
</section>
<div class="cd-title" style="padding-top:50px;">
<h3>DESTINASI WISATA POPULER</h3>

</div>
<section class="section-padd" style="padding-bottom:50px;">

<div id="owl-dest" class="owl-carousel owl-theme">
<?php
if( !empty($data_wisata)){
foreach($data_wisata as $data_wisata){
?>
<div style="width: 100%;">

<div class="desc-popular">
<h3><?=$data_wisata-
>nama_tempat_wisata?></h3>
<h5><r><?=$data_wisata-
>jenis_wisata?></r> - <?=$data_wisata->lokasi?></h5>
<p><?=$data_wisata-
>deskripsi_wisata?></p>
<div class="btn-ctn6">
<a
href="<?=base_url('Destinasi')?>">Detail Destinasi</a>
</div>
</div>
</div>
<img src="<?=base_url()?>images/top-
destination/<?=$data_wisata->foto_wisata?>" class="img-responsive"
/>
</div>
</div>
<?php
84
}
}
?>
</div>
</div>
</section>
<section class="section-padd" style="padding-bottom: 0;">

url('<?=base_url()?>images/forest.jpg');">
<div class="package-overlay">
<div class="packages-title">
<h3>paket terpopuler</h3>
<p></p>
</div>

<div class="detail-package owl-carousel owl-
theme" >
<?php
if( !empty($data_paket)){
foreach($data_paket as
$data_paket){
?>
<div class="owls-item col-md-4">
<div class="lbl-price">
IDR. <?=$data_paket-
>harga_paket?>
</div>
<img
src="<?=base_url()?>images/package/<?=$data_paket->foto_paket?>"
<h4><?=$data_paket->nama_paket?> -
<?=$data_paket->banyak_hari?> Hari, <?=$data_paket->banyak_malam?>
Malam</h4>
<p>
<?php if(strlen($data_paket-
>deskripsi_paket)<80) echo $data->deskripsi_paket."<br><br>";
else echo
substr($data_paket->deskripsi_paket, 0, 80)."...";?>
</p>
<a
href="<?=base_url('DetPaket')?>/index/<?=$data_paket-
>id_paket?>">read more <i class="fa fa-arrow-circle-right"></i></a>
</div>
<?php
}
85
}
?>
</div>
<div class="btn-package">
<a href="<?=base_url('Paket')?>">paket
lainnya</a>
</div>
</div>
</div>
</div>
</section>
<?php $this->load->view('footer'); ?>

src="<?=base_url()?>assets/js/owl.carousel.min.js"></script>
src="<?=base_url()?>assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl2").owlCarousel({
interval:2000,
dots:false
});
$("#owl-dest").owlCarousel({
items:1,
autoplay:true,
nav:false
});
$("#owl-momentt").owlCarousel({
items:1,
autoplay:true,
nav:false
});
$("#date1").datepicker();
});
$(window).on('load', function() {
$('#status').fadeOut();
$('#preloader').delay(120).fadeOut('slow');
})
</script>
</body>
86
</html>
Kode Program 4.33 Sintak Tampilan Dashboard
Kode Program 4.33 merupakan sintak dashboard yang terdapat dalam
index.php. Dashboard berisi informasi tentang pemesanan travelling seperti diskon
yang diberikan oleh sistem, berisi paket yang menarik dan berisi kolom untuk
pemesanan.
4.1.3.3 Login User

Login user tampilan untuk melakukan login oleh pengguna. Login user
berfungsi untuk melakukan pemesanan travel. Berikut sintaks untuk menampilkan
login dapat dilihat pada Kode Program 4.34.
<!DOCTYPE html>
<html>
<head>
<title>Login | Travel N Tour</title>
scale=1.0" />
admin/datatables/jquery.dataTables.js"></script>
admin/datatables/dataTables.bootstrap.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"
<script src="<?=base_url()?>assets/js/jquery-ui.js"
<link rel="stylesheet" type="text/css"

href="<?=base_url()?>assets/dashboard-admin/css/bootstrap.min.css"
/>
href="<?=base_url()?>assets/dashboard-admin/css/style-admin.css" />
href="<?=base_url()?>assets/dashboard-admin/font-awesome/css/font-
awesome.min.css" />
87
<link rel="shortcut icon"

href="<?=base_url()?>image/fav.png">
<script>
$(document).ready(function(){
$('#wait').hide();
$('#loading-wrap').hide();
});
function daftar(){
if(document.forms["formDaftar"].emailDaf.value==="")alert('Is
ikan Kolom Email')
else
if(document.forms["formDaftar"].passDaf.value==="")alert('Isikan
Kolom Password')
else
if(document.forms["formDaftar"].namaDaf.value==="")alert('Isikan
Kolom Nama')
else
if(document.forms["formDaftar"].idDaf.value==="")alert('Isikan
Kolom ID Dengan Angka')
else
if(document.forms["formDaftar"].tlpnDaf.value==="")alert('Isikan
Kolom Telepon Dengan Angka')
else
if(document.forms["formDaftar"].alamatDaf.value==="")alert('Isikan
Kolom Alamat')
else{
$('#wait').show();
$('#loading-wrap').show();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"User/daftar",
datatype : "json",
data: $("#formDaftar").serialize(),
success: function(data) {
if(data=="success"){
$("#myModalSuccess").modal();
$('#wait').hide();
document.forms["formDaftar"].emailDaf.value="";
document.forms["formDaftar"].passDaf.value="";
document.forms["formDaftar"].namaDaf.value="";
88
document.forms["formDaftar"].idDaf.value="";
document.forms["formDaftar"].alamatDaf.value="";
document.forms["formDaftar"].tlpnDaf.value="";
}else{
$("#myModalFail").modal();
$('#wait').hide();
}
}
});
}
}
</script>
</head>
<body>

<div class="row">
<div class="head-form ">Tours n Travel</div >
<div class="col-md-4 col-md-offset-4
custom-form">
<div class="login-img">
</div>
<hr class="uline">
<?php echo form_open("User/login");

?>
<div class="form-group">
<input type="text"
name="email" class="form-control form1" placeholder="Email">
addon igd"><i class="fa fa-user"></i></span>
</div>
</div>
<input type="password"
name="password" class="form-control form1" placeholder="Password">
addon igd"><i class="fa fa-lock"></i></span>
</div>
</div>
89
class="btn-block btn-login" name="submit" value="MASUK" />
</div>
</form>
<a href="#modalDaftar" data-

toggle="modal" data-target="#modalDaftar"
style="color:#3e3c3c">Daftar Sekarang </a>
</div>
</div>
</div>

<div class="modal fade" id="modalDaftar" tabindex="-1"

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<button type="button"
class="close"
data-dismiss="modal">
<span aria-
hidden="true">×</span>
<span class="sr-
only">Close</span>
</button>
<h4 class="modal-title"
id="myModalLabel">
Form Reegitrasi
</h4>
</div>
<div class="modal-body">
<form
id="formDaftar" action="" method="POST">
<div class="form-
group">
<input
type="text" name="emailDaf" class="form-control fc-form"
placeholder="Email" id="emailDaf"/>
</div>
<div class="form-
group">
<input
type="password" name="passDaf" class="form-control fc-form"
placeholder="Password" id="passDaf"/>
90
</div>
<div class="form-
group">
<input
type="text" name="namaDaf" class="form-control fc-form"
placeholder="Nama Lengkap" id="namaDaf"/>
</div>
<div class="form-
group">
<input
type="number" name="idDaf" class="form-control fc-form"
placeholder="No Identitas" id="idDaf"/>
</div>
<div class="form-
group">
<input
type="number" name="tlpnDaf" class="form-control fc-form"
placeholder="Telepon" id="tlpnDaf"/>
</div>
<div class="form-
group">
<textarea
name="alamatDaf" rows="6" class="form-control fc-form"
placeholder="Alamat " id="alamatDaf"></textarea>
</div>
</div>
<div class="modal-footer">
<button
onclick="daftar()" type="button" name="submit" class="btn btn-
success" data-dismiss="modal"/>SIMPAN</button>
<input type="reset"
name="reset" class="btn btn-danger" value="ULANG" />
</div>
</div>
</form>
</div>
</div>
</div>
<div id="loading-wrap">
<img src="<?=base_url()?>images/icon/loading-flat.gif"
id="wait" alt="Loading" />
</div>
91


<div class="modal fade" id="myModalSuccess" role="dialog" >
<div class="modal-dialog" >


<div class="modal-body custom-body">
<img align="center"
src="<?=base_url()?>images/icon/success.png" class="img-responsive
center-block" width="30%">
<h2 align="center">Berhasil</h2>
</div>
<button type="button" class="close"
OK
</button>
</div>
</div>
</div>
</div>


<div class="modal fade" id="myModalFail" role="dialog">


<img src="<?=base_url()?>images/icon/error.png"
style="width: 150px; height: 150px;" class="img-responsive center-
block">
<h2 align="center">Error!</h2>
<p align="center">Gagal Melakukan Aksi</p>
</div>
OK
</button>
</div>
</div>
92
</div>
</div>
</body>
</html>
Kode Program 4.34 Sintaks Tampilan Login User
Kode Program 4.34 merupakan sintak login user yang terdapat dalam
login.php. Login user terdapat informasi untuk profil pengguna sistem informasi
penyedia jasa travel dimana pengguna harus memasukkan email dan pasword.
4.1.3.4 Registrasi User

Registrasi user berfungsi untuk melakukan pendaftaran user. Berikut sintaks
untuk menampilkan registrasi user dapat dilihat pada Kode Program 4.35.
<div class="modal fade" id="modalDaftar" tabindex="-1"

dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Form Reegitrasi
</h4>
</div>
<form id="formDaftar" action=""

method="POST">
<input type="text" name="emailDaf"
class="form-control fc-form" placeholder="Email" id="emailDaf"/>
</div>
<input type="password" name="passDaf"
class="form-control fc-form" placeholder="Password" id="passDaf"/>
</div>
93
<input type="text" name="namaDaf"

class="form-control fc-form" placeholder="Nama Lengkap"
id="namaDaf"/>
</div>
<input type="number" name="idDaf"
class="form-control fc-form" placeholder="No Identitas"
id="idDaf"/>
</div>
<input type="number" name="tlpnDaf"
class="form-control fc-form" placeholder="Telepon" id="tlpnDaf"/>
</div>
<textarea name="alamatDaf" rows="6"
class="form-control fc-form" placeholder="Alamat "
id="alamatDaf"></textarea>
</div>
</div>
<button onclick="daftar()" type="button"
name="submit" class="btn btn-success" data-
dismiss="modal"/>SIMPAN</button>
<input type="reset" name="reset" class="btn
btn-danger" value="ULANG" />
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.35 Sintaks Tampilan Registrasi User
Kode Program 4.35 merupakan sintak registrasi user yang terdapat dalam
login.php. Registrasi user terdapat masukan yang harus diisi pengguna yaitu email
user, password, nama lengkap, nomor identitas, telepon, dan alamat.
4.1.3.5 Paket Jasa Travel

Tampilan paket jasa travel merupakan tampilan yang menyediakan beberapa
paket travel yang disajikan oleh sistem sehingga pengguna bisa memilih paket yang
94
tersedia. Berikut sintaks untuk menampilkan paket jasa travel dapat dilihat pada Kode
Program 4.36.
<body>
<?php
$title['title'] = 'Paket';
?>
<section>
<div class="overlay" style="background:rgba(0, 0, 0,
0.54);">
<div class="row">
<div class="col-lg-6 col-lg-offset-
3">
<h3 class="parallax-
title">paket trip</h3>
<p class="parallax-desc">temukan trip
mu dan ciptakan keseruan mu</p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
if( !empty($data)){
?>
<?php
foreach($data as $data){
?>
<div class="lbl-price">
IDR. <?=$data->harga_paket?> / Pack
</div>
<img src="<?=base_url()?>images/package/<?=$data-
>foto_paket?>" class="img-responsive">
<div class="desc-tp">
95
<h4 style="text-transform:
uppercase;"><?=$data->nama_paket?></h4><h4><?=$data->banyak_hari?>
Hari, <?=($data->banyak_malam)?$data->banyak_malam:"0"?> Malam</h4>
<p>
<?php if(strlen($data-
>deskripsi_paket)<80) echo $data->deskripsi_paket."<br><br>";
else echo substr($data-
>deskripsi_paket, 0, 80)."...";?>
</p>
<a
href="<?=base_url('DetPaket')?>/index/<?=$data->id_paket?>">Lihat
selengkapnya <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<?php
}
?>
</div>
</section>
<?php if (isset($links)) {
echo $links;
}
?>
<?php } else
{ ?>
<b><h3 style='opacity:0.5; text-
align:center; margin-top:50px'>TIDAK ADA PAKET YANG SESUAI</h3></b>
<br>
<a href="<?=base_url()?>"><b><h4
style='opacity:0.8; text-align:center;'>telusuri
lagi...</h4></b></a>
<?php } ?>
<section class="section-padd" style="padding-bottom:0;">

<div class="parallax-content" style="height: 360px;">
<div class="overlay clr" style="background: #eee;">
<h3>dapatkan diskon <r>20-30%</r> dari semua
paket kami</h3>
<p>pesan sekarang dan buat trip yang tak

terlupakan dengan harga spesial</p>
<div class="parallax-btn">
<a href="form-booking.html">pesan
sekarang</a>
</div>
</div>
</div>
</section>
96

});
</script>
</body>
</html>
Kode Program 4.36 Sintaks Tampilan Paket Travel
Kode Program 4.36 merupakan sintak tampilan paket travel yang terdapat
dalam paket.php. Paket travel terdapat informasi pemilihan paket yang menarik
kepada pengguna dan menyediakan diskon untuk melakukan pemesanan.
4.1.3.6 Deskripsi Paket

Tampilan deskripsi paket merupakan tampilan yang menjelaskan tentang
paket yang ingin pengguna ketahui. Tampilan deskripsi paket berisi tentang gambar
destinasi, tujuan destinasi, penginapan, dan berapa lama penginapan. Berikut sintaks
untuk menampilkan deskripsi paket jasa travel dapat dilihat pada Kode Program 4.37.
<body>
<?php
$title['title'] = 'Paket';
?>
<section>
url('<?=base_url()?>/images/M_bg.jpg'); height: 325px;">
0.54);">
<div class="row">
3">
97

</div>
</div>
</div>
</div>
</div>
</section>
<?php
foreach($data as $data)
?>
<div class="col-xs-12 bg-popular clear-padding">
<div class="col-lg-4" style="padding: 30px;">
<div class="popular-title">
<h3><?=$data->nama_paket?></h3>
<h4><?=$data->banyak_hari?> Hari <?=($data-
>banyak_malam)?$data->banyak_malam:"0"?> Malam</h4>
</div>
<div class="popular-item">
<p><i class="fa fa-
map"></i><strong>Destinasi trip :</strong>
<ul>
<?php
foreach($data_wisata as
$data_wisata){
?>
<a
href="<?=base_url('DetDestinasi')?>/index/<?=$data_wisata-
>id_wisata?>"><li class="link-dest"><?=$data_wisata-
>nama_tempat_wisata?></li></a>
<?php } ?>
</ul>
</p>
<p><i class="fa fa-map-
marker"></i><strong>Hotel :</strong>
<ul>
<?php
foreach($data_hotel as
$data_hotel){
?>
<a href=""><li
style="color:#fff"><?=$data_hotel->nama_hotel?></li></a>
<?php } ?>
</ul>
</p>
</div>
98
</div>

<div class="flexslider" style="margin:0;">
<ul class="slides">
<?php
foreach($data_wisata_foto as
$data_wisata_foto){
?>
<li><img
src="<?=base_url()?>images/top-destination/<?=$data_wisata_foto-
>foto_wisata?>" class="img-responsive"></li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div class="cd-title" style="padding-top:20px;

clear:both;">
<h3>deskripsi</h3>
</div>
<p class="text-center">
<?=$data->deskripsi_paket?>
</p>
</div>
</section>
src="<?=base_url()?>assets/js/jquery.flexslider-min.js"></script>
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
</body>
</html>
Kode Program 4.37 Sintaks Tampilan Deskripsi Paket
99
Kode Program 4.37 merupakan sintak tampilan deskripsi paket yang terdapat
dalam detail-paket.php. Deskripsi paket travel terdapat informasi mengenai paket
yang disediakan oleh sistem.
4.1.3.7 Destinasi Travel

Tampilan destinasi travel merupakan tampilan yang menjelaskan tentang
destinasi yang ada didalam sistem penyedia jasa travel. Tampilan destinasi travel berisi
tentang gambar destinasi. Berikut sintaks untuk menampilkan destinasi travel dapat
<body>
<?php
$title['title'] = 'Destinasi';
?>
<section>
0.54)";>
<div class="row">
3">
title">Destinasi</h3>
<p class="parallax-desc">ketahui
lebih banyak tentang tujuan perjalanan mu</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-padd" style="padding-bottom: 0;">

<div class="cd-title">
<h3>destinasi trip</h3>
100
</div>
<p class="text-center">There are several attractions

that are classified as popular places that are often visited.<br>
Here are some places - places that attract tourists with a variety
of spectacular views, <br>and you can capture a momentt of rare and
beautiful momentts.</p>
</div>
</section>
<?php
if( !empty($data)){
?>
<?php
?>
<div class="col-md-4" style="margin:30px 0 0px 0;">

<div class="contain">
<img src="<?=base_url()?>images/top-
destination/<?=$data->foto_wisata?>" class="img-responsive">
<div class="cars-overlay">
<div class="border1">
<div class="cars-desc">
<h3><?=$data-
>nama_tempat_wisata?></h3>
<hr class="new-hr">
</div>
</div>
</div>
</div>
<div class="desc-3tp">
<h3><?=$data->nama_tempat_wisata?></h3>
<p><?=$data->lokasi?></p>
<a
href="<?=base_url("DetDestinasi")?>/index/<?=$data-
>id_wisata?>">Lihat selengkapnya <i class="fa fa-angle-double-
right"></i></a>
</div>
</div>
<?php
}
101
?>
</div>
</section>
echo $links;
}
?>
<?php } else
{ ?>
<b><h3 style='opacity:0.5; text-
align:center; margin-top:50px'>TIDAK ADA WISATA YANG
SESUAI</h3></b> <br>
<a href="<?=base_url()?>"><b><h4
style='opacity:0.8; text-align:center;'>telusuri
lagi...</h4></b></a>
<?php } ?>

});
animation: "fade"
});
});
</script>
</body>
</html>
Kode Program 4.38 Sintaks Tampilan Destinasi Travel
Kode Program 4.38 merupakan sintak tampilan destinasi yang terdapat dalam
destinasi.php. Destinasi travel terdapat informasi beberapa destinasi yang
disediakan oleh sistem.
4.1.3.8 Deskripsi Destinasi

Tampilan deskripsi destinasi merupakan tampilan yang menjelaskan tentang
destinasi travel. Tampilan deskripsi destinasi berisi tentang gambar destinasi, tujuan
102
destinasi, dan Google Maps API. Berikut sintaks untuk menampilkan destinasi travel
<body>
<?php
$title['title'] = 'Destinasi';
?>
<section>
url('<?=base_url()?>/images/M_bg.jpg'); height: 325px;">
0.54);">
<div class="row">
3">
</div>
</div>
</div>
</div>
</div>
</section>
<?php
foreach($data as $data)
?>
<div class="col-xs-12 bg-popular clear-padding">
<div class="col-lg-4" style="padding: 30px;">
<div class="popular-title">
<h3><?=$data->nama_tempat_wisata?></h3>
<h4><?=$data->lokasi?></h4>
<h4 style="color:#fff"><?=$data-
>jenis_wisata?></h4>
</div>
<div class="popular-item">
<p><i class="fa fa-
map"></i><strong>Deskripsi Lokasi :</strong> <br>
<?=$data->deskripsi_wisata?>
103
</p>
</div>
</div>

<div class="flexslider" style="margin:0;">
<ul class="slides">
<li><img
src="<?=base_url()?>images/top-destination/<?=$data->foto_wisata?>"
class="img-responsive"></li>
</ul>
</div>
</div>
</div>
<div class="cd-title" style="padding-top:20px;

clear:both;">
<h3>Lokasi</h3>
</div>
<iframe width="100%" height="500" src="<?=$data-
>frame_peta?>" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</section>
});
animation: "fade"
});
});
</script>
</body>
</html>
Kode Program 4.39 Sintaks Tampilan Deskripsi Destinasi
104
Kode Program 4.39 merupakan sintak tampilan deskripsi destinasi yang

terdapat dalam detail-destinasi.php. Deskripsi destinasi travel terdapat informasi
berupa lokasi destinasi, gambar destinasi, dan deskripsi destinasi.
4.1.3.9 Pembayaran
Tampilan pembayaran untuk melakukan validasi pembayaran dimana
pengguna harus menginputkan kode booking dan menginputkan hasil pembayaran
yang nantinya akan dilakukan validasi oleh admin. Berikut sintaks untuk menampilkan
pembayaran dapat dilihat pada Kode Program 4.40.
<html>
<head>
<title>Pembayaran | Travel N Tour</title>
scale=1.0" />

/>
awesome.min.css" />

</head>

});
105
animation: "fade"
});
});
$('#wait').hide();
});
function cari(){
var id_book = $('#id_booking').val();
if(id_book==""){
alert("Masukan ID Booking");
}else{
$.ajax({
type: "GET",
url: "<?php echo base_url();
?>"+"Pembayaran/cari_booking/"+id_book,
dataType : "json",
if(data.data.length > 0){
if(data.data[0].status_pembayaran==2){
alert("Booking Telah
Dibayar");
}
else
if(data.data[0].status_cancle==1){
alert("Booking Telah
Dibatalkan");
}
else{
$("#nama_user").val(data.data[0].nama_user);
$("#id_book").val(data.data[0].id_booking);
$("#biaya_traveling").val(data.data[0].biaya_traveling);
106
if(data.data[0].biaya_tambahan==null)
$("#biaya_tambahan").val("0");
else
$("#biaya_tambahan").val(data.data[0].biaya_tambahan);
if(data.data[0].ket_biaya_tambahan==null)
$("#ket_biaya_tambahan").val("-");
else
$("#ket_biaya_tambahan").val(data.data[0].ket_biaya_tambahan);
$("#total").val(data.data[0].biaya_traveling);
else $("#total").val(
parseInt(data.data[0].biaya_traveling)+
parseInt(data.data[0].biaya_tambahan));
$('#wait').hide();
$('#loading-
wrap').hide();
$('#ModalBayar').modal();
}else{
alert("ID Booking tidak
ditemukan");
}
});
}
}
function pembayaran(){
if(document.forms["formPembayaran"].atas_nama.value==="")aler
t('Isikan Kolom Atas Nama');
else
if(document.forms["formPembayaran"].bukti.value==="")alert('Masukan
Bukti Pembayaran');
else{
$('#wait').show();
107
var form = new

FormData(document.getElementById("formPembayaran"));
form.append('bukti',$('#bukti')[0].files[0]);
form.append('atas_nama
',$('#atas_nama').val());
$.ajax({
type: "POST",
?>"+"Pembayaran/pembayaran",
mimeType: "multipart/form-data",
datatype : "json",
data: form,
contentType: false, // The content type
used when sending data to the server.
cache: false, // To unable request
pages to be cached
processData:false, // To send
DOMDocument or non processed data file it is set to false
success: function(msg) {
if(msg=="success"){
$("#ModalBayar").hide();
$('#wait').hide();
}else{
$('#wait').hide();
}
}
});
}
}
</script>
<body>
<div class="row">
<div class="head-form ">Pembayaran</div >
<div class="col-md-4 col-md-offset-4 custom-
form">
</div>
<hr class="uline">
108
<input type="text"
name="id_booking" id="id_booking" class="form-control form1"
placeholder="Cari ID booking ...">
<span class="input-group-addon
igd">ID</span>
</div>
</div>
<button class="btn-block btn-login"
name="cari" onclick="cari()" />CARI</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Kode Program 4.40 Sintaks Tampilan Pembayaran
Kode Program 4.40 merupakan sintak pembayaran yang terdapat dalam
pembayaran.php. Pembayaran terdapat informasi memasukkan kode booking untuk
melakukan inputan hasil pembayaran pemesanan.
4.1.3.10 Input Pembayaran

Tampilan input pembayaran untuk melakukan validasi pembayaran dimana
pengguna harus menginputkan foto pembayaran yang nantinya akan dilakukan validasi
oleh admin. Berikut sintaks untuk menampilkan input pembayaran dapat dilihat pada
Kode Program 4.41.
<div class="modal fade" id="ModalBayar" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel" aria-hidden="true">
<span aria-
<span class="sr-
only">Close</span>
</button>
109
id="myModalLabel" align="center">
Data Booking <b
id="HotelPaket"></b>
</h4>
</div>
<form id="dataBooking" action=""

method="POST">
<div class="input-
group">
<input
type="text" id="nama_user" class="form-control form1" readonly>
<span
class="input-group-addon igd"><i class="fa fa-user"
style="width:10px"></i></span>
</div>
</div>
<div class="input-
group">
<input
type="text" id="biaya_traveling" class="form-control form1"
readonly>
<span
class="input-group-addon igd"><i class="fa fa-usd"
</div>
</div>
<div class="input-
group">
<input
type="text" id="biaya_tambahan" class="form-control form1"
readonly>
<span
</div>
</div>
<div class="input-
group">
<textarea
id="ket_biaya_tambahan" class="form-control form1"
readonly></textarea>
<span
class="input-group-addon igd"><i class="fa fa-book"
110
</div>
</div>
<div class="input-
group">
<input
type="text" id="total" class="form-control form1" readonly>
<span
</div>
</div>
</div>
</form>
<form id="formPembayaran" action=""

method="POST" enctype="multipart/form-data">
<input type="hidden"
name="id_book" id="id_book">
<div class="input-
group">
<input
type="text" name="atas_nama" id="atas_nama" class="form-control
form1" placeholder="Atas Nama Pengirim">
<span
class="input-group-addon igd"><i class="fa fa-credit-
card"></i></span>
</div>
</div>
<label
style="color:#77707e">Bukti Transaksi</label>
<input type="file"
name="bukti" id="bukti">
<button
type="button" class="btn-block btn-login" name="kirim" id="kirim"
onclick="pembayaran()" style="margin-top:20px"/>KIRIM</button>
</div>
</div>
</form>
</div>
111
<div class="form-group"
id="load_hotel">
</div>
</div>
</div>
</div>
</div>
Kode Program 4.41 Sintaks Tampilan Input Pembayaran
Kode Program 4.41 merupakan sintak input pembayaran yang terdapat dalam
pembayaran.php. Input pembayaran terdapat informasi memasukkan hasil
pembayaran pemesanan.
4.1.3.11 Moment
Tampilan momentt untuk berisi informasi tentang moment yang terekam
dalam perjalanan travel. Berikut sintaks untuk menampilkan moment tour & travel
<body>
<?php
$title['title'] = 'Momentt';
?>
<section>
0.54);">
<div class="row">
3">
title">MOMENTT</h3>
<p class="parallax-desc">Momentt-
momentt terekan dalam setiap perjalanan kami</p>
</div>
</div>
</div>
</div>
</div>
</section>
112
<section style="clear:both;padding: 0; margin-bottom:50px">

<div class="row">
<section class="filter-section" style="padding:

0;">
<div class="filter-container isotopeFilters2">
<ul class="list-inline filter"
style="display:none;">
<li class="active"><a href="#" data-
filter="*">All </a><span>/</span></li>
<li><a href="#" data-
filter=".foto">Foto</a><span>/</span></li>
<li><a href="#" data-
filter=".video">Video</a></li>
</ul>
</div>
</section>
<section class="portfolio-section port-col" ">

<div class="isotopeContainer2">
<?php
if( !empty($data)){
?>
<div class="col-md-4 gallery-xs isotopeSelector

padd10 foto" style="margin-bottom:10px">
<article class="foto">
<figure>
<img
src="<?=base_url()?>images/momentt/<?=$data->foto_momentt?>"
alt="">
<div class="overlay-background">
<div class="inner"></div>
</div>
<div class="overlay">
<div class="inner-overlay">
<div class="inner-overlay-
content with-icons" width="80%">
<a title="Tour N Travel
Momentt" class="fancybox-pop" rel=""
href="<?=base_url()?>images/momentt/<?=$data->foto_momentt?>"><i
class="fa fa-search twhite"></i></a>
</div>
</div>
</div>
</figure>
<div class="clearboth"></div>
</article>
113
</div>
<?php }
}
?>
</div>
</section>
</div>
</div>
</section>

<script src="<?=base_url()?>assets/js/isotope.min.js"></script>
<script
src="<?=base_url()?>assets/js/jquery.fancybox.pack.js"></script>
});
</script>
</body>
</html>
Kode Program 4.42 Sintaks Tampilan Moment
Kode Program 4.42 merupakan sintak moment yang terdapat dalam
momentt.php. Moment terdapat informasi perjalanan yang telah dilakukan oleh sistem
jasa pelayanan travel.
4.1.3.12 Tentang Kami

Tampilan tentang kami merupakan tampilan yang menjelaskan tentang kami
sistem jasa pelayanan travel. Tampilan deskripsi paket berisi tentang bagaimana
terbentuk, jumlah karyawan, paket travel, dan tahun berdiri. Berikut sintaks untuk
menampilkan tentang kami jasa travel dapat dilihat pada Kode Program 4.43.
<body>
<?php
$title['title'] = 'Tentang';
?>
114
<section>
0.54)";>
<div class="row">
3">
title">Tentang Tour N Travels</h3>
<p class="parallax-desc">kenali tim
kami sebagai rekan traveling anda</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="col-lg-12 text-center">
<div class="company-title">
<h2>bagaimana kami <r>Berdiri</r></h2>
</div>
<div class="company-desc">
<p>Since 2017, the company is referred to
as a travel consultant company. This company has a duty as a
container in providing job opportunities with consultation and
selection of information that suits the needs of consumers. We also
provide suggestion options, including building relationships with
customers to be able to know their needs and desires. from this web
I provide a glimpse of how the travel company works by providing a
safe and good service.</p>
</div>
</div>
</div>
</section>
<section class="section-padd xs2" style="padding-top: 12em;">

<div class="company-wrapper" style="">
<img src="<?=base_url()?>images/profile.jpg"
class="company-img">
</div>
url('<?=base_url()?>images/profile.jpg'); height:340px;">
<div class="overlay company-list" style="background:
rgba(0, 0, 0, 0.8.8);">
<div class="container company-cover">
115
<div class="col-xs-3 xs1">

<h3>6</h3>
<p>Anggota Tim</p>
</div>

<h3>100</h3>
<p>Petulangan tercipta</p>
</div>

<h3>10</h3>
<p>Paket Trip Menarik</p>
</div>

<h3>2018</h3>
<p>Tahun Dimulai</p>
</div>
</div>
</div>
</div>
</section>
<div class="owl-carousel owl-theme" id="owl-about">
<div class="owls-item">
<div class="about-testi">
<img
src="<?=base_url()?>images/petik.png">
<p>For my part, I travel not to go
anywhere, but to go. I travel for travel’s sake. The great affair
is to move.</strong></p>
<h3>Robert Louis Stevenson</h3>

<h5>Traveller</h5>
</div>
</div>
<img
<p>We travel, some of us forever, to
seek other places, other lives, other souls.</p>
<h3>Anais Nin</h3>
<h5>Traveller</h5>
</div>
</div>
116
<img
<p>The gladdest momentt in human
life, me thinks, is a departure into unknown lands.</p>
<h3>Sir Richard Burton</h3>

<h5>Traveller</h5>
</div>
</div>
</div>
</div>
</section>

src="<?=base_url()?>assets/js/owl.carousel.min.js"></script>
})
animation: "fade"
});
});
$("#owl-about").owlCarousel({
autoplay:false,
dots:true,
items:1
});
});
</script>
</body>
</html>
Kode Program 4.43 Sintaks Tampilan Tentang Kami
Kode Program 4.43 merupakan sintak tentang sistem jasa pelayanan travel
yang terdapat dalam tentang.php. Tampilan tentang kami terdapat informasi
perjalanan terbentuknya sistem jasa pelayanan travel.
117
4.1.3.13 Kontak
Tampilan kontak merupakan tampilan yang menjelaskan tentang service jasa
travel. Tampilan kontak berisi tentang alamat kantor, layanan pelanggan, email, dan
Google Maps API. Berikut sintaks untuk menampilkan kontak jasa travel dapat dilihat
<body>
<?php
$title['title'] = 'Kontak';
?>
<section>
0.54)";>
<div class="row">
3">
title">Kontak</h3>
<p class="parallax-desc">kontak
kami</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-padd" style="padding-top: 100px;">

<div class="col-md-4 custom-ct">
<div class="icon-title">
<i class="fa fa-map-marker"></i>
</div>
<h3>Alamat Kantor</h3>
<p>Street Ratih Number #11, Sedang Village,
Abiansemal Badung</p>
</div>
118

<i class="fa fa-phone"></i>
</div>
<h3>Layanan Pelanggan</h3>
<p>007 312 124848</br>
(0361) 460224</p>
</div>

<i class="fa fa-envelope-o"></i>
</div>
<h3>Email</h3>
<p>tourntravel@service.com</p>
</div>
</div>
</section>
<div class="maps-canvas">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2345.859
3103324038!2d115.23416152569423!3d-
8.572004418048111!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1
s0x2dd23e80b85a7f31%3A0xb1d2e54f4e4fd228!2sJl.+Ratih+No.11%2C+Sedan
g%2C+Abiansemal%2C+Kabupaten+Badung%2C+Bali+80352!5e0!3m2!1sen!2sid
!4v1516884651867" width="100%" height="400" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
</section>
<div class="info-ct">
<h3>Kritik & Saran</h3>
<p><i class="fa fa-2x fa-angle-down"></i></p>
<p>Tulisankan pertanyaan, komentar, kritik, dan
saran mu</p>
<p>tim kami akan mencoba mejawab dengan
mengirmkan mu email. trimakasi</p>
</div>
<div class="col-lg-8 col-lg-offset-2">

<form action="#" method="post">
<div class="form-group col-md-6 clear-
padding">
control form-style" placeholder="Nama*">
</div>
119
<div class="form-group col-md-6 clear-

padding">
control form-style" placeholder="Alamat Email*">
</div>
<textarea type="text" class="form-
control style-msg" rows="6" placeholder="Pesan*"></textarea>
</div>
<button type="submit" class="btn-
send">KIRIM PESAN</button>
</form>
</div>
</div>
</section>

});
</script>
</body>
</html>
Kode Program 4.44 Sintaks Tampilan Kontak
Kode Program 4.44 merupakan sintak kontak yang terdapat dalam
kontak.php. Tampilan kontak terdapat informasi untuk melakukan pengecekan lokasi
lokasi perusahaan berada dan menyediakan formulir kritik dan saran.
4.1.3.14 Booking
Booking tampilan awal untuk melakukan pemesanan tiket travel. Tampilan
booking memiliki 3 tampilan untuk melakukan pemesanan dengan menggunakan
tampilan yang sama. Berikut sintaks untuk menampilkan dashboard dapat dilihat pada
Kode Program 4.45.
<body>
<?php
$title['title'] = 'Booking';
120
?>

src="<?=base_url()?>assets/plugins/sweetalert-
master/dist/sweetalert.min.js" ></script>
src="<?=base_url()?>assets/js/stepwizard.js" ></script>
src="<?=base_url()?>assets/js/jquery-ui.js" ></script>
function harga(){
var bpackage = [];
$.each($("input[name='check1']:checked"), function(){
bpackage.push($(this).val());
});
$.ajax({
type: "GET",
?>"+"booking/load_harga_paket/"+bpackage,
dataType : "json",
$("#harga").val(data[0].harga_paket);
}
});
}
$('#wait').hide();
$('#tombol').click(function() { //onclick untuk

melakukan CRUD ajax
var id_user = $('#id_user').val();

var nama = $('#bookName').val();
var email = $('#email').val();
var date = $('#tanggal').val();
var phone = $('#tlpn').val();
var msg = $('#msg').val();
var total_harga =
$('#grandTotalPk').val();
var pack = $('#bookAdult').val();
var bpackage = [];

121
});
if(pack==0){
alert("Masukan Banyak Pack !");
}else{
$('#wait').show();
$.ajax({
type: 'POST',
url: "<?php echo
base_url(); ?>"+"Booking/booking",
data: 'id_user=' +
id_user + '&email=' + email + '&tanggal=' + date + '&tlpn=' + phone
+ '&msg=' + msg + '&pk=' + bpackage + '&total_harga=' + total_harga
+ '&pack=' + pack,
if(msg=="success"){
$('#wait').hide();
}else{
$('#wait').hide();
}
}
})
}
});
})
function subCalPrice() { //function untuk

menghitung otomatis harga nantinya
122
//var sumSubPrice;
//var sumPriceAdult;
//var sumPriceChild;
var harga = $('#harga').val();

var bookAdult =
$('#bookAdult').val();
total = (bookAdult * harga)//hitung

untuk ditaruh di field Grand Total
$('#grandTotalPk').val(total);
}
$('#bookAdult').change(function() {
subCalPrice();
});
});
</script>
<section>
0.54);">
<div class="row">
3">
title">Booking</h3>
<p class="parallax-desc">Tentukan dan
Booking perjalanan mu disini</p>
</div>
</div>
</div>
</div>
</div>
</section>

<div class="stepwizard">
<div class="stepwizard-row setup-panel">
123
<div class="stepwizard-step col-md-4">

<a href="#step-1" type="button" class="btn
btn-danger btn-circle" >1</a>
<p align="center">Step 1</p>
</div>
btn-default btn-circle" disabled="disabled">2</a>
</div>
btn-default btn-circle" disabled="disabled">3</a>
</div>
</div>
</div>
</div>
function validateForm(){
var bpackage = [];
});
/*if(
$('#harga').val()==="",
$('#name').val()==="",
$('#email').val()==="",
$('#tanggal').val()==="",
$('#tlpn').val()==="")
{
alert("Warning! Please fill all
required feild!");
return false;
}*/
function isEmpty(bpackage){
alert("Warning! Please fill all
required feild!");
return false;
}
return true;
}
</script>

<form action="" name="frm" id="frm" method="post" role="form"
style="margin-bottom:20px;">
<input type="hidden" name="id_user" id="id_user"

value="<?=$this->session->userdata('id_user')?>"/>
124

<div class="setup-content" id="step-1">

<h1>STEP 1</h1>
<p>Klik nama Paket untuk memilih paket</p>
</div>
<?php
if( !empty($data)){
?>
<div class='col-md-
4 pull-width' style="margin-top:30px">
<div
class="lbl-price" style="position:relative">
IDR.
<?=$data->harga_paket?> / Pack <br> <?=$data->banyak_hari?> Hari,
<?=($data->banyak_malam)?$data->banyak_malam:"0"?> Malam
</div>
<img
src='<?=base_url()?>/images/package/<?=$data->foto_paket?>'
class="img-responsive img-check" style="opacity:0.4"/>
<button
type="button" class="btn btn-danger btn-check" style="width:100%;
text-transform: uppercase;"><h4><b><?=$data-
>nama_paket?></b></h4></button>
<input
type="checkbox" id="check1" name="check1" class="myCheckbox hidden"
value="<?=$data->id_paket?>" required>
</div>
<?php
}
}
?>
</div>
</section>
echo $links;
}
?>
125
$('.myCheckbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false)
});
});
$(function(){
$('.btn-check').click(function(e){
$('.btn-
check').not(this).removeClass('active')
.siblings('input').prop('checked',false)
.siblings('.img-
check').css('opacity','0.4')
$(this).addClass('active')
.siblings('input').prop('checked',true)
.siblings('.img-
check').css('opacity','1')
harga();
});
});
</script>
<div class="col-xs-12" style="margin:20px 0
10px;">
<button type="button" class="btn btn-prev
prevBtn pull-left"><i class="fa fa-angle-double-left"></i>
Prev</button>
<button type="button" class="btn btn-next
nextBtn pull-right" onclick="return validateForm()">Next <i
class="fa fa-angle-double-right"></i></button>
</div>
</div>


<div class="col-xs-12"><h1>STEP 2</h1></div>
<div class="col-md-4 screen78">
<label class="control-label">Nama
Pembooking</label>
<input type="text" name="name"
id="bookName" class="form-control" placeholder="Your Name"
126
required="required" readonly value="<?=$this->session-

>userdata('user')?>"/>
</div>
<label class="control-
label">Email</label>
<input type="email" name="email"
id="email" class="form-control" placeholder="Your Email" readonly
value="<?=$this->session->userdata('email')?>"/>
</div>
</div>

<label class="control-label">Tanggal
Travelling</label>
<input type="text" name="tanggal"
id="tanggal" class="form-control" placeholder="Date"
required="required" />
</div>
<label class="control-
label">Telepon</label>
<input type="text" name="tlpn"
id="tlpn" class="form-control" placeholder="Your Phone" readonly
value="<?=$this->session->userdata('tlpn')?>"/>
</div>
</div>
<div class="col-md-4 screen77" style="margin-
bottom:20px;">
<label>Permintaan Spesial</label>
<textarea type="text" name="msg"
id="msg" rows="5" class="form-control"
placeholder="Note..."></textarea>
</div>
<button type="button" onclick="return
validateForm()" class="btn btn-next nextBtn pull-right">Next <i
class="fa fa-angle-double-right"></i></button>
</div>
</div>


<div class="col-sm-12"><h1>STEP 3</h1></div>

<label class="control-label">Banyak
Orang</label>
<input type="number" id="bookAdult"
name="banyak_orang" class="form-control" value="0" required />
127
</div>
</div>

<label class="control-label">Harga
Per Pack</label>
<input type="text" id="harga"
name="harga" class="form-control size_control" readonly>
</div>
</div>

<label class="control-label">Total
Harga</label>
<input type="number"
id="grandTotalPk" class="form-control size_control" readonly
style="font-size:50px; height:70px;" value="0">
</div>
</div>
<button type="submit" id="tombol"
class="btn btn-warning btn-book pull-right" style="width:100%;font-
size:30px;">BOOK NOW</button>
</div>
<div class="col-md-12" style="margin-

bottom:20px;">
<button type="button" class="btn btn-prev
prevBtn pull-left"><i class="fa fa-angle-double-left"></i>
Prev</button>
</div>
</div>
</form>
</div>
</section>
<div id="loading-wrap">
<img src="images/icon/loading-flat.gif" id="wait"
alt="Loading" />
</div>

128

<img align="center"
<h2 align="center">Berhasil</h2>
</div>
<a href="<?=base_url()?>">
<button type="button" class="close">
OK
</button>
</div>
</div>
</div>
</div>


</div> -->
block">
</div>
OK
</button>
</div>
</div>
</div>
</div>

129
$("#tanggal").datepicker({
dateFormat : "yy-mm-dd",
minDate : 5,
showOtherMonths : true,
selectOtherMonths : true
});
});
});
</script>
</body>
</html>
Kode Program 4.45 Sintaks Tampilan Booking
Kode Program 4.45 merupakan sintak booking yang terdapat dalam
booking.php. Tampilan booking terdapat informasi untuk melakukan pemesanan
dengan beberapa langkah yang dibagi menjadi 3 langkah.
4.1.3.15 Rancangan Perjalanan

Tampilan rancangan perjalanan merupakan tampilan pemesanan tiket travel.
Rancangan perjalanan berfungsi untuk menampilkan informasi pemesanan travel dan
bisa juga melakukan pembayaran yang sudah disediakan oleh sistem pada tombol
sebalah kanan. Berikut sintaks untuk menampilkan rancangan perjalanan dapat dilihat
<body>
<?php
$title['title'] = 'User';
?>
<script>
function cari(id_book){
130
$.ajax({
type: "GET",
?>"+"Pembayaran/cari_booking/"+id_book,
dataType : "json",
$("#nama_user").val(data.data[0].nama_user);
$("#id_book").val(data.data[0].id_booking);
$("#biaya_traveling").val(data.data[0].biaya_traveling);
$("#biaya_tambahan").val("0");
else
$("#biaya_tambahan").val(data.data[0].biaya_tambahan);
if(data.data[0].ket_biaya_tambahan==null)
$("#ket_biaya_tambahan").val("-");
else
$("#ket_biaya_tambahan").val(data.data[0].ket_biaya_tambahan);
$("#total").val(data.data[0].biaya_traveling);
else $("#total").val(
parseInt(data.data[0].biaya_traveling)+
parseInt(data.data[0].biaya_tambahan));
$('#wait').hide();
$('#ModalBayar').modal();
});
}
function pembayaran(){
if(document.forms["formPembayaran"].atas_nama.value==="")aler
t('Isikan Kolom Atas Nama');
else
if(document.forms["formPembayaran"].bukti.value==="")alert('Masukan
Bukti Pembayaran');
else{
$('#wait').show();
131
var form = new

FormData(document.getElementById("formPembayaran"));
form.append('bukti',$('#bukti')[0].files[0]);
form.append('atas_nama
',$('#atas_nama').val());
$.ajax({
type: "POST",
?>"+"Pembayaran/pembayaran",
mimeType: "multipart/form-data",
datatype : "json",
data: form,
contentType: false, // The content type
used when sending data to the server.
cache: false, // To unable request
pages to be cached
processData:false, // To send
DOMDocument or non processed data file it is set to false
if(msg=="success"){
$("#ModalBayar").hide();
$('#wait').hide();
}else{
$('#wait').hide();
}
}
});
}
}
</script>
<section class="content">
<div class="box">
<div class="box-header">
<h3 align="center" style="margin: 140px 0 50px
0"><B>RENCANA PERJALANAN </B></h3>
</div>
<div class="box-body">
<div class="table-responsive">
<table id="table_booking" class="table">
132
<thead>
<tr>
<th>ID Booking</th>
<th>Banyak Traveller</th>
<th>Tanggal Booking</th>
<th>Nama Paket</th>
<th>Tanggal Travelling</th>
<th>Permintaan Spesial</th>
<th>Biaya Travelling</th>
<th>Biaya Tambahan</th>
<th>Ket Biaya Tambahan</th>
<th>Status Pembayaran</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="dataHotel">
<?php
$no =1;
if( !empty($data)){
?>
<tr>
<td><?=$data->id_booking?></td>
<td><?=$data->banyak_traveler?></td>
<td><?=$data->tgl_booking?></td>
<td><?=$data->nama_paket?></td>
<td><?=$data->tgl_traveling?></td>
<td><?=($data->permintaan_spesial)?$data-
>permintaan_spesial:"-"?></td>
<td><?=$data->biaya_traveling?></td>
<td><?=($data->biaya_tambahan)?$data-
>biaya_tambahan:"0"?></td>
<td><?=($data->ket_biaya_tambahan)?$data-
>ket_biaya_tambahan:"-"?></td>
<td>
<?php if($data-
>status_cancle==1){
echo "";
}else{
if($data-
>status_pembayaran==1){
echo
"<br>Lunas";
}else if ($data-
>status_pembayaran==0){
echo
"<br>Menunggu";
}else{
echo
"<br>Belum dibayar";
}
133
?>
</td>
<td>
<?php if($data->status_cancle){
echo
"<b><br>DIBATALKAN</b>";
}else if($data-
>status_pembayaran==0){ ?>
<br><button type='button'
onclick='cancel(<?=$data->id_booking?>)' name='cancel' class='btn
btn-danger'><i class='fa fa-ban'
title='Pembatalan'></i></button><br><br>
<?php }else if($data-
>status_pembayaran==1){ ?>
<?php }else{ ?>
<button type='button'
onclick='edit_data(<?=$data->id_booking?>)' name='cancel'
class='btn btn-primary'><i class='fa fa-table' title='Ganti
Tanggal'></i></button><br><br>
<button class="btn btn-
success" name="bayar" onclick="cari(<?=$data->id_booking?>)" /><i
class='fa fa-credit-card' title='Pembayaran'></i></button><br><br>
<?php } ?>
</td>
</tr>
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</section>
134
<div class="modal fade" id="ModalBayar" tabindex="-1" role="dialog"

<span aria-
<span class="sr-
only">Close</span>
</button>
id="myModalLabel" align="center">
Data Booking <b
</h4>
</div>
<form id="dataBooking" action=""

method="POST">
<div class="input-
group">
<input
type="text" id="nama_user" class="form-control form1" readonly>
<span
class="input-group-addon igd"><i class="fa fa-user"
</div>
</div>
<div class="input-
group">
<input
type="text" id="biaya_traveling" class="form-control form1"
readonly>
<span
</div>
</div>
<div class="input-
group">
<input
type="text" id="biaya_tambahan" class="form-control form1"
readonly>
135
<span
</div>
</div>
<div class="input-
group">
<textarea
id="ket_biaya_tambahan" class="form-control form1"
readonly></textarea>
<span
class="input-group-addon igd"><i class="fa fa-book"
</div>
</div>
<div class="input-
group">
<input
type="text" id="total" class="form-control form1" readonly>
<span
</div>
</div>
</div>
</form>
<form id="formPembayaran" action=""

name="id_book" id="id_book">
<div class="input-
group">
<input
type="text" name="atas_nama" id="atas_nama" class="form-control
form1" placeholder="Atas Nama Pengirim">
<span
class="input-group-addon igd"><i class="fa fa-credit-
card"></i></span>
</div>
</div>
<label
style="color:#77707e">Bukti Transaksi</label>
<input type="file"
name="bukti" id="bukti">
136
<button
type="button" class="btn btn-danger" name="kirim" id="kirim"
onclick="pembayaran()" style="margin-top:20px; width:100%;
background-color:f0565a;"/>KIRIM</button>
</div>
</div>
</form>
</div>
<div class="form-group"
id="load_hotel">
</div>
</div>
</div>
</div>
</div>


<img align="center"
<h2 align="center"
style="color:#232323">BERHASIL</h2>
<h5 align="center" style="color:#77707e">Apabila
bukti pembayaran telah divalidasi oleh admin<br>maka voucer akan
dikirimkan ke email anda</h5>
</div>
<a href="<?=base_url("User/profil/")?><?=$this-
>session->userdata('id_user')?>">
<button type="button" class="close">
OK
</button>
</div>
</div>
</div>
137
</div>


</div> -->
block">
</div>
OK
</button>
</div>
</div>
</div>
</div>

});
</script>
</body>
</html>
Kode Program 4.46 Sintaks Rencana Perjalanan Pelanggan
Kode Program 4.46 merupakan sintak profil perjalanan pernguna yang
terdapat dalam profil.php. Sintak ini teridiri dari tabel yang berisi tentang deskripsi
pemesanan travel dan tombol aksi pemesanan.
138
4.1.3.16 Login Admin

Login admin tampilan untuk melakukan login oleh admin. Login admin
berfungsi untuk menampilkan sistem penyedia jasa travelling. Berikut sintaks untuk
menampilkan login dapat dilihat pada Kode Program 4.47.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />

/>
awesome.min.css" />

</head>
<body>

<div class="col-md-4 col-md-offset-4 custom-form">
<h1 style="font-family: Pacifico;">Tour N
Travel</h1>
</div>
<h4 align="center">Admin Login Here!</h4>

<hr class="uline">
<?php echo form_open("Admin/login"); ?>

<input type="text" name="username"
class="form-control form1" placeholder="Username">
igd"><i class="fa fa-user"></i></span>
</div>
</div>
139
<input type="password"
name="password" class="form-control form1" placeholder="Password">
igd"><i class="fa fa-lock"></i></span>
</div>
</div>
<input type="submit" class="btn-block btn-
login" name="submit" value="LOGIN" />
</div>
</form>
</div>
</div>
</body>
</html>
Kode Program 4.47 Sintaks Tampilan Login Admin
Kode Program 4.47 merupakan sintak login admin yang terdapat dalam
index.php. Login admin terdapat informasi untuk profil admin sistem informasi
penyedia jasa travel dimana pengguna harus memasukkan email dan pasword.
4.1.3.17 Dashboard Admin

Dashboard admin tampilan awal apabila telah melakukan login. Dashboard
admin berfungsi untuk menampilkan pengaturan di dashboard website. Berikut sintaks
untuk menampilkan dashboard admin dapat dilihat pada Kode Program 4.48.
<?php
$title['title'] = 'Dashboard';
$this->load->view('header-admin',$title);
?>
<div style="font-size:100px; text-align:center;
margin:50px; font-family: Pacifico;">Tour & Travel</div>
<div class="box">
<h2><b>Trip Berikutnya
</b><small>Overview</small></h2>
</div>
<div class="row">
<?php
140
if( !empty($data)){
foreach($data as
$data){
?>
<div class="col-md-
12 book">
<b
style="font-size:20px">Trip <?=$data->tgl_traveling?></b><br>
Paket
<b><?=$data->nama_paket?></b> - <?=$data->banyak_traveler?>
Orang<br>
Oleh :
<?=$data->nama_user?><br>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Kode Program 4.48 Sintaks Tampilan Dashboard Admin
Kode Program 4.48 merupakan sintak dashboard admin yang terdapat dalam
dashboard.php. Dashboard admin berisi informasi perjalanan wisata dalam kurang
dari 7 hari sehingga pihak admin mengetahui akan mempersiapkan perjalanan.
4.1.3.18 Data Hotel

Tampilan data hotel berfungsi untuk menampilkan informasi hotel pada
setiap destinasi wisata. Berikut sintak untuk menampilkan data hotel dapat dilihat pada
Kode Program 4.49.
<div class="page-wrapper">
<div class="page-header">
<h3>Data Hotel <small>Data Hotel</small></h3>
141
</div>
<ul class="breadcrumb">
<li><a href='<?php echo base_url("Hotel"); ?>'>View
Data</a></li>
<li><a href=''>Tambah Content</a></li>
<li><a href=''>Edit Content</a></li>
<li><a href=''>Hapus Content</a></li>
</ul>
<div style="color: red;"><?php echo validation_errors();

?></div>
<div class="box">
<h3>Data Hotel <small>Overview</small></h3>
</div>
<table id="table_content" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Hotel</th>
<th>Alamat Hotel</th>
<th>Telepon Hotel</th>
<th>Biaya Per Malam</th>
<th>Aksi</th>
</tr>
</thead>
<?php
$no =1;
if( !empty($data)){
?>
<tr>
<td><?=$no?></td>
<td><?=$data->nama_hotel?></td>
<td><?=$data->alamat_hotel?></td>
<td><?=$data->tlpn_hotel?></td>
<td><?=$data->biaya_permalam?></td>
<td>
onclick="edit_data(<?=$data->id_hotel?>)" name="edit" class="btn
btn-primary"><i class="fa fa-edit" title="Edit"></i></button>
142
onclick="hapus_data(<?=$data->id_hotel?>)" name="hapus" class="btn
btn-danger"><i class="fa fa-trash" title="hapus" ></i></button>
</td>
</tr>
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>
`<button type="button" data-toggle="modal" data-

target="#ModalTambah" name="tambah" class="btn btn-primary btn-
lg"/>Tambah Data</button>
</div>
</section>
Kode Program 4.49 Sintak Tampilan Data Hotel
Kode Program 4.49 merupakan sintak data hotel yang terdapat dalam
data_hotel.php. Data hotel menggunakan tabel yang berisi data hotel serta berisikan
aksi untuk melakukan pengaturan data hotel.
4.1.3.19 Edit Data Hotel

Tampilan edit data hotel berfungsi untuk melakukan perubahan dari data hotel
apabila admin membuka fungsi edit data hotel. Berikut sintaks untuk menampilkan
data hotel dapat dilihat pada Kode Program 4.50.
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog"

143
</button>
Form Edit Data Hotel
</h4>
</div>
<form id="formedit" action=""

method="POST">
name="idED" id="idED" />
<label
style="color:#3e3c3c">Nama Hotel</label>
<input type="text"
name="namaED" class="form-control fc-form" placeholder="Nama Hotel"
id="namaED" />
</div>
<label
style="color:#3e3c3c">Alamat Hotel</label>
<textarea name="alamatED"
rows="6" class="form-control fc-form" placeholder="Alamat Hotel"
id="alamatED" ></textarea>
</div>
<label
style="color:#3e3c3c">Telepon Hotel</label>
<input type="text"
name="tlpnED" class="form-control fc-form" placeholder="Telepon
Hotel" id="tlpnED" />
</div>
<label
style="color:#3e3c3c">Biaya Per Malam</label>
name="biayaED" class="form-control fc-form" placeholder="Biaya Per
Malam" id="biayaED" />
</div>
</div>
<button onclick="update_data()"
type="button" name="update" class="btn btn-success" data-
dismiss="modal">SIMPAN</button>
144
<input type="reset" name="reset"

class="btn btn-danger" value="ULANG" />
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.50 Sintak Tampilan Edit Data Hotel
Kode Program 4.50 merupakan sintak edit data hotel yang terdapat dalam
data_hotel.php. Edit data hotel menggunakan tabel yang berisi deskripsi data hotel
yang dipilih dan dilakukan edit data hotel.
4.1.3.20 Tambah Data Hotel

Tampilan tambah data hotel berfungsi untuk melakukan pertambahan data
hotel yang bekerja sama dengan jasa pelayanan travel. Berikut sintak untuk
menampilkan tambah data hotel dapat dilihat pada Kode Program 4.51.
<div class="modal fade" id="ModalTambah" tabindex="-1"

</button>
Form Tambah Data Hotel
</h4>
</div>
<form id="formTambah" action=""

method="POST">
<input type="text"
name="nama" class="form-control fc-form" placeholder="Nama Hotel"
id="nama"/>
</div>
145
<textarea name="alamat"
rows="6" class="form-control fc-form" placeholder="Alamat Hotel"
id="alamat"></textarea>
</div>
<input type="text"
name="tlpn" class="form-control fc-form" placeholder="Telepon
Hotel" id="tlpn"/>
</div>
name="biaya" class="form-control fc-form" placeholder="Biaya Per
Malam" id="biaya"/>
</div>
</div>
<button onclick="tambah_data()"
type="button" name="submit" class="btn btn-success" data-
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.51 Sintak Tampilan Tambah Data
Kode Program 4.51 merupakan sintak tambah data hotel yang terdapat dalam
data_hotel.php. Tambah data hotel menggunakan formulir untuk mengisi data
lengkap hotel yang nantinya admin dapat memilih hotel yang disewa untuk penginapan
traveller.
146
4.1.3.21 Data Wisata

Tampilan data wisata berfungsi untuk menampilkan informasi deskripsi
destinasi wisata beserta harga tiket. Berikut sintaks untuk menampilkan data wisata
<h3>Data Wisata <small>Data Wisata</small></h3>
</div>
<li><a href='<?php echo base_url("Wisata"); ?>'>View
Data</a></li>
<li><a href=''>Tambah konten</a></li>
<li><a href=''>Edit konten</a></li>
</ul>

?></div>
<div class="box">
<h3>Data Wisata <small>Overview</small></h3>
</div>
<thead>
<tr>
<th>No</th>
<th>Nama Wisata</th>
<th>Lokasi Wisata</th>
<th>Jenis Wisata</th>
<th>Harga Tiket</th>
<th>Deskripsi Wisata</th>
<th>Foto Wisata</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="dataWisata">
<?php
$no =1;
if( !empty($data)){
147
?>
<tr>
<td><?=$no?></td>
<td><?=$data->nama_tempat_wisata?></td>
<td><?=$data->lokasi?></td>
<td><?=$data->jenis_wisata?></td>
<td><?=$data->harga_tiket?></td>
<td><?=$data->deskripsi_wisata?></td>
<td><img src="<?=base_url()?>images/top-
destination/<?=$data->foto_wisata?>" width="230px"
height="200px"></td>
<td>
onclick="edit_data(<?=$data->id_wisata?>)" name="edit" class="btn
</td>
</tr>
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>

</div>
</section>
<div>
Kode Program 4.52 Sintaks Tampilan Data Wisata
Kode Program 4.52 merupakan sintak data wisata yang terdapat dalam
data_wisata.php. Data wisata menggunakan tabel yang berisi data wisata serta
berisikan aksi untuk melakukan edit data wisata.
148
4.1.3.22 Edit Data Wisata

Tampilan edit data wisata berfungsi untuk melakukan perubahan dari data
wisata apabila admin membuka fungsi edit pada salah satu data wisata. Berikut sintak
untuk menampilkan data wisata dapat dilihat pada Kode Program 4.53.

</button>
Form Edit Data Wisata
</h4>
</div>

<label
style="color:#3e3c3c">Nama Wisata</label>
<input type="text"
name="namaED" class="form-control fc-form" placeholder="Nama
Wisata" id="namaED"/>
</div>
<label
style="color:#3e3c3c">Lokasi</label>
<textarea name="lokasiED"
rows="6" class="form-control fc-form" placeholder="Lokasi Wisata"
id="lokasiED"></textarea>
</div>
<label
style="color:#3e3c3c">Jenis Wisata</label>
149
<select name="jenisED"
rows="6" class="form-control" id="jenisED">
</select>
style="margin:6px 0 0 0;" data-dismiss="modal" data-toggle="modal"
data-target="#ModalTambahJenis" name="tambahjenis" id="tambahjenis"
class="btn btn-primary"/>+</button>
</div>
<label
style="color:#3e3c3c">Gmap Link</label>
<input type="text"
name="mapED" class="form-control fc-form" placeholder="GMap Link"
id="mapED"/>
</div>
<label
style="color:#3e3c3c">Harga Tiket</label>
name="hargaED" class="form-control fc-form" placeholder="Harga
Tiket" id="hargaED"/>
</div>
<label
style="color:#3e3c3c">Deskripsi Wisata</label>
<textarea
name="deskripsiED" rows="6" class="form-control fc-form"
placeholder="Tentang Wisata" id="deskripsiED"></textarea>
</div>
<label
style="color:#3e3c3c">Foto Wisata</label><br>
<img src=""
id="image_lama" width="100">
<input name="file_lama"
type="text" id="file_lama" hidden>
<input type="file"
name="fotoED" class="form-control-file fc-form" id="fotoED"/>
</div>
</div>
150

</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.53 Sintaks Edit Data Wisata
Kode Program 4.53 merupakan sintak edit data wisata yang terdapat dalam
data_wisata.php. Edit data wisata menggunakan tabel yang berisi data hotel yang
dipilih yang berisikan deskripsi data hotel yang akan dilakukan edit data dan juga
berisikan inputan tambahan data jenis wisata.
4.1.3.23 Tambah Data Jenis Wisata

Tampilan tambah jenis wisata berfungsi untuk melakukan pertambahan data
jenis wisata sehingga admin dapat mengelompokkan jenis wisata. Berikut sintak untuk
menampilkan tambah data jenis wisata dapat dilihat pada Kode Program 4.54.
<div class="modal fade" id="ModalTambahJenis" tabindex="-2"

</button>
Form Tambah Data Jenis Wisata
</h4>
</div>
<form id="formTambahJenis"
action="" method="POST">
151
<input type="text"
name="namajeniswisata" class="form-control fc-form"
placeholder="Nama Jenis Wisata" id="namajeniswisata"/>
</div>
</div>
<button onclick="tambah_data_jenis()"
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.54 Sintaks Tampilan Tambah Data Jenis Wisata
Kode Program 4.54 merupakan sintak tambah data jenis wisata yang terdapat
dalam data_wisata.php. Tambah data jenis wisata menggunakan formulir yang
hanya terdiri satu kolom yang berisi jenis wisata sehingga setiap wisata dikelompokkan
pada jenis wisata.
4.1.3.24 Tambah Data Wisata

Tampilan tambah wisata berfungsi untuk melakukan pertambahan wisata
yang terbaru untuk sistem jasa pelayanan travel sehingga semakin banyak pilihan
wisata yang dapat dinikmati oleh pelanggan. Berikut sintak untuk menampilkan
tambah data wisata dapat dilihat pada Kode Program 4.55.

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="overflow:auto;">
152
</button>
Form Tambah Data Wisata
</h4>
</div>

<input type="text"
name="nama" class="form-control fc-form" placeholder="Nama Wisata"
id="nama"/>
</div>
<textarea name="lokasi"
rows="6" class="form-control fc-form" placeholder="Lokasi Wisata"
id="lokasi"></textarea>
</div>
<select name="jenis"
rows="6" class="form-control" id="jenis">
<?php
if(
!empty($data_jenis)){
foreach($data_jenis
as $data_jenis){
?>
<option
value="<?=$data_jenis->id_jenis_wisata?>">
<div
id="jenisP"><?=$data_jenis->jenis_wisata?></div>
</option>
<?php
}
}
?>
</select>
style="margin:6px 0 0 0;" data-toggle="modal" data-
target="#ModalTambahJenis" name="tambahjenis" class="btn btn-
primary"/>+</button>
</div>
<input type="text"
name="map" class="form-control fc-form" placeholder="GMap Link"
id="map"/>
153
</div>
name="harga" class="form-control fc-form" placeholder="Harga Tiket"
id="harga"/>
</div>
<textarea
name="deskripsi" rows="6" class="form-control fc-form"
placeholder="Tentang Wisata" id="deskripsi"></textarea>
</div>
<input type="file"
name="foto" class="form-control-file fc-form" id="foto"/>
</div>
id="simpan" type="button" name="simpan" class="btn btn-success"
data-dismiss="modal"/>SIMPAN</button>
</div>
</div>
</form>
</div>
</div>
</div>

<div class="modal fade" id="ModalTambahJenis" tabindex="-2"

</button>
Form Tambah Data Jenis Wisata
</h4>
154
</div>
<form id="formTambahJenis"
<input type="text"
name="namajeniswisata" class="form-control fc-form"
placeholder="Nama Jenis Wisata" id="namajeniswisata"/>
</div>
</div>
<button onclick="tambah_data_jenis()"
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.55 Sintaks Tampil Tambah Data Wisata
Kode Program 4.55 merupakan sintak tambah data wisata yang terdapat
dalam data_wisata.php. Tambah data wisata menggunakan formulir untuk mengisi
data lengkap wisata terbaru yang nantinya admin dapat memilih wisata yang dapat
dipilih oleh pelanggan.
4.1.3.25 Data Paket Wisata
Tampilan data paket wisata berfungsi untuk menampilkan informasi deskripsi
paket destinasi wisata beserta harga tiket. Berikut sintaks untuk menampilkan data
paket wisata dapat dilihat pada Kode Program 4.56.
</div>
155
<li><a href='<?php echo base_url("Paketdata"); ?>'>View
Data</a></li>
</ul>

?></div>
<div class="box">
<h3>Data Wisata <small>Overview</small></h3>
</div>
<thead>
<tr>
<th>No</th>
<th>Nama Paket</th>
<th width="3%">Banyak Hari</th >
<th width="3%">Banyak Malam</th>
<th>Harga Paket</th>
<th>Deskripsi Paket</th>
<th>Foto Paket</th>
<th width="10%">Aksi</th>
</tr>
</thead>
<tbody id="DataPaket">
<?php
$no =1;
if( !empty($data)){
echo "<script
type='text/javascript'>
var harga =
".substr($data->total_harga_paket,0,-5)."
var id =
".$data->id_paket."
update_harga_paket(id,harga);
</script>";
?>
156
<tr>
<td><?=$no?></td>
<td><?=$data->banyak_hari?></td>
<td><?=$data->banyak_malam?></td>
<td><?=($data-
>total_harga_paket)?substr($data->total_harga_paket,0,-5):"Wisata
Tujuan / Hotel Menginap Belum Ditentukan"?></td>
<td><?=$data->deskripsi_paket?></td>
<td><img
src="<?=base_url()?>images/package/<?=$data->foto_paket?>"
width="230px" height="200px"></td>
<td>
onclick="edit_data(<?=$data->id_paket?>)" name="edit" class="btn
onclick="hapus_data(<?=$data->id_paket?>)" name="hapus" class="btn
btn-danger"><i class="fa fa-trash" title="hapus" ></i></button>
<br>
onclick="wisata(<?=$data->id_paket?>)" name="wisata" class="btn
btn-success"><i class="fa fa-map" title="wisata" ></i></button>
onclick="hotel(<?=$data->id_paket?>)" name="hotel" class="btn btn-
info"><i class="fa fa-h-square " title="hotel" ></i></button>
</td>
</tr>
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>

</div>
</section>
Kode Program 4.56 Sintaks Tampilan Data Paket Wisata
Kode Program 4.56 merupakan sintak data paket wisata yang terdapat dalam
data_paket.php. Data paket wisata menggunakan tabel yang berisi data paket wisata
157
serta berisikan aksi untuk melakukan edit data paket wisata. Tampilan paket wisata
memiliki 4 aksi yang dapat digunakan oleh admin untuk edit dan menghapus paket.
4.1.3.26 Edit Data Paket Wisata

Tampilan edit data paket wisata berfungsi untuk melakukan perubahan dari
data paket wisata apabila admin membuka fungsi edit pada salah satu data paket wisata.
Berikut sintak untuk menampilkan data paket wisata dapat dilihat pada Kode Program
4.57.

</button>
Form Edit Data Paket
</h4>
</div>

<label
style="color:#3e3c3c">Nama Paket</label>
<input type="text"
name="namaED" class="form-control fc-form" placeholder="Nama Paket"
id="namaED"/>
</div>
<label
style="color:#3e3c3c">Lama Hari</label>
158
name="hariED" class="form-control fc-form" placeholder="Lama Hari"
id="hariED"/>
</div>
<label
style="color:#3e3c3c">Lama Malam</label>
name="malamED" class="form-control fc-form" placeholder="Lama
Malam" id="malamED"/>
</div>

<label
style="color:#3e3c3c">Deskripsi Paket</label>
<textarea
placeholder="Tentang Paket" id="deskripsiED"></textarea>
</div>
<label
style="color:#3e3c3c">Foto Paket</label>
<img src=""
<input type="file"
name="fotoED" class="form-control-file fc-form" id="fotoED"/>
</div>
</div>
</div>
</div>
159
</form>
</div>
</div>
</div>
Kode Program 4.57 Sintaks Tampilan Edit Data Paket Wisata
Kode Program 4.57 merupakan sintak edit data paket wisata yang terdapat
dalam data_paket.php. Edit data paket wisata menggunakan tabel yang berisi
deskripsi data paket wisata yang dipilih dan akan dilakukan edit data paket wisata
sehingga apabila dilakukan perubahan maka di dashboard pelanggan akan berubah
paket wisata.
4.1.3.27 Data Tujuan Wisata

Tampilan data tujuan wisata berfungsi untuk menampilkan informasi tujuan
wisata yang akan dijalani pada paket wisata dan berisikan harga setiap wisata. Berikut
sintak untuk menampilkan data wisata dapat dilihat pada Kode Program 4.58.
<div class="modal fade" id="ModalWisata" tabindex="-1"

</button>
<h4 class="modal-title" id="myModalLabel"
align="center">
Data Tujuan Wisata <b id="WisataPaket"></b>
</h4>
</div>
<h4 id="StatusWisata" style="opacity:0.4"></h4>
<table class="table table-bordered">

<tr>
<th>Nama Wisata</th>
<th>Harga Tiket Masuk</th>
<th>Hapus Wisata</th>
160
</tr>
<tbody id="DataWisata">
</tbody>
</table>
<label>Total Biaya Wisata </label>
<input type="text" name="total_harga_wisata"
id="total_harga_wisata" class="form-control fc-form" readonly>
</div>
<div class="form-group" id="load_wisata">
</div>
</div>
</div>
</div>
</div>
Kode Program 4.58 Sintak Tampilan Data Tujuan Wisata
Kode Program 4.58 merupakan sintak data tujuan wisata yang terdapat dalam
data_paket.php. Data tujuan wisata menggunakan tabel yang berisi data wisata yang
akan dikunjungi serta berisikan aksi untuk menghapus data tujuan wisata.
4.1.3.28 Tambah Data Wisata Tujuan Paket

Tampilan tambah data wisata tujuab berfungsi untuk melakukan pertambahan
tujuan wisata pada paket yang dipilih oleh admin. Berikut sintak untuk menampilkan
tambah data jenis wisata dapat dilihat pada Kode Program 4.59.
<div class="modal fade" id="ModalTambahWisata" tabindex="-2"

</button>
Form Tambah Data Wisata Tujuan
</h4>
</div>
161
<form id="formTambahWisata"
<select name="id_wisata"
rows="6" class="form-control" id="id_wisata">
</select>
</div>
</div>
<button
onclick="tambah_data_wisata()" type="button" name="submit"
class="btn btn-success" data-dismiss="modal"/>SIMPAN</button>
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.59 Sintaks Tampilan Tambah Data Wisata Tujuan
Kode Program 4.59 merupakan sintak tambah data wisata tujuan yang
terdapat dalam data_paket.php. Tambah data wisata tujuan menggunakan formulir
untuk memilih tujuan wisata pada paket yang dipilih admin, dimana pemilihan wisata
tujuan menggunakan radio button data wisata.
4.1.3.29 Data Tempat Menginap Paket

Tampilan data tempat menginap berfungsi untuk menampilkan informasi
penginapan pada paket wisata dan berisikan harga setiap wisata. Berikut sintak untuk
menampilkan data tempat penginapan dapat dilihat pada Kode Program 4.60.
<div class="modal fade" id="ModalHotel" tabindex="-1" role="dialog"

162
</button>
<h4 class="modal-title" id="myModalLabel"
align="center">
Data Tempat Menginap Paket <b
</h4>
</div>
<h4 id="StatusHotel" style="opacity:0.4"></h4>

<tr>
<th>Nama Hotel</th>
<th>Harga PerMalam</th>
<th>Lama Menginap</th>
<th>Total harga</th>
<th>Hapus Hotel</th>
</tr>
<tbody id="DataHotel">
</tbody>
</table>
<label>Total Biaya Hotel </label>
<input type="text" name="total_harga_hotel"
id="total_harga_hotel" class="form-control fc-form" readonly>
</div>
<div class="form-group" id="load_hotel">
</div>
</div>
</div>
</div>
</div>
Kode Program 4.60 Sintaks Tampilan Data Tempat Penginapan
Kode Program 4.60 merupakan sintak data tempat penginapan paket yang
terdapat dalam data_paket.php. Data tempat penginapan menggunakan tabel yang
berisi data penginapan yang akan dikunjungi serta berisikan aksi untuk menghapus data
penginapan.
163
4.1.3.30 Tambah Data Hotel Menginap

Tampilan tambah hotel penginapan berfungsi untuk melakukan pertambahan
penginapan pada paket yang dipilih oleh admin. Berikut sintak untuk menampilkan
tambah data hotel menginap dapat dilihat pada Kode Program 4.61.
<div class="modal fade" id="ModalTambahHotel" tabindex="-2"

</button>
Form Tambah Data Hotel Menginap
</h4>
</div>
<form id="formTambahHotel"
<select name="id_hotel"
rows="6" class="form-control" id="id_hotel">
</select>
</div>
name="lama_menginap" id="lama_menginap" placeholder="Lama Menginap
dihotel" class="form-control fc-form" >
</div>
</div>
<button onclick="tambah_data_hotel()"
</div>
</div>
</form>
</div>
164
</div>
</div>
Kode Program 4.61 Sintaks Tampilan Tambah Data Hotel Penginapan
Kode Program 4.61 merupakan sintak tambah data hotel penginapan yang
terdapat dalam data_paket.php. Tambah data hotel penginapan menggunakan
formulir untuk memilih hotel dan lama penginapan yang dipesan pada paket yang
dipilih oleh admin.
4.1.3.31 Data Momentt

Tampilan data momentt berfungsi untuk menampilkan informasi deskripsi
moment wisata beserta foto moment. Berikut sintaks untuk menampilkan data moment
</div>
<li><a href='<?php echo base_url("Wisata"); ?>'>View
Data</a></li>
</ul>

?></div>
<div class="box">
<h3>Data Momentt <small>Overview</small></h3>
</div>
<thead>
<tr>
<th>No</th>
<th>Judul Momentt</th>
165
<th>Lokasi Momentt</th>
<th>Tanggal Momentt</th>
<th>Deskripsi Momentt</th>
<th>Foto Momentt</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="dataMomentt">
<?php
$no =1;
if( !empty($data)){
?>
<tr>
<td><?=$no?></td>
<td><?=$data->judul_momentt?></td>
<td><?=$data->lokasi_momentt?></td>
<td><?=$data->tanggal_momentt?></td>
<td><?=$data->deskripsi_momentt?></td>
<td><img
src="<?=base_url()?>images/momentt/<?=$data->foto_momentt?>"
<td>
onclick="edit_data(<?=$data->id_momentt?>)" name="edit" class="btn
</td>
</tr>
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>

</div>
</section>
<div>
Kode Program 4.62 Sintaks Tampilan Data Moment
Kode Program 4.62 merupakan sintak data moment yang terdapat dalam
data_momentt.php. Data moment menggunakan tabel yang berisi data moment serta
166
berisikan aksi untuk melakukan edit data moment. Pada tampilan moment berisi mesin
pencarian moment yang dapat memudahkan admin mencari moment yang menarik.
4.1.3.32 Edit Momentt

Tampilan edit moment berfungsi untuk melakukan perubahan dari moment
wisata apabila admin membuka fungsi edit pada salah satu moment wisata. Berikut
sintak untuk menampilkan data moment wisata dapat dilihat pada Kode Program 4.63.

</button>
Form Edit Momentt
</h4>
</div>

<input type="text"
name="namaED" class="form-control fc-form" placeholder="Judul
Momentt" id="namaED"/>
</div>
<textarea name="lokasiED"
rows="6" class="form-control fc-form" placeholder="Lokasi Momentt"
id="lokasiED"></textarea>
</div>
167
<input type="date"
name="tanggalED" rows="6" class="form-control fc-form"
placeholder="Tanggal Momentt" id="tanggalED">
</div>
<textarea
placeholder="Deskripsi Momentt" id="deskripsiED"></textarea>
</div>
<img src=""
<input type="file"
name="fotomomenttED" class="form-control-file fc-form"
id="fotomomenttED"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.63 Sintaks Tampilan Edit Moment
Kode Program 4.63 merupakan sintak edit data moment wisata yang terdapat
dalam data_momentt.php. Edit data moment wisata menggunakan tabel yang berisi
deskripsi data moment wisata yang dipilih dan akan dilakukan edit data moment wisata
apabila terjadi kesalahan memasukkan data.
168
4.1.3.33 Tambah Data Momentt

Tampilan tambah moment berfungsi untuk melakukan pertambahan moment
wisata yang sudah dilalui. Berikut sintak untuk menampilkan tambah data moment
wisata dapat dilihat pada Kode Program 4.64.

role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="overflow:auto;">
</button>
Form Tambah Data Momentt
</h4>
</div>

<input type="text"
name="nama" class="form-control fc-form" placeholder="Judul
Momentt" id="nama"/>
</div>
<textarea name="lokasi"
rows="6" class="form-control fc-form" placeholder="Lokasi Momentt"
id="lokasi"></textarea>
</div>
<input type="date"
name="tanggal" rows="6" class="form-control fc-form"
placeholder="Tanggal" id="tanggal">
</div>
<textarea
name="deskripsi" rows="6" class="form-control fc-form"
placeholder="Deskripsi" id="deskripsi"></textarea>
169
</div>
<input type="file"
name="foto_momentt" class="form-control-file fc-form"
id="foto_momentt"/>
</div>
id="simpan" type="button" name="simpan" class="btn btn-success"
data-dismiss="modal"/>SIMPAN</button>
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.64 Sintaks Tampilan Tambah Data Moment
Kode Program 4.64 merupakan sintak tambah data moment wisata yang
terdapat dalam data_momentt.php. Tambah data moment wisata menggunakan
formulir untuk memasukkan data moment wisata yang memiliki inputan tanggal travel.
4.1.3.34 Data Booking

Tampilan data booking berfungsi untuk menampilkan informasi pemesanan
travel yang dilakukan oleh pelanggan. Berikut sintaks untuk menampilkan data
booking dapat dilihat pada Kode Program 4.65.
<div class="box">
</div>
<table id="table_booking" class="table table-bordered">
<thead>
<tr>
170
<th>No</th>
<th>ID Booking</th>
<th>Nama User</th>
<th>Banyak Traveller</th>
<th>Nama Paket</th>
<th>Permintaan Spesial</th>
<th>Ket Biaya Tambahan</th>
<th>Aksi</th>
</tr>
</thead>
<?php
$no =1;
if( !empty($data)){
?>
<tr>
<td><?=$no?></td>
<td><?=$data->nama_user?></td>
<td><?=$data->banyak_traveler?></td>
<td><?=($data->permintaan_spesial)?$data-
>permintaan_spesial:"-"?></td>
<td><?=$data->biaya_traveling?></td>
<td><?=($data->biaya_tambahan)?$data-
<td><?=($data->ket_biaya_tambahan)?$data-
>ket_biaya_tambahan:"-"?>
</td>
<td>
<?php if($data->status_cancle){
echo "<b>DIBATALKAN</b>";
}else{
?><button type='button'
btn-danger'><i class='fa fa-ban' title='Pembatalan'></i></button>
<button type='button'
onclick='edit_data(<?=$data->id_booking?>)' name='cancel'
class='btn btn-primary'><i class='fa fa-edit' title='Biaya
Tambahan'></i></button>
<?php } ?>
</td>
</tr>
171
<?php
$no++;
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</section>
Kode Program 4.65 Sintaks Tampilan Data Booking
Kode Program 4.65 merupakan sintak data booking yang terdapat dalam
data_booking.php. Data booking menggunakan tabel yang berisi data booking yang
dipesan oleh pelanggan serta berisikan aksi untuk melakukan edit data booking. Pada
tampilan data booking berisi mesin pencarian booking yang dapat memudahkan admin.
4.1.3.35 Edit Data Booking

Tampilan edit data booking berfungsi untuk melakukan pertambahan biaya
tambahan dari perjalanan travelling yang dilakukan oleh admin untuk setiap wisata.
Berikut sintak untuk menampilkan edit data booking dapat dilihat pada Kode Program
4.66.
<div class="modal fade" id="ModalBiaya" tabindex="-1" role="dialog"
</button>
Form Edit Momentt
</h4>
</div>
method="POST">
172
name="id" id="id" />
<label
style="color:#3e3c3c">Biaya Tambahan</label>
<input type="text"
name="biaya" class="form-control fc-form" placeholder="Biaya
Tambahan" id="biaya"/>
</div>
<label
style="color:#3e3c3c">Keterangan</label>
<textarea name="ket"
rows="6" class="form-control fc-form" placeholder="Keterangan Biaya
Tambahan" id="ket"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Kode Program 4.66 Sintak Tampilan Edit Booking
Kode Program 4.66 merupakan sintak edit data booking travel yang terdapat
dalam data_booking.php. Edit data booking menggunakan tabel yang berisi deskripsi
biaya tambahan dan keterangan dari biaya tambahan yang dikenakan oleh pelanggan.
4.1.3.36 Data Pembayaran

Tampilan data pembayaran berfungsi untuk menampilkan informasi
pembayaran yang dilakukan oleh pelanggan. Berikut sintak untuk menampilkan data
pembayaran dapat dilihat pada Kode Program 4.67.
<div class="box">
173
</div>
<table id="table_booking" class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>ID Booking</th>
<th>Atas Nama Pengirim</th>
<th>Bukti Pembayaran</th>
<th>Tanggal Upload</th>
<th>Total Yang Harus Dibayar</th>
<th>Status Pembayaran</th>
</tr>
</thead>
<?php
$no = 1;
if( !empty($data)){
?>
<tr>
<td><?=$no?></td>
<td><?=$data->atas_nama_pengirim?></td>
<td><img
src="<?=base_url()?>images/pembayaran/<?=$data->bukti_transaksi?>"
<td><?=$data->tgl_upload_bukti?></td>
<td><?=($data->biaya_traveling)+($data-
>biaya_tambahan)?></td>
<td>
<?php if($data-
>status_valid){
echo
"<b>TERVALIDASI</b>";
}else{
?><button
type='button' onclick='valid(<?=$data->id_pembayaran?>)'
name='cancel' class='btn btn-primary'><i class='fa fa-check-square'
title='Biaya Tambahan'></i></button>
<?php } ?>
</td>
</tr>
<?php
$no++;
}
174
}
?>
</tbody>
</table>
</div>
</div>
</div>
</section>
Kode Program 4.67 Sintaks Tampilan Data Pembayaran
Kode Program 4.68 merupakan sintak data pembayaran yang terdapat dalam
data_pembayaran.php. Data pembayaran menggunakan tabel yang berisi data
pembayaran yang dilakukan oleh pelanggan dan nantinya admin akan melakukan
validasi setiap bukti pembayaran.
4.1.3.37 Laporan Data Masukan

Tampilan laporan data masukan berfungsi untuk menampilkan informasi
pendapatan yang diterima oleh jasa travelling untuk setiap perjalanan. Berikut sintak
untuk menampilkan laporan data masukan dapat dilihat pada Kode Program 4.69.
<div class="box">
<h3>Data Pemasukan <small>Overview</small></h3>
</div>
<div style="margin-bottom:20px">
<?php echo form_open("Laporan/cari_pemasukan");
?>
<?php
if( !empty($awal_pemasukan) &&
!empty($akhir_pemasukan)){
?>
<input type="text" name="awal" id="awal"
class="col-md-2 " placeholder="Dari Tanggal Travelling"
required="required" value="<?=$awal_pemasukan?>"/>
<input type="text" name="akhir" id="akhir"
class="col-md-2 " placeholder="Hingga Tanggal Travelling"
required="required" value="<?=$akhir_pemasukan?>"/>
<?php
}else{
?>
175
<input type="text" name="awal" id="awal"

class="col-md-2 " placeholder="Dari Tanggal Travelling"
<input type="text" name="akhir" id="akhir"
class="col-md-2 " placeholder="Hingga Tanggal Travelling"
<?php } ?>
<input type="submit" class="btn btn-primary"
value="Cari" style="margin-bottom:0">
<?=form_close()?>
<a href="<?=base_url('Laporan')?>"><button
class="btn btn-success" style="margin-left:0">Unfilter</button></a>
</div>
<thead>
<tr>
<th>No</th>
<th>ID Booking</th>
<th>Keuntungan</th>
</tr>
</thead>
<?php
$no =1;
$total=0;
if( !empty($data)){
?>
<tr>
<td><?=$no?></td>
<td>Rp.<?=$data->biaya_traveling?></td>
<td>Rp.<?=($data->biaya_tambahan)?$data-
<td>Rp.<?=(($data-
>biaya_traveling)+($data->biaya_tambahan))*25/100?></td>
</tr>
<?php
$total=($total)+((($data-
>biaya_traveling)+($data->biaya_tambahan))*25/100);
176
$no++;
}
}
?>
</tbody>
</table>
<h1 style="float:right">
<label >Total Pemasukan </label>
<p style="width:30%;font-
size:40px">Rp.<?=$total?></p>
</h1>
</div>
</div>
</div>
</section>
Kode Program 4.68 Sintak Tampilan Laporan Data Masukan
Kode Program 4.68 merupakan sintak laporan data masukan keuntungan yang
terdapat dalam data_laporan.php. Laporan data masukan menggunakan tabel yang
berisi laporan data masukan untuk setiap perjalanan wisata sehingga admin mudah
untuk melakukan pembukuan pemasukan.
4.1.3.38 Laporan Data Pembatalan Booking

Tampilan laporan data pembatalan booking berfungsi untuk menampilkan
informasi total pembatalan yang dilakukan oleh pelanggan. Berikut sintak untuk
menampilkan laporan data pembatalan booking dapat dilihat pada Kode Program 4.69.
<div class="box">
<h3>Data Pembatalan Booking
<small>Overview</small></h3>
</div>
<?php echo form_open("Laporan/cari_pembatalan");
?>
<?php
if( !empty($awal_pembatalan) &&
!empty($akhir_pembatalan)){
?>
<input type="text" name="awal_pembatalan"
id="awal_pembatalan" class="col-md-2 " placeholder="Dari Tanggal
Travelling" required="required" value="<?=$awal_pembatalan?>"/>
177
<input type="text" name="akhir_pembatalan"

id="akhir_pembatalan" class="col-md-2 " placeholder="Hingga Tanggal
Travelling" required="required" value="<?=$akhir_pembatalan?>"/>
<?php
}else{
?>
<input type="text" name="awal_pembatalan"
id="awal_pembatalan" class="col-md-2 " placeholder="Dari Tanggal
Travelling" required="required" />
<input type="text" name="akhir_pembatalan"
id="akhir_pembatalan" class="col-md-2 " placeholder="Hingga Tanggal
<?php } ?>
<?=form_close()?>
</div>
<table id="table_pembatalan" class="table table-
bordered">
<thead>
<tr>
<th>No</th>
<th>ID Booking</th>
<th>Banyak Traveler</th>
<th>Nama Paket</th>
</tr>
</thead>
<?php
$no =1;
if( !empty($data_pembatalan)){
foreach($data_pembatalan as
$data_pembatalan){
?>
<tr>
<td><?=$no?></td>
<td><?=$data_pembatalan->id_booking?></td>
<td><?=$data_pembatalan->tgl_booking?></td>
<td><?=$data_pembatalan-
>tgl_traveling?></td>
<td><?=$data_pembatalan-
>banyak_traveler?></td>
<td><?=$data_pembatalan->nama_paket?></td>
</tr>
178
<?php
$no++;
}
}
?>
</tbody>
</table>
<label >Total Pembatalan </label>
<p style="width:30%;font-size:40px"><?=$no-
1?>x</p>
</h1>
</div>
</div>
</div>
</section>
Kode Program 4.69 Sintak Tampilan Laporan Data Pembatalan Booking
Kode Program 4.69 merupakan sintak laporan data pembatalan booking yang
terdapat dalam data_laporan.php. Laporan data pembatalan bookingi menggunakan
tabel yang berisi laporan data pembatalan booking perjalanan wisata sehingga admin
mudah untuk melakukan pembukuan jumlah pembatalan pemesanan.
4.1.3.39 Laporan Data Paket Terfavorit

Tampilan laporan paket terfavorit berfungsi untuk menampilkan informasi
total perjalanan wisata yang paling favorit yang telah dilakukan. Berikut sintak untuk
menampilkan laporan wisata terfavorit dapat dilihat pada Kode Program 4.70.
<div class="box">
<h3>Data Paket Terfavorit <small>Overview</small></h3>
</div>
<?php echo form_open("Laporan/cari_paket"); ?>
<?php
if( !empty($awal_paket) && !empty($akhir_paket)){
?>
<input type="text" name="awal_paket"
id="awal_paket" class="col-md-2 " placeholder="Dari Tanggal
Travelling" required="required" value="<?=$awal_paket?>"/>
<input type="text" name="akhir_paket"
id="akhir_paket" class="col-md-2 " placeholder="Hingga Tanggal
Travelling" required="required" value="<?=$akhir_paket?>"/>
<?php
179
}else{
?>
<input type="text" name="awal_paket"
id="awal_paket" class="col-md-2 " placeholder="Dari Tanggal
<input type="text" name="akhir_paket"
id="akhir_paket" class="col-md-2 " placeholder="Hingga Tanggal
Travelling" required="required"/>
<?php } ?>
<?=form_close()?>
</div>
<table id="table_pembatalan" class="table table-
bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Paket</th>
<th>Banyak Traveler</th>
<th>Banyak Perjalanan</th>
</tr>
</thead>
<?php
$no =1;
$total_perjalanan=0;
if( !empty($data_paket)){
foreach($data_paket as $data_paket){
?>
<tr>
<td><?=$no?></td>
<td><?=$data_paket->nama_paket?></td>
<td><?=$data_paket->total_traveler?></td>
<td><?=$data_paket-
>banyak_perjalanan?></td>
</tr>
<?php
$total_perjalanan=$total_perjalanan+$data_paket-
>banyak_perjalanan;
$no++;
}
}
180
?>
</tbody>
</table>
<label >Total Perjalanan </label>
<p style="width:30%;font-
size:40px"><?=$total_perjalanan?>x</p>
</h1>
</div>
</div>
</div>
</section>
Kode Program 4.70 Sintak Tampilan Laporan Data Paket Terfavorit
Kode Program 4.70 merupakan sintak laporan data paket terfavorit yang
terdapat dalam data_laporan.php. Laporan data paket terfavorit menggunakan tabel
yang berisi laporan data jumlah peminat paket terbanyak yang dipesan oleh pelanggan
sehinggan sehingga admin mudah untuk melakukan pembukuan paket terfavorit.
181
4.2 Tampilan
Tampilan dan screenshot dari Sistem Informasi Penyedia Jasa Travel akan
dijelaskan secara lebih rinci sebagai berikut.
4.2.1 Header Dashboard
Header dashboard tampilan awal apabila memasuki website tour & travel
yang mana dijadikan satu tampilan dashboard. Berikut tampilan header dashboard
dapat dilihat pada Gambar 4.1.
Gambar 4.1 Tampilan Header Dashboard

Gambar 4.1 merupkan tampilan dari halaman header dashboard untuk sistem
tour & travel berbasis web. Tampilan berisikan tentang profil pengguna yang sudah
melakukan login pada sistem informasi jasa travel, kontak website, dan fungsi untuk
mengetahui tentang sistem jasa pelayanan travel.
4.2.2 Dashboard
Dashboard berfungsi sebagai pembuatan interface untuk halaman dashboard
Dashboard tampilan awal apabila memasuki website tour & travel. Berikut tampilan
dashboard dapat dilihat pada Gambar 4.2.
182
Gambar 4.2 Tampilan Dashboard

Gambar 4.2 merupakan tampilan dari halaman dashboard untuk sistem tour
& travel berbasis web. Tampilan berisi informasi kolom pemesanan travel, diskon
menarik, destinasi wisata terpopuler, dan paket. Tampilan dashboard dibuat user
friendly sehingga pelanggan melihat tampilan website tertarik.
4.2.3 Login User
Login user berfungsi untuk membuat tampilan user interface untuk halaman
login. Tampilan login merupakan hasil akhir setelah sintak controller user, user model,
dan login dibuat, maka proses login dapat berjalan dengan tampilan seperti pada
Gambar 4.3.
Gambar 4.3 Tampilan Login User

183
Gambar 4.3 merupakan tampilan dari halaman login user untuk sistem
penyedia jasa travel berbasis web. Tampilan login user berisi 2 kolom input text 1
button yang terdiri dari kolom email, password, dan tombol kirim sehingga sistem akan
melakukan proses dengan database apakah email dan password ada atau tidak, kalau
tidak ada maka website akan menampilkan alert terjadi kesalahan.
4.2.4 Registrasi User

Tampilan registrasi user merupakan hasil akhir setelah sintak controller user,
user model dan view login dibuat, maka proses registrasi dapat berjalan dengan
tampilan seperti pada Gambar 4.4.
Gambar 4.4 Tampilan Registrasi User

Gambar 4.4 merupakan tampilan dari halaman registrasi user untuk sistem
penyedia jasa travel berbasis web. Tampilan registrasi user berisi 6 kolom input text 2
button yang terdiri dari kolom email, password, nama lengkap, nomor identitas, nomor
telepon, alamat, tombol simpan, dan tombol ulang. Tombol simpan berguna untuk
menyimpan input-an yang berada pada form kedalam database dan tombol ulang
berguna untuk melakukan reset input-an pada form.
184
4.2.5 Paket Jasa Travel

Tampilan paket travel merupakan hasil akhir setelah sintak controller paket,
paket model, dan view paket dibuat, maka proses penampilan paket jasa travel dapat
berjalan dengan tampilan seperti pada Gambar 4.5.
Gambar 4.5 Tampilan Paket Travel

Gambar 4.5 merupakan tampilan dari halaman paket travel untuk sistem
penyedia jasa travel berbasis web. Tampilan paket trip travel berisi destinasi wisata
yang digabungkan dalam satu perjalanan yang dimuat oleh admin sistem informasi jasa
travel dimana pelanggan dapat memilih salah satu paket wisata yang ingin dikunjungi,
4.2.6 Deskripsi Paket

Tampilan deksripsi paket travel merupakan hasil akhir setelah sintak
controller detail paket, paket model, dan view detail paket dibuat, maka proses
penampilan detail paket jasa travel dapat berjalan dengan tampilan seperti pada
Gambar 4.6.
185
Gambar 4.6 Tampilan Deskripsi Paket

Gambar 4.6 merupakan tampilan dari halaman deskripsi paket travel untuk
sistem penyedia jasa travel berbasis web. Tampilan deskripsi paket berisi tentang hal
apa saja dalam wisata yang dikunjugi seperti destinasi trip, hotel wisata dan cerita
tentang paket wisata. Tampilan ini muncul apabila pelanggan memilih paket travel
pada tampilan sebelumnya.
4.2.7 Destinasi Travel

Tampilan destinasi travel merupakan hasil akhir setelah sintak controller
destinasi, destinasi model, dan view destinasi dibuat, maka proses penampilan destinasi
travel dapat berjalan dengan tampilan seperti pada Gambar 4.7.
186
Gambar 4.7 Tampilan Destinasi Travel

Gambar 4.7 merupakan tampilan dari halaman destinasi travel untuk sistem
penyedia jasa travel berbasis web. Tampilan destinasi travel berisi tentang destinasi
yang ada didalam sistem informasi jasa travel sehingga pelanggan mengetahui
destinasi yang ingin dikunjungi.
4.2.8 Deskripsi Wisata

Tampilan deskripsi wisata merupakan hasil akhir setelah sintak controller
detail destinasi, destinasi model, dan view detail destinasi dibuat, maka proses
penampilan deskripsi destinasi travel dapat berjalan dengan tampilan seperti pada
Gambar 4.8.
187
Gambar 4.8 Tampilan Deskripsi Destinasi

Gambar 4.8 merupakan tampilan dari halaman deskripsi destinasi travel untuk
sistem penyedia jasa travel berbasis web. Tampilan deskripsi destinasi berisi tentang
hal apa saja dalam wisata yang dikunjugi seperti destinasi trip, lokasi yang
direpresentasikan oleh Google Maps. Tampilan ini muncul apabila pelanggan memilih
destinasi travel pada tampilan sebelumnya.
4.2.9 Pembayaran
Tampilan pembayaran merupakan hasil akhir setelah sintak controller
pembayaran, destinasi, pembayaran model, dan view pembayaran dibuat, maka proses
penampilan pembayaran travel dapat berjalan dengan tampilan seperti pada Gambar
4.9.
188
Gambar 4.9 Tampilan Pembayaran

Gambar 4.9 merupakan tampilan dari halaman pembayaran untuk sistem
penyedia jasa travel berbasis web. Tampilan pembayaran berisi 1 kolom input id
booking dan tombol button untuk melakukan pencarian booking yang dimiliki oleh
pelanggan. Tombol button apabila dilakukan aksi maka sistem akan melakukan
pencarian didalam database apakah id booking terdapat dalam database.
4.2.10 Input Pembayaran

Tampilan input pembayaran merupakan hasil akhir setelah sintak controller
pembayaran, model destinasi, pembayaran model, dan view pembayaran dibuat, maka
proses penampilan input pembayaran travel dapat berjalan dengan tampilan seperti
pada Gambar 4.10.
189
Gambar 4.10 Tampilan Input Pembayaran

Gambar 4.10 merupakan tampilan dari halaman input pembayaran untuk
sistem penyedia jasa travel berbasis web. Tampilan data booking berisi tentang
deskripsi pemesanan yang dilakukan oleh pelanggan dan pada tampilan ini pelanggan
harus memasukkan bukti pembayaran dalam bentuk foto yang berkestensi PNG.
Tombol button kirim berguna untuk melakukan pengiriman data kedalam database
pembayaran sehingga data bukti pembayaran akan dilakukan validasi oleh admin.
4.2.11 Moment
Tampilan moment merupakan hasil akhir setelah sintak controller momentt,
momentt model, dan view pembayaran dibuat, maka proses penampilan moment travel
dapat berjalan dengan tampilan seperti pada Gambar 4.11.
190
Gambar 4.11 Tampilan Moment Travel

Gambar 4.11 merupakan tampilan dari halaman moment untuk sistem
penyedia jasa travel berbasis web. Tampilan moment berisi gambar-gambar menarik
kunjungan yang dialami oleh pelanggan untuk setiap wisata yang berbeda. Gambar
moment diambil dalam folder moment.
4.2.12 Tentang Kami

Tampilan moment merupakan hasil akhir setelah sintak controller tentang, dan
view tentang dibuat, maka proses penampilan moment travel dapat berjalan dengan
191
Gambar 4.12 Tampilan Tentang Kami

Gambar 4.12 merupakan tampilan dari halaman moment untuk sistem
penyedia jasa travel berbasis web. Tampilan tentang kami berisi mengenai hal yang
menyangkut terbentuknya sistem informasi jasa pelayanan travel sampai mengenai
4.2.13 Kontak
Tampilan moment merupakan hasil akhir setelah sintak view kontak dibuat,
maka proses penampilan kontak dapat berjalan dengan tampilan seperti pada Gambar
4.13.
192
Gambar 4.13 Tampilan Kontak

Gambar 4.13 merupakan tampilan dari halaman kontak untuk sistem penyedia
jasa travel berbasis web. Tampilan kontak berisi tentang alamat kantor jasa pelayanan
travel, kontak layanan pelanggan, email, lokasi Google Maps API, dan formulir kritik
dan saran yang berguna untuk mendukung terbentuknya sistem informasi yang lebih
baik.
193
4.2.14 Booking
Tampilan booking merupakan hasil akhir setelah sintak controller booking,
model booking, view booking dibuat, maka proses penampilan kontak dapat berjalan
dengan tampilan seperti pada Gambar 4.14.
Gambar 4.14 Tampilan Booking Langkah Pertama

Gambar 4.14 merupakan tampilan booking langkah pertama yang dimana
sistem menyediakan beberapa paket dari travel yang nantinya dipilih oleh pelanggan.
Setelah pelanggan memiliki salah satu paket yang tersedia maka sistem akan
menampilkan langkah pemilihan tanggal travel seperti Gambar 4.15.
Gambar 4.15 Tampilan Booking Langkah Kedua

194
Gambar 4.15 merupakan tampilan booking langkah kedua yang dimana sistem
menampilkan identitas diri pelanggan dan juga pelanggan diwajibkan untuk mengisi
tanggal travelling dan kolom halama permintaan spesial. Setelah pelanggan sudah
mengisi kolom yang kosong maka akan tampil seperti Gambar 4.16.
Gambar 4.16 Tampilan Booking Langkah Ketiga

Gambar 4.16 merupakan tampilan booking untuk langkah terakhir untuk
melakukan pemesanan dimana pelanggan harus mengisi kolom berapa banyak orang
yang akan melakukan perjalanan dan sistem akan melakukan perhitungan total harga
yang harus dibayar oleh pelanggan.
4.2.15 Rancangan Perjalanan

Tampilan rancangan perjalanan merupakan hasil akhir setelah sintak
controller user, model user, view profil dibuat, maka proses penampilan kontak dapat
195
Gambar 4.17 Tampilan Rencana Perjalanan Pelanggan

Gambar 4.17 merupakan tampilan rencana perjalanan pelanggan dimana
sudah melakukan pemesanan travelling dan melihat apakah pemesanan dan
pemabayaran sudah divalidasi atau belum. Tampilan ini juga berisi tentang deksripsi
apakah dalam pemesanan terdapat biaya tambahan yang dimasukkan oleh admin.
4.2.16 Login Admin

Login admin berfungsi untuk membuat tampilan admin interface untuk
halaman login. Tampilan login merupakan hasil akhir setelah sintak controller admin,
admin model, view index dibuat, maka proses login dapat berjalan dengan tampilan
seperti pada Gambar 4.18.
196
Gambar 4.18 Tampilan Login Admin

Gambar 4.18 merupakan tampilan dari halaman login admin untuk sistem
penyedia jasa travel berbasis web. Tampilan login admin berisi 2 kolom input text 1
button yang terdiri dari kolom email, password, dan tombol kirim sehingga sistem akan
melakukan proses dengan database apakah email dan password ada atau tidak, kalau
tidak ada maka website akan menampilkan alert terjadi kesalahan.
4.2.17 Dashboard Admin

Dashboard admin berfungsi sebagai pembuatan interface untuk halaman
dashboard. Tampilan dashboard admin merupakan hasil akhir setelah sintak controller
main, hime model, view dashboard dibuat, maka proses dashboard admin dapat
197
Gambar 4.19 Tampilan Dashboard Admin

Gambar 4.19 merupakan tampilan dari halaman dashboard admin sistem tour
& travel berbasis web. Tampilan berisi informasi tentang trip tour yang akan dilakukan
proses perjalanan untuk waktu yang terdekat. Tampilan informasi berisi tanggal trip,
nama paket, dan jumlah orang yang melakukan trip.
4.2.18 Data Hotel

Data hotel berfungsi untuk membuat tampilan data hotel. Tampilan data hotel
merupakan hasil akhir setelah sintak controller hotel, hotel model, view data hotel
dibuat, maka proses data hotel dapat berjalan dengan tampilan seperti pada Gambar
4.20.
198
Gambar 4.20 Tampilan Data Hotel

Gambar 4.20 merupakan tampilan dari halaman data hotel sistem tour &
travel berbasis web. Tampilan berisi informasi tentang data hotel yang bekerja sama
dengan jasa travel. Tampilan ini menggunakan tabel yang berisi kolom nama hotel,
alamat hotel, telepon hotel, biaya penginapan permalam, dan aksi yang terdiri dari edit
dan hapus data hotel.
4.2.19 Edit Data Hotel

Edit data hotel berfungsi untuk membuat tampilan edit data hotel. Tampilan
edit data hotel merupakan hasil akhir setelah sintak controller hotel, hotel model, view
data hotel dibuat, maka proses edit data hotel dapat berjalan dengan tampilan seperti
pada Gambar 4.21.
199
Gambar 4.21 Edit Data Hotel

Gambar 4.21 merupakan tampilan dari halaman edit data hotel sistem tour &
travel berbasis web. Tampilan berisi formulir untuk melakukan perubahan data hotel
yang memiliki 4 kolom input text untuk deskripsi hotel dan memiliki 2 tombol button
terdiri dari simpan yang berguna untuk melakukan perubahan data pada database dan
tombol ulang berguna untuk menghapus isi data kolom.
200
4.2.20 Tambah Data Hotel

Tambah data hotel berfungsi untuk melakukan pertambahan data hotel.
Tampilan tambah data hotel merupakan hasil akhir setelah sintak controller hotel, hotel
model, view data hotel dibuat, maka proses edit data hotel dapat berjalan dengan
tampilan seperti pada Gambar 4.22
Gambar 4.22 Tampilan Tambah Data Hotel

Gambar 4.22 merupakan tampilan dari halaman tambah data hotel sistem tour
& travel berbasis web. Tampilan berisi formulir untuk pertambahan jumlah data hotel
yang berisi 4 kolom input text terdiri dari nama hotel, alamat hotel, telepon hotel, biaya
per malam dan memiliki 2 tombol button terdiri dari tombol simpan untuk menyimpan
pertambahan hotel dan tombol ulang untuk melakukan mengosongkan kolom input.
201
4.2.21 Data Wisata

Data wisata berfungsi untuk membuat tampilan data wisata. controller wisata,
wisata model, view data wisata dibuat, maka proses data wisata dapat berjalan dengan
Gambar 4.23 Tampilan Data Wisata

Gambar 4.23 merupakan tampilan dari halaman data wisata sistem tour &
travel berbasis web. Tampilan ini menggunakan tabel yang berisi kolom nama wisata,
lokasi wisata, jenis wisata, harga tiket, deskripsi wisata, foto wisata, dan aksi yang
terdiri dari edit dan hapus data wisata.
4.2.22 Edit Data Wisata

Edit data wisata berfungsi untuk membuat tampilan edit data wisata.
controller wisata, wisata model, view data wisata dibuat, maka proses edit data wisata
202
Gambar 4.24 Tampilan Edit Data Wisata

Gambar 4.24 merupakan tampilan dari halaman edit data wisata sistem tour
& travel berbasis web. Tampilan berisi formulir untuk melakukan perubahan data
wisata yang memiliki 5 kolom input text untuk deskripsi wisata, 1 radio button, dan
memiliki 3 tombol button terdiri dari simpan yang berguna untuk melakukan perubahan
data pada database, tombol ulang berguna untuk menghapus isi data kolom, dan
203
tombol pilih file yang berguna untuk memilih gambar yang akan disimpan kedalam
database.
4.2.23 Tambah Data Jenis Wisata

Tambah data jenis wisata berfungsi untuk membuat tampilan tambah jenis
data wisata. controller wisata, wisata model, view data wisata dibuat, maka proses
tambah jenis data wisata dapat berjalan dengan tampilan seperti pada Gambar 4.25.
Gambar 4.25 Tampilan Data Jenis Wisata

Gambar 4.25 merupakan tampilan dari halaman tambah data jenis wisata
sistem tour & travel berbasis web. Tampilan berisi formulir untuk pertambahan jenis
wisata yang berisi 1 kolom input text terdiri dari nama jenis wisata dan memiliki 2
tombol button terdiri dari tombol simpan untuk menyimpan pertambahan jenis wisata
dan tombol ulang untuk melakukan mengosongkan kolom input.
4.2.24 Tambah Data Wisata

Tambah data wisata wisata berfungsi untuk membuat tampilan tambah data
wisata. controller wisata, wisata model, view data wisata dibuat, maka proses tambah
data wisata dapat berjalan dengan tampilan seperti pada Gambar 4.26.
204
Gambar 4.26 Tampilan Tambah Data Wisata

Gambar 4.26 merupakan tampilan dari halaman tambah data wisata sistem
tour & travel berbasis web. Tampilan berisi formulir untuk melakukan pertambahan
data wisata yang memiliki 5 kolom input text untuk deskripsi wisata, 1 radio button,
dan memiliki 3 button terdiri dari simpan yang berguna untuk melakukan perubahan
database.
205
4.2.25 Data Paket Wisata

Data paket wisata berfungsi untuk membuat tampilan data paket wisata.
Controller paket data, paket data model, view data paket dibuat, maka proses data
paket wisata dapat berjalan dengan tampilan seperti pada Gambar 4.27.
Gambar 4.27 Tampilan Data Paket Wisata

Gambar 4.27 merupakan tampilan dari halaman paket data wisata sistem tour
& travel berbasis web. Tampilan ini menggunakan tabel yang berisi kolom nama paket,
banyak hari, banyak malam, harga paket, deskripsi paket, foto wisata, dan aksi yang
terdiri dari edit dan hapus paket data wisata.
4.2.26 Edit Data Paket Wisata

Edit data paket wisata berfungsi untuk membuat tampilan perbuhan data paket
wisata. Controller paket data, paket data model, view data paket dibuat, maka proses
perubahan data paket wisata dapat berjalan dengan tampilan seperti pada Gambar 4.28.
206
Gambar 4.28 Tampilan Edit Data Paket Wisata

Gambar 4.28 merupakan tampilan dari halaman edit paket data wisata sistem
tour & travel berbasis web. Tampilan berisi formulir untuk melakukan perubahan paket
data wisata yang memiliki 4 kolom input text untuk deskripsi wisata, 1 radio button,
dan memiliki 3 tombol terdiri dari simpan yang berguna untuk melakukan perubahan
database.
4.2.27 Data Tujuan Wisata

Data Tujuan Wisata berfungsi untuk membuat tampilan tujuan wisata yang
akan dikunjungi. Controller paket data, paket data model, view data paket dibuat,
maka tampilan seperti pada Gambar 4.29.
207
Gambar 4.29 Tampilan Data Tujuan Wisata

Gambar 4.29 merupakan tampilan dari halaman tujuan wisata sistem tour &
travel berbasis web. Tampilan ini menggunakan tabel yang berisi kolom nama nama
wisata, harga tiket masuk, aksi yang terdiri dari hapus tujuan wisata, dan tombol button
tambah wisata.
4.2.28 Tambah Data Wisata Tujuan Paket

Tambah data wisata tujuan berfungsi untuk membuat tampilan tujuan wisata
yang akan dikunjungi. Controller paket data, paket data model, view data paket dibuat,
maka tampilan seperti pada Gambar 4.30.
208
Gambar 4.30 Tampilan Data Wisata Tujuan Paket

Gambar 4.30 merupakan tampilan dari halaman tambah tujuan wisata sistem
tour & travel berbasis web. Tampilan ini menggunakan tabel yang 1 radio button untuk
memilih wisata yang akan ditambahin dan 1 tombol button simpan untuk menyimpan
data pertambahan wisata tujuan.
4.2.29 Data Tempat Penginapan Paket

Data tempat penginapan tujuan berfungsi untuk membuat tampilan
penginapan yang akan dikunjungi oleh traveller. Controller paket data, paket data
model, view data paket dibuat, maka tampilan seperti pada Gambar 4.31.
209
Gambar 4.31 Tampilan Data Tempat Penginapan Paket

Gambar 4.31 merupakan tampilan dari halaman tempat penginapan sistem
tour & travel berbasis web. Tampilan ini menggunakan tabel yang berisi nama hotel,
harga permalam, lama menginap, total harga, total biaya hotel, button aksi hapus data,
dan button tambah hotel.
4.2.30 Tambah Data Hotel Penginapan Paket

Tambah data tempat penginapan tujuan berfungsi untuk membuat tampilan
pertambahan penginapan yang akan dikunjungi oleh traveller. Controller paket data,
paket data model, view data paket dibuat, maka tampilan seperti pada Gambar 4.32.
210
Gambar 4.32 Tampilan Data Hotel Penginapan Paket

Gambar 4.32 merupakan tampilan dari halaman tambah tempat penginapan
sistem tour & travel berbasis web. Tampilan ini menggunakan formulir yang terdiri
dari 1 radio button berguna untuk memilih tambah hotel, lama penginapan, dan 1
tombol button simpan yang berguna untuk menyimpan penginapan.
4.2.31 Data Moment

Data momentt berfungsi untuk membuat tampilan data moment. Tampilan data
moment merupakan hasil akhir setelah sintak controller momentt data, momentt model,
view data momentt dibuat, maka proses data moment dapat berjalan dengan tampilan
seperti pada Gambar 4.33.
Gambar 4.33 Tampilan Data Moment

211
Gambar 4.33 merupakan tampilan dari halaman data moment sistem tour &
travel berbasis web. Tampilan ini menggunakan tabel yang berisi kolom judul moment,
lokasi moment, tanggal moment, deskripsi moment, foto moment, dan aksi yang terdiri
dari edit data momentt.
4.2.32 Edit Moment

Edit moment berfungsi untuk membuat tampilan perubahan data moment.
Tampilan edit data moment merupakan hasil akhir setelah sintak controller momentt
data, momentt model, view data momentt dibuat, maka proses edit data moment dapat
212
Gambar 4.34 Tampilan Edit Moment

Gambar 4.34 merupakan tampilan dari halaman edit data moment sistem tour
moment yang memiliki 4 kolom input text untuk deskripsi moment, dan memiliki 3
tombol button terdiri dari simpan yang berguna untuk melakukan perubahan data pada
database, tombol ulang berguna untuk menghapus isi data kolom, dan tombol pilih file
yang berguna untuk memilih gambar yang akan disimpan kedalam database.
213
4.2.33 Tambah Data Moment

Tambah data moment berfungsi untuk membuat tampilan pertambahan data
moment. Tampilan tambah data moment merupakan hasil akhir setelah sintak controller
momentt data, momentt model, view data momentt dibuat, maka proses edit data
moment dapat berjalan dengan tampilan seperti pada Gambar 4.35.
Gambar 4.35 Tampilan Tambah Data Moment

Gambar 4.35 merupakan tampilan dari halaman tambah data moment sistem
tour & travel berbasis web. Tampilan ini menggunakan formulir yang terdiri dari 4
input text yaitu judul moment, lokasi moment, tanggal moment, deskripsi moment, dan
3 tombol button pilih file untuk memilih gambar momentt, simpan yang berguna untuk
menyimpan penginapan, dan ulang berguna untuk mengosongkan inputan.
4.2.34 Data Booking

Data booking berfungsi untuk membuat tampilan data pemesanan yang
dilakukan oleh pelanggan. Tampilan data booking merupakan hasil akhir setelah sintak
214
controller booking data, booking data model, view data booking dibuat, maka proses
data booking dapat berjalan dengan tampilan seperti pada Gambar 4.36.
Gambar 4.36 Tampilan Data Booking

Gambar 4.36 merupakan tampilan dari halaman data booking sistem tour &
travel berbasis web. Tampilan ini menggunakan tabel yang berisi id booking, nama
user, banyak traveler, tanggal booking, nama paket, tanggal travelling, permintaan
special, biaya travelling, biaya tambahan, keterangan biaya tambahan, dan aksi yang
terdiri dari edit booking.
4.2.35 Edit Data Booking

Edit data booking berfungsi untuk membuat tampilan edit data pemesanan.
Tampilan edit data booking merupakan hasil akhir setelah sintak controller booking
data, booking data model, view data booking dibuat, maka proses edit data booking
215
Gambar 4.37 Tampilan Edit Data Booking

Gambar 4.37 merupakan tampilan dari halaman edit data booking sistem tour
pemesanan yang memiliki 2 kolom input text untuk biaya tambahan dan keterangan,
dan memiliki 2 tombol button terdiri dari simpan yang berguna untuk melakukan
perubahan data pada database, dan tombol ulang berguna untuk menghapus isi data
kolom.
4.2.36 Data Pembayaran

Data pembayaran berfungsi untuk membuat tampilan data pembayaran yang
dilakukan oleh pelanggan. Tampilan data pembayaran merupakan hasil akhir setelah
sintak controller pembayaran data, pembayaran data model, view data pembayaran
dibuat, maka proses data pembayaran dapat berjalan dengan tampilan seperti pada
Gambar 4.38.
216
Gambar 4.38 Tampilan Data Pembayaran

Gambar 4.38 merupakan tampilan dari halaman data pembayaran sistem tour
& travel berbasis web. Tampilan ini menggunakan tabel yang berisi id booking, atas
nama pengirim, bukti pembayaran, tanggal upload, total pembayaran, status
pembayaran.
217
4.2.37 Laporan Data Masukan

Laporan data pemasukan berfungsi untuk membuat tampilan data pemasukan
jasa travelling. Tampilan laporan data pemasukan merupakan hasil akhir setelah sintak
controller laporan, laporan model, view data laporan dibuat, maka proses laporan data
pemasukan dapat berjalan dengan tampilan seperti pada Gambar 4.39.
Gambar 4.39 Tampilan Data Masukan

Gambar 4.39 merupakan tampilan dari halaman data laporan pemasukan
sistem tour & travel berbasis web. Tampilan ini menggunakan tabel yang berisi id
booking, tanggal booking, tanggal travelling, biaya travelling, biaya tambahan, dan
keuntungan.
4.2.38 Laporan Data Pembatalan

Laporan data pembatalan berfungsi untuk membuat tampilan data pembatalan
jasa travelling. Tampilan laporan data pembatalan merupakan hasil akhir setelah sintak
218
controller laporan, laporan model, view data laporan dibuat, maka proses laporan data
pemasukan dapat berjalan dengan tampilan seperti pada Gambar 4.40.
Gambar 4.40 Tampilan Laporan Data pembatalan

Gambar 4.40 merupakan tampilan dari halaman data laporan pembatalan
sistem tour & travel berbasis web. Tampilan ini menggunakan tabel yang berisi id
booking, tanggal booking, tanggal travelling, banyak traveler, dan nama paket.
4.2.39 Laporan Data Paket Terfavorit

Laporan data paket terfavorit berfungsi untuk membuat tampilan data paket
yang paling banyak dipesan. Tampilan laporan data paket terfavorit merupakan hasil
akhir setelah sintak controller laporan, laporan model, view data laporan dibuat, maka
proses laporan data paket terfavorit dapat berjalan dengan tampilan seperti pada
Gambar 4.41.
219
Gambar 4.41 Tampilan Laporan Data Paket Terfavorit

Gambar 4.41 merupakan tampilan dari halaman data laporan paket terfavorit
sistem tour & travel berbasis web. Tampilan ini menggunakan tabel yang berisi nama
paket, banyak travller, dan banyak perjalanan yang dilakukan pada jasa pelayanan
travel.
4.3 Uji Coba

Uji coba pada website Sistem Informasi Penyedia Jasa Travel dilakukan
melalui beberapa tahapan, yang dilakukan baik dari sisi user maupun admin. Uji coba
yang dilakukan pada website adalah uji coba melakukan booking hingga tervalidasi.
4.3.1 Dashboard User

Dashboard user merupakan halaman website pertama yang ditampilkan bila
user mengakses Sistem Informasi Penyedia Jasa Travel. Dashboard menampilkan
menu-menu yang dapat diakses oleh user.
220
Gambar 4.42 Tampilan Dashboard Website

Gambar 4.42 merupakan tampilan dashboard dari website Sistem Informasi
Penyedia Jasa Travel yang ditampilkan saat user pertama kali mengakses website. User
dapat melakukan pendaftaran untuk melakukan booking, atau login jika user sudah
memiliki akun.
4.3.2 Register User

Tahap pertama yang harus dilakukan user untuk melakukan booking adalah
dengan melakukan pendaftaran akun pada website. User dapat melakukan registrasi
dengan memilih menu daftar, yang kemudian akan memunculkan form registrasi.
221
Gambar 4.43 Form Registrasi

Gambar 4.43 merupakan tampilan dari form registrasi. User harus mengisi
seluruh field pada form registrasi untuk dapat mendaftarkan akunnya yang kemudian
dapat digunakan untuk login ke website dan melakukan booking.
222
Gambar 4.44 Notifikasi Berhasil Registrasi

Gambar 4.44 merupakan notifikasi yang akan muncul apabila proses registrasi
akun dilakukan dengan benar. Notifikasi berhasil yang muncul memberikan informasi
bahwa user sudah dapat melakukan login dengan akun user yang telah didaftarkan.
4.3.3 Login User

User yang sudah berhasil melakukan registrasi atau sudah memiliki akun
sebelumnya dapat melakukan proses login dengan menginput username dan password
yang sesuai.
223
Gambar 4.45 Tampilan Login User

Gambar 4.45 merupakan tampilan dari menu login user. Login user bertujuan
untuk masuk ke halaman website sebagai user yang telah terdaftar, sehingga dapat
melakukan proses booking.
Gambar 4.46 Tampilan Dashboard dengan Login User

224
Gambar 4.46 merupakan tampilan dari dashboard setelah user melakukan

login. Nama dari user akan ditampilkan pada bagian yang sebelumnya ditempati oleh
pilihan daftar/masuk.
4.3.4 Booking
User yang sudah melakukan login dapat melakukan booking dengan memilih
menu booking now. User kemudian akan dibawa ke tampilan menu booking untuk
memilih paket yang diinginkan.
Gambar 4.47 Tampilan Menu Booking

225
Gambar 4.47 merupakan tampilan menu booking yang menampilkan pilihan

paket yang dapat dipilih user. User yang sudah memilih paket wisata yang diinginkan
dapat melanjutkan ke tahap selanjutnya dengan memilih button next.
Gambar 4.48 Tampilan Lanjutan Menu Booking

Gambar 4.48 merupakan tampilan dari langkah selanjutnya dari menu booking
yang sebelumnya sudah memilih paket destinasi wisata. User harus menginputkan
tanggal traveling dan dapat memberikan permintaan spesial apabila dibutuhkan.
226
Gambar 4.49 Tampilan Akhir Menu Booking

Gambar 4.49 merupakan tampilan akhir dari menu booking. User dapat
memilih jumlah orang yang akan mengikuti trip dari paket destinasi yang telah dipilih.
Tampilan akhir menu booking juga menampilkan total harga yang harus dibayar oleh
user.
227
Gambar 4.50 Tampilan Notifikasi Booking Berhasil

Gambar 4.50 merupakan tampilan yang menunjukkan notifikasi bahwa
booking yang dilakukan oleh user telah berhasil dilakukan dan data yang di-input sudah
disimpan. User akan dibawa kembali ke dashboard setelah menekan tombol OK.
4.3.5 Pembayaran
User dapat melakukan pembayaran atas booking yang sudah dilakukan
sebelumnya. Data booking sebelumnya dapat dilihat pada profil trip user.
Gambar 4.51 Pilihan Menu pada Profil

Gambar 4.51 merupakan pilihan yang ditampilkan dari menu profil yang
digunakan untuk melihat data booking yang sudah dilakukan user.
228
Gambar 4.52 Tampilan Menu Profil Trip

Gambar 4.52 merupakan tampilan dari menu profil user. Menu profil user
menampilkan data dari booking yang sudah dilakukan oleh user, yang berisi id
booking, banyak traveler, tanggal booking, nama paket, tanggal traveling, permintaan
spesial, biaya traveling, biaya tambahan, keterangan biaya tambahan, status
pembayaran, serta aksi yang dapat dilakukan user. Pembayaran dapat dilakukan
dengan menekan button berwarna hijau.
Gambar 4.53 Tampilan Pembayaran Data Booking

Gambar 4.53 merupakan tampilan dari button pembayaran yang sudah
ditekan. User dapat mengisi field kosong dengan nama pengirim yang membayar
tagihan serta meng-upload bukti pembayaran.
229
Gambar 4.54 Notifikasi Pembayaran Berhasil

Gambar 4.54 merupakan tampilan notifikasi yang akan muncul apabila user
telah meng-upload dan mengirim bukti pembayaran. User yang sudah mengirim bukti
pembayaran harus menunggu validasi pembayaran dari admin website. Admin akan
mengirimkan voucher melalui email yang telah didaftarkan.
4.3.6 Login Admin

Validasi dari pembayaran yang telah dilakukan user hanya dapat dilakukan
oleh admin. Admin harus melakukan login terlebih dahulu menggunakan username dan
password yang sudah dimiliki.
230
Gambar 4.55 Tampilan Login Admin

Gambar 4.55 merupakan tampilan login admin. Admin harus menginput data
dengan username dan password yang dimiliki untuk dapat login menuju dashboard
admin.
4.3.7 Validasi Booking

Admin yang sudah berhasil login akan dibawa ke halaman dashboard admin.
Admin dapat memilih menu data pembayaran pada dashboard admin untuk melakukan
validasi pembayaran yang telah dilakukan oleh user.
Gambar 4.56 Dashboard Admin

231
Gambar 4.56 merupakan tampilan dari dashboard admin. Validasi

pembayaran dapat dilakukan pada menu Data Pembayaran.
Gambar 4.57 Menu Data Pembayaran

Gambar 4.57 merupakan tampilan menu data pembayaran pada dashboard
admin. Menu data pembayaran menampilkan data seluruh booking yang dilakukan oleh
seluruh user beserta dengan status validasinya. booking yang sudah tervalidasi dapat
dilihat pada bagian status pembayarannya, sedangkan booking yang belum tervalidasi
memiliki sebuah button untuk melakukan validasi.
Gambar 4.58 Notifikasi Warning Validasi

Gambar 4.58 menampilkan warning atas button yang dipilih untuk melakukan
validasi untuk menghindari kesalahan pemilihan button. Admin yang sudah yakin dapat
memilih button OK untuk melanjutkan.
232
Gambar 4.59 Booking yang Sudah Tervalidasi

Gambar 4.59 menampilkan data booking dari user prastha yang sebelumnya
belum divasidasi menjadi tervalidasi setelah dilakukan proses validasi oleh admin.
Booking yang telah tervalidasi kemudian akan dikirmkan voucher atas booking yang
sudah dilakukan.
4.3.8 Tambah Data Hotel

Data hotel yang tersedia pada website dapat ditambahkan oleh admin. Pilihan
tambah hotel tersedia di menu data hotel pada dashboard admin. Berikut merupakan
tampilan pilihan tambah data hotel ditampilkan pada Gambar 4.60.
233
Gambar 4.60 Tampilan Pilihan Tambah Data Hotel

Gambar 4.60 merupakan tampilan menu data hotel. Data hotel dapat
ditambahkan melalui menu tambah data hotel. Selanjutnya akan ditampilkan form
pengisian untuk data hotel yang baru. Berikut merupakan form penambahan data hotel
ditampilkan pada Gambar 4.61.
Gambar 4.61 Tampilan Form Tambah Data Hotel

234
Gambar 4.61 merupakan tampilan form tambah data hotel. Selanjutnya adalah
mengisi form tambah data hotel seperti Gambar 4.62 sebagai berikut.
Gambar 4.62 Tampilan Form yang sudah diisi Data

Gambar 4.62 merupakan tampilan form yang sudah diisi data hotel baru.
Selanjutnya memilih tombol simpan. Selanjutnya data hotel akan tersimpan dan
ditampilkan pada daftar hotel seperti Gambar 4.63 sebagai berikut.
235
Gambar 4.63 Tampilan Data Hotel Baru yang Sudah Masuk pada Daftar Hotel
Berdasarkan Gambar 4.63, data hotel berhasil ditambahkan ke dalam daftar
hotel yang sudah tersedia.
4.3.9 Ubah Data Hotel

Data hotel yang tersedia pada website dapat diubah oleh admin. Pilihan ubah
data hotel tersedia di menu data hotel pada dashboard admin. Berikut merupakan
tampilan pilihan ubah data hotel ditampilkan pada Gambar 4.64.
Gambar 4.64 Tampilan Pilihan Ubah Data Hotel

Gambar 4.64 merupakan tampilan menu data hotel. Data hotel dapat diubah
melalui menu ubah data hotel. Selanjutnya akan ditampilkan form pengisian untuk data
236
hotel yang baru. Berikut merupakan form ubah data hotel ditampilkan pada Gambar
4.65.
Gambar 4.65 Tampilan Form Ubah Data Hotel

Gambar 4.65 merupakan tampilan form ubah data hotel. Selanjutnya adalah
mengubah data hotel lama dengan mengisi form ubah data hotel seperti Gambar 4.66
sebagai berikut.
237
Gambar 4.66 Tampilan Form yang sudah Diubah

Gambar 4.66 merupakan tampilan form yang sudah diisi data hotel baru. Data
yang diubah yaitu harganya yang sebelumnya Rp.140000 diubah menjadi Rp.500000.
Selanjutnya memilih tombol simpan. Selanjutnya data hotel yang telah diubah akan
tersimpan dan ditampilkan pada daftar hotel seperti Gambar 4.67 sebagai berikut.
238
Gambar 4.67 Tampilan Data Hotel Baru yang Sudah Dirubah

Berdasarkan Gambar 4.67, data hotel berhasil diubah dan ditampilkan dalam
daftar hotel yang tersedia.
4.3.10 Tambah Data Wisata

Data tempat wisata yang tersedia pada website dapat ditambahkan oleh admin.
Pilihan tambah tempat wisata tersedia di menu data wisata pada dashboard admin.
Berikut merupakan tampilan pilihan tambah data wisata ditampilkan pada Gambar
4.68.
Gambar 4.68 Tampilan Pilihan Tambah Data Wisata

Gambar 4.68 merupakan tampilan menu data wisata. Data wisata dapat
ditambahkan melalui menu tambah data wisata. Selanjutnya akan ditampilkan form
239
pengisian untuk data wisata yang baru. Berikut merupakan form penambahan data
wisata ditampilkan pada Gambar 4.69.
Gambar 4.69 Tampilan Form Tambah Data Wisata

Gambar 4.69 merupakan tampilan form tambah data wisata. Selanjutnya adalah
mengisi form tambah data wisata seperti Gambar 4.70 sebagai berikut.
240

Gambar 4.70 merupakan tampilan form yang sudah diisi data wisata baru.
Selanjutnya memilih tombol simpan. Selanjutnya data wisata akan tersimpan dan
ditampilkan pada daftar wisata seperti Gambar 4.71 sebagai berikut.
241
Gambar 4.71 Tampilan Data Wisata Baru yang Sudah Masuk pada Daftar Wisata
Berdasarkan Gambar 4.71, data wisata berhasil ditambahkan ke dalam daftar
wisata yang sudah tersedia.
242
4.3.11 Ubah Data Wisata

Data wista yang tersedia pada website dapat diubah oleh admin. Pilihan ubah
data wisata tersedia di menu data wisata pada dashboard admin. Berikut merupakan
tampilan pilihan ubah data hotel ditampilkan pada Gambar 4.72.
Gambar 4.72 Tampilan Pilihan Ubah Data Wisata

Gambar 4.72 merupakan tampilan menu data wisata. Data wisata dapat diubah
melalui menu ubah data wisata. Selanjutnya akan ditampilkan form pengisian untuk
data wisata yang baru. Berikut merupakan form ubah data wisata ditampilkan pada
Gambar 4.73.
243
Gambar 4.73 Tampilan Form Ubah Data Wisata

Gambar 4.73 merupakan tampilan form ubah data wisata. Selanjutnya adalah
mengubah data wisata lama dengan mengisi form ubah data wisata seperti Gambar 4.74
sebagai berikut.
244

Gambar 4.74 merupakan tampilan form yang sudah diisi data wisata baru. Data
yang diubah yaitu harga tiket yang sebelumnya Rp. diubah menjadi Rp.. Selanjutnya
memilih tombol simpan. Selanjutnya data wisata yang telah diubah akan tersimpan dan
ditampilkan pada daftar wisata seperti Gambar 4.75 sebagai berikut.
245
Gambar 4.75 Tampilan Data Wisata Baru yang Sudah Dirubah

Berdasarkan Gambar 4.75, data wisata berhasil diubah dan ditampilkan dalam
daftar wisata yang tersedia.
4.3.12 Tambah Data Paket

Data paket wisata yang tersedia pada website dapat ditambahkan oleh admin.
Pilihan tambah data paket wisata tersedia di menu data paket wisata pada dashboard
admin. Berikut merupakan tampilan pilihan tambah data pake wisata ditampilkan pada
Gambar 4.76.
Gambar 4.76 Tampilan Pilihan Tambah Data Paket Wisata

Gambar 4.76 merupakan tampilan menu data paket wisata. Data paket wisata
dapat ditambahkan melalui menu tambah data wisata. Selanjutnya akan ditampilkan
form pengisian untuk data paket wisata yang baru. Berikut merupakan form
penambahan data paket wisata ditampilkan pada Gambar 4.77.
246
Gambar 4.77 Tampilan Form Tambah Data Paket Wisata

Gambar 4.77 merupakan tampilan form tambah data paket wisata. Selanjutnya
adalah mengisi form tambah data paket wisata seperti Gambar 4.78 sebagai berikut.
247

Gambar 4.78 merupakan tampilan form yang sudah diisi data paket wisata baru.
Selanjutnya memilih tombol simpan. Selanjutnya data paket wisata akan tersimpan dan
ditampilkan pada daftar paket wisata seperti Gambar 4.79 sebagai berikut.
Gambar 4.79 Tampilan Data Paket Wisata Baru yang Sudah Masuk pada Daftar Paket Wisata
Berdasarkan Gambar 4.79, data paket wisata berhasil ditambahkan ke dalam
daftar paket wisata yang sudah tersedia. Setelah selesai menambahkan data paket
wisata. Selanjutnya adalah memasukkan data tujuan tempat wisata dan data hotel ke
dalam paket wisata yang tersedia. Data tempat wisata dapat dimasukkan dengan cara
memilih menu tujuan wisata. Tampilan letak menu tujuan wisata akan ditampilkan
pada Gambar 4.80.
Gambar 4.80 Tampilan Letak Menu Tujuan Wisata

Gambar 4.80 merupakan letak menu tujuan wisata, yaitu button yang berwarna
hijau. Selanjutnya akan muncul tampilan data tempat wisata yang tersedia yang
248
Gambar 4.81 Tampilan Menu Tujuan Wisata

Gambar 4.81 merupakan tampilan menu tujuan wisata. Pilih tambah wisata
untuk memunculkan daftar tempat wisata yang tersedia. Berikut tampilan tempat
wisata yang tersedia ditampilkan pada Gambar 4.82
Gambar 4.82 Tampilan Daftar Tempat Wisata
Gambar 4.81 merupakan tampilan daftar tempat wisata yang tersedia. Pilih
simpan untuk memilih tempat wisata yang ingin dimasukkan ke dalam paket wisata.
Berikut tampilan tempat wisata yang sudah masuk ke dalam paket wisata ditampilkan
pada Gambar 4.83.
249
Gambar 4.83 Daftar Tempat Wisata yang Masuk Dalam Paket

Gambar 4.83 merupakan tampilan daftar tempat wisata yang telah masuk ke
dalam paket wisata. Selanjutnya adalah memasukan data hotel kedalam paket wisata.
Data hotel dapat dimasukkan dengan cara memilih menu hotel. Tampilan letak menu
hotel akan ditampilkan pada Gambar 4.84.
Gambar 4.84 Tampilan Letak Menu Hotel

Gambar 4.84 merupakan letak menu hotel yang ditunjukkan oleh button yang
berwarna biru. Selanjutnya akan muncul tampilan data hotel yang tersedia yang
250
Gambar 4.85 Tampilan Menu Hotel

Gambar 4.85 merupakan tampilan menu Hotel. Pilih tambah hotel untuk
memunculkan daftar hotel yang tersedia. Berikut tampilan hotel yang tersedia
ditampilkan pada Gambar 4.86
Gambar 4.86 Tampilan Daftar Hotel

Gambar 4.86 merupakan tampilan daftar hotel yang tersedia. Pilih simpan
untuk memilih hotel yang ingin dimasukkan ke dalam paket wisata. Berikut tampilan
hotel yang sudah masuk ke dalam paket wisata ditampilkan pada Gambar 4.86.
251
Gambar 4.87 Daftar Hotel yang Masuk Dalam Paket

Gambar 4.87 merupakan tampilan daftar tempat wisata yang telah masuk ke
dalam paket wisata. Data paket wisata sudah berhasil ditambahkan data tempat wisata
dan data hotel yang tersedia
4.3.13 Ubah Data Paket

Data paket wista yang tersedia pada website dapat diubah oleh admin. Pilihan
ubah data paket wisata tersedia di menu data wisata pada dashboard admin. Berikut
merupakan tampilan pilihan ubah data hotel ditampilkan pada Gambar 4.88.
Gambar 4.88 Tampilan Pilihan Ubah Data Paket Wisata

Gambar 4.88 merupakan tampilan menu data paket wisata yang ditujukkan oleh
button berwarna biru tua. Data wisata dapat diubah melalui menu ubah data paket
wisata. Selanjutnya akan ditampilkan form pengisian untuk data paket wisata yang
baru. Berikut merupakan form ubah data paket wisata ditampilkan pada Gambar 4.89.
252
Gambar 4.89 Tampilan Form Ubah Data Paket Wisata

Gambar 4.89 merupakan tampilan form ubah data paket wisata. Selanjutnya
adalah mengubah data paket wisata lama dengan mengisi form ubah data paket wisata
seperti Gambar 4.90 sebagai berikut.
253

Gambar 4.90 merupakan tampilan form yang sudah diisi data paket wisata baru.
Data yang diubah yaitu nama paket wisata yang sebelumnya ...diubah menjadi ...
Selanjutnya memilih tombol simpan. Selanjutnya data paket wisata yang telah diubah
akan tersimpan dan ditampilkan pada daftar paket wisata seperti Gambar 4.91 sebagai
berikut.
Gambar 4.91 Tampilan Data Wisata Baru yang Sudah Dirubah

254
Berdasarkan Gambar 4.91, data paket wisata berhasil diubah dan ditampilkan
dalam daftar paket wisata yang tersedia.
BAB V
PENUTUP
BAB V memaparkan simpulan dari praktikum keseluruhan dan juga saran

yang didapat dari pembuatan laporan yang diterima dari teman-teman maupun dari
dosen pengampu mata kuliah praktikum Pemrogrman Internet.
5.1. Kesimpulan
Berdasarkan sistem informasi dan rumusan masalah yang telah dibuat pada
Praktikum Pemrograman Internet, maka simpulan yang dapat diambil melalui
praktikum ini yaitu sebagai berikut.
a. Sistem Informasi Penyedia Jasa Travel dirancang dan dikembangkan dengan
menggukan bahasa pemrograman PHP 7 dan menggunakan framework
CodeIgniter. Database dari Sistem Informasi Penyedia Jasa Travel terdiri dari
dua belas tabel utama, yaitu tabel tbl_admin, tbl_booking,
tbl_det_paket_hotel, tbl_det_paket_wisata, tbl_hotel,
tbl_jenis_wisata, tbl_momentt, tbl_paket, tbl_pembayaran,
tbl_user, dan tbl_wisata. Pelaku dari bisnis proses pada Sistem Informasi
Penyedia Jasa Travel adalah pengguna dan admin, yang memiliki batasan
tersendiri dalam menjalankan perannya sesuai dengan use case diagram.
b. Pengolahan paket destinasi wisata, harga paket, serta sarana yang tersedia
dilakukan dengan menjalankan query berdasarkan data yang terdapat di
database, serta menggunakan session dan ajax untuk menampilkan data hasil
proses.
255
256
5.2. Saran
Saran yang dapat diberikan mengenai praktikum ini adalah perlunya
meningkatkan bimbingan dari asisten dosen terutama pengaturan waktu yang tepat dan
konsisten agar praktikum dapat berjalan dengan lancar, serta meningkatkan niat belajar
mandiri dengan memperbanyak mencari sumber materi pada buku maupun materi di
internet.
DAFTAR PUSTAKA
Dini. 2015. Bahasa Pemrogrman PHP. Diakses padaTanggal 1 April 2018.

< http://dosenit.com/software/sistem-informasi/pemrogrman-PHP>.
Niko. 2014. Pengenalan Bahasa Pemrograman Web. Diakses Tanggal 29 Maret 2018.
<http://www.pintarkomputer.com/pengenalan-pemrogrman-web-linux/>.
Pradhana, Harindra Wisnu. Pengenalan Frame work Sistem Informasi. Diakses pada
Tanggal 29 Maret 2018. Jurnal Sistem Informasi. 1-2.
Yousa, Williams. 2016. Definisi Framework CI. Diakses pada Tanggal 30 Maret 2018.
<https://www.academia.edu/11297116/Definisi_Framework CI>.
Anonimous. 2013. Pengertian Travel. Diakses pada 24 Mei 2018.
<http://harmonitravel.com/pengertian-travel/>
Agil Wirawan, Faiz. 2015. Pengertian, fungsi, dan sejarah HTML. Diakses pada
tanggal 22 Mei 2018 <http://www.burung-net.com/2015/05/pengertian-html-
fungsi-html-serta-sejarah-html.html>
Hakim, Zainal. 2013. Mengenal Htaccess dan fungsinya. Diakses pada 20 Mei 2018.
<http://www.zainalhakim.web.id/posting/mengenal-htaccess-dan-
fungsinya.html>
257

Laporan Praktikum Pemrograman Internet Kelompok 6 FIX

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Praktikum Pemrograman Internet Kelompok 6 FIX

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM

1. I Putu Gede Eka Yuda Arista (1605551018)

PROGRAM STUDI TEKNOLOGI INFORMASI

Jimbaran, 1 Mei 2018

Teknologi Informasi merupakan istilah umum untuk teknologi apapun yang

Kata Kunci: CodeIgniter, model, view, controller, database, framework

PRAKTIKUM PEMROGRAMAN INTERNET ...................................................... i

Tabel 1.1 Sistematika Penulisan ................................................................................... 3

Kode Program 4.1 Model Admin................................................................................. 22

BAB I Pendahuluan membahas tentang latar belakang, rumusan masalah,

1.2 Rumusan Masalah

1.3 Tujuan Penelitian

1.4 Manfaat Penelitian

1.5 Batasan Masalah

1.6 Sistematika Penulisan

Tabel 1.1 Sistematika Penulisan

teori dalam pengerjaan laporan praktikum Pemrograman

BAB II merupakan tinjauan pustaka yang digunakan dalam praktikum

g. Mengatur perncanaan tour yang akan diselenggarakan serta mengunjungi

2.2 Sistem Informasi

Gambar 2.1 Hal yang Berkaitan dengan Sistem Informasi

Gambar 2.2 Blok-blok Dalam Sistem Informasi

f. Blok Kendali, Supaya sistem informasi dapat berjalan sesuai dengan

2.3 Model, View, dan Controller

Penggunaan prinsip MVC pada suatu aplikasi dapat dikembangkan sesuai

Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan

2.7.2 Fungsi dan Kegunaan HTML

2.7.3 Struktur Dasar HTML

3.2 Metode Observasi

3.3 Analisis Data

3.4 Sumber Data

3.6 Perancangan Database

Gambar 3.2 PDM dari Sistem Informasi Penyedia Jasa Travel

tbl_hotel, tbl_jenis_wisata, tbl_momentt, tbl_paket, tbl_pembayaran,

tbl_user, dan tbl_wisata.

BAB IV Hasil dan Pembahasan membahas mengenai modul yang dipraktikan

4.1 Source Code

<?php if ( ! defined('BASEPATH')) exit('No direct script access

class AdminModel extends CI_Model {

public function view_content(){

public function view_gallery(){

public function login($where){

4.1.1.2 Model Booking

<?php if ( ! defined('BASEPATH')) exit('No direct script access

class BookingModel extends CI_Model {

public function harga($id){

public function booking($data){

4.1.1.3 Model Data Booking

<?php if ( ! defined('BASEPATH')) exit('No direct script access

class bookingdataModel extends CI_Model {

public function view_booking(){

public function view_biaya($id){

public function update($id,$data){

public function cancel($id,$data){

4.1.1.4 Model Destinasi

<?php if ( ! defined('BASEPATH')) exit('No direct script access

class DestinasiModel extends CI_Model {

public function view_wisata(){

public function get_total(){

public function get_filter($lokasi, $jenis){

public function get_current_page_records($limit, $start){

public function get_current_page_records_filter($limit,

4.1.1.5 Model Home

<?php if ( ! defined('BASEPATH')) exit('No direct script access