BAB III ANALISIS DAN DESAIN SISTEM

Transkripsi

1 BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Tahap analisis sistem ng berjalan in bertujuan untuk mencari informasi mengenai masalah ng ada guna mendapatkan bahan evaluasi untuk pengembangan pada sistem ng akan dirancang, evaluasi pada masalah ng ada adalah : 1. Kurang berkembangn sistem informasi geografis ng dapat memberikan informasi lokasi Prewedding di kota medan. 2. Penyebaran informasi lokasi Prewedding di kota medan saat ini masih menggunakan cara manual, itu penyebaran informasi dari masrakat. 3. Belum adan sistem ng dapat membantu masrakat dalam mencari informasi lokasi Prewedding di kota medan. Adapun pemecahan masalah ng diusulkan oleh penulis adalah sebagai berikut: 1. Merancang sistem informasi geografis ng dapat memberikan informasi titik lokasi Prewedding di kota medan. 2. Mempermudah dan mempercepat penyebaran informasi lokasi Prewedding di kota medan. 3. Membuat sistem ng dapat memberikan kemudahan bagi masrakat dalam mencari informasi lokasi Prewedding di kota medan. 30

2 31 III.2. Desain Sistem Desain sistem secara global menggunakan bahasa pemodelan UML ng terdiri dari Usecase Diagram, Class Diagram, Activity Diagram dan Sequence Diagram. III.2.1. Usecase Diagram Secara garis besar, bisnis proses sistem ng akan dirancang digambarkan dengan usecase diagram ng terdapat pada Gambar III.1 : Sistem Informasi Geografis Lokasi Pemotretan Prewedding di Kota Medan Berbasis Web Login <extends> Lokasi Prewedding Olah Data <extends> Data Berita <extends> <extends> Upload Gambar Upload Thumbnail Admin PETA Buku Tamu Pengunjung Blog Daftar Lokasi Tentang Website Gambar III.1. Use Case Diagram Sistem Geografis Lokasi Prewedding Di kota Medan

3 32 III.2.2. Class Diagram Rancangan kelas-kelas ng akan digunakan pada sistem ng akan dirancang dapat dilihat pada gambar III.2 : Class Diagram * * Gambar III.2. Class Diagram Sistem Informasi Geografis Lokasi Prewedding III.2.3. Activity Diagram Bisnis proses ng 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 Prewedding, selanjutn menekan tombol atau link ng ada pada peta dan ng terakhir melihat informasi ng di sajikan dalam peta ng ditunjukkan pada gambar III.3:

4 33 Click Peta Prewedding Click Salah Satu Lokasi Lihat Informasi Lokasi Prewedding Gambar III.3. Activity Diagram Melihat Peta 2. Activity Diagram Mengolah Data Buku Tamu Aktvitas proses mengolah data Buku Tamu diterangkan dalam langkahlangkah state ng ditunjukkan pada gambar III.4 : Form Komentar Pengunjung Baru Isi Data Reset Kirim Gambar III.4. Activity Diagram Mengolah Data Buku Tamu

5 34 3. Activity Diagram Login Administrator Website 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 valid, maka tampilkan pesan kesalahan ng ditunjukkan pada gambar III.5 : Form login invalid Mengisi Data Click Login valid Halaman Admin Gambar III.5. Activity Diagram Login Admin 4. Activity Diagram Mengolah Data Lokasi Prewedding Aktivitas proses mengolah data Lokasi Prewedding diterangkan dalam langkah-langkah state ng ditunjukkan pada gambar III.6 :

6 35 Form Lokasi baru Isi data batal Simpan data Edit hapus Gambar III.6. Activity Diagram Mengolah Data Lokasi Prewedding 5. Activity Diagram Mengolah Data Berita Aktvitas proses mengolah data Berita diterangkan dalam langkah-langkah state ng ditunjukkan pada gambar III.7 :

7 36 Form Berita baru Isi data batal Simpan data Edit hapus Gambar III.7. Activity Diagram Mengolah Data Berita 6. Activity Diagram Upload Gambar Prewedding Aktvitas proses mengolah data Gambar Prewedding diterangkan dalam langkah-langkah state ng ditunjukkan pada gambar III.8 :

