BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Tahap analisis sistem yang berjalan in bertujuan untuk mencari informasi mengenai masalah yang ada guna mendapatkan bahan evaluasi untuk pengembangan pada sistem yang akan dirancang, evaluasi pada masalah yang ada adalah : 3. Belum terdapat informasi jarak rute menuju lokasi biro periklanan dan radio di kota Binjai yang cepat akurat dan dapat diakses oleh siapa saja, dimana saja, kapan saja tanpa mengenal jarak dan waktu. 4. Berdasarkan metode Spherical Law Of Cosines untuk menghitung jarak geodetik antara dua titik dipermukaan bumi. Adapun pemecahan masalah yang diusulkan oleh penulis adalah sebagai berikut : 5. Merancang suatu sistem yang dapat mempermudah penyebaran informasi jarak rute menuju lokasi biro periklanan dan radio di kota Binjai. 6. Membangun sebuah sistem yang berfungsi sebagai penyebaran informasi lokasi biro periklanan dan radio agar informasi tidak hanya didapatkan melalui selembaran brosur saja melainkan melalui sebuah sistem yang dapat memberikan banyak informasi secara mudah dan nyaman bagi konsumen. 7. Merancang dan membangun sebuah sistem dengan media penyimpanan data lokasi biro periklanan dan radio untuk memberikan informasi lokasi-lokasi jarak rute yang terdekat. 25

26 8. Memberikan usulan serta solusi kepada biro periklanan dan radio sebagai media untuk menginformasikan daerah yang tersebar di Kota Binjai. III.2. Penerapan Spherical Law Of Cosines Teorema Haversine Formula adalah sebuah persamaan yang penting dalam bidang navigasi, untuk mencari jarak busur antara dua titik pada bola dari longitude dan latitude. Ini merupakan bentuk persamaan khusus dari trigonometri bola, law of haversines, mencari hubungan sisi dan sudut pada segitiga dalam bidang bola. Persamaan Spherical law of cosines sebagai berikut : d = Math.acos( Math.sin(φ1)*Math.sin(φ2) + Math.cos(φ1)*Math.cos(φ2) * Math.cos(Δλ) ) * R Dimana a,b,c ialah jarak yang bersatuan radian/sudut karena berada dalam bidang bola, yang bisa kita korelasikan dengan persamaan busur (M. Rofiq ; 2014 : 55). III.2.1. Flowchart Flowchart adalah adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses (instruksi) dengan proses lainnya dalam suatu program.

27 Mulai Menginputkan data rute Melakukan perhitungan jarak : d = Math.acos( Math.sin(φ1)*Math.sin(φ2) + Math.cos(φ1)*Math.cos(φ2) * Math.cos(Δλ) ) * R Nilai jarak Selesai Gambar III.1. Flowchart Perhitungan Spherical law of cosines III.2.2. Studi Kasus Metode Spherical Law of Cosines Koordinat Rute [ (3.60842,98.4977) (3.60845,98.49842) (3.60847,98.49937) ] k1 = [3.60842,98.4977] k2 = [3.60845,98.49842] k3 = [3.60847,98.49937] [3.60847, 98.49937] k1=[k1[0] * Math.PI / 180, k1[1] * Math.PI / 180] [0.06297880979481378, 1.7191091706416184]

28 k2=[k2[0] * Math.PI / 180, k2[1] * Math.PI / 180] [0.06297933339358938, 1.7191217370122331] k3=[k3[0] * Math.PI / 180, k3[1] * Math.PI / 180] [0.06297968245943977, 1.7191383176401271] // Cari delta delta = k2[1]- k1[1] 0.000012566370614752742 d = Math.acos(Math.sin(k1[0]) * Math.sin(k2[0]) + Math.cos(k1[0]) * Math.cos(k2[0] ) * Math.cos(delta)) * 6371.009 0.07997131119648675 jarak_k1_k2 = d 0.07997131119648675 delta = k3[1]- k2[1] 0.00001658062789400283 d = Math.acos(Math.sin(k2[0]) * Math.sin(k3[0]) + Math.cos(k2[0]) * Math.cos(k3[0] ) * Math.cos(delta)) * 6371.009 0.10544937893717174 jarak_k2_k3 = d 0.10544937893717174 jarak_total = jarak_k1_k2 + jarak_k2_k3 0.18542069013365847

