Bab 4 Hasil Penelitian dan Pembahasan -...

16
40 Bab 4 Hasil Penelitian dan Pembahasan Berdasarkan perancangan yang telah dilakukan pada Bab 3, maka pada bagian Bab 4 dibahas tentang implementasi antarmuka mengenai perancangan sistem informasi pemetaan lokasi SPBU berbasis web di Kota Semarang. Tujuan dari implementasi antarmuka sistem adalah untuk memastikan aplikasi web yang sudah selesai dibuat bekerja secara efektif dan efisien sesuai dengan yang diharapkan. Aplikasi perancangan sistem informasi pemetaan lokasi SPBU berbasis web dibangun menggunakan Macromedia Dreamweaver 8 dengan menggunakan Google Maps API untuk menampilkan peta lokasi SPBU dan PHP script untuk user interface nya. Pada perancangan aplikasi web yang dibangun menyediakan sistem informasi yang lengkap mengenai lokasi SPBU, fasilitas pendukung pada lokasi SPBU, berita terbaru tentang Pertamina, info SPBU, dan pencarian lokasi yang dituju. Aplikasi web yang dibangun menggunakan Google Maps API yang berfungsi untuk menampilkan titik koordinat lokasi SPBU dengan marker yang akan menampilkan detail titik koordinat saat melakukan klik dengan mouse. 4.1 Antarmuka Sistem Tampilan yang dihasilkan sistem pemetaan lokasi SPBU berbasis web berupa form yang telah dirancang pada Bab sebelumnya. Tampilan utama website saat dijalankan adalah menu halaman Beranda. Tampilan menu halaman Beranda ditunjukkan pada Gambar 4.1.

Transcript of Bab 4 Hasil Penelitian dan Pembahasan -...

Page 1: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

40

Bab 4

Hasil Penelitian dan Pembahasan

Berdasarkan perancangan yang telah dilakukan pada Bab 3, maka pada bagian

Bab 4 dibahas tentang implementasi antarmuka mengenai perancangan sistem

informasi pemetaan lokasi SPBU berbasis web di Kota Semarang. Tujuan dari

implementasi antarmuka sistem adalah untuk memastikan aplikasi web yang sudah

selesai dibuat bekerja secara efektif dan efisien sesuai dengan yang diharapkan.

Aplikasi perancangan sistem informasi pemetaan lokasi SPBU berbasis web dibangun

menggunakan Macromedia Dreamweaver 8 dengan menggunakan Google Maps API

untuk menampilkan peta lokasi SPBU dan PHP script untuk user interface nya.

Pada perancangan aplikasi web yang dibangun menyediakan sistem informasi

yang lengkap mengenai lokasi SPBU, fasilitas pendukung pada lokasi SPBU, berita

terbaru tentang Pertamina, info SPBU, dan pencarian lokasi yang dituju. Aplikasi web

yang dibangun menggunakan Google Maps API yang berfungsi untuk menampilkan

titik koordinat lokasi SPBU dengan marker yang akan menampilkan detail titik

koordinat saat melakukan klik dengan mouse.

4.1 Antarmuka Sistem

Tampilan yang dihasilkan sistem pemetaan lokasi SPBU berbasis web berupa

form yang telah dirancang pada Bab sebelumnya. Tampilan utama website saat

dijalankan adalah menu halaman Beranda. Tampilan menu halaman Beranda

ditunjukkan pada Gambar 4.1.

Page 2: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

41

Gambar 4.1 Menu Halaman Beranda

Gambar 4.1 adalah tampilan menu halaman Beranda yang berisi sidebar kiri

yang menyediakan 5 topik berita, isi konten yang berada posisi tengah halaman, dan

sidebar kanan yang berisi voting, viewer, dan kalender. Pada sidebar kiri juga

menyediakan fungsi link Indek Berita. Apabila user ingin membaca berita lainnya

dapat memilih pada link Indek Berita.

Antarmuka perancangan sistem pemetaan berbasis web dibagi menjadi 2

macam, yaitu: antarmuka user dan antarmuka admin. Berikut ini adalah penjelasan

