BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN III.1. Analisis Sistem yang Berjalan Proses analisa sistem merupakan langkah kedua pada fase pengembangan sistem. Analisa sistem dilakukan untuk mengetahui kelebihan dan kekurangan dari sistem yang selama ini dijalankan oleh perusahaan serta memahami informasi-informasi yang didapat dan dikeluarkan oleh sistem itu sendiri. Untuk mengetahui kekurangan dan kelebihan sistem tersebut, maka perlu diketahui bagaimana sistem yang sedang berjalan pada perusahaan. Analisis data dapat dilakukan dengan analisis input, analisis proses dan analisis output. III.1.1. Analisis Input Analisis input yang ada pada sistem yang lama, yaitu : 1. Konsumen melihat informasi iklan pada banner wisata kuliner di kota Medan. 2. Konsumen mengingat outlet yang ada pada banner. 3. Konsumen mencatat alamat wisata kuliner tersebut. 4. Konsumen mengunjungi wisata kuliner yang mereka ketahui. 28

2 29 III.1.2. Analisis Process Proses yang terjadi pada sistem yang dijelaskan pada langkah-langkah: 1. Konsumen melihat banner Wisata kuliner. 2. Konsumen mengingat alamat outlet Wisata kuliner. 3. Konsumen mengunjungi outlet Wisata kuliner. III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi tempat wisata kuliner yang ada di kota Medan dan mengunjungi outlet Wisata kuliner yang di inginkan maka konsumen akan menerima pesanan yang telah dipesan dan sebuah bukti pembelian yang diberikan oleh penjual atau tempat Wisata kuliner yang bersangkutan. III.2. Evaluasi Sistem yang Berjalan Sistem yang sedang berjalan memiliki beberapa kelemahan yang dijabarkan sebagai berikut: 1. Belum tersedianya Sistem Informasi Geografis Wisata Kulier di Indonesia, khusunya di kota Medan. 2. Belum diketahui efektifitas konsumen wisata kuliner dengan pendekatan sistem informasi geografis. 3. Informasi lokasi wisata kuliner saat ini hanya didapatkan melalui media iklan dan banner yang hanya menginformasikan beberapa lokasi wisata kuliner saja.

3 30 III.3. Desain Sistem Desain sistem pada penelitian ini dibagi menjadi dua desain, yaitu desain sistem secara global untuk penggambaran model sistem secara garis besar dan desain sistem secara detail untuk membantu dalam pembuatan sistem. III.3.1. Desain Sistem Secara Global Desain sistem secara global menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram. III Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.1 : Sistem Informasi Geografis Wisata Kuliner di Kota Medan <include> Tampilan Peta Lokasi Wisata Kuliner Administrator Website Masuk <include> Keluar Halaman Utama Data Kuliner <extends> PETA <include> Kritik dan Saran User Gambar III.1 Use Case Diagram Sistem

4 31 III Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.10 : Jalan Kuliner + Kode_Jalan + Nama_Jalan + Tipe_Jalan + Lon + Lat + Jalan () - InitComponents () + Main (String args []) Using Main +main (String arg []) Using + Kode_Tempat + Nama_Tempat + Informasi + Alamat + Pemilik + Kuliner () - InitComponents () + Main (String args []) Komentar Using Using Penanda + Kode_Komentar + Nama + + Tanggal + Pesan + Komentar () - InitComponents () + Main (String args []) Konten Using Using Connection + ConnectionManager () Using Using + Kode_Penanda + Kode_Tempat + Icon + Gambar + Lon Lat + Penanda () - InitComponents () + Main (String args []) User + Kode_Konten + Tanggal + Terbit + Judul + Isi + Thumbnail + Konten () - InitComponents () + Main (String args []) Gambar III.2 Class Diagram Sistem + Id_User + Username + Password + Nama + User () - InitComponents () + LoginAcction (Evt) + ResetAcction (Evt) III Activity Diagram Bisnis proses yang telah digambarkan pada use case diagram di atas dijabarkan dengan activity diagram :

5 32 1. Activity Diagram Melihat Peta Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari kegiatan melihat panel peta kemudian mencari Artikel Wisata kuliner, 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: Melihat Peta Wisata Kuliner di Medan Mencari salah satu lokasi outlet Kuliner Click Salah Satu Outlet Kuliner Melihat Informasi Lokasi Outlet Kuliner 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: Memasukkan Username Memasukkan Password invalid Menampilkan Pesan Error Valid Aktifkan Menu Administrator Gambar III.4 Activity Diagram Login Admin