29 III.3. Desain Sistem Desain sistem secara global menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Class Diagram, Activity Diagram dan Sequence Diagram. III.3.1. Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.2 : Sistem Informasi Geografis Menghitung Jarak Rute Menuju Lokasi Biro Periklanan Dan Radio Di Kota Binjai Home Peta Biro Tanggapan Pengunjung Admin Konten Tentang Login Olah Data <extends> Data Biro <extends> Konten Logout Gambar III.2. Use Case Diagram Sistem Geografis Lokasi Biro Periklanan Dan Radio Di kota Binjai

30 III.3.2. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.3 : Gambar III.3. Class Diagram Sistem Informasi Geografis Lokasi Biro Periklanan Dan Radio III.3.3. Activity Diagram Bisnis proses yang telah digambarkan pada use case diagram di atas dijabarkan dengan activity diagram : 1. Activity Diagram Melihat Peta Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari kegiatan melihat panel peta kemudian mencari Artikel Lokasi Biro Periklanan Dan Radio, selanjutnya menekan tombol atau link yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.4 :

31 Melihat Peta Admin Sistem Buka Form Peta Tampilan Form Peta Click salah satu marka pada peta Informasi Lokasi biro Click cari lokasi Informasi Lokasi biro Phase Gambar III.4. Activity Diagram Melihat Peta 2. Activity Diagram Mengolah Data Tanggapan Aktvitas proses mengolah data Tanggapan diterangkan dalam langkahlangkah state yang ditunjukkan pada gambar III.5 :

32 Data tanggapan Admin Sistem Memilih aksi pada form Menu Click Form tanggapan Form tanggapan Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data tidak Hapus Data Memilih data Konfimrasi Penghapusan Ya Menghapus Data Phase Gambar III.5. Activity Diagram Mengolah Data Tanggapan 3. Activity Diagram Login Administrator Website Aktvitas proses login admin diterangkan dalam langkah-langkah state, dimulai dari memasukkan username, memasukkan password, jika profil valid

33 maka sistem akan mengaktifkan menu administrator, sedangkan jika tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.6 : Login admin Admin Sistem Buka Aplikasi Login Isi Username Gagal Isi Password Click Login Berhasil Phase Gambar III.6. Activity Diagram Login Admin 4. Activity Diagram Mengolah Data Lokasi Biro Periklanan Dan Radio Aktivitas proses mengolah data Lokasi Biro Periklanan Dan Radio diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.7 :

34 Data Lokasi Admin Sistem Memilih aksi pada form Menu Click Form lokasi Form lokasi Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data Ketik kata kunci Mencari data Tekan cari data tidak Memilih Data Edit Data Mengubah Data Menyimpan Data Hapus Data Memilih data Konfimrasi Penghapusan Ya Menghapus Data Phase Gambar III.7. Activity Diagram Mengolah Data Lokasi Biro Periklanan Dan Radio

35 5. Activity Diagram Mengolah Data Konten Aktvitas proses mengolah data konten diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.8 :

36 Data konten Admin Sistem Memilih aksi pada form Menu Click Form konten Form konten Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data Ketik kata kunci Mencari data Tekan cari data tidak Memilih Data Edit Data Mengubah Data Menyimpan Data Hapus Data Memilih data Konfimrasi Penghapusan Ya Menghapus Data Phase Gambar III.8. Activity Diagram Mengolah Data Konten

37 III.3.4. Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut: 1. Sequence Diagram pada Form Peta Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada gambar III.9 : User Form Peta Proses User Click login() Main form Tampilkan peta () Proses Click Salah satu lokasi () Informasi lokasi () Click cari lokasi () Informasi lokasi () Gambar III.9. Sequence Diagram Form Peta 2. Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada gambar III.10 :

