BAB IV

PERANCANGAN SISTEM

4.1. Desain Global

Desain global adalah sebuah rancangan sistem baru yang berguna

untuk memudahkan desain terinci serta memberikan gambaran untuk
rancangan sistem informasi yang dihasilkan oleh sistem yang akan
diusulkan atau sistem baru yang akan dibuat untuk menggantikan sistem
yang

lama.

Website

yang diajukan

dibuat

menggunakan

bahasa

pemrograman PHP sebagi dasar pembuatan. MySQL adalah database yang

digunakan untuk mendukung bahasa pemrograman. Apache adalah web
server yang digunakan untuk koneksi data dan informasi web. Dreamweaver
digunakan sebagai editor web. Didalam web juga terdapat desain yang
dibuat dengan menggunakan adobe photoshop, serta macromedia flash
sebagai animasi sehingga tampilan web lebih menarik.

35

4.1.1. Usulan Sistem yang Baru

Usulan rancangan sistem yang baru dalam Sistem Informasi Berbasis

Web pada Kecamatan Sumberejo adalah sebagai berikut :
1. Mengelola informasi

Kecamatan Sumberejo

yang meliputi

informasi pekon, potensi, struktur organisasi, program kerja,

layanan, profil, dokumentasi kegiatan, berita, dan informasi
lainnya.
2. Menyajikan informasi dengan tampilan sehingga informasinya
dapat

diakses

setiap

saat

dan

oleh

siapa

saja

yang

membutuhkannya.

4.1.2. DAD Sistem yang Baru

Langkah utama untuk dapat membuat sistem informasi adalah dengan
menentukan ruang lingkup sistem dengan menganalisis kebutuhan
sistem baru berdasarkan sistem lama yang sudah berjalan. Dari
analisis yang telah dilakukan oleh penulis bahwa pengolahan data dan
informasi saat ini ada di Kecamatan Sumberejo masih menggunakan
sistem manual. Untuk itu perlu adanya proses penyajian data dan
informasi di Kecamatan Sumberejo dengan sistem baru yang berbasis
web. Adapun DAD dari sistem ini sebagai berikut:

36

Tabel 4.1 DAD Sistem Informasi Baru Berbasis Web

Masyarakat

Website Kecamatan
Daftar pertanyaan

Mulai

Daftar pertanyaan

Mencari informasi

Mencari informasi

Informasi

Informasi

Selesai

Penjabaran dari DAD Sistem Informasi baru Berbasis Web diatas

adalah sebagai berikut :
1. Masyarakat yang membutuhkan sistem informasi Kecamatan
Sumberejo membuat daftar pertanyaan.
2. Setelah daftar pertanyaan dibuat, kemudian dilanjutkan dengan
mengunjungi/membuka website Kecamatan Sumberejo.
3. Proses pencarian informasi diwebsite Kecamatan Sumberejo.
4. Informasi yang telah ditemukan kemudian diteruskan kepada
masyarakat yang membutuhkan.

37

4.2. Hirarki Input Proses Output (HIPO) Diagram

HIPO diagram merupakan diagram yang menunjukkan keadaan inputan apa
saja yang ada pada website yang dibuat, proses yang terjadi didalam
website, serta tampilan output yang diharapkan ada pada website. HIPO
diagram yang dimaksud dapat dilihat pada gambar dibawah ini :
Website

Admin

Menu Utama

Login ditolak

Home

Login

Profil

Login diterima
Kecamatan
Menu admin
Sejarah
Berita
Visi dan Misi
Input
Struktur Organisasi

Edit

Sarana & Prasarana

Hapus
Pekon

Buku Tamu

Program kerja

Hapus

Potensi

Data Pekon

L ayanan

Input

Galeri

Edit
Hapus

Buku tamu

Data Pegawai
Input
Edit
Hapus
Log out

Gambar 4.2. HIPO Diagram

38

4.3. Tahap Perancangan

Tujuan dari tahapan perancangan sistem adalah untuk memenuhi kebutuhan

pemakaian sistem mengenai gambaran yang jelas tentang rancangan sistem
yang akan dibuat serta diimplementasikan. Kegiatan yang dilaksanakan
pada tahap perancangan adalah:
4.3.1. Desain Output
Berdasarkan rancangan yang dibuat, terdapat tampilan output yang
disesuaikan dengan database website. Tampilan output adalah
sebagai berikut:

Header
Home | Profil | Pekon | Program Kerja | Potensi | Layanan | Galeri | Buku Tamu
Profil

