Bab 3 Metode dan Perancangan Sistem - Institutional Repository | Satya Wacana Christian University: Perancangan Sistem Informasi Pemetaan Lokasi SPBU di Kota Semarang Berbasis Web Menggunakan Google Maps API

Bab 3 Metode dan Perancangan Sistem 3.1 Metode Pengembangan Sistem. Metode penelitian yang dilakukan dalam merancang aplikasi menggunakan 4

  tahapan penelitian yaitu: 1) Identifikasi Masalah. 2) Perancangan Sistem. 3) Pembuatan Aplikasi. 4) Implementasi dan Pengujian Sistem serta Analisis Hasil Pengujian. Tahapan-tahapan yang dilakukan dalam metode penelitian ini dapat ditunjukkan pada Gambar 3.1.

  Identifikasi Masalah Perancangan Sistem Pembuatan Aplikasi

  Implementasi dan Pengujian Sistem serta Analisis Hasil Pengujian

  Tahapan Penelitian Gambar 3.1

  Pada tahapan penelitian yang terdapat pada Gambar 3.1 dapat dijelaskan sebagai berikut: 1) Tahap pertama: identifikasi Masalah, pada tahap ini yang dilakukan adalah melakukan survei lapangan ke salah satu lokasi SPBU dan melakukan wawancara ke beberapa pengendara yang saat itu melakukan pengisian bahan bakar. Kemudian mengidentifikasi masalah yang timbul pada pengendara maupun masyarakat di Semarang dalam mengetahui letak lokasi SPBU yang ada di Kota Semarang dan informasi detail lainnya. 2) Tahap kedua: Perancangan Sistem, perancangan sistem dilakukan menggunakan diagram Unified Modelling Language

  

(UML). Perancangan sistem berupa diagram meliputi: use case diagram, activity

diagram, sequence diagram, class diagram, dan deployment diagram. Selain

  perancangan sistem juga dilakukan perancangan database dan perancangan user

  

interface dari aplikasi. 3) Tahap ketiga: Pembuatan Aplikasi, pada tahap ini dilakukan

  pembuatan aplikasi sesuai dengan perancangan sistem yang telah dibuat. Pembuatan halaman website menggunakan aplikasi Macromedia Dreaweaver 8, sedangkan untuk pembuatan pemetaan lokasi menggunakan Google Maps API. 4) Tahap keempat: Implementasi dan Pengujian Sistem serta Analisis Hasil Pengujian, pada tahap ini dilakukan pengimplementasian aplikasi yang telah selesai dibuat berupa website, kemudian dilakukan pengujian untuk mengetahui apakah aplikasi telah sesuai dengan perancangan yang dilakukan dan apakah sudah tidak ditemukan kesalahan/bug pada aplikasi.

3.2 Analisis Kebutuhan Sistem

  Tahap analisis kebutuhan sistem digunakan untuk mengetahui dan menterjemahkan semua permasalahan kebutuhan perangkat lunak dan perangkat keras dalam membangun web ini. Proses analisis sistem digambarkan dengan menggunakan Unifield Modelling Language (UML) dan membuat analisis kebutuhan berupa Software Requirement System (SRS).

3.2.1 Analisis Kebutuhan Perangkat Keras

  Kebutuhan perangkat keras yang digunakan untuk membangun web pemetaan lokasi memiliki spesifikasi sebagai berikut:

  1. PC / Laptop dengan processor Intel Pentium IV

  2. Hard Disk

  3. RAM

  4. VGA

  5. Monitor

  6. Keyboard dan Mouse (Pointing Device)

3.2.2 Analisis Kebutuhan Perangkat Lunak

  Perangkat Lunak yang digunakan di sini sebagai berikut:

• Sistem operasi Windows 7
• Google Maps API
• Macromedia Dreamweaver 8
• Wamp Server - Rational Rose Enterprise Edition - Microsoft Word - WOW Slider

3.3 Desain Prosedur Sistem

  Tahap ini dilakukan untuk menganalisa sistem secara lebih detail baik proses, prosedur, dan fungsi data-data yang telah dikumpulkan. Salah satu tool atau model untuk merancang sistem adalah dengan UML (Unified Modelling Language). UML digunakan untuk menspesifikasi, memvisualisasi dan mendokumentasikan pengembangan piranti lunak secara struktural. UML menggunakan diagram sebagai permodelan sistem yang dibangun. Diagram yang digunakan adalah use case

  

