BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN III.1. Analisis Sistem yang Berjalan 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. Dengan adanya bahan evaluasi sistem yang lama, maka diharapkan agar pembangunan aplikasi yang baru akan dilakukan dapat terbentuk dengan lebih baik daripada 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. Konsumen melihat informasi iklan pada banner Jaco. 2. Konsumen mengingat Konten yang ada pada banner, atau 3. Konsumen mencatat alamat Jaco tersebut. 4. Konsumen mengunjungi outlet Jaco yang mereka ketahui. 34

2 35 Contoh outlet Jaco terlihat seperti gambar III.1.: III.1.2.Analisis Process III.1.3.Analisis Output Gambar III.1.Outlet Jaco Gambar III.2. Activity Diagram Proses Analisis Analisis output untuk rangkaian kerja pada kegiatan mencari Konten Jaco yang lama yaitu, setelah pembeli melihat brosur atau banner dan mengunjungi outlet Jaco yang di inginkan maka konsumen akan menerima pesanan yang telah di pesan dan sebuah bukti pembelian yang diberikan oleh penjual atau toko Jaco yang bersangkutan. Konsumen Melihat Iklan Jaco Iklan Media Televisi Iklan Media Cetak Iklan Brosur Iklan internet Konsumen Mengunjungi Outlet

3 36 Gambar III.3. Brosur Jaco III.2. Evaluasi Sistem yang Berjalan Sistem yang sedang berjalan memiliki beberapa kelemahan dan kelebihan yang dijabarkan sebagai berikut:

4 37 Kelemahan: 1. Tidak adanya sistem informasi geografis Konten cabang Jaco khususnya di kota Medan. 2. Belum diketahui efektifitas konsumen dengan pendekatan sistem informasi geografis. 3. Informasi Konten cabang Jaco saat ini hanya didapatkan melalui berita iklan saja. Kelebihan: 1. Informasi Iklan sebelumnya meyakinkan sebagian konsumen melalui media iklan televisi. 2. Produk-produk jaco memiliki diskon-diskon dan cicilan pembayaran hingga 12 kali pembayaran dan pembayaran bisa melalui kartu kredit. 3. Bintang iklannya menggunakan jasa artis-artis terkenal dan cantik sehingga pelanggan tertarik membeli produk Jaco. 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, Database menggunakan MySQL, Bahasa Program menggunakan Php dan Design peta menggunakan QuantunGIS.

5 38 III Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.4 : Admin User Gambar III.4.Usecase Diagram Sistem III 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 Konten Jaco, selanjutnya menekan

6 39 tombol atau kode yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.5: Gambar III.5.Activity Diagram Melihat Peta 2. Activity Diagram Login Admin Aktvitas proses login admin diterangkan dalam langkah-langkah state, dimulai dari memasukkan username, memasukkan password, jika akun valid maka mengaktifkan menu administrator, sedangkan jika tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.6:

7 40 Memasukkan Form Login Username Masukkan Memasukkan User name Password dan password Valid Invalid Aktifkan Menu Administrator Menampilkan Pesan Error Gambar III.6.Activity Diagram Login Admin 3. Activity Diagram Mengolah Data Jaco Aktivitas proses mengolah data Jaco diterangkan dalam langkah-langkah state yang ditunjukan pada gambar III.7: Gambar III.7.Activity Diagram Mengolah Data Jaco 4. Activity Diagram Mengolah Data Penanda Aktvitas proses mengolah data penanda diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.8:

8 41 Gambar III.8.Activity Diagram Mengolah Data Penanda 5. Activity Diagram Mengolah Data Konten Aktvitas proses mengolah data konten diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.9: Gambar III.9.Activity Diagram Mengolah Data Konten 6. Activity Diagram Mengolah Data Akun Aktvitas proses mengolah data akun diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.10:

9 42 Mengisi Data User Mengisi Data Nama User Mengisi data Password Lama Mengisi Data Password Baru Gambar III.10.Activity Diagram Mengolah Data Akun 7. Activity Diagram Keluar Aktvitas proses keluar diterangkan dalam langkah-langkah state yang ditunjukkan pada gambar III.11: Menekan Tombol Logout Men-disable Menu Admin Meng-enable Tombol Login Gambar III.11.Activity Diagram Keluar III Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.12 :

10 43 Gambar III.12.Class Diagram Sistem 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.13 :

11 44 Main GeoToolkit MapViewer setvisible(true) getmap() getinfo() rendermap() getlokasi() selectlokasi() getarah() selectlokasi() Gambar III.13.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.14 : Main loginmanager adminmodel setvisible(true) Select() loginaction() Gambar III.14.Sequence Diagram Form Login

12 45 Kelas Main memanggil objek loginmanager yang akan mencari data yang diinput-kan oleh user dari objek adminmodel. Jika data ada, maka objek loginmanager akan mengeksekusi metode loginaction(). 3. Sequence Diagram pada Form Jaco Serangkaian kegiatan saat terjadi event pada form Jaco dapat dilihat pada gambar III.15 : Main JacoManager jacocontroller JacoModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(Jaco) insertrow(jaco) getformvalue() update(jaco) updaterow(jaco) getformvalue() delete(jaco) deleteselectedrow() Gambar III.15.Sequence Diagram Form Jaco Kelas Main bertindak sebagai pemicu pada tampilan Jaco, saat objek JacoManager dibentuk, kelas JacoManager akan meminta objek JacoController untuk memperbaharui TableModel yang ada pada objek JacoManager, secara sekuensial objek JacoController akan memanggil methodselectall() dari

13 46 objekjacomodel. Saat objek JacoManager menangani kejadian penambahan baris dari methodinsertrow(), objek JacoController akan mengambil nilai yang di input-kan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek JacoModel. Saat objek JacoManager mengalami kejadian updaterow(), kelas JacoController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya di transfer ke objek JacoModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek JacoController akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek JacoModel. 4. Sequence Diagram pada Form Data Penanda Serangkaian kegiatan saat terjadi event pada form Data Penanda dapat dilihat pada gambar III.16 :

14 47 Main PenandaManager PenandaController PenandaModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(info) insertrow(penanda) getformvalue() update(penanda) updaterow(penanda) getformvalue() delete(penanda) deleteselectedrow() Gambar III.16.Sequence Diagram Form Data Penanda Kelas Main bertindak sebagai pemicu pada tampilan data penanda, saat objek Penanda Manager dibentuk, kelas Penanda Manager akan meminta objek Penanda Controller untuk memperbaharui TableModel yang ada pada objek Penanda Manager, secara sekuensial objek Penanda Controller akan memanggil methodselectall() dari objek PenandaModel. Saat objek Penanda Manager menangani kejadian penambahan baris dari methodinsertrow(), objek Penanda Controller akan mengambil nilai yang diinputkan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek Penanda Model. Saat objek Penanda Manager mengalami kejadian updaterow(),

15 48 kelas Penanda Controller() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya di transfer ke objek Penanda Model dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek Penanda Controller akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek Penanda Model. 5. Sequence Diagram pada Form Data Konten Serangkaian kegiatan saat terjadi event pada form Data Konten dapat dilihat pada gambar III.17 : Main KontenManager KontenController KonteniModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(konten) insertrow(konten) getformvalue() update(konten) updaterow(konten) getformvalue() delete(konten) deleteselectedrow() Gambar III.17.Sequence Diagram Form Data Konten

16 49 Kelas Main bertindak sebagai pemicu pada tampilan Konten, saat objek KontenManager dibentuk, kelas KontenManager akan meminta objek KontenController untuk memperbaharui TableModel yang ada pada objek KontenManager, secara sekuensial objek KontenController akan memanggil methodselectall() dari objek KontenModel. Saat objek KontenManager menangani kejadian penambahan baris dari methodinsertrow(), objek KontenController akan mengambil nilai yang di input kan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek KontenModel. Saat objek KontenManager mengalami kejadian updaterow(), kelas KontenController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya di transfer ke objek KontenModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek KontenController akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek KontenModel. 6. Sequence Diagram pada Form Pengaturan Akun Serangkaian kegiatan saat terjadi event pada form Pengaturan Akun dapat dilihat pada gambar III.18 :