8 37 Form Upload Gambar baru Pilih file Upload Simpan data Download hapus Gambar III.8. Activity Diagram Upload Gambar Prewedding 7. Activity Diagram Upload Thumbnail Aktvitas proses mengolah data gambar thumbnail diterangkan dalam langkahlangkah state ng ditunjukkan pada gambar III.9 :

9 38 Form Upload Thumbnail baru Pilih file Klik Upload Simpan data Download hapus Gambar III.9. Activity Diagram Upload Thumbnail III.2.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.10 :

10 39 User Form Peta Proses User Click login() Main form Tampilkan peta () Proses Click Salah satu lokasi () Informasi lokasi () Gambar III.10. Sequence Diagram Form Peta 2. Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada gambar III.11 : Administrator admin login Proses sistem Website Form Login Proses Login Tabel user Click login() Isi nama dan password () Click Login invalid () Valid () Reset () Gambar III.11. Sequence Diagram Form Login

11 40 3. Sequence Diagram pada Form Data Prewedding Serangkaian kegiatan saat terjadi event pada form Prewedding dapat dilihat pada gambar III.12 : Administrator admin Form Lokasi Sistem Prewedding Proses Website Click data prewedding () Tambah data () Edit data () Hapus data () Batal data () Gambar III.12 Sequence Diagram Form Lokasi Prewedding 4. Sequence Diagram pada Form Data Berita Serangkaian kegiatan saat terjadi event pada form data Berita dapat dilihat pada gambar III.13 :

12 41 Administrator admin Form Sistem berita Proses Website Click data berita () Tambah data () Edit data () Hapus data () Batal data () Gambar III.13. Sequence Diagram Form Data Berita 5. Sequence Diagram pada Form Data Buku Tamu Serangkaian kegiatan saat terjadi event pada form buku tamu dapat dilihat pada gambar III.14 :

13 42 admin User Form Sistem komentar Proses Click komentar pengunjung() kirim data () Hapus data () Reset data () Gambar III.14. Sequence Diagram Form Buku Tamu 6. Sequence Diagram pada Form Gambar Prewedding Serangkaian kegiatan saat terjadi event pada form Gambar Prewedding dapat dilihat pada gambar III.15 :

14 43 admin User Form Upload Sistem Gambar Proses Click Upload Gambar() Upload Gambar () Download Gambar () Hapus data () Gambar III.15. Sequence Diagram Form Gambar Prewedding 7. Sequence Diagram pada Form Gambar Thumbnail Serangkaian kegiatan saat terjadi event pada form Gambar thumbnail dapat dilihat pada gambar III.16 :

15 44 admin User Form Upload Sistemthumbnail Proses Click Upload thumbnail() Upload thumbnail () Download thumbnail () Hapus data () Gambar III.16. Sequence Diagram Form Gambar Thumbnail III.3. Desain Basis Data Desain basis data terdiri dari tahap merancang struktur tabel dan normalisasi data. III.3.1. Normalisasi Data Tahap normalisasi ini bertujuan untuk menghilangkan masalah berupa ke konsistenan apabila dilakukann proses manipulasi data seperti penghapusan, perubahan dan penambahan data sehingga data ambigu. Berikut ini adalah tahapan normalisasin:

16 45 1. Bentuk Tidak Normal Bentuk normal dari data pembelian ditandai dengan adan baris ng satu atau lebih atributn terisi, bentuk ini dapat dilihat pada tabel III.1 dibawah ini : Tabel III.1 Data Lokasi Tidak Normal Kode Tempat Nama_Prawedding Alamat ID Gambar Jl.pasar nippon 1 Danau Siombak ujung kelurahan 1 pa pasir 2 Istana Maimun Jl.brigjen katamso 2 3 Kolam Ikan 4 Sawah 5 Wisata Alam Jl.datuk rubiah kecamatan medan marelan kolam ikan jl.kali serayu kec pecut sei tuan jl.wisata alam desa sukatende pancur batu medan Lon Lat Lokasi Medan 2. Bentuk Normal Pertama (1NF) Bentuk normal pertama dari data pembelian merupakan bentuk normal ng atribut kosongn diisi sesuai dengan atribut induk dari record-n, bentuk ini dapat dilihat pada tabel III.2 di bawah ini: Tabel III.2 Data Lokasi 1NF Kode Tempat 1 2 Nama Prawedding Danau Siombak Istana Maimun 3 Kolam Ikan Alamat Jl.pasar nippon ujung kelurahan pa pasir Jl.brigjen katamso Jl.datuk rubiah kecamatan ID Gambar Lon Lat Lokasi Medan Medan Medan