Clock

Login

Calender

Kolom untuk menampilkan berita

Jumlah Pengunjung

atau informasi
Jadwal Sholat

Galeri

Footer
Gambar 4.3. Perancangan Desain Output
39

4.3.2. Desain Input

a. Desain Input Login Admin
Desain input Login Admin digunakan oleh admin untuk
memasuki

halaman

admin.

Setelah

yang

bersangkutan

memasukkan user name dan password nama, maka akan

dilakukan validasi apakah data yang dimasukkan benar atau tidak.
Jika data tersebut benar, maka yang pengguna dapat memasuki
halaman admin dan memiliki hak dan kuasa untuk melakukan
manipulasi data dan informasi dalam website, misalnya edit data,
hapus data, dan tambah data.
Tampilan desain input login admin sebagai berikut :

LOGIN
User Name :

Password :

Login

Gambar 4.4. Desain Input Login Admin

40

b. Desain Input Berita

Desain input berita terdapat pada halaman admin yang data-data
dan informasi yang akan ditampilkan melalui inputan ini akan
diisikan oleh admin kehalaman website. Data yang akan diisikan
kedalam desain input berita ini meliputi judul berita, headline, isi
berita, gambar berita, sumber berita yang disesuaikan dengan
keadaan atau kejadian yang terkait di Kabupaten Tanggamus.
Tampilan desain input berita sebagai berikut :
INPUT BERITA

Judul Berita

Headline

Isi Berita

Gambar Berita

Sumber Berita

:
Simpan

Gambar 4.5. Desain Input Berita

41

c. Desain Input Buku Tamu

Dari sisi pengunjung terdapat desain Input buku tamu yang akan
terkoneksi langsung ke admin, sehingga data yang diinputkan
akan langsung ditampilkan kehalaman website.
Tampilan desain input buku tamu sebagai berikut :

BUKU TAMU
Nama

Email

Komentar

Kirim

Gambar 4.6. Desain Input Buku Tamu

d. Desain Input Pegawai Kecamatan

Form input pegawai Kecamatan merupakan form yang akan
digunakan untuk memasukan data diri pegawai-pegawai di
Kecamatan Sumberejo. Dalam proses pengisian data jabatan
pegawai, admin dapat mengisinya sendiri.

42

Tampilan desain input pegawai sebagai berikut:

PEGAWAI
Nama

NIP

Golongan

Jabatan

Gambar

Simpan

Gambar 4.7. Desain Input Pegawai

e. Desain input pekon

Form input pekon merupakan form yang akan digunakan untuk
memasukan data-data tentang pekon yang ada di Kecamatan
Sumberejo. Dalam proses pengisian data pekon, admin dapat
mengisinya sendiri.

43

Tampilan desain input pekon sebagai berikut:

PEKON
Nama

Kepala pekon

Luas pekon

Jumlah penduduk

Simpan

Gambar 4.8. Desain Input Pekon

4.3.4. Desain Database

Sesuai dengan desain input yang akan dibuat pada website, maka
terdapat tiga tabel yang merupakan desain database, Tampilan desain
database sebagai berikut :
a. Desain Database Login Admin
Tabel login admin untuk menyimpan data user (admin) dari
website Kecamatan Sumberejo. Adapun perancangan tabelnya
sebagai berikut :Tabel 4.2. Tabel Login Admin

Nama Field

Tipe Data

Keterangan

User_Name

Varchar (100)

Primary key

Password

Varchar (25)

Password user

44

b. Desain Database Berita

Tabel berita digunakan untuk menyimpan data berita-berita yang
ditampilkan dihalaman home website dengan rancangan tabel
sebagai berikut :
Tabel 4.3. Tabel Berita
Nama Field
Id
Tgl_berita

Tipe Data
Int (10)
Varchar (15)

Judul_berita
Headline
Isi_berita
Gambar_berita

Varchar (100)
Varchar (250)
Teks
Varchar (250)

Keterangan
Primary key
Tanggal
posting
berita
Judul berita
Ringksan berita
Isi berita
Gambar berita

Sumber_berita

Varchar (100)

Sumber berita

c. Desain Database Buku Tamu

Tabel buku tamu digunakan untuk menyimpan data komentar dari
pengunjung

website

kepada

pihak

Kecamatan.

Adapun

perancangan tabelnya sebagai berikut :

Tabel 4.4 Tabel Buku Tamu
Nama Field

Tipe Data

Keterangan