17 50 Main AkunManager AkunController AkunModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(akun) getformvalue() update(akun) updaterow(akun) getformvalue() delete(akun) deleteselectedrow() Gambar III.18.Sequence Diagram Form Akun Kelas Main bertindak sebagai pemicu pada tampilan Akun, saat objek AkunManager dibentuk, kelas AkunManager akan meminta objek AkunController untuk memperbaharui TableModel yang ada pada objek AkunManager, secara sekuensial objek AkunController akan memanggil methodselectall() dari objek AkunModel. Saat objek AkunManager menangani kejadian penambahan baris dari methodinsertrow(), objek AkunController akan mengambil nilai yang di input kan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek AkunModel. Saat objek AkunManager mengalami kejadian updaterow(), kelas AkunController() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya di

18 51 transfer ke objek AkunModel dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek AkunController akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek AkunModel. 7. Sequence Diagram pada Form Pengaturan Akun Serangkaian kegiatan saat terjadi event pada form Pengaturan Akun dapat dilihat pada gambar III.18 : Main AkunManager AkunController AkunModel setvisible(true) SelectAll() updatetablemodel() getformvalue() Insert(akun) getformvalue() update(akun) updaterow(akun) getformvalue() delete(akun) deleteselectedrow() Gambar III.18.Sequence Diagram Form Akun Kelas Main bertindak sebagai pemicu pada tampilan Akun, saat objek Akun Manager dibentuk, kelas Akun Manager akan meminta objek Akun Controller untuk memperbaharui TableModel yang ada pada objek Akun Manager, secara

19 52 sekuensial objek Akun Controller akan memanggil methodselectall() dari objek AkunModel. Saat objek Akun Manager menangani kejadian penambahan baris dari methodinsertrow(), objek Akun Controller akan mengambil nilai yang di input kan pengguna lewat metode getformvalue(), yang selanjutnya akan diproses dalam metode insert() oleh objek Akun Model. Saat objek Akun Manager mengalami kejadian updaterow(), kelas Akun Controller() juga akan mengambil nilai yang dimasukkan pengguna melalui metode getformvalue() yang selanjutnya di transfer ke objek Akun Model dengan metode update(). Operasi terakhir yaitu untuk kejadian deleteselectedrow(), objek Akun Controller akan mengambil nilai kunci dari form dan menghapus data melalui methodedelete dari objek Akun Model. 8. Sequence Diagram pada Form Pencarian Data Jaco Serangkaian kegiatan saat terjadi event pada pencarian data jaco yang dilakukan oleh user dapat dilihat pada gambar III.19 : Main JacoManager JacoController JacoModel setvisible(true) Connection () searchdatajacol() Selectl() getdatajaco() Gambar III.19.Sequence Diagram Pencarian Data Jaco Kelas Main bertindak sebagai pemicu pada tampilan pencarian data jaco, saat objek JacoManager dibentuk, kelas JacoManager akan meminta objek

20 53 JacoController untuk memperbaharui TableModel yang ada pada objek JacoManager, secara sekuensial objek JacoController akan memanggil data yang di cari dari objek JacoManager, kemudian JacoController akan mengirim data kepada JacoModel. 9. Sequence Diagram pada Form Pencarian Data Penanda Serangkaian kegiatan saat terjadi event pada pencarian data penanda yang dilakukan oleh user dapat dilihat pada gambar III.20 : Main PenandaManager PenandaController PenandaModel setvisible(true) Connection () searchdatapenanda() Selectl() getdatapenanda() Gambar III.21.Sequence Diagram Pencarian Data Penanda Kelas Main bertindak sebagai pemicu pada tampilan pencarian data penanda, saat objek PenandaManager dibentuk, kelas PenandaManager akan meminta objek PenandaController untuk memperbaharui TableModel yang ada pada objek PenandaManager, secara sekuensial objek PenandaController akan memanggil data yang dicari dari objek PenandaManager, kemudian PenandaController akan mengirim data kepada PenandaModel.

