BAB IV ANALISA DAN PERANCANGAN SISTEM

BAB IV ANALISA DAN PERANCANGAN SISTEM BAB IV ANALISA DAN PERANCANGAN SISTEM 1.1 Gambaran Sistem Pemetaan SPBU Sistem pemetaan SPBU (Stasiun Pengisian Bahan Bakar Umum) di kota Jepara dan Kudus ini dimaksudkan untuk menyajikan informasi posisi serta fasilitas yang dimiliki oleh SPBU terkait yang dapat membantu pengguna untuk mengetahui letak serta fasilitas semua SPBU di kota Jepara dan Kudus. 1.2 Analisis Masalah 1.2.1 Analisis Sistem yang Sedang Berjalan 1.2.1.1 Identifikasi Permasalahan Permasalahan yang dihadapi pada sistem yang telah berjalan seperti saat ini, diantaranya adalah kurangnya informasi yang disediakan mengenai lokasi serta fasilitas setiap SPBU. Sistem informasi yang pernah dibuat hanya memiliki ruang lingkup pemetaan lokasi. Selain itu, digitasi yang dilakukan masih menggunakan aplikasi pembuat peta seperti Quantum GIS, Arc View, dan sejenisnya. Sehingga jika terjadi perubahan alam, pengembang harus melakukan perubahan penggambaran ulang peta secara manual. 1.2.2 Analisis Sistem yang Diusulkan Penerapan teknologi Google Maps API dalam sistem pemetaan lokasi SPBU ini dilakukan untuk mempermudah pengguna menemukan letak SPBU dengan interface yang dimiliki oleh google yang sudah familiar di masyarakat dan akan ter-update secara berkala untuk menyesuaikan perubahan alam yang terjadi. Pembuatan marker dilakukan dengan menggunakan Javascript dengan desain yang dibuat sedemikian rupa untuk memudahkan pengguna melihat animasi SPBU serta mengetahui fasilitas apa saja yang dimiliki oleh SPBU tersebut. 33

34 1.2.2.1 Rencana Proses 1. Input Data Master Untuk membangun sistem dibutuhkan pengisian data agar diproses untuk mendapatkan informasi dan kemudian akan menghasilkan suatu sistem yang nantinya dapat berjalan sesuai kebutuhan penggunanya. Data yang diperlukan dalam pembuatan sistem pemetaan SPBU adalah: a. Data Latitude b. Data Longitude c. Data Fasilitas d. Data Jenis Bahan Bakar e. Data Image SPBU Data tersebut merupakan data yang dibutuhkan dalam pembuatan sistem pemetaan SPBU. Pendataan yang dilakukan bertujuan untuk memudahkan dalam menginput dan merekap data letak serta fasilitas SPBU yang dibutuhkan. 2. Digitasi SPBU Untuk menghasilkan penyajian data yang relevan, perlu dilakukan digitasi sebagai penentuan titik fokus lokasi yang diinginkan. Dalam proses digitasi ini, data-data yang telah dikumpulkan akan dimasukkan dalam sebuah marker pada peta sehingga akan menjadi sebuah informasi yang lebih mudah dipahami oleh user. 1.2.2.2 Kendala yang di Hadapi Bagaimana cara untuk mewujudkan gagasan yang telah dipaparkan sebelumnya menjadi sebuah sistem yang mudah digunakan oleh masyarakat luas dalam mencari dan menemukan lokasi SPBU dengan memanfaatkan Google Maps API serta visualisasi fasilitas SPBU dengan gambar animasi yang diharapkan dapat terealisasikan dalam sistem yang akan dibuat.

