PERANCANGAN SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK
SKRIPSI
OLEH:
Oktavius Ali NPM: 14411826
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER WIDYA DHARMA PONTIANAK 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
PERANCANGAN SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK
SKRIPSI
OLEH:
Oktavius Ali NPM: 14411826
Diajukan Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer Pada Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER WIDYA DHARMA PONTIANAK 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
ABSTRAKSI
A) Oktavius Ali (14411826) B) Perancangan Sistem Informasi Geografis Lokasi Bengkel Motor Resmi Berbasis Web di Kota Pontianak C) X ; 104 Halaman; 2018; 28 Tabel; 53 Gambar; 3 Lampiran D) Sistem, Informasi, Geografis, Perancangan, Sistem, Bengkel, Web E) Dalam melakukan penelitian ini penulis telah mempunyai alasan untuk perancangan sistem informasi geografis berbasis web di Kota Pontianak, salah satu alasan dirancang atau dibuatnya sistem informasi geografis lokasi bengkel motor resmi berbasis web ini adalah untuk membantu pemilik kendaraan bermotor dan pengguna sistem dalam mencari titik lokasi bengkel motor resmi yang tersebar di Kota Pontianak. Metode penelitian yang penulis gunakan dalam penelitian ini adalah metode wawancara, observasi, dan studi kepustakaan. Wawancara yang digunakan dalam penelitian ini adalah wawancara tidak terstrkutur, Penulis melakukan wawancara kepada pihak-pihak bengkel resmi dan pemilik kendaraan yang ada di Kota Pontianak untuk mendapatkan data dan informasi yang diperlukan untuk permasalahan yang diteliti. Sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontianak menampilkan data lokasi persebaran bengkel motor resmi diseluruh Kota pontianak, yang terdiri dari bengkel motor resmi Yamaha (YSS), Honda (AHASS), Kawasaki (KMI), dan Suzuki yang meliputi enam wilayah Kecamatan di Kota Pontianak yaitu Pontanak Barat, Pontianak Timur, Pontianak Utara, Pontianak Tenggara, Pontianak Kota, dan Pontianak Selatan. Selain menampilkan data, sistem informasi yang telah dirancang juga memiliki fitur penilaian yang berfungsi untuk memberi nilai terdahap bengkel yang mempunyai kualitas layanan sesuai bagi pengguna dan pemilik kendaraan bermotor. Sistem informasi geografis yang telah dirancang adalah sebuah sistem informasi geografis yang sudah bersifat real time. Sistem yang telah dibuat masih terdapat beberapa kekurangan sehingga perlu adanya tahap pengembangan lebih lanjut pada tahap selanjutnya untuk mendapatkan sistem yang lebih akurat dan kompleks sehingga fungsionalitas sistem akan bertambah dari sistem yang sudah dirancang pada saat ini. F) Daftar Acuan 36 (2011 - 2018) G) Soebandi, S.Kom., M.Kom. dan Sandi Tendean, S.Kom., M.Kom.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa atas berkat dan rahmat-Nya yang dilimpahkan kepada penulis, sehingga penulis dapat menyelesaikan skripsi yang berjudul “Perancangan Sistem Informasi Geografis Lokasi Bengkel Motor Resmi Berbasis Web di Kota Pontianak” yang merupakan salah satu persyaratan akademik bagi penulis untuk menyelesaikan jenjang S1 Program studi Sistem Informasi di Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak. Dalam penulisan skripsi ini, penulis telah banyak mendapat bantuan berupa bimbingan, petunjuk, data, saran maupun dorongan moral dari berbagai pihak. Maka pada kesempatan ini penulis mengucapkan terima kasih kepada: 1. Bapak Riyadi J. Iskandar, S.Kom., M.M., M.Kom., selaku Ketua Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak. 2. Bapak Thommy Willay, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak. 3. Bapak Soebandi, S.Kom., M.Kom., selaku Dosen Pembimbing Utama yang telah memberikan petunjuk, bimbingan dan pengarahan dalam penyusunan skripsi ini.
i
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
4. Bapak Sandi Tendean, S.Kom., M.Kom., selaku Dosen Pembimbing Pembantu yang telah memberikan petunjuk, bimbingan dan pengarahan dalam penyusunan skripsi ini. 5. Bapak dan ibu dosen serta Staf Administrasi Sekolah Tinggi Manajemen Informatika dan Komputer Widya Pontianak. 6. Ayah, Ibu dan Saudara tercinta yang telah banyak memberikan bantuan dan dorongan selama penulis menjalani studi hingga akhir penulisan skripsi ini. 7. Rekan-rekan mahasiswa Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak yang turut memberikan semangat dan saran dalam menyelesaikan skripsi ini. 8. Pihak-pihak yang tidak dapat penulis sebutkan satu persatu yang telah turut membantu sehingga skripsi ini dapat diselesaikan. Penulis menyadari bahwa penyusunan skripsi ini masih jauh dari kesempurnaan, namun demikian telah memberikan manfaat bagi penulis. Akhir kata penulis berharap skripsi ini dapat bermanfaat bagi kita semua dan saran yang bersifat membangun akan penulis terima kasih dengan senag hati. Pontianak, Juli 2018
Penulis
ii
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
DAFTAR ISI Halaman KATA PENGANTAR .............................................................................................. i DAFTAR ISI ............................................................................................................. iii DAFTAR TABEL ..................................................................................................... v DAFTAR GAMBAR ................................................................................................ vii BAB
I
PENDAHULUAN ................................................................................. 1 A. Latar Belakang Penelitian ............................................................... 1 B. Permasalahan ................................................................................... 3 C. Pembatasan Masalah ....................................................................... 3 D. Tujuan Penlitian .............................................................................. 4 E. Manfaat Penelitian .......................................................................... 4 F. Kerangka Pemikiran ........................................................................ 6 G. Metode Penelitian ............................................................................ 7
BAB
II LANDASAN TEORI ............................................................................. 9 A. Teori-teori Umum ........................................................................... 9 B. Teoti-teori Khusus ........................................................................... 15
BAB
III ANALISIS SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK ............ 38 A. Analisis Kebutuhan Sistem ............................................................. 38 B. Prosedur Sistem Usulan .................................................................. 39 C. Perancangan UML .......................................................................... 42 iii
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Halaman BAB IV PERANCANGAN SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK ....................................................................... 59 A. Perancangan Database ..................................................................... 59 B. Perancangan Web Sistem Informasi ..... ..........................................63 C. Tampilan Web Sistem Informasi Geografis .................................... 76 D. Pengujian Blackbox ........................................................................ 89 E.
BAB V
Kebutuhan Perangkat Keras dan Perangkat Lunak .........................102
KESIMPULAN DAN SARAN ..............................................................103 A.
Kesimpulan .....................................................................................103
B.
Saran ................................................................................................104
DAFTAR PUSTAKA ............................................................................................... x DAFTAR RIWAYAT HIDUP PENULIS ................................................................
iv
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
DAFTAR TABEL
Tabel
Halaman
Tabel 1.1
Tabel Peningkatan Jumlah Kendaraan bermotor .............................. 1
Tabel 2.1
Tabel Notasi Struktur Data ............................................................... 18
Tabel 2.2
Tabel Notasi Tipe Data ..................................................................... 19
Tabel 2.3
Tabel Simbol-simbol Class Diagram ................................................ 21
Tabel 2.4
Tabel Simbol-simbol Package Diagram ........................................... 22
Tabel 2.5
Tabel Simbol-simbol Use Case Diagram .......................................... 23
Tabel 2.6
Tabel Simbol-simbol Sequence Diagram ......................................... 24
Tabel 2.7
Tabel Simbol-simbol Activity Diagram ............................................ 25
Tabel 2.8
Tabel Simbol-simbol Component Diagram ...................................... 26
Tabel 2.9
Tabel Simbol-simbol Deployment Diagram ..................................... 27
Tabel 2.11
Tabel Tipe Data Numerik ................................................................. 32
Tabel 2.12
Tabel Tipe Data Karakter .................................................................. 33
Tabel 2.13
Tabel Tipe Data Tempral ................................................................... 33
Tabel 2.14
Tabel Tipe Data Temporal ................................................................ 34
Tabel 4.1
Tabel Struktur Tabel User ................................................................. 61
Tabel 4.2
Tabel Struktur Tabel Penilaian ......................................................... 61
Tabel 4.3
Tabel Struktur Tabel Bengkel .......................................................... 61
Tabel 4.4
Tabel Struktur Tabel Pesan ............................................................... 62 v
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Tabel
Halaman
Tabel 4.5
Hasil Pengujian Halaman Login ....................................................... 91
Tabel 4.6
Hasil Pengujian Halaman Login ....................................................... 93
Tabel 4.7
Hasil Pengujian Form Tambah Operator .......................................... 95
Tabel 4.8
Hasil Pengujian Form Tambah Operator .......................................... 96
Tabel 4.9
Hasil Pengujian Form Tambah Data Bengkel .................................. 98
Tabel 4.10
Hasil Pengujian Form Tambah Data Bengkel .................................. 99
Tabel 4.11
Hasil Pengujian Form Kirim Pesan ...................................................100
Tabel 4.12
Hasil Pengujian Form Tambah Operator ..........................................101
vi
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
DAFTAR GAMBAR
Gambar
Halaman
Gambar 1.1
Kerangka Pemikiran .......................................................................... 6
Gambar 3.1
Use Case Diagram ............................................................................. 43
Gambar 3.2
Activity Diagram Pencarian ............................................................. 44
Gambar 3.3
Activity Diagram Penilaian Kepuasaan Layanan Bengkel .............. 45
Gambar 3.4
Activity Diagram Menghubungi Admin .......................................... 46
Gambar 3.5
Activity Diagram Pendaftaran Operator Bengkel ............................ 47
Gambar 3.6
Activity Diagram Login Operator Bengkel ...................................... 48
Gambar 3.7
Activity Diagram Melengkapi Data Bengkel ................................... 49
Gambar 3.8
Activity Diagram Login Admin Web .............................................. 50
Gambar 3.9
Sequance Diagram Pencarian ............................................................ 51
Gambar 3.10 Sequance Diagram Penilaian Kepuasan Layanan Bengkel ............... 52 Gambar 3.11 Sequance Diagram Menghubungi Admin ......................................... 53 Gambar 3.12 Sequance Diagram Pendaftaran Operator Bengkel ........................... 54 Gambar 3.13 Sequance Diagram Login Operator ................................................... 55 Gambar 3.14 Sequance Diagram Melengkapi Data Bengkel .................................. 56 Gambar 3.15 Sequance Diagram Login Admin ...................................................... 57 Gambar 3.16 Class Diagram ................................................................................... 58 Gambar 4.1
Relasi Antar Tabel .............................................................................. 62 vii
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Gambar
Halaman
Gambar 4.2
Rancangan Halaman Utama .............................................................. 63
Gambar 4.3
Rancangan Halaman Lokasi .............................................................. 64
Gambar 4.4
Rancangan Halaman Data Bengkel ................................................... 65
Gambar 4.5
Rancangan Info Window Detail Data Bengkel ................................. 66
Gambar 4.6
Rancangan Form Penilaian ................................................................ 67
Gambar 4.7
Rancangan Halaman Login ............................................................... 68
Gambar 4.8
Rancangan Halaman Operator .......................................................... 79
Gambar 4.9
Rancangan Form Tambah Data Bengkel .......................................... 70
Gambar 4.10 Rancangan Form Kontak Admin ....................................................... 71 Gambar 4.11 Rancangan Halaman Admin .............................................................. 72 Gambar 4.12 Rancangan Halaman Daftar Operator ............................................... 73 Gambar 4.13 Rancangan Form Tambah Operator .................................................. 74 Gambar 4.14 Rancangan Halaman Pesan Masuk ................................................... 75 Gambar 4.15 Tampilan Halaman Utama ................................................................ 76 Gambar 4.16 Tampilan Halaman Lokasi ................................................................ 77 Gambar 4.17 Tampilan Halaman Lokasi ................................................................ 78 Gambar 4.18 Tampilan Halaman Data Bengkel ..................................................... 79 Gambar 4.19 Tampilan Info Window Detail Data Bengkel ................................... 80 Gambar 4.20 Tampilan Form Penilaian .................................................................. 81 Gambar 4.21 Tampilan Halaman Login .................................................................. 82 viii
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Gambar
Halaman
Gambar 4.22 Tampilan Halaman Operator ............................................................. 83 Gambar 4.23 Tampilan Tambah Data Bengkel ....................................................... 84 Gambar 4.24 Tampilan Form Kontak Admin ......................................................... 85 Gambar 4.25 Tampilan Halaman Admin ................................................................ 86 Gambar 4.26 Tampilan Halaman Daftar Operator .................................................. 87 Gambar 4.27 Tampilan Form Tambah Operator ..................................................... 88 Gambar 4.28 Tampilan Halaman Pesan Masuk ...................................................... 89 Gambar 4.29 Data Login Salah ............................................................................... 90 Gambar 4.30 Data Login Sesuai ............................................................................. 92 Gambar 4.31 Inputan Data Yang Tidak Sesuai ....................................................... 94 Gambar 4.32 Inputan Data Yang Sesuai ................................................................. 95 Gambar 4.33 Inputan Data Yang Tidak Sesuai ....................................................... 97 Gambar 4.34 Pesan Error ........................................................................................ 97 Gambar 4.35 Inputan Data Yang Sesuai .................................................................. 98 Gambar 4.36 Inputan Data Yang Tidak Sesuai .......................................................100 Gambar 4.37 Inputan Data Yang Sesuai .................................................................101
ix
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
BAB I PENDAHULUAN
A. Latar Belakang Penelitian Dalam beberapa tahun terakhir, jumlah kendaraan bermotor di Indonesia berdasarkan data dari Badan Pusat Statistik yang dikutip melalui website resminya www.bps.go.id terus mengalami peningkatan, data tersebut dapat dilihat pada tabel peningkatan kendaraan bermotor dari tahun ke tahun yang telah diolah oleh Badan Pusat Statistik di bawah ini. TABEL 1.1 PENINGKATAN JUMLAH KENDARAAN BERMOTOR DI INDONESIA Jenis Kendaraan Bermotor Mobil Penumpang BUS Mobil Barang Sepeda Motor Jumlah
2014
2015
2016
2017
12.599.038 2.398.846 6.235.136 92.976.240 114.209.260
13.480.973 2.420.917 6.611.028 98.881.267 121.394.185
14.580.666 2.486.898 7.063.433 105.150.082 129.281.079
15.354.067 2.503.257 7.121.573 111.271.319 136.250.216
Sumber : Data BPS, 2018
Dengan meningkatnya pelayanan terhadap kendaran bermotor, hal itu juga menuntut meningkatnya jumlah titik lokasi bengkel dan pelayanan terhadap kendaraan bermotor di suatu kota dan daerah, khususnya di Kota Pontianak. Kota Pontianak memiliki jumlah penduduk yang besar sehingga secara tidak langsung menyebabkan meningkatnya jumlah kendaraan bermotor di Kota Pontianak. Berdasarkan data dari Badan Pengelolaan Keuangan dan Pendapatan Daerah (BPKPD) Kalimantan Barat jumlah kendaraan bermotor di Kalimantan 1
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 2 www.foxitsoftware.com/shopping
Barat pada tahun 2015 berjumlah 1.271.082 unit, pada tahun 2016 berjumlah 1.412.313 unit, dan tahun 2017 mengalami peningkatan mencapai 10 persen atau sekitar 1.569.236 unit yang tersebar di 14 kabupaten atau kota yang ada di Kalimantan Barat dan khususnya di Kota Pontianak jumlah kendaraan bermotor mencapai 225.838 unit. Kendaraan bermotor memerlukan perawatan berkala dan perbaikan jika terjadi kerusakan, Kerusakan kendaraan bermotor juga dapat terjadi dimanapun dan kapanpun. Banyak pengendara yang tidak mengetahui lokasi bengkel di lokasi yang jarang ditempuh. Informasi yang akurat mengenai lokasi bengkel menjadi hal yang sangat penting bagi pengguna kendaraan bermotor. Ada beberapa permasalahan yang sering dihadapi pemilik kendaraan bermotor diantaranya kesulitan dalam memilih dan mencari bengkel yang memiliki pelayanan bagus dan berkualitas seperti tata cara pelayanan yang ramah, ruang tunggu yang nyaman dalam menunggu antrian pelayanan, serta mempunyai peralatan mekanisasi yang modern dan memiliki fasilitas pelayanan lengkap, terutama dalam masalah kelengkapan suku cadang yang ditawarkan dan dijual pada suatu bengkel. Pembangunan sistem informasi geografis pencarian dan pemetaan
lokasi bengkel berbasis web dapat menjadi salah satu alternatif
pemecahan masalah dalam menemukan lokasi bengkel. Dengan demikian dalam penelitian ini penulis akan membangun sebuah sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontianak.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 3 www.foxitsoftware.com/shopping
B. Permasalahan Berdasarkan uraian dari latar belakang penelitian yang telah dijelaskan di atas maka dapat diambil permasalahan yaitu, “Bagaimana cara membangun atau merancang sebuah sistem infromasi geografis dan hal apa yang harus dipenuhi untuk membangun sistem informasi geografis lokasi bengkel motor resmi berbasis Web di Kota Pontianak yang akurat dan mudah dalam pencarian data lokasi bengkel resmi?”.
C. Pembatasan Masalah Agar perancangan sistem infromasi geografis lokasi bengkel ini dapat dilakukan lebih fokus dan sesuai maka penulis membuat batasan masalah dengan hal-hal sebagai berikut: 1. Objek yang diambil dalam penelitian ini adalah bengkel motor resmi Yamaha (YSS), Honda (AHASS), Kawasaki (KMI), dan Suzuki (SIS). 2. Lokasi penelitian adalah Kecamatan Pontianak Selatan, Pontianak Timur, Pontianak Barat, Pontianak Kota, Pontianak Utara, dan Pontianak Tenggara. 3. Untuk mengetahui fungsionalitas sistem yang telah dirancang maka akan diterapkan pengujian blackbox terhadap sistem informasi geografis. 4. Informasi yang ditampilkan pada web berupa id bengkel, nama bengkel, alamat, Kecamatan, nomor telepon, deskripsi layanan, status operasional,
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 4 www.foxitsoftware.com/shopping
status penilaian dan foto bengkel yang terintegrasi dengan pemetaan Google Maps API. 5. Bengkel resmi yang memliki pelayanan bagus dan berkualitas akan direkomendasikan oleh sistem berdasarkan penilaian kepuasan dari konsumen terhadap bengkel yang terdaftar pada web melalui fitur pemberian nilai dengan memberi tanda bintang pada bengkel.
D. Tujuan Penelitian Penelitian bertujuan untuk membangun sebuah Sistem Informasi Geografis lokasi bengkel motor resmi berbasis web untuk membantu pengguna dalam mencari lokasi bengkel motor resmi yang tersebar di Kota Pontianak.
E. Manfaat Penelitian Penelitian ini dapat ditinjau dari empat manfaat, yaitu manfaat bagi penulis, masyarakat khususnya pengendara, manfaat bagi pemilik bengkel, dan manfaat bagi pemerintah daerah. Berikut manfaat penelitian bagi setiap pengguna: 1. Bagi Penulis Menambah wawasan dalam membuat suatu sistem informasi geografis pemetaan lokasi bengkel motor resmi berbasis web serta dapat menerapkan ilmu pengetahuan yang telah penulis peroleh selama masa perkuliahan di
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 5 www.foxitsoftware.com/shopping
Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma Pontianak. 2. Bagi pemilik kendaraan pemilik kendaraan bermotor atau pengguna dapat dengan mudah menemukan lokasi-lokasi bengkel motor resmi yang ada di Kota Pontianak. 3. Bagi pemilik bengkel Menjadi sebuah sarana untuk melakukan promosi bagi pemilik bengkel melalui web sistem informasi geografis yang telah dirancang. 4. Bagi pemerintah Untuk lembaga yang tergabung dalam pemerintah daerah dapat memudahkan kinerja dalam pendataan seperti pihak Badan Penanaman Modal dan Pelayanan Terpadu Satu Pintu (BPMPTSP) Kota Pontianak yaitu dapat melakukan pendataan bengkel, mengetahui lokasi persebaran dan jumlah bengkel resmi yang terdapat di Kota Pontianak.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 6 www.foxitsoftware.com/shopping
F. Kerangka Pemikiran GAMBAR 1.1 KERANGKA PEMIKIRAN
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 7 www.foxitsoftware.com/shopping
G. Metode Penelitian 1. Rancangan Penelitian Rancangan penelitian yang digunakan dalam penulisan penelitian ini adalah desain penelitian deskriptif yaitu prosedur pemecahan masalah terhadap fakta-fakta yang ada untuk melakukan percobaan dalam memperoleh informasi yang diperlukan. 2. Metode Pengumpulan Data Pada tahap ini dilakukan pengumpulan dan pembelajaran terhadap berbagai informasi yang dibutuhkan dalam pembuatan Sistem Informasi Geografis Pemetaan Lokasi Bengkel Motor Resmi Berbasis Web yang meliputi : a. Observasi Melakukan penelitian langsung ke lapangan untuk melakukan pengamatan dalam proses menganalisis sistem yang sedang berjalan. b. Wawancara Teknik pengumpulan data dengan melakukan tanya jawab dengan pihak pemilik bengkel dan pengguna kendaraan bermotor untuk mendapatkan data yang diperlukan dalam penelitian ini. c. Studi Kepustakaan
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 8 www.foxitsoftware.com/shopping
Metode pengumpulan data dengan membaca dan mempelajari sejumlah buku-buku yang berkaitan dengan penelitian sebagai acuan referensi untuk mendukung. 3. Metode Analisis Sistem Pada tahap ini dilakukan analisis terhadap kebutuhan sistem, dengan mendefenisikan faktor-faktor penentu dalam pembuatan sistem, serta kesulitan-kesulitan yang mungkin timbul sebagai landasan dalam tahap desain sistem selanjutnya. Metode analisis sistem yang digunakan penulis adalah dengan membuat Unified Modelling Language (UML) untuk menganalisis, merancang dan menentukan tampilan sistem yang akan dibangun. 4. Teknik Perancangan Sistem Teknik perancangan sistem yang akan digunakan adalah dengan menggunakan aplikasi Adobe Dreamweaver CS6 sebagai program untuk merancang sebuah website, perancangan tampilan website menggunakan Bootstrap v3.3.7, bahasa pemrograman seperti HTML, PHP serta CSS, Laravel v5.6, dan XAMPP v3.0.12
untuk merancang database, berserta
Google Maps API untuk menitergrasi pemetaan melalui web.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
BAB II LANDASAN TEORI
A. Teori-teori Umum 1. Data Menurut Davis sebagaimana dikutip Hutahaean (2016:9): “Data adalah bahan mentah bagi informasi, dirumuskan sebagai kelompok lambang-lambang tidak acak menunjukan jumlah-jumlah, hal-hal dan sebagainya”. Menurut Yakub (2012:51): “Data merupakan representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pegawai, siswa, pembeli, pelanggan), barang, hewan, peristiwa, konsep, keadaan dan sebagainya yang direkam dalam bentuk angka, huruf, symbol, teks, gambar, bunyi, atau kombinasinya”. Berdasarkan penjelasan di atas dapat disimpulkan bahwa data adalah suatu fakta dan bentuk yang nyata berupa sebuah objek yang dapat dilihat. 2. Informasi Menurut Kustiyahningsih dan Anamisa (2011:145): “Informasi adalah suatu bentuk penyajian data yang melalui mekanisme pemrosesan, berguna bagi pihak tertentu misalnya manajer”. Sedangkan Menurut Sutabri (2014:2): “Informasi adalah hasil pemrosesan, manipulasi, dan 9
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 10 www.foxitsoftware.com/shopping
pengorganisasian/penataan dari sekelompok data yang mempunyai nilai pengetahuan bagi penggunanya”. Dari teori di atas dapat disimpulkan bahwa informasi adalah data yang telah diolah dan mempunyai nilai yang bersifat relevan bagi penerima informasi. 3. Sistem Menurut Fat sebagaimana dikutip Hutahaean (2016:1): “Sistem adalah suatu himpunan suatu benda nyata atau abstrak (a set of thing) yang terdiri dari bagian bagian atau komponenkomponen yang saling berkaitan, berhubungan, berketergantungan, saling mendukung, yang secara keseluruhan bersatu dalam satu kesatuan (Unity) untuk mencapai tujuan tertentu secara efisien dan efektif”. Menurut Pratama sebagaimana dikutip Muslihudin dan Oktafianto (2016:7): ”Sistem didefinisikan sebagai sekumpulan prosedur yang saling berkaitan dan saling terhubung untuk melakukan suatu tugas bersamasama ”. Dari penjelasan di atas dapat disimpulkan bahwa sistem adalah sejumlah komponen yang berinteraksi untuk mencapai suatu tujuan dan meliki suatu jaringan kerja dari suatu prosedur yang saling berhubungan. 4. Sistem Informasi Menurut Hutahaean (2016:15): “Sistem informasi adalah suatu sistem didalam suatu organisasi yang mempertemukan kebutuhan pengelolaan transaksi harian, mendukung operasi, bersifat manajerial, dan kegiatan strategi
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 11 www.foxitsoftware.com/shopping
dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang dibutuhkan”. Menurut Irwansyah dan Moniaga (2014:287): “Sistem informasi adalah sekumpulan hardware, software, data, manusia dan prosedur bekerja sama untuk menghasilkan informasi”. Berdasarkan teori di atas dapat disimpulkan bahwa sistem informasi merupakan sebuah sistem pada organisasi yang berfungsi untuk menghasilkan informasi yang mendukung kegiatan manajerial. 5. Analisis Sistem Menurut Muslihudin dan Oktafianto (2016:21): “Analisis sistem sesungguhnya adalah teknik pemecahan masalah yang menguraikan bagian-bagian komponen dengan mempelajari seberapa bagus bagianbagian komponen itu bekerja dan berinteraksi untuk mencapai tujuan mereka”. Sedangkan menurut Laudon dan Laudon (2012:496): “Analisis sistem adalah analisis permasalahan yang coba dipecahkan organisasi dangan menggunakan sistem informasi”. Berdasarkan penjelasan di atas dapat disimpulkan bahwa analisis sistem
merupakan
penguraian
permasalahan
dengan
maksud
mengidentifikasi dan menevaluasi permasalahan yang akan dipecahkan oleh organisasi. 6. Perancangan Sistem
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 12 www.foxitsoftware.com/shopping
Menurut
Yakub
(2012:145):
“Perancangan
sistem
adalah
penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa elemen terpisah ke dalam satu kesatuan yang utuh dan berfungsi”. Sedangkan menurut
Muharto dan Ambarita (2016:103):
“Perancangan sistem merupakan tahap selanjutnya setelah analisa sistem, mendapatkan gambaran dengan jelas tentang apa yang dikerjakan pada analisa sistem, maka dilanjutkan dengan memikirkan bagaimana membentuk sistem tersebut”. Dari uraian di atas dapat disimpulkan bahwa perancangan sistem adalah peguraian gambaran sistem secara rinci untuk mendapatkan gambaran dengan jelas tentang apa yang dikerjakan pada analisa sistem. 7. Perancangan Basis Data Menurut Hutahaean (2016:55): “Perancangan basis data merupakan kegiatan sistem program komputer untuk berbagi aplikasi komputer. Dalam basis data dibutuhkan suatu media simpan komputer yang terorganisir sedemikian rupa dan juga pemeliharan data baik dalam fungsi manajemen sistem. Pandangan bahwa basis data adalah suatu pengetahuan tentang organisasi data, sehingga database merupakan salah satu komponen yang penting dalam sistem informasi. Penerapan database dalam sistem informasi disebut dengan sisten basis data (database system)”. Menurut Tilmann (2017:136) : “The physical design’s purpose is to explain how the users and applications want to use the data”. (Perancangan fisik basis data ditujukan untuk menjelaskan bagaimana pengguna dan aplikasi dalam menggunakan sebuah data).
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 13 www.foxitsoftware.com/shopping
Dari teori di atas dapat disimpulkan bahwa basis data adalah perangkat lunak sistem yang menyediakan layanan peyimpanan untuk bebrbagi aplikasi komputer . 8. Perancangan Input Menurut Dennis, Wixom, dan Tegarden (2012:341): “The purpose of input design is to capture accurate information for an easy and simple system”. (Tujuan dari perancangan input adalah untuk menangkap informasi yang akurat untuk sistem yang mudah dan sederhana). Sedangkan menurut Muslihudin dan Oktafianto (2016:387): “Perancangan input artinya merancang tampilan yang digunakan untuk memasukkan informasi dan juga form yang sesuai dengan informasi yang pengguna tulis atau ketik”. Dari penjelasan di atas dapat disimpulkan bahwa perancangan input adalah untuk menangkap informasi yang akurat dan berfungsi untuk merancang tampilan yang digunakan sebagai masukan informasi yang pengguna tulis dan ketik. 9. Perancangan Output Menurut Yakub (2012:148): “Rancangan output merupakan satu hal yang cukup penting, karena digunakan untuk menjawab kebutuhan pemakai untuk bentuk-bentuk informasi yang diinginkan”. Sedangkan menurut Dennis, Wixom, dan Tegarden (2012:341):“The purpose of the design output is to present accurate information and in accordance with
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 14 www.foxitsoftware.com/shopping
existing information”. (Tujuan dari perancangan output yaitu untuk menyajikan informasi yang akurat dan sesuai dengan informasi yang ada). Dari teori di atas dapat disimpulkan bahwa perancangan output merupakan hal yang cukup penting karena digunakan untuk menjawap kebutuhan pemakai serta meyajikan informasi yang akurat dan sesuai dengan informasi yang ada. 10. Perancangan User Interface Menurut Wicaksono (2017:38): “Tujuan dari Perancangan user interface adalah merancang interface yang efektif untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai dengan kebutuhan”. Sedangkan
menurut Widodo dan Herlawati (2011:9):
“Perancangan dari user interface sangat penting untuk menentukan keberhasilan dari sebuah software. Seorang developer yang membuat program harus memikirkan bagian user interface sedemikian rupa hingga program yang dibuatnya dapat berfungsi dengan baik”. Berdasarkan uraian teori di atas dapat disimpulkan bahwa perancangan user interface atau antarmuka pengguna adalah tahapan yang paling penting dalam perancangan perangkat lunak, karena selain menentukan bentuk dan tampilan antarmuka pengguna, perancangan user interface
juga menentukan
keberhsilan perancangan atau pembuatan
suatu perangkat lunak yang terletak pada rancangan user interface perangkat lunak itu sendiri.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 15 www.foxitsoftware.com/shopping
B. Teori -teori Khusus 1. Sistem Informasi Geografis Menurut Barus dan Wiradisastra sebagaimana dikutip Nirwansyah (2017:2): “Sistem Informasi Geografis adalah suatu sistem basis data dengan kemampuan khusus untuk menangani data yang bereferensi keruangan (spasial) bersamaan dengan seperangkat operasi kerja”. Menurut Dangermon sebagaimana dikutip Irwansyah (2013:2): “Sistem Informasi Geografis adalah hasil kerja perangkat komputer, perangkat lunak, data geografis dan proses desain dengan tujuan untuk mempermudah pekerjaan-pekerjaan menyimpan, menganalisis, mengubah, dan menampilkan seluruh bentuk informasi tentang geografi.” Berdasarkan uraian di atas dapat disimpulkan bahwa sistem informasi geografi adalah suatu basis data yang menangani referensi data ke ruang spasial dan mempermudah pekerjaan meyimpan, menganalisis. Mengubah serta menampilkan seluruh bentuk informasi tentang geografi. 2. Google Maps Menurut Julzarika dan Andi (2013:44): “Google Maps adalah layanan gratis Google yang cukup popular. Kita dapat menambahkan fitur Google Maps dalam web kita sendiri dengan Google Maps API. Google Maps API merupakan library JavaScript. Untuk melakukan pemrograman Google Maps API dapat dibilang mudah. Yang kita butuhkan adalah pengetahuan tentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API, kita dapat menghemat waktu dan biaya untuk membangun aplikasi peta digital yang handal, sehingga kita dapat fokus hanya pada data-data yang diperlukan. Data peta-peta dunia menjadi urusan Google”.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 16 www.foxitsoftware.com/shopping
Menurut Irwansyah (2013:2): “Google Maps adalah versi web sehingga fiturnya tidak selengkap google earth. Hal ini disebabkan oleh infrastruktur web yang belum selengkap infrastruktur aplikasi-aplikasi desktop”. Dari teori di atas dapat diambil kesimpulan bawah google maps adalah sebuah web yang menyediakan layanan dan fitur geografis lokasi secara gratis yang bias dikases semua orang. 3. Application Programming Interface (API) Menurut
Wahana
Komputer
(2015:12):
“Application
Programming Interface (API) adalah sekumpulan perintah, fungsi, komponen, dan protokol yang disediakan oleh sistem operasi atau bahasa pemrograman
tertentu
yang
dapat
digunakan
programmer
saat
membangun perangkat lunak”. Sedangkan menurut Julzarika dan Andi (2016:23): “Application Programming Interface (API) adalah sebuah teknologi untuk memfasilitasi pertukaran informasi atau data antara dua atau lebih aplikasi perangkat lunak ”. Berdasarkan penjelasan di atas dapat diambil kesimpulan bahwa API adalah sekumpulan perintah, fungsi, komponen, dan protokol yang disediakan oleh sistem operasi serta sebuah teknologi yang berfungsi untuk memfasilitasi informasi atau data antara perangkat lunak 4. Normalisasi
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 17 www.foxitsoftware.com/shopping
Menurut Mulyani (2016:132): “Normalisasi adalah proses yang berkaitan dengan model data relasional untuk mengorganisasi himpunan data dengan ketergantungan dan keterkaitan yang tinggi.”. sedangkan menurut Yakub (2012:70): “Normalisasi (normalize) merupakan salah satu cara pendekatan atau teknik yang digunakan dalam membangun desain lojik basis data relation dengan menerapkan sejumlah aturan dan kriteria standar”. Bentuk-bentuk normalisasi menurut Mulyani (2016:133) : a. Bentuk normal pertama adalah ekuivalen dengan definisi model relasional. Relasi adalah bentuk normal pertama (1NF) jika semua nilai atributnya adalah sederhana (bukan komposit). Syaratnya adalah : 1). Tidak ada set atribut yang berulang atau bernilai ganda. 2). Telah ditentukan primary key untuk tabel atau relasi. 3). Tiap atribut hanya memiliki satu pengertian. b. Bentuk Normalisasi Kedua dikenal dengan 2NF Tabel dikatakan normalisasi kedua jika telah memenuhi syarat normalisasi pertama dan semua atribut kunci pada satu tabel. Dengan kata lain normalisasi kedua bertujuan untuk menghilangkan ketergantungan farsial. c. Bentuk Normalisasi Ketiga dikenal dengan 3NF Tabel dikatakan normalisasi kedua dan dalam satu tabel terhadap atribut tidak ada ketergantungan transitif artinya setia atribut dapat menjadi atribut biasa pada suatu relasi tetapi menjadi kunci pada relasi lain. Setiap atribut yang bukan kunci harus ketergantungan pada primary key. Dari teori di atas dapat disimpulkan bahwa normalisasi adalah proses pemindahan data dari tabel yang bermasalah ke tabel lain dengan pendekatan atau teknik desain logic basis data yang berkaitan dengan model data relasional.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 18 www.foxitsoftware.com/shopping
5. Kamus Data Menurut Sukamto dan Shalahuddin (2016:73): “Kamus data adalah kumpulan daftar elemen data yang mengalir pada sistem perangkat lunak sehingga masukan (input) dan keluaran (output) dapat dipahami secara umum memiliki standar cara penulisan”. Menurut Widodo dan Herlawati (2011:520): “Kamus data (data dictionary),
yang
menyimpan
metadata,
atau
informasi-informasi
mengenai basis data, termasuk nama-nama dan definisi-definisi untuk setiap tabel pada basis data”. Menurut Sugiarti (2013:125-147): notasi yang umumnya digunakan pada kamus data yaitu: TABEL 2.1 NOTASI STRUKTUR DATA NOTASI =
KETERANGAN Terdiri dari
+
Dan
()
Menunjukkan suatu elemen yang bersifat pilihan
{}
Menunjukan elemen-elemen repetitif, juga disebut kelompok berulang atau table-tabel
[]
Menunjukkan salah satu dari dua situasi tertentu
Sumber : Sugiarti (2013:125)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 19 www.foxitsoftware.com/shopping
TABEL 2.2 NOTASI TIPE DATA NOTASI
KETERANGAN
X
Bisa memasukkan atau menampilkan / mencetak suatu karakter.
9
Hanya memasukkan atau menampilkan angkaangka.
Z
Menampilkan nol-nol yang memimpin sebagai spasi. Menyisipkan koma kedalam suatu tampilan numerik. Menyisipkan suatu periode kedalam suatu tampilan numerik.
‘ . /
Menyisipkan (/) kedalam suatu tampilan numerik.
-
Menyisipkan suatu tanda penghubung ke dalam suatu tampilan numerik.
V
Menunjukkan suatu posisi desimal (bila titik desimal tidak dimasukkan).
Sumber : Sugiarti (2013:147)
Dari teori di atas dapat disimpulkan bahwa kamus data adalah suatu elemen data yang membentuk sebuah infromasi berupa sebuah data serta dokumen yang memiliki nilai dan makna sehingga mudah dipahamai penerima informasi. 6. Unifed Modeling Language (UML) a. Pengertian UML Menurut Chonoles sebagaimana dikutip Widodo dan Herlawati (2011:1):
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 20 www.foxitsoftware.com/shopping
“UML singkatan dari Unified Modeling Language yang berarti bahasa pemodelan standar. Sebagai bahasa, berarti UML memiliki sintaks dan semantik. Ketika kita membuat model menggunakan konsep UML ada aturan-aturan yang harus diikuti. Bagaimana elemen pada model-model yang kita buat berhubungan satu dengan lainnya harus mengikuti standar yang ada”. Menurut Sugiarti (2013:34): “Unified Modelling Language (UML) adalah sebuah “bahasa” yang telah menjadi standar dalam industri untuk visualisasi, merancang dan mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar untuk merancang model sebuah sistem”. Berdasarkan teori di atas dapat diambil kesimpulan bahwa Unifed Modeling Language (UML) adalah sebuah bahasa permodelan yang
memilki
standar-standar
dalam
merancang
dan
mendokumentasikan sistem dan memiliki sintaks serta semantik untuk membantu kita dalam menggunakan konsep UML. b. Diagram-diagram dalam UML Menurut Sukamto dan Shalahuddin (2014:146-167): UML memiliki beberapa diagram, yaitu: 1) Diagram Kelas (Class Diagram). Bersifat statis. Diagram ini memperlihatkan himpunan kelas-kelas, AntarmukaAntarmuka, kolaborasi-kolaborasi, serta relasi-relasi. Diagram ini umumnya dijumpai pada pemodelan sistem berorientasi objek. Meskipun bersifat statis, sering pula diagram kelas memuat kelas-kelas aktif. Class diagram merupakan gambaran pengembangan yang melanjutkan gambaran rancangan perangkat lunak dari use case, activity dan sequance, dan dikembangkan kepada tahap selanjutnya yang disebut dengan package diagram.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 21 www.foxitsoftware.com/shopping
TABEL 2.3 SIMBOL-SIMBOL CLASS DIAGRAM
Sumber : Sukamto dan Shalahuddin (2014:146-147)
2) Diagram paket (Package Diagram). Bersifat statis. Diagram ini memperlihatkan kumpulan kelas-kelas, merupakan bagian dari diagram komponen. Package diagram utamanya digunakan untuk mengelompokkan elemen diagram UML yang berlainan secara bersamasama ke dalam tingkat pembangunan yang lebih tinggi yaitu berupa sebuah paket. Diagram package pada dasarnya adalah diagram kelas yang hanya menampilkan paket, disamping kelas, dan hubungan ketergantungan, disamping hubungan khas yang ditampilkan pada diagram kelas. Diagram package juga sangat diperlukan dalam pengembangan perangkat lunak karena diagram package mengambarkan paket-paket class yang terdapat
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 22 www.foxitsoftware.com/shopping
didalam sistem, diagram package ini juga merupakan kelanjutan dari diagram use case, activity dan sequence. TABEL 2.4 SIMBOL-SIMBOL PACKAGE DIAGRAM Simbol package bungkusan komponen.
Package
Deskripsi merupakan sebuah dari satu atau lebih
pa ck a ge
Komponen
Komponen sistem.
nama_komponen
Kebergantungan depedency
Antarmuka / interface
nama_interface
Link
/ Kebergantungan antar komponen, arah panah mengarah pada komponen yang dipakai.
Sama dengan konsep interface pada pemrograman berorientasi objek, yaitu sebagai antarmuka komponen agar tidak mengakses langsung komponen. Relasi antar komponen.
Sumber : Sukamto dan Shalahuddin (2014:149-150)
3) Diagram Use-Case. Bersifat statis. Diagram ini memperlihatkan himpunan Use-Case dan aktor-aktor (suatu jenis khusus dari kelas). Diagram ini terutama
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 23 www.foxitsoftware.com/shopping
sangat penting untuk mengorganisasi dan memodelkan perilaku suatu sistem yang dibutuhkan serta diharapkan pengguna. TABEL 2.5 SIMBOL-SIMBOL USE CASE DIAGRAM Simbol Use case nama use case
Aktor / actor
nama aktor
Deskripsi Fungsionalitas yang disediakan sistem sebagai unit-unit yang saling bertukar pesan antar unit atau aktor; biasanya dinyatakan dengan menggunakan kata kerja di awal di awal frase nama use case. Orang, proses, atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang; biasanya dinyatakan menggunakan kata benda di awal frase nama aktor.
Asosiasi / association
Komunikasi antara aktor dan use case yang berpartisipasi pada use case atau use case memiliki interaksi dengan aktor.
Ekstensi / extend
Relasi use case tambahan ke sebuah use case dimana use case yang ditambahkan dapat berdiri sendiri walau tanpa use case tambahan itu; mirip dengan prinsip inheritance pada pemrograman berorientas objek; biasanya use case tambahan memiliki nama depan yang sama dengan use case yang ditambahkan. Hubungannya generalisasi dan spesialisasi (umum – khusus) antara dua buah use case dimana fungsi yang satu adalah fungsi yang lebih umum dari lainnya. Relasi use case tambahan ke sebuah use case di mana use case yang ditambahkan memerlukan use case ini untuk menjalankan fungsinya atau sebagai syarat dijalankan use case ini.
<
>
Generalisasi / generalization
Menggunakan / include / uses <>
<>
Sumber : Sukamto dan Shalahuddin (2014:156-158)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 24 www.foxitsoftware.com/shopping
4) Diagram interaksi dan sequence (urutan). Bersifat dinamis. Diagram urutan adalah diagram interaksi yang menekankan pada pengiriman pesan dalam suatu waktu. TABEL 2.6 SIMBOL-SIMBOL SEQUENCE DIAGRAM Simbol Aktor
nama aktor
Deskripsi Orang, proses, atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang; biasanya dinyatakan menggunakan kata benda di awal frase nama aktor.
Atau na m a a k t or
Tanpa waktu aktif Garis hidup / lifeline
Menyatakan kehidupan suatu objek.
Objek
Menyatakan objek yang berinteraksi pesan.
na m a obje k : na m a _ k e la s
Pesan tipe create <
Menyatakan suatu objek membuat objek yang lain, arah panah mengarah pada objek yang dibuat.
Pesan tipe call
Menyatakan suatu objek memanggil operasi/metode yang ada pada objek lain atau dirinya sendiri.
Pesan tipe send
Menyatakan bahwa suatu objek mengirimkan data/masukan/informasi ke objek lainnya, arah panas mengarah pada objek yang dikirimi. Menyatakan bahwa suatu objek yang telah menjalankan suatu operasi atau metode menghasilkan suatu kembanlian ke objek tertentu, arah panah mengarah pada objek yang menerima kembalian. Menyatakan suatu objek mengakhiri hidup objek yang lain, arah panah mengarah pada objek yang diakhiri, sebaiknya jika ada create maka ada destroy.
1 : m a suk a n
Pesan tipe return 1 : k e lu a r a n
Pesan tipe destroy
Sumber : Sukamto dan Shalahuddin (2014:165-167)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 25 www.foxitsoftware.com/shopping
5) Diagram aktivitas (Activity Diagram). Bersifat dinamis. Diagram aktivitas adalah tipe khusus dari suatu aktivitas ke aktivitas lainnya dalam suatu sistem. Diagram ini terutama penting dalam pemodelan fungsi-fungsi suatu sistem dan memberi tekanan pada aliran kendali antar objek. TABEL 2.7 SIMBOL-SIMBOL ACTIVITY DIAGRAM Simbol
Deskripsi
Status awal
Status awal aktivitas sistem, sebuah diagram aktivitas memiliki sebuah status awal.
Aktivitas
Aktivitas yang dilakukan sistem, aktivitas biasanya diawali dengan kata kerja.
a k t iv it a s
Percabangan / decision
Asosiasi pecabangan dimana jika ada pilihan aktivitas lebih dari satu.
Penggabungan / join
Asosiasi penggabungan dimana lebih dari satu aktivitas digabungkan menjadi satu.
Status akhir
Status akhir yang dilakukan sistem, sebuah diagram aktivitas memiliki sebuah status akhir.
Swimlane
Memisahkan organisasi bisnis yang bertanggung jawab terhadap aktivitas yang terjadi.
atau
Sumber : Sukamto dan Shalahuddin (2014:162-163)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 26 www.foxitsoftware.com/shopping
6) Diagram komponen (Component Diagram). Bersifat statis. Diagram komponen ini memperlihatkan organisasi serta kebergantungan sistem atau perangkat pada komponen-komponen yang telah ada sebelumnya. Diagram ini berhubungan dengan diagram kelas dimana komponen secara tipikal dipetakan ke dalam suatu atau lebih kelas-kelas, Antarmuka-Antarmuka serta kolaborasi-kolaborasi. TABEL 2.8 SIMBOL-SIMBOL COMPONENT DIAGRAM Simbol Package
Deskripsi package merupakan sebuah bungkusan dari satu atau lebih komponen.
pa ck a ge
Komponen
Komponen sistem.
nama_komponen
Kebergantungan depedency
Antarmuka / interface
nama_interface
Link
/ Kebergantungan antar komponen, arah panah mengarah pada komponen yang dipakai. Sama dengan konsep interface pada pemrograman berorientasi objek, yaitu sebagai antarmuka komponen agar tidak mengakses langsung komponen. Relasi antar komponen.
Sumber : Sukamto dan Shalahuddin (2014:149-150)
7) Diagram Deployment (Deployment Diagram). Bersifat statis. Diagram ini memperlihatkan konfigurasi saat
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 27 www.foxitsoftware.com/shopping
aplikasi dijalankan (run-time). Memuat simpul-simpul beserta komponen-komponen yang ada didalamnya. Diagram Deployment berhubungan erat dengan diagram Komponen dimana diagram ini memuat satu atau lebih komponen-komponen. Diagram ini sangat berguna saat aplikasi kita berlaku sebagai aplikasi yang dijalankan pada banyak mesin (distributed computing). TABEL 2.9 SIMBOL-SIMBOL DEPLOYMENT DIAGRAM Simbol Package
Deskripsi Package merupakan sebuah bungkusan dari satu atau lebih node.
pa ck a ge
Node
nama_node
Biasanya mengacu pada perangkat keras (hardware), perangkat lunak yang tidak dibuat sendiri (software), ika didalam node disertakan komponen untuk mengkonsistenkan rancangan maka komponen yang diikutsertakan harus sesuai dengan komponen yang telah didefinisikan sebelumnya pada diagram komponen.
Kebergantungan / dependency
Kebergantungan antar node, arah mengarah pada node yang dipakai.
Link
Relasi antar node.
Sumber : Sukamto dan Shalahuddin (2014:154-155)
panah
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 28 www.foxitsoftware.com/shopping
7. HTML Menurut TIM EMS (2016:2): “HTML merupakan singkatan dari Hyper Text Markup Language. Bahasa pemrograman ini terdiri dari tag dan aturan-aturan yang memungkinkan kita membuat dokumen hypertext. Halaman web adalah dokumen hypertext”. Menurut Rerung (2018:18): “HTML disebut sebagai hypertext karena didalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari halaman satu ke halaman lainnya hanya dengan mengklik text tersebut”. Dari penjelasan di atas dapat disimpulkan bahwa HTML adalah sebuah bahasa pemrograman yang menjadi wadah sebuah halaman web dan berfungsi untuk menampilkan web pada halaman aplikasi browser. 8. Cascading Style Sheets Menurut Rerung (2018:133): “CSS adalah singkatan dari Cascading Style Sheets. CSS biasanya selalu dikaitkan dengan HTML, karena keduanya saling melengkapi karena HTML ditujukan membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya HTML for content, CSS for Presentation” . Menurut Kadir dan Triwahyuni (2013:323): CSS adalah kode yang dimaksudkan untuk mengatur tampilan halaman web. Sebagai contoh, CSS dapat dipakai untuk : a. Mengatur jenis font maupun ukuran. b. Menentukan warna latar belakang halaman web. c. Memberi bingkai pada elemen HTML. d. Mengatur ukuran gambar.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 29 www.foxitsoftware.com/shopping
Dari teori di atas dapat disimpulkan bahwa CSS adalah sebuah style yang mengatur tata letak elemen-elemen pada sebuah halaman web sehingga tertata dengan rapi. 9. PHP Menurut Solichin (2016:37): “PHP (Personal Home Page) adalah pemrograman (interpreter) adalah proses penerjemahan baris sumber menjadi kode mesin yang dimengerti komputer secara langsung pada saat baris kode dijalankan”. Menurut Kustiyahningsih dan Anamisa (2011:114): “PHP atau resminya PHP: Hypertext Preprosesor adalah skrip yang bersifat server-side yang ditambahkan kedalam HTML. Skrip ini akan membuat suatu aplikasi dapat diintegrasikan ke dalam HTML sehingga suatu halaman web tidak lagi bersifat statis, namun menjadi bersifat dinamis”. Berdasarkan uraian di atas dapat disimpulkan bahwa PHP(PHP: Hypertext Preprocessor) adalah suatu bahasa pemrograman yang digunakan untuk menerjemahkan baris kode program menjadi kode mesin yang dapat dimengerti
oleh
komputer
yang bersifat
server-side
dan
dapat
ditambahkan ke dalam HTML. 10. Web Menurut Marisa (2017:3): “Web adalah singkatan dari World Wide Web, Web adalah salah satu jasa yang populer di internet. Web berisi miliaran dokumen yang disebut halaman web”. Sedangkan menurut Rerung (2018:4): “web Adalah fasilitas hypertext yang mampu
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 30 www.foxitsoftware.com/shopping
menampilkan data berupa teks , gambar, suara, animasi, dan multimedia lainnya, sebagaimana diantara data-data tersebut saling terkait dan berhubungan satu dengan yang lainnya”. Dari penjelasan di atas dapat disimpulkan bahwa web adalah salah satu jasa internet yang berisi miliaran dokumen yang disebut halaman web dan merupakan fasilitas hypertext yang mampu menampikan data berupa teks, gambar, animasi, dan multimedia. 11. Adobe DreamWeaver Menurut Jubilee Enterprise (2012:129): “Adobe DreamWeaver adalah sebuah software web design yang menawarkan cara mendesain website dengan dua langkah sekaligus dalam satu waktu, yaitu mendesain dan melakukan scripting”. Menurut Hikmah, Supriadi dan Alawiyah (2015:2): “Adobe Dreamweaver merupakan salah satu tools yang banyak digunakan oleh pengembang web dikarenakan halamannya berbasis GUI (Grafical User Interface) sehingga memudahkan pengembang untuk mengembangkan website tidak terpaku konsep tekstual”. Berdasarkan teori di atas dapat disimpulkan bahwa Adobe DreamWeaver adalah sebuah tools yang memudahkan pengguna dalam melakukan pengembangan web secara GUI dengan dua langkah sekaligus. 12. Xampp Menurut Supono (2016:14):
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 31 www.foxitsoftware.com/shopping
“Xampp Merupakan sebuah perangkat lunak gratis sehingga bebas digunakan. Xampp berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari Apache, HTTP Server, MySQl database, dan penerjemah bahasa yang ditulis dengan PHP dan Perl. Xampp dikembangkan oleh perusahaan Apache Friends yang biasanya digunakan untuk simulasi pengembanggan”. Menurut Riyanto (2011:7): “XAMPP merupakan paket PHP dan MySQL berbasis open source, yang dapat digunakan sebagai tool pembantu pengembangan aplikasi berbasis PHP. XAMPP mengombinasikan beberapa paket perangkat lunak berbeda ke dalam satu paket”. Berdasarkan teori di atas dapat disimpulkan bahwa Xampp adalah sebuah perangkat lunak Server yang berdiri sendiri dan memiliki tool pembantu pengembangan aplikasi berbasis open source. 13. MySQL Menurut Dianing P (2012:96): “MySQL adalah sistem manajemen database SQL yang bersifat Open Source dan paling populer saat ini. Sistem Database MySQL mendukung beberapa fitur seperti multithreaded, multi-user, dan SQL database manajemen sistem (DBMS). Database ini dibuat untuk keperluan sistem database yang cepat, andal dan mudah digunakan”. Menurut Anhar sebagaimana dikutip Kustiyahningsih
dan
Anamisa (2011:2): “MySQL (My Structure Query Language) adalah salah satu Database Management System (BDMS) dari sekian banyak DBMS, seperti Oracle, MS SQL, Postagre SQL, dan lainnya”.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 32 www.foxitsoftware.com/shopping
Menurut Widodo dan Herlawati (2011:66-71): Secara garis besar ada beberapa jenis tipe data pada MySQL yaitu: a. Tipe data numerik Tipe data numerik digunakan untuk menyimpan nilai angka yang dapat diproses (dihitung). Untuk table data numeric dapat dilihat pada tabel 2.2. b. Tipe data karakter Pada dasarnya ada dua macam tipe data karakter, yaitu string dengan nilai tunggal yang disimpan dalam 1 byte memori dan karakter yang didefinisikan menggunakan Unicode yang memerlukan lebih dari 1 byte memori. Untuk tabel tipe data karakter dapat dilihat pada tabel 2.3. c. Tipe data temporal Tipe data ini berhubungan dengan tanggal dan waktu. Untuk tabel tipe data temporal dapat dilihat pada tabel 2.4. TABEL 2.11 TIPE DATA NUMERIK Tipe Data Bigint
Keterangan Tipe data integer ini dapat disimpan dalam 8 byte memori. Jangkauannya adalah dari -263 s.d 263-1 Integer Tipe data numerik ini disimpan dalam satuan 4 byte memori dan memiliki jangkauan dari -2,147,483,648 hingga 2,147,483,648 Smallint Integer ini disimpan dalam satuan 2 byte memori dan memiliki jangkauan dari -32768 hingga 32767 Tinyint Tipe data integer yang satu ini tidak memiliki nilai negative (unsigned), tipe data ini disimpan dalam 1 byte memori. Jangkauan tipe data ini dari 0 hingga 255 Numeric(p,[s]) Sama dengan decimal. Real Tipe data ini menyimpan nilai pecahan, jangkauan nilainya dari nilai positif yaitu 2.23E-308 hingga 1.79E+308. Sedangkan jangkauan negatifnya dari 1.18E-38 hingga -1.18E+38. Smallmoney Sama dengan tipe data money tetapi disimpan pada 4 byte memori. Sumber : Widodo dan Herlawati (2011
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 33 www.foxitsoftware.com/shopping
TABEL 2.12 TIPE DATA KARAKTER
Tipe Data Chart [(n)]
Varchar [(n)]
Nchar [(n)]
Keterangan N adalah jumlah karakter dalam string yang akan ditampung. Tipe data ini menyimpan nilai string dengan panjang yang tetap. Nilai dari n dapat mencapai 8000. Bila nilai n tidak disebutkan, maka nilai dianggap 1. Tiap karakter dalam string menempati 1 byte. Character dan char adalah tipe data yang sama Variabel karakter. Tipe data ini hampir sama dengan tipe data di atas, perbedaannya adalah tipe data jenis ini panjangnya tidak tetap. Walaupun Anda menyebutkan panjangnya (n), data yang disimpan mungkin saja tidak sama panjang. Nilai n yang ada merupakan nilai panjang maksimal yang dapat ditampung oleh tipe data ini. Tipe data ini menyimpan data string yang memiliki panjang tetap tetapi setiap karakternya disusun menggunakan karakter unicode. Perbedaan dengan tipe data char adalah tiap data pada tipe data ini disimpan dalam 2 byte. Panjang maksimal yang dapat diberikan adalah 4000 karakter.
Sumber : Widodo dan Herlawati (2011:68-69)
TABEL 2.13 TIPE DATA TEMPORAL Tipe Data
Keterangan
Smalldatetime Sama halnya dengan tipe datetime, tetapi tipe data ini menyimpan datanya pada 2 byte media penyimpanan. Data tanggalnya memiliki jangkauan dari 01-01-1900 hingga 06-062079. Sedangkan data waktunya disimpan pada 2 byte kedua dalam satuan menit dan dihitung mulai tengah malam. Time Tipe data ini digunakan hanya untuk menyimpan waktu. Data tipe ini memerlukan ruang penyimpanan sebesar 3 hingga 5 byte bergantung pada berapa tingkat ketepatan waktu yang diinginkan. Tipe data ini dapat menghintung waktu hingga ketepatan 100 nanosecond. Sumber : Widodo dan Herlawati (2011:70-71)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 34 www.foxitsoftware.com/shopping
TABEL 2.14 TIPE DATA TEMPORAL Tipe Data
Keterangan
Smalldatetime
Sama halnya dengan tipe datetime, tetapi tipe data ini menyimpan datanya pada 2 byte media penyimpanan. Data tanggalnya memiliki jangkauan dari 01-01-1900 hingga 06-062079. Sedangkan data waktunya disimpan pada 2 byte kedua dalam satuan menit dan dihitung mulai tengah malam. Time Tipe data ini digunakan hanya untuk menyimpan waktu. Data tipe ini memerlukan ruang penyimpanan sebesar 3 hingga 5 byte bergantung pada berapa tingkat ketepatan waktu yang diinginkan. Tipe data ini dapat menghintung waktu hingga ketepatan 100 nanosecond. Datetime2 Tipe data ini adalah tipe data yang termasuk baru yang menampung data tanggal sekaligus waktu yang memiliki ketepatan tinggi. Panjang tipe data ini didefinisikan secara variable. Jadi bila Anda mendefinisikan panjangnya, berarti tipe data ini mampu menyimpan data dengan panjang maksimal sesuai yang didefinisikan. Tipe data ini membutuhkan ruang penyimpanan sebesar 6 hingga 8 byte. Tipe data ini memiliki ketepatan hingga 100 nanosecond, tetapi tipe data ini tidak mengenal “daylight saving time”, yakni kebijakan tentang waktu. Datetimeoffset Pada dasarnya semua tipe data yang ada di kelompok tipe data temporal tidak memiliki kemampuan untuk menyesuaikan dengan time zone kecuali tipe data ini. Tipe data ini termasuk tipe data baru yang diusahakan oleh Microsoft untuk memenuhi kebutuhan tipe data tanggal dan waktu yang memiliki kemampuan menyimpan data tanggal dan waktu beserta time zonenya. Ruang penyimpanan yang diperlukan sebesar 6 hingga 8 byte. Tipe data ini memiliki hubungan dengan tipe datetime2. Date Tipe data yang satu ini digunakan untuk menyimpan data tanggal saja, dengan ruang penyimpanan sebesar 3 byte. Jangkauan yang dapat dikenali adalah tanggal 01-01-0001 hingga 31-12-9999. Null Null adalah sebuah nilai yang paling spesial yang dapat dimasukkan dalam sebuah field. Nilai ini biasanya digunakan jika informasi dalam field tersebut tidak dikenal atau n/a (not applicable). Sumber : Widodo dan Herlawati (2011:70-71)
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 35 www.foxitsoftware.com/shopping
Dari penjelasan di atas dapat disimpulkan bahwa MySQL adalah perangkat lunak manajemen databse yang bersifat Open Source dan merupakan salah satu Database Manajement System (DBMS). 14. Web Server Menurut TIM EMS (2016:4): “Web Server memiliki pengertian dari dua sisi yaitu sisi hardware dan software . dari sisi hardware, web server merupakan tempat untuk menyimpan file-file website sperti file HTML, images, CSS, JavaScrpit, PHP, dll. Adapun dari sisi software, web server merupakan komponen-komponen yang mengatur bagaimana user dapat mengakses file yang disimpan pada server (hosted-file)”. Menurut Solichin (2016:1): “Web Server merupakan sebuah perangkat lunak dalam server yang berfungsi menerima permintaan (request) berupa halaman web melalui HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali (respone) hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML”. Dari uraian di atas maka dapat ditarik kesimpulkan bahwa Web Server adalah adalah sebuah perangkat keras yang berfungsi untuk menyimpan file-file website serta menerima permintaan (request) berupa halaman web melalui HTTP atau HTTPS dari klien. 15. Bootstrap Menurut Jubilee Enterprise (2016:1): “Bootstrap adalah framework front-end yang intuitif dan powerfull untuk pengembangan aplikasi web yang lebih cepat dan mudah. Bootstrap menggunakan HTML, CSS, dan Javascript. Dengan menggunkan bootstrap, kita dapat membuat layout situs yang responsif dangan mudah”. Menurut Rozi (2015:1):
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 36 www.foxitsoftware.com/shopping
“Bootstrap adalah paket aplikasi siap pakai untuk membuat front-end sebuah website. Bisa dikatakan, Bootstrap adalah template desain web dengan fitur plus. Paket Bootstrap berisi sekumpulan file CSS, font, dan JavaScript yang siap di integrasikan ke sebuah dokumen HTML menggunakan kaidah-kaidah tertentu”. Berdasarkan penjelasan di atas dapat disimpulkan bahwa Bootstrap adalah sebuah kerangka kerja (Framework) yang memiliki fungsi sebagai tools untuk mengembangkan aplikasi web dengan mudah dan sudah menyediakan berbagai macam tamplate web dengan fitur powerfull. 16. Laravel Menurut Abdulloh (2017:1): “Laravel Merupakan salah satu dari sekian banyak framework PHP yang dapat digunakan secara gratis. Laravel dikembangkan oleh programmer keren asal Amerika yaitu Taylor Otwell pada tahun 2011.” Sedangkan menurut Jubilee Eenterprise (2015:1): “Laravel adalah sebuah framework PHP yang dirilis di bawah lisensi MIT, di bangun dengan konsep MVC (Model View Controller).” Dari uraian di atas dapat diambil kesimpulan bahwa Laravel adalah sebuah kerangka kerja berbasis PHP yang bersifat open source dan dirilis di bawah lisensi MIT serta di bangun menggunakan konsep MVC (Model View Controller). 17. Blackbox Testing Menurut Maturidi (2014:68): “Blackbox Testing adalah sebuah test case yang bertujuan untuk menunjukkan fungsi perangkat lunak tentang cara beroperasinya, apakah pemasukan data keluaran telah
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 37 www.foxitsoftware.com/shopping
berjalan sebagaimana yang diharapkan.” Sedangkan menurut Wicaksono (2017:353): “Blackbox Testing adalah tipe testing yang memperlakukan perangkat lunak yang tidak diketahui kinerja internalnya” Berdasarkan uraian diatas dapat disimpulkan bahwa Blackbox testing adalah sebuah test case yang bertujuan untuk mengetahui fungsi perangkat lunak dan memperlakukan perangkat lunak yang tidak diketahui kinerja internalnya.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
BAB III ANALISIS SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK
A.
Analisis Kebutuhan Sistem Analisis kebutuhan sistem adalah tahap awal untuk menentukan rancangan website sistem yang dihasilkan. Website yang memenuhi kriteria User Interface (UI) dan User Experience (UX) akan sangat bergantung pada keberhasilan dalam melakukan analisis kebutuhan sistem. Analisis kebutuhan sistem adalah sebuah tahap untuk mendapatkan informasi, model,
dan
spesifikasi tentang web sistem yang diharapkan para pengguna (user). Jika terjadi kesalahan dalam analisis kebutuhan sistem, maka akan membuat website yang dirancang menjadi tidak berguna bagi pengguna. Berdasarkan analisis sistem secara umum, untuk perancangan sistem informasi geografis yang menampilkan data lokasi bengkel motor resmi di Kota Pontianak perlu adanya suatu fasilitas pencarian lokasi untuk mencari lokasi geografis dan menampilkan data bengkel, fasilitas masukan untuk memasukkan data ke dalam sistem, fasilitas penilaian untuk memberi penilaian pada bengkel yang terdaftar di sistem dan penyimpanan data (database) yang berfungsi untuk menyimpan data ke dalam sistem berserta
38
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 39 www.foxitsoftware.com/shopping
fasilitas keluaran yang berfungsi untuk menampilkan lokasi bengkel yang terdaftar pada web sistem.
B.
Prosedur Sistem Informasi Geografis Lokasi Bengkel Berbasis Web
Motor Resmi
Dalam memudahkan pengguna kendaraan bermotor yang ingin melakukan pencarian lokasi bengkel motor resmi yang ada di Kota Pontianak dan untuk melakukan perawatan dan perbaikan kendaraan bermotor secara berkala, berikut akan disajikan prosedur sistem informasi geografis lokasi bengkel Motor resmi berbasis web di Kota Pontianak yang berhubungan dengan kegiatan proses pencarian lokasi bengkel, proses pendaftaran bengkel, proses login, proses melengkapi data bengkel, proses menghubungi admin serta proses penilaian kepuasaan layanan bengkel pada sistem yang akan dirancang, Agar fungsionalitas sistem yang telah dirancang berjalan dengan benar dan sesuai maka akan dilakukan tahap pengujian yaitu pengujian blackbox. Adapun prosedur sistem yang akan dirancang pada Sistem Informasi Geografis lokasi bengkel Motor resmi berbasis web di Kota Pontianak adalah sebagai berikut: 1. Proses Pencarian Pengunjung web mengakses web sistem untuk melakukan pencarian lokasi bengkel motor resmi, Selain mencari lokasi, pengunjung web juga dapat mencari Id bengkel dan nama bengkel, setelah itu pengunjung web
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 40 www.foxitsoftware.com/shopping
memilih kategori Kecamatan dan jenis bengkel pada bagian filter pencarian, maka akan ditampilkan data lokasi, Id bengkel, dan nama bengkel sesuai dengan filterisasi yang telah ditentukan sebelumnya dan akan tampil pada peta lokasi. Jika pengunjung ingin mencari lokasi lebih objektif lagi, tahap tersebut dapat dilakukan dengan memasukkan nama bengkel yang ingin dicari. Selain melakukan filterisasi pencarian pengunjung web juga dapat melihat informasi bengkel lebih detail lagi, sehingga pengunjung web dapat memperoleh informasi yang lebih lengkap tentang bengkel yang ada di web sistem. 2. Proses penilaian kepuasan layanan bengkel motor resmi Proses penilaian hanya dapat dilakukan oleh pengunjung web atau pengguna, pada tahap penilaian ini penggunjung web dapat melakukan penilaian kapanpun dan dimanapun melalui web sistem. Langkah pertama yang harus dilakukan adalah pengunjung atau pengguna mengakses web sistem, selanjutnya untuk menyelesaikan proses penilaian pengunjung atau pengguna memberikan penilaian dengan mengisi nama, memberi bintang dan memasukkan komentar pada bengkel yang dinilai. 3. Proses menghubungi admin Proses menghubungi admin adalah proses yang hanya dikhususkan untuk operator bengkel. Operator bengkel dapat menghubungi admin web sistem secara langsung melalui web sistem. Langkah pertama yang harus dilakukan
operator
bengkel
mengakses
web
sistem,
selanjutnya
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 41 www.foxitsoftware.com/shopping
memasukkan nama, email, dan isi pesan untuk mengirim pesan melalui web, dan selanjutnya pesan yang dikirim akan tersimpan ke database sistem. 4. Proses Pendaftaran Operator Bengkel Motor Resmi Pada proses pendaftaran ini dikhususkan hanya untuk operator bengkel yaitu admin dari bengkel yang terdaftar pada web sistem. Untuk melakukan pendaftaran, operator bengkel harus menghubungi admin web terlebih dahulu karena proses pendaftaran dapat dilakukan hanya melalui admin web sistem. 5. Proses Login Proses login adalah tahap yang dikhususkan hanya untuk admin dan operator dari bengkel yang terdaftar pada web sistem. Pada operator bengkel untuk melakukkan proses login langkah pertama adalah operator bengkel mengakses web sistem, selanjutnya operator bengkel harus memasukan identitas pengguna dan kata sandi yang sama pada saat operator bengkel melakukan proses pendaftaran sebelumnya agar operator bengkel dapat masuk ke dalam sistem. Untuk admin web sistem, jika ingin melakukan proses login maka admin harus memasukkan nama pengguna dan kata sandi. 6. Proses melengkapi data bengkel motor resmi Untuk melengkapi data bengkel pada web sistem informasi geografis, pada tahap ini operator bengkel harus melakukan login terlebih dahulu
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 42 www.foxitsoftware.com/shopping
untuk mendapatkan hak akses ke dalam sistem, selanjutnya operator harus memasukkan beberapa data bengkel yang nantinya akan jadi informasi bagi pengguna atau pengunjung web yang akan ditampilkan pada web sistem. Data bengkel yang akan ditampilkan tersebut seperti nama bengkel, id bengkel, alamat bengkel, Kecamatan, nomor telepon, jenis layanan, dan status operasional. Selain itu operator dapat melakukan pengubahan data atau informasi bengkel melalui fitur update profil. Data yang telah diinput akan tersimpan ke database sistem, dan data yang ditampilkan diambil langsung dari database sistem.
C.
Perancangan Unified Modeling Language (UML) Untuk memberikan gambaran terhadap prosedur- prosedur yang terdapat pada web sistem maka akan digunakan diagram Unified Modelling Language (UML). Diagram UML akan memberikan gambaran-gambaran proses dan interaksi yang terjadi dalam web sistem informasi geografis. Diagram UML yang digunakan untuk mengambarkan secara umum sistem informasi geografis adalah diagram Use Case, diagram activity, dan diagram sequence. 1.
Use Case Diagram Use Case Diagram akan menggambarkan fungsionalitas dari sistem informasi
geografis.
Dengan
Use
Case
Diagram
yang
akan
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 43 www.foxitsoftware.com/shopping
menggambarkan sistem berserta fungsi-fungsi di dalamnya, sistem akan lebih mudah dipahami.
GAMBAR 3.1 USE CASE DIAGRAM SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB
Sumber : Data Olahan, 2018
Dari use case diagram di atas, dapat diketahui bahwa proses yang ada dalam sistem informasi geografis lokasi bengkel motor resmi berbasis web yaitu proses pencarian, proses penilaian kepuasan layanan bengkel, proses menghubungi admin, proses pendaftaran operator bengkel, proses login, dan proses melengkapi data bengkel.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 44 www.foxitsoftware.com/shopping
Adapun aktor yang berhubungan dengan setiap proses antara lain adalah pada proses menghubungi admin yang berikutnya, operator bengkel menghubungi admin web melalui web sistem. 2.
Activity Diagram Activity Diagram akan menggambarkan aktvitas yang terjadi didalam sistem informasi geografis yang dirancang. Dengan Activity Diagram yang akan menggambarkan aktivitas yang terjadi didalamnya, sistem akan lebih mudah dipahami. GAMBAR 3.2 ACTIVITY DIAGRAM PENCARIAN
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 45 www.foxitsoftware.com/shopping
Gambar 3.2 menggambarkan aliran aktivitas ketika terjadi pada saat proses pencarian. Aktivitas-aktivitas tersebut yaitu pengunjung web terlebih dahulu mengakses web sistem, kemudian pengujung melihat daftar data bengkel yang terdaftar di sistem, selanjutnya pengunjung web mencari lokasi bengkel, id bengkel, dan nama bengkel melalui peta lokasi yang terdapat pada web sistem informasi geografis. Pegunjung web memasukan data bengkel dengan memfilterasi kategori pencarian maka secara otomatis sistem akan mencari data bengkel yang dimaksud, jika pencarian selesai maka hasil dari pencarian akan ditampilkan pada peta lokasi. GAMBAR 3.3 ACTIVITY DIAGRAM PENILAIAN KEPUASAAN LAYANAN BENGKEL
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 46 www.foxitsoftware.com/shopping
Gambar 3.3 menggambarkan aliran aktivitas penilaian kepuasaan terhadap layanan bengkel yang dilakukan oleh pegunjung web. Aktivitas tersebut dimulai pada saat pegunjung melakukan penilaian dengan memasukan nama, komentar, dan pemberian rating atau bintang terhadap bengkel yang dinilai pada form penilaian, jika penilaian berhasil dilakukan maka hasil penilaian akan otomatis tersimpan ke database sistem informasi geografis. GAMBAR 3.4 ACTIVITY DIAGRAM MENGHUBUNGI ADMIN
Sumber : Data Olahan, 2018
Gambar 3.4 menggambarkan aliran aktivitas operator bengkel menghubungi admin web. Aktivitas tersebut dimulai pada saat operator menghubungi admin, operator bengkel mengirimkan pesan dengan
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 47 www.foxitsoftware.com/shopping
menmasukan pesan pada form kontak selanjutnya pesan akan terkirim dan tersimpan ke dalam database sistem. GAMBAR 3.5 ACTIVITY DIAGRAM PENDAFTARAN OPERATOR BENGKEL
Sumber : Data Olahan, 2018
Gambar 3.5 menggambarkan aliran aktivitas pendaftaran. Aktivitasaktivitas tersebut dimulai ketika admin web mendaftarkan operator bengkel ke dalam sistem, admin web mendaftarkan operator bengkel dengan cara mengisi form pendaftaran selanjutnya memasukan userid, password, dan email ketika pendaftaran berhasil dilakukan maka userid email dan password operator bengkel sudah otomatis terdaftar pada database sistem.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 48 www.foxitsoftware.com/shopping
GAMBAR 3.6 ACTIVITY DIAGRAM LOGIN OPERATOR BENGKEL
Sumber : Data Olahan, 2018
Gambar 3.6 menggambarkan aliran aktivitas login operator bengkel. Aktivitas-aktivitas tersebut dimulai pada saat operator memasukan data login, kemudian sistem akan mengecek dan mencocokan data login yang operator masukan, jika data login yang dimasukan benar maka login akan dilanjutkan ke halaman operator. Jika data login yang dimasukan salah makan proses login gagal dan otomatis kembali ke halaman login.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 49 www.foxitsoftware.com/shopping
GAMBAR 3.7 ACTIVITY DIAGRAM MELENGKAPI DATA BENGKEL
.
Sumber : Data Olahan, 2018
Gambar 3.7 menggambarkan aliran aktivitas melengkapi data bengkel. Aktivitas-aktivitas tersebut dimulai pada saat operator bengkel mengakses web sistem, selanjutnya operator bengkel melengkapi data profil bengkel pada form data bengkel, maka data akan tersimpan ke dalam database sistem dan secara otomatis profil bengkel ter-update. Dan sebaliknya jika operator tidak melengkapi salah satu data pada isian form data bengkel maka data akan secara otomatis gagal disimpan, dengan demikian operator diarahkan untuk melengkapi semua isian form.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 50 www.foxitsoftware.com/shopping
GAMBAR 3.8 ACTIVITY DIAGRAM LOGIN ADMIN WEB
Sumber : Data Olahan, 2018
Gambar 3.8 menggambarkan aliran aktivitas login admin web. Aktivitas-aktivitas tersebut dimulai pada saat admin memasukan data login, kemudian sistem akan mengecek dan mencocokan data login yang admin masukan, jika data login yang dimasukan benar maka login akan dilanjutkan ke halaman admin. Jika data login yang dimasukan salah makan proses login gagal dan otomatis kembali ke halaman login.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 51 www.foxitsoftware.com/shopping
3.
Sequence Diagram Sequence Diagram adalah diagram interaksi yang menekankan pada pengiriman pesan dalam suatu waktu tertentu. Diagram ini menggambar proses berjalannya sistem informasi geografis yang dirancang dari tahap ketahap secara berurutan.
GAMBAR 3.9 SEQUENCE DIAGRAM PENCARIAN
Sumber : Data Olahan, 2018
Gambar 3.9 menjelaskan interaksi yang terjadi pada saat pengunjung web melakukan pencarian lokasi, id, dan nama bengkel pada web sistem informasi geografis. Ketika pengunjung memilih menu data bengkel maka sistem akan menampikan data bengkel yang terdaftar dalam sistem
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 52 www.foxitsoftware.com/shopping
informasi geografis. Selanjutnya ketika pengunjung web mengakses menu lokasi dan memasukan kategori pencarian maka secara otomatis sistem akan memfilterisasi pencarian sesuai dengan perintah yang dimasukan oleh pengujung web, dan selanjutnya hasil pencarian akan ditampikan kepada pengunjung web.
GAMBAR 3.10 SEQUENCE DIAGRAM PENILAIAN KEPUASAN LAYANAN BENGKEL
Sumber : Data Olahan, 2018
Gambar 3.10 menjelaskan interaksi yang terjadi pada saat pengunjung web melakukan penilaian terhadap pelayanan bengkel pada web sistem informasi geografis. Interaksi terjadi ketika pengunjung web mengakses menu detail bengkel, maka sistem akan menampikan menu detail bengkel. Selanjutnya pengunjung web mengakses form penilaian maka
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 53 www.foxitsoftware.com/shopping
secara ototmatis sistem akan menampikan form penilaian, berikutnya pengunjung web memasukan data penilaian, jika data penilaian berhasil dimasukan maka data akan tersimpan secara langsung ke dalam database. Ketika pengunjung web ingin melihat hasil penilaian, maka secara otomatis sistem akan menampilkan data penilaian yang diambil langsung dari database sistem.
GAMBAR 3.11 SEQUENCE DIAGRAM MENGHUBUNGI ADMIN
Sumber : Data Olahan, 2018
Gambar 3.11 menjelaskan interaksi yang terjadi pada saat operator bengkel menghubungi admin pada web sistem informasi geografis. Interaksi terjadi ketika operator mengakses form kontak maka sistem akan
menampilkan
form
kontak,
selanjutnya
operator
akan
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 54 www.foxitsoftware.com/shopping
menghubungi admin dengan mengirimkan pesan kepada admin, jika pesan berhasil terkirim maka sistem akan menampilkan pesan pemberitahuan bahwa pesan berhasil terkirim, dan pesan akan tersimpan ke database sistem.
GAMBAR 3.12 SEQUENCE DIAGRAM PENDAFTARAN OPERATOR BENGKEL
Sumber : Data Olahan, 2018
Gambar 3.12 menjelaskan interaksi yang terjadi pada saat admin web bengkel mendaftarkan operator bengkel pada web sistem informasi geografis. Interaksi terjadi ketika admin web mengakses form pendaftaran operator maka secara otomatis sistem akan menampilkan form pendaftaran operator tahap berikutnya admin web memasukkan user id, password, dan email operator bengkel untuk melanjutkan
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 55 www.foxitsoftware.com/shopping
pendaftaran, jika pendaftaran berhasil maka data pendaftaran operator bengkel akan tersimpan langsung ke dalam database sistem. GAMBAR 3.13 SEQUENCE DIAGRAM LOGIN OPERATOR
Sumber : Data Olahan, 2018
Gambar 3.13 menjelaskan interaksi yang terjadi pada saat operator bengkel melakukan login pada web sistem informasi geografis. Interaksi terjadi ketika operator mengakses menu login maka sistem akan menampilkan menu login, setelah operator memasukkan data login selanjutnya sistem akan memvalidasi data login. Jika data login sesuai maka operator akan diarahkan ke halaman hak akses operator, sebaliknya jika data login tidak sesuai maka operator akan diarahkan kembali ke halaman login.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 56 www.foxitsoftware.com/shopping
GAMBAR 3.14 SEQUENCE DIAGRAM MELENGKAPI DATA BENGKEL
Sumber : Data Olahan, 2018
Gambar 3.14 menjelaskan interaksi yang terjadi pada saat operator bengkel melengkapi data bengkel pada web sistem informasi geografis. Interaksi terjadi ketika operator bengkel mengakses menu operator, maka sistem akan menampilkan menu operator. Untuk melengkapi data bengkel, operator terlebih dahulu mengakses menu update profil, maka secara otomatis sistem menampilkan menu update profil, selanjutnya operator melengkapi data profil bengkel jika profil bengkel berhasil disimpan maka data akan tersimpan langsung ke database.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 57 www.foxitsoftware.com/shopping
GAMBAR 3.15 SEQUANCE DIAGRAM LOGIN ADMIN
Sumber : Data Olahan, 2018
Gambar 3.15 menjelaskan interaksi yang terjadi pada saat admin web melakukan login pada web sistem informasi geografis. Interaksi terjadi ketika admin mengakses menu login maka sistem akan menampilkan menu login, setelah memasukkan data login selanjutnya sistem akan memvalidasi data login. Jika data login sesuai maka admin akan diarahkan ke halaman hak akses admin, sebaliknya jika data login tidak sesuai makan admin akan diarahkan kembali ke halaman login.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: 58 www.foxitsoftware.com/shopping
4.
Class Diagram
GAMBAR 3.16 CLASS DIAGRAM SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB
Sumber : Data Olahan, 2018
Pada gambar 3.16 di atas menjelaskan tentang rancangan class diagram yang terjadi pada sistem informasi geografis. Untuk membangun suatu sistem informasi geografis berbasis web penulis merancang suatu model dari sistem usulan dengan bentuk class diagram yang bertujuan untuk memberikan gambaran sistem secara statis dan hubungan antar tabel.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
BAB IV PERANCANGAN SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK
A. Perancangan Database Pada tahap perancangan database akan dibuat rancangan kamus data dan rancangan tabel yang akan menjadi basis penyimpanan data pada sistem informasi geografis lokasi bengkel motor resmi berbasis web. Berikut adalah perancangan tabel dan kamus data yang telah dibuat: 1.
Perancangan Kamus Data Berikut ini adalah kamus data dari sistem informasi geografis berbasis web di Kota Pontianak: a.
Tabel users user =@userid+password
b.
id
= 1 {Karakter} 10
Nama
= 1 {Karakter}100
Email
= 1 {karakter}50
Password
= 1 {Karakter} 191
Tabel Workshops Bengkel=@IdBengkel+NamaBengkel+JenisBengkel+Alamat+ Kecamatan+NoTlp+Lat+Lng+Gambar+Layanan+Status 59
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 60
c.
IdBengkel
= 1{Karakter}10
NamaBengkel
= 1 {Karakter}100
JenisBengkel
= 1 {Karakter}20
Alamat
= 1 {Karakter}100
No Tlpn
= 1 {Karakter} 12
Kecamatan
= 1 {Karakter}50
Lat
= 1 {Karakter}50
Lng
= 1 {Karakter}100
Gambar
= 1{Karakter}191
Layanan
= 1{Karakter} 500
Status
= 1{Karakter} 5
Tabel Rates Penilaian =@Nama+JumlahBintang+Komentar
d.
Nama
= 1{Karakter} 50
JumlahBintang
= 1{Karakter}10
Komentar
= 1{Karakter}100
Tabel Messages Pesan =@Nama+Email+Pesan Id
= 1{Karakter} 10
Pesan
= 1{Karakter} 200
User Id
= 1{Karakter} 100
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 61
2.
Perancangan Tabel Berikut ini adalah rancangan Tabel yang diperlukan dalam sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontianak:
Field Id Nama Email Password
TABEL 4.1 STRUKTUR TABEL USERS Type Int (10) Varchar(100) Varchar(50) Varchar(191)
Keterangan Nomor id user Nama User Email user Password pengguna
Sumber : Data Olahan, 2018
TABEL 4.2 STRUKTUR TABEL RATES Field Type Nama Varchar(50) JumlahBintang Varchar(10) Komentar Varchar(100)
Keterangan Nama Pengunjung Jumlah Bintang/Rating Komentar Pengunjung
Sumber : Data Olahan, 2018
TABEL 4.3 STRUKTUR TABEL WORKSHOPS Field Type Keterangan IdBengkel* Int(10) ID Bengkel NamaBengkel Varchar(100) Nama Bengkel Jenis Varchar(20) Jenis Bengkel Alamat Varchar(100) Alamat Bengkel Kecamatan Varchar(50) Kecamatan NoHp Varchar(12) No Handphone Lat Decimal(10,6) Latitude Lng Decimal(10,6) Logitude Gambar Varchar(191) Gambar Bengkel Layanan Varchar(500) Deskripsi Layanan Status Varchar(5) Status Operasional Sumber : Data Olahan, 2018
*=Primary Key
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 62
Field Id Pesan User id
TABEL 4.4 STRUKTUR TABEL MESSAGES Type Keterangan Int(10) Nomor id pesan Varchar(200) Isi pesan Operator Int(100) User id Operator
Sumber : Data Olahan, 2018
3.
Relasi antar tabel Untuk memudahkan pencocokan data pada suatu database, diperlukan sebuah hubungan atau relasi antar tabel dalam database tersebut. Berikut adalah gambar tabel yang saling berhubungan pada database sistem informasi geografis yang telah dirancang. GAMBAR 4.1 RELASI ANTAR TABEL DATABASE PADA SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 63
B.
Perancangan Web Sistem Informasi Geografis Rancangan web merupakan sebuah faktor penting dalam perancanagan web sistem informasi geografis lokasi bengkel motor resmi, karena web adalah media yang digunakan oleh pengunjung atau pengguna sistem untuk mengakses sistem informasi geografis lokasi bengkel motor resmi untuk mendapatkan informasi yang tersedia. Berikut adalah rancangan tampilan yang terdapat pada sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontaianak: 1.
Perancangan Halaman Utama/Beranda Pada gambar 4.1 menunjukkan rancangan halaman utama atau Beranda. rancangan halaman utama adalah tampilan utama yang ditampilkan sistem pada saat pengunjung maupun operator bengkel mengakses web sistem informasi geografis. Berikut adalah rancangan dan halaman utama: GAMBAR 4.2 RANCANGAN HALAMAN UTAMA
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 64
Pada halaman utama tampilan terdiri dari header, menu navbar, jumbotron, tombol dan footer. pada pilihan menu navbar, pengunjung diperlihatkan menu-menu yang terdapat dalam sistem yaitu menu beranda yang berfungsi sebagai halaman utama, menu lokasi yang berfungsi untuk menampilkan peta pencarian,
menu bengkel yang berfungsi untuk
menampilkan data bengkel, menu kontak yang berfungsi untuk menampilkan form untuk menghubungi admin, menu tentang yang berfungsi untuk menampilkan deskripsi tentang web sistem, dan menu login yang berfungsi untuk menampilkan menu login ke dalam sistem. 2. Perancangan Halaman Lokasi/Pencarian Pada gambar 4.3 menujukkan rancangan halaman Lokasi. Halaman lokasi adalah halaman yang menampilkan peta google maps, berikut adalah rancangan pada halaman lokasi. GAMBAR 4.3 RANCANGAN HALAMAN LOKASI
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 65
Halaman Lokasi adalah halaman yang dikhususkan untuk pengunjung web. Pada halaman lokasi tampilan terdiri atas menu navbar dan peta lokasi google maps, untuk melakukan pencarian pengunjung dapat melakukan filterisasi pencarian pada fitur pencarian yang telah disediakan pada halaman lokasi, jika pengunjung sudah memasukan kategori pencarian maka secara otomatis sistem akan menampilkan data lokasi bengkel pada peta google maps yang sudah tersedia pada sistem. 3.
Perancangan Halaman Data Bengkel Pada gambar 4.4 menujukkan rancagan halaman data bengkel. Halaman data bengkel adalah halaman yang berfungsi untuk menampilkan data bengkel yang terdaftar pada web sistem. Berikut rancangan halaman data bengkel pada web sistem informasi geografis. GAMBAR 4.4 RANCANGAN HALAMAN DATA BENGKEL
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 66
Halaman data bengkel adalah halaman yang dikhususkan untuk pengunjung web, rancangan halaman web terdiri dari header,
menu
navbar, tabel daftar bengkel, footer, dan tombol. Untuk melihat informasi bengkel lebih detail pengunjung web bisa mengklik tombol detail bengkel maka akan muncul informasi lengkap tentang profil bengkel yang terdaftar pada web sistem. GAMBAR 4.5 RANCANGAN INFO WINDOW DETAIL DATA BENGKEL
Sumber : Data Olahan, 2018
Gambar 4.5 menunjukkan rancangan info window, rancangan terdiri dari label text dan tombol. Pada info window detail data bengkel akan ditampilkan informasi bengkel yang terdiri dari Alamat Bengkel, Kecamatan, No telepon, deskripsi layanan, dan status operasional bengkel,
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 67
jika pengunjung web ingin memberi penilaian maka pengunjung harus mengklik tombol beri penilaian, jika ingin membatalkan penialaian maka pengunjung harus mengklik tombol close atau menklik ikon X pada pojok kanan atas info window. GAMBAR 4.6 RANCANGAN FORM PENILAIAN
Sumber : Data Olahan, 2018
Gambar 4.6 menunjukkan rancangan form penilaian, rancangan terdiri dari dua text field yaitu text field nama dan komentar serta fitur bintang atau rating dan juga terdapat dua tombol yaitu tombol close dan tombol save. Jika pengunjung web ingin menyimpan hasil penilaian maka pengunjung harus mengklik tombol save jika ingin membatalkan penilaian maka pengunjung web harus mengklik tombol close atau mengklik ikon X pada pojok kanan atas form penilaian.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 68
4.
Perancangan Halaman Login Halaman login adalah halaman yang berfungsi untuk login ke dalam sistem, berikut adalah tampilan dan rancangan halaman login.
GAMBAR 4.7 RANCANGAN HALAMAN LOGIN
Sumber : Data Olahan, 2018
Gambar 4.7 menunjukkan rancangan pada halaman login. Halaman login adalah halaman yang dikhususkan untuk operator bengkel dan admin web sistem. Pada halaman login rancangan terdiri dari menu navbar, form dan tombol. Ketika admin dan operator ingin melakukan login ke dalam sistem, operator dan admin terlebih dahulu memasukan Email dan password, selanjutnya jika sudah mengisi Email dan password admin dan operator harus menglik tombol login untuk mengakses halaman hak akses masing-masing.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 69
5.
Perancangan Halaman Operator Halaman Operator adalah tampilan halaman yang berfungsi untuk menampilkan form input data bengkel dan berfungsi untuk mengelola data bengkel yang terdaftar didalam sistem. Berikut adalah rancangan halaman operator. GAMBAR 4.8 RANCANGAN HALAMAN OPERATOR
Sumber : Data Olahan, 2018
Pada gambar 4.8 menunjukkan rancangan halaman operator. Halaman operator adalah halaman yang dikhususkan untuk operator bengkel yang terdaftar pada web sistem. Rancangan halaman operator terdiri dari dashboard operator, tombol menu, tombol tambah dan tabel profil bengkel. Pada bagian dashboard terdiri dari menu bengkel, menu kontak admin, dan menu logout. Fungsi dari menu bengkel adalah untuk
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 70
mengelola data bengkel, selanjutnya fungsi dari menu kontak admin adalah berfungsi untuk menghubungi admin, sedangkan fungsi menu logout adalah untuk keluar dari halaman operator. Selanjutnya adalah fungsi dari tombol menu adalah untuk menampilkan dashboard operator sedangkan fungsi dari tombol tambah adalah untuk menambahkan data bengkel yang belum terinput ke dalam sistem. GAMBAR 4.9 RANCANGAN FORM TAMBAH DATA BENGKEL
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 71
Pada gambar 4.9 menunjukkan rancangan pada form tambah data bengkel. Rancangan form data bengkel terdiri dari text field, listbox, tombol dan juga file field. Setelah operator mengkilk tombol tambah bengkel pada halaman operator maka akan muncul form tambah data bengkel, setelah form data bengkel tampil maka operator harus mengisikan informasi yang seperti terdapat pada rancangan form data bengkel di atas, setelah semua informasi sudah dilengkapi semuanya maka operator harus mengklik tombol save untuk menyimpan data bengkel, dan jika operator ingin membatalkan menyimpan data bengkel maka operator harus mengklik tombol close atau menklik ikon X di pojok kanan atas form tambah data bengkel. GAMBAR 4.10 RANCANGAN FORM KONTAK ADMIN
Sumber : Data Olahan, 2018
Pada gambar 4.10 menunjukkan rancangan pada form kontak admin. Form kontak admin adalah form yang berfungsi untuk
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 72
menghubungi admin, form kontak admin terdiri dari tombol, form list area, dan menu dashboard admin. Jika operator ingin menghubungi admin maka operator harus mengakses menu kontak admin, selanjutnya jika form kontak admin sudah tampil maka operator harus memasukan isi pesan, selanjutnya jika pesan sudah di isi maka operator harus mengklik tombol kirim atau submit. Dan jika operator ingin keluar dari halaman operator maka operator harus mengklik menu logout. 6.
Perancangan Halaman Admin Rancangan halaman admin adalah perancangan halaman hak akses yang dikhususkan hanya untuk admin web sistem. Berikut adalah rancangan pada halaman admin: GAMBAR 4.11 RANCANGAN HALAMAN ADMIN
Sumber : Data Olahan, 2018
Pada gambar 4.11 menunjukkan rancangan pada halaman admin. Halaman admin adalah halaman yang befungsi untuk mengelola data
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 73
bengkel dan operator. Rancangan data bengkel terdiri dari menu dashboard admin, tombol menu dan tabel daftar bengkel . menu dashboard admin terdiri dari menu daftar operator, menu tambah operator, menu daftar bengkel, menu pesan masuk, dan menu logout, jika admin ingin melihat daftar operator maka admin harus mengakses menu daftar operator, selanjutnya jika admin ingin menambahkan operator maka admin harus mengkases menu tambah operator, berikutnya jika admin melihat daftar bengkel yang terdaftar pada web sistem maka admin harus mengakses menu daftar bengkel, selanjutnya jika admin ingin melihat pesan masuk maka admin harus mengakses menu pesan masuk, dan jika admin ingin keluar dari halaman hak akses admin maka admin harus mengakses menu logout. GAMBAR 4.12 RANCANGAN HALAMAN DAFTAR OPERATOR
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 74
Pada gambar 4.12 menunjukkan rancangan pada halaman daftar operator. Rancangan halaman operator terdiri dari tombol menu, menu dashboard admin, tombol edit, hapus, dan tabel daftar operator. Jika admin ingin melihat daftar operator maka admin harus mengakses menu daftar operator, selanjutnya jika admin ingin menghapus data operator maka admin harus mengklik tombol hapus, dan jika admin ingin mengubah data operator maka operator harus mengklik tombol edit yang terdapat pada tabel. GAMBAR 4.13 RANCANGAN FORM TAMBAH OPERATOR
Sumber : Data Olahan, 2018
Pada gambar 4.13 menunjukkan rancangan pada form tambah operator. Rancangan from tambah operator terdiri dari text field dan tombol. Jika admin ingin menambahkan data operator terlebih dahulu
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 75
admin harus mengakses form tambah operator, selanjutnya admin harus menlengkapi form dengan memasukan nama operator, email operator, password dan konfirmasi password yang terdapat pada form tambah operator, selanjutnya jika isian form sudah lengkap maka admin harus mengklik tombol buat akun untuk menyelesaikan proses pendaftaran operator bengkel ke sistem.
GAMBAR 4.14 RANCANGAN HALAMAN PESAN MASUK
Sumber : Data Olahan, 2018
Pada gambar 4.14 menunjukkan rancangan pada halaman pesan masuk. Rancangan halaman pesan masuk terdiri dari menu dashboard admin, tombol menu, tombol hapus dan tabel pesan. Jika admin ingin mengakses halaman admin terlebih dahulu admin mengakses menu pesan masuk, jika admin telah mengakses menu pesan masuk maka tabel pesan masuk akan tampil, jika admin ingin menghapus pesan maka admin harus
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 76
mengklik tombol hapus. Jika admin ingin keluar dari halaman admin maka admin harus mengklik menu logout.
C. Tampilan Website Sistem Informasi Geografis Pada tahap Perancangan tampilan ini, adalah sebuah tahap untuk menampilkan tampilan sistem sesungguhnya yang sudah dirancang dan dibuat dalam bentuk yang nyata, pada tahap ini tampilan sistem sudah dalam bentuk online dan terhubung dengan database sistem. Berikut adalah tampilan nyata sistem informasi geografis lokasi bengkel motor resmi: 1. Tampilan Halaman Utama Atau Beranda Gambar 4.15 adalah tampilan dari halaman utama atau beranda. Pada tampilan halaman beranda akan ditampilkan informasi mengenai menu-menu navbar web sistem dan informasi lainnya yang sudah tampil secara online. Berikut adalah tampilan halaman utama atau beranda: GAMBAR 4.15 TAMPILAN HALAMAN UTAMA
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 77
2. Tampilan Halaman Lokasi Gambar 4.16 dan gambar 4.17 adalah tampilan dari halaman lokasi atau halaman peta pencarian lokasi bengkel motor resmi. Informasi yang ditampilkan pada halaman lokasi dan menu navbar yang terdapat pada web sistem, selain itu halaman lokasi terdiri dari peta google maps yang menampilkan info geografis titik-titik lokasi bengkel motor resmi yang berbasis web di Kota Pontianak. Jika pengunjung ingin melihat informasi lengkap mengenai bengkel pada halaman lokasi maka pengunjung harus mengklik ikon titik
lokasi bengkel untuk memunculkan info window
bengkel. GAMBAR 4.16 TAMPILAN HALAMAN LOKASI
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 78
GAMBAR 4.17 TAMPILAN HALAMAN LOKASI
Sumber : Data Olahan, 2018
3. Tampilan Halaman Data Bengkel Gambar 4.18
adalah tampilan halaman data bengkel yang sudah
ditampilkan secara online pada web sistem informasi geografis. Informasi yang ditampilkan pada halaman data bengkel berupa Id Bengkel, Nama Bengkel, jenis, alamat dan info detail dari bengkel yang terdaftar pada web sistem. Jika pengunjung web ingin melihat informasi lengkap bengkel yang ada pada halaman data bengkel maka pengunjung harus mengklik tombol detail. Berikut adalah tampilan halaman data bengkel secara online.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 79
GAMBAR 4.18 TAMPILAN HALAMAN DATA BENGKEL
Sumber : Data Olahan, 2018
4. Tampilan Info Window Detail Bengkel Gambar 4.19 adalah tampilan dari info window detail bengkel. Info window berfungsi untuk menampilkan informasi lengkap tentang bengkel resmi yang terdaftar pada web sistem, tampilan info window detail bengkel
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 80
terdiri dari foto bengkel, alamat bengkel, kecamatan, deskripsi layanan, dan status. Berikut adalah tampilan secara online dari info window detail bengkel:
GAMBAR 4.19 TAMPILAN INFO WINDOW DETAIL BENGKEL
Sumber : Data Olahan, 2018
5. Tampilan Form Penilaian Gambar 4.20 adalah tampilan dari form penilaian, fungsi dari form penilaian adalah untuk memberikan nilai pada kualitas layanan pada bengkel resmi yang ada pada sistem. Jika pengunjung web ingin melakukan penilaian maka pengunjung harus mengakses info window informasi lengkap detail
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 81
bengkel, selanjutnya pengunjung mengklik tombol beri nilai pada info window, jika pengunjung ingin membatalkan penilaian maka pengunjung harus mengklik tombol close atau mengklik icon X pada pojok kanan info window. GAMBAR 4.20 TAMPILAN FORM PENILAIAN
Sumber : Data Olahan, 2018
6. Tampilan Halaman Login Gambar 4.21 adalah tampilan dari halaman login, halaman login adalah halaman yang berfungsi untuk masuk ke dalam sistem, informasi yang dimasukan pada halaman login terdiri dari halaman email dan password, jika
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 82
operator dan admin sudah mengisi email dan pasword pada halaman login maka admin dan operator akan dialihkan ke halaman hak akses masingmasing. Berikut adalah tampilan halaman login: GAMBAR 4.21 TAMPILAN HALAMAN LOGIN
Sumber : Data Olahan, 2018
7. Tampilan Halaman Operator Gambar 4.22 menunjukkan tampilan pada halaman operator, informasi pada halaman operator terdiri dari menu tambah data bengkel yang dikelola operator, dan menu untuk menghubungi admin. jika operator ingin mengakses menu-menu tersebut operator harus mengklik menu-menu yang tersedia pada dashboard operator. Berikut adalah tampilan secara online pada halaman operator:
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 83
GAMBAR 4.22 TAMPILAN HALAMAN OPERATOR
Sumber : Data Olahan, 2018
8. Tampilan Form Tambah Data Bengkel Gambar 4.23 menunjukan tampilan form tambah data bengkel pada halaman operator. Informasi yang dimasukan pada halaman operator adalah semua informasi mengenai bengkel yang akan ditambahkan pada sistem, seperti nama bengkel, alamat bengkel, kecamatan, nomor handphone, status operasional, koordinat X dan Y, serta deskripsi layanan pada bengkel. Berikut adalah tampilan secara online form tambah data bengkel:
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 84
GAMBAR 4.23 TAMPILAN FORM TAMBAH DATA BENGKEL
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 85
9. Tampilan Form Kontak Admin Gambar 4.24 menunjukan tampilan dari form kontak admin yang terdapat pada halaman operator. Informasi yang dimasukan ke dalam form kontak admin adalah informasi berupa nama, dan isi pesan. Untuk mengakses form kontak admin terlebih dahulu operator harus mengakses menu kontak admin pada dashboard operator. Berikut adalah tampilan secara online dari form kontak admin yang tersedia pada halaman operator. GAMBAR 4.24 TAMPILAN FORM KONTAK ADMIN
Sumber : Data Olahan, 2018
10. Tampilan Halaman Admin Gambar 4.25 adalah tampilan dari halaman admin, informasi yang terdapat pada halaman admin terdiri dari menu daftar operator, menu tambah operator, menu daftar bengkel dan menu pesan masuk dari operator. jika
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 86
admin ingin mengakses menu-menu tersebut admin dapat mengklik menumenu yang tersedia pada dashboard admin. Berikut adalah tampilan secara online pada halaman admin: GAMBAR 4.25 TAMPILAN HALAMAN ADMIN
Sumber : Data Olahan, 2018
11. Tampilan Halaman Daftar Operator Gambar 4.26 adalah tampilan pada halaman daftar operator yang terdapat pada halaman admin. Informasi yang ditampilkan pada halaman operator adalah data atau identitas operator bengkel yang terdaftar pada web sistem informasi geografis. Untuk mengakses halaman operator, admin harus mengklik menu daftar operator yang terdapat pada menu dashboard admin. Berikut adalah tampilan halaman daftar operator secara online.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 87
GAMBAR 4.26 TAMPILAN HALAMAN DAFTAR OPERATOR
Sumber : Data Olahan, 2018
12. Tampilan Form Tambah Operator Gambar 4.27 adalah tampilan pada form tambah operator. Form tambah operator berfungsi untuk mendaftarkan operator ke dalam sistem informasi geografis untuk mendapatkan hak akses masuk ke dalam sistem. Informasi yang di masuka ke dalam form tambah operator berupa nama operator, email operator dan password, jika admin telah memasukan informasi lengkap operator pada form maka secara otomatis operator telah terdaftar dalam web sistem informasi geografis. Berikut adalah tampilan form tambah operator secara online.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 88
GAMBAR 4.27 TAMPILAN FORM TAMBAH OPERATOR
Sumber : Data Olahan, 2018
13. Tampilan Halaman Pesan Masuk Gambar 4.28 adalah tampilan dari halaman pesan masuk dari operator yang terdapat pada halaman admin. Halaman pesan masuk berfungsi untuk menampilkan pesan masuk yang di kirim oleh operator. Untuk mengakses halaman pesan masuk dari operator admin terlebih dahulu mengklik menu pesan masuk pada dashboard admin. Berikut adalah tampilan dari halaman pesan masuk.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 89
GAMBAR 4.28 TAMPILAN HALAMAN PESAN MASUK
Sumber : Data Olahan, 2018
D.
Pengujian Blackbox Pengujian blackbox merupakan pengujian perangkat lunak yang hanya berfokus pada test fungsionalitas pada aplikasi, jadi fokusnya adalah hasil atau output dari proses, bukan bagaiamana proses itu dapat terjadi. Pada tahap ini penulis akan melakukan pegujian blackbox testing pada website sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota pontianak. Pengujian pertama dilakukan pada halaman login, berikutnya pengujian dilakukan pada form tambah akun operator, berikutnya pengujian akan dilanjutkan pada form kontak admin, dan pengujian yang terakhir akan dilakukan pada form tambah data bengkel.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 90
1. Pengujian Pada Halaman Login Pengujian pada halaman login dilakukan untuk mengetahui fungsionalitas sistem pada halaman login yang sesuai, tidak sesuai dan yang hilang sehingga akan mencapai hasil yang telah tentukan setelah pengujian selesai, berikut pengujian pada halaman login. GAMBAR 4.29 DATA LOGIN SALAH
Sumber : Data Olahan, 2018
Pada gambar 4.29 menampilkan kasus pengujian pada form login dengan data login yang salah, ketika dimasukan data login yang salah atau data login yang tidak terdaftar, maka sistem akan menampilkan pesan error pada form dan login tidak dialihkan pada halaman hak akses. Pada kasus uji coba data
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 91
login tidak normal, pengujian menggunakan lima penguji yang tidak terdaftar pada sistem.
No
1
2
3
4
5
TABEL 4.5 HASIL PENGUJIAN HALAMAN LOGIN Kasus dan uji coba data tidak normal Data Masukan Yang Hasil diharapkan pengamatan Email: Sistem mampu Login tidak [email protected] menolak akses berhasil dan Password: 1234 ke dalam tidak dialihkan sistem dan ke halaman hak menampilkan askses pesan error berikutnya Email: Sistem mampu Login tidak [email protected] menolak akses berhasil dan Password : juni2018 ke dalam tidak dialihkan sistem dan ke halaman hak menampilkan askses pesan error berikutnya Email: Sistem mampu Login tidak [email protected] menolak akses berhasil dan Password : 0808ab ke dalam tidak dialihkan sistem dan ke halaman hak menampilkan askses pesan error berikutnya Email: Sistem mampu Login tidak [email protected] menolak akses berhasil dan Password : duatiga ke dalam tidak dialihkan sistem dan ke halaman hak menampilkan askses pesan error berikutnya Email: Sistem mampu Login tidak [email protected] menolak akses berhasil dan Password : ke dalam tidak dialihkan sinardunia32 sistem dan ke halaman hak menampilkan askses pesan error berikutnya Sumber : Data Olahan, 2018
Kesimpulan
Valid
Valid
Valid
Valid
valid
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 92
GAMBAR 4.30 DATA LOGIN SESUAI
Sumber : Data Olahan, 2018
Pada gambar 4.30 menampilkan kasus pengujian pada form login dengan data login yang benar. Pada tahap pengujian dengan data login yang benar, pengujian dilakukan oleh lima penguji yang terdaftar pada sistem, ketika dimasukan dengan data login yang benar, maka sistem akan mencocokan data login dan mengalihkan login ke halaman hak akses berikutnya.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 93
No
1
2
3
4
5
TABEL 4.6 HASIL PENGUJIAN HALAMAN LOGIN Kasus dan uji coba data normal Data Masukan Yang diharapkan Hasil pengamatan Email: Sistem akan Login berhasil [email protected] mengalihkan dan dialihkan Password: sinardunia login ke halaman ke halaman hak akses hak askses berdasarkan hak berikutnya askses masingmasing Email: Sistem akan Login berhasil [email protected] mengalihkan dan dialihkan Password: indonesia login ke halaman ke halaman hak akses hak askses berdasarkan hak berikutnya askses masingmasing Email: Sistem akan Login berhasil [email protected] mengalihkan dan dialihkan Password: duatiga login ke halaman ke halaman hak akses hak askses berdasarkan hak berikutnya askses masingmasing Email: Sistem akan Login berhasil [email protected] mengalihkan dan dialihkan Password: login ke halaman ke halaman bebaslepas hak akses hak askses berdasarkan hak berikutnya askses masingmasing Email: Sistem akan Login berhasil [email protected] mengalihkan dan dialihkan m login ke halaman ke halaman Password: hak akses hak askses rahmanrocket berdasarkan hak berikutnya askses masingmasing
Sumber : Data Olahan, 2018
Kesimpu lan
Valid
Valid
Valid
Valid
Valid
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 94
2. Pengujian Pada Form Tambah Akun Operator Pengujian pada form tambah akun operator dilakukan untuk mengetahui fungsionalitas sistem pada form tambah akun operator yang sesuai, tidak sesuai dan yang hilang sehingga akan mencapai hasil yang telah tentukan setelah pengujian selesai. Pengujian dilakukan dengan menambahkan lima data opeartor ke dalam sistem, berikut pengujian pada form tambah akun operator. GAMBAR 4.31 INPUTAN DATA YANG TIDAK SESUAI
Sumber : Data Olahan, 2018
Pada gambar 4.31 menampilkan kasus pengujian pada form tambah operator dengan inputan data yang salah. Pada tahap pengujian ini, penguji akan memasukan lima data operator dengan inputan data yang tidak lengkap. ketika dimasukan dengan inputan data yang salah, maka sistem akan menampilkan pesan error pada form karena isian form tidak lengkap, dan data tidak akan tersimpan pada database sistem.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 95
TABEL 4.7 HASIL PENGUJIAN FORM TAMBAH OPERATOR No Kasus dan uji coba data tidak normal Data Masukan Yang Hasil Kesimpulan diharapkan pengamatan 1 Nama : Anca Sistem Data tidak Email : [email protected] menampilkan tersimpan Valid error pada ke database isian form sistem 2 Nama : Doni Sistem Data tidak Email : [email protected] menampilkan tersimpan Valid error pada ke database isian form sistem 3 Nama : Nina Sistem Data tidak Email : [email protected] menampilkan tersimpan Valid error pada ke database isian form sistem 4 Nama : Didi Hermawan Sistem Data tidak Email : menampilkan tersimpan Valid [email protected] error pada ke database isian form sistem 5 Nama : Rahman Sistem Data tidak Email : menampilkan tersimpan Valid [email protected] error pada ke database isian form sistem Sumber : Data Olahan, 2018
GAMBAR 4.32 INPUTAN DATA YANG SESUAI
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 96
Pada gambar 4.32 menampilkan kasus pengujian pada form tambah operator dengan inputan data yang benar. Pada tahap ini penguji memasukan lima data operator secara lengkap, ketika dimasukan dengan inputan data yang benar, maka sistem akan menyimpan data operator pada database sistem. TABEL 4.8 HASIL PENGUJIAN FORM TAMBAH OPERATOR No Kasus dan uji coba data normal Data Masukan Yang Hasil Kesimpulan diharapkan pengamatan 1 Nama : Anca Tidak terjadi Data Email : [email protected] error pada tersimpan Password : sinardunia saat ke database Valid Konfimrasi password: penyimpanan sistem sinardunia data 2 Nama : Doni Tidak terjadi Data Email : [email protected] error pada tersimpan Password : indonesia saat ke database Valid Konfimrasi password: penyimpanan sistem indonesia data 3 Nama : Nina Tidak terjadi Data Email : [email protected] error pada tersimpan Password : duatiga saat ke database Valid Konfimrasi password: penyimpanan sistem duatiga data 4 Nama : Didi Hermawan Tidak terjadi Data Email : error pada tersimpan [email protected] saat ke database Valid Password : didi8888 penyimpanan sistem Konfimrasi password: data didi8888 5 Nama : Rahman Tidak terjadi Data Email : error pada tersimpan [email protected] saat ke database Valid Password : sinardunia penyimpanan sistem Konfimrasi password: data rahmanrocket Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 97
3. Pengujian Pada Form Tambah Data Bengkel Pengujian pada form tambah data bengkel dilakukan untuk mengetahui fungsionalitas sistem pada form tambah data bengkel yang sesuai, tidak seuai dan yang hilang sehingga akan mencapai hasil yang telah tentukan setelah pengujian selesai, berikut pengujian pada form tambah data bengkel. GAMBAR 4.33 INPUTAN DATA YANG TIDAK SESUAI
Sumber : Data Olahan, 2018
GAMBAR 4.34 PESAN ERROR
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 98
Pada gambar 4.33 dan gambar 4.34 menampilkan kasus pengujian pada form tambah data bengkel dengan inputan data yang salah, ketika dimasukan dengan inputan data yang salah, maka sistem akan menampilkan error pada form.
TABEL 4.9 HASIL PENGUJIAN FORM TAMBAH DATA BENGKEL Kasus dan uji coba data tidak normal Data Masukan Yang diharapkan Hasil pengamatan Kesimpulan Nama bengkel: Sistem Data tidak Graha Motor menampilkan tersimpan ke Jenis Bengkel: pesan error ketika database sistem Valid Yamaha form tidak terisi Alamat: Jalan dengan lengkap Merdeka Sumber : Data Olahan, 2018
GAMBAR 4.35 INPUTAN DATA YANG SESUAI
Sumber : Data Olahan, 2018
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping 99
Pada gambar 4.35 menampilkan kasus pengujian pada form tambah data bengkel dengan inputan data yang benar, ketika dimasukan dengan inputan data yang benar, maka sistem akan menyimpan data bengkel pada database web sistem. TABEL 4.10 HASIL PENGUJIAN FORM TAMBAH DATA BENGKEL Kasus dan uji coba data normal Data Masukan Yang diharapkan Hasil pengamatan Kesimpulan Nama bengkel: sistem Data tersimpan ke Graha Motor menyimpan database sistem Jenis Bengkel: data ke database Yamaha dan mengalihkan Alamat: Jalan akses ke halaman Merdeka data bengkel pada Kecamatan: halaman operator Pontianak kota tanpa ada pesan No Hp : error 082256789901 Valid Latitude: 0.031094 Longitude: 109.321992 Deskripsi layanan: test deskripsi Satus: Buka Gambar: 11-59thickbox.jpg Sumber : Data Olahan, 2018
4. Pengujian Pada Form Kontak Admin Pengujian
pada
form
kontak
admin
dilakukan
untuk
mengetahui
fungsionalitas sistem pada form kontak admin yang sesuai, tidak seuai dan yang hilang sehingga akan mencapai hasil yang telah tentukan setelah pengujian selesai, berikut pengujian pada form kontak admin.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
www.foxitsoftware.com/shopping 100
GAMBAR 4.36 INPUTAN DATA YANG TIDAK SESUAI
Sumber : Data Olahan, 2018
Pada gambar 4.36 menampilkan kasus pengujian pada form kirim pesan dengan inputan data yang tidak sesuai, ketika form pesan tidak dimasukan dengan data maka form akan menampilkan pesan: isi pesan ini, selanjutnya sistem akan menolak untuk mengirimkan data kosong. TABEL 4.11 HASIL PENGUJIAN FORM KIRIM PESAN Kasus dan uji coba data tidak normal Data Masukan Yang diharapkan Hasil pengamatan Tidak ada data sistem akan Data tidak yang dimasukan menampilkan tersimpan ke pesan validasi : isi database sistem pesan ini Sumber : Data Olahan, 2018
Kesimpulan Valid
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
www.foxitsoftware.com/shopping 101
GAMBAR 4.37 INPUTAN DATA YANG SESUAI
Sumber : Data Olahan, 2018
Pada gambar 4.37 menampilkan kasus pengujian pada form kirim pesan dengan inputan data yang sesuai, ketika form pesan dimasukan dengan data maka form akan menampilkan pesan: pesan berhasil dikirim, selanjutnya sistem akan menyimpan pesan ke database sistem.
No
1
TABEL 4.12 HASIL PENGUJIAN FORM KIRIM PESAN Kasus dan uji coba data normal Data Masukan Yang diharapkan Hasil pengamatan Pesan teks sistem akan Data dimasukan pada menampilkan tersimpan ke form isi pesan pesan validasi : database pesan berhasil dikirim!
Sumber : Data Olahan, 2018
Kesimpulan
Valid
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
www.foxitsoftware.com/shopping 102
E.
Kebutuhan Perangkat Keras dan Perangkat Lunak Agar sistem informasi geografis lokasi bengkel motor resmi ini berjalan dengan baik dan semestinya, semua fitur yang digunakan harus lebih efektif. Berikut fitur-fitur yang direkomendasikan dan diperlukan untuk menjalankan sistem: 1.
Kebutuhan perangkat lunak a. Operating sistem: Windows 7, Windows, 8 dan Windows 10. b. Browser : Mozilla, Opera, Google Chrome, dan Internet Explorer.
2.
Kebutuhan perangkat keras a. Processor Core intel core dan amd b. Memory: DDR2 2 GB RAM c. Harddisk : SATA 320 GB d. Monitor LCD e. Mouse+Keyboard
3.
Software Perancang Sistem a. Database : MySQl b. PHP dan phpmyadmin c. Adobe Dreamweaver CS 6 d. Xampp PHP 7 e. Laravel v5.6
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
BAB V KESIMPULAN DAN SARAN
A. Kesimpulan Dari hasil penelitian analisis dan perancangan bab-bab sebelumnya dengan demikian penulis dapat mengurai beberapa kesimpulan yang ada sebagai berikut: 1. Dengan dirancangnya sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontianak hal tersebut sudah sangat membantu dan memudahkan pengunjung web dan pemilik kendaraan bermotor dalam mencari lokasi dan alamat bengkel berdasarkan data pada peta google maps dan beberapa fitur pencarian pada sistem. 2. Sistem informasi geografis sangat membantu pihak bengkel dalam mempromosikan layanan yang mereka tawarkan berdasarkan pengalaman dari pemilik kendaraan yang pernah melakukan service pada bengkel tersebut, serta berdasarkan penilaian dari pengunjung web. Sistem informasi geografis yang selesai dirancang juga telah dilakukan taha pengujian dengan metode pengujian blackbox. 3. Pada tahap pengujian dengan metode pengujian blackbox dapat disimpulkan bahwa sistem sudah memiliki fungsionalitas yang cukup dan sesuai karena dapat memvalidasi data masukan yang benar dan salah pada aktivitas yang terjadi dalam sistem. 103
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
www.foxitsoftware.com/shopping 104
B. Saran Secara umum web sistem informasi geografis lokasi bengkel motor resmi berbasis web ini telah dirancang dengan melihat pada sisi kemudahan dalam penggunaan. Maka penulis memberikan beberapa saran yang harus diperhatikan agar web sistem informasi geografis dapat berjalan sebagaimana mestinya: 1. Sangat disarankan untuk melakukan backup data pada database secara berkala agar dapat mengantisipasi apabila terdapat gangguan pada server database. 2. Melakukan pemeliharaan (maintenance) pada website sistem secara berkala agar tidak terjadi error atau kesalahan sistem pada saat sistem berjalan atau sedang digunakan. 3. Disarankan untuk semua pihak bengkel yang terdaftar pada sistem untuk selalu mengupdate informasi tentang bengkel jika terjadi perubahan informasi. 4. Perlu adanya pelatihan atau seminar bagi seluruh pengguna sistem agar dapat menggunakan sistem dengan baik dan sebagaimana mestinya.
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
DAFTAR PUSTAKA
Abdulloh, Rohi. (2017). Membuat Aplikasi Point of Sale dengan Laravel dan AJAX. PT Elex Media Komputindo. Jakarta. Dianing P. (2012). Menguasai PHP dan MySQL. C.V. Andi Offset. Jakarta. Dennis, Alan, Barbara Haley Wixom dan David Tegarden. (2015). System Analysis and Design an Object-Oriented Approach with UML. Fifth Edition. Wiley. Virginia. Hikmah, Baitul Agung, Deddy Supriadi dan Tuti Alawiyah. (2015). Cara Cepat Membangun Website dari Nol. C.V. Andi Offset. Yogyakarta. Hutahaean, Jeperson. (2016). Konsep Sistem Informasi. Deepublish. Yogyakarta. Irwansyah, Edy. (2013). Sistem Informasi Geografis: Prinsip Dasar dan
Pengembangan Aplkasi. Digibooks. Yogyakarta. Irwansyah, Edy dan Jurike V Moniaga. (2014). Pengantar Teknologi Informasi. Deepublish. Yogyakarta. Jubilee Enterprise. (2012). Buku Pintar HTML5 + CSS3 + DreamWeaver CS6. PT Elex Media Komputindo. Jakarta. Jubilee Enterprise. (2015). Mengenal PHP Menggunakan Framework Laravel. PT Elex Media Komputindo. Jakarta. Jubilee Enterprise. (2016). Pemograman Bootstrap untuk pemula. PT Elek Media Komputindo. Jakarta. Julzarika, Atriyon dan I Made Andi. (2013). Memanfaatkan Fitur-fitur Google. PT Elex Media Komputindo. Jakarta. Kadir, Abdul dan Terra Ch. Triwahyuni. (2013). Pengantar Teknologi Informasi Edisi Revisi. C.V. Andi Offset. Yogyakarta. Kustiyahningsih, Yeni dan Devie Rosa Anamisa. (2011). Pemrograman Basis Data Berbasis Web Menggunakan PHP & MySQL. Edisi 1. Cetakan 1. Graha Ilmu. Yogyakarta.
x
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Laudon, Kennet C dan Jane P Laudon. (2012). Management Information System: Managing the Digital Firm. Edisi 12. Cetakan 1. Prentice Hall. New Jersey. Marisa, Fitri. (2017). Web Programming (Client Side And Server Side). Deepublish. Yogyakarta. Maturidi, Ade Djohar. (2014). Metode Penelitian Teknik Informatika. Deepublish. Yogyakarta. Mulyani, Sri. (2016). Metode Analisis dan Perancangan Sistem. Edisi 1. Cetakan 1. Abdi Sistematika. Bandung. Muharto dan Arisandy Ambarita. (2016). Metode Penelitian Sistem Informasi : Mengatasi Kesulitan Mahasiswa dalam Menyusun Proposal Penelitian. Edisi 1. Cetakan 1. Deepublish. Yogyakarta. Muslihudin, Muhamad dan Oktafianto. (2016). Analisis dan Perancangan Sistem Informasi Menggunakan Model Terstruktur dan UML. C.V. Andi Offset. Yogyakarta. Nirwansyah, Anang Widhi. (2017). Dasar Sistem Informasi Geografi dan aplikasinya menggunakan ARCGIS 9.3. Deepublish. Purwokerto. Rerung, Rintho Rante. (2018). Pemogramman Web Dasar. Deepublish. Yogyakarta. Rozi, Zaenal A. (2015). Bootstrap Design Framework. PT Elex Media Komputindo. Jakarta. Riyanto. (2011). Membuat Sendiri Sistem Informasi Penjualan Berbasis Web dengan PHP dan PostgreSQL. Cetakan 1. Gava Media. Yogyakarta. Solichin, Achmad. (2016). Pemograman Web dangan PHP dan MySQL. Budi Luhur. Jakarta. Sekolah Tinggi Manajemen Informatika dan Komputer Widya Dharma. 2017. Pedoman Penulisan Skripsi, edisi revisi ketiga. Pontianak: STMIK Widya Dharma. Supono. (2016). Pemograman Web dengan menggunakan PHP dan Framework Codeigniter. Deepublish. Yogyakarta.
xi
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
Saputra, Agus. (2011). Pemograman CSS untuk pemula. PT Elex Media Komputindo. Jakarta. Sugiarti, Yuni. (2013). Analisa & Perancangan UML (Unified Modeling Language) Generated VB.6. Graha Ilmu. Yogyakarta. Sukamto, Rosa. A dan M. Shalahuddin. (2014). Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek. Cetakan 2. Informatika. Bandung. Sutabri, Tata. (2014). Pengantar Teknologi Informasi. C.V. Andi Offset. Yogyakarta. Tilmann, George. (2017). Usage-Driven Database Design : From Logical Data Modeling though Physical Schema Definition. Apress Media. New York. TIM EMS. (2016). All In One Web Programming. PT Elek Media Komputindo. Jakarta. Wahana Komputer. (2015). Pemodelan SIG untuk Mitigasi Bencana. PT Elex Media Komputindo. Jakarta. Widodo, Prabowo Pudjo dan Herlawati. (2011). Menggunakan UML: UML Secara Luas Digunakan untuk Memodelkan Analisis & Desain Sistem Berorientasi Objek. Informatika. Bandung. Wicaksono, Soetam Rizky. (2017). Rekayasa Perangkat Lunak. Seribu Bintang. Malang. Yakub. (2012). Pengantar Sistem Informasi. Edisi 1. Cetakan 1. Graha Ilmu. Yogyakarta.
xii
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit: www.foxitsoftware.com/shopping
DAFTAR RIWAYAT HIDUP PENULIS
Nama
:
Oktavius Ali
Tempat/Tanggal lahir :
Merkuning, 28 November 1994
Jenis Kelamin
:
Laki-Laki
Agama
:
Katolik
Alamat
:
Jalan Ampera Komplek Villa Mutiara Mas 2 No A7, Pontianak Selatan, Kota Pontianak, Kalimantan Barat
No Telepon
:
085248463594
Riawayat Pendidikan : 2002-2008
:
SDN No 26 SP X Kumpang Bis
2008-2011
:
SMP PGRI 07 SP V Padak
2011-2014
:
SMK Amaliyah Sekadau
2014-2018
:
STMIK Widya Dharma Pontianak
Pontianak, Juli 2018
Oktavius Ali
Edited with the trial version of Foxit Advanced PDF Editor
Lampiran 1
To remove this notice, visit: www.foxitsoftware.com/shopping
LANGKAH PENGUJIAN PADA PENGUJIAN BLACKBOX SISTEM INFORMASI GEOGRAFIS LOKASI BENGKEL MOTOR RESMI BERBASIS WEB DI KOTA PONTIANAK
Nama Penguji
:
Jenis Pengujian
:
Kelas uji Login
Form tambah data operator
Form tambah data bengkel
Form kirim pesan
Butir uji Masukan email dan password anda Masukan isian pada form tambah data operator dan kosongkan salah satu isian form Masukan isian pada form tambah data operator dan isi dengan lengkap tampa mengosongkan salah satu isan form Masukan isian pada form data bengkel dan isi dengan lengkap Masukan isian pada form data bengkel dan kosongkan bebrapa isian form Masukan secara lengkap isian form pada form kirim pesan dan klik tombol kirim Kosongkan isian pada form kirim pesan dan klik tombol kirim
Jenis pengujian Blackbox
Blackbox
Blackbox
Blackbox
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
Lampiranwww.foxitsoftware.com/shopping 2
LEMBAR CATATAN PENGUJIAN BLACK BOX
KELAS UJI Form Login
Form tambah data operator
Form tambah data bengkel
Form kirim pesan
HASIL PENGAMATAN
Edited with the trial version of Foxit Advanced PDF Editor To remove this notice, visit:
Lampiranwww.foxitsoftware.com/shopping 3
Lembar hasil pengujian blackbox pada sistem informasi geografis lokasi bengkel motor resmi berbasis web di Kota Pontianak Tanggal Laporan : 28 Juni 2018
No
Nama Penguji
1 2 3 4 5 6 7 8 9 10
Adi Anca Doni Adiputra Emi Kalista Nikolanus Nina Sari Mona Paskalis Bernado Rahmanudin Ricky Wiwik Ika Putri
Jenis Pengujian Blackbox Blackbox Blackbox Blackbox Blackbox Blackbox Blackbox Blackbox Blackbox Blackbox
Jumlah kelas uji 4 4 4 4 4 4 4 4 4 4
Jumlah butir uji 7 7 7 7 7 7 7 7 7 7
Tanggal pengujian 23 Juni 2018 23 Juni 2018 23 Juni 2018 24 Juni 2018 24 Juni 2018 26 Juni 2018 26 Juni 2018 26 Juni 2018 26 Juni 2018 26 Juni 2018
Hasil pengujian Valid Valid Valid Valid Valid Valid Valid Valid Valid Valid