21 Sequence Diagram pada Form Pencarian Data Konten Serangkaian kegiatan saat terjadi event pada pencarian data Konten yang dilakukan oleh user dapat dilihat pada gambar III.21 : Main KontenManager KontenController KontenModel setvisible(true) Connection () searchdatakonten() Selectl() getdatakonten() Gambar III.21.Sequence Diagram Pencarian Data Konten Kelas Main bertindak sebagai pemicu pada tampilan pencarian data Konten, saat objek KontenManager dibentuk, kelas KontenManager akan meminta objek KontenController untuk memperbaharui TableModel yang ada pada objek KontenManager, secara sekuensial objek KontenController akan memanggil data yang dicari dari objek KontenManager, kemudian KontenController akan mengirim data kepada KontenModel. 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:

22 55 Sistem Informasi Geografis JacoSIG Letak Lokasi Outlet Jaco-Medan Beranda Peta Jaco Komentar Masuk Logo Jaco Binjai Super Mall Jaco Hotel Cambridge Jaco Pusat Jaco Thamrin Jaco Medan Mall Jaco Medan Plaza Jaco Yanglim Jaco Sun Plaza Jaco Plaza Medan Fair Peta Lokasi Jaco Pencarian Lokasi Jaco Nama Jaco Cari TAMPILAN PETA LOKASI JACO Gambar III.22 Desain Tampilan Peta Untuk User Sistem informasi geografis JacoSiG Letak Lokasi Outlet Jaco-Medan Logo Beranda Peta Jaco Komentar Data Jaco Data Penanda Olah Konten Pengaturan Akun Keluar Jaco Binjai Super Mall Jaco Cambridge Jaco Pusat Jaco Medan Mall Jaco Palladium Jaco Medan Plaza Jaco Yanglim Jaco Sun plaza Jaco Plaza Mean Fair Peta Lokasi Jaco Medan Pencarian Lokasi Jaco Nama Jaco Cari Tampilan Peta Gambar III.23 Desain Tampilan Peta Untuk Admin

23 56 Nama Jaco Cari Data No Nama Jaco Informasi Alamat Aksi 1 Jaco Binjai Super Mall textexttext Jalan Soekarno-Hatta Edit Delete 2 Jaco Hotel Cambridge textexttext Jalan S Parman Edit Delete 3 Jaco Pusat textexttext Jalan Asia Edit Delete 4 Jaco Thamrin textexttext jalan Thamrin Edit Delete 5 Jaco Medan Mall textexttext Jalan Sutomo Edit Delete 6 Jaco Palladium textexttext Jalan Kap. Maulana Lubis Edit Delete 7 Jaco Medan Plaza textexttext Jalan Iskandar Muda Edit Delete 8 Jaco Yanglim textexttext Jalan Jalan wahidin Edit Delete 9 Jaco Sun Plaza textexttext Jalan Zainul Arifin Edit Delete 10 Jaco Plaza Medan Fair textexttext Jalan Jalan Gatot Subroto Edit Delete Gambar III.24 Hasil Output Dari Form Data Jaco Nama Jaco Cari Data No Nama Jaco Longitudinal Latitude Aksi 1 Jaco Binjai Super Mall Edit Delete 2 Jaco Hotel Cambridge Edit Delete 3 Jaco Pusat Edit Delete 4 Jaco Thamrin Edit Delete 5 Jaco Medan Mall Edit Delete 6 Jaco Palladium Edit Delete 7 Jaco Medan Plaza Edit Delete 8 Jaco Yanglim Edit Delete 9 Jaco Sun Plaza Edit Delete 10 Jaco Plaza Medan Fair Edit Delete Gambar III.25 Hasil Output Dari Form Penanda Peta Nama Jaco Cari data No Judul Isi Terbit Aksi 1 Kozuii Slimming Suit Textextextextextext Ya Edit Delete 2 J-Yoga Textextextextextext Ya Edit Delete 3 Alat Fitnes Kesehatan Textextextextextext Ya Edit Delete 4 Cabang Perusahaan Textextextextextext Ya Edit Delete 5 Siapa Kita?? Textextextextextext Ya Edit Delete Gambar III.26 Hasil Output Dari Form Olah Konten

