Bab 3
Metode dan Perancangan Sistem
3.1
Metode Perancangan Sistem
Metode perancangan sistem yang digunakan dalam penelitian ini adalah metode Prototyping. Sering kali seorang pelanggan mendefinisikan satu set tujuan umum dari sebuah perangkat lunak namun tidak mengidentifikasi rincian input, proses atau kebutuhan output. Di sisi lain pengembang mungkin tidak yakin efisiensi dari
sebuah algoritma, kemampuan adaptasi dari sebuah sistem operasi atau bentuk interaksi manusia dan mesin yang harus diambil. Dalam hal tersebut dan situasi lainnya paradigma Prototyping menawarkan pendekatan terbaik (Pressman, 2001).
Gambar 3.1 Metode Prototyping Sumber : Pressman, 2001
Secara umum metode Prototyping dapat ditunjukkan oleh Gambar 3.1. Langkah-langkah dari perancangan sistem dengan menggunakan metode Prototyping adalah sebagai berikut.
1. Kebutuhan Pengguna
Pada Gambar 3.1 langkah pertama dari metode Prototyping ini adalah Listen to customer yang dapat diartikan sebagai analisa kebutuhan pengguna. Dalam sistem yang telah dibuat terdapat dua macam pengguna yaitu pengguna administrator (Dishubkombudpar) dan pengguna publik (masyarakat). Untuk mendapatkan kebutuhan pengguna telah dilakukan wawancara, pengamatan dan pengumpulan data.
2. Pembuatan Prototype
Langkah selanjutnya dari metode Prototyping ini pembuatan dari prototype sistem. Dalam penelitian ini perancangan sistem prototype menggunakan diagram UML seperti Use Case Diagram, Activity Diagram, Class Diagram dan Sequence Diagram serta perancangan database dan tampilan antarmuka pengguna. Kemudian dilanjutkan dengan pembuatan kode-kode program.
3. Evaluasi Prototype
Setelah prototype selesai dibangun dilanjutkan dengan evaluasi prototype yang dilakukan oleh pengguna, dalam penelitian ini adalah Dishubkombudpar.
Ketiga langkah metode Prototyping tersebut akan terus diulang hingga semua kebutuhan pengguna terhadap sistem terpenuhi (pengguna puas).
3.2
Identifikasi Kebutuhan Pengguna
pengguna dapat dikategorikan ke dalam dua jenis yaitu kebutuhan
pengguna administrator (Dishubkombudpar) dan kebutuhan pengguna publik (masyarakat).
1. Kebutuhan Pengguna Administrator
Dari hasil wawancara yang telah dilakukan, pengguna administrator menginginkan sebuah sistem berbasis website yang dapat diakses melalui internet untuk mensosialisasikan keberadaan benda cagar budaya. Pengguna menginginkan sistem yang praktis dan mudah diakses oleh pengguna baik masyarakat maupun administrator.
Untuk detil dari kebutuhan pengguna adalah sebagai berikut
• Sistem diharapkan mudah diakses melalui media yang sering digunakan oleh masyarakat yaitu telepon seluler dan komputer.
• Sistem dapat menampilkan daftar benda cagar budaya serta informasi detilnya.
• Sistem dapat menjadi media interaktif antara masyarakat dengan Dishubkombudpar.
• Sistem dapat dikelola kontennya melalui sebuah halaman administrator.
• Sistem dapat menampilkan peta lokasi keberadaan benda cagar budaya.
2. Kebutuhan Pengguna Publik
Setelah melakukan wawancara terhadap beberapa orang dapat disimpulkan kebutuhan masyarakat atau pengguna publik sebagai berikut.
• Publik menginginkan sistem yang benar-benar mensosialisasikan benda cagar budaya kepada masyarakat.
• Publik dapat menyampaikan kritik, saran, pendapat maupun pertanyaan secara langsung kepada Dinas.
Selain kebutuhan berdasarkan pengguna, dalam pembangunan website cagar budaya ini diperlukan pula kebutuhan untuk sistem yaitu kebutuhan perangkat lunak (software), kebutuhan perangkat keras (hardware) dan kebutuhan online.
1. Kebutuhan Perangkat Lunak (Software)
Perangkat lunak yang dibutuhkan untuk mengembangkan dan menjalankan website ini antara lain :
• MAMP 2.0.1
MAMP adalah paket software yang digunakan untuk membuat komputer lokal seperti server web. Sehingga dapat menjalankan script website dan database tanpa menggunakan koneksi internet. Paket software ini terdiri dari Apache 2.0.64, MySQL 5.5.9 dan PHP 5.2.17 & 5.3.5.
• PhpMyAdmin
PhpMyAdmin adalah aplikasi berbasis web yang dibangun menggunakan PHP untuk mengelola database MySQL.
• Adobe Dreamweaver CS 5
Adalah aplikasi yang digunakan untuk membuat dan mengedit skrip halaman web, yaitu HTML, CSS, Javascript dan PHP.
• Adobe Photoshop CS 5
• Just GPS
Just GPS adalah aplikasi yang terinstal di telepon seluler bersistem operasi Android untuk melakukan pencatatan lokasi GPS dari benda cagar budaya.
• Internet Browser (PC)
Internet Browser (PC) adalah aplikasi yang terdapat di komputer untuk mengakses skrip website dan database yang terdapat di server yang hasil eksekusinya berupa halaman website. Internet Browser yang digunakan adalah Mozilla Firefox, Opera,
Google Chrome atau Internet Explorer.
• Internet Browser (Mobile)
Internet Browser (Mobile) adalah aplikasi untuk mengakses website yang ditanamkan di telepon seluler. Aplikasi yang digunakan adalah Opera Mini atau Internet Browser bawaan dari telepon seluler tersebut.
• ScanLife Barcode Scanner
ScanLife Barcode Scanner adalah aplikasi bebas yang bersifat gratis yang digunakan untuk membaca Barcode (termasuk QR Code) dan mengubahnya menjadi teks yang dapat dibaca oleh pengguna.
2. Kebutuhan Perangkat Keras (Hardware)
Kebutuhan perangkat keras untuk mengembangkan website ini di sisi lokal (offline) antara lain.
• Prosesor : Intel Core 2 Duo 2.4 Ghz.
• Memori : 2 GB RAM.
3. Kebutuhan Online
Agar website dapat diakses oleh masyarakat maka website harus dipasang pada sebuah nama domain serta space pada web server yang terkoneksi dengan internet. Karena pengadaan web server sendiri cukup mahal maka telah disewakan tempat pada webserver dari pihak ketiga yaitu melalui jasa masterweb.net.
- Nama Domain
Nama domain adalah sebuah alamat unik yang diberikan untuk mengidentifikasi webserver tempat kode website tersimpan di internet. Pada penelitian ini website memiliki nama domain : www.cagarbudayasalatiga.com dan tidak menggunakan domain .go.id yang berarti domain kepemerintahan (government) karena website ini masih dalam percobaan penelitian dan jika menggunakan .go.id harus memenuhi syarat tertentu. Syarat tersebut antara lain domain hanya untuk badan pemerintah, menyertakan fotokopi Kartu Tanda Penduduk (KTP) penanggung jawab serta fotokopi surat permohonan yang ditandatangani oleh Sekretaris Jenderal/Sekretaris Menteri/Sekretaris Utama untuk pemerintah pusat dan Sekretaris Daerah untuk pemerintah daerah (PT Master Web Network, 2011). - Ruang Hosting
Ruang hosting atau hosting space adalah kapasitas ruang di server penyedia jasa hosting untuk penempatan skrip kode dan
3.3
Perancangan Sistem
Perancangan dan implementasi website Cagar Budaya Salatiga dirancang menggunakan UML sebagai pemodelan sistem.
Dalam perancangan sistem ini digunakan beberapa diagram
yaitu Use Case Diagram, Activity Diagram, Class Diagram dan Sequence Diagram. Untuk merancang diagram-diagram tersebut digunakan aplikasi Bouml yaitu sebuah aplikasi open source yang digunakan untuk merancang dan menggambar diagram-diagram yang terdapat pada pemodelan UML.
3.3.1 Use Case Diagram
Use Case Diagram menggambarkan antara aktor dengan sistem yang dibuat. Pada use case diagramwebsite cagar budaya ini terdapat dua aktor yaitu aktor admin (pengguna administrator) dan publik (pengguna publik). Pada gambar 3.2 menunjukkan relasi antara aktor dengan sistem.
3.3.2 Activity Diagram
Activity Diagram merupakan diagram yang menggambarkan
aktivitas-aktivitas yang terdapat dalam sebuah sistem berdasarkan dari use case-use case pada Use Case Diagram.
Gambar 3.3 merupakan activity diagram untuk menampilkan informasi detail benda melalui proses pemindaian QR Code pada telepon seluler. Pada gambar terlihat bahwa proses decode QR Code dilakukan pada telepon seluler melalui aplikasi Scanlife. Jika nilai yang dihasilkan berupa link maka akan ditampilkan di mobile browser dan menuju website cagar budaya, jika tidak maka akan tampil isi dari nilai QR Code tersebut.
Gambar 3.4 Activity Diagram Cek Session Member
-nya. Jika bernilai FALSE maka pengguna diharuskan untuk
melakukan login member, jika gagal maka harus login ulang atau melakukan pendaftaran sebagai member baru. Sedangkan jika session bernilai TRUE maka data request akan diproses. Gambar 3.4 juga menggambarkan secara umum untuk proses permintaan penampilan halaman website seperti akses benda, cari benda, akses halaman, akses istilah, akses peta dan kontak admin. Proses permintaan tersebut dilakukan pada proses data request di server.
Gambar 3.5 Activity Diagram Deteksi Perangkat (Device)
Gambar 3.6 merupakan activity diagram proses pemberian
komentar terhadap sebuah benda yang diawali dengan request untuk menampilkan halaman detail benda. Setelah itu dilakukan proses cek session dikarenakan pengguna harus login terlebih dahulu agar dapat memberikan komentar. Jika login berhasil maka pengguna dapat mengirimkan data komentar. Data komentar akan tersimpan dan menunggu moderasi dari administrator. Moderasi administrator dalam hal ini dapat berupa persetujuan komentar, pembatalan persetujuan dan penghapusan data komentar.
Gambar 3.6 Activity Diagram Beri Komentar Benda
dengan komentar, nilai rating yang diberikan tidak melalui moderasi
atau persetujuan administrator akan tetapi akan langsung ditampilkan pada halaman detail benda.
Gambar 3.7 Activity Diagram Beri Nilai Rating Benda
Gambar 3.8 merupakan activity diagram untuk pengecekan nilai session pada halaman administrator pada website. Pada prinsipnya proses cek session pada halaman administrator adalah sama pada halaman pengguna publik. Yang membedakan adalah pada halaman administrator tidak terdapat proses pendaftaran sebagai pengguna administrator.
Gambar 3.9 merupakan activity diagram untuk proses kelola data pada halaman administrator. Agar dapat mengakses proses tersebut
terdapat proses-proses seperti tampil record data, tambah data, edit
data, hapus data dan detail data. Pada aktivitas tersebut pula terdapat proses validasi untuk memeriksa validitas dari data yang dikirimkan.
Gambar 3.8 Activity Diagram Cek Session Pengguna Administrator
Gambar 3.9 mewakili dari semua aktivitas-aktivitas kelola data pada halaman administrator yaitu kelola benda, kelola member, kelola halaman, kelola istilah, kelola triva, kelola komentar dan cetak QR Code.
Gambar 3.10 Activity Diagram Proses Moderasi Komentar
Gambar 3.10 merupakan aktivitas moderasi komentar, pada gambar tersebut ditunjukkan bahwa administrator dapat melakukan dua proses moderasi yaitu setujui komentar dan batal komentar.
3.3.3 Sequence Diagram
Sequence diagram menggambarkan interaksi antar obyek yang diceritakan berdasarkan urutan waktu. Pada sistem ini terdapat sequence diagram untuk pengguna publik dan administrator.
Pada saat pemindaian QR Code selesai dilakukan, hasil dari
decoding QR Code tersebut adalah sebuah link URL yang merujuk ke website cagar budaya yang mengandung variabel ID Benda. Pada Gambar 3.11 terlihat bahwa ID Benda dikirimkan oleh pengguna publik sebagai member yang kemudian melalui fungsi select() pada kelas benda. Dari fungsi tersebut dikembalikan nilai yaitu detail benda.
Gambar 3.12 Sequence Diagram Akses Beranda Halaman Publik
Gambar 3.12 merupakan sequence diagram untuk proses penampilan halaman beranda. Pada diagram tersebut ditunjukkan fungsi-fungsi untuk menampilkan daftar benda istimewa, benda populer berdasarkan rating, benda populer berdasarkan jumlah dibaca dan komentar terakhir benda.
Gambar 3.13 Sequence Diagram Akses Daftar Benda
Gambar 3.14 merupakan sequence diagram untuk melakukan pencarian benda cagar budaya.
Gambar 3.14 Sequence Diagram Cari Benda
Gambar 3.15 merupakan sequence diagram proses pemberian komentar terhadap benda.
Gambar 3.16 Sequence Diagram Beri Rating
Gambar 3.16 merupakan sequence diagram untuk proses pemberian rating benda.
Gambar 3.17 Sequence Diagram Login Member Gambar 3.17 merupakan sequence diagram login member.
Gambar 3.18 merupakan sequence diagram untuk proses
pendaftaran member baru.
Gambar 3.19 Sequence Diagram Login Administrator
Gambar 3.19 merupakan sequence diagram untuk proses login halaman administrator.
Gambar 3.20 merupakan sequence diagram untuk proses pencetakan
QR Code. Pada proses ini hanya terdapat fungsi cetak saja tanpa ada fungsi untuk tambah, edit, hapus dan detail data.
Gambar 3.21 Sequence Diagram Kelola Benda
Gambar 3.22 Sequence Diagram Kelola Komentar
Gambar 3.23 Sequence Diagram Kelola Halaman
Gambar 3.23 merupakan sequence diagram untuk proses kelola data halaman pada halaman administrator. Secara umum di proses-proses
3.3.4 Class Diagram
Class diagram merupakan diagram yang digunakan untuk menampilkan kelas-kelas yang ada dalam sistem yang berupa obyek dan sedang dikembangkan dan dari kelas yang satu ke kelas yang lain mempunyai relasi. Setiap kelas dalam class diagram terdiri dari nama kelas, atribut, dan operasi dari kelas tersebut. Class diagram untuk website cagar budaya seperti terlihat pada Gambar 3.24.
Gambar 3.24 Class Diagram Website Cagar Budaya
member dapat memberikan komentar dan rating lebih dari satu
benda.
3.4
Perancangan
Database
Berdasarkan Class Diagram seperti yang ditunjukkan oleh Gambar 3.24 dapat dirancang untuk database dengan tabel-tabel sebagai berikut.
Tabel 3.1 Tabel Member
Nama Field Tipe Data Panjang Keterangan Id_member Integer 5 Primary key,
auto increment
Username Varchar 30
Password Varchar 32 Hasil enkripsi password dengan
metode md5 berupa 32 karakter. Nama_lengkap Varchar 100
Email Varchar 100
Tgl_daftar Datetime Tanggal daftar Tgl_modifikasi Timestamp Tanggal
modifikasi Kode_keamanan Varchar 7
Daftar_via Char 1
- Tabel Member
Tabel 3.2 Tabel Benda No_inventaris Varchar 30
Kode_bantu Varchar 30 Kode bantu penamaan untuk QR Code
Nama Varchar 100
Pos_administratif Varchar 200 Alamat benda Pos_astronomis_ls Varchar 30
Pos_astronomis_bt Varchar 30
Gps_x Varchar 30 Koordinat GPS
x
Gps_y Varchar 30 Koordinat GPS
y
Kondisi Text
Tahun_berdiri Integer 4 Deskripsi Text
Bentuk_konservasi Varchar 30 Baca_via_desktop Integer 6 Baca_via_mobile Integer 6 Istimewa Integer 1
Rating Float
File_foto Varchar 40
- Tabel Admin
Tabel admin dalam tabel fisik memiliki nama cg_admin, tabel ini memiliki 5 field seperti ditampilkan pada Tabel 3.3.
- Tabel Benda
Tabel 3.3 Tabel Admin
Nama Field Tipe Data Panjang Keterangan Id_admin Integer 3 Primary key,
auto increment
Username Varchar 30
Password Varchar 32
Nama_lengkap Varchar 100
Email Varchar 100
- Tabel Counter
Tabel counter dalam tabel fisik memiliki nama cg_counter, tabel ini memiliki 6 field seperti ditampilkan pada Tabel 3.4.
Tabel 3.4 Tabel Counter
Nama Field Tipe Data Panjang Keterangan Id_counter Integer 5 Primary key,
Tabel halaman dalam tabel fisik memiliki nama cg_halaman, tabel ini memiliki 6 field seperti ditampilkan pada Tabel 3.5.
- Tabel Istilah
Tabel 3.5 Tabel Halaman
Nama Field Tipe Data Panjang Keterangan Id_halaman Integer 5 Primary key,
ini memiliki 4 field seperti ditampilkan pada Tabel 3.7.
Tabel 3.6 Tabel Istilah
Nama Field Tipe Data Panjang Keterangan Id_istilah Integer 5 Primary key,
Tabel komentar dalam tabel fisik memiliki nama cg_komentar, tabel ini memiliki 9 field seperti ditampilkan pada Tabel 3.8.
Tabel 3.7 Tabel Trivia
Nama Field Tipe Data Panjang Keterangan Id_trivia Integer 5 Primary key,
auto increment
Judul Varchar 200
Tabel 3.8 Tabel Komentar
Nama Field Tipe Data Panjang Keterangan Id_komentar Integer 5 Primary key,
Kode_keamanan Varchar 7
Kirim_via Char 1
- Tabel Rating
Tabel rating dalam tabel fisik memiliki nama cg_rating, tabel ini memiliki 4 field seperti ditampilkan pada Tabel 3.9.
Tabel 3.9 Tabel Rating
Nama Field Tipe Data Panjang Keterangan Id_benda Integer 5 nilai yang berulang-ulang yaitu kolom umur dan bentuk_konservasi, maka diperlukan normalisasi data.
- Tabel yang belum dinormalisasi
Tabel 3.10 Tabel Benda Belum Normal baru karena satu benda dapat memiliki foto lebih dari satu.
- Normalisasi bentuk pertama (1NF)
Karena field umur dan bentuk_konservasi memiliki nilai yang berulang maka dipisah menjadi tabel baru serta file_foto dijadikan ke tabel baru.
foreign key dan pada tabel foto benda serta bentuk konservasi
merupakan primary key.
Tabel 3.11 Tabel Hasil Normalisasi Tabel Benda
Website yang dibangun terdiri dari tiga sisi yaitu sisi pengguna (publik) desktop, sisi pengguna (publik) mobile dan sisi administrator.
Gambar 3.25 Tampilan Antar Muka Beranda Mobile
Gambar 3.25 merupakan rancangan antar muka untuk website jika dibuka melalui telepon seluler, tampilan dibuat lebih ringkas dan sederhana hanya menampilkan menu-menu pada halaman
depannya.
Gambar 3.26 Tampilan Antar Muka Halaman Mobile
Header menampilkan logo Cagar Budaya Salatiga. Judul
halaman menampilkan informasi nama halaman yang diakses. Sedangkan untuk isi dari halaman yang diakses akan ditampilkan di bagian konten. Footer hanya menampilkan counter pengunjung serta tahun pembuatan website.
b. Sisi Pengguna (publik) Desktop
Gambar 3.27 Tampilan Antar Muka Halaman Desktop
Jika pengguna mengakses melalui komputer maka akan tampil website dengan antar muka seperti Gambar 3.27. Website ditampilkan lebih kompleks dibandingkan dengan tampilan melalui telepon seluler. Secara garis besar website dibagi menjadi empat bagian yaitu Header dan menubar, Panel kiri, Detail konten dan Footer.
Header dan menubar menampilkan logo website Cagar Budaya Salatiga beserta menu-menu untuk mengakses halaman-halaman yang ada. Sedangkan panel kiri menampilkan formlogin, artikel-artikel informasi, serta statistik pengunjung. Footer hanya
Gambar 3.28 Tampilan Antar Muka Panel Kiri Gambar 3.28 adalah antar muka untuk bagian panel kiri.
Gambar 3.29 Tampilan Antar Muka Form Login Anggota
Jika pengguna belum login maka pada panel kiri akan tampil form login seperti Gambar 3.29
Pada bagian detail konten dapat diperjelas untuk antar muka nya
seperti pada Gambar 3.30 dimana terdapat judul halaman, navigasi halaman dan konten dari halaman yang bersangkutan.
c. Sisi administrator
Gambar 3.31 Tampilan Antar Muka Login Administrator
Untuk mengakses halaman administrator diwajibkan terlebih dahulu untuk login, antar muka ditunjukkan seperti Gambar 3.31. Setelah berhasil login maka akan tampil halaman administrator seperti Gambar 3.32.
Gambar 3.32 Tampilan Antar Muka Halaman Administrator
Secara umum halaman administrator dibagi menjadi tiga bagian
admin serta menu untuk mengubah profil administrator. Untuk