35 1.2.3 Analisis Kebutuhan Sistem Dalam pembuatan sistem ini, pengembang memerlukan beberapa hal yang bisa digunakan untuk menunjang pembangunan sistem, agar sistem tersebut bisa berjalan sesuai dengan keinginan, kebutuhan dan kepentingan yang ada. Diantara kebutuhan sistem tersebut, antara lain adalah: 1.2.3.1 Analisa Kebutuhan Hardware Implementasi hosting dan computer client. Komputer atau laptop merupakan suatu kebutuhan yang paling mendasar dalam pembangunan sebuah sistem. Komputer atau laptop diperlukan oleh seorang administrator untuk menjalankan dan memantau atau mengawasi sebuah sistem yang sudah dibangun, tentu dalam hal ini sistem yang akan dijalankan dan dipantau atau diawasi adalah sistem yang digunakan untuk dalam mencari dan menemukan lokasi SPBU dengan memanfaatkan Google Maps API serta visualisasi fasilitas SPBU dengan gambar animasi. Sedangkan tujuan dari hosting disini adalah agar pengguna sistem atau masyarakat umum dapat mengakses dimanapun dia berada. 1.2.3.2 Analisa Kebutuhan Software Kebutuhan software yang yang dimaksudkan adalah perangkat lunak yang dibutuhkan dalam pembangunan Sistem Informasi Geografis Lokasi SPBU ini. Adapun perangkat lunak yang dibutuhkan, diantaranya adalah sebagai berikut: 1. Sublime Text 2. Node-JS 3. MongoDB 4. SketchUp 5. Browser (Mozilla Firefox atau Google Chrome)

36 1.2.3.3 Analisa Kebutuhan Brainware 1. Administrator Admin dalam sistem ini bertugas sebagai pengawas dan pemelihara sistem serta mengolah informasi yang berhubungan dengan Sistem Informasi Geografis Lokasi SPBU ini. 2. User User dalam sistem ini merupakan masyarakat umum yang menggunakan sistem ini dimana masyarakat ini bisa melihat dimana posisi mereka beserta lokasi SPBU di Kota Jepara dan Kudus lengkap dengan informasi fasilitas yang dimilikinya serta visualisasi animasi SPBU. 1.3 Perancangan Sistem Dalam perancangan sistem ini, penulis menggunakan Flowchart dan UML (Unified Modeling Language). Flowchart digunakan untuk menggambarkan secara ringkas proses kerja sistem. Sedangkan UML digunakan untuk mendeskripsikan proses sistem menyeluruh secara lebih rinci. 1.3.1 Perancangan Flowchart 1. Flowchart Web SPBU Pada gambar 4.1 menjelaskan proses yang terjadi di halaman web SPBU, yaitu meliputi halaman user dan admin. Pada halaman user terdapat 2 pilihan yaitu mencari SPBU terdekat dengan lokasi user dan mencari informasi tentang SPBU yang diinginkan. Pengguna dapat langsung memilih tujuan terdekat untuk menujukkan rute perjalanan dari lokasi pengguna serta juga dapat memilih SPBU yang berada di kawasan daerah tersebut untuk mengetahui fasilitas apa saja yang dimiliki oleh SPBU yang dipilih lengkap dengan animasi SPBU tersebut. Pada halaman admin, Admin dapat melakukan pengolahan data yang telah didapatkan sebelumnya. Input marker dilakukan dengan cara mencari dan memilih lokasi target sesuai dengan angka koordinat latitude dan longitude posisi pada peta.

37 Kemudian pada marker tersebut diisikan beberapa data penunjang lain mengenai fasilitas yang dimiliki oleh SPBU tersebut serta animasi SPBU yang akan ditampilkan. START GEOLOCATION VIEW MAP CURRENT LOCATION ACCESS INFO F LOGIN T VISITOR PAGE T LOGIN PAGE T CHECK GAS STATION F FIND SPBU F T User & Pass = Y CHOOSE GAS STATION CHOOSE DESTINATION True? T FORM GET DATA ROUTES PROSES ADMIN F VIEW GAS STATION INFO VIEW ROUTE AND GAS STATION MANAGE DATA T ADD DATA F UPDATE SELECT DATA EDIT/DELETE T INPUT FIND AGAIN MARKER GET LAT LONG INPUT SOURCE ANIMATION GAS STATION F SAVE DATA VIEW DATA END F LOGOUT Gambar 4.1 : Flowchart Web SPBU 1.3.2 Perancangan UML (Unified Modeling Language) 1. Bussiness Use Case Diagram Bussiness use case diagram menggambarkan kegiatan yang terdapat dalam sistem. Apa saja yang terjadi dalam sistem dan siapa saja yang melakukan kegiatan tersebut. Penggambaran dari kegiatan sistem lama dapat dijelaskan pada tabel proses pekerjaan yang tertera pada tabel 4.1.

