BAB III ANALISIS DAN DESAIN SISTEM

(1)

27 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

(2)

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

admin

Login

User Beranda

Peta lokasi rias pengantin Buku Tamu Lokasi rias pengantin Konten Website Pengaturan Logout <include> <include> <include> <<include>> <<include>> <<include>> Mengolah Biaya Rias Pengantin <<include>>

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 :

(3)

Kode_lokasi int(5) Nama_lokasi varchar(25) Informasi Text Alamat Text Gambar Text Lon Double Lat Double lokasi + tambah + reset + edit + hapus Kode_Jalan int(5) Nama_Jalan varchar(30) Koordinat text jalan + tambah + reset + edit + hapus Kode_Komentar int(5) Nama varchar(25) Email varchar(25) Tanggal datetime Pesan Text komentar + tambah + reset + hapus Kode_Konten int(11) Tanggal Timestamp Terbit varchar(6) Judul Text Isi Text Thumbnail Text konten + tambah + reset + edit + hapus Id_Admin int(11) Username varchar(12) Password varchar(12) Nama varchar(25) admin +login +reset Kode_Biaya int(5) Kode_Lokasi int(5) Nama_biaya varchar(25) Keterangan text Harga int(11) biaya + tambah + reset + hapus 1 0 1 0 1 * 1 *

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 :

(4)

Melihat Peta Sistem User P h a se

Buka Form Peta Tampilan Form Peta

Click salah satu marka pada peta Informasi Rias Pengantin

Click button biaya Informasi Biaya 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 :

(5)

Form Buku Tamu Sistem User P h a se Beranda Buku Tamu

Isi data komentar

Kirim Menyimpan data

Menampilkan informasi

(6)

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

Sistem

Admin

P h a s e

Buka Aplikasi Login

Isi Username

Isi Password

Click Login

Gagal

Berhasil

(7)

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

Sistem Admin

P

ha

se

Memilih Aksi Pada Form Menu

Click Form Lokasi Rias Pengantin Form Lokasi Rias Pengantin

Edit Data Memilih Data

Mengubah Data Menyimpan Data Hapus Data

Memilih data Konfirmasi Penghapusan Menghapus Data Ya tidak Tambah Data Mengisi Data

Menekan tombol simpan Menyimpan data

(8)

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

Sistem Admin

Ph

as

e

Memilih Aksi Pada Form Menu

Click Data Biaya Pada Form Lokasi Data Biaya Pada Form Lokasi

Mengubah Data Menyimpan Data

Hapus Data

(9)

5. Activity Diagram Data Konten Website

Serangkaian kerja melakukan pengolahan data konten website dapat terlihat seperti pada gambar III.8 berikut :

Data Konten Website

Sistem Admin

P

ha

se

Memilih aksi pada form Menu

Click Form Konten Website Form Konten Website

Mengubah Data Menyimpan Data

Hapus Data

(10)

6. Activity Diagram Data Pengaturan

Serangkaian kerja melakukan pengolahan data pengaturan dapat terlihat seperti pada gambar III.9 berikut :

Data Pengaturan Sistem Admin P h a se

Memilih aksi pada form Menu

Click Form Pengaturan Form Pengaturan

Mengisi data username

Mengisi data nama administrator

Menyimpan data Mengisi password lama

Mengisi data password baru Click Ganti

(11)

3. Activity Diagram Logout

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

Data logout

Sistem

Admin

P h a s e

Memilih aksi pada form Menu

Click Form logout

Disable menu admin

Enable menu login

Form user

Gambar III.10 Activity Diagram Logout

III.2.4. Sequence Diagram

Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada

(12)

1. Sequence Diagram Peta

Serangkaian kerja melihat peta dapat terlihat seperti pada gambar III.11 berikut:

From Peta user

Beranda

Click Peta RIas Pengantin

Informasi Lokasi ()

Click cari lokasi peta

Clik Button Biaya

Close()

Informasi Lokasi ()

Informasi Biaya Rias Pengantin

(13)

2. Sequence Diagram Data Buku Tamu

Serangkaian kerja melakukan pengolahan data buku tamu dapat terlihat seperti pada gambar III.12 berikut :

komentar

User Form Buku Tamu proses

Baru () kirim data () hapus data () Reset () Koneksi Database () Koneksi Database ()

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 :