diagram, activity diagram, sequence diagram, class diagram, dan deployment

diagram. Berikut dibawah ini merupakan tahapan diagram.

3.3.1 Use Case Diagram

  Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah

  sistem. Sebuah use case mempresentasikan sebuah interaksi antara aktor dengan sistem. Seorang atau sebuah aktor adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan tertentu. (Fowler, 2005)

Gambar 3.2 Use Case Diagram Sistem

  Pada Gambar 3.2 dijelaskan bahwa user dapat melihat beranda, lihat peta, lihat data lokasi, lihat berita terbaru, dan lihat info SPBU. Pada use case Lihat Peta dan use

  

case Cari Lokasi terdapat relasi extends yang menuju ke arah use case lihat data

  lokasi yang memiliki arti suatu tindakan yang berjalan ketika melakukan pengaturan data lokasi. Hal tersebut terjadi pula pada use case login. Sedangkan pada relasi

  

include merupakan suatu sifat yang harus terpenuhi sehingga terjadi sebuah event,

  dimana kondisi dari sebuah use case merupakan bagian dari use case lainnya. Use

  

case diagram sistem pada Gambar 2, admin dapat melakukan login dan mengatur

  halaman web antara lain: mengatur halaman admin, mengatur data, mengatur info, mengatur berita. Pengaturan data yang disediakan untuk admin seperti tambah, ubah, dan hapus.

3.3.2 Activity Diagram

  Activity Diagram merupakan state diagram khusus, dimana sebagian besar

state adalah action dan sebagian besar transisi di trigger oleh selesainya state

  sebelumnya (internal processing). Activity diagram menggambarkan bagaimana masing-masing alur berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir (Fowler, 2005).

Gambar 3.3 Activity Diagram User Mencari Lokasi

  Activity diagram yang ditunjukkan pada Gambar 3 dijelaskan bahwa user akan

  melakukan pencarian dan memilih menu cari lokasi pada web. Kemudian user memasukkan kata kunci berdasarkan pilihan kecamatan yang dituju pada kolom pencarian. Kemudian user memilih tombol pencarian, maka sistem akan mengirim

  

request pencarian ke database untuk mengecek data yang dicari. Setelah data

  ditemukan, maka database mengembalikan hasil pencarian data ke sistem untuk ditampilkan hasil pencarian lokasi SPBU berupa tabel ke user.

  Activity Diagram Melihat Data SPBU

Gambar 3.4 Gambar 3.4 dijelaskan bahwa admin melakukan login terlebih dahulu.

  Kemudian sistem melakukan validasi data login, apabila data login benar maka akan ditampilkan pada halaman admin dan bila data login salah, maka akan ditampilkan kembali ke halaman login. Pada menu halaman admin, admin memilih menu Data SPBU. Kemudian sistem akan mengirimkan respon ke database. Respon yang diterima akan di-request datanya oleh database, kemudian mengirimkan request data tersebut ke sistem. Sistem akan menerima request kemudian menampilkan data SPBU sesuai dengan perintah dari admin.

  Activity Diagram Menambah Data SPBU Gambar 3.5

  Pada Gambar 3.5 dapat dijelaskan ketika admin berhasil melakukan login, maka sistem akan menampilkan menu halaman admin. Kemudian admin memilih menu tambah data, dan sistem akan menampilkan form tambah data. Admin mengisi

  

form tambah data dengan benar, setelah selesai mengisi form dan memilih tombol

  Tambah, kemudian sistem akan mengirim request data yang sudah ditambahkan ke

  

database. Pada database akan request data yang ditambahkan, kemudian

menampilkan data terbaru melalui sistem pada halaman website.

3.3.3 Sequence Diagram

  Sequence diagram digunakan untuk menggambarkan skenario atau rangkaian

  langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. Di awali dari yang men-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa saja yang dihasilkan. (Fowler, 2005)

  _{: user 1. klik peta SPBU} sistem database _{2. ambil data peta SPBU} 3. kirim data peta SPBU _{4. olah data peta SPBU} 5. tampilkan peta SPBU Sequence Diagram Melihat Peta SPBU

  Gambar 3.6