antarmuka sistem.

4.1.1 Antarmuka User

Antarmuka untuk user dimulai dari halaman Beranda yang ditunjukkan pada

Gambar 4.1. Berdasarkan Gambar 4.1 terdapat 3 menu isi konten yang meliputi:

Page 3: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

42

1. Menu Navigasi Web

Menu navigasi web menyediakan 5 menu pilihan untuk user yang terdiri dari

menu Beranda, menu Cari Lokasi, menu Daftar SPBU, menu Info SPBU, dan menu

Login untuk admin. Menu navigasi web berada dibawah header. Menu navigasi web

ditunjukkan pada Gambar 4.2.

Gambar 4.2 Menu Navigasi Web

Pada menu navigasi website yang ditunjukkan pada Gambar 4.2 menyediakan 5

menu yang meliputi: 1) Menu Beranda berisi halaman utama web. 2) Menu Cari

Lokasi berisi pencarian lokasi SPBU yang dituju oleh user. 3) Menu Daftar SPBU

berisi data lengkap lokasi SPBU di Kota Semarang. 4) Menu Info SPBU berisi

informasi umum mengenai SPBU. 5) Menu Login digunakan untuk admin masuk

pada halaman administrator sehingga dapat mengatur data admin dan data lokasi

SPBU.

2. Menu Kiri

Menu kiri digunakan untuk menampilkan daftar kategori pilihan apabila user

memilih, maka ditampilka informasi lengkap dari kategori pilihan. Pada aplikasi ini

disediakan 3 menu kiri yang meliputi:

a. Menu Kiri Beranda

Menu kiri beranda berisi Berita Terbaru yang menyediakan 5 topik berita.

Apabila user memilih menu link Indek Berita, maka user menuju pada halaman Indek

Berita. User dapat membaca isi berita dengan memilih link judul berita. Tampilan

menu kiri beranda ditunjukkan pada Gambar 4.3.

Page 4: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

43

Gambar 4.3 Menu Kiri Berita

b. Menu Kiri Cari Lokasi

Menu kiri cari lokasi berisi pilihan pencarian lokasi dengan kategori pilihan

kecamatan. Terdapat 16 pilihan Kecamatan untuk pencarian lokasi di Kota Semarang.

User dapat memilih sesuai dengan lokasi SPBU yang dituju dengan memilih pilihan

kategori kecamatan. Menu kiri cari lokasi dapat ditunjukkan pada Gambar 4.4.

Gambar 4.4 Menu Kiri Cari Lokasi

Page 5: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

44

c. Menu Kiri Info SPBU

Menu kiri Info SPBU berisikan daftar pilihan mengenai 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. Menu kiri Info SPBU ditunjukkan pada Gambar 4.5.

Gambar 4.5 Menu Kiri Info SPBU

3. Menu Kontent

Menu kontent menampilkan semua informasi mengenai sistem pemetaan lokasi

SPBU di kota Semarang. Pada menu ini terdapat 4 jenis kontent yang ditampilkan

antara lain menu kontent index, menu kontent lihat peta, menu kontent cari lokasi,

dan menu kontent info SPBU.

a. Menu Kontent Beranda

Menu kontent beranda menyediakan 2 tabel yaitu: tabel pertama adalah

tampilan gambar SPBU yang terdapat pada tabel bagian atas. Tampilan hasil gambar

dibangun dengan aplikasi WOW Slider yang dimasukkan ke dalam PHP. Tabel kedua

yang terdapat pada tabel bagian bawah berisi penulisan yang meliputi tujuan dan

Page 6: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

45

manfaat dari perancangan aplikasi web. Tampilan menu kontent beranda ditunjukkan

pada Gambar 4.6.

Gambar 4.6 Menu Kontent Beranda

b. Menu Kontent Cari Lokasi

Menu kontent cari lokasi menampilkan 2 tampilan hasil pencarian lokasi SPBU

menurut kategori pilihan kecamatan yang meliputi:

1) Tampilan hasil pencarian berupa peta Google Maps yang terdapat pada