24 57 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.25: Gambar III.25 Desain Form Input Login untuk Admin 2. Desain Form Data Jaco Desain form Data Jaco dapat dilihat pada gambar III.27 : Gambar III.27 Desain Form Input Data Jaco

25 58 3. Desain Form Data Penanda Peta Desain form Data Penanda Peta dapat dilihat pada gambar III.28 : Form Data Penanda Peta Nama Jaco Icon Gambar Pilih Jaco Pilih Icon Pilih Gambar Longitudinal latitude Tambah Reset Gambar III.28 Desain Form Input Penanda Peta 4. Desain Form Data Konten Desain form Data Konten dapat dilihat pada gambar III.29 : Form Data Konten Nama Jaco Pilih Isi Halaman Thumbnail Pilih Thumbnail Tambah Reset Gambar III.29 Desain Form input Data Konten

26 59 5. Desain Form Pengaturan Akun Desain form Pengaturan Akun dapat dilihat pada gambar III.30 : Form Pengaturan Akun Username Nama Administrator Passwor Lama Passwor Baru Ubah Reset Gambar III.30 Desain Form Input Pengaturan Akun III Desain Basis Data Desain basis data terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun EntityRelationship 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 EkspresiReguler Data Jaco + Nama_Jaco + Informasi + Alamat 1. Kode_Jaco = {[0-9][a-z][A-Z][Spasi]}

27 60 2. Nama_Jaco = {[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]} 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_Jaco + Icon + Gambar + Lon + Lat 1. Kode_Penanda = {[0-9][a-z][A-Z][Spasi]} 2. Kode_Jaco = {[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]+$ 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]}

28 61 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: Nama database : Fazar_Jaco Nama Tabel : Tabel Jaco, Tabel Jalan, Tabel Komentar, 1. Struktur Tabel Jaco Tabel Konten, Tabel Penanda, Tabel User. Struktur Tabel Jaco dapat dilihat pada Tabel III.2 : Tabel III.2 Struktur Tabel Jaco Nama Tabel : Jaco Kunci Primer : Kode_Jaco No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Jaco int 5 Ya - 2. Nama_Jaco varchar Informasi text Alamat text Struktur Tabel Jalan Struktur Tabel Jalan dapat dilihat pada Tabel III.3 : Tabel III.3 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 - - -

29 62 3. Struktur Tabel Komentar Struktur Tabel Komentar dapat dilihat pada Tabel III.4 : Tabel III.4 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 Penanda Struktur Tabel Penanda dapat dilihat pada Tabel III.5 : Tabel III.5 Struktur Tabel Penanda Nama Tabel : Penanda Kunci Primer : Kode_Penanda No. Nama Kolom Tipe Data Ukuran PK FK 1. Kode_Penanda int 5 Ya - 2. Kode_Jaco int 5 - Ya 3. Icon varchar Gambar varchar Lon double Lat double Struktur Tabel Konten Struktur Tabel Konten dapat dilihat pada Tabel III.6 : Tabel III.6 Struktur Tabel Konten Nama Tabel : Konten Kunci Primer Kode_Konten 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

