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
Agar dapat mengembangkan sistem website benda cagar budaya diperlukan identifikasi kebutuhan apa saja yang diinginkan oleh pengguna. Karena terdapat dua jenis pengguna maka kebutuhan
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.
• 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.
• 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 database. Dikarenakan penelitian ini masih dalam masa percobaan maka kapasitas ruang yang disewa pada webserver hanya sebesar 75 MB.
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 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
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-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.
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
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
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 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.
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.21 merupakan sequence diagram untuk proses kelola benda pada halaman administrator.
Gambar 3.22 Sequence Diagram Kelola Komentar
Gambar 3.22 merupakan sequence diagram untuk proses kelola komentar benda pada halaman administrator.
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.
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
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.
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.
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.
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
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.
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
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.
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.
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.
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 yaitu daftar menu administrasi, menu profil admin dan konten. Daftar menu administrasi berisikan menu-menu untuk mengelola konten website. Menu profil administrator menampilkan nama
admin serta menu untuk mengubah profil administrator. Untuk tampilan daftar data dan form pengisian maupun pengupdatean data akan ditampilkan pada bagian konten.