38 Tabel 4.1 : Tabel Bussiness Use Case Sistem Lama NO AKTOR USE CASE DESKRIPSI 1. Admin Menggambar Peta Penggambaran peta dengan menggunakan aplikasi arcview. Input Data Melakukan pendigitan sesuai gambar peta yang didapat. Melakukan input data lokasi SPBU Marker Update Data dalam sebuah marker pada peta yang telah dibuat. Melakukan perubahan data lokasi Tabel Marker SPBU dalam sebuah marker yang telah dibuat. Upload Peta Mengunggah peta / perubahan peta yang telah didigit kedalam sebuah web. 2. Pengguna(User) Akses Informasi Mencari informasi dan melihat SPBU persebaran lokasi SPBU yang tersedia. Adapun penggambaran bussiness use case diagram dari Sistem Informasi Geografis Lokasi SPBU yang telah berjalan akan dijelaskan pada gambar 4.2. Gambar 4.2 : Bussiness Use Case Sistem Informasi Geografis Lokasi SPBU Lama

39 Gambar 4.2 menerangkan proses yang terjadi didalam sistem yang telah berjalan, baik interaksi admin dengan sistem maupun interaksi user dengan sistem. Pada use case admin, perlu adanya proses login untuk melakukan pengolahan data SPBU. Admin disini merupakan pengembang sistem. Sedangkan, pada sisi user yaitu masyarakat yang ingin melihat persebaran lokasi SPBU, untuk melakukan akses ke dalam sistem tidak dibutuhkan proses login terlebih dahulu. Sedangkan penggambaran dari kegiatan sistem lama dapat dijelaskan pada tabel proses pekerjaan yang tertera pada tabel 4.2. Tabel 4.2 : Tabel Bussiness Use Case Sistem Baru NO AKTOR USE CASE DESKRIPSI 1. Admin Input Data Melakukan input data lokasi SPBU Marker Update Data dalam sebuah marker pada peta yang telah dibuat. Melakukan perubahan data lokasi Tabel Marker SPBU dalam sebuah marker yang telah dibuat. 2. Pengguna(User) Akses Informasi Mencari informasi dan melihat SPBU persebaran lokasi SPBU yang tersedia. Adapun penggambaran bussiness use case diagram dari Sistem Informasi Geografis Lokasi SPBU yang telah berjalan akan dijelaskan pada gambar 4.3. Gambar 4.3 : Bussiness Use Case Sistem Informasi Geografis Lokasi SPBU Baru

40 2. Use Case Diagram Diagram ini menjelaskan tentang interaksi antara user dengan aplikasi. Use case diagram merupakan urutan kegiatan yang dilakukan aktor dan sistem untuk mencapai suatu tujuan tertentu. Walaupun menjelaskan kegiatan, namun use case hanya menjelaskan apa yang dilakukan oleh aktor dan sistem, bukan bagaimana aktor dan sistem melakukan kegiatan tersebut. a. Use Case Diagram Admin Gambar 4.4 : Use Case Diagram Admin Sistem Informasi Geografis Lokasi SPBU Gambar 4.4 menjelaskan tentang interaksi antara admin dengan sistem. Beberapa use case yang berhubungan dengan admin akan dijelaskan sebagai berikut: 1) Use Case : Login Aktor : Admin Tujuan : Mendapatkan hak akses penuh terhadap sistem untuk melakukan pengelolaan data. 2) Use Case : Membuat marker Aktor : Admin Tujuan : - Menginputkan dan mengolah data lokasi SPBU dalam peta. - Menginputkan dan mengolah data fasilitas SPBU dalam peta.