(14)

Halaman Admin Admin

Proses From Login

admin

Isi user name dan password () Click login () Validasi data () Berhasil () Gagal () Koneksi Database ()

Gambar III.13. Sequence Diagram Login

4. Sequence Diagram Data Lokasi Rias Pengantin

Serangkaian kerja melakukan pengolahan data lokasi rias pengantin dapat terlihat seperti pada gambar III.14 berikut :

(15)

Lokasi

Admin Form Lokasi Proses

Baru () tambah data () ubah data () hapus data () Batal () Koneksi Database () Koneksi Database () Koneksi Database ()

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 terlihat seperti pada gambar III.15 berikut :

(16)

Form Lokasi Form Biaya _Biaya tampilkan fom () menu () click form data biaya tambah data () Admin koneksi database () hapus data () close form () ubah data () Proses koneksi database () koneksi database ()

Gambar III.15. Sequence Diagram Data Biaya Rias Pengantin

6. Sequence Diagram Data Konten Website

Serangkaian kerja melakukan pengolahan data konten website dapat terlihat seperti pada gambar III.16 berikut :

(17)

konten

admin Form Konten Website proses

Baru () tambah data () ubah data () hapus data () Batal () Koneksi Database () Koneksi Database () Koneksi Database ()

Gambar III.16. Sequence Diagram Data Konten Website

7. Sequence Diagram Data Pengaturan

Serangkaian kerja melakukan pengolahan data pengaturan dapat terlihat seperti pada gambar III.17 berikut :

(18)

Admin Admin Form Pengaturan Proses

Edit data ()

Reset ()

Koneksi Database ()

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 :

(19)

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

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 :

(20)

Rias Pengantin

Beranda Peta Lokasi Buku Tamu Login

Tampilan Peta

Nama Lokasi : Cari Lokasi

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 :

(21)

Rias Pengantin

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 :

(22)

Rias Pengantin

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 terlihat seperti pada gambar III.22 berikut :

(23)

Rias Pengantin

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

tambah Reset

Cari data

Pilih File _{Tidak ada file yang dipilih}

: Rias Pengantin Informasi Lokasi Alamat Gambar Koordinat Nama Lokasi No Kode Lokasi

Nama Lokasi Rias Pengantin

Informasi Alamat Lengkap Koordinat Lon Lat

Aksi Gambar

Lokasi Rias Pengantin

(24)

3. Desain Form Data Biaya Rias Pengantin

Desain Form untuk melakukan pengolahan data biaya dapat terlihat seperti pada gambar III.23 berikut :

Rias Pengantin

tambah Reset

Cari data

Nama Biaya

Keterangan

Harga

Biaya

No Nama Biaya Keterangan Harga Aksi

Biaya Rias Pengantin

(25)

4. Desain Form Data Konten Website

Desain Form untuk melakukan pengolahan data konten website dapat terlihat seperti pada gambar III.24 berikut :

Rias Pengantin

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

Desain Form untuk melakukan pengolahan data pengaturan dapat terlihat seperti pada gambar III.25 berikut :

(26)

Rias Pengantin

Beranda

Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout

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.

(27)

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

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

(28)

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 Pesan

e. Tabel Normal Kedua Konten

Kode_Konten* Tanggal Terbit Judul Isi Thumbnail

f. Tabel Normal Kedua Lokasi

(29)

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

Id_Admin* Username Password

b. Tabel Normal Ketiga Biaya

Kode_Biaya* Kode_Lokasi** Nama_Biaya Keterangan Harga

c. Tabel Normal Ketiga Jalan

Kode_Jalan* Nama_Jalan Koordinat

d. Tabel Normal Ketiga Konten

Kode_Konten* Tanggal Terbit Judul Isi Thumbnail

e. Tabel Normal Ketiga Lokasi

Kode_Lokasi* Nama_Lokasi Informasi Alamat 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:

(30)

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

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:

(31)

Tabel III.3 Rancangan Tabel Jalan Nama Database hikmah_riaspengantin

Nama Tabel jalan

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

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

1. Kode_Konten int(11) Primary Key

2. Tanggal Timestamp -

3. Terbit varchar(6) -

4. Judul text -

5. Isi text -

(32)

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

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 -