BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISIS DAN DESAIN SISTEM

III.1. Analisis Masalah Tahap analisis sistem yang berjalan ini bertujuan untuk mencari informasi mengenai

sistem

yang ada

guna

mendapatkan

bahan

evaluasi

untuk

pengembangan pada sistem yang akan dirancang, evaluasi pada sistem yang ada adalah : 1. Belum adanya sistem informasi geografis lokasi rias pengantin khususnya di kota Medan sehingga masyarakat kesulitan menemukan lokasi rias pengantin saat diperlukan. 2. Informasi mengenai lokasi rias pengantin tidak efisien dan efektif dikarenakan informasi hanya didapatkan dari pihak rias pengantin dalam bentuk tanda pengenal rias pengantin. Dengan adanya bahan evaluasi sistem yang ada, maka diharapkan agar pembangunan aplikasi yang baru akan dilakukan dapat terbentuk dengan lebih baik.

III.2. Desain Sistem Desain sistem secara umum menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Class Diagram, Activity Diagram, dan Sequence Diagram.

27

28

III.2.1. Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.1 :

Sistem Informasi Geografis Lokasi Penyedia Jasa Rias Pengantin di Kota Medan Berbasis Web

Konten Website

Beranda

Lokasi rias pengantin

Peta lokasi rias pengantin

<>

Login admin

<>

<>

User

<>

Mengolah Biaya Rias Pengantin

Buku Tamu

Logout

Pengaturan

Gambar III.1. Usecase Diagram Sistem

III.2.2. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.2 :

29

admin

Id_Admin Username Password Nama

jalan

int(11) 1 varchar(12) varchar(12) varchar(25)

0 Kode_Jalan Nama_Jalan Koordinat

komentar

Kode_Komentar Nama Email Tanggal Pesan

int(5) varchar(30) text

+ tambah + reset + edit + hapus

+login +reset

+ tambah + reset + hapus

1

1

0

* lokasi

konten Kode_Konten Tanggal Terbit Judul Isi Thumbnail

int(5) varchar(25) varchar(25) datetime Text

biaya Kode_lokasi Nama_lokasi Informasi Alamat Gambar Lon Lat

int(11) Timestamp varchar(6) Text Text Text

int(5) varchar(25) 1 Text Text Text Double Double

Kode_Biaya Kode_Lokasi * Nama_biaya Keterangan Harga



int(5) int(5) varchar(25) text int(11)

+ tambah + reset + hapus

Gambar III.2. Class Diagram Sistem

III.2.3. Activity Diagram Bisnis proses yang telah digambarkan pada usecase diagram diatas dijabarkan dengan activity diagram :

1. Activity Diagram Peta Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari kegiatan melihat peta kemudian menekan tombol atau link yang ada pada peta dan yang terakhir melihat informasi pada peta yang ditunjukkan pada gambar III.3 :

30

Melihat Peta User

Sistem

Buka Form Peta

Tampilan Form Peta

Click salah satu marka pada peta

Informasi Biaya Rias Pengantin

Phase

Click button biaya

Informasi Rias Pengantin

Gambar III.3. Activity Diagram Peta

2. Activity Diagram Data Buku Tamu Serangkaian kerja melakukan pengolahan data buku tamu dapat terlihat seperti pada gambar III.4 berikut :

31

Form Buku Tamu User

Sistem

Beranda

Buku Tamu

Isi data komentar

Kirim

Menyimpan data

Phase

Menampilkan informasi

Gambar III.4. Activity Diagram Data Buku Tamu

32

3.

Activity Diagram Login Admin Aktvitas proses login admin diterangkan dalam langkah-langkah state,

dimulai dari memasukkan username, memasukkan password, jika profil valid maka sistem akan mengaktifkan menu administrator, sedangkan jika tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.5:

Login admin Admin

Sistem

Buka Aplikasi

Login

Isi Username Gagal

Isi Password

Click Login

Phase

Berhasil

Gambar III.5. Activity Diagram Login

33

4.

Activity Diagram Data Lokasi Rias Pengantin Serangkaian kerja melakukan pengolahan data lokasi rias pengantin dapat

terlihat seperti pada gambar III.6 berikut : Data Lokasi Rias Pengantin Admin

Sistem

Memilih Aksi Pada Form Menu

Click Form Lokasi Rias Pengantin

Mengisi Data

tidak

Form Lokasi Rias Pengantin

Tambah Data

Menekan tombol simpan

Menyimpan data

Memilih Data

Edit Data

Mengubah Data

Menyimpan Data

Hapus Data

Konfirmasi Penghapusan

Memilih data

Menghapus Data

Phase

Ya

Gambar III.6. Activity Diagram Data Lokasi Rias Pengantin

34

8.