41 3) Use Case : Memilih tabel marker Aktor : Admin Tujuan : - Mengelola informasi mengenai lokasi serta fasilitas SPBU yang telah dibuat. Tabel 4.3 : Alur Optimistik Use Case Mengelola Data Alur untuk membuat Aktor Sistem 1. Admin membuka Sistem Informasi 2. Menampilkan peta awal dan Geografis SPBU dan melakukan membuka form admin setelah login ke dalam sistem verifikasi login yang dilakukan 3. Memilih lokasi pada peta yang telah 4. Menampilkan koordinat dari titik ditampilkan yang dipilih pada peta dan menampilkan beberapa inputan untuk informasi SPBU 5. Tekan tombol simpan untuk 6. Data lokasi dan informasi SPBU di menyimpan data lokasi dan simpan ke dalam databasae dan informasi yang sudah diinputkan tampil marker pada peta Alur untuk memilih table marker Aktor Sistem 7. Memililih form update data dan informasi SPBU 8. Menampilkan tabel yang berisi data dan informasi SPBU yang telah disimpan sebelumnya 9. Memilih data mana yang akan di ubah atau di hapus 10. Mengecek valid atau tidak data yang akan diubah atau dihapus. Jika data yang akan diubah atau dihapus sudah benar, maka data akan disimpan ke dalam database

42 Tabel 4.4 : Alur Pemistik Use Case Mengelola Data Kendala Solusi 1. Simpan data lokasi dan informasi Periksa kelengkapan data lokasi dan gagal informasi 2. Update data untuk mengubah atau Periksa kelengkapan data yang akan menghapus data gagal diubah atau dihapus dan ulangi proses update data 3. Login ke dalam sistem gagal Cek kembali username dan password yang dimasukan b. Use Case Diagram User Gambar 4.5 : Use Case Diagram User Sistem Informasi Geografis Lokasi SPBU Gambar 4.5 menjelaskan tentang interaksi antara user dengan sistem. Use case ini merupakan potongan dari keseluruhan sistem. Pada sistem keseluruhan, user dapat memilih untuk mencari informasi SPBU atau memilih pencarian rute SPBU. Beberapa use case yang berhubungan dengan user akan dijelaskan sebagai berikut: 1) Use Case : Memilih lokasi marker Aktor : User Tujuan : - Melihat informasi lokasi dan fasilitas yang terdapat pada SPBU. - Melihat animasi objek SPBU.

43 Tabel 4.5 : Alur Optimistik Use Case Memilih Marker Alur untuk menentukan jalur menuju lokasi SPBU Aktor Sistem 1. Pengguna membuka Sistem 2. Menampilkan marker yang berisi Informasi Geografis SPBU data lokasi dan informasi SPBU dan mendapatan lokasi pengguna kemudian menampilkan sebagai marker 3. Pengguna memilih salah satu marker yang berisi data lokasi dan informasi 4. Menampilkan informasi dan juga sketsa 3D tentang SPBU yang dipilih SPBU dan menampilkan jalur serta memberika navigasi menuju lokasi SPBU tersebut Tabel 4.6 : Alur Pesimistik Use Case Memilih Marker Kendala Solusi 1. Marker dan Geo Location tidak Reload kembali sistem muncul 2. Marker muncul dan Geo Location Reload kembali sistem dan periksa tidak muncul browser apakah support untuk Geo Location atau tidak 3. Activity Diagram Gambar 4.6 merupakan diagram yang menjelaskan tentang aktivitas yang dilakukan dari awal hingga proses selesai. Diagram ini terdiri dari Workflow Diagram yang menjelaskan proses secara global, dan Activity Diagram tiap proses untuk menggambarkan proses kerja secara rinci.

44 Start Get Geolocation [tidak] Olah Data? [ya] Login Memilih Marker SPBU Tambah Data? [ya] Memilih Daftar Tabel Marker [tidak] [tidak] [ya] View Info? Membuat Marker Memperbarui / Menghapus Marker Menampilkan Animasi SPBU Menampilkan Informasi SPBU Mengisi Informasi dan Animasi SPBU End Gambar 4.6 : Workflow Diagram dari awal sampai selesai a. Activity Diagram Membuat Marker Gambar 4.7 merupakan diagram yang menjelaskan tentang alur sistem dalam membuat sebuah marker pada peta dari awal sampai proses berhasil. Gambar 4.7 : Activity Diagram Membuat Marker

