BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Dalam penulisan skripsi ini, penulis membahas dan menguraikan tentang masalah sistem informasi geografis toko hewan di kota Medan berbasis web. Adapun proses yang masih bersifat manual yaitu penyebaran informasi yang ada hanya berupa berdasarkan selebaran brosur yang kurang efektif dan memperlambat proses pencarian lokasi sesuai dengan kebutuhan konsumen. Masalah-masalah yang dihadapi oleh sistem penginformasian letak geografis toko hewan di kota Medan adalah sebagai berikut : 1. Penyebaran informasi lokasi geografis toko hewan di kota Medan saat ini masih menggunakan cara konvensional yaitu menggunakan selebaran yang kurang sesuai dengan era globalisasi. 2. Kebutuhan para konsumen akan informasi lokasi petshop di kota Medan yang cepat akurat dan dapat di akses oleh siapa saja, dimana saja, kapan saja tanpa mengenal jarak dan waktu. 3. Belum adanya ketersediaan informasi lokasi petshop di kota Medan yang lebih presentatif dalam memberikan informasi kepada konsumen secara spasial atau pemetaan dengan begitu informasi yang di dapat lebih spesifik. 4. Belum diketahui tingkat kebutuhan konsumen dengan pendekatan sistem informasi geografis. Oleh karena itu, perlunya dibuat suatu aplikasi sistem informasi geografis berbasis web yang menyajikan informasi tentang lokasi toko Hewan di Kota 36
37 Medan dengan menggunakan peta sehingga dapat memberikan keterangan yang cukup akurat kepada penggunanya. III.2. Desain Sistem Desain sistem secara global menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram. 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 Toko Hewan di Kota Medan Berbasis Web Input Gambar Input Konten Login Input Gambar Berita <include> Data Input Petshop <include> Logout <include> <include> Peta Petshop Administrator User Berita Home Tentang Penjelasan Usecase : Gambar III.1. Usecase Diagram Sistem 1. Admin sebelum masuk di menu petshop harus melakukan login.
38 2. Setelah admin login admin bisa melakuakan input data petshop. 3. Admin bisa melakukan input gambar, gambar yang di input memunculkan gambar di berita. 4. Setelah admin melakukan input gambar, admin melakuakn input gambar berita untuk memunculkan gambar di berita. 5. Inputan konten di lakukan admin untuk melakuakn masukan berit-berita di konten. III.2.2. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.2 : Petshop + Kode_Tempat + Nama_Petshop + Alamat + Gambar + Lon +Lat + Gerai () - InitComponents () + Main (String args []) Jalan + Kode_Jalan + Nama_Jalan + Tipe_Jalan + Lon + Lat + Jalan () - InitComponents () + Main (String args []) Using Komentar + Kode_Komentar + Nama + Email + Tanggal + Pesan + Komentar () - InitComponents () + Main (String args []) Using Connection Using Using + ConnectionManager () Using Konten + Kode_Konten + Tanggal + Terbit + Judul + Isi + Thumbnail + Tag + Konten () - InitComponents () + Main (String args []) Thumbnail Using + Id + Name + Typet + Size + Content + Id () - InitComponents () + Main (String args []) Using + Id + Name + Typet + Size + Content Gambar + Name () - InitComponents () + Main (String args []) User + Id_User + Username + Password + Nama + User () - InitComponents () + LoginAcction (Evt) + ResetAcction (Evt) Gambar III.2. Class Diagram Sistem
39 III.2.3. Activity Diagram Bisnis proses yang telah digambarkan pada usecase diagram diatas 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 toko hewan, selanjutnya menekan tombol atau link yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.3: Halaman Utama Click Peta Website Petshop Click Salah Satu marka Petshop Melihat Informasi Lokasi Petshop Gambar III.3. Activity Diagram Melihat Peta 2. 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 tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.4:
40 Memasukkan Username Memasukkan Password Valid Aktifkan Menu Administrator invalid Menampilkan Pesan Error Gambar III.4. Activity Diagram Login Admin 3. Activity Diagram Mengolah Data Input Petshop Aktivitas proses mengolah data lokasi toko petshop diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.5 : Memilih aksi pada form data Petshop Pencarian Tambah Ediit Hapus Memilih Pencarian Mengisi Data Memilih Data Memilih Data Mengetik Kata Kunci Menyimpan Data Mengubah Data Konfirmasi Penghapusan Tidak Menekan Enter Menekan Tombol Simpan Menyimpan Data Menghapus Data Ya Gambar III.5. Activity Diagram Mengolah Data Input Petshop
41 4. Activity Diagram Input Konten Aktvitas proses mengolah Blog website diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.6: Memilih aksi pada form Konten Pencarian Tambah Edit Hapus Memilih Pencarian Mengisi Data Memilih Data Memilih Data Mengetik Kata Kunci Menyimpan Data Mengubah Data Konfirmasi Penghapusan Tidak Menekan Enter Menekan Tombol Simpan Menyimpan Data Menghapus Data Ya Gambar III.6. Activity Diagram Input Konten 5. Activity Diagram Input Gambar Aktvitas proses mengolah upload gambar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.7: Memilih aksi pada form Input Gambar Upload Download Hapus Chose File Memilih data Memilih Data Memilih gambar Konfirmasi Penghapusan Tidak Ya Menekan Tombol upload Menekan Tombol download Menghapus Data Gambar III.7. Activity Diagram Input Gambar
42 6. Activity Diagram Input Gambar Berita Aktvitas proses mengolah gambar berita diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.8: Memilih aksi pada form Input Gambar Berita Upload Download Hapus Chose File Memilih data Memilih Data Memilih thumbnail Konfirmasi Penghapusan Tidak Ya Menekan Tombol upload Menekan Tombol download Menghapus Data Gambar III.8. Activity Diagram Input Gambar Berita III.2.4.Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut: 1. Sequence Diagram pada Form Peta Petshop Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada gambar III.9 :
43 User Tampilkan Menu () Main form Form Peta Menu () click form Peta () Gambar III.9. Sequence Diagram Form Peta Petshop 2. Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada gambar III.10 : Administrator Website Main form Form Login Proses Login Halaman Administrator Tampilkan Fom () Menu () click form login Validasi nama dan password () Invalid () Login sukses () Gambar III.10. Sequence Diagram Form Login
44 3. Sequence Diagram pada Form Input Petshop Serangkaian kegiatan saat terjadi event pada form lokasi toko Petshop dapat dilihat pada gambar III.11 : Administrator Website Main form Form Input Gerai Proses Petshop Tampilkan Fom () Menu () click form dealer () update data () Close form () deletel data () Update data dealer Gambar III.11. Sequence Diagram Form Input Petshop 4. Sequence Diagram pada Form Input Konten Serangkaian kegiatan saat terjadi event pada form pengolahan blog website dapat dilihat pada gambar III.12 : Administrator Website Main form Form Input Konten Proses Konten Tampilkan Fom () Menu () click form Blog () update data () Close form () deletel data () Update data konten Gambar III.12. Sequence Diagram Form Input Konten
45 5. Sequence Diagram pada Form Input Gambar Serangkaian kegiatan saat terjadi event pada form pilih lokasi gambar dapat dilihat pada gambar III.13 : Administrator Website Main form Form Upload Gambar Proses gambar Tampilkan Fom () Menu () click form Upload Gambar () Close form () upload data () download data () deletel data () Update data gambar Gambar III.13. Sequence Diagram Form Input Gambar 6. Sequence Diagram pada Form Input Gambar Berita Serangkaian kegiatan saat terjadi event pada form pengolahan gambar berita dapat dilihat pada gambar III.14 : Administrator Website Main form Form Input Gambar Berita Proses Gambar berita Tampilkan Fom () Menu () click form Upload Thumbnail () Close form () upload data () download data () deletel data () Update data thumbnail Gambar III.14. Sequence Diagram Form Input Gambar Berita
46 III.3. Desain Database Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun Entity Relationship Diagram (ERD). III.3.1. Kamus Data Kamus data merupakan sebuah daftar yang terorganisasi dari elemen data yang berhubungan dengan sistem, dengan definisi yang tepat dan teliti sehingga pemakai dan analis sistem akan memiliki pemahaman yang umum mengenai Input, output, dan komponen penyimpan. Kamus data penyimpanan sistem yang akan dirancang dapat dilihat pada tabel III.1 : Tabel III.1. Kamus Data Data Atribut Ekspresi Reguler Data jalan = @Kode_Jalan + Nama_Jalan + Tipe_Jalan + Lon + Lat 1. Kode_Jalan = {^[-+]?[0-9]} 2. Nama_Jalan = {[0-9][a-z][A-Z][Spasi]} 3. Tipe_Jalan = {[0-9][a-z][A-Z][Spasi]} 4. Lon = ^[-+]?[0-9]*\.?[0-9]+$ 5. Lat = ^[-+]?[0-9]*\.?[0-9]+$ Petshop = @Kode_Tempat + Nama_Sekolah + Nama_Kesek + Alamat + Telepon + Gambar + Lon + Lat + Keterangan 1. Kode_Tempat = {^[-+]?[0-9]} 2. Nama_Petshop = {[0-9][a-z][A-Z][Spasi]} 3. Alamat = {[0-9][a-z][A-Z][Spasi]} 4. Gambar = {[0-9][a-z][A-Z][Spasi]} 5. Lon = ^[-+]?[0-9]*\.?[0-9]+$ 6. Lat = ^[-+]?[0-9]*\.?[0-9]+$ 7. Keterangan = {[0-9][a-z][A-Z][Spasi]} komentar = @Kode_Komentar + Nama + Email + Tanggal + Pesan 1. Kode_Komentar = {^[-+]?[0-9]} 2. Nama = {[0-9][a-z][A-Z][Spasi]} 3. Email = {[0-9][a-z][A-Z][Spasi]} 4. Tanggal = {^[-+]?[0-9]} 5. Pesan = {[0-9][a-z][A-Z][Spasi]} konten = @Kode_Konten + Tanggal + Terbit + Judul + Isi +
47 Thumbnail + Tag 1. Kode_Konten = {^[-+]?[0-9]} 2. Tanggal = {^[-+]?[0-9]} 3. Terbit = {[0-9][a-z][A-Z][Spasi]} 4. Judul = {[0-9][a-z][A-Z][Spasi]} 5. Isi = {[0-9][a-z][A-Z][Spasi]} 6. Thumbnail = {[0-9][a-z][A-Z][Spasi]} 7. Tag = {[0-9][a-z][A-Z][Spasi]} user = @Id_User + Username + Password + Nama 1. Id_User = {^[-+]?[0-9]} 2. Username = {[0-9][a-z][A-Z][Spasi]} 3. Password = {[0-9][a-z][A-Z][Spasi]} 4. Nama = {[0-9][a-z][A-Z][Spasi]} III.4. 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: 1. Struktur Tabel Gambar Tabel gambar digunakan untuk menyimpan data id, name, type, size, content, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.2 di bawah ini: Tabel III.2. Rancangan Tabel Gambar Nama Database zufri_petshop Nama Tabel 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 -
48 2. 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 di bawah ini: Tabel III.3. Rancangan Tabel Jalan Nama Database zufri_petshop Nama Tabel 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 Text Tidak - 3. 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 di bawah ini: Tabel III.4. Rancangan Tabel Komentar Nama Database zufri_petshop Nama Tabel Komentar No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Komentar int(5) Tidak Primary Key 2. Nama varchar(25) Tidak - 3. Email 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, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.5 di bawah ini: Tabel III.5. Rancangan Tabel Konten Nama Database zufri_petshop Nama Tabel 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 -
49 4. Judul Text Tidak - 5. Isi Text Tidak - 6. Thumbnail int(11) Tidak Foreign Key 5. Struktur Tabel Petshop Tabel petshop digunakan untuk menyimpan data Kode_Tempat, Nama_Petshop, Alamat, Gambar, Lon, Lat, Keterangan, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.6 di bawah ini: Tabel III.6. Rancangan Tabel Petshop Nama Database zufri_petshop Nama Tabel Petshop No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Tempat int(5) Tidak Primary Key 2. Nama_Petshop 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, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.7 di bawah ini: Tabel III.7. Rancangan Tabel Thumbnail Nama Database zufri_petshop Nama Tabel 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, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.8 di bawah ini:
50 Tabel III.8. Rancangan Tabel User Nama Database zufri_petshop Nama Tabel 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.3.5. ERD (Entity Relationship Diagram) Tahap selanjutnya pada penelitian ini yaitu merancang ERD untuk mengetahui hubungan antar tabel yang telah didesain sebelumnya, ERD tersebut dapat dilihat pada gambar III.15 :
51 Id_User User 1 Username Password Nama Kode_komentar Nama Kode_Tempat Nama_Petshop Alamat Mengolah Data M Komentar Email Tanggal Pesan Gambar Petshop Lon Lat Keterangan M Memiliki M Memiliki Konten Kode_konten tanggal terbit judul Kode_Jalan Jalan isi isi Nama_Jalan Tipe_Jalan Lat Lon Gambar III.15. Diagram ERD III.5. Desain User Interface Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem, desain Input sistem, dan desain database. III.5.1. Desain Input Berikut ini adalah rancangan atau desain Input sebagai antarmuka pengguna: 1. Desain FormLogin Desain form login dapat dilihat pada gambar III.16:
52 Gambar III.16. Desain Form Login 2. Desain Form Input Petshop Desain form pengisian lokasi toko petshop dapat dilihat pada gambar III.17 : Gambar III.17. Desain Form Input Petshop 3. Desain Form Input Gambar Desain form pengelolahan gambar dapat dilihat pada gambar III.19 :
53 Gambar III.18. Desain Form Input Gambar 4. Desain Form Input Konten Desain form pengelolahan blog dapat dilihat pada gambar III.19 : Gambar III.19. Desain Form Input Konten 5. Desain Form Input Gambar Berita Desain form pengelolahan gambar berita dapat dilihat pada gambar III.20 :
54 Gambar III.20. Desain Form Input Gambar Berita 6. Desain Form Input Gambar Akun Desain form pengelolahan Akun dapat dilihat pada gambar III.21 : Gambar III.21. Desain Form Input Gambar Berita III.5.2. Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem:
55 PETA Gambar III.22. Desain Tampilan Peta