15
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.
Gambar 3.1 Tahapan Penelitian
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
Identifikasi Masalah
Perancangan Sistem
Pembuatan Aplikasi
16
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 processorIntel Pentium IV 2. Hard Disk
3. RAM
17
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
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 CaseDiagram
Use casediagram menggambarkan fungsionalitas yang diharapkan dari sebuah
18
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
19
3.3.2 ActivityDiagram
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
20
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.
Gambar 3.4 Activity Diagram Melihat Data SPBU
21
Gambar 3.5 Activity Diagram Menambah Data SPBU
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 SequenceDiagram
Sequence diagram digunakan untuk menggambarkan skenario atau rangkaian
22
Gambar 3.6 Sequence Diagram Melihat Peta SPBU
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.
Gambar 3.7 Sequence Diagram Mencari Lokasi SPBU
23
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.
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.
24
Gambar 3.9 Sequence Diagram Admin Mengubah Data SPBU
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.
25
Gambar 3.10 Sequence Diagram Admin Menambah Data SPBU
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
: admin
sistem database
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
26
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.
Gambar 3.11 Sequence Diagram Admin Menghapus Data SPBU
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
27
dihapus sudah telah berhasil dan menampilkan hasil data terbaru yang ada pada
database.
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 ClassDiagram
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.
: admin
sistem
1. pilih menu logout
2. hapus session
28
Gambar 3.13 Class Diagram Sistem
Class diagram yang ditunjukkan pada Gambar 3.13 memiliki 6 class yaitu:
classadmin, 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,
29
dapat juga didefinisikan pada deployment diagram (Grady Booch, James Rumbaugh, and Ivar Jacobson, 1999).
Gambar 3.14 Deployment Diagram Sistem
Gambar 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
30
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
31
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
32
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
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 situs https://console.developers.google.com/project, kemudian 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.
33
Kode Program 3.2 Perintah untuk Menampilkan Peta
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.
Kode Program 3.3 Menggunakan Echo PHP untuk Output XML
Untuk menampilkan berkas XML menggunakan script echo PHP. Kode
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>';
34
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
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
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());
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;
35
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
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
Kode Program 3.6 pada baris kedua sampai 8 adalah perintah untuk koneksi dengan database. Baris 9 sampai 13 adalah perintah untuk menampilkan data
01. <body onLoad="load()" onUnload="GUnload()">
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)) {
36
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.1Struktur Navigasi User
37
Gambar 3.16 Struktur Navigasi User
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.2Struktur Navigasi Admin
38
Gambar 3.17 Struktur Navigasi Admin
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
39
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)
