Perancangan Struktur Menu Perancangan Antarmuka

5. Perancangan Antarmuka Ubah Objek Wisata -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M8 -klik Simpan : gagal, muncul M9 -klik Batal menuju A3 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A8 FOOTER Id Wisata Nama Objek Wisata Alamat Keterangan Gambar Utama Enter Text [id_wisata] Enter Text Enter Text Enter Text Enter Text Browse SIMPAN BATAL Lat Lng Enter Text HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Jenis Enter Text Gambar 2 Gambar 3 Enter Text Browse Enter Text Browse Nomor Telepon Tiket Masuk Jam Masuk Enter Text Enter Text Enter Text Nama AR Enter Text Gambar 3. 59 Antarmuka Ubah Objek Wisata 6. Perancangan Antarmuka Lihat Peta Objek Wisata Milik Admin -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A4 FOOTER PETA Enter Text Enter Text Lokasi Awal Tujuan Tampilkan Rute KONTEN RUTE HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 60 Antarmuka Lihat Peta Objek Wisata Milik Admin 7. Perancangan Antarmuka Kelola AR -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Cari : gagal, muncul M6 -klik Tambah : menuju A8 -klik Ubah menuju A9 -klik Hapus muncul M10 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A5 FOOTER Id_AR Nama AR File Video [id_ar] [nama_ar] [file] [video] Tambah Aksi Ubah Hapus HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 61 Antarmuka Kelola AR 8. Perancangan Antarmuka Tambah AR -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M11 -klik Simpan : gagal, muncul M12 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A8 FOOTER Nama AR File Video Enter Text Enter Text Browse SIMPAN ULANG HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Enter Text Browse Gambar 3. 62 Antarmuka Tambah AR 9. Perancangan Antarmuka Ubah AR -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M13 -klik Simpan : gagal, muncul M14 -klik Batal menuju A5 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A9 FOOTER Nama AR Enter Text Enter Text Browse SIMPAN BATAL File Video HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Enter Text Browse Gambar 3. 63 Antarmuka Ubah AR 10. Perancangan Antarmuka Kelola Jenis -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Cari : gagal, muncul M6 -klik Tambah : menuju A8 -klik Ubah menuju A9 -klik Hapus muncul M10 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A11 FOOTER Id_jenis Nama Jenis Icon Jenis [id_ar] [nama_ar] [image] Tambah Aksi Ubah Hapus HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 64 Antarmuka Kelola Jenis 11. Perancangan Antarmuka Tambah Jenis -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M11 -klik Simpan : gagal, muncul M12 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A12 FOOTER Nama Jenis Icon Jenis Enter Text Enter Text Browse SIMPAN ULANG HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 65 Antarmuka Tambah Jenis 12. Perancangan Antarmuka Ubah Jenis -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M13 -klik Simpan : gagal, muncul M14 -klik Batal menuju A5 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A13 FOOTER Nama Jenis Enter Text Enter Text Browse SIMPAN BATAL Icon Jenis HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 66 Antarmuka Ubah Jenis 13. Perancangan Antarmuka Kelola Akun Admin -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -klik Simpan muncul M15 -klik Simpan : gagal, muncul M16 -klik Batal menuju A1 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A6 FOOTER Nama Lengkap Username Password Enter Text Enter Text Enter Text SIMPAN BATAL HEADER IMAGE Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 67 Antarmuka Kelola Akun Admin 14. Perancangan Antarmuka Informasi Tentang Aplikasi Milik Admin -klik Button 1 menuju A1 -klik Button 2 menuju A2 -klik Button 3 menuju A3 -klik Button 4 menuju A4 -klik Button 5 menuju A5 -klik Button 6 menuju A6 -klik Button 7 sebagai fungsi keluar -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS A10 HEADER IMAGE ISI FOOTER Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Gambar 3. 68 Antarmuka Lihat Informasi Tentang Aplikasi Milik Admin b. Perancangan Antarmuka Aplikasi Pengunjung 1. Perancangan Antarmuka Beranda Milik Pengunjung -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -klik Button 5 menuju P6 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P1 HEADER IMAGE ISI FOOTER Button 1 Button 2 Button 3 Button 4 Gambar 3. 69 Antarmuka Beranda Milik Pengunjung 2. Perancangan Antarmuka Daftar Objek Wisata -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -klik [nama_wisata] menuju P5 -klik [alamat] menuju P5 -klik Button 5 menuju P6 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P2 HEADER IMAGE FOOTER Button 1 Button 2 Button 3 Button 4 [image] [image] [image] [image] [image] [nama_wisata] [nama_wisata] [nama_wisata] [nama_wisata] [nama_wisata] [alamat] [alamat] [alamat] [alamat] [alamat] Gambar 3. 70 Antarmuka Daftar Objek Wisata 3. Perancangan Antarmuka Detail Objek Wisata -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -klik Button 5 menuju P6 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P5 HEADER IMAGE FOOTER Button 1 Button 2 Button 3 Button 4 [image] [nama_wisata] [alamat] [keterangan] PETA Gambar 3. 71 Antarmuka Detail Objek Wisata 4. Perancangan Antarmuka Lihat Peta Objek Wisata Milik Pengunjung -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P3 FOOTER PETA Enter Text Enter Text Lokasi Awal Tujuan Tampilkan Rute KONTEN RUTE HEADER IMAGE Button 1 Button 2 Button 3 Button 4 LEGENDA PETA Gambar 3. 72 Antarmuka Lihat Peta Objek Wisata Milik Pengunjung 5. Perancangan Antarmuka AR -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -klik Button 5 menuju P6 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P4 HEADER IMAGE FOOTER Button 1 Button 2 Button 3 Button 4 VIDEO WEBCAME TATA CARA MENGGUNAKAN AR : [TEXT] Gambar 3. 73 Antarmuka Menggunakan AR 6. Perancangan Antarmuka Informasi Tentang Aplikasi Milik Pengunjung -klik Button 1 menuju P1 -klik Button 2 menuju P2 -klik Button 3 menuju P3 -klik Button 4 menuju P4 -Ukuran : 1366x768 pixels -Font : Arial, Trebuchet MS P6 HEADER IMAGE ISI FOOTER Button 1 Button 2 Button 3 Button 4 Gambar 3. 74 Antarmuka Informasi Tentang Aplikasi Milik Pengunjung c. Perancangan Antarmuka Pesan Berikut merupakan tampilan perancangan pesan-pesan yang berinteraksi terhadap pengguna. M1 Username dan password yang anda masukan salah M2 Isi Username terlebih dahulu OK M3 Isi Password terlebih dahulu OK M4 Data Objek Wisata berhasil disimpan OK M5 Penyimpanan data objek wisata gagal OK M6 Data yang dicari tidak ditemukan OK M7 Anda yakin [nama_wisata] akan dihapus? OK CANCEL M8 Data objek wisata berhasil diubah OK Gambar 3. 75 Perancangan Pesan Bagian Satu M9 Data Objek Wisata gagal diubah OK M10 Anda yakin [nama_ar] akan dihapus? OK CANCEL M11 Data AR berhasil disimpan OK M12 Penyimpanan data AR gagal OK M13 Data AR berhasil diubah OK M15 Data Admin berhasil diubah OK M14 Data AR gagal diubah OK M16 Data Admin gagal diubah OK Gambar 3. 76 Perancangan Pesan Bagian Dua M17 Koordinat Latitude tidak boleh kosong OK M18 Koordinat Longitude tidak boleh kosong OK CANCEL M19 Nama Objek Wisata Tidak Boleh Kosong OK M20 Alamat Objek Wisata Tidak Boleh Kosong OK M21 Keterangan Objek Wisata Tidak Boleh Kosong OK M22 Gambar Tidak Boleh Kosong OK Gambar 3. 77 Perancangan Pesan Bagian Tiga d. Jaringan Semantik Perancangan jaringan semantik yang akan diterapkan pada aplikasi SIG Objek Wisata meliputi dua bagian utama yaitu aplikasi admin dan aplikasi pengunjung. 1. Jaringan Semantik Web Admin A1 A2 A4 A6 A8 A9 A3 A7 A5 L1 A10 M1, M2, M3 M4, M5, M17, M18, M19, M20, M21, M22 M5, M7 M10 M15, M16 M8, M9 M11, M12 M13, M14 Gambar 3. 78 Jaringan Semantik Web Admin Keterangan: L1 Login Admin A1 Beranda Admin A2 Halaman Tambah Data Objek Wisata A3 Halaman Kelola Data Objek Wisata A4 Lihat Peta A5 Halaman Kelola Data AR A6 Halaman Kelola Admin A7 Halaman Ubah Data Objek Wisata A8 Halaman Tambah Data AR A9 Halaman Ubah Data AR A10 Lihat Tentang 2. Jaringan Semantik Web Pengunjung P1 P2 P4 P6 P3 P5 Gambar 3. 79 Jaringan Semantik Web Pengunjung Keterangan: P1 Beranda Pengunjung P2 Halaman Daftar Objek Wisata P3 Lihat Peta P4 Lihat AR P5 Halaman Detail Objek Wisata P6 Lihat Tentang 167

BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1 Implementasi Sistem

Implementasi sistem merupakan proses penerapan dari hasil analisis dan perancangan sistem yang telah dilakukan sebelumnya. Proses penerapannya dilakukan dengan menterjemahkan perancangan berdasarkan hasil analisis ke dalam bahasa pemrograman serta penerapan perangkat lunak pada keadaan yang sesungguhnya. Implementasi sistem ini meliputi penerapan perangkat keras, perangkat lunak, basis data, dan penerapan antarmuka.

4.1.1 Implementasi Perangkat Keras

Perangkat keras yang digunakan untuk mengimplementasikan aplikasi SIG objek wisata Kota Bandung ini adalah sebagai berikut: a. Processor dengan kecepatan 1.5 GHz. b. Memory RAM 4 GB. c. VGA 512 MB. d. Space Harddisk yang tersedia minimal 50 GB. e. Monitor dengan resolusi 1366 x 768. f. Webcam 30fps. g. Modem.

4.1.2 Implementasi Perangkat Lunak

Perangkat lunak yang digunakan untuk mengimplementasikan aplikasi SIG objek wisata Kota Bandung ini adalah sebagai berikut: a. Sistem Operasi menggunakan Windows 7 Professional. b. DBMS menggunakan MySQL. c. Pengelola DBMS menggunakan PHPMyAdmin. d. Local internet menggunakan WampServer 2.0. e. Web editor menggunakan Adobe Dreamweaver CS3. f. Browser menggunakan Mozilla Firefox 12.0. g. Aplikasi pengembangan AR menggunakan FlashDevelop 4.0.4 RTM dan Lab IN2AR sebagai generator markernya.

