BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Tahap analisis sistem yang berjalan ini bertujuan untuk mencari informasi mengenai sistem yang lama guna mendapatkan bahan evaluasi untuk pengembangan pada sistem yang akan dirancang, evaluasi pada sistem yang lama ialah sulitnya mendapatkan informasi mengenai lokasi letak Gerai Indosat. Dengan adanya bahan evaluasi sistem yang lama, maka diharapkan agar pembangunan aplikasi yang baru akan dilakukan dapat terbentuk dengan lebih baik dari pada sistem sebelumnya. Analisis yang ada pada tahap analisis sistem yang sedang berjalan ini tiga jenis analisis, yaitu meliputi analisis Input, analisis process dan analisis output. III.1.1. Analisis Input Analisis Input yang ada pada sistem yang lama, yaitu : 1. Masyarakat melihat informasi selebaran pada Gerai Indosat. 2. Masyarakat mengingat informasi yang ada pada selebaran tersebut, atau 3. Masyarakat mencatat alamat Gerai Indosat tersebut. 4. Masyarakat mengunjungi Gerai Indosat yang mereka ketahui dan yang terdekat dari tempat tinggal mereka. 27
28 Contoh Gerai Indosat dapat dilihat pada gambar III.1: Gambar III.1. Kantor Pusat Gerai Indosat III.1.2.Analisis Process Proses yang terjadi pada sistem yang dijelaskan pada langkah-langkah:
29 Sistem Informasi Geografis Lokasi Gerai Indosat di Kota Medan Berbasis Web Customer Masyarakat MULAI Papan Iklan / Brosur Gerai Indosat Papan Iklan / Brosur Gerai Indosat Mengingat Alamat Mengunjungi Gerai Indosat Mengunjungi Gerai Indosat SELESAI Phase Keterangan FOD : Gambar III.2. Flow Of Document Lokasi Gerai Indosat 1. Konsumen mendapatkan informasi mengenai gerai indosat yang berada di kota Medan melalui iklan dan selebaran brosur. 2. Kemudian konsumen mengingat atau mencatat alamat lokasi gerai indosat tersebut. 3. Setelah mendapatkan informasi gerai indosat, konsumen melakukan pengunjungan ke lokasi gerai indosat yang mereka ketahui.
30 III.1.3.Analisis Output Analisis output untuk rangkaian kerja pada kegiatan mencari lokasi Gerai Indosat yang lama yaitu : 4. Masyarakat melihat lokasi Gerai Indosat. 5. Masyarakat mengingat lokasi Gerai Indosat. 6. Masyarakat mengunjungi lokasi Gerai Indosat. III.2. Evaluasi Sistem yang Berjalan Sistem yang sedang berjalan memiliki beberapa kelemahan yang dijabarkan sebagai berikut: 1. Sulitnya Menemukan Letak Lokasi Pembuatan gerai indosat di wilayah kota Medan. 2. Lambatnya Memberikan Informasi Lokasi Gerai Indosat Di Wilayah Kota Medan. 3. Kurangnya Efesien Kerja Dan Banyaknya Waktu Yang Terbuang Untuk Memberikan Informasi Lokasi Gerai Indosat Di Wilayah Kota Medan. Sistem yang sedang berjalan memiliki beberapa kelebihan yang dijabarkan sebagai berikut: 1. Penghematan dana saat penyebaran informasi lokasi. 2. Informasi dapat dilihat dan di akses oleh semua kalangan masyarakat.
31 III.3. Desain Sistem Desain sistem secara global menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram. III.3.1.Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.3 : Sistem Informasi Geografis Lokasi Gerai Indosat di Kota Medan Berbasis Web Input Gambar Input Konten Login Input Gambar Berita <include> Data Input Gerai <include> Logout <include> <include> Peta Gerai Administrator User Berita Home Tentang Gambar III.3 Usecase Diagram Sistem III.3.2. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.4 :
32 gambar -id -name -type -size -content 1.. 1..* gerai -Kode_Tempat -Nama_Gerai -Alamat -Gambar -Lon -Lat -Keterangan 1..* 1.. jalan -Kode_Jalan -Nama_Jalan -Koordinat 1..* 1.. konten -Kode_Konten -Tanggal -Terbit -Judul -Isi -Thumbnail thumbnail 1..* -id -nama -type 1.. -size -content 1..* 1.. komentar -Kode_Komentar -Nama -Email -Tanggal -Pesan Gambar III.4. Class Diagram Sistem III.3.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 gerai, selanjutnya menekan tombol atau link yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.5:
33 Halaman Utama Click Peta Gerai Click Salah Satu marka Gerai Melihat Informasi Lokasi Gerai Gambar III.5. 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.6: Memasukkan Username Memasukkan Password Valid Aktifkan Menu Administrator invalid Menampilkan Pesan Error Gambar III.6. Activity Diagram Login Admin
34 3. Activity Diagram Ganti Password Administrator Website Aktvitas proses Ganti Password admin diterangkan dalam langkah-langkah state, dimulai dari memasukkan username, memasukkan password lama, dan memasukkan password baru yang ditunjukkan pada gambar III.7: Memasukkan Username Password Lama Password Baru Tampilan Pesan Gambar III.7. Activity Diagram Ganti Password 4. Activity Diagram Mengolah Data Input Gerai Aktivitas proses mengolah data lokasi gerai diterangkan dalam langkahlangkah state yang ditunjukkan pada gambar III.8: Memilih aksi pada form data Gerai 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.8. Activity Diagram Mengolah Data Input Gerai
35 5. Activity Diagram Input Konten Aktvitas proses mengolah Blog website diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.9: 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.9. Activity Diagram Input Konten 6. Activity Diagram Input Gambar Aktvitas proses mengolah upload gambar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.10: 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.10. Activity Diagram Input Gambar
36 7. Activity Diagram Input Gambar Berita Aktvitas proses mengolah gambar berita diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.11: 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.11. Activity Diagram Input Gambar Berita III.3.4.Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut: 1. Sequence Diagram pada Form Peta Gerai Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada gambar III.12 :
37 User Tampilkan Menu () Main form Form Peta Menu () click form Peta () Koneksi database () Gambar III.12. Sequence Diagram Form Peta Gerai 2. Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada gambar III.13 : 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.13. Sequence Diagram Form Login
38 3. Sequence Diagram pada Form Input Gerai Serangkaian kegiatan saat terjadi event pada form lokasi gerai dapat dilihat pada gambar III.14 : Administrator Website Main form Form Input Gerai Proses Gerai Tampilkan Fom () Menu () click form gerai () update data () Koneksi database () Close form () deletel data () Koneksi database () Update data dealer Gambar III.14. Sequence Diagram Form Input Gerai 4. Sequence Diagram pada Form Input Konten Serangkaian kegiatan saat terjadi event pada form pengolahan blog website dapat dilihat pada gambar III.15 : Administrator Website Main form Form Input Konten Proses Konten Tampilkan Fom () Menu () click form Blog () update data () Koneksi database () Close form () deletel data () Koneksi database () Update data konten Gambar III.15. Sequence Diagram Form Input Konten
39 5. Sequence Diagram pada Form Input Gambar Serangkaian kegiatan saat terjadi event pada form pilih lokasi gambar dapat dilihat pada gambar III.16 : Administrator Website Main form Form Upload Gambar Proses gambar Tampilkan Fom () Menu () click form Upload Gambar () Close form () upload data () download data () deletel data () Koneksi database () Koneksi database () Koneksi database () Update data gambar Gambar III.16. 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.17 : 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 () Koneksi database () Koneksi database () Koneksi database () Update data thumbnail Gambar III.17. Sequence Diagram Form Input Gambar Berita
40 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.18 : Id_User User 1 Username Password Nama Kode_komentar Nama Kode_Tempat Nama_Gerai Alamat Mengolah Data M Komentar Email Tanggal Pesan Gambar Gerai 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.18 Diagram ERD III.3.6.Desain Database Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun Entity Relationship Diagram (ERD).
41 III.3.6.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]+$ Gerai = @Kode_Tempat + Nama_Sekolah + Nama_Kesek + Alamat + Telepon + Gambar + Lon + Lat + Keterangan 1. Kode_Tempat = {^[-+]?[0-9]} 2. Nama_Gerai = {[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 + 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]}
42 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.3.6.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: 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 toni_indosat 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 - 2. Struktur Tabel Gerai Tabel gerai digunakan untuk menyimpan data Kode_Tempat, Nama_Gerai, Alamat, Gambar, Lon, Lat, Keterangan, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.3 di bawah ini: Tabel III.3 Rancangan Tabel Gerai Nama Database toni_indosat Nama Tabel Gerai No Nama Field Tipe Data Boleh Kosong Kunci 1. Kode_Tempat int(5) Tidak Primary Key 2. Nama_Gerai varchar(25) Tidak -
43 3. Alamat Text Tidak - 4. Gambar int(11) Tidak Foreign Key 5. Lon Double Tidak - 6. Lat Double Tidak - 7. Keterangan Text Tidak - 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.4 di bawah ini: Tabel III.4 Rancangan Tabel Jalan Nama Database toni_indosat 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 - 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.5 di bawah ini: Tabel III.5 Rancangan Tabel Komentar Nama Database toni_indosat 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 - 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.6 di bawah ini:
44 Tabel III.6 Rancangan Tabel Konten Nama Database toni_indosat 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 - 4. Judul Text Tidak - 5. Isi Text Tidak - 6. Thumbnail int(11) Tidak Foreign Key 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 toni_indosat 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: Tabel III.8 Rancangan Tabel User Nama Database toni_indosat 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 -
45 III.3.7. Desain User Interface Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem, desain Input sistem, dan desain database. III.3.7.1. Desain Input Berikut ini adalah rancangan atau desain Input sebagai antarmuka pengguna: 1. Desain Form Login Desain form login dapat dilihat pada gambar III.19: Gambar III.19. Desain Form Login 2. Desain Form Input Gerai Desain form pengisian lokasi gerai dapat dilihat pada gambar III.20 :
46 Gambar III.20. Desain Form Input Gerai 3. Desain Form Input Gambar Desain form pengelolahan gambar dapat dilihat pada gambar III.21 : Gambar III.21. Desain Form Input Gambar 4. Desain Form Input Konten Desain form pengelolahan blog dapat dilihat pada gambar III.22 :
47 Gambar III.22. Desain Form Input Konten 5. Desain Form Input Gambar Berita Desain form pengelolahan gambar berita dapat dilihat pada gambar III.23 : Gambar III.23. Desain Form Input Gambar Berita III.3.7.2. Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem:
48 Peta Gambar III.24 Desain Tampilan Peta