Perancangan Sistem Construction Rancang bangun situs museum batik berbasis web studi kasus : Museum Batik Yogyakarta.

3.4. Perancangan Sistem

3.4.1. Perancangan Basis Data

3.4.1.1. Database Conceptual Design

ADMIN Komentar Password Username Email Batik Email username Id_komentar Tgl_komentar Isi_komentar Kategori punya Tanggalapn Tgl_tanggapan Keterangan Id_batik nama_batik Gambar_1 Warna Teknik_prosesbatik Nama_kategori Keterangan 1 N Tahun Corakmotif Karya Punya Daerah Nama_daerah Id_daerah Alat_batik Nama_alat Gambar_alat Id_alat Id_kategori N 1 Id_kategori Id_daerah beri 1 N Gambar 3. 10. ER Diagram

3.4.1.2. . Database Logical Design

Gambar 3. 11. Database logical design

3.4.2. Database Physical Design

1. Tabel Admin Atribut Data Tipe Constraint Username Varchar230 PK, Not Null Password Varchar233 Not Null Email Varchar250 Not Null Tabel 3. 1. Tabel Admin 2. Tabel Kategori Atribut Data Tipe Constraint id_kategori Char7 PK, Not Null Nama_kategori Varchar250 Not Null Keterangan Text Not Null Tabel 3. 2. Tabel Kategori 3. Tabel Batik Atribut Data Tipe Constraint id_batik Varchar230 PK, Not Null nama_kategori Char7 FK, Not Null Nama_batik Varchar230 Not Null Gambar_1 Varchar250 Not Null Warna Varchar250 Not Null Tahun Varchar250 Not Null Karya Varchar250 Not Null Motif Varchar250 Not Null Proses Varchar250 Not Null Tabel 3. 3. Tabel Batik 4. Tabel Komentar Atribut Data Tipe Constraint id_komentar Varchar230 PK, Not Null username Varchar230 FK, Not Null Email Varchar230 Not Null Isi_komentar Varchar250 Not Null Tgl_isikomentar Datetime Not Null tanggapan Varchar250 Not Null Tgl_tanggapan Datetime Not Null Keterangan Enum‘dibaca’,’belum’ Not Null Tabel 3. 4. Tabel Komentar 5. Tabel Daerah Atribut Data Tipe Constraint id_daerah Char7 PK, Not Null Daerah Varchar250 Not Null Tabel 3. 5. Tabel daerah 6. Tabel Alat_batik Atribut Data Tipe Constraint id_alat Char7 PK, Not Null Nama_alat Varchar250 Not Null Gambar_alat Varchar250 Not Null Tabel 3. 6. Tabel alat batik

3.5. Modeling

Proses modeling ini berfokus pada perancangan user interface pada sistem yang akan dibangun. Pada proses ini user interface dibuat menggunakan aplikasi visio.

3.5.1. Perancangan Interface

3. 5.1.2. Admin