Activity Diagram Data Biaya Rias Pengantin Serangkaian kerja melakukan pengolahan data biaya rias pengantin dapat

terlihat seperti pada gambar III.7 berikut :

Data Biaya Rias Pengantin Admin

Sistem

Memilih Aksi Pada Form Menu

Click Data Biaya Pada Form Lokasi

Mengisi Data

tidak

Data Biaya Pada Form Lokasi

Tambah Data


Menyimpan data

Memilih Data

Edit Data

Mengubah Data

Menyimpan Data

Hapus Data


Memilih data

Menghapus Data

Phase

Ya

Gambar III.7. Activity Diagram Data Biaya Rias Pengantin

35

5.

Activity Diagram Data Konten Website Serangkaian kerja melakukan pengolahan data konten website dapat terlihat

seperti pada gambar III.8 berikut : Data Konten Website Admin

Sistem

Memilih aksi pada form Menu

Click Form Konten Website

Mengisi Data

tidak

Form Konten Website

Tambah Data


Menyimpan data

Memilih Data

Edit Data

Mengubah Data

Menyimpan Data

Hapus Data


Memilih data

Menghapus Data

Phase

Ya

Gambar III.8. Activity Diagram Data Konten Website

36

6.

Activity Diagram Data Pengaturan Serangkaian kerja melakukan pengolahan data pengaturan dapat terlihat

seperti pada gambar III.9 berikut : Data Pengaturan

Admin

Sistem


Click Form Pengaturan

Form Pengaturan

Mengisi data username

Mengisi data nama administrator

Mengisi password lama

Mengisi data password baru

Menyimpan data

Phase

Click Ganti

Gambar III.9. Activity Diagram Data Pengaturan

37

3. Activity Diagram Logout Aktvitas proses keluar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.10 :

Data logout Admin

Sistem


Click Form logout

Enable menu login

Phase

Form user

Disable menu admin

Gambar III.10 Activity Diagram Logout

III.2.4. Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut:

38

1.

Sequence Diagram Peta Serangkaian kerja melihat peta dapat terlihat seperti pada gambar III.11

berikut:

user

Beranda

From Peta

Click Peta RIas Pengantin

Informasi Lokasi ()

Click cari lokasi peta

Informasi Lokasi ()

Clik Button Biaya

Informasi Biaya Rias Pengantin

Close()

Gambar III.11. Sequence Diagram Peta

39

2.

Sequence Diagram Data Buku Tamu Serangkaian kerja melakukan pengolahan data buku tamu dapat terlihat

seperti pada gambar III.12 berikut :

User

Form Buku Tamu

proses

komentar

Baru ()

kirim data ()

hapus data ()

Koneksi Database ()

Koneksi Database ()

Reset ()

Gambar III.12. Sequence Diagram Data Buku Tamu

3.

Sequence Diagram Login Admin Serangkaian kerja melakukan login admin dapat terlihat seperti pada gambar

III.13 berikut :

40

admin

Proses

Halaman Admin

Admin

From Login

Isi user name dan password ()

Click login ()

Koneksi Database ()

Validasi data ()

Berhasil ()

Gagal ()

Gambar III.13. Sequence Diagram Login

4.

Sequence Diagram Data Lokasi Rias Pengantin Serangkaian kerja melakukan pengolahan data lokasi rias pengantin dapat


41

Admin

Form Lokasi

Proses

Lokasi

Baru ()

tambah data ()

Koneksi Database ()

ubah data ()

Koneksi Database ()

hapus data ()

Koneksi Database ()

Batal ()

Gambar III.14. Sequence Diagram Data Lokasi Rias Pengantin

5.

Sequence Diagram Data Biaya Rias Pengantin Serangkaian kerja melakukan pengolahan data biaya rias pengantin dapat


42

Admin

Form Lokasi

Form Biaya

Proses

Biaya

tampilkan fom ()

menu () click form data biaya tambah data ()

koneksi database ()

ubah data ()

koneksi database ()

hapus data ()

koneksi database ()

close form ()

Gambar III.15. Sequence Diagram Data Biaya Rias Pengantin

6.

Sequence Diagram Data Konten Website Serangkaian kerja melakukan pengolahan data konten website dapat terlihat


43

admin

Form Konten Website

proses

konten

Baru ()

tambah data ()

Koneksi Database ()

ubah data ()

Koneksi Database ()

hapus data ()

Koneksi Database ()

Batal ()

Gambar III.16. Sequence Diagram Data Konten Website

7.

Sequence Diagram Data Pengaturan Serangkaian kerja melakukan pengolahan data pengaturan dapat terlihat


44

Admin

Form Pengaturan

Proses

Edit data ()

Admin

Koneksi Database ()

Reset ()

Gambar III.17. Sequence Diagram Data Pengaturan

