16 BAB III
PERANCANGAN SISTEM
3.1. Deskripsi Sistem
Semakin cepatnya perkembangan teknologi informasi khususnya berbasis internet, suata lembaga dirasa sangat perlu untuk mengembangkan jaringannya agar dapat membantu dalam menyebarkan informasi.
Selain untuk memberikan informasi, website Gereja GKI Soka Salatiga juga memiliki maksud untuk memperluas jaringan pelayanan, sebagai sumber informasi dan warta serta pengumuman lain berbasis website bagi para jemaat gereja maupun masyarakat luas pada umumnya.
3.2. Spesifikasi Sistem
Dalam perancangan Tugas Akhir Perancangan Redaksional Warta Gereja Kristen Indonesia Jemaat Soka Salatiga ini penulis menggunakan aplikasi perangkat lunak pemrograman web PHP 5.0, SublimeText 2.0, menggunakan web server Apache 2.4.3 dan database MySQL 5.5.27.
3.2.1. Perangkat Lunak
3.2.2. Perangkat Keras
- Processor Intel Centrino Duo @1,66 GHz - Memory 2,49 Giga byte
- Harddisk dengan kapasitas 320GB (kebutuhan minimal 80 GB)
- Monitor dengan resolusi 1280 x 800 pixel - Mouse dan keyboard
3.3. Perancangan Sistem
3.3.1. Kamus Data
Kamus data adalah semua data masukan yang nantinya akan dipakai sebagai field. Berdasarkan penelitian dan analisa yang penulis lakukan, diperoleh data-data sebagai berikut :
a. Data galeri
- id : int(11)
- deksripsi : text - tanggal : datetime
- gambar : text
b. Data komentarwarta
- id : int(11)
- id_warta : int(11)
- nama : varchar(100)
- tanggal : datetime
d. Data renungan
- tanggal : datetime
- gambar : text
3.3.2. Tabel
Tabel merupakan sarana untuk memilah data besar untuk dibagi menjadi beberapa bagian agar mempermudah pengolahan data. Dari data yang telah terkumpul dapat dirancang tabel-tabel sebagai berikut :
Tabel 3.1. Tabel galeri
FIELD TYPE DEFAULT NOT
tanggal datetime Not null
gambar text Not null
Tabel 3.2. Tabel komentarwarta
FIELD TYPE DEFAULT NOT
NULL?
PRIMARY
KEY?
id int(11) Not null Primary
id_warta int(11)
nama varchar(100) Not null
email varchar(100) Not null
komentar text Not null
Tabel 3.3. Tabel kontak
nama varchar(100) Not null
email varchar(100) Not null
telfon varchar(20) Not null
pesan text Not null
tanggal datetime Not null
Tabel 3.4. Tabel renungan
FIELD TYPE DEFAULT NOT
tanggal datetime Not null
Tabel 3.5. Tabel user
FIELD TYPE DEFAULT NOT
NULL?
PRIMARY
KEY?
id int(11) Not null Primary
level varchar(50) Not null
username varchar(50) Not null
Tabel 3.6. Tabel warta
FIELD TYPE DEFAULT NOT
NULL?
PRIMARY
KEY?
id int(11) Not null Primary
judul varchar(100) Not null
kategori varchar(50) Not null
isi longtext Not null
author varchar(50) Not null
tanggal datetime Not null
3.3.3. Perancangan Front end
a. Halaman Homepage (Ta)
Gambar 3.1. Rancangan Homepage Awal
Keterangan :
- Header adalah logo resmi dari Gereja Kristen Indonesia “logo_copy.png”.
- Bagian Main Page berisi tiga baris warta dari pelbagai kategori yang diurutkan dari tanggal terbaru.
Navigasi :
Merupakan tampilan awal ketika web pertama dibuka dan jika mengeklik menu Beranda akan menuju hompage ini
b. Halaman Tentang (Tb)
Rancangan halaman ini mencakup seluruh tampilan halaman dari sub-menu Tentang.
Keterangan :
- Header adalah logo resmi dari Gereja Kristen Indonesia “logo_copy.png”.
- Bagian Main Page berisi konten teks deskripsi dari masing-masing sub-menu Tentang.
- Sidebar berfungsi untuk menampilkan renungan hari ini.
Navigasi :
c. Halaman Warta (Tc)
Gambar 3.3. Rancangan Halaman Warta
Keterangan :
- Header adalah logo resmi dari Gereja Kristen Indonesia “logo_copy.png”.
- Bagian Main Page berisi beberapa baris warta sesuai kategori yang dipilih oleh user. Banyaknya baru ini dapat diatur dari php code.
- Sidebar berfungsi untuk menampilkan renungan hari ini.
Navigasi :
d. Halaman Detil Warta (Td)
Gambar 3.4. Rancangan Halaman Detil Warta
Keterangan :
- Bagian Main Page terdiri dari Image Content dan Text Content.
- Sidebar berfungsi untuk menampilkan renungan hari ini.
Navigasi :
Merupakan halaman yang tampil ketika user klik “Selengkapnya...” pada salah satu warta.
e. Halaman Renungan (Te)
Gambar 3.5. Rancangan Halaman Renungan
Keterangan :
- Header adalah logo resmi dari Gereja Kristen Indonesia “logo_copy.png”.
- Bagian Main Page berisi konten teks isi dari renungang.
- Sidebar berfungsi untuk menampilkan warta terbaru. Navigasi :
f. Halaman Kontak (Tf)
Gambar 3.6. Rancangan Halaman Kontak
Keterangan :
- Header adalah logo resmi dari Gereja Kristen Indonesia “logo_copy.png”.
- Bagian Main Page berisi form yang diisi oleh pengunjung untuk mengirimkan buku tamu.
Navigasi :
Merupakan halaman yang tampil ketika user klik menu Kontak.
3.3.4. Perancangan Back office (Halaman Admin)
a. Halaman Dashboard (T1)
Gambar 3.7. Rancangan Halaman Dashboard Administrator
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Dashboard berisi tulisan “Selamat dating Admin”
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
a. Halaman Daftar Warta (T2)
Gambar 3.8. Rancangan Halaman Daftar Warta Administrator
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Main page berisi daftar warta beserta paging. - Menu navigasi berada di sebelah kiri. Menu
Administrator digunakan untuk logout. Navigasi :
c. Halaman Input Warta (T3)
Gambar 3.9. Rancangan Halaman Input Warta Administrator
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Main page berisi form input warta.
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
d. Halaman Renungan (T4)
Gambar 3.10. Rancangan Halaman Daftar Renungan Administrator
Keterangan :
- Header tidak menampilkan gambar. Hanya
bertuliskan “HalamanAdministrator”
- Bagian Main page berisi daftar renungan beserta paging.
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
e. Halaman Input Renungan (T5)
Gambar 3.11. Rancangan Halaman Input Renungan Administrator
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Main page berisi form input renungan.
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
f. Halaman Buku Tamu (T6)
Gambar 3.12. Rancangan Halaman Daftar Buku Tamu
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Main page berisi daftar buku tamu beserta paging.
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
g. Halaman Detil Buku Tamu (T7)
Gambar 3.13. Rancangan Halaman Daftar Buku Tamu
Keterangan :
- Header tidak menampilkan gambar. Hanya bertuliskan “Halaman Administrator”
- Bagian Main page berisi detil buku tamu.
- Menu navigasi berada di sebelah kiri. Menu Administrator digunakan untuk logout.
Navigasi :
3.3.5. Perancangan Jaringan
Dari peracangan tampilan tersebut maka dapat digambarkan sistem jaringan semantik untuk user dan admin sebagai berikut.
a. Jaringan Semantik User
b. Jaringan Semantik Admin
Gambar 3.15. Jaringan Semantik Admin
3.3.6. Diagram Aliran Data
Dari sistem input dan output user maka dapat digambarkan sistem aliran data dengan diagram sebagai berikut :
a. Menampilkan dan Memberi Komentar Warta
Gambar di atas merupakan skema aliran data saat user mengakses halaman warta dan memberikan komentar warta.
b. Output menampilkan Renungan
Gambar 3.17. Diagram Aliran Data Tampil Renungan
Gambar di atas merupakan skema aliran data saat user mengakses halaman renungan.
c. Input Buku Tamu
Gambar 3.18. Diagram Aliran Data Input Buku Tamu
Sedangkan dari sistem input dan output admin maka dapat digambarkan sistem aliran data dengan diagram sebagai berikut :
a. Input Output Warta
Gambar 3.19. Diagram Aliran Data Input Output Warta Admin
b. Input Output Renungan
Gambar 3.20. Diagram Aliran Data Input Output Warta Admin
Gambar di atas merupakan skema aliran data saat admin mengakses halaman renungan di halaman administrator.
c. Manajemen Buku Tamu