Gambar 3.6 dijelaskan bahwa user memilih menu cari lokasi untuk melihat peta wilayah Kota Semarang secara keseluruhan. Setelah aktivitas klik yang dilakukan

  oleh user, kemudian sistem menerima perintah aktivitas yang dilakukan. Sistem akan mengambil data yang sesuai kemudian mengirimkan ke database. Data yang dikirim akan dicari dan dikembalikan lagi oleh database kepada sistem. Data tersebut akan diolah oleh sistem untuk dapat ditampilkan kepada user melalui halaman web. _{: user sistem database}

  1. klik cari lokasi SPBU _{3. kirim data lokasi SPBU 2. ambil data lokasi SPBU 5. tampilkan lokasi SPBU} 4. olah data lokasi SPBU

Gambar 3.7 Sequence Diagram Mencari Lokasi SPBU Pada Gambar 3.7 dijelaskan bahwa user memilih menu cari lokasi pada halaman web, kemudian pada sistem mengambil data lokasi yang telah diperintahkan oleh user. Setelah itu sistem mengirimkan perintah pencarian kepada database untuk dilakukan pencarian data lokasi SPBU. Setelah menemukan data lokasi yang sesuai dengan pencarian, database akan mengirimkan kembali data lokasi SPBU kepada sistem untuk diolah. Kemudian sistem akan menampilkan data pencarian lokasi SPBU kepada user melalui halaman web.

  sistem database : admin

  1. masukkan data login 2. cari data login 3. verifikasi data login

  4. validasi ok login berhasil

Gambar 3.8 Sequence Diagram Admin Login

  Pada Gambar 3.8 dijelaskan bahwa admin melakukan aktivitas login. Admin memasukkan data login berupa username dan password pada sistem. Kemudian sistem akan melakukan pengecekkan data dan mengirimkan data login ke database. Pada database akan dicari data login yang sesuai dengan aktivitas admin. Apabila

username dan password benar, maka akan dilakukan verifikasi data login oleh sistem.

Setelah proses verifikasi selesai, sistem akan validasi proses login kemudian mengkonfirmasi kepada admin bahwa login telah berhasil.

  _{: admin 1. pilih data spbu} sistem database _{2. ambil data spbu 4. olah data} 3. kirim data spbu 5. tampilkan form ubah data _{6. ubah data spbu 7. data spbu disimpan} 8. konfirmasi simpan sukses _{10. kirim data spbu 9. ambil data spbu 12. konfirmasi ubah data berhasil 13. tampilkan data} 11. olah data Sequence Diagram Admin Mengubah Data SPBU

  Gambar 3.9

  Pada Gambar 3.9 dijelaskan bahwa admin memilih data SPBU yang akan diubah pada fungsi ubah tabel, kemudian sistem mengambil data yang akan diubah dari database untuk diolah dan ditampilkan pada form ubah data sesuai dengan id data yang dipilih. Admin mengubah data SPBU dan sistem mengirim data tersebut ke

  

database untuk disimpan. Setelah disimpan kemudian sistem mengambil data yang

  telah diubah untuk mengolahnya kembali dan mengkonfirmasi penyimpanan data berhasil kepada admin. Data yang sudah diubah akan ditampilkan pada halaman web. sistem database : admin 1. pilih tambah data 2. buka form input data spbu

  3. minta input data spbu 4. isi form input data 5. klik peta untuk koordinat spbu 6. olah data yang dimasukkan

  7. simpan data spbu 8. konfirmasi simpan sukses 9. ambil data spbu 10. olah data spbu

  11. konfirmasi tambah data berhasil 12. tampilkan data spbu yang baru Sequence Diagram Admin Menambah Data SPBU

  Gambar 3.10

  Pada Gambar 3.10 dijelaskan bahwa admin memilih menu tambah data, kemudian sistem akan menampilkan form input tambah data lokasi SPBU. Admin mengisi data lokasi SPBU terbaru dan sistem mengolah data yang telah di-input kemudian dikirim ke database untuk data disimpan. Database akan mengkonfirmasikan ke sistem bahwa penyimpanan berhasil sehingga dapat diambil dan diolah kembali. Selesai data yang baru diolah, sistem akan memberi konfirmasi tambah data berhasil dan menampilkan data baru kepada admin dalam tabel data SPBU.

  sistem database : admin

  1. pilih data spbu 2. ambil data spbu 3. kirim data spbu

  4. olah data 5. tampilkan data 6. klik hapus

  7. hapus data spbu 8. data spbu berhasil dihapus 9. konfirmasi data yang telah dihapus

  Sequence Diagram Admin Menghapus Data SPBU