17 46 4 Sawah 5 Wisata Alam medan marelan kolam ikan jl.kali serayu kec pecut sei tuan jl.wisata alam desa sukatende pancur batu 3. Bentuk Normal Kedua (2NF) Medan Medan Bentuk normal kedua dari data lokasi merupakan bentuk normal pertama, dimana telah dilakukan pemisahan data sehingga adan 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 name type size content 1 Danau Siombak image/jpeg [BLOB - 28,8 KB] 2 Istana Maimun image/jpeg [BLOB - 30,9 KB] 3 Kolam Ikan image/jpeg [BLOB - 26,1 KB] 4 Sawah image/jpeg [BLOB - 29,9 KB] 5 Wisata Alam image/jpeg [BLOB - 36,3 KB] III.3.2. Desain Tabel Setelah melakukan tahap normalisasi, maka tahap selanjutn ng dikerjakan itu merancang struktur tabel pada basis data sistem ng akan dibuat, berikut ini merupakan rancangan struktur tabel tersebut : 1. Struktur Tabel Gambar Tabel gambar digunakan untuk menyimpan data id, name, type, size, content, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.4 di bawah ini :

18 47 Nama Database Nama Tabel Tabel III.4 Rancangan Tabel Gambar harry_prewedding Gambar No Nama Field Tipe Data Boleh Kosong Kunci 1. Id int(11) Tidak Primary Key 2. Name Text Tidak - 3. Type varchar(30) Tidak - 4. Size int(11) Tidak - 5. Content Longblob Tidak - 2. Struktur Tabel Jalan Tabel jalan digunakan untuk menyimpan data Kode_Jalan, Nama_Jalan, Koordinat, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.5 di bawah ini : Nama Database Nama Tabel Tabel III.5 Rancangan Tabel Jalan harry_prewedding Jalan No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Jalan int(5) Tidak Primary Key 2. Nama_Jalan varchar(30) Tidak - 3. Koordinat varchar(35) Tidak - 3. Struktur Tabel Komentar Tabel komentar digunakan untuk menyimpan data Kode_Komentar, Nama, , Tanggal, Pesan, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.6 di bawah ini :

19 48 Nama Database Nama Tabel Tabel III.6 Rancangan Tabel Komentar harry_prewedding Komentar No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Komentar int(5) Tidak Primary Key 2. Nama varchar(25) Tidak varchar(25) Tidak - 4. Tanggal Datetime Tidak - 5. Pesan Text Tidak - 4. Struktur Tabel Konten Tabel konten digunakan untuk menyimpan data Kode_Konten, Tanggal, Terbit, Judul, Isi, Thumbnail, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.7 di bawah ini : Nama Database Nama Tabel Tabel III.7 Rancangan Tabel Konten harry_prewedding Konten No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Konten int(11) Tidak Primary Key 2. Tanggal Timestamp Tidak - 3. Terbit varchar(6) Tidak - 4. Judul Text Tidak - 5. Isi Text Tidak - 6. Thumbnail int(11) Tidak Foreign Key

20 49 5. Struktur Tabel Prewedding Tabel prewedding digunakan untuk menyimpan data Kode_Tempat, Nama_Prewedding, Alamat, Gambar, Lon, Lat, Keterangan, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.8 di bawah ini : Nama Database Nama Tabel Tabel III.8 Rancangan Tabel Prewedding harry_prewedding Prewedding No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Tempat int(5) Tidak Primary Key 2. Nama_Prewedding varchar(25) Tidak - 3. Alamat Text Tidak - 4. Gambar int(11) Tidak Foreign Key 5. Lon Double Tidak - 6. Lat Double Tidak - 7. Keterangan Text Tidak - 6. Struktur Tabel Thumbnail Tabel thumbnail digunakan untuk menyimpan data id, name, type, size, content, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.9 di bawah ini :