bagian halaman atas isi kontent. Isi kontent cari lokasi pada peta Google Maps

ditunjukkan pada Gambar 4.7.

Page 7: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

46

Gambar 4.7 Isi Kontent Peta Cari Lokasi

2) Tampilan hasil pencarian berupa tabel yang terdapat pada bagian halaman

bawah setelah peta Google Maps. Isi kontent cari lokasi dalam bentuk tabel

ditunjukkan pada Gambar 4.8.

Gambar 4.8 Isi Kontent Tabel Cari Lokasi

c. Menu Kontent Daftar SPBU

Menu ini menampilkan dengan 2 bagian konten dari menu Daftar SPBU, yaitu

bagian pertama adalah form kontent yang berfungsi untuk pencarian lokasi. Bagian

kedua menampilkan tabel kontent yang berfungsi untuk menampilkan hasil pencarian

lokasi SPBU berupa tabel. Menu kontent Daftar SPBU berfungsi untuk user mencari

Page 8: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

47

lokasi SPBU yang dituju. Hasil pencarian ditampilkan pada bagian tabel kontent.

Pengujian pencarian lokasi dengan memilih kategori pilihan kecamatan untuk lokasi

SPBU dengan menggunakan memilih kecamatan ‘Banyumanik’ pada form pilihan

kontent, maka ditampilakan hasil pencarian yang ditunjukkan pada Gambar 4.9.

Gambar 4.9 Isi Kontent Menu Daftar SPBU

d. Menu Kontent Info SPBU

Isi kontent dari menu Info SPBU menyediakan 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. Isi

konten info ditampilkan saat user memilih pilihan daftar info pada menu kiri.

Kemudian sistem menampilkan informasi pada isi kontent Info SPBU. Menu kontent

Info SPBU ditunjukkan pada Gambar 4.10.

Page 9: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

48

Gambar 4.10 Menu Kontent Info SPBU

4.1.2 Antarmuka Admin

Antarmuka admin pertama kali dijumpai adalah halaman login yang terdapat

pada menu Login. Halaman login ditunjukkan pada Gambar 4.11.

Gambar 4.11 Halaman Login Admin

Admin melakukan proses login terlebih dahulu dengan mengisi form login yang

ditunjukkan pada Gambar 4.11. Kemudian memasukkan username dan password

sesuai dengan akun database yang terdaftar. Apabila login berhasil, maka admin

ditampilkan menuju ke halaman admin. Pada halaman admin terdapat 2 fasilitas

Page 10: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

49

untuk mengatur data admin dan mengatur data lokasi SPBU. Halaman admin

ditunjukkan pada Gambar 4.12.

Gambar 4.12 Halaman Admin

Halaman admin yang ditunjukkan pada Gambar 4.10 terdapat 4 menu admin,

antara lain sebagai berikut:

1. Menu Admin

Secara default antarmuka utama admin setelah proses login berhasil adalah

halaman admin. Menu admin berisi tabel daftar admin yang menyediakan fungsi ubah

dan hapus data admin yang ditunjukkan pada Gambar 4.12.

2. Menu Data SPBU

Menu ini berisi data lokasi berupa tabel yang memiliki 8 kolom yaitu: nomor

urut, nomor SPBU, lokasi SPBU, kecamatan, latitude, longitude, fasilitas, keterangan

yang menyediakan fungsi ubah dan hapus data lokasi SPBU. Tampilan menu data

SPBU ditunjukkan pada Gambar 4.13.

Page 11: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

50

Gambar 4.13 Menu Data SPBU

Menu Data SPBU yang ditunjukkan pada Gambar 4.13 terdapat fungsi link

pada tabel kolom kecamatan dan keterangan. Link pada tabel kolom Kecamatan

berfungsi untuk menampilkan titik koordiat lokasi SPBU berupa peta Google Maps

API. Sedangkan untuk fungsi link pada kolom Keterangan digunakan untuk

mengubah dan hapus data. Apabila admin memilih link ubah, kemudian admin

menuju pada tampilan form ubah data, apabila admin memilih link hapus maka data

