PETA INTERAKTIF USU BERBASIS WEB TUGAS AKHIR ISRA MIKRAZI 102406008 PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKAFAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2013
PETA INTERAKTIF USU BERBASIS WEB TUGAS AKHIR Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya ISRA MIKRAZI 102406008 PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2013
i PERSETUJUAN Judul : PETA INTERAKTIF USU BERBASIS WEB Kategori : TUGAS AKHIR Nama : ISRA MIKRAZI Nomor Induk Mahasiswa : 102406008 Program Studi : DIPLOMA (D3) TEKNIK INFORMATIKA Departemen : MATEMATIKA Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA Komisi Pembimbing : Diluluskan di Medan, Juli 2013 Diketahui/Disetujui oleh Departemen Matematika FMIPA USU Ketua, Pembimbing, Prof. Drs. Tulus, M.Si Drs. Marihat Situmorang,M.Kom Nip. 19620901 198803 1 002 Nip. 19631214198903001
ii PERNYATAAN PETA INTERAKTIF USU BERBASIS WEB TUGAS AKHIR Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya. Medan, Juli 2013 ISRA MIKRAZI 102406008
iii PENGHARGAAN Alhamdulillah, Puji syukur penulis ucapkan kehadirat Allah SWT karena berkat limpahan kasih sayang-nya penulis dapat menyelesaikan Tugas Akhir ini sesuai dengan waktu yang telah ditentukan. Tugas Akhir ini disusun guna memenuhi suatu syarat kelulusan pada Program Studi D-III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Adapun judul Tugas Akhir ini adalah PETA INTERAKTIF USU BERBASIS WEB. Penulis menyadari bahwa penulisan Tugas Akhir ini tidak akan terselesaikan dengan baik dan tepat waktu tanpa adanya masukan, bimbingan serta bantuan moril dan materil dari berbagai pihak. Sehingga pada kesempatan ini, penulis menyampaikan ucapan terima kasih yang sebesarbesarnya kepada: 1. Bapak Drs. Marihat Situmorang, M.IT selaku Dosen Pembimbing penulis yang telah banyak memberikan bimbingan dan pengarahan kepada penulis dalam menyelesaikan Tugas Akhir ini. 2. Bapak Dr. Sutarman, M.Sc selaku dekan FMIPA USU. 3. Bapak Prof. Drs. Tulus, M.Si dan Dra. Mardiningsih, M.Si selaku Ketua dan Sekretaris Departemen Matematika USU. 4. Bapak Syahril Effendi, S.Si, M.IT dan Syahriol Sitorus, S.Si, M.IT selaku ketua dan sekretaris program studi D-III Teknik Informatika.
iv 5. Seluruh Staf pengajar di Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara khususnya program studi D-III Teknik Informatika yang telah banyak memberikan ilmu pengajaran. 6. Teristimewa ucapan terima kasih untuk orang tua saya tercinta, yang telah memberikan doa, nasihat dan dukungan baik secara moril maupun materil sehingga penulis dapat menyelesaikan Tugas Akhir ini. 7. Terima kasih untuk Dio Nando Hasibuan yang telah memberikan dukungan dan semangat untuk saya. 8. Seluruh rekan-rekan mahasiswa D-III Teknik Informatika khususnya teman-teman Kom A 10 yang telah memberikan semangat, baik materi maupun moril apabila penulis sering membutuhkan bantuan. Akhirnya dengan kerendahan hati penulis mempersembahkan Tugas Akhir ini, semoga Tugas Akhir ini dapat bermanfaat bagi pembaca. Dan penulis menyadari bahwa dalam Tugas Akhir ini masih banyak terdapat kekurangan dan kesalahan, untuk itu penulis sangat mengharapkan kritik dan saran dari semua pihak guna penyempurnaan laporan dimasa yang akan datang. Medan, Juni 2013 Penulis Isra Mikrazi 102406008
v ABSTRAK Tugas akhir ini merancang suatu aplikasi Peta Interaktif USU Berbasis Web yang bermanfaat untuk menyediakan informasi yang baik dengan cepat dan mudah untuk para mahasiswa maupun dosen atau pengunjung untuk mengetahui lokasi-lokasi di kampus USU. Perancangan sistem dalam merancang Peta Interaktif USU Berbasis Web ini dikembangkan dengan menggunakan perangkat lunak Adobephotoshop dan XAMPP. Dengan menggunakan XAMPP paket-paket aplikasi yang kita perlukan dalam merancang sebuah situs yang baik seperti Apache Web Server, PHP dan MySQL telah tersedia. Sistem Informasi Absensi. Peta Interaktif USU ini juga menampilkan foto gedung, dan ruangan penting di suatu lokasi maupun di setiap fakultas di kampus USU. Hal tersebut digunakan untuk mempermudah user atau pengunjung untuk dapat mengetahui secara cepat lokasi yang ingin dikunjungi.
vi DAFTAR ISI Halaman Persetujuan Pernyataan Penghargaan Abstrak Daftar Isi Daftar Gambar Daftar Tabel ii iii iv vi vii vii ix BAB 1 Pendahuluan 1 Latar Belakang 1 1.1 Perumusan Masalah 3 1.2 Tujuan Penelitian 4 1.3 Pembatasan Masalah 4 1.4 Metodologi Penelitian 5 1.5 Sistematika Penulisan 5 BAB 2 Landasan Teori 6 2.1 Konsep dasar Perancangan Peta Interaktif 7 2.1.1 Pengertian Peta 7 2.1.2 Pengertian Interaktif 8 2.1.3 Pengertian Peta Interaktif 8 2.2 Teknik Perancangan Basis Data 9 2.2.1 Data Flow Diagram (DFD) 9 2.2.2 Bagan Alir (Flowchart) 10 2.3 Pengertian Website 12 2.4 HTML (HyperText Markup Language) 14 2.4.1 Dokumen HTML 14 2.4.2 Penamaan Dokumen HTML 14 2.4.3 Elemen Dan Tag HTML 14 2.4.4 CSS ( Cascading Style Sheet ) 18 2.4.5 JavaScript 19 2.5 PengenalanPHP (HyperText Preprocessor) 20 2.5.1 Sejarah PHP 20 2.5.2 Skrip PHP 21 2.5.2 Integrasi dengan Database 24 2.6 MySQL 27
vii BAB 3 Sekilas 28 3.1 Kondisi Umum 28 BAB 4 Rancangan Sitem Program 29 4.1 Data Flow Diagram 30 4.1 Flowchat Program 31 BAB 5 Implementasi Sistem 33 5.1 Pengertian Implementasi Sistem 33 5.2 Tujuan Implementasi Sistem 33 5.3 Komponen-komponen Kebutuhan Sistem 34 5.3.1 Hardware 34 5.3.2 Software 34 5.3.3 Brainware 34 5.4. Demonstrasi Program 36 5.4.1 Halaman Login Admin 36 5.4.2 Halaman Utama Admin 37 5.4.3 Halaman Master Data 38 5.4.4 Halaman Peta Interaktif 41 BAB 6 Kesimpulan Dan Saran 43 6.1 Kesimpulan 43 6.2 Saran 44 Daftar Pustaka 45 Lampiran: Listing Program
viii DAFTAR GAMBAR Halaman Gambar 2.1 Dokumen HTML ditampilkan di browser IE 20 Gambar 2.2 Dokumen PHP ditampilkan di Browser Mozila 29 Gambar 4.1 Diagram Peta Interaktif Berbasis Web 30 Gambar 4.2 Data Flow Diagram Level Nol 31 Gambar 4.3 Data Flow Diagram Peta Interaktif 32 Gambar 5.1 Tampilan Windows 7 36 Gambar 5.2 Tampilan XAMPP 36 Gambar 5.3 Halaman Admin 37 Gambar 5.4 Halaman Menu Fakultas 38 Gambar 5.6 Laporan Menu Fakultas 38 Gambar 5.7 Halaman Menu Input Gedung 39 Gambar 5.8 Laporan Menu Gedung 39 Gambar 5.9 Halaman Menu Input Ruangan 40 Gambar 5.10 Laporan Menu Ruangan 40 Gambar 5.11 Tampilan Fakultas dari Google Map 41 Gambar 5.12 Tampilan Dropdown 41 Gambar 5.13 Tampilan Gedung Fakultas 42 Gambar 5.14 Tampilan Ruangan 42
ix DAFTAR TABEL Halaman Tabel 2.1 Simbol Data Flow Diagram (DFD) 11 Tabel 2.2 Simbol Bagan Alir (Flowchat) 12 Tabel 2.3 Daftar Database-Database Yang Didukung PHP 30 Tabel 3.1 Nama-nama Kepala Kelurahan 35