Gambar 3.11 Pada Gambar 3.11 dijelaskan bahwa admin memilih menu data SPBU.

  Kemudian sistem akan mengambil data yang dipilih oleh admin dan dikirimkan ke

  

database. Data yang diterima oleh database akan dicari kemudian dikirimkan

  kembali ke sistem. Sistem mengolah data tersebut kemudian ditampilkan ke halaman

web. Apabila data yang ditampilkan sesuai, admin akan memilih tombol hapus.

Sistem mengirimkan lagi perintah hapus kepada database. Data yang ada pada

  

database akan dihapus, kemudian sistem akan mengkonfirmasikan bahwa data yang dihapus sudah telah berhasil dan menampilkan hasil data terbaru yang ada pada database.

  sistem : admin 1. pilih menu logout 2. hapus session

  3. konfirmasi logout berhasil

Gambar 3.12 Sequence Diagram Admin Logout

  Pada Gambar 3.12 dijelaskan bahwa admin memilih menu logout pada halaman

  

web. Kemudian sistem akan memproses dan menghapus session admin dan

memberikan konfirmasi logout berhasil kepada admin.

3.3.4 Class Diagram

  Class diagram digunakan untuk menampilkan beberapa kelas serta paket-paket

  yang ada dalam sistem yang dirancang. Class diagram memberikan gambaran tentang suatu sistem dengan hubungan relasi yang ada di dalamnya (Grady Booch, James Rumbaugh, and Ivar Jacobson, 1999). Berikut pada Gambar 3.13 adalah gambaran class diagram sistem pada aplikasi web yang dirancang.

  Class Diagram Sistem Gambar 3.13

  Class diagram yang ditunjukkan pada Gambar 3.13 memiliki 6 class yaitu:

class admin, class SPBU, class Info SPBU, class Berita, class User, dan class Login.

  Pada class diagram menunjukkan bahwa kelas admin dapat melakukan pengaturan data terhadap kelas SPBU, kelas Info SPBU, kelas Berita. Sedangkan pada kelas user hanya dapat mengakses kelas-kelas yang diatur oleh admin melalui aplikasi web yang telah dibangun. Untuk kelas login dilakukan oleh kelas admin dimana kelas login dapat diakses oleh satu atau lebih admin.

3.3.5 Deployment Diagram

  Deployment diagram menggambarkan detail bagaimana komponen yang di-

deploy dalam infrastruktur sistem, di mana komponen yang terletak pada mesin,

server, atau piranti keras untuk mengetahui kemampuan jaringan pada lokasi tersebut,

  spesifikasi server, dan hal lain yang bersifat fisikal. Sebuah node adalah server,

  

workstation, atau piranti keras lain yang digunakan untuk men-deploy komponen

  dalam lingkungan sebenarnya. Hubungan antar node seperti TCP/IP dan requirement dapat juga didefinisikan pada deployment diagram (Grady Booch, James Rumbaugh, and Ivar Jacobson, 1999).

Gambar 3.14 Deployment Diagram SistemGambar 3.14 menggambarkan deployment diagram dari aplikasi sistem informasi pemetaan lokasi SPBU. Pada deployment diagram terdapat sebuah

  perangkat lunak yaitu user yang oleh jaringan internet dapat berkomunikasi dengan sistem melalui web browser. User melakukan perintah pada web interface kemudian akan diproses oleh web server yang dibangun menggunakan bahasa pemrograman

  

web yaitu PHP. Web server ini juga terhubung dengan Google Maps yang berisi

database pada server. Berdasarkan deployment diagram ini, dirancang arsitektur

  sistem dari aplikasi sistem informasi pemetaan lokasi SPBU. Arsitektur sistem pada aplikasi ditunjukkan pada Gambar 3.15.

3.3.6 Arsitektur Sistem

Gambar 3.15 Arsitektur Sistem

  Sistem yang dirancang adalah sebuah aplikasi yang dijalankan oleh pengguna dengan web browser sebagai media interface. Pengguna dapat menggunakan berbagai

  