Id_tamu
Nama

Int (25)
Varchar (100)

Primary key
Nama pengirim bukutamu

Email
Komentar

Varchar (100)
Teks

Email pengirim buku tamu

Isi komentar

45

d. Desain Database Pegawai Kecamatan

Table pegawai kecamatan digunakan untuk menyimpan data diri
pegawai Kecamatan Sumberejo. Adapun perancangan tabelnya
sebagai berikut:
Tabel 4.5. Tabel Pegawai Kecamatan
Nama Field

Tipe Data

Keterangan

Id_pegawai

Int (10)

Primary key

Nama

Varchar (225)

Nama pegawai

NIP
Golongan

Varchar (25)
Varchar (100)

NIP pegawai
Golongan pegawai

Jabatan

Varchar (255)

Jabatan pegawai

Gambar

Varchar (255)

Foto pegawai

e. Desain Database Pekon

Tabel pekon digunakan untuk menyimpan data-data pekon
Kecamatan Sumberejo. Adapun perancangan tabelnya sebagai
berikut:
Tabel 4.6. Tabel Pekon
Nama field

Tipe data

Id_pekon

Int (10)
Varchar
Nama_pekon
(100)
Kepala_pekon
Varchar (25)
Varchar
Luas_pekon
(100)
Varchar
Jumlah_penduduk
(100)

46

Keterangan
Primary key
Nama pekon
Nama kepala pekon
Luas pekon
Jumlah penduduk

47

48

4.4. Perangkat Pendukung Sistem yang Baru

4.4.1. Spesifikasi Hardware

Spesefikasi hardware yang digunakan penulis untuk membangun
Sistem Informasi Berbasis Web pada Kecamatan Sumberejo adalah
sebagai berikut :
1. Laptop Intel Core Duo
2. RAM 1 GB
3. Hardisk 80 GB
4. LCD
5. DVD RW
6. LAN card
Spesifikasi minimum yang direkomendasikan penulis kepada
pengguna agar dapat mengakses sistem informasi Kecamatan
Sumberejo berbasis web adalah sebagai berikut:
1. Prosesor Pentium 4
2. RAM 512 MB
3. Hardisk 10 GB
4. Monitor 14
5. LAN card

49

4.4.2. Spesifikasi Software

Spesifikasi software yang digunakan penulis untuk membangun
Sistem Informasi Berbasis Web pada Kecamatan Sumberejo adalah
sebagai berikut :
1. Xampp
2. PHP (Personal Home Page)
3. MySQL
4. Macromedia dreamweaver 8.0
5. Photoshop CS2
6. Macromedia Flash MX
7. Mozila firefox 3.0

4.4.3. Spesifikasi Brainware

Spesifikasi brainware untuk mengelola sistem informasi berbasis
web yang direkomendasikan penulis adalah sebagai berikut:
1. Memahami bahasa pemograman PHP, MySQL, web editor,
animasi, dan desain grafis. Hal ini digunakan sebagai pusat
kendali program untuk melakukan perubahan desain dan isi
tampilan web.
2. Memahami pengamanan (security) sistem, hal ini untuk menjaga
keamanan dari ancaman spam (sampah elektronik) maupun
hacker.

50

4.5. Implementasi Program

Setiap kali mengunjungi website Kecamatan Sumberejo, maka halaman

yang akan tampil adalah halaman utama website. pada halaman utama
website memiliki beberapa menu antara lain home, profil, pekon, program
kerja, layanan, galeri, potensi dan buku tamu. Menu profil memiliki sub
menu yaitu Kecamatan, sejarah, visi dan misi, struktur organisasi, sarana
dan prasarana. Maka hasil implementasi tampilan halaman utama website
sebagai berikut :

Gambar 4.11. Implementasi Halaman Utama Website

51

Adapun tampilan halaman dari masing-masing menu dan sub menu sebagai
berikut :
1. Tampilan Halaman Berita
Halaman berita menyajikan informasi seputar Kabupaten Tanggamus
yang bersangkutan tentang pertanian dan perkebunan. Tampilan halaman
berita sebagai berikut:

Gambar 4.12. Implementasi Halaman Berita

52

2. Tampilan Halaman Profil Kecamatan Sumberejo

Halaman profil menampilkan jumlah pekon yang masuk dalam wilayah
Kecamatan Sumberejo serta potensi-potensi yang ada. Tampilan
halaman profil Kecamatan Sumberejo sebagai berikut :