3.5.1.2.1. Menu Login Admin HEADER Footer Login Username Password Gambar 3. 12 Interface Menu Login Admin 3. 5.1.2.2. Menu utama HEADER Footer Admin HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Gambar 3. 13. Interface Menu utama Admin 3.5.1.2.3. Tampilan Frame Admin olah data kategori HEADER Footer Olah Kategori Batik Id_batik kategori Nama Kategori Keterangan SIMPAN BATAL HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK SEARCH Footer Gambar 3. 14. Interface Admin Olah Kategori Batik 3.5.1.2.4. Tampilan Frame Admin Edit olah data kategori HEADER Footer Edit data kategori batik Id_kategori SIMPAN BATAL HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin kategori Keterangan Gambar 3. 15. Interface Admin Edit Olah Kategori Batik 3.5.1.2.5. Tampilan Frame Admin Detail olah data kategori HEADER Footer Detail data kategori batik Id_kategori Kembali HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Kategori Keterangan Gambar 3. 16. Interface Admin Detail Olah Kategori Batik 3.5.1.2.4 Tampilan Frame Admin olah Batik HEADER Footer OLAH DATA BATIK Id_batik Kategori Nama_Batik Gambar 1 Warna SIMPAN BATAL Browse Footer HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Daerah Tahun Karya Motif Proses SEARCH Gambar 3. 17. Interface Admin Olah Batik 3.5.1.2.6. Tampilan Frame Admin Edit Olah Batik HEADER Footer Edit data batik Id_batik Kategori Nama_Batik Gambar 1 Warna SIMPAN BATAL Browse HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Daerah Tahun Karya Motif Proses Gambar 3. 18. Interface Admin Edit data Batik 3.5.1.2.7. Tampilan Frame Admin Detail Batik HEADER Footer Detail data batik Id batik Kembali HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Nama batik warna Tahun karya Motif Gambar 3. 19. Interface Admin Detail data Batik 3.5.1.2.8. Tampilan Frame Admin Olah Daerah HEADER Footer OLAH DATA DAERAH BATIK Id_batik SIMPAN BATAL Footer HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin SEARCH Daerah Gambar 3. 20. Interface Admin Olah daerah Batik 3.5.1.2.9. Tampilan Frame Admin Edit data Daerah HEADER Footer Edit data daerah batik Id_derah SIMPAN BATAL HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin daerah Gambar 3. 21. Interface Admin Edit daerah 3.5.1.2.10. Tampilan Frame Admin Detail Daerah HEADER Footer Detail data daerah Id daerah Kembali HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Daerah Gambar 3. 22. Interface Admin detail daerah 3.5.1.2.11. Tampilan Frame Admin Alat batik HEADER Footer OLAH DATA ALAT BATIK Id_alat SIMPAN BATAL Footer HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin SEARCH Nama alat Gambar alat Gambar 3. 23. Interface Admin Olah Batik 3.5.1.2.12. Tampilan Frame Admin Alat batik HEADER Footer Edit data batik Id_alat Nama alat Gambar alat SIMPAN BATAL Browse HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Gambar alat Gambar 3. 24. Interface Admin Edit alat Batik 3.5.1.2.13. Tampilan Frame Admin Alat batik HEADER Footer Detail data alat batik Id alat Kembali HOME OLAH DATA KATEGORI OLAH DATA BATIK PESAN LOGOUT OLAH DATA DAERAH ALAT BATIK Admin Nama alat Gambar Gambar 3. 25. Interface Admin detail alat Batik 3.5.1.2.14. Tampilan Frame Admin Komentar HEADER Footer LOGIN HOME OLAH DATA KATEGORI OLAH DATA BATIK KOMENTAR LOGOUT Komentar Tulis komentar SIMPAN BATAL Email Isi Tanggal Tanggapan Gambar 3. 27. Interface Tanggapi komentar 3. 5. 1.3. Pengunjung Gambar 3. 26. Interface komentar 3. 5. 1. 3. 1. Tampilan Home Pengunjung HEADER FOOTER HOME Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi Slide Show Batik Slide Show Batik Slide Show Batik Welcome to Meseum Batik Yogyakarta Komentar Slide Show Batik Slide Show Batik Slide Show Batik Read QR code Gambar 3. 28. Interface Home Pengunjung 3. 5. 1. 3. 2. Tampilan Profil Pengunjung HEADER FOOTER HOME Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi PROFIL TEXT Read QR code Komentar Gambar 3. 29. Interface Profile Pengunjung 3. 5. 1. 3. 3. Tampilan Pengunjung Tentang Batik HEADER FOOTER TENTANG BATIK SEJARAH BATIK Perkembangan batik di Indonesia Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi Read QR code Komentar Home Help Gambar 3. 30. Interface Tentang Batik 3. 5. 1. 3. 4 Tampilan Pengunjung Galeri HEADER FOOTER GALERI Foto Read QR code Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Foto Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi Komentar Home Gambar 3. 31. Interface Galeri 3. 5. 1. 3. 5. Detail Batik HEADER Footer DETAIL BATIK SIMPAN BATAL Id_barik : Kategori : Nama_batik : Keterangan : QR CODE Gambar 3. 32. Interface Detail Batik 3. 5. 1. 3. 6. Tampilan Pengunjung Tentang Museum HEADER FOOTER Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi TENTANG MUSEUM Komentar Read QR code TEXT Home Help Gambar 3. 33. Interface Tentang Museum 3. 5. 1. 3. 7. Tampilan Pengunjung Peta Lokasi HEADER FOOTER PETA PETA LOKASI Read QR code Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi Komentar Home Gambar 3. 34. Interface Peta Lokasi 3. 5. 1. 3. 8. Tampilan Pengunjung Komentar HEADER FOOTER HOME Profile Tentang Batik Galeri Detail batik Tentang Museum Peta lokasi KOMENTAR Komentar Read QR code Help Silakan isi form di bawah : Email Pesan Kirim Batal Percakapan Email : ……….. Komentar : ……….. Tanggal kirim : ………... Tanggapan : ……….. Tanggal tanggapan : ……….. Email : ……….. Komentar : ……….. Tanggal kirim : ………... Tanggapan : ……….. Tanggal tanggapan : ……….. Email : ……….. Komentar : ……….. Tanggal kirim : ………... Tanggapan : ……….. Tanggal tanggapan : ……….. Gambar 3. 35. Interface Komentar Pengunjung 3. 5. 1. 3. 9. Tampilan Pengunjung Bantuan HEADER FOOTER HOME Profile Tentang Batik Galeri Deyail batik Tentang Museum Peta lokasi BANTUAN Pesan Read QR code Help INFORMASI Gambar 3. 36. Interface Bantuan 77