45 b. Activity Diagram Memilih Tabel Marker Gambar 4.8 merupakan diagram yang menjelaskan tentang alur sistem dalam mengelola marker pada peta yang telah dibuat sebelumnya. Gambar 4.8 : Activity Diagram Memilih Tabel Marker c. Activity Diagram Memilih dan Melihat Info Marker Gambar 4.9 merupakan diagram yang menjelaskan tentang alur sistem dalam menampilkan informasi pada setiap marker yang telah dibuat sebelumnya. Gambar 4.9 : Activity Diagram Memilih dan Melihat Info Marker

46 4. Sequence Diagram Sequence Diagram adalah diagram interaksi yang disusun berdasarkan urutan waktu. Kita membaca Sequence Diagram dari atas kebawah. Setiap use case memiliki sebuah aliran alternatif. Setiap Sequence Diagram mempresentasikan satu aliran dari beberapa aliran didalam use case. a. Sequence Diagram Informasi SPBU : User Web Browser Web Server Google Map Server Google Map Database Open Web Load Google Maps API Run Google Maps Function Load Images Request Maps Images Link Validasi Data Request Get Data SPBU Return Maps Images Link Return Function Load Images Show Map View Map and Markers Choose Marker Object Run node.js Validasi Marker Request Get 3D Request Get Data Marker Selected Get Info & 3D Object View Info & 3D Object Selected Validasi Database System Google SketcUp Warehouse Data Valid Request Data SPBU Data Valid Requst Data Marker Selected Request 3D Selected Gambar 4.10 : Sequence Diagram Informasi SPBU

47 Gambar 4.10 merupakan diagram yang menjelaskan tentang alur interaksi user dengan sistem informasi SPBU berdasarkan urutan waktu. b. Sequence Diagram Pengolahan Data SPBU Gambar 4.11 merupakan diagram yang menjelaskan tentang alur urutan-urutan pengolahan data SPBU yang dilakukan oleh admin berdasarkan waktu pemrosesan. : Admin Web Browser Web Server Google Map Server Google Map Database Validasi Database System Login Web Load GMaps API Run GMaps Function Load Images Request Maps Image Link Validasi Data Request Data Valid Get Data SPBU Request Data SPBU Return Maps Images Link Return Function Load Images Show Map View Map and Markers Add Marker Run Function Add Marker Get Form Input Data Show Form Input Data Input and Save Data Run Function Save Validasi Data Input Data Valid Save Data Data Saved Edit and Delete Data Run Function Edit/Delete Data Validasi Change Data Data Valid Update Data Data Updated Gambar 4.11 : Sequence Diagram Pengolahan Data SPBU

48 5. Collaboration Diagram Sebagaimana Sequence Diagram, Collaboration Diagram digunakan untk menampilkan aliran skenario tertentu dalam use case. Jika Sequence Diagram disusun berdasarkan waktu, Collaboration Diagram lebih konsentrasi pada hubungan antara obyek-obyek. Untuk alasan tertentu, kita dapat membuat Sequence Diagram dan Collaboration Diagram untuk sebuah skenario. Meskipun mereka mempunyai maksud dan menampilkan informasi yang sama, masing-masing memberikan sedikit perbedaan dalam penampilannya. a. Collaboration Diagram Informasi SPBU : User 1: Open Web 13: Choose Marker Object 2: Load Google Maps API 14: Run node.js Web Server 12: View Map and Markers 22: View Info & 3D Object Selected Web Browser 11: Show Map 21: Get Info & 3D Object 3: Run Google Maps Function Load Images 19: Get 3D Request 10: Return Function Load Images Google SketcUp Warehouse 15: Validasi Marker Request Google Map Server 8: Get Data SPBU 20: Get Data Marker Selected 6: Data Valid 16: Data Valid 18: Request 3D Selected Validasi 9: Return Maps Images Link 4: Request Maps Images Link 7: Request Data SPBU 17: Requst Data Marker Selected 5: Validasi Data Request Database System Google Map Database Gambar 4.12 : Collaboration Diagram Informasi SPBU

