T0__BAB III Institutional Repository | Satya Wacana Christian University: Perancangan Website Gereja GKI Soka Salatiga T0 BAB III

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
-

Microsoft Windows 7

16

17

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)

3.3.

-

Monitor dengan resolusi 1280 x 800 pixel

-

Mouse dan keyboard

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)

-

email

: varchar(100)

-

komentar

: text

18

-

tanggal

: datetime

c. Data kontak
-

id

: int(11)

-

nama

: varchar(100)

-

email

: varchar(100)

-

telfon

: varchar(20)

-

pesan

: text

-

tanggal

: datetime

d. Data renungan
-

id

: int(11)

-

judul

: text

-

ayat

: text

-

isi

: text

-

tanggal

: datetime

e. Data user
-

id

: int(11)

-

level

: varchar(50)

-

username

: varchar(50)

-

password

: varchar(50)

f. Data warta
-

id

: int(11)

-

judul

: varchar(100)

-

kategori

: varchar(50)

-

isi

: longtext

-

author

: varchar(50)

19

-

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

PRIMARY

NULL?

KEY?
Primary

id

int(11)

Not null

deksripsi

text

Not null

tanggal

datetime

Not null

gambar

text

Not null

Tabel 3.2. Tabel komentarwarta
FIELD

TYPE

DEFAULT

NOT

PRIMARY

NULL?

KEY?

Not null

Primary

id

int(11)

id_warta

int(11)

nama

varchar(100)

Not null

email

varchar(100)

Not null

komentar

text

Not null

tanggal

datetime

Not null

20

Tabel 3.3. Tabel kontak
FIELD

TYPE

DEFAULT

NOT

PRIMARY

NULL?

KEY?
Primary

id

int(11)

Not null

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

PRIMARY

NULL?

KEY?
Primary

id

int(11)

Not null

judul

text

Not null

ayat

text

Not null

isi

text

Not null

tanggal

datetime

Not null

Tabel 3.5. Tabel user
FIELD

TYPE

DEFAULT

NOT

PRIMARY

NULL?

KEY?
Primary

id

int(11)

Not null

level

varchar(50)

Not null

username

varchar(50)

Not null

password

varchar(50)

Not null

21

Tabel 3.6. Tabel warta
FIELD

TYPE

DEFAULT

NOT

PRIMARY

NULL?

KEY?
Primary

id

int(11)

Not null

judul

varchar(100)

Not null

kategori

varchar(50)

Not null

isi

longtext

Not null

author

varchar(50)

Not null

tanggal

datetime

Not null

gambar

text

Not null

22

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.

-

Sidebar berfungsi untuk menampilkan renungan

hari ini.

23

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

tampilan halaman dari sub-menu Tentang.

Gambar 3.2. Rancangan Halaman Tentang

seluruh

24

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 :



Merupakan halaman yang tampil ketika user klik
menu Tentang, kemudian memilih sub-menu yang
ada di dalamnya yaitu : Sejarah, Visi & Misi, Sistem
Organisasi, dan Pelayanan Gereja.

25

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 :



Merupakan halaman yang tampil ketika user klik submenu yang berada di dalam menu Warta.

26

d. Halaman Detil Warta (Td)

Gambar 3.4. Rancangan Halaman Detil Warta

Keterangan :

-

Header adalah logo resmi dari Gereja Kristen
Indonesia “logo_copy.png”.

27

-

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.
Form

pada

bagian

bawah

digunakan

untuk

memberikan komentar pada warta tersebut. Dan
terdapat security code captcha untuk verifikasi
keamanan.

28

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 :



Merupakan halaman yang tampil ketika user klik
“Selengkapnya..” pada renungan yang ada di sidebar
beranda atau warta.

29

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.

-

Sidebar berfungsi untuk menampilkan alamat GKI

Soka.

30

Navigasi :





Merupakan halaman yang tampil ketika user klik
menu Kontak.
Terdapat form yang akan diisi oleh pengunjung untuk
mengirimkan buku tamu dan terdapat security code
captcha sebagai verifikasi keamanan.

31

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 :



Merupakan halaman yang tampil ketika admin
berhasil login pada administrator.

32

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 :



Merupakan halaman yang tampil ketika admin
mengakses halaman warta.

33

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 :



Merupakan halaman yang tampil ketika admin
mengakses halaman input warta.

34

d. Halaman Renungan (T4)

Gambar 3.10. Rancangan Halaman Daftar Renungan Administrator

Keterangan :

-

Header

tidak

menampilkan

gambar.

Hanya

bertuliskan “Halaman Administrator”
-

Bagian Main page berisi daftar renungan beserta
paging.

-

Menu navigasi berada di sebelah kiri. Menu
Administrator digunakan untuk logout.

Navigasi :



Merupakan halaman yang tampil ketika admin
mengakses halaman daftar renungan.

35

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 :



Merupakan halaman yang tampil ketika admin
mengakses halaman daftar renungan.

36

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 :



Merupakan halaman yang tampil ketika admin
mengakses halaman daftar buku tamu.

37

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 :



Merupakan halaman yang tampil ketika admin
mengakses halaman detil buku tamu.

38

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

Gambar 3.14. Jaringan Semantik User

39

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 3.16. Diagram Aliran Data Tampil & Komentar Warta User

40

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

Gambar di atas merupakan skema aliran data saat
user mengakses halaman buku tamu dan menulis form
buku tamu.

41

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

Gambar di atas merupakan skema aliran data saat
admin

mengakses

administrator.

halaman

warta

di

halaman

42

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

Gambar 3.21. Diagram Aliran Data Input Output Warta Admin

43

Gambar di atas merupakan skema aliran data saat
admin mengakses halaman buku tamu di halaman
administrator.