6 33 3. Activity Diagram Mengolah Data Wisata kuliner Aktivitas proses mengolah data Wisata kuliner diterangkan dalam langkahlangkah state yang ditunjukmkan pada gambar III.5: Memilih aksi pada form Data Kuliner Pencarian Hapus Tambah Edit 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 Wisata kuliner 4. Activity Diagram Mengolah Data Kritik dan Saran Aktvitas proses mengolah data kritik dan saran diterangkan dalam langkahlangkah state yang ditunjukkan pada gambar III.6: Memilih aksi pada form Kritik dan Saran Tambah Hapus Mengisi Data Menyimpan Data Menekan Tombol Kirim Memilih Data Konfirmasi Penghapusan Menghapus Data Tidak Ya Gambar III.6 Activity Diagram Mengolah Data Kritik dan Saran

7 34 5. Activity Diagram Mengolah Data Marka Aktvitas proses mengolah data marka diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.7: Memilih aksi pada form Data Marka Pencarian Hapus Tambah Edit 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.7 Activity Diagram Mengolah Data Marka 6. Activity Diagram Mengolah Data Artikel Situs Aktvitas proses mengolah data artikel situs diterangkan dalam langkahlangkah state yang ditunjukkan pada gambar III.8: Memilih aksi pada form Data Artikel Situs Pencarian Hapus Tambah Edit 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 Artikel Situs

8 35 7. Activity Diagram Mengolah Data Profil Administrator Aktvitas proses mengolah data profil administrator diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.9: Mengisi Data Username Mengisi Data Nama Administrator Mengisi Data Password Lama Mengisi Data Password Baru Gambar III.9 Activity Diagram Mengolah Data Profil Administrator 8. Activity Diagram Keluar Aktvitas proses keluar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.10 : Menekan Tombol Logout Men-disable Menu Admin Meng-enable Tombol Login Gambar III.10 Activity Diagram Keluar

9 36 III 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.11 : Main GeoToolkit MapViewer setvisible(true) getmap() getinfo() rendermap() getlokasi() selectlokasi() getarah() selectlokasi() Gambar III.11 Sequence Diagram Form Peta Kelas Main memanggil pustaka kode geotoolkit untuk mendapatkan peta melalui metode getmap() yang akan di render pada mapviewer dengan menambahkan informasi yang diambil dari basis data yang tersedia. 2. Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada gambar III.12 :

10 37 Main loginmanager adminmodel setvisible(true) Select() loginaction() Gambar III.12 Sequence Diagram Form Login Kelas Main memanggil objek loginmanager yang akan mencari data yang di input-kan oleh user dari objek adminmodel. Jika data ada, maka objek loginmanager akan mengeksekusi metode loginaction(). 3. Sequence Diagram pada Form Wisata kuliner Serangkaian kegiatan saat terjadi event pada form Wisata kuliner dapat dilihat pada gambar III.13 :

11 38 Main KulinerManager KulinerController KulinerModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(Kuiner) insertrow(kuliner) getformvalue() update(kuliner) updaterow(kuliner) getformvalue() delete(kuliner) deleteselectedrow() Gambar III.13 Sequence Diagram Form Wisata kuliner Kelas Main bertindak sebagai pemicu pada tampilan Wisata kuliner, saat objek Wisata kulinermanager dibentuk, kelas Wisata kulinermanager akan meminta objek Wisata kulinercontroller untuk memperbaharui TableModel yang ada pada objek Wisata kulinermanager, secara sekuensial objek Wisata kulinercontroller akan memanggil method selectall() dari objek Wisata kulinermodel. Saat objek Wisata kulinermanager menangani kejadian penambahan baris dari method insertrow(), objek Wisata kulinercontroller akan mengambil nilai yang di input-kan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek Wisata kulinermodel. Saat objek Wisata kulinermanager mengalami kejadian updaterow(), kelas

12 39 Wisata kulinercontroller() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya ditransfer ke objek Wisata kulinermodel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek Wisata kulinercontroller akan mengambil nilai kunci dari form dan menghapus data melalui methode delete dari objek Wisata kulinermodel. 4. Sequence Diagram pada Form Data Marka Serangkaian kegiatan saat terjadi event pada form Data marka dapat dilihat pada gambar III.14 : Main MarkaManager MarkaController MarkaModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(info) insertrow(marka) getformvalue() update(marka) updaterow(marka) getformvalue() delete(marka) deleteselectedrow() Gambar III.14 Sequence Diagram Form Data Marka