38 Administrator admin login Proses sistem Website Form Login Proses Login Tabel admin Click login() Isi nama dan password () Click Login invalid () Valid () Reset () Gambar III.10. Sequence Diagram Form Login 3. Sequence Diagram pada Form Data Biro Periklanan Dan Radio Serangkaian kegiatan saat terjadi event pada form Biro Periklanan Dan Radio dapat dilihat pada gambar III.11 :

39 Administrator admin Form Sistem Lokasi biro Proses Website Click data biro () Tambah data () Cari data () Edit data () Hapus data () Batal data () Gambar III.11. Sequence Diagram Form Lokasi Biro Periklanan Dan Radio 4. Sequence Diagram pada Form Data Konten Serangkaian kegiatan saat terjadi event pada form data konten dapat dilihat pada gambar III.12 :

40 Administrator admin Website Form Sistem Konten Proses Click konten () Tambah data () Cari data () Edit data () Hapus data () Batal data () Gambar III.12. Sequence Diagram Form Data Konten 5. Sequence Diagram pada Form Data Tanggapan Serangkaian kegiatan saat terjadi event pada form Tanggapan dapat dilihat pada gambar III.13 :

41 admin User Form Sistem tanggapan Proses Click tanggapan () kirim data () Hapus data () Reset data () Gambar III.13. Sequence Diagram Form Tanggapan III.4. Desain Basis Data Desain basis data terdiri dari tahap merancang struktur tabel dan normalisasi data. III.4.1. Normalisasi Data Tahap normalisasi ini bertujuan untuk menghilangkan masalah berupa ketidak konsistenan apabila dilakukannya proses manipulasi data seperti penghapusan, perubahan dan penambahan data sehingga data tidak ambigu. Berikut ini adalah tahapan normalisasinya:

42 1. Bentuk Tidak Normal Bentuk tidak normal dari data pembelian ditandai dengan adanya baris yang satu atau lebih atributnya tidak terisi, bentuk ini dapat dilihat pada tabel III.1 dibawah ini : Tabel III.1. Data Lokasi Tidak Normal Kode_biro Nama_biro Telepon Alamat Gambar Keterangan Koordinat 1 Percetakan Vitri Jl. RA. Kartini No. 14 Binjai lokasi/vitri.jpg Informasi biro percetakan 3.6018861,98.4849389 2 Fantasi Reklame Jl. Jamin Ginting Binjai lokasi/fantasi.jpg 3.5896694,98.4914694 3 Mirza Grafika Jl. Candra Kirana Binjai lokasi/mirza.jpg 3.5939039,98.495105 4 Angga Avista Jl. Gatsu No.225 Binjai Barat lokasi/angga_avista.jpg 3.6057680,98.475343 5 Windy Graphic Adv Jl. T. Amir Hamzah No.27 Binjai lokasi/windy_graphic.jpg 3.6175463,98.499118 6 Moba Percetakan Jl. T. Amir Hamzah No.86 Binjai lokasi/moba.jpg 3.6291531,98.509847 7 Mandiri Advertising Jl. T. Amir Hamzah No. 23 Binjai lokasi/mandiri.jpg 3.6246560,98.505804 8 Duta Reklame Jl. Jend Sudirman Binjai lokasi/dutareklame.jpg 3.6052112,98.486437 9 Radio Snada FM Jl. Kuala Binjai lokasi/img_0368.jpg 3.5886999,98.482081 10 Radio Moms 99 Jl.Teluk Betung No.2 Rambung Timur Binjai lokasi/radio_moms_99.jpg 3.5900920,98.493024

