APLIKASI TRAVEL BERBASIS WEB DAN BOOTSTRAP RESPONSIVE MENGGUNAKAN FRAMEWORK CODEIGNITER PADA PT.XYZ HOTBEN HABEAHAN 41513120046 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA 2016 i
APLIKASI TRAVEL BERBASIS WEB DAN BOOTSTRAP RESPONSIVE MENGGUNAKAN FRAMEWORK CODEIGNITER PADA PT.XYZ Laporan Tugas Akhir Diajukan Untuk Melengkapi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer Oleh: HOTBEN HABEAHAN 41513120046 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA 2016 ii
iii
iv
KATA PENGANTAR Segala syukur dan puji hanya bagi Tuhan Yesus Kristus, oleh karena anugerah-nya yang melimpah, kemurahan dan kasih setia yang besar, sehingga penulis dapat menyelesaikan laporan tugas akhir yang merupakan salah satu persyaratan untuk menyelesaikan program studi strata satu (S1) pada Jurusan Teknik Informatika Universitas Mercu Buana. Penulis menyadari bahwa laporan tugas akhir ini masih jauh dari sempurna. Karena itu, kritik dan saran akan senantiasa penulis terima dengan senang hati. Dengan segala keterbatasan, penulis menyadari pula bahwa laporan tugas akhir ini takkan terwujud tanpa bantuan, bimbingan, dan dorongan dari berbagai pihak. Untuk itu, dengan segala kerendahan hati, penulis menyampaikan ucapan terima kasih kepada: 1. Bapak Drs. Achmad Kodar, MT, selaku pembimbing tugas akhir pada Jurusan Teknik Informatika Universitas Mercu Buana. 2. Bapak Sabar Rudianto, S.Kom, M.Kom. selaku Kepala Program Studi Teknik Informatika Fakultas Ilmu Komputer Universitas Mercubuana. 3. Ibu Nia Kusuma Wardhani, S.Kom, MM. selaku koordinator Tugas Akhir Teknik Informatika Fakultas Ilmu Komputer Universitas Mercubuana. 4. Kedua orang tua (Najir Habeahan, dan Illeria Sitanggang) yang telah tulus ikhlas memberikan kasih sayang, cinta, doa, perhatian, dukungan moral dan materil yang telah diberikan selama ini. Terima kasih telah meluangkan segenap waktunya untuk mengasuh, mendidik, membimbing, dan mengiringi perjalanan hidup penulis dengan dibarengi alunan doa yang tiada henti agar penulis sukses dalam menggapai cita-cita. 5. Medina R Tumanggor terimakasih sudah menggandeng tangan saya dalam doa, selalu memberikan dorongan dan semangat dalam menyeselesaikan skripsi ini. v
6. Keluarga Besar kami, Bapak, Ibu, adik-adik penulis yang selalu memberikan semangat dan motivasi yang tiada henti-hentinya dan selalu ada saat kami membutuhkan dukungan moril maupun materil. 7. Saudara dan sahabat-sahabatku terutama Kawan-kawan di Universitas Mercubuana yang telah memberikan dukungan moral untuk terus meyelesaikan tugas akhir ini Kiranya kasih Tuhan Yesus Kristus menyertai kita semua. Amin Jakarta, 29 Januari 2016 Penulis vi
DAFTAR ISI LEMBAR JUDUL LEMBAR JUDUL DENGAN SPESIFIKASI LEMBAR PERNYATAAN LEMBAR PENGESAHAN KATA PENGANTAR... i ABSTRAK... iii ABSTRACT... iv DAFTAR ISI... v DAFTAR TABEL... xi DAFTAR GAMBAR... xii BAB I PENDAHULUAN... 1 1.1 Latar Belakang Masalah... 1 1.2 Perumusan Masalah... 2 1.3 Batasan Masalah... 2 1.4 Tujuan dan Manfaat... 2 1.4.1 Tujuan... 2 1.4.2 Manfaat... 3 1.5 Metode Penulisan... 3 1.6 Sistematika Penulisan... 4 BAB II LANDASAN TEORI... 2.1 Konsep Dasar Sistem Informasi... 5 2.1.1 Sistem... 5 2.1.2 Defenisi Sistem Informasi... 5 2.2 Perangkat Lunak... 6 2.3 Konsep Pemodelan Sistem... 6 2.3.1 Unified Modeling Language (UML)... 6 2.3.1.1 Use Case Diagram... 7 2.3.1.2 Activity Diagram... 7 v
2.3.1.3 Sequence Diagram... 9 2.3.1.4 Class Diagram... 10 2.3.1.5 Component Diagram... 10 2.3.1.6 Deployment Diagram... 11 2.4 Aplikasi Travel Berbasis Web... 12 2.5 Konsep Dasar Teori Web... 12 2.5.1 Web... 12 2.5.2 Web Server... 12 2.5.3 Pengertian Internet... 12 2.5.4 World Wide Web (WWW)... 13 2.5.5 HTTP... 13 2.5.6 Uniform Resource Locator (URL)... 13 2.6 Hypertext Markup Language (HTML)... 13 2.6.1 Definisi Elemen dan Tag HTML... 14 2.7 PHP... 14 2.7.1 Kelebihan & Kekurangan PHP... 14 2.8 Cascading Style Sheets (CSS)... 15 2.9 Java Script... 16 2.10 Framework Codeigniter... 16 2.10.1 Framework... 16 2.10.2 Codeigniter... 16 2.10.3 PHP Framework... 16 2.10.4 MVC (Model View Controller)... 17 2.10.5 Kelebihan dan Kekurangan Codeigniter... 18 2.11 DBMS (Database Management System)... 18 2.12 MySQL... 20 2.13 Perangkat Lunak Yang Digunakan... 21 2.13.1 XAMPP... 21 2.14 Bootstrap... 22 2.14.1 Pengertian Bootstrap... 22 2.14.2 Kelebihan dan Kekurangan... 23 2.15 Metode Pengujian Black Box... 23 vi
BAB III ANALISIS DAN PERANCANGAN... 25 3.1 Analisa Masalah... 25 3.2 Analisis Sistem Yang Sedang Berjalan... 25 3.2.1 Analisis Dokumen Yang Sedang Berjalan... 25 3.2.2 Analisis Prosedur yang Sedang Berjalan... 26 3.2.2.1 Activity Diagram... 27 3.2.3.2 Skenario Activity Diagram... 30 3.2.4 Evaluasi Sistem Yang Sedang Berjalan... 32 3.3 Analisis Perancangan Sistem Yang Diusulkan... 33 3.3.1 Tujuan Perancangan... 33 3.3.2 Gambaran Umum Sistem Yang Diusulkan... 33 3.3.3 Perancangan Prosedur yang Diusulkan... 34 3.3.4 Pemodelan Sistem yang Diusulkan... 34 3.3.5 Aktor... 34 3.3.6 Diagram Use Case... 35 3.3.7 Activity Diagram... 35 3.3.7.1 Activity Diagram Registrasi Akun... 36 3.3.7.2 Activity Diagram Log In... 37 3.3.7.3 Activity Diagram Pemesanan Tiket... 38 3.3.7.4 Activity Diagram Status Pesan... 39 3.3.7.5 Activity Diagram Konfirmasi Pemesanan... 39 3.3.7.6 Activity Diagram Cetak Tiket... 40 3.3.7.7 Activity Diagram Ubah Profil... 41 3.3.7.8 Activity Diagram Ubah Password... 41 3.3.7.9 Activity Diagram Login Admin... 42 3.3.7.10 Activity Diagram Mengelolah Pesan... 43 3.3.7.11 Activity Diagram Mengelolah Tiket... 44 3.3.7.12 Activity Diagram Mengelolah User... 44 3.3.7.13 Activity Diagram Input Jadwal... 45 3.3.7.14 Activity Diagram Edit Jadwal... 46 3.3.7.15 Activity Diagram Hapus Jadwal... 47 3.3.7.16 Activity Diagram Input Pesawat... 48 vii
3.3.7.17 Activity Diagram Edit Pesawat... 49 3.3.7.18 Activity Diagram Hapus Pesawat... 50 3.3.7.19 Activity Diagram Input Bandara... 50 3.3.7.20 Activity Diagram Edit Bandara... 51 3.3.7.21 Activity Diagram Hapus Bandara... 52 3.3.7.22 Activity Diagram Edit Staf... 53 3.3.7.23 Activity Diagram Laporan... 54 3.3.7.24 Activity Diagram Input Staf... 54 3.3.8 Sequence Diagram... 55 3.3.8.1 Sequence Diagram Registrasi Akun... 56 3.3.8.2 Sequence Diagram Log In... 56 3.3.8.3 Sequence Diagram Pemesanan Tiket... 57 3.3.8.4 Sequence Diagram Status Pesan... 57 3.3.8.5 Sequence Diagram Konfirmasi Pesanan... 58 3.3.8.6 Sequence Diagram Cetak Tiket... 59 3.3.8.7 Sequence Diagram Ubah Profil... 59 3.3.8.8 Sequence Diagram Ubah Password... 60 3.3.8.9 Sequence Diagram Login Admin... 60 3.3.8.10 Sequence Diagram Kelolah Tiket... 61 3.3.8.11 Sequence Diagram Kelolah User Admin... 61 3.3.8.12 Sequence Diagram Kelolah Pesawat... 62... 3.3.8.13 Sequence Diagram Kelolah Bandara... 62 3.3.8.14 Sequence Diagram Staf... 63 3.3.8.17 Sequence Diagram Laporan... 63 3.3.9 Class Diagram... 64 3.3.10 Component Diagram... 65 3.3.11 Deployment Diagram... 65 3.4 Perancangan Database... 66 3.4.1 Perancangan Struktur Tabel... 66 3.5 Perancangan Antar Muka... 71 3.5.1 Perancangan Struktur Menu User... 71 3.5.2 Percancangan Interface Pada User... 71 viii
3.5.2.1 Perancangan Menu Home... 72 3.5.2.2 Perancangan Log In... 73 3.5.2.3 Perancangan Registrasi... 74 3.5.2.4 Perancangan Pencarian Tiket... 75 3.5.2.5 Perancangan Pemesanan Tiket... 76 3.5.2.6 Perancangan Konfirmasi Pembayaran... 77 3.5.3 User Interface Pada Administrator... 78 3.5.3.1 Perancangan Home Admin... 78 3.5.3.2 Perancangan Halaman Pesanan... 79 3.5.3.3 Perancangan Halaman Tiket... 80 3.5.3.4 Perancangan Halaman Data User... 81 3.5.3.5 Perancangan Halaman Jadwal... 82 3.5.3.6 Perancangan Halaman Pesawat... 83 3.5.3.7 Perancangan Halaman Bandara... 84 3.5.3.8 Perancangan Halaman Staf... 85 3.5.3.9 Perancangan Halaman Laporan... 86 BAB IV IMPLEMENTASI DAN PENGUJIAN... 4.1 Implementasi Sistem... 87 4.1.1 Implementasi Basis Data... 87 4.1.2 Implementasi Perangkat Keras... 93 4.1.3 Implementasi Perangkat Lunak... 93 4.1.4 Implementasi Antar Muka... 94 4.1.4.1 Tampilan Halaman Utama... 94 4.1.4.2 Tampilan Halaman Tentang Kami... 95 4.1.4.3 Tampilan Halaman Hubungi Kami... 95 4.1.4.4 Tampilan Halaman Log In... 96 4.1.4.5 Tampilan Halaman Daftar... 96 4.1.4.6 Tampilan Halaman Hasil Pencarian Tiket... 97 4.1.4.7 Tampilan Halaman Pesanan... 98 4.1.4.8 Tampilan Halaman Pembayaran... 99 4.1.4.9 Tampilan Halaman Konfirmasi Pembayaran... 100 ix
4.1.4.10 Tampilan Halaman Akun User... 101 4.1.4.11 Tampilan Halaman Detail Tiket... 102 4.1.4.12 Tampilan Halaman Login Backend... 102 4.1.4.13 Tampilan Halaman Utama Backend... 103 4.1.4.14 Tampilan Halaman Pesanan Backend... 103 4.1.4.15 Tampilan Halaman Tiket Backend... 104 4.1.4.16 Tampilan Halaman User Abckend... 104 4.1.4.17 Tampilan Halaman Jadwal Backend... 105 4.1.4.18 Tampilan Halaman Pesawat Backend... 105 4.1.4.19 Tampilan Halaman Bandara Backend... 106 4.1.4.20 Tampilan Halaman Staf Backend... 106 4.1.4.21 Tampilan Halaman Laporan Backend... 107 4.2 Pengujian Sistem... 107 4.3 Pengujian Black Box... 107 4.4 Kesimpulan Hasil Pengujian... 114 BAB V KESIMPULAN DAN SARAN... 128 5.1 Kesimpulan... 115 5.2 Saran... 115 DAFTAR PUSTAKA... 116 LISTING PROGRAM... 120 x
DAFTAR TABEL 2.1 Use Case Diagram... 7 2.2 Activity Diagram... 8 2.3 Sequence Diagram... 9 2.4 Class Diagram... 10 2.5 Component Diagram... 11 2.6 Deployment Diagram... 11 3.1 Skenario Activity Diagram Dari Pemesanan Tiket... 30 3.2 Skenario Activity Diagram Dari Pembelian Tiket... 31 3.3 Tabel Staf yang Bekerja di PT. XYZ... 66 3.4 Tabel User Log In... 66 3.5 Tabel Pesawat... 67 3.6 Tabel Fasilitas Pesawat... 67 3.7 Tabel Bandara... 68 3.8 Tabel Penumpang... 68 3.9 Tabel Tiket... 69 3.10 Tabel Pesanan... 69 3.11 Tabel Jadwal... 70 3.12 Tabel Konfirmasi... 70 4.1 Tabel Pengujian Black Box... 107 xi
DAFTAR GAMBAR 3.1 Analisis Dokumen Yang Sedang Berjalan... 25 3.2 Use Case Diagram Sistem Yang Sedang Berjalan... 27 3.3 Activity Diagram Pemesanan Tiket... 28 3.4 Activity Diagram Pembelian Tiket... 29 3.5 Diagram Use Case Sistem yang Diusulkan... 35 3.6 Activity Diagram Registrasi... 36 3.7 Activity Diagram Log In... 37 3.8 Activity Diagram Pemesanan... 38 3.9 Activity Diagram Status Pesanan... 39 3.10 Activity Diagram Konfirmasi Pemesanan... 39 3.11 Activity Diagram Diagram Cetak Tiket... 40 3.12 Activity Diagram Ubah Profil... 41 3.13 Activity Diagram Ubah Password... 41 3.14 Activity Diagram Login Admin... 42 3.15 Activity Diagram Mengelolah Pesanan... 43 3.16 Activity Diagram Mengelolah Tiket... 44 3.17 Activity Diagram Mengelolah User... 44 3.18 Activity Diagram Input Jadwal... 45 3.19 Activity Diagram Edit Jadwal... 46 3.20 Activity Diagram Hapus Jadwal... 47 3.21 Activity Diagram Input Pesawat... 48 3.22 Activity Diagram Edit Pesawat... 49 3.23 Activity Diagram Hapus Pesawat... 50 3.24 Activity Diagram Input Bandara... 50 3.25 Activity Diagram Edit Bandara... 51 3.26 Activity Diagram Hapus Bandara... 52 3.27 Activity Diagram Edit Staf... 53 3.28 Activity Diagram Laporan Tiket... 54 3.29 Activity Diagram Input Staf... 54 3.30 Activity Diagram Registrasi Akun... 56 xii
3.31 Sequence Diagram Log In... 56 3.32 Sequence Diagram Pemesanan Tiket... 57 3.33 Sequence Diagram Status Pesanan... 57 3.34 Sequence Diagram Konfirmasi Pesanan... 58 3.35 Sequence Diagram Cetak Tiket... 59 3.36 Sequence Diagram Ubah Profil... 59 3.37 Sequence Diagram Ubah Password... 60 3.38 Sequence Diagram Log In Admin... 60 3.39 Sequence Diagram Kelolah Tiket... 61 3.40 Sequence Diagram Kelolah User Admin... 61 3.41 Sequence Diagram Kelolah Pesawat... 62 3.42 Sequence Diagram Kelolah Bandara... 62 3.43 Sequence Diagram Staf... 63 3.44 Sequence Diagram Laporan... 63 3.45 Class Diagram... 64 3.46 Component Diagram... 65 3.47 Deployment Diagram... 65 3.48 Struktur Menu User... 71 3.49 Perancangan Menu Home... 72 3.50 Perancangan Login... 73 3.51 Perancangan Registrasi... 74 3.52 Perancangan Pencarian Tiket... 75 3.53 Perancangan Pemesanan Tiket... 76 3.54 Perancangan Konfirmasi Pembayaran... 77 3.55 Perancangan Halaman Home Admin... 78 3.56 Perancangan Halaman Pesanan... 79 3.57 Perancangan Halaman Tiket... 80 3.58 Perancangan Halaman Data User... 81 3.59 Perancangan Halaman Jadwal... 82 3.60 Perancangan Halaman Pesawat... 83 3.61 Perancangan Halaman Bandara... 84 3.62 Perancangan Halaman Staf... 85 xiii
3.63 Perancangan Halaman Laporan... 86 4.1 Tabel Staf... 88 4.2 Tabel Penumpang... 88 4.3 Tabel Pesanan... 89 4.4 Tabel Tiket... 89 4.5 Tabel Jadwal... 90 4.6 Tabel Pesawat... 90 4.7 Tabel Fasilitas Pesawat... 91 4.8 Tabel Bandara... 91 4.9 Tabel User Log In... 92 4.10 Tabel Konfirmasi Pesanan... 92 4.11 Halaman Utama... 94 4.12 Halaman Tentang Kami... 95 4.13 Halaman Hubungi Kami... 95 4.14 Halaman Log In... 96 4.15 Halaman Daftar... 96 4.16 Halaman Hasil Pencarian Tiket... 97 4.17 Halaman Pesanan... 98 4.18 Halaman Pembayaran... 99 4.19 Halaman Konfirmasi Pembayaran... 100 4.20 Halaman Akun User... 101 4.21 Halaman Detail Tiket... 102 4.22 Halaman Log In Backend... 102 4.23 Halaman Utama Backend... 103 4.24 Halaman Pesanan Backend... 103 4.25 Halaman Tiket Backend... 104 4.26 Halaman User Backend... 104 4.27 Halaman Jadwal Backend... 105 4.28 Halaman Pesawat Backend... 105 4.29 Halaman Bandara Backend... 106 4.30 Halaman Staf Backend... 106 4.31 Halaman Laporan Backend... 107 xiv