49 b. Collaboration Diagram Pengolahan Data SPBU Google Map Database 5: Validasi Data Request 9: Return Maps Images Link 4: Request Maps Image Link 6: Data Valid 20: Data Valid 26: Data Valid Google Map Server 10: Return Function Load Images 3: Run GMaps Function Load Images Web Server Validasi 19: Validasi Data Input 25: Validasi Change Data 8: Get Data SPBU 2: Load GMaps API 14: Run Function Add Marker 18: Run Function Save 24: Run Function Edit/Delete Data 7: Request Data SPBU 21: Save Data 27: Update Data 11: Show Map 15: Get Form Input Data Database System 22: Data Saved 28: Data Updated Web Browser 12: View Map and Markers 16: Show Form Input Data 1: Login Web 13: Add Marker 17: Input and Save Data 23: Edit and Delete Data : Admin Gambar 4.13 : Collaboration Diagram Pengolahan Data SPBU 6. Class Diagram Class diagram menggambarkan hubungan antar kelas dalam sistem yang sedang dibangun dan bagaimana mereka saling berkolaborasi untuk mencapai suatu tujuan. Ada beberapa class diagram yang direncanakan dalam aplikasi ini. Pertama adalah class diagram Maps. Di dalam class ini terdapat atibut (id, title, info, img, width, height). Operasi yang terdapat pada class ini adalah show karena atribut pada class ini berupa data peta dari google maps yang hanya dapat menampilkan peta saja seperti terlihat pada gambar 4.14. Gambar 4.14 : Class Diagram Maps

50 Selanjutnya adalah class diagram marker. Di dalam class ini terdapat atibut (id, title, icon, latitude, longitude, info, url3d). Operasi yang terdapat pada class ini adalah add, update, delete, karena atribut pada class ini berupa data lokasi yang dapat ditambah, diedit, dan dihapus, seperti terlihat pada gambar 4.15. Gambar 4.15 : Class Diagram Marker Selanjutnya adalah clas diagram route Di dalam class ini terdapat beberapa atribut seperti id, title, info, img, width, heigth dan polyline. Operasi yang terdapat pada class ini adalah show karena atribut pada class ini berupa data dari peta dari Google Maps yang hanya dapat menampilkan sebuah peta, seperti yang terlihat pada gambar 4.16. Gambar 4.16 : Class Diagram Terakhir adalah class diagram User. Di dalam class ini terdapat atibut (id, username, password). Class ini digunakan untuk menyimpan data user, oleh sebab itu tidak ada operasi yang terdapat pada class ini seperti terlihat pada gambar 4.17.

51 Gambar 4.17 : Class Diagram User Relasi dari class-class tersebut dapat dilihat pada gambar diagram 4.18. Gambar 4.18 : Relasi Class Diagram 4.4 Perancangan Basis Data 4.4.1 Struktur Collection a. Collection Marker Fungsi dari collection marker ini digunakan untuk menyimpan data marker yang digunakan untuk menyimpan informasi SPBU yang digunakan untuk memberikan informasi dan 3D SPBU. Dokumen yang terdapat dalam collection marker ini dapat dilihat pada gambar 4.19. Gambar 4.19 : Collection Marker

52 b. Collection User Fungsi dari collection user ini digunakan untuk menyimpan data dari user yang bertugas mengelola data sistem atau bisa disebut juga sebagai admin. Yang digunakan untuk melakukan validasi dalam melakukan login ke dalam sistem. Dokumen dari collection user ini bisa dilihat pada gambar 4.20. Gambar 4.20 : Collection User 4.5 Perancangan Sistem 4.5.1 Kebutuhan Pembuatan Sistem Sebelum membuat sistem yang sebenarnya, salah satu hal pertama yang harus dilakukan adalah membuat sebuah perancangan mengenai user interface yang baik sehingga akan memudahkan pengembang ketika melakukan pembuatan sistem yang sebenarnya. Untuk pembuatan desain sistem informasi serta pencarian lokasi SPBU (Stasiun Pengisian Bahan Bakar Umum) terdekat, memanfaatkan dan menggunakan beberapa tools untuk pembuatan interfacenya, diantaranya adalah pemanfaatan Google Maps API untuk menampilkan peta, marker, jalur dan juga navigasi jalur, sedangkan untuk pembuatan animasi 3D SPBU menggunakan aplikasi Sketchup. Kemudian untuk perancangan user interface akan di gambarkan melalui perancangan desain sistem secara keseluruhan.