8. Sequence Diagram pada Saat Logout Ditekan Serangkaian kegiatan saat terjadi event pada form proses logout dapat dilihat pada gambar III.18 :

45

logoutButton

Main actionPerformed()

logoutButton.disable() loginButton.enable() LokasiRiasPengantin.disable() menuDataMarka.disable() menuOlahArtikel.disable() menuProfilAdministrator.disable()

Gambar III.18. Sequence Diagram Form Proses Logout

III.3. Desain User Interface Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem, desain input sistem, dan desain database. a. Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem dapat dilihat pada gambar III.19 :

46

Rias Pengantin Cari Lokasi

Nama Lokasi : Beranda Peta Lokasi Buku Tamu Login

Tampilan Peta

Hak Cipta © 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin

Gambar III.19. Desain Form Peta

b. Desain Input Desain input yang akan dirancang pada sistem dapat dilihat pada gambar berikut : 1. Desain Form Data Buku Tamu Desain Form untuk melakukan pengolahan data buku tamu dapat terlihat seperti pada gambar III.20 berikut :

47

Rias Pengantin Beranda Peta Lokasi Buku Tamu Login

Isi Buku Tamu Nama Email Pesan

Kirim

Reset


Gambar III.20. Desain Form Data Buku Tamu

1.

Desain Form Login Admin Desain Form untuk melakukan login admin dapat terlihat seperti pada gambar

III.21 berikut :

48

Rias Pengantin Beranda Peta Lokasi Buku Tamu Login

Login Admin User name Password Login

Reset


Gambar III.21. Desain Form Login

2.

Desain Form Data Lokasi Rias Pengantin Desain Form untuk melakukan pengolahan data lokasi rias pengantin dapat


49

Rias Pengantin Lokasi Rias Pengantin

Beranda Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout

Rias Pengantin

Informasi Lokasi

Alamat Gambar

Pilih File

Tidak ada file yang dipilih

Koordinat

: tambah

Reset

Nama Lokasi

No

Kode Lokasi

Gambar Nama Lokasi Rias Pengantin

Cari data

Informasi

Alamat Lengkap

Koordinat

Lon

Lat


Gambar III.22. Desain Form Data Lokasi Rias Pengantin

Aksi

50

3.

Desain Form Data Biaya Rias Pengantin Desain Form untuk melakukan pengolahan data biaya dapat terlihat seperti

pada gambar III.23 berikut :

Rias Pengantin Beranda Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout

Biaya Rias Pengantin Nama Lokasi

Nama Biaya

Keterangan

Harga tambah

Reset

Biaya

No

Cari data

Nama Biaya

Keterangan

Harga

Aksi


Gambar III.23. Desain Form Data Biaya Rias Pengantin

51

4.

Desain Form Data Konten Website Desain Form untuk melakukan pengolahan data konten website dapat terlihat




Gambar III.24. Desain Form Data Konten Website 5.

Desain Form Data Pengaturan Desain Form untuk melakukan pengolahan data pengaturan dapat terlihat


52


Hak Cipta © 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin Gambar III.25. Desain Form Data Pengaturan

III.4. Desain Basis Data Desain basis data terdiri dari tahap merancang melakukan normalisasi tabel dan merancang struktur tabel.

III.4.1. Normalisasi Data Salah satu topik yang cukup kompleks dalam dunia manajemen database adalah proses untuk menormalisasi tabel-tabel dalam database relasional. Menghindari kemungkinan kehilangan data secara tidak disengaja/tidak diketahui.

53

Alasan utama dari normalisasi database minimal sampai dengan bentuk normal ketiga adalah menghilangkan kemungkinan adanya “insertion anomalies”, “deletion anomalies”, dan “update anomalies”. Tipe-tipe kesalahan tersebut sangat mungkin terjadi pada database yang tidak normal. 1.

2.

Bentuk Tidak Normal (UNF/Unnormalized Form) Id_Admin

Nama_Jalan

Judul

Username

Koordinat

Isi

Password

Kode_Komentar

Thumnail

Nama

Nama

Kode_Lokasi

Kode_Biaya

Email

Nama_Lokasi

Kode_Lokasi

Tanggal

Informasi

Nama_Biaya

Pesan

Alamat

Keterangan

Kode_Konten

Gambar

Harga

Tanggal

Lon

Kode_Jalan

Terbit

Lat

Bentuk Normal Pertama (1NF/First Normal Form)

Id_Admin*

Nama_Jalan

Judul

Username

Koordinat

Isi

Password

Kode_Komentar*

Thumnail

Nama

Nama

Kode_Lokasi*

Kode_Biaya*

Email

Nama_Lokasi

Kode_Lokasi

Tanggal

Informasi

Nama_Biaya

Pesan

Alamat

Keterangan

Kode_Konten*