web browser seperti Mozilla Firefox, Google Chrome, dan lain-lain. Gambaran arsitektur sistem yang ditunjukkan pada Gambar 3.15 dijelaskan bahwa user berkomunikasi dengan sistem melalui web browser. Aplikasi web inilah yang akan akan berinteraksi secara interaktif dengan pengguna, apabila pengguna melakukan suatu perintah, maka eksekusinya akan diproses di browser atau web server. Apabila permintaan dari aplikasi adalah untuk mengakses database, maka database akan dipanggil dari web server, kemudian dilakukan request data yang dikembalikan ke

  

server Google Maps. Hasilnya adalah berupa gambar peta dan objek-objek yang

  dimiliki oleh peta Google Maps. Hasil dari Google Maps Server akan dikembalikan ke web browser berupa tampilan peta yang memiliki point-point lokasi SPBU yang diminta didalamnya.

  3.4 Perancangan Tabel Data

  Rancangan database terdiri dari satu buah database yaitu dengan nama “dbspbu”. Pada database “dbspbu” terdapat 3 tabel untuk menyimpan data yang akan diolah. Data dimasukkan ke field yang merupakan implementasi dari suatu atribut data. Field diorganisasikan dalam record. Record yang serupa diorganisasikan dalam grup-grup yang disebut file. Sedangkan tabel merupakan ekuivalen database relasional dari sebuah file.

  1. Tabel Login Tabel login berfungsi untuk menyimpan data admin yang di-input pada sistem. Tabel login memiliki 5 field yang ditunjukkan pada Tabel 3.1.

Tabel 3.1 Tabel Login

  Field Type Keterangan

  id integer (20)

  ID admin, primery key username vachar (30) Username admin password vachar (30) Password admin nama vachar (30) Nama admin alamat vachar (50) Kota asal admin Tabel login admin yang ditunjukkan pada Tabel 3.1 memuat 5 field yaitu: id,

  

username, password, nama, dan alamat. Field id digunakan untuk menyimpan ID

admin sebagai primary key. Field username digunakan untuk menyimpan username

admin. Field password untuk menyimpan password admin. Field nama untuk

menyimpan nama lengkap admin. Field alamat untuk menyimpan kota asal admin.

  2. Tabel Daftar SPBU Tabel Daftar SPBU berfungsi untuk menyimpan data lokasi SPBU yang di- input pada sistem. Tabel data lokasi SPBU ditunjukkan pada Tabel 3.2.

Tabel 3.2 Tabel Data Lokasi SPBU

  Field Type Keterangan

  no integer (5) No urut data, primery key nama vachar (20) Nomor SPBU lokasi medium text Alamat / lokasi SPBU kecamatan vachar (20) Kecamatan lokasi SPBU

  

latitude vachar (20) Garis horisontal/mendatar lokasi

  SPBU

  

longitude vachar (20) Garis vertikal/tegak lurus lokasi

  SPBU fasilitas medium text Fasilitas SPBU Tabel data lokasi SPBU yang ditunjukkan pada Tabel 3.2 memiliki 6 field yaitu: no, nama, lokasi,kecamatan, latitude, longitude, dan fasilitas. Field

  „no‟ digunakan untuk menyimpan nomor urut data sebagai primery key. Field „nama‟ untuk menyimpan nomor SPBU. Field

  „lokasi‟ untuk menyimpan alamat atau lokasi SPBU.

  Field

  „kecamatan‟ untuk menyimpan lokasi SPBU yang berada pada kecamatan tertentu. Field „latitude’ untuk menyimpan garis horisontal atau mendatar, sedangkan

  field

  „longitude’ untuk menyimpan garis vertikal atau tegak lurus. Field „latitude‟ dan „longitude’ akan menentukan letak koordinat lokasi SPBU. Field „fasilitas‟ untuk menyimpan data fasilitas pendukung yang ada di setiap lokasi SPBU.

3.5 Perancangan Sistem

  Perancangan sistem merupakan suatu proses yang menggambarkan bagaimana sistem web pemetaan lokasi SPBU di Kota Semarang dirancang sesuai kebutuhan pada tahap analisis sistem.

3.5.1 Mengintegrasikan Google Maps API pada Halaman Web

  Integrasi Google Maps Api pada website adalah penerapan dari teknologi cloud

  

computing, yaitu dengan memanfaatkan layanan peta yang telah disediakan oleh

Google Maps untuk dimasukkan pada website. Urutan pemrograman Google Maps

API adalah sebagai berikut:

  1. Memasukkan Maps API JavaScript ke dalam PHP ditunjukkan pada Kode Program 1.

  Kode Program 3.1 Google Maps API Key 01 . . .

  02 <script