Bab IV IMPLEMENTASI SISTEM

4.1. Construction

Pada Tahap ini proses merupakan tahap coding dan juga tahap testing, dimana pembuatan program menggunakan PHP dan DBMS MySQL sebagai database. Setelah itu dilakukan testing dengan menggunakan alfa test untuk menguji sistem dan juga beta test menggunakan kuisioner. 4..1.1. Spesifikasi Perangkat Keras dan Perangkat Lunak Perangkat keras yang digunakan untuk membangun sistem adalah sebagai berikut : Proccessor : Intel Core i3 Hardisk : 640 GB Memory : 4 GB Perangkat lunak yang digunakan untuk membangun sistem adalah sebagai berikut : Sistem Operasi : Windows 7 32 bit Bahasa Pemrograman : PHP DBMS : MySQL Tools QR Code : Barcode

4.1.2. Implementasi Basis Data

Pada tahap ini dilakukan pembangunan basis data menggunakan MySql untuk memunjang sistem yang akan dibangun. Basis data yang dibangun terdiri dari table- tabel pada bab sebelumnya. Berikut ini query yang digunakan untuk membuat database dengan nama “Museum_Batik” beserta table-tabel didalamnya:  Tabel Admin  Tabel Kategori  Tabel Batik  Tabel Komentar CREATE TABLE IF NOT EXISTS `admin` `Username` varchar30 NOT NULL, `Password` varchar33 NOT NULL, `Email` varchar50 NOT NULL ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `kategori` `Id_kategori` char7 NOT NULL, `Nama_kategori` varchar50 NOT NULL, `Keterangan` text NOT NULL ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE IF NOT EXISTS `batik` `Id_batik` char7 NOT NULL, `Id_kategori` char7 NOT NULL, `Nama_batik` varchar50 NOT NULL, `Id_daerah` char7 NOT NULL, `Gambar_1` varchar50 NOT NULL, `Gambar_2` varchar50 NOT NULL, `Warna` varchar50 NOT NULL, `Tahun` varchar50 NOT NULL, `Karya` varchar50 NOT NULL, `Motif` varchar50 NOT NULL, `Teknik_prosesbatik` varchar50 NOT NULL ENGINE=InnoDB DEFAULT CHARSET=latin1;  Tabel Daerah  Tabel Alat Batik

4.2. Hasil α test