Gambar

Harga

Tanggal

Lon

Kode_Jalan*

Terbit

Lat

54

3.

Bentuk Normal Kedua (2NF/ Second Normal Form) a. Tabel Normal Kedua Admin

Id_Admin*

Username

Password

Nama

b. Tabel Normal Kedua Biaya

Kode_Biaya*

Kode_Lokasi** Nama_Biaya Keterangan

Harga

c. Tabel Normal Kedua Jalan

Kode_Jalan*

Nama_Jalan

Koordinat

d. Tabel Normal Kedua Komentar

Kode_Komentar*

Nama

Email

Tanggal

Terbit

Judul

Informasi

Alamat

Pesan

e. Tabel Normal Kedua Konten

Kode_Konten*

f.

Tanggal

Isi

Thumbnail

Tabel Normal Kedua Lokasi

Kode_Lokasi*

Nama_Lokasi

Gambar

Lon

Lat

55

4.

Bentuk Normal Ketiga (3NF/ Third Normal Form) a.

Tabel Normal Ketiga Admin

Id_Admin*

b.

Kode_Lokasi** Nama_Biaya Keterangan

Nama_Jalan

Koordinat

Tabel Normal Ketiga Konten

Kode_Konten*

e.

Harga

Tabel Normal Ketiga Jalan

Kode_Jalan*

d.

Password

Tabel Normal Ketiga Biaya

Kode_Biaya*

c.

Username

Tanggal

Terbit

Judul

Informasi

Alamat

Isi

Thumbnail

Tabel Normal Ketiga Lokasi

Kode_Lokasi*

Nama_Lokasi

Gambar

Lon

Lat

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:

56

1. Struktur Tabel Admin Tabel user digunakan untuk menyimpan data Id_Admin, Username, Password, Nama, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.1 berikut : Tabel III.1 Rancangan Tabel Admin Nama Database hikmah_riaspengantin Nama Tabel admin No Nama Field Tipe Data Kunci 1. Id_Admin int(11) Primary Key 2. Username varchar(12) Unique 3. Password varchar(12) 4. Nama varchar(25) 2. Struktur Tabel Biaya Tabel user digunakan untuk menyimpan data Kode_biaya, Kode_lokasi, Nama Biaya, Keterangan, Harga, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.2 berikut : Tabel III.2 Rancangan Tabel Biaya Nama Database hikmah_riaspengantin Nama Tabel biaya No Nama Field Tipe Data Kunci 1. Kode_biaya int(5) Primary Key 2. Kode_lokasi int(5) Foreign Key 3. Nama biaya varchar(25) 4. Keterangan Text 5. Harga Int(11) -

3. Struktur Tabel Jalan Tabel jalan digunakan untuk menyimpan data Kode_Jalan, Nama_Jalan, Koordinat, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.3 berikut:

57

Tabel III.3 Rancangan Tabel Jalan Nama Database hikmah_riaspengantin Nama Tabel jalan No Nama Field Tipe Data Kunci 1. Kode_Jalan int(5) Primary Key 2. Nama_Jalan varchar(30) 3. Koordinat text 4. Struktur Tabel Komentar Tabel komentar digunakan untuk menyimpan data Kode_Komentar, Nama, Email, Tanggal, Pesan, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.4 berikut: Tabel III.4 Rancangan Tabel Komentar Nama Database hikmah_riaspengantin Nama Tabel komentar No Nama Field Tipe Data Kunci 1. Kode_Komentar int(5) Primary Key 2. Nama varchar(25) 3. Email varchar(25) 4. Tanggal datetime 5. Pesan Text 5. Struktur Tabel Konten Tabel konten digunakan untuk menyimpan data Kode_Konten, Tanggal, Terbit, Judul, Isi, Thumbnail, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.5 berikut: Tabel III.5 Rancangan Tabel Konten Nama Database hikmah_riaspengantin Nama Tabel Konten No Nama Field Tipe Data Kunci 1. Kode_Konten int(11) Primary Key 2. Tanggal Timestamp 3. Terbit varchar(6) 4. Judul text 5. Isi text 6. Thumbnail text -

58

6. Struktur Tabel Lokasi Tabel lokasi digunakan untuk menyimpan data Kode_lokasi, Nama_lokasi, Informasi, Alamat, Gambar, Lon, Lat, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.6 berikut: Tabel III.6 Rancangan Tabel Lokasi Nama Database hikmah_riaspengantin Nama Tabel Lokasi No Nama Field Tipe Data Kunci 1. Kode_lokasi varchar(5) Primary Key 2. Nama_lokasi varchar(25) 3. Informasi text 4. Alamat text 5. Gambar text 6. Lon double 7. Lat double -

BAB III ANALISIS DAN DESAIN SISTEM

Recommend Documents