43 11 Radio Yudha FM Jl.Sisingamaraja 101 Perjuangan Binjai lokasi/ijunhafm.jpg 3.6129849,98.508195 12 Radio Pesona Cipta Swara Jl. Masjid Baiturrahman No.8 Binjai lokasi/rpc105.4fm.jpg 3.6327079,98.517349 2. Bentuk Normal Pertama (1NF) Bentuk normal pertama dari data gedung merupakan bentuk tidak normal yang atribut kosongnya diisi sesuai dengan atribut induk dari record-nya, bentuk ini dapat dilihat pada tabel III.2 di bawah ini: Tabel III.2. Data Lokasi 1NF Kode_biro Nama_biro Telepon Alamat Gambar Keterangan Koordinat 1 Percetakan Vitri Jl. RA. Kartini No. 14 Binjai lokasi/vitri.jpg Informasi biro percetakan 3.6018861,98.4849389 2 Fantasi Reklame Jl. Jamin Ginting Binjai lokasi/fantasi.jpg Informasi biro percetakan 3.5896694,98.4914694 3 Mirza Grafika Jl. Candra Kirana Binjai lokasi/mirza.jpg Informasi biro percetakan 3.5939039,98.495105 4 Angga Avista Jl. Gatsu No.225 Binjai Barat lokasi/angga_avista.jpg Informasi biro percetakan 3.6057680,98.475343 5 Windy Graphic Adv Jl. T. Amir Hamzah No.27 Binjai lokasi/windy_graphic.jpg Informasi biro percetakan 3.6175463,98.499118 6 Moba Percetakan Jl. T. Amir Hamzah No.86 Binjai lokasi/moba.jpg Informasi biro percetakan 3.6291531,98.509847 7 Mandiri Advertising Jl. T. Amir Hamzah No. 23 Binjai lokasi/mandiri.jpg Informasi biro percetakan 3.6246560,98.505804

44 8 Duta Reklame Jl. Jend Sudirman Binjai lokasi/dutareklame.jpg Informasi biro percetakan 3.6052112,98.486437 9 Radio Snada FM Jl. Kuala Binjai lokasi/img_0368.jpg Informasi biro percetakan 3.5886999,98.482081 10 Radio Moms 99 Jl.Teluk Betung No.2 Rambung Timur Binjai lokasi/radio_moms_99.jpg Informasi biro percetakan 3.5900920,98.493024 11 Radio Yudha FM Jl.Sisingamaraja 101 Perjuangan Binjai lokasi/ijunhafm.jpg Informasi biro percetakan 3.6129849,98.508195 12 Radio Pesona Cipta Swara Jl. Masjid Baiturrahman No.8 Binjai lokasi/rpc105.4fm.jpg Informasi biro percetakan 3.6327079,98.517349 3. Bentuk Normal Kedua (2NF) Bentuk normal kedua dari data lokasi merupakan bentuk normal pertama, dimana telah dilakukan pemisahan data sehingga tidak adanya ketergantungan parsial. Setiap data memiliki kunci primer untuk membuat relasi antar data, bentuk ini dapat dilihat pada berikut ini : Tabel III.3. Data Gambar 2NF id name type size content 1 Percetakan Vitri image/jpeg 29456 [BLOB - 28,8 KB] 2 Fantasi Reklame image/jpeg 31632 [BLOB - 30,9 KB] III.4.2. Desain Tabel Setelah melakukan tahap normalisasi, maka tahap selanjutnya yang dikerjakan yaitu merancang struktur tabel pada basis data sistem yang akan dibuat, berikut ini merupakan rancangan struktur tabel tersebut :

45 1. Struktur Tabel Admin Tabel admin digunakan untuk menyimpan data Id_User, Username, Password, Nama, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.4 di bawah ini : Nama Database Nama Tabel Tabel III.4. Rancangan Tabel Admin astriwidya_biro Admin No Nama Field Tipe Data Boleh Kosong Kunci 1. Id_User int(11) Tidak Primary Key 2. Username varchar(12) Tidak Unique 3. Password varchar(12) Tidak - 4. Nama varchar(25) Tidak - 2. Struktur Tabel Artikel Tabel artikel digunakan untuk menyimpan data ID_Artikel, Creator, Email, Tanggal, Judul, Isi, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.5 di bawah ini : Nama Database Nama Tabel Tabel III.5. Rancangan Tabel Artikel astriwidya_biro Artikel No Nama Field Tipe Data Boleh Kosong Kunci 1. ID_Artikel int(11) Tidak Primary Key 2. Creator varchar(25) Tidak - 3. Email varchar(25) Tidak - 4. Tanggal Date Tidak - 5. Judul text Tidak -