4.1.3 Implementasi Kebutuhan Web Hosting

Implementasi kebutuhan web hosting pada penelitian ini digunakan untuk keperluan aplikasi web admin dan web pengunjung, oleh karena itu agar sistem dapat berjalan maka aplikasi harus diunggah ke web hosting yang digunakan. Adapun spesifikasi web hosting dan nama domain situs yang dipakai adalah : a. Nama Domain Situs Nama domain yang digunakan adalah http:gis-bandungtourism.com b. Spesifikasi Web Hosting Tabel 4. 1 Spesifikasi Web Hosting Disk space 1 GB Bandwidth Unlimited Depelovment Feature 1. PHP 5.3.19 2. MySQL 5.1.66-cll 3. cPanel version 11.34.1 4. Apache version 2.2.23 5. phpMyAdmin 6. Webmail 7. Instant Backups

4.1.4 Implementasi Basis Data

Implementasi basis data dilakukan berdasarkan perancangan basis data yang telah dilakukan sebelumnya. Pembuatannya dilakukan dengan menggunakan DBMS MySQL dengan PHPMyAdmin sebagai alat bantu pengelolanya. dalam bahasa SQL, basis data diimplementasikan adalah sebagaimana berikut ini: a. Implementasi Tabel Admin CREATE TABLE `admin` `username` varchar20 NOT NULL, `userpass` varchar50 NOT NULL, `nama_admin` varchar20 NOT NULL, PRIMARY KEY `username` ENGINE=InnoDB DEFAULT CHARSET=latin1; b. Implementasi Tabel Wisata CREATE TABLE `wisata` `id_wisata` int11 NOT NULL AUTO_INCREMENT, `id_ar` int11 NOT NULL, `id_jenis` int11 NOT NULL, `username` varchar20 NOT NULL, `nama_wisata` varchar20 CHARACTER SET utf8 NOT NULL, `alamat` varchar50 CHARACTER SET utf8 NOT NULL, `lat` double NOT NULL, `lng` double NOT NULL, `keterangan` text NOT NULL, `gambar` varchar50 CHARACTER SET utf8 NOT NULL, `gambar2` varchar50 CHARACTER SET utf8 NOT NULL, `gambar3` varchar50 CHARACTER SET utf8 NOT NULL, `jam_buka` time CHARACTER SET utf8 NOT NULL, `tiket_masuk` int11 NOT NULL, `nomor_telepon` int11 NOT NULL, PRIMARY KEY `id_wisata`, CONSTRAINT `ar_fk` FOREIGN KEY `id_ar` REFERENCES `ar` `id_ar`, CONSTRAINT `admin_fk ` FOREIGN KEY `username` REFERENCES `admin` `username`, CONSTRAINT `jenis_fk ` FOREIGN KEY `id_jenis` REFERENCES `jenis` `id_jenis` ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=141 ; c. Implementasi Table AR CREATE TABLE `ar` `id_ar` int11 NOT NULL AUTO_INCREMENT, `nama_ar` varchar20 NOT NULL, `file_ar` varchar50 NOT NULL, `video_ar` varchar50 NOT NULL, PRIMARY KEY `id_ar` ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=39 ; d. Implementasi Table Jenis CREATE TABLE `jenis` `id_jenis` int11 NOT NULL AUTO_INCREMENT, `nama_jenis` varchar20 NOT NULL, `icon_jenis` varchar50 NOT NULL, PRIMARY KEY `id_jenis` ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