lokasi pada baris yang dipilih terhapus oleh sistem.

3. Menu Tambah Data

Menu tambah data menyediakan 2 tabel yang berisi form tambah data SPBU

yang berada di sebelah kiri, dan form tambah admin yang berada di sebelah kanan.

Admin memasukkan data sesuai dengan tipe dari struktur di database. Menu tambah

data ditunjukkan pada Gambar 4.14.

Page 12: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

51

Gambar 4.14 Menu Tambah Data Lokasi SPBU

Menu tambah data untuk form tambah admin yang ditunjukkan pada Gambar

4.14 terdapat 2 keterangan untuk bagian input username dan password bahwa

panjang input yang diisi maksimal 10 huruf atau angka. Keterangan tersebut telah

sesuai dengan tipe struktur di database yaitu berupa tipe vachar dengan values=10.

4. Menu Logout

Menu ini berisi tombol Logout yang digunakan untuk admin keluar dari

halaman admin. Saat admin memilih tombol logout, kemudian admin kembali

menuju pada menu halaman login.

4.2 Pengujian Sistem

Pengujian sistem dilakukan dengan menggunakan metode Blackbox testing.

Pengujian Blackbox dilakukan untuk menemukan kesalahan yang terjadi seperti

fungsi yang tidak benar atau hilang, kesalahan interface, kesalahan struktur data,

kesalahan kinerja, atau kesalahan inisialisasi atau terminasi. Pengujian dilakukan

pada sisi user dan admin pada sistem pemetaan web ini. Sistem diujikan pada 30 user

secara acak, dan kemudian user mengisi kuisioner yang berfungsi sebagai penilaian

terhadap sistem.

Page 13: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

52

4.2.1 Pengujian User

Pengujian aplikasi dilakukan pada sisi user atau pengunjung dari website. Hasil

pengujian user ditunjukkan pada Tabel 4.1.

Tabel 4.1 Hasil Pengujian Aplikasi Web User

Fungsi yang

diuji Kondisi

Output yang

diharapkan

Output yang

dihasilkan sistem

Status

Pengujian

Lihat Berita

Terkini

Form di isi

dengan benar

Sukses

menampilkan

berita terkini

Sukses

menampilkan

berita terkini Valid

Lihat Peta

Form di isi

dengan benar

Suskses

menampilkan Peta

Suskses

menampilkan

Peta Valid

Melakukan

Pencarian

Lokasi

Form di isi

dengan benar

Sukses

menampilkan tabel

pencarian lokasi

Sukses

menampilkan

tabel pencarian

lokasi Valid

Lihat Titik dari

Pencarian

Lokasi

Form di isi

dengan benar

Sukses

menampilkan titik

pencarian lokasi

Sukses

menampilkan titik

pencarian lokasi Valid

Lihat Info SPBU

Form di isi

dengan benar

Sukses

menampilkan info

SPBU

Sukses

menampilkan info

SPBU Valid

Berdasarkan hasil pengujian yang ditunjukkan pada Tabel 4.1 terlihat bahwa

status status pengujian dari setiap fungsi valid. Fungsi-fungsi yang diuji dapat

berjalan dengan baik sehingga sistem sukses menghasilkan output yang diinginkan

oleh user, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai yang

diharapkan.

4.2.2 Pengujian Admin

Pengujian aplikasi web juga dilakukan pada sisi admin dari website ini. Hasil

pengujian aplikasi pada admin ditunjukkan pada Tabel 4.2.

Page 14: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

53

Table 4.2 Hasil Pengujian Aplikasi Web Admin

Fungsi yang

diuji Kondisi

Output yang

diharapkan

Output yang

dihasilkan sistem

Status

Pengujian

Login

Username dan

Password benar Sukses Login Sukses Login Valid

Username dan

Password salah

atau kosong Gagal Login Gagal Login Valid

Tambah Data

SPBU

Form di isi

dengan benar

Sukses tambah

data

Sukses tambah

data Valid

Form di isi

beberapa yang

kosong

Gagal tambah

data

Gagal tambah

data Valid

Ubah Data

SPBU