03 src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnW

  04 PMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A" 05 type="text/javascript"></script> 06 . . .

  Pada Kode Program 3.1 merupakan script Google Maps API Key, untuk mendapatkan API Key dibutuhkan login dengan akun gmail pada Google. Kemudian menuju pada sitkemudian memilih

  

Create Project untuk membuat project baru. Setelah selesai membuat project baru,

  dihasilkan API Key yang digunakan untuk mengakses Google Maps API. API yang dipakai untuk akses Google adalah “ABQIAAAAjU0EJWnWPMv7oQ- jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUM mH33A ”.

  2. Membuat elemen div dengan nama “map” yang berfungsi untuk menampilkan peta. Lebih jelasnya dapat dilihat pada Kode Program 2.

  Kode Program 3.2 Perintah untuk Menampilkan Peta 01. <div id="map" style="width:800px; height:400px"></div>

  Perintah baris pertama untuk menampilkan peta yang ditunjukkan pada Kode Program 2 dijelaskan bahwa tag div dengan variabel id untuk memanggil variabel

  

map yang menampung hasil objek peta. Tampilan peta ditentukan dengan ukuran

  lebar 800px dan tinggi 400px. Ukuran peta yang ditampilkan akan selalu mengikuti ukuran yang telah ditentukan pada tag style.

  3. Membuat output XML yang diambil dari database berisi data lokasi SPBU menggunakan echo PHP ditunjukkan pada Kode Program 3.

  Menggunakan Echo PHP untuk Output XML Kode Program 3.3

  01. <?php 02. require("koneksi.php"); 03. function parseToXML($htmlStr){ 04. $xmlStr=str_replace('<','<',$htmlStr); 05. $xmlStr=str_replace('>','>',$xmlStr); 06. $xmlStr=str_replace('"','"',$xmlStr); 07. $xmlStr=str_replace("'",''',$xmlStr); 08. $xmlStr=str_replace("&",'&',$xmlStr); 09. return $xmlStr;} 10. $connection=mysql_connect($server, $username, $password); 11. if (!$connection) { 12. die('Not connected : ' . mysql_error());} 13. $db_selected = mysql_select_db($database, $connection); 14. if (!$db_selected) { 15. die ('Can\'t use db : ' . mysql_error());} 16. $query = "SELECT * FROM tabelspbu WHERE 1"; 17. $result = mysql_query($query); 18. if (!$result) { 19. die('Invalid query: ' . mysql_error());} 20. header("Content-type: text/xml"); 21. echo '<markers>'; 22. while ($row = @mysql_fetch_assoc($result)){ 23. echo '<marker '; 24. echo 'nama="' . parseToXML($row['nama']) . '" '; 25. echo 'lokasi="' . parseToXML($row['lokasi']) . '" '; 26. echo 'fasilitas="' . parseToXML($row['fasilitas']) . '" '; 27. echo 'latitude="' . $row['latitude'] . '" '; 28. echo 'longitude="' . $row['longitude'] . '" '; 29. echo '/>';} 30. echo '</markers>'; 31. ?>

  Untuk menampilkan berkas XML menggunakan script echo PHP. Kode Program 3.3 pada baris kedua sampai 20 adalah perintah untuk koneksi dengan

  

database yang berisi data lokasi SPBU. Baris 21-30 adalah perintah untuk menampilkan data lokasi yang ada pada database berupa output XML dengan menggunakan kode echo PHP. Selesai membuat parseXML pada PHP, kemudian melakukan pembuatan peta untuk ditampilkan pada halaman web.

  4. Memberi perintah untuk membuat titik koordinat dan menampilkan peta Google Maps ditunjukkan pada Kode Program 3.4.

  Kode Program 3.4 Perintah untuk Membuat Titik Koordinat dan Menampilkan Peta Google Maps 01. var iconRed = new GIcon(); 02. iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';

03. iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';

04. iconRed.iconSize = new GSize(12, 20); 05. iconRed.shadowSize = new GSize(22, 20); 06. iconRed.iconAnchor = new GPoint(6, 20); 07. iconRed.infoWindowAnchor = new GPoint(5, 1); 08. function load() { 09. if (GBrowserIsCompatible()) { 10. var map = new GMap2(document.getElementById("map")); 11. map.addControl(new GSmallMapControl()); 12. map.addControl(new GMapTypeControl()); 13. map.setCenter(new GLatLng(-6.984315,110.409294), 12);

  14. GDownloadUrl("lihatmarker.php", function(data) { 15. var xml = GXml.parse(data); 16. var markers = xml.documentElement.getElementsByTagName("marker"); 17. for (var i = 0; i < markers.length; i++) { 18. var nama = markers[i].getAttribute("nama"); 19. var no = markers[i].getAttribute("no"); 20. var lokasi = markers[i].getAttribute("lokasi"); 21. var fasilitas = markers[i].getAttribute("fasilitas");

22. var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")),

23. parseFloat(markers[i].getAttribute("longitude"))); 24. var marker = createMarker(point, nama, no, lokasi, fasilitas); 25. map.addOverlay(marker);} 26. }); 27. } 28. } 29. function createMarker(point, nama,no, lokasi, fasilitas) { 30. var marker = new GMarker(point, iconRed); 31. var html = "<p class='font_marker2'>No." + no + "</p>" + 32. "<p class='font_marker1'> SPBU " + nama + "</p>" +

33. "<p class='font_marker2'> Alamat: " + lokasi + "<br/>Koordinat:" +

34. point + "<br/> Fasilitas: "+ fasilitas + "</p>" ;

  35. GEvent.addListener(marker, 'click', function() { 36. marker.openInfoWindowHtml(html); 37. }); 38. return marker; 39. }

  Kode Program 3.4 pada baris pertama sampai 7 adalah perintah untuk membuat

  

icon yang menjadi titik lokasi SPBU pada Google Maps. Baris 8-28 adalah fungsi

load yang berperan untuk menampilkan Maps pada peta. Baris 9-13 adalah perintah

  untuk membuat titik tengah kota Semarang pada Google Maps. Baris 14-28 adalah perintah untuk mengambil data XML yang sudah selesai dibuat kemudian akan ditampilkan pada marker peta. Baris 29-39 adalah perintah untuk menampilkan InfoWindow ketika terjadi klik yang berisi detail marker berupa jendela HTML.

  5. Melakukan perintah untuk menampilkan peta dalam tag body dengan event onload ditunjukkan pada Kode Progam 3.5.

  Kode Program 3.5 Perintah untuk Load Peta 01. <body onLoad="load()" onUnload="GUnload()">

  Kode Program 3.5 adalah perintah untuk me-load peta dengan fungsi

  

GUnload() digunakan untuk menampilkan peta dari Google Maps pada tag div

  dengan id map. Peta akan muncul dengan pemanggilan pada event onUnload ketika semua objek sudah siap, dan JavaScript Google Maps API sudah di-download sepenuhnya oleh browser.

  6. Membuat sebuah variabel untuk menampilkan pencarian lokasi SPBU ditunjukkan pada Kode Program 3.6.

  Kode Program 3.6 Perintah untuk Menampilkan Pencarian Lokasi 01. … 02. $db_host = "localhost"; 03. $db_user = "root"; 04. $db_pass = ""; 05. $db_name = "dbspbu"; 06. $link = mysql_pconnect ($db_host, $db_user, $db_pass) or die ("Tidak Bisa

  07. Terhubung dengan Database"); 08. mysql_select_db ($db_name) or die ("Tidak Bisa Select Database"); 09. if ((isset($_POST['submit'])) AND ($_POST['search'] <> "")) { 10. $search = $_POST['search']; 11. $sql = mysql_query("SELECT * FROM tabelspbu WHERE kecamatan LIKE 12. '%$search%' ") or die(mysql_error()); 13. $jumlah = mysql_num_rows($sql); 14. if ($jumlah > 0) { 15. echo '<p class="style1"> Ada '.$jumlah.' data lokasi berdasarkan

  16. Kecamatan "'.$search.'" yang sesuai.</p>'; 17. while ($res=mysql_fetch_array($sql)) { 18. …

  Kode Program 3.6 pada baris kedua sampai 8 adalah perintah untuk koneksi dengan database. Baris 9 sampai 13 adalah perintah untuk menampilkan data pencarian lokasi SPBU dengan memilih kategori pencariannya adalah „kecamatan‟ pada tabel. Field

  „kecamatan‟ disimpan pada variabel “$search” yang diambil dari

  

form pencarian berupa id=search. Baris 14 sampai 17 adalah perintah untuk

  menghitung jumlah data pencarian yang disimpan pada variabel “$jumlah”.

  3.5.2 Menentukan Lokasi SPBU

  Dari data yang diperoleh titik-titik lokasi SPBU dikonversi menjadi koordinat geografis. Kemudian ikon baru yang muncul pada peta dengan titik koordinat yang dibentuk dari latitude dan longtitude pada peta Kota Semarang.

  3.5.3 Perancangan Navigasi Aplikasi

  Struktur navigasi Web ini digunakan untuk menggambarkan secara garis besar halaman dari seluruh sistem dan menggambarkan bagaimana hubungan antara halaman-halaman tersebut. Struktur navigasi yang digunakan pada web ini yaitu struktur navigasi user. Keterkaitan antar halaman dapat dilihat dari gambar struktur navigasi berikut. Arah panah menunjukkan akses dari dan menuju masing-masing halaman.

3.5.3.1 Struktur Navigasi User

  Struktur navigasi user memperlihatkan halaman-halaman yang dapat diakses oleh seorang user atau pengguna biasa, serta keterkaitan antar halaman-halaman tersebut. Struktur navigasi user ditunjukkan pada Gambar 3.13.

  Struktur Navigasi User Gambar 3.16

  Struktur navigasi user pada Gambar 3.16 dijelaskan bahwa user dapat mengakses menu halaman web, antara lain yaitu menu beranda, menu lihat peta, menu cari lokasi, dan menu lihat info SPBU. Menu halaman beranda menyediakan berita terbaru untuk dapat dibaca oleh user. Sedangkan pada menu cari lokasi akan ditampilkan data lokasi SPBU dengan fasilitas pendukungnya, dan juga disediakan pencarian lokasi dengan memilih kategori

  „kecamatan‟ sehingga user menemukan lokasi SPBU yang dituju.

3.5.3.2 Struktur Navigasi Admin

  Struktur navigasi admin memperlihatkan halaman-halaman yang dapat diakses oleh seorang administrator, serta keterkaitan antar halaman-halaman tersebut. Struktur navigasi admin ditunjukkan pada Gambar 3.14.

  Struktur Navigasi Admin Gambar 3.17

  Struktur navigasi admin pada Gambar 3.17 dijelaskan bahwa admin juga dapat mengakses menu halaman web yang meliputi: menu halaman admin, menu data SPBU, menu info SPBU, menu berita terbaru. Pada struktur ini admin dapat mengatur data dengan fungsi-fungsi yang sudah ada. Fungsi-fungsi yang disediakan untuk mengatur data adalah fungsi tambah, ubah, dan hapus. Admin bertanggung jawab untuk melakukan pengecekkan data sehingga data yang disediakan sesuai dengan yang dibutuhkan oleh pengguna saat mengakses web.

3.6 Desain Antarmuka

  Perancangan awal aplikasi web merupakan rancangan layout. Rancangan layout saat dijalankan menampilkan halaman utama web yang ditunjukkan pada Gambar

  3.13.

Gambar 3.18 Rancangan Antarmuka

  Rancangan layout aplikasi web yang ditunjukkan pada Gambar 3.18 yang merupakan rancangan antarmuka. Tampilan awal untuk halaman Beranda terbagi menjadi 6 bagian utama antara lain: 1) Header yang berisi banner aplikasi sistem informasi pemetaan lokasi SPBU. 2) Menu beranda berisi tampilan utama halaman

  

web. 3) Menu Cari Lokasi berisi list menu pencarian lokasi. 4) Menu Daftar SPBU

  berisi data lokasi SPBU lengkap yang ditampilkan dalam tabel. 5) Menu Info SPBU berisi beberapa informasi umum mengenai SPBU, mulai dari definisi istilah, persyaratan standar PT. Pertamina untuk sarana dan prasarana, bangunan, lokasi dan perijinan umum, serta ketetapan initial fee SPBU. 6) Menu Login. Pada menu login disediakan untuk admin agar mengatur data seperti tambah, ubah, dan hapus data lokasi SPBU, serta mengatur data admin. 7) Sidebar kiri berisi 5 topik berita terbaru mengenai PT. Pertamina secara umum yang sedang terjadi. 8) Isi konten web. 9)

  

Sidebar kanan berisi voting, viewer pengunjung web, dan kalender. 10) Footer berisi

nama pembuat aplikasi web.