30 63 6. Struktur Tabel User Struktur Tabel User dapat dilihat pada Tabel III.7 : Tabel III.7 Struktur Tabel User 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 III ERD (EntityRelationship 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.28 : Kode_Jaco Nama_Jaco Informasi Jaco Memiliki Alamat Kode_Konten Kode_Jalan Memiliki Memiliki Konten Tanggal Terbit Nama_Jalan Tipe_Jalan Jalan Judul Isi Lat Lon Kode_Penanda Kode_Jaco Penanda Gambar Lon Thumbnail Icon Lat Gambar III.31 Diagram ERD

31 64 III Logika/Algoritma Program Logika atau algoritma program pada penelitian ini menggunakan algoritma tipe deskriptif. Algoritma yang akan dibuat dapat dipahami dengan langkahlangkah deskripsi sebagai berikut: 1. Mengakses otoritas sistem: 1.1. Memasukan nama pengguna Memasukan kata sandi Menekan tombol "Login" Jika otoritas valid maka mengaktifkan menu administrator Jika tidak valid maka menampilkan pesan peringatan. 2. Mengolah Data Admin: 2.1. Menekan menu Pengaturan Akun Mengubah data Admin: Mengubah atribut Username Mengubah atribut Nama Administrator Mengubah atribut Password Menekan tombol "Ubah". 3. Mengolah Data Jaco: 3.1. Menekan menu data Jaco 3.2. Mencari data Akun: Memilih pencarian berdaisarkan kolom yang terseda Mengetik kata kunci pencarian pada komponen pencarian.

32 Menambah data Jaco : Mengisi atribut Nama Jaco Mengisi atribut Informasi Mengisi atribut Alamat Menekan tombol "Tambah" Mengubah data Jaco : Memilih baris data Jaco yang akan diubah pada tabel Jaco Mengisi atribut Nama Jaco Mengisi atribut Informasi Mengisi atribut Alamat Menekan tombol "Simpan" Menghapus data Jaco : Memilih baris data jaco yang akan dihapus pada komponen tabel Jaco Memilih konfirmasi dari "Confirmation Dialog" Jika menekan "Yes" maka hapus data Akun yang terpilih Jika menekan "No" maka membatalkan proses penghapusan data Akun yang terpilih. 4. Mengolah Data Penanda : 4.1. Menekan menu data Penanda 4.2. Mencari datapenanda: Memilih pencarian berdasarkan kolom yang tersedia Mengetik kata kunci pencarian pada komponen pencarian.

33 Menambah data Penanda: Mengisi atribut Nama Mengisi atribut Icon Mengisi atribut Gambar Mengisi atribut Longitudinal Mengisi atribut Latitude Menekan tombol "Tambah" Mengubah data Penanda: Memilih baris data penanda yang akan diubah pada tabel penanda Mengisi atribut Nama Mengisi atribut Icon Mengisi atribut Gambar Mengisi atribut Longitudinal Mengisi atribut Latitude Menekan tombol "Ubah" Menghapus data Penanda: Memilih baris data penanda yang akan dihapus pada komponen tabel penanda Memilih konfirmasi dari "Confirmation Dialog" Jika menekan "Yes" maka hapus data Info yang terpilih Jika menekan "No" maka membatalkan proses penghapusan data Info yang terpilih.

34 67 5. Mengolah Data Konten: 5.1. Menekan menu data Konten Mencari data Konten: Memilih pencarian berdasarkan kolom yang terseda Mengetik kata kunci pencarian pada komponen pencarian Menambah data Konten: Mengisi atribut Judul Mengisi atribut Terbit Mengisi atribut Isi Halaman Mengisi atribut Thumbnail Menekan tombol "Tambah" Mengubah data Konten: Memilih baris data Konten yang akan diubah pada tabel Konten Mengubah atribut Judul Mengubah atribut Terbit Mengubah atribut Isi Halaman Mengubah atribut Thumbnail Menekan tombol "Simpan" Menghapus data Konten: Memilih baris data Konten yang akan dihapus pada komponen tabel Konten Memilih konfirmasi dari "Confirmation Dialog".

35 Jika menekan "Yes" maka hapus data Konten yang terpilih Jika menekan "No" maka membatalkan proses penghapusan data