53 4.5.2 Perancangan Desain Sistem a. Menu Utama Desain menu utama merupakan gambaran interface dari menu utama dari sistem yang disediakan untuk user, dimana pada menu utama ini user disajikan dengan tampilan peta secara penuh pada halaman websiste dan juga menampilkan marker dari SPBU serta marker dimana posisi user sedang berada. Seperti pada gambar 4.21, dan user bisa memilih salah satu marker untuk dapat menampilkan informasi SPBU serta animasi 3D, jalur dan juga navigasi jalur. Dengan keterangan yang lebih rinci sesuai dengan angka yang tertera sebagai berikut: 1. Pada no 1 ini merupakan tampilan dari google maps secara penuh pada halaman awal sistem yang diberikan zoom sebanyak 12 kali, dan height dan width diberi presentase 100% akan menyesuaikan dengan seberapa besar ukuran layar dari komputer atau laptop pengguna. 2. Dan pada no 2 merupakan info window yang menandakan lokasi dimana user berada saat mengakses sistem ini, yang mempunyai ukuran font 12. 3. Sedangkan no 3 merupakan toogle yang menandai dimana lokasi SPBU berada. Dan toogle atau tanda yang digunakan merupakan bawaan standart dari google maps. 1 3 2 Gambar 4.21 : Desain Menu Utama

54 b. Menu Utama Pop up Desain menu utama pop up ini merupakan gambaran interface yang sama dengan menu utama, namun dalam interface sekarang diasumsikan jika pengguna memilih salah satu marker maka pengguna dapat mengakses informasi dari SPBU tersebut. Dan penggguna juga dapat melihat 3D SPBU serta jalur navigasi yang pop up dari samping sebelah kiri menu utama, dan terdapat juga menu login dan register yang juga pop up dari sebelah kanan bawah yang bisa di akses dengan mengklik tombol yang disembunyikan pada posisi yang sama, sedangkan dalam menu utama sendiri masih akan menampilkan jalur yang menghubungkan antara dua marker, yaitu marker geolocation dan juga marker SPBU. Seperti yang terlihat pada gambar 4.22, dengan keterangan yang lebih rinci sesuai dengan angka yang tertera pada gambar sebagai berikut : 1. Pada no 1 ini merupakan tampilan dari google maps secara penuh seperti saat pertama membuka sistem yang tentu saja memiliki zoom sebanyak 12 kali dan juga mempunyai height dan width yag diberikan presentase sebanyak 100% supaya ukuran dari peta dapat menyesuaikan dari ukuran layar dari komputer atau laptop pengguna. 2. Menampilkan navigasi route dari lokasi pengguna yang mengakses sistem, menuju lokasi SPBU yang telah dipilih sebelumnya dan popup dari sebelah kiri atas halaman utama sistem. 3. Menampilkan bangunan 3D dari SPBU yang telah dipilih sebelumnya dan popup dari sebelah kiri atas halaman utama sistem. 4. Merupakan button login dan register yang popup dari bagian kanan bawah dari halaman utama yang bila dipilih salah satu akan menampilkan menu login atau register.

55 1 2 4 3 Gambar 4.22 : Desain Menu Utama Pop up c. Menu Login Desain menu login ini merupakan gambaran interface tentang bagaimana tampilan dari menu login yang akan dibuat, dan berikut adalah gambaran dari menu login seperti yang terdapat pada gambar 4.23, dengan keterangan yang lebih rinci sesuai dengan angka yang tertera pada gambar sebagai berikut: 1. Pada no 1 ini merupakan tampilan dari google maps secara penuh seperti saat pertama membuka sistem yang tentu saja memiliki zoom sebanyak 12 kali dan juga mempunyai height dan width yag diberikan presentase sebanyak 100% supaya ukuran dari peta dapat menyesuaikan dari ukuran layar dari komputer atau laptop pengguna. 2. Merupakan form login yang menampilkan menu seperti textfield untuk memasukan username dan password serta sebuah button dan beberapa menu yang lain. 3. Merupakan button login dan register yang popup dari bagian kanan bawah dari halaman utama yang bila dipilih salah satu akan menampilkan menu login atau register. 4. Button login yang mempunyai ukuran small button bootstrap.