Form di isi

dengan benar

Sukses ubah

data Sukses ubah data Valid

Hapus Data

SPBU

Form di isi

dengan benar

Sukses hapus

data Sukses hapus data Valid

Load Data

Lokasi SPBU

Form di isi

dengan benar

Sukses load

data lokasi

Sukses load data

lokasi Valid

Berdasarkan hasil pengujian admin yang ditunjukkan pada Tabel 4.2 terlihat

bahwa status pengujian dari setiap fungsi valid. Fungsi-fungsi yang diuji dapat

berjalan dengan baik sehingga sistem sukses menghasilkan output yang diinginkan

oleh admin, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai

yang diharapkan.

4.3 Analisis Hasil Pengujian Sistem

Analisis pengujian yang dilakukan yaitu dengan melakukan pengujian beta, di

mana pengujian yang dilakukan oleh orang yang tidak ikut dalam pembuatan aplikasi

atau calon pengguna aplikasi. Pengujian beta dilakukan dengan menggunakan

kuesioner, yaitu dengan membagikan kuesioner pada sample user. Kemudian sample

user mengisi kuesioner yang disediakan untuk mendapatkan data sebagai bahan

analisis.

Sample user yang mengisi kuesioner berjumlah 30 responden dan dipilih secara

acak. Sample user pada pengujian ini adalah orang yang bertempat tinggal di kota

Page 15: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

54

Semarang. Berdasarkan pernyataan dalam kuesioner yang ada pada lampiran,

menghasilkan data yang ditunjukkan pada Tabel 4.3.

Tabel 4.3 Hasil Jawaban Kuesioner

No Pernyataan SS S CS TS STS

1 Pertanyaan 1

12 14 3 1 0

2 Pertanyaan 2 10 13 4 2 1

3 Pertanyaan 3 9 16 4 0 1

4 Pertanyaan 4 13 12 3 2 0

5 Pertanyaan 5 11 9 8 2 0

Setelah semua jawaban diketahui pada Tabel 4.3, maka yang dilakukan adalah

menghitung presentase jawaban responden yang telah mengisi kuesioner. Perhitungan

dilakukan menggunakan skala Likert, di mana masing-masing jawaban diberi skor 1-

5 dengan penjelasan sebagai berikut:

1. Sangat Setuju (SS) = 5

2. Setuju (S) = 4

3. Cukup Setuju (CS) = 3

4. Tidak Setuju (TS) = 2

5. Sangat Tidak Setuju (STS) = 1

Hasil analisi data untuk pertanyaan 1 menunjukkan sebanyak 40,00%

responden menjawab sangat setuju, 46,67% responden menjawab setuju, 10,00%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini mudah

digunakan.

Hasil analisis data untuk pertanyaan 2 menunjukkan sebanyak 33,33%

responden menjawab sangat setuju, 43,33% responden menjawab setuju, 13,33%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini dapat dilihat

dengan jelas.

Page 16: Bab 4 Hasil Penelitian dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/15016/4/T1_672009073_BAB IV... · menggunakan Macromedia Dreamweaver 8 dengan menggunakan

55

Hasil analisis data untuk pertanyaan 3 menunjukkan sebanyak 30,00%

responden menjawab sangat setuju, 53,33% responden menjawab setuju, 13,33%

responden menjawab cukup setuju. Jadi disimpulkan bahwa menu-menu pada

aplikasi ini mudah dipahami dan tidak membingungkan.

Hasil analisis data untuk pertanyaan 4 menunjukkan sebanyak 43,33%

responden menjawab sangat setuju, 40,00% responden menjawab setuju, 10,00%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini membantu

dan mempermudah masyarakat untuk mengetahui informasi lokasi SPBU di kota

Semarang.

Hasil analisis data untuk pertanyaan 5 menunjukkan sebanyak 36,67%

responden menjawab sangat setuju, 30,00% responden menjawab setuju, 26,67%

responden menjawab cukup setuju. Jadi disimpulkan bahwa aplikasi ini bermanfaat

untuk digunakan oleh pengendara maupun masyarakat.