bab 3 metode dan perancangan sistem -...
TRANSCRIPT
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.
29
30
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 Agar dapat mengembangkan sistem website benda cagar
budaya diperlukan identifikasi kebutuhan apa saja yang diinginkan
oleh pengguna. Karena terdapat dua jenis pengguna maka kebutuhan
31
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 dapat memperoleh informasi mengenai benda cagar
budaya dengan mudah, cepat dan mendetail.
32
• 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
Photoshop adalah aplikasi yang digunakan untuk mendesain
tampilan halaman website dan mengekspor desain tersebut ke dalam
image file yang dapat digunakan di skrip web.
33
• 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.
• Sistem Operasi : Mac OSX Snow Leopard (Mac OSX 10.6.8).
34
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
database. Dikarenakan penelitian ini masih dalam masa percobaan
maka kapasitas ruang yang disewa pada webserver hanya sebesar 75
MB.
35
3.3 Perancangan Sistem Perancangan dan implementasi website Cagar Budaya Salatiga
dirancang menggunakan UML sebagai pemodelan sistem.
Gambar 3.2 Use Case Diagram Website Cagar Budaya Salatiga
36
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 diagram website 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
Gambar 3.3 Activity Diagram Akses Benda Melalui Pemindaian QR Code
37
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
Gambar 3.4 merupakan activity diagram untuk mengecek session
member. Pada diagram terlihat ketika pengguna melakukan request
ke server untuk mengakses halaman website tertentu yang
membutuhkan data session akan dicek terlebih dahulu nilai session-
38
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.5 merupakan activity diagram untuk mendeteksi
perangkat yang digunakan oleh pengguna. Pendeteksian dilakukan
dengan mengirimkan informasi user agent dari web browser yang
digunakan ke server cagar budaya. Jika nilai yang dihasilkan adalah
user agent mobile maka akan diproses tampilan mobile dan
sebaliknya akan diproses tampilan desktop.
39
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
Sama halnya dengan aktivitas pemberian komentar, pengguna akan
dicek nilai session-nya (diharuskan login) agar dapat memberikan
nilai rating untuk benda tertentu. Gambar 3.7 merupakan activity
diagram proses pemberian nilai rating terhadap benda. Berbeda
40
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
pengguna administrator juga diharuskan untuk login terlebih dahulu
sesuai dengan proses cek session. Pada aktivitas kelola data ini
41
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.9 Activity Diagram Kelola Data
42
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.
Gambar 3.11 Sequence Diagram Akses Detail Benda Melalui Scan QR Code
43
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 merupakan sequence diagram yang menunjukkan
proses Akses Daftar Benda yaitu untuk menampilkan halaman daftar
benda cagar budaya. Pada diagram tersebut ditunjukkan pula fungsi
cekDevice() untuk menentukan tampilan halaman apakah tampil
dalam format mobile atau desktop.
44
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.15 Sequence Diagram Beri Komentar
45
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 Sequence Diagram Daftar Member Baru
46
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 Sequence Diagram Cetak QR Code
47
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.21 merupakan sequence diagram untuk proses kelola
benda pada halaman administrator.
48
Gambar 3.22 Sequence Diagram Kelola Komentar
Gambar 3.22 merupakan sequence diagram untuk proses kelola
komentar benda pada halaman administrator.
49
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
yang dilakukan oleh administrator antara lain tambah, edit, hapus,
detail dan cetak data.
50
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
Pada Gambar 3.24 kelas yang memiliki relasi satu dengan
yang lainnya hanya kelas benda, member, komentar dan rating. Dari
gambar tersebut pula dapat dilihat bahwa benda dapat memiliki lebih
dari satu komentar dan lebih dari satu nilai rating. Sedangkan
51
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 member dalam tabel fisik memiliki nama cg_member,
tabel ini memiliki 9 field seperti ditampilkan pada Tabel 3.1.
52
Tabel 3.2 Tabel Benda
Nama Field Tipe Data
Panjang Keterangan
Id_benda Integer 5 Primary key, auto increment
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 benda dalam tabel fisik memiliki nama cg_benda, tabel
ini memiliki 17 field seperti ditampilkan pada Tabel 3.2.
53
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,
auto increment tgl_counter Date Tipe_counter Char 1 Akses_via Char 1 Akses_so Varchar 60 Nilai Integer 5
- Tabel Halaman
Tabel halaman dalam tabel fisik memiliki nama cg_halaman,
tabel ini memiliki 6 field seperti ditampilkan pada Tabel 3.5.
- Tabel Istilah
Tabel istilah dalam tabel fisik memiliki nama cg_istilah, tabel
ini memiliki 3 field seperti ditampilkan pada Tabel 3.6.
54
Tabel 3.5 Tabel Halaman
Nama Field Tipe Data Panjang Keterangan Id_halaman Integer 5 Primary key,
auto increment
Judul Varchar 100 Konten Text Tgl_buat Datetime Tgl_ubah Timestamp Terbit Integer 1
- Tabel Trivia
Tabel trivia dalam tabel fisik memiliki nama cg_trivia, tabel
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,
auto increment Nama Varchar 100 Deskripsi Text Tgl_buat Datetime
- Tabel Komentar
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 Info_singkat Text Info_lengkap Text
55
Tabel 3.8 Tabel Komentar
Nama Field Tipe Data Panjang Keterangan Id_komentar Integer 5 Primary key,
auto increment.
Id_benda Integer 5 Id_member Integer 5 Tgl_kirim Datetime Tgl_setuju Datetime Status Int 2 Komentar Text 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 Id_member Integer 5 Nilai Integer 2 Tgl_rating date
a. Normalisasi Data
Jika melihat tabel benda maka akan terlihat kolom dengan
nilai yang berulang-ulang yaitu kolom umur dan bentuk_konservasi,
maka diperlukan normalisasi data.
- Tabel yang belum dinormalisasi
Tabel yang belum dinormalisasikan (unnormalized table)
ditunjukkan pada Tabel 3.10.
56
Tabel 3.10 Tabel Benda Belum Normal
Tabel Benda Id_benda No_inventaris Kode_bantu Nama Pos_administratif Pos_astronomis_ls Pos_astronomis_bt Gps_x Gps_y Kondisi Tahun_berdiri Deskripsi Bentuk_konservasi Baca_via_desktop Baca_via_mobile Istimewa Rating File_foto
Pada tabel benda terdapat field dengan value yang diulang-
ulang yaitu field umur dan bentuk_konservasi. Serta untuk foto
benda yang disimpan dalam file_foto dapat dipecah menjadi tabel
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.
Relasi dengan derajat hubungan banyak ke banyak (many to
many) yang menghubungkan dua entitas diwujudkan dalam bentuk
tabel khusus yang memiliki field (atau foreign key) yang berasal dari
kunci-kunci dari himpunan entitas yang dihubungkannya. Id_bentuk
pada tabel benda dan id_benda pada tabel foto benda merupakan
57
foreign key dan pada tabel foto benda serta bentuk konservasi
merupakan primary key.
Tabel 3.11 Tabel Hasil Normalisasi
Tabel Benda Id_benda * No_inventaris Kode_bantu Nama Pos_administratif Pos_astronomis_ls Pos_astronomis_bt Gps_x Gps_y Kondisi Deskripsi Baca_via_desktop Baca_via_mobile Istimewa Rating Tahun_berdiri Id_bentuk**
Tabel Bentuk Konservasi Id_bentuk * Nama
Tabel Foto Benda Id_foto_benda* Id_benda ** Nama_file
3.5 Perancangan Antarmuka Website yang dibangun terdiri dari tiga sisi yaitu sisi pengguna
(publik) desktop, sisi pengguna (publik) mobile dan sisi
administrator.
a. Sisi Pengguna (publik) Mobile
58
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
Jika pengguna mengakses salah satu menu di halaman beranda
maka akan menuju ke halaman yang bersangkutan dan tampil seperti
Gambar 3.26. Sama halnya ketika pengguna mengakses QR Code
melalui QR Code Scanner maka link yang dihasilkan jika dibuka
akan tampil seperti Gambar 3.26 dimana menampilkan dari detail
benda. Secara garis besar website dibagi menjadi empat bagian,
yaitu header, judul halaman, konten serta footer dan counter.
59
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
menampilkan tahun pembuatan, domain website dan link profil
pembuat.
60
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
Gambar 3.30 Tampilan Antar Muka Konten Halaman
61
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
yaitu daftar menu administrasi, menu profil admin dan konten.
Daftar menu administrasi berisikan menu-menu untuk mengelola
konten website. Menu profil administrator menampilkan nama
62
admin serta menu untuk mengubah profil administrator. Untuk
tampilan daftar data dan form pengisian maupun pengupdatean data
akan ditampilkan pada bagian konten.