56 5. Merupakan texfield untuk menampung username serta password. 6. Text yang mempunya ukuran sebesar 12px, yang berisi nama textfield yang berada di samping. 7. Text sebesar 12px yang merupakan sebuah link, yang diperlukan jika admin melupakan password Gambar 4.23 : Desain Menu Login d. Menu Register Desain menu register ini menggambarkan tentang bagaimana tampilan dar menu register dalam sistem yang akan dibuat, dan berikut adalah desain menu register yang bisa dilihat pada gambar 4.24, dengan rincian dari menu sesuai yang tertera pada nomor pada desain menu berikut: 1. Pada no 1 ini merupakan tampilan dari google maps secara penuh seperti saat pertama membuka sistem yang tentu saja memiliki zoom sebanyak 12 kali dan juga mempunyai height dan width yag diberikan presentase sebanyak 100% supaya ukuran dari peta dapat menyesuaikan dari ukuran layar dari komputer atau laptop pengguna.

57 2. Merupakan form register yang menampilkan beberapa textfield untuk input data yang berhubungan dengan identitas admin dari sistem serta sebuah button register untuk menyimpan data yang sudah dimasukan sebelumnya.. 3. Merupakan button login dan register yang popup dari bagian kanan bawah dari halaman utama yang bila dipilih salah satu akan menampilkan menu login atau register. 4. Button login yang mempunyai ukuran small button bootstrap, yang berguna untuk menyimpan data yang sudah dimasukan kedalam texfield sebelumnya 5. Text yang mempunya ukuran sebesar 12px, yang berisi nama textfiekd yang berada disamping. 6. Merupakan texfield untuk menampung data yang berhubungan dengan identitas admin dari sistem. Gambar 4.24 : Desain Menu Register e. Menu Admin Pada desain menu admin ini akan menggambarkan tentang bagaimana sebuah data marker dimasukan informasi tentang SPBU dan marker itu sendiri. Dalam menu ini juga akan menampilkan tabel yang berisi data yang sudah tersimpan sebelumnya,

58 seperti terlihat pada gambar 4.25, dengan keterangan yang lebih rinci sesuai dengan angka yang tertera pada gambar sebagai berikut: 1. Pada no 1 ini merupakan tampilan dari google maps secara penuh seperti saat pertama membuka sistem yang tentu saja memiliki zoom sebanyak 12 kali dan juga mempunyai height dan width yag diberikan presentase sebanyak 100% supaya ukuran dari peta dapat menyesuaikan dari ukuran layar dari komputer atau laptop pengguna. 2. Merupakan form input data yang berhubungan dengan identitas yang dimiliki oleh sebuah SPBU. 3. Tabel yang menanpung data dari SPBU yang telah dimasukan sebelumnya yang pop-up dari bagian bawah kanan bawah halaman utama admin. 4. Text yang mempunya ukuran sebesar 12px, yang berisi nama textfiekd yang berada disamping. 5. Merupakan texfield untuk menampung data yang berhubungan dengan dari SPBU yang akan dimasukan ke dalam sistem. 6. Button yang digunakan untuk menyimpan data yang sudah dimasukan atau untuk membatalkan proses simpan yang akan berlangsung serta untuk melihat data yang sudah disimpan sebelumnya. Gambar 4.25 : Desain Menu Admin

59 f. Menu Search Pada desain menu search ini akan menggambarkan tentang bagaimana menu ini akan seperti apa dalam sistem nantinya, dimana akan terdapat tampilan penuh peta dan sebuah texfield dan juga sebuah tempat untuk menampung hasil pencarian yang dilakukan. 1. Mempunyai height dan width yag diberikan presentase sebanyak 100% supaya ukuran dari peta dapat menyesuaikan dari ukuran layar dari komputer atau laptop pengguna. 2. Merupakan texfield yang digunakan untuk menampung kata kunci yang digunakan untuk mencari fasilitas dari SPBU 3. Sebuah tabel yang digunakan untuk menampung hasil pencarian yang akan keluar dari bawah sistem saat akan menampilkan data. Gambar 4.26 : Desain Menu Search

(HALAMAN INI SENGAJA DIKOSONGKAN) 60