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
menggunakan metode Prototyping adalah sebagai berikut. 29
dengan
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 Id_member
Panjang Keterangan 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 -
Tipe Data Integer
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
-
Id_benda
Tipe Data Integer
Panjang Keterangan
No_inventaris Kode_bantu
Varchar 30 Varchar 30
Nama Pos_administratif Pos_astronomis_ls Pos_astronomis_bt Gps_x
Varchar Varchar Varchar Varchar Varchar
Gps_y
Varchar 30
Kondisi Tahun_berdiri Deskripsi Bentuk_konservasi Baca_via_desktop Baca_via_mobile Istimewa Rating File_foto
Text Integer Text Varchar Integer Integer Integer Float Varchar
5
100 200 30 30 30
Primary key, auto increment Kode bantu penamaan untuk QR Code Alamat benda Koordinat GPS x Koordinat GPS y
4 30 6 6 1 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 Id_admin
Tipe Data Integer
Panjang 3
Username Password Nama_lengkap Email
Varchar Varchar Varchar Varchar
30 32 100 100
Keterangan Primary key, auto increment
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 Id_counter
Tipe Data Integer
tgl_counter Tipe_counter Akses_via Akses_so Nilai
Date Char Char Varchar Integer
Panjang Keterangan 5 Primary key, auto increment 1 1 60 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 Id_halaman
Tipe Data Integer
Panjang 5
Judul Konten Tgl_buat Tgl_ubah Terbit
Varchar Text Datetime Timestamp Integer
100
Keterangan Primary key, auto increment
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 Id_istilah
Tipe Data Integer
Nama Deskripsi Tgl_buat
Varchar Text Datetime
Panjang Keterangan 5 Primary key, auto increment 100
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 Id_trivia
Tipe Data Panjang Integer 5
Judul Info_singkat Info_lengkap
Varchar Text Text
200
Keterangan Primary key, auto increment
55
Tabel 3.8 Tabel Komentar
Nama Field Id_komentar
Tipe Data Integer
Id_benda Id_member Tgl_kirim Tgl_setuju Status Komentar Kode_keamanan Kirim_via
Integer Integer Datetime Datetime Int Text Varchar Char
-
Panjang Keterangan 5 Primary key, auto increment. 5 5 2 7 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 Id_benda Id_member Nilai Tgl_rating a.
Tipe Data Integer Integer Integer date
Panjang Keterangan 5 5 2
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
Tabel yang belum dinormalisasi yang
belum
dinormalisasikan
ditunjukkan pada Tabel 3.10.
(unnormalized
table)
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 diulangulang 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
administrator. a.
Sisi Pengguna (publik) Mobile
(publik)
mobile
dan
sisi
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 halamanhalaman 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.
