bab iii analisis dan desain sistem
advertisement
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 Lokasi rias pengantin <include> Peta lokasi rias pengantin <<include>> Login admin <<include>> <<include>> User <include> <<include>> 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 + tambah + reset + edit + hapus + tambah + reset + edit + hapus 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 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.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 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.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 Memilih aksi pada form Menu 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 Memilih aksi pada form Menu 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 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 () 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 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 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 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 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 Hak Cipta © 2015 All Rights Reserved Sistem Informasi Geografis Lokasi Rias Pengantin 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 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. 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 -