46 6. Isi text Tidak - 3. Struktur Tabel Artikel_komentar Tabel artikel_komentar digunakan untuk menyimpan data ID_Komentar, ID_Artikel, Komentator, Email, Tanggal, Komentar, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.6 di bawah ini: Nama Database Tabel III.6. Rancangan Tabel Artikel_komentar astriwidya_biro Nama Tabel artikel_komentar No Nama Field Tipe Data Boleh Kosong Kunci 1. ID_Komentar int(11) Tidak Primary Key 2. ID_Artikel int(11) Tidak Foreign Key 3. Komentator varchar(25) Tidak - 4. Email varchar(25) Tidak - 5. Tanggal date Tidak - 6. Komentar text Tidak - 4. Struktur Tabel Biro Tabel biro digunakan untuk menyimpan data Kode_biro, Nama_biro, Telepon, Alamat, Gambar, Keterangan, Koordinat, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.7 di bawah ini: Nama Database Nama Tabel Tabel III.7. Rancangan Tabel Biro astriwidya_biro Biro No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_biro int(5) Tidak Primary Key

47 2. Nama_biro varchar(25) Tidak Unique 3. Telepon varchar(12) Tidak - 4. Alamat Text Tidak - 5. Gambar Longtext Tidak - 6. Keterangan Text Tidak - 7. Koordinat Text Tidak - 5. Struktur Tabel Testimonial Tabel testimonial digunakan untuk menyimpan data ID_Testimonial, Nama_Pengirim, Email, Testimonial, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.8 di bawah ini: Nama Database Nama Tabel Tabel III.8. Rancangan Tabel Testimonial astriwidya_biro testimonial No Nama Field Tipe Data Boleh Kosong Kunci 1. ID_Testimonial int(11) Tidak Primary Key 2. Nama_Pengirim varchar(25) Tidak - 3. Email varchar(25) Tidak - 4. Testimonial text Tidak - III.5. Desain User Interface Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem dan desain input sistem.

48 III.5.1. Desain Output 1. Tampilan Peta Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem : Peta Biro Cari Data Sistem Informasi Geografis biro Hak Cipta 2016 - All Right Reserved Design By Astriwidya Gambar III.14. Desain Tampilan Peta 2. Desain Form Laporan Tanggapan Desain form laporan tanggapan dapat dilihat pada gambar III.15 :

49 Laporan Tanggapan Sistem Sistem Informasi Geografis biro Hak Cipta 2016 - All Right Reserved Design By Astriwidya Gambar III.15. Desain Form Laporan Tanggapan III.5.2. Desain Input Berikut ini adalah rancangan atau desain input sebagai antarmuka pengguna: 1. Desain Form Login Desain form login dapat dilihat pada gambar III.16 :

50 Login Sistem Username : Password : Login Reset Sistem Informasi Geografis biro Hak Cipta 2016 - All Right Reserved Design By Astriwidya Gambar III.16. Desain Form Login 2. Desain Form Data Lokasi Biro Periklanan Dan Radio Desain form Data Lokasi Biro Periklanan Dan Radio dapat dilihat pada gambar III.17 :

51 Data Biro Nama : Telepon: Koordinat : Alamat Lokasi : Gambar : Choose Keterangan : Simpan Reset Kata kunci : Cari Data Informasi Lokasi Edit Hapus Sistem Informasi Geografis biro Hak Cipta 2016 - All Right Reserved Design By Astriwidya Gambar III.17. Desain Form Lokasi Biro Periklanan Dan Radio 3. Desain Form Data Konten Desain form Data Konten dapat dilihat pada gambar III.18 :

52 Berita textfiel textarea Simpan Reset Kata Kunci : Cari Data Informasi Berita Edit Hapus Sistem Informasi Geografis biro Hak Cipta 2016 - All Right Reserved Design By Astriwidya Gambar III.18. Desain Form Data Konten 4. Desain Form Data Beri Tanggapan Desain form Data beri tanggapan dapat dilihat pada gambar III.19 :