4.1.5 Implementasi Antarmuka

Implementasi antarmuka merupakan tampilan dari aplikasi yang berfungsi untuk menjembatani antara pengguna dengan sistem yang akan dibangun. Implementasi ini dilakukan berdasarkan hasil perancangan antarmuka yang telah dilakukan sebelumnya pada perancangan sistem. Berikut merupakan implementasi antarmuka dari Aplikasi Sistem Informasi Geografis Objek Wisata Kota Bandung yang dibagi menjadi dau bagian utama meliputi antarmuka admin dan antarmuka pengunjung.

4.1.5.1 Implementasi Antarmuka Aplikasi Admin

Implementasi antarmuka aplikasi admin meliputi beberapa bagian utama antarmuka antara lain halaman login, halaman beranda, halaman kelola objek wisata, halaman kelola AR, halaman peta objek wisata, halaman kelola admin, halaman informasi aplikasi, dan halaman petunjuk penggunaan aplikasi. a. Halaman Login Antarmuka halaman login merupakan tampilan yang pertama kali muncul ketika aplikasi diakses oleh admin. Halaman ini berfunsi sebagai otentikasi keamanan dari aplikasi itu sendiri yang dimana terdapat perintah input username dan input password agar pengguna dapat mengakses aplikasi ini. Implementasinya terlihat seperti Gambar 4.1 berikut. Gambar 4. 1 Implementasi Antarmuka Halaman Login b. Halaman Beranda Admin Antarmuka halaman beranda admin merupakan tampilan utama dari aplikasi admin, di dalam halaman beranda terdapat beberapa menu yang dapat diakses oleh pengguna diantaranya menu pengelolaan data objek wisata, pengelolaan data AR, dan pengelolaan data akun admin. Implementasinya terlihat seperti Gambar 4.2 berikut. Gambar 4. 2 Implementasi Antarmuka Halaman Beranda Admin c. Halaman Kelola Objek Wisata Antarmuka halaman kelola objek wisata merupakan halaman antarmuka untuk fungsionalitas pengelolaan data objek wisata, dimana didalamnya disajikan daftar data objek wisata yang dapat dikelola dengan aksi seperti, tambah, edit, dan hapus. Implementasinya terlihat seperti Gambar 4.3, Gambar 4.4, dan Gambar 4.5 berikut. Gambar 4. 3 Implementasi Antarmuka Halaman Kelola Objek Wisata d. Halaman Tambah Data Objek Wisata Gambar 4. 4 Implementasi Antarmuka Halaman Tambah Data Objek Wisata e. Halaman Ubah Data Objek Wisata Gambar 4. 5 Implementasi Antarmuka Halaman Ubah Data Objek Wisata f. Halaman Peta Objek Wisata Kota Bandung Milik Admin Antarmuka halaman peta objek wisata ini disajikan khusus untuk pengguna yang bertugas sebagai admin. Implementasinya terlihat seperti Gambar 4.6 berikut. Gambar 4. 6 Implementasi Antarmuka Halaman Peta Objek Wisata Milik Admin