21 50 Nama Database Nama Tabel Tabel III.9 Rancangan Tabel Thumbnail harry_prewedding Thumbnail No Nama Field Tipe Data Boleh Kosong Kunci 1. Id int(11) Tidak Primary Key 2. Name Text Tidak - 3. Type varchar(30) Tidak - 4. Size int(11) Tidak - 5. Content Longblob Tidak - 7. Struktur Tabel User Tabel user digunakan untuk menyimpan data Id_User, Username, Password, Nama, selengkapn mengenai struktur tabel ini dapat dilihat pada tabel III.10 di bawah ini : Nama Database Nama Tabel Tabel III.10 Rancangan Tabel User harry_prewedding User 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 - III.4. Desain User Interface Tahap perancangan berikutn itu desain sistem secara detail ng meliputi desain output sistem dan desain input sistem.

22 51 III.4.1. Desain Output sistem : Berikut ini adalah rancangan tampilan desain peta ng akan dihasilkan oleh PREWEDDING LOCATION Beranda Komentar Pengunjung Artikel dan Berita Peta Prewedding Daftar Lokasi Prewedding Administrator Tentang Website Peta SIG Prawedding Klik salah satu nama lokasi ng tertera pada menu di sebelah kiri, kemudian klik marka peta untuk melihat informasi lokasi ng tersedia. Untuk mencari tempat, anda dapat menggunakan form pencarian dibawah peta. Nama Prewedding Cari Data SIG Prawedding 2015 By Harry Pradana Gambar III.17. Desain Tampilan Peta III.4.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.18 : PREWEDDING LOCATION Beranda Komentar Pengunjung Artikel dan Berita Peta Prewedding Daftar Lokasi Prewedding Administrator Tentang Website Login Admin Username : Password : Login Reset SIG Prawedding 2015 By Harry Pradana Gambar III.18. Desain Form Login

23 52 2. Desain Form Data Lokasi Prewedding Desain form Data Lokasi Prewedding dapat dilihat pada gambar III.19 : PREWEDDING LOCATION Beranda Lokasi Prewedding Data Berita Upload Gambar Upload Thumbnail Data Buku Tamu Keluar Form Pengisian Lokasi Prewedding Nama Lokasi : Alamat Lokasi : Keterangan : Gambar Prewedding : Koordinat : Peta Tambah Reset Nama Prewedding Cari Data Informasi Lokasi Edit Hapus SIG Prawedding 2015 By Harry Pradana Gambar III.19. Desain Form Lokasi Prewedding 3. Desain Form Data Berita Desain form Data Berita dapat dilihat pada gambar III.20 :

24 53 PREWEDDING LOCATION Beranda Lokasi Prewedding Data Berita Upload Gambar Upload Thumbnail Data Buku Tamu Keluar Pengolahan Blog Website Judul : Diterbitkan : Gambar : Tambah Reset Judul Cari Data Informasi Berita Edit Hapus SIG Prawedding 2015 By Harry Pradana Gambar III.20. Desain Form Data Berita 4. Desain Form Data Pangkalan Buku Tamu Desain form Data Pangkalan Buku Tamu dapat dilihat pada gambar III.21 :

25 54 PREWEDDING LOCATION Beranda Komentar Pengunjung Artikel dan Berita Peta Prewedding Daftar Lokasi Prewedding Administrator Tentang Website Kirim Komentar Kepada Kami Nama Anda : Keterangan : Kirim Reset Informasi Komentar SIG Prawedding 2015 By Harry Pradana Gambar III.21. Desain Form Buku Tamu 5. Desain Form Data Gambar Prewedding Desain form Data Gambar Prewedding dapat dilihat pada gambar III.22 :

26 55 PREWEDDING LOCATION Beranda Lokasi Prewedding Data Berita Upload Gambar Upload Thumbnail Data Buku Tamu Keluar Pilih Lokasi Gambar Pilih File File Upload Daftar Gambar MAP Lokasi Prewedding Informasi Gambar Informasi Gambar Gambar Gambar Download Delete Download Delete SIG Prawedding 2015 By Harry Pradana Gambar III.22. Desain Form Data Gambar Prewedding 6. Desain Form Data Gambar Berita Desain form Data Gambar berita dapat dilihat pada gambar III.23 :

27 56 PREWEDDING LOCATION Beranda Lokasi Prewedding Data Berita Upload Gambar Upload Thumbnail Data Buku Tamu Keluar Pilih Lokasi Gambar Pilih File File Upload Daftar Gambar Untuk Blog Informasi Gambar Informasi Gambar Gambar Gambar Download Delete Download Delete SIG Prawedding 2015 By Harry Pradana Gambar III.23. Desain Form Data Gambar Berita