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 Mulai

Menginputkan Menginputkan data data rute rute

Melakukan perhitungan jarak : d = Math.acos( Math.sin(φ1)*Math.sin(φ2) + Math.cos(φ1)*Math.cos(φ2) * Math.cos(Δλ) ) * R

Nilai Nilai jarak jarak

Selesai 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

Konten Admin 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

Phase

Informasi Lokasi biro

Gambar III.4. Activity Diagram Melihat Peta

2.

Activity Diagram Mengolah Data Tanggapan Aktvitas proses mengolah data Tanggapan diterangkan dalam langkah-

langkah 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

Hapus Data

tidak

Konfimrasi Penghapusan

Memilih data

Menghapus Data

Phase

Ya

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

Phase

Berhasil

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

Konfimrasi Penghapusan

Memilih data

Menghapus Data

Phase

Ya

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

Konfimrasi Penghapusan

Memilih data

Menghapus Data

Phase

Ya

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 User

Form Peta

Proses

Proses

Main form Click login() Tampilkan peta ()

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 Website

login Form Login

Proses Proses Login

sistem Tabel admin

Click login() Isi nama dan password ()

Click Login Valid () inValid ()

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 Website

FormSistem Lokasi biro

Proses Proses

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

Sistem Form Konten

Proses 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 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

Informasi biro percetakan

3.6018861,98.4849389

1

Percetakan Vitri

0617654321

Jl. RA. Kartini No. 14 Binjai

lokasi/vitri.JPG

2

Fantasi Reklame

0617654321

Jl. Jamin Ginting Binjai

lokasi/fantasi.JPG

3.5896694,98.4914694

3

Mirza Grafika

0617654321

Jl. Candra Kirana Binjai

lokasi/mirza.JPG

3.5939039,98.495105

4

Angga Avista

0617654321

Jl. Gatsu No.225 Binjai Barat

lokasi/angga_avista.JPG

3.6057680,98.475343

5

Windy Graphic Adv

0617654321

Jl. T. Amir Hamzah No.27 Binjai

lokasi/windy_graphic.JPG

3.6175463,98.499118

6

Moba Percetakan

0617654321

Jl. T. Amir Hamzah No.86 Binjai

lokasi/moba.JPG

3.6291531,98.509847

7

Mandiri Advertising

0617654321

Jl. T. Amir Hamzah No. 23 Binjai

lokasi/mandiri.JPG

3.6246560,98.505804

8

Duta Reklame

0617654321

Jl. Jend Sudirman Binjai

lokasi/dutareklame.JPG

3.6052112,98.486437

9

Radio Snada FM

0617654321

Jl. Kuala Binjai

lokasi/IMG_0368.JPG

3.5886999,98.482081

10

Radio Moms 99

0617654321

Jl.Teluk Betung No.2 Rambung Timur Binjai

lokasi/radio_moms_99.JPG

3.5900920,98.493024

43

11

Radio Yudha FM

0617654321

Jl.Sisingamaraja 101 Perjuangan Binjai

lokasi/ijunhafm.JPG

3.6129849,98.508195

12

Radio Pesona Cipta Swara

0617654321

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 1

Percetakan Vitri

0617654321

Alamat

Gambar

Keterangan

Koordinat

Jl. RA. Kartini No. 14 Binjai

lokasi/vitri.JPG

Informasi biro percetakan

3.6018861,98.4849389

2

Fantasi Reklame

0617654321

Jl. Jamin Ginting Binjai

3

Mirza Grafika

0617654321

Jl. Candra Kirana Binjai

4

Angga Avista

0617654321

Jl. Gatsu No.225 Binjai Barat

5

Windy Graphic Adv

0617654321

Jl. T. Amir Hamzah No.27 Binjai

6

Moba Percetakan

0617654321

Jl. T. Amir Hamzah No.86 Binjai

7

Mandiri Advertising

0617654321

Jl. T. Amir Hamzah No. 23 Binjai

lokasi/fantasi.JPG

lokasi/mirza.JPG

lokasi/angga_avista.JPG

lokasi/windy_graphic.JPG

lokasi/moba.JPG

lokasi/mandiri.JPG

Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan

3.5896694,98.4914694

3.5939039,98.495105

3.6057680,98.475343

3.6175463,98.499118

3.6291531,98.509847

3.6246560,98.505804

44

8

9

10

Duta Reklame

Radio Snada FM

Radio Moms 99

0617654321

Jl. Jend Sudirman Binjai

0617654321

Jl. Kuala Binjai

0617654321

Jl.Teluk Betung No.2 Rambung Timur Binjai

lokasi/dutareklame.JPG

lokasi/IMG_0368.JPG

lokasi/radio_moms_99.JPG

11

Radio Yudha FM

0617654321

Jl.Sisingamaraja 101 Perjuangan Binjai

12

Radio Pesona Cipta Swara

0617654321

Jl. Masjid Baiturrahman No.8 Binjai

lokasi/ijunhafm.JPG

lokasi/rpc105.4fm.JPG

Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan Informasi biro percetakan

3.6052112,98.486437

3.5886999,98.482081

3.5900920,98.493024

3.6129849,98.508195

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 1 2

name Percetakan Vitri Fantasi Reklame

type image/jpeg image/jpeg

size 29456 31632

content [BLOB - 28,8 KB] [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 : Tabel III.4. Rancangan Tabel Admin Nama Database

astriwidya_biro

Nama Tabel

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 : Tabel III.5. Rancangan Tabel Artikel Nama Database

astriwidya_biro

Nama Tabel

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: Tabel III.6. Rancangan Tabel Artikel_komentar Nama Database

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: Tabel III.7. Rancangan Tabel Biro Nama Database

astriwidya_biro

Nama Tabel

Biro

No 1.

Nama Field Kode_biro

Tipe Data int(5)

Boleh Kosong Tidak

Kunci 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: Tabel III.8. Rancangan Tabel Testimonial Nama Database

astriwidya_biro

Nama Tabel

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 :

53

Tanggapan Nama Anda : Email : Keterangan :

Simpan

Reset

Text area

Sistem Informasi Geografis biro Hak Cipta © 2016 - All Right Reserved Design By Astriwidya

Gambar III.19. Desain Form Beri Tanggapan