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 <include> Beranda <<include>> Login <<include>> Lokasi rias pengantin <include> Peta lokasi rias pengantin admin <include> <<include>> User Logout <<include>> Mengolah Biaya Rias Pengantin Buku Tamu 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 jalan komentar Id_Admin Username Password Nama int(11) varchar(12) varchar(12) varchar(25) 1 0 Kode_Jalan Nama_Jalan Koordinat int(5) varchar(30) text Kode_Komentar int(5) Nama varchar(25) Email varchar(25) Tanggal datetime Pesan Text +login +reset + tambah + reset + edit + hapus + tambah + reset + hapus 1 1 Kode_Konten Tanggal Terbit Judul Isi Thumbnail + tambah + reset + edit + hapus 0 konten int(11) Timestamp varchar(6) Text Text Text Kode_lokasi Nama_lokasi Informasi Alamat Gambar Lon Lat + tambah + reset + edit + hapus lokasi int(5) varchar(25) Text 1 Text Text Double Double Gambar III.2. Class Diagram Sistem * Kode_Biaya Kode_Lokasi * Nama_biaya Keterangan Harga + tambah + reset + hapus biaya int(5) int(5) varchar(25) text int(11) 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 :
Phase 30 Melihat Peta User Sistem 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 :
Phase 31 Form Buku Tamu User Sistem Beranda Buku Tamu Isi data komentar Kirim Menyimpan data Menampilkan informasi Gambar III.4. Activity Diagram Data Buku Tamu
Phase 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 Berhasil Gambar III.5. Activity Diagram Login
Phase 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 Form Lokasi Rias Pengantin Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data Memilih Data Edit Data tidak Mengubah Data Menyimpan Data Hapus Data Memilih data Konfirmasi Penghapusan Ya Menghapus Data Gambar III.6. Activity Diagram Data Lokasi Rias Pengantin
Phase 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 Data Biaya Pada Form Lokasi Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data Memilih Data Edit Data tidak Mengubah Data Menyimpan Data Hapus Data Memilih data Konfirmasi Penghapusan Ya Menghapus Data Gambar III.7. Activity Diagram Data Biaya Rias Pengantin
Phase 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 Form Konten Website Mengisi Data Tambah Data Menekan tombol simpan Menyimpan data Memilih Data Edit Data tidak Mengubah Data Menyimpan Data Hapus Data Memilih data Konfirmasi Penghapusan Ya Menghapus Data Gambar III.8. Activity Diagram Data Konten Website
Phase 36 6. Activity Diagram Data Pengaturan Serangkaian kerja melakukan pengolahan data pengaturan dapat terlihat seperti pada gambar III.9 berikut : Data Pengaturan Admin Sistem Memilih aksi pada form Menu Click Form Pengaturan Form Pengaturan Mengisi data username Mengisi data nama administrator Mengisi password lama Mengisi data password baru Click Ganti Menyimpan data Gambar III.9. Activity Diagram Data Pengaturan
Phase 37 3. Activity Diagram Logout Aktvitas proses keluar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.10 : Data logout Admin Sistem Memilih aksi pada form Menu Click Form logout Disable menu admin Form user Enable menu login 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 berikut: Serangkaian kerja melihat peta dapat terlihat seperti pada gambar III.11 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 () Koneksi Database () hapus data () 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 From Login Proses Admin Halaman Admin 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 terlihat seperti pada gambar III.14 berikut :
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 terlihat seperti pada gambar III.15 berikut :
42 Admin Form Lokasi Form Biaya Proses Biaya tampilkan fom () menu () click form data biaya tambah data () koneksi database () ubah data () hapus data () koneksi database () 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 seperti pada gambar III.16 berikut :
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 seperti pada gambar III.17 berikut :
44 Admin Form Pengaturan Proses Admin Edit data () 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 Main logoutbutton 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 Nama Lokasi : Cari 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 Hak Cipta 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin 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 Hak Cipta 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin 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 :
49 Rias Pengantin Beranda Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout Rias Pengantin Informasi Lokasi Lokasi Rias Pengantin Alamat Gambar Koordinat Pilih File tambah Reset Tidak ada file yang dipilih : Nama Lokasi Cari data No Kode Lokasi Gambar Nama Lokasi Rias Pengantin Informasi Alamat Lengkap Koordinat Lon Lat Aksi Hak Cipta 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin Gambar III.22. Desain Form Data Lokasi Rias Pengantin
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 Nama Lokasi Nama Biaya Biaya Rias Pengantin Keterangan Harga tambah Reset Biaya Cari data No Nama Biaya Keterangan Harga Aksi Hak Cipta 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin 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 seperti pada gambar III.24 berikut : Rias Pengantin Beranda Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout Hak Cipta 2015 All Rights Reserved Sistem Informasi Geografis Lokasi 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 :
52 Rias Pengantin Beranda Peta Lokasi Buku Tamu Lokasi Rias Pengantin Konten Website Pengaturan Logout 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. 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 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 Pesan e. Tabel Normal Kedua Konten Kode_Konten* Tanggal Terbit Judul Isi Thumbnail f. Tabel Normal Kedua Lokasi Kode_Lokasi* Nama_Lokasi Informasi Alamat Gambar Lon Lat
55 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:
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 -