Transcript Perancangan Interface

Rancang Bangun Aplikasi Web GIS
Pemetaan Fasilitas Umum Kota Tangerang
Menggunakan Google Maps API
Serpong, 28 Juni 2010
Eko A. Sasmito
115060006
Teknik Informatika
Institut Teknologi Indonesia
Latar Belakang
• Banyak fasilitas umum
• Akses informasi fasilitas umum
• Kemajuan dunia internet
Teknik Informatika
Institut Teknologi Indonesia
Permasalahan
• Fasilitas umum apa saja
• Lokasi fasilitas umum
• Akses informasi
Teknik Informatika
Institut Teknologi Indonesia
Tujuan
• Penyajian informasi yang lebih baik
• Membuat aplikasi Web GIS
Teknik Informatika
Institut Teknologi Indonesia
Manfaat
• Kemudahan akses informasi
• Dapat diketahui keberadaan dari lokasi
fasilitas umum
Teknik Informatika
Institut Teknologi Indonesia
Analisis Fungsional
•
•
•
•
Menampilkan lokasi FasUm
Pencarian lokasi FasUm
Menampilkan rute
Menambah lokasi
Teknik Informatika
Institut Teknologi Indonesia
Use Case Diagram
Teknik Informatika
Institut Teknologi Indonesia
Activity Diagram
(tampil lokasi berdasarkan kategori)
Teknik Informatika
Institut Teknologi Indonesia
Activity Diagram
(pencarian lokasi)
Teknik Informatika
Institut Teknologi Indonesia
Activity Diagram
(melihat rute)
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Sistem
• Arsitektur Sistem
Teknik Informatika
Institut Teknologi Indonesia
Pengumpulan data
•
•
•
•
•
Website resmi Kota Tangerang
Megapolitan Map 2009-2010
Yellow Pages Indonesia
Situs dari masing-masing lokasi, dan
Survey langsung ke lapangan
Teknik Informatika
Institut Teknologi Indonesia
Kategori yang ditampilkan
•
•
•
•
•
•
•
•
•
Apotik
Bank
Hotel
Kantor Kecamatan
Kantor Kelurahan
Kantor Polisi
Kantor Pos
Puskesmas
Rumah Sakit
Teknik Informatika
Institut Teknologi Indonesia
Kategori yang ditampilkan
•
•
•
•
•
•
•
•
•
Pasar Swalayan
Pasar Tradisional
SD
SMP
SMA
Perguruan Tinggi
Transportasi
Objek Wisata, dan
Kategori Lain-lain
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Database
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Navigasi
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Interface
(Halaman Utama)
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Interface
(Halaman Hasil Cari)
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Interface
(Halaman Tambah Lokasi)
Teknik Informatika
Institut Teknologi Indonesia
Perancangan Interface
(Halaman Detail Lokasi)
Teknik Informatika
Institut Teknologi Indonesia
Implementasi
•
Spesifikasi Hardware:
 Satu unit PC :
• Prosesor : Intel Pentium IV 3.06 GHz
• Memori : 1,5 Gb
• Kapasitas harddisk : 80 Gb
• Sistem operasi : Windows XP SP2
 Koneksi internet
Teknik Informatika
Institut Teknologi Indonesia
Implementasi
•
Spesifikasi Software:
 ApacheFriends XAMPP versi 1.7.0
• Apache 2.2.11
• PHP 5.2.8
• MySQL 5.1.30
 Bahasa pemrograman Javascript.
 Web browser Mozilla Firefox versi 3.6.3.
 Adobe Dreamweaver CS3
 Adobe Photoshop CS3
 Google Maps API
Teknik Informatika
Institut Teknologi Indonesia
Implementasi
•
Register API Key
http://code.google.com/apis/maps/signup.html
Teknik Informatika
Institut Teknologi Indonesia
Implementasi
•
Key yang didapat:
•
Diletakkan di code program
Teknik Informatika
Institut Teknologi Indonesia
Hosting
•
•
Web Hosting
Domain
Teknik Informatika
Institut Teknologi Indonesia
Hosting
•
Web Hosting
Dracoola Multimedia
www.dracoola.com
Teknik Informatika
Institut Teknologi Indonesia
Hosting
•
Domain Name
www.tangerangmaps.com
Teknik Informatika
Institut Teknologi Indonesia
Hosting
•
Upload file
FileZilla
Teknik Informatika
Institut Teknologi Indonesia
Terima Kasih
Serpong, 28 Juni 2010
Eko A. Sasmito
115060006
Teknik Informatika
Institut Teknologi Indonesia