13 40 Kelas Main bertindak sebagai pemicu pada tampilan data marka, saat objek MarkaManager dibentuk, kelas MarkaManager akan meminta objek MarkaController untuk memperbaharui TableModel yang ada pada objek MarkaManager, secara sekuensial objek MarkaController akan memanggil method selectall() dari objek MarkaModel. Saat objek MarkaManager menangani kejadian penambahan baris dari method insertrow(), objek MarkaController akan mengambil nilai yang diinputkan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek MarkaModel. Saat objek MarkaManager mengalami kejadian updaterow(), kelas MarkaController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya ditransfer ke objek MarkaModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek MarkaController akan mengambil nilai kunci dari form dan menghapus data melalui methode delete dari objek MarkaModel. 5. Sequence Diagram pada Form Data Artikel Situs Serangkaian kegiatan saat terjadi event pada form Data artikel dapat dilihat pada gambar III.15 :

14 41 Main ArtikelManager ArtikelController ArtikeliModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(Artikel) insertrow(artikel) getformvalue() update(artikel) updaterow(artikel) getformvalue() delete(artikel) deleteselectedrow() Gambar III.15 Sequence Diagram Form Data Artikel Situs Kelas Main bertindak sebagai pemicu pada tampilan Artikel, saat objek ArtikelManager dibentuk, kelas ArtikelManager akan meminta objek ArtikelController untuk memperbaharui TableModel yang ada pada objek ArtikelManager, secara sekuensial objek ArtikelController akan memanggil method selectall() dari objek ArtikelModel. Saat objek ArtikelManager menangani kejadian penambahan baris dari method insertrow(), objek ArtikelController akan mengambil nilai yang diinputkan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek ArtikelModel. Saat objek ArtikelManager mengalami kejadian updaterow(),

15 42 kelas ArtikelController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya ditransfer ke objek ArtikelModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek ArtikelController akan mengambil nilai kunci dari form dan menghapus data melalui methode delete dari objek ArtikelModel. 6. Sequence Diagram pada Form Profil Administrator Serangkaian kegiatan saat terjadi event pada form Pengaturan profil dapat dilihat pada gambar III.16 : Main ProfilManager ProfilController ProfilModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(Profil) getformvalue() update(profil) updaterow(profil) getformvalue() delete(profil) deleteselectedrow() Gambar III.16 Sequence Diagram Form Profil Administrator

16 43 Kelas Main bertindak sebagai pemicu pada tampilan Profil, saat objek ProfilManager dibentuk, kelas ProfilManager akan meminta objek ProfilController untuk memperbaharui TableModel yang ada pada objek ProfilManager, secara sekuensial objek ProfilController akan memanggil method selectall() dari objek ProfilModel. Saat objek ProfilManager menangani kejadian penambahan baris dari method insertrow(), objek ProfilController akan mengambil nilai yang diinputkan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek ProfilModel. Saat objek ProfilManager mengalami kejadian updaterow(), kelas ProfilController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya ditransfer ke objek ProfilModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek ProfilController akan mengambil nilai kunci dari form dan menghapus data melalui methode delete dari objek ProfilModel. 7. Sequence Diagram pada Saat Logout Ditekan Serangkaian kegiatan saat terjadi event pada form proses logout dapat dilihat pada gambar III.17 :

17 44 Main logoutbutton actionperformed() logoutbutton.disable() loginbutton.enable() menukuliner.disable() menudatamarka.disable() menuolahartikel.disable() menuprofiladministrator.disable() Gambar III.17 Sequence Diagram Form Proses Logout III.3.2. Desain Sistem Secara Detail Tahap perancangan berikutnya yaitu desain sistem secara detail yang meliputi desain output sistem, desain input sistem, dan desain database. III Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem: Halaman Utama Peta Wisata Kuliner Kritik dan Saran Daftar Kuliner Data Marka Artikel Situs Profil Administrator logout Menu Tampilan Peta TAMPILAN PETA OUTLET WISATA KULINER Gambar III.18 Desain Tampilan Peta

18 45 III 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: 2. Desain Form Data Wisata kuliner Gambar III.19 Desain Form Login Desain form Data Wisata kuliner dapat dilihat pada gambar III.20 : Form Data Tempat Wisata Kuliner Kode Tempat Nama Tempat Informasi Tempat Alamat Tempat Pemilik Tambah Reset Gambar III.20 Desain Form Wisata kuliner 3. Desain Form Data Marka Peta Desain form info dapat dilihat pada gambar III.21 :

19 46 Form Data Marka Kuliner Nama Tempat Gambar Marka Gambar Info Longitudinal latitude Pilih Jaco Pilih Icon Pilih Gambar Tampilan Peta Tambah Reset Gambar III.21 Desain Form Marka Peta 4. Desain Form Data Artikel Desain form Data Artikel dapat dilihat pada gambar III.22 : Form Data Konten Judul Isi Halaman Terbit Pilih Thumbnail Pilih Thumbnail Tambah Reset Gambar III.22 Desain Form Data Artikel 5. Desain Form Pengaturan Profil Desain form Pengaturan Profil dapat dilihat pada gambar III.23 :

20 47 Form Pengaturan Akun Username Nama Administrator Passwor Lama Passwor Baru Ubah Reset Gambar III.23 Desain Form Artikel III Desain Basis Data Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun Entity Relationship Diagram (ERD). III 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 User + Username + Password + Nama 1. Id_User = {[0-9][a-z][A-Z][Spasi]} 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]} Kuliner Tempat + Nama_ Tempat + Informasi + Alamat + Pemilik

21 48 1. Kode_Tempat = {[0-9][a-z][A-Z][Spasi]} 2. Nama_Tempat = {[0-9][a-z][A-Z][Spasi]} 3. Informasi = {[0-9][a-z][A-Z][Spasi]} 4. Alamat = {[0-9][a-z][A-Z][Spasi]} 5. Pemilik = {[0-9][a-z][A-Z][Spasi]} Jalan + Nama_Jalan + Tipe_Jalan + Lon + Lat 1. Kode_Jalan = {[0-9][a-z][A-Z][Spasi]} 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]+$ Komentar + Nama + + Tanggal + Pesan 1. Kode_Komentar = {[0-9][a-z][A-Z][Spasi]} 2. Nama = {[0-9][a-z][A-Z][Spasi]} 3. = {[0-9][a-z][A-Z][Spasi]} 4. Tanggal = {[0-9][a-z][A-Z][Spasi]} 5. Pesan {[0-9][a-z][A-Z][Spasi]} Konten + Tanggal + Terbit + Judul + Isi + Thumbnail 1. Kode_Konten = {[0-9][a-z][A-Z][Spasi]} 2. Tanggal = {[0-9][a-z][A-Z][Spasi]} 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]} Penanda + Kode_Tempat + Icon + Gambar + Lon + Lat 1. Kode_Penanda = {[0-9][a-z][A-Z][Spasi]} 2. Kode_Tempat = {[0-9][a-z][A-Z][Spasi]} 3. Icon = {[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]+$ III 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:

22 49 1. Struktur Tabel Admin Struktur tabel Admin dapat dilihat pada Tabel III.2 : Tabel III.2 Struktur Tabel Admin Nama Tabel : User Kunci Primer : Id_User No. Nama Kolom Tipe Data Ukuran PK FK 1. Id_User int 11 Ya - 2. Username varchar Password varchar Nama varchar Struktur Tabel kuliner Struktur Tabel kuliner dapat dilihat pada Tabel III.3 : Tabel III.3 Struktur Tabel kuliner Nama Tabel : kuliner Kunci Primer : Kode_ kuliner No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Tempat int 5 Ya - 2. Nama_Tempat varchar Informasi text Alamat text Pemilik varchar Struktur Tabel Jalan Struktur Tabel Jalan dapat dilihat pada Tabel III.4 : Tabel III.4 Struktur Tabel Jalan Nama Tabel : Jalan Kunci Primer : Kode_Jalan No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Jalan int 5 Ya - 2. Nama_Jalan varchar Tipe_Jalan varchar Lon double Lat double Struktur Tabel Komentar

23 50 Struktur Tabel Komentar dapat dilihat pada Tabel III.5 : Tabel III.5 Struktur Tabel Komentar Nama Tabel : Komentar Kunci Primer : Kode_Komentar No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Komentar int 5 Ya - 2. Nama varchar varchar Tanggal datetime Pesan text Struktur Tabel Konten Struktur Tabel Konten dapat dilihat pada Tabel III.6 : Tabel III.6 Struktur Tabel Konten Nama Tabel : Artikel Kunci Primer : Kode_Artikel No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Konten int 11 Ya - 2. Tanggal timestamp Terbit varchar Judul varchar Isi text Thumbnail varchar Struktur Tabel Penanda Struktur Tabel Penanda dapat dilihat pada Tabel III.7 : Tabel III.7 Struktur Tabel Artikel Nama Tabel : Marka Kunci Primer : Kode_Marka No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Penanda Int 5 Ya - 2. Kode_Tempat Int 5 - Ya 3. Icon varchar Gambar varchar Lon double Lat double - - -

24 51 III 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.24 : Memiliki PETA Memiliki Kode_Konten Kode_Jalan Nama_Jalan Tipe_Jalan Jalan Konten Tanggal Terbit Lat Judul Lon Isi Gambar III.24 Diagram ERD Thumbnail