Gambar 4.13. Implementasi Halaman Profil Kecamatan Sumberejo

53

3. Tampilan Halaman Sejarah Kecamatan Sumberejo

Halaman sejarah menampilkan tentang sejarah Kecamatan Sumberejo
secara singkat. Tampilan halaman sejarah Kecamatan Sumberejo sebagai
berikut :

Gambar 4.14. Implementasi Halaman sejarah Kecamatan Sumberejo

54

4. Tampilan Halaman Visi dan Misi

Halaman visi dan misi menampilkan visi dan misi yang dimiliki oleh
Kecamatan Sumberejo. Tampilan halaman visi dan misi adalah sebagai
berikut :

Gambar 4.15. Implementasi Halaman Visi dan Misi

55

5. Tampilan Halaman Struktur Organisasi

Halaman struktur organisasi menampilkan struktur organisasi yang
dimiliki oleh Kecamatan Sumberejo. Tampilan halaman struktur
organisasi adalah sebagai berikut :

Gambar 4.16. Implementasi Halaman Struktur Organisasi

56

6. Tampilan Halaman Sarana dan Prasarana

Halaman sarana dan prasarana menampilkan sarana dan prasarana yang
ada pada Kecamatan Sumberejo. Tampilan halaman sarana dan prasarana
adalah sebagai berikut :

Gambar 4.17. Implementasi Halaman Sarana dan Prasarana

57

7. Tampilan Halaman Pekon

Halaman pekon menampilkan nama pekon,kepala pekon, luas pekon dan
jumlah pekon yang ada pada Kecamatan Sumberejo. Tampilan halaman
pekon adalah sebagai berikut :

Gambar 4.18. Implementasi Halaman Pekon

58

8. Tampilan Halaman Program Kerja

Halaman program kerja menampilkan program kerja jangka panjang,
jangka menengah dan jangka pendek yang dimiliki oleh Kecamatan
Sumberejo. Tampilan halaman program kerja adalah sebagai berikut :

Gambar 4.19. Implementasi Halaman Program Kerja

59

9. Tampilan Halaman Potensi

Halaman potensi menampilkan potensi-potensi yang ada dan dimiliki
oleh Kecamatan Sumberejo. Adapun tampilan halaman potensi adalah
sebagai berikut :

Gambar 4.20. Implementasi Halaman Potensi

60

10. Tampilan Halaman Layanan

Halaman layanan menampilkan layanan-layanan yang diberikan oleh
pihak Kecamatan Sumberejo kepada masyarakat. Adapun tampilan
halaman layanan adalah sebagai berikut :

Gambar 4.21. Implementasi Halaman Layanan

61

11. Tampilan Halaman Galeri

Halaman galeri menampilkan foto-foto kegiatan yang ada di Kecamatan
Sumberejo. Adapun tampilan halaman galeri adalah sebagai berikut :

Gambar 4.22. Implementasi Halaman Galeri

62

12. Tampilan Halaman Buku Tamu

Halaman buku tamu menampilkan form isian buku tamu yang
disediakan bagi pengunjung untuk mengisi komentar-komentar yang
telah diberikan oleh pengunjung. Adapun tampilan halaman buku tamu
sebagai berikut :

Gambar 4.23. Implementasi Halaman Buku Tamu

63

4.6. Analisa Kelebihan dan Kekurangan Sistem

Dalam perancangan sistem yang baru diharapkan agar sistem ini dapat
menjawab dan memperbaiki permasalahan dan kelemahan sistem yang lama
dengan memanfaatkan sistem informasi berbasis web dengan menggunakan
jaringan internet.

4.6.1. Kelebihan sistem

Kelebihan dari sistem informasi baru berbasis web ini antara lain :
a. Lebih cepat dalam pengaksesan data atau mendapatkan informasi
b. Menghemat waktu dan Jangkauan informasinya lebih luas
c. Dapat diakses kapan saja dan oleh siapa saja.

4.6.2. Kelemahan sistem

Kelemahan dari sistem informasi baru berbasis web ini antara lain :
a. Sistem informasi yang dilkukan secara online membutuhkan
fasilitas jaringan yang terkoneksi dengan internet, maka perlu
penambahan program dan perangkat pendukung dalam komputer
yang digunakan.
b. Perlu keahlian khusus dalam pengoperasian dan penggunaanya.
c. Masyarakat yang belum bisa menggunakan komputer atau masih
awam

dengan

dunia

tegnologi

memanfaatkan dengan maksimal.

64

informasi

belum

dapat