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.