18

BAB III
DESAIN SISTEM DAN PERANCANGAN PROGRAM
3.1 Metodologi Pengembangan sistem
Metodologi yang digunakan dalam penulisan tugas akhir ini adalah
sebagai berikut :
1. Tahap pengumpulan data
Metode pengumpulan data yang digunakan dalam penelitian ini adalah
sebagai berikut :
a) Metode wawancara
Pengumpulan data dengan cara mengadakan wawancara secara
langsung dengan berbagai pihak yang bekaitan dan terlibat
langsung dengan sistem yang akan dianalisis guna memperoleh
data yang tepat dan akurat.
b) Studi Pustaka/ Studi Literatur.
Dengan membaca dan meneliti dokumen-dokumen, internet, bukubuku, referensi yang berkenaan dengan masalah yang diteliti guna
mengumpulkan data dan informasi yang diperlukan.
2. Tahap pembuatan perangkat lunak.
Teknik analisis data dalam pembuatan perangkat lunak menggunakan
paradigma perangkat lunak secara waterfall.
a. Analisis
Pada tahapan ini, penulis Menganalisa dan mengumpulkan datadata untuk di jadikan referensi baik dari buku maupun artikel-artikel
serta diktat mengenai perangkat lunak yang diperlukan dalam

19

perancangan website . pentingnya menganalisa data adalah untuk

memudahkan penulis dalam membuat aplikasi dan menentukan
informasi yang akan disampaikan sehingga aplikasi yang dibuat
nantinya bisa sesuai harapan penulis.
b. Design sofware
Membuat design sistem yang akan di buat, dari design awal
hingga akhir agar mempermudah dalam merealisasikan website
yang akan di buat.
c. Implementasi
Melaksanakan pengkodean atau coding (membuat kalimat kalimat
perintah menggunakan bahasa komputer) mencoba kebenaran
perangkat lunak yang telah di install pada unit computer tersebut.
d. Pengujian
Pada tahap ini melakukan pengujian sistem website yang telah
dibuat.

3.2 Desain Sistem

3.2.1 Desain lama
Desain lama adalah suatu bentuk sistem yang telah atau sedang
digunakan oleh suatu instansi yang menjadi objek penelitian.
Desain yang digunakan adalah sebagai berikut :

20

Gambar 3.1 Desain Sistem Lama

Penjelasan dari Desain sistem lama:
1. Pengunjung datang ke kantor BNN untuk mencari informasi yang
diinginkan.
2. BNN akan mempersiapkan data data sesuai dengan yang dicari
3. BNN memberikan data yang dibutuhkan dan mensosialisasikan
kepada masyarakat atau pengunjung.
4. Pengunjung akan menerima informasi sesuai dengan kebutuhannya
dan jika dirasa cukup proses pun selesai.
5. Jika informasi belum cukup, pengunjung akan meminta data dan
informasi tersebut di BNN.
6. 3.2.2 Desain alternatife

21

Desain sistem alternatife adalah suatu bentuk rancangan cara kerja

atau metode yang disarankan untuk digunakan oleh instansi tempat
melakukan penelitian sebagai cara atau sistem kerja lain yang
diterapkan.

Gambar 3.2 Desain Sistem Baru

22

Penjelasan dari Desain sistem Alternatif :

1. Admin menginputkan data ke website untuk di simpan ke database,
sehingga user dapat melihat informasi yang di inputkan oleh admin
2. Pengunjung membuka website dan melihat informasi tentang BNN.
3. Pengunjung dapat memberikan komentar tentang informasi yang ada
pada website.

3.3 Struktur Tabel

Tabel Admin
Untuk menyimpan data username dan password admin.
Tabel Admin

Nama Field
Username
Password

Tipe Data
Varchar(100)
Varchar (150)

Keterangan

Tabel Profile BNN

Untuk menyimpan data Profile BNN.
Tabel Profile

Nama Field
Profile_id (PK)
Profile_nm
Profile_tgl
Profile_ket

Tipe Data
Int
Varchar (150)
Date/Time
Text

Keterangan
Primary Key

Tabel Unit Kerja

Untuk menyimpan data Unit Kerja pada BNN.
Tabel Unit Kerja

Nama Field
UnitKerja_id (PK)
UnitKerja_nm
UnitKerja_tgl
UnitKerja_ket
BidangUnitKerja_id

Tipe Data
Int
Varchar (150)
Date/Time
Text
Int

Keterangan
Primary Key

23

Tabel Bidang Unit Kerja

Untuk menyimpan data bidang / bagian unit kerja yang ada di BNN.
Tabel Bidang Unit Kerja

Nama Field
BidangUnitKerja_id
BidangUnitKerja_nm

Tipe Data
Int
Varchar (150)

Keterangan
Primary Key

Tabel Agenda Kegiatan

Meyimpan data Kegiatan kegiatan yang dilakukan oleh BNN NTB.
Tabel Agenda Kegiatan

Nama Field
Kegiatan_id (PK)
Kegiatan_nm
Kegiatan_tgl
Kegiatan_ket
Kegiatan_sinopsis

Tipe Data
Int
Varchar (100)
Date/Time
Text
Text

Keterangan
Primary Key

Tabel Berita
Meyimpan data berita / informasi seputar BNN dan Narkotika.
Tabel Berita

Nama Field
Berita_id (PK)
Berita_nm
Berita_tgl
Berita_ket
Berita_sinopsis

Tipe Data
Int
Varchar (50)
Date/Time
Text
Text

Tabel Komentar
Menyimpan data komentar user.
Tabel 3.18 Komentar

Keterangan
Primary Key

24

Nama Field
Komentar_id
Komentar_nm
Komentar_email
Komentar_web
Komentar_tgl
Komentar_isi
Komentar_val
Berita_id
Kegiatan_id

Tipe Data
Int
Varchar (50)
Varchar (50)
Varchar (100)
Date
Text
Boolean
Int
Int

Keterangan
Primary Key

Tabel Suara Masyarakat

Menyimpan data komentar / pertanyaan masyarakat tentang BNN
atau Narkotika.
Tabel 3.21 Cara Pemesanan

Nama Field
Suara_id
Suara_nm
Suara_tgl
Suara_email
Suara_web
Suara_isi
Suara_val
Suara_jawaban
Suara_tglJawab

Tipe Data
Int
Varchar (150)
Date / Tgl
Varchar (!50)
Varchar (150)
Text
Boolean
Text
Date/Tgl

Keterangan
Primary Key

3.4 ERD (Entry Relational Diagram)

Entity relationship (ER)data model didasarkan pada persepsi terhadap
dunia nyata yang tersusun atas kumpulan objek-objek dasar yang di sebut
entitas dan hubungan antar objek.entitas adalah sesuatu atau objek
dalam dunia nyata yang dapat dibedakan dari objek lain.sebagai contoh
masing-masing mahasiswa adalah entitas dan matakuliah dapat pula di
anggap sebagai entitas.entittas yang digambarkan dalam basisdata
dengan kumpulan atribut.Relasi adalah hubungan antara bebrapa entitas.

25

Gambar 3.3 ERD

3.5 Diagram Arus Data (DAD)

DFD digunakan untuk menggambarkan suatu sistem yang telah ada
atau sistem baru yang akan dikembangkan secara logika tanpa
mempertimbangkan lingkungan fisik dimana data tersebut mengalir
(misalnya lewat telepon dan surat). DFD merupakan alat yang
digunakan pada metodologi pengembangan sistem yang terstruktur.
DFD merupakan alat yang dapat menggambarkan arus data dalam
sistem dengan struktur dan jelas. (Prof. Dr. Jogiyanto HM, MBA, Akt,
[ 2005 ], Analisis & Disain Sistem Informasi, 3 rd Edition, Penerbit Andi,
Yogyakarta.)

26

Gambar 3.4 DFD Level 0 (Diagram Konteks)

27

Gambar 3.5 DFD Level 1

28

Gambar 3.6 DFD Level 2 Proses 1

Gambar 3.7 DFD Level 2 Proses 2

29

3.6 Bagan Berjenjang

Gambar 3.13 Bagan Berjenjang

3.7 Site Map

30

Gambar 3.14 Site Map

31

Gambar 3.14 Site Map Admin

3.8 Desain Layout

1. Desain Layout Home

32

HEADER
Home | Profile B NN | Unit K erja | Humas | K asus Narkoba

S uara
Masyarakat

Profile Singkat
Beri ta Ter baru
S inopsis Beri ta

Agenda
K egiatan

Tg l

Kom en

Det ail

S inopsis Beri ta
Tgl

Komen

De tail

FOOTER

Gambar 3.15 Desain Layout Home

Pada desain layout home ,pada bagian header berisi gambar
dan nama website/perusahaan dan informasi lainnya.dibawah header
tedapat menu utama. Pada left menu berisi form pencarian dan jenis
property. Pada bagian content berisi profil singkat prusahaan dan
menampilkan property terbaru beserta foto dan deskripsi. Footer berisi
informasi copyright dan menu seperti main menu,left menu ,footer ini
isinya sama untuk semua halaman.

1. Desain Layout Berita / Agenda

33

HEADER
Home | Profile B NN | Unit K erja | Humas | K asus Narkoba
Berita / Agenda
<< Prev ... | 7 | 8 | 9 | 10 | ... Ne xt >>

S uara
Masyarakat

Sinopsi s B erit a
T gl

Komen

De tail

Sinopsi s B erit a
Tgl

Agenda
K egiatan

Kome n

Detail

Sinopsi s B erit a
Tgl

Kome n

Detail

<< Pre v ... | 7 | 8 | 9 | 1 0 | . . N ext >>

FOOTER

Gambar 3.16 Desain Layout Berita / Agenda

Pada desain layout berita / agenda, setiap header pada semua
halaman memiliki informasi yang sama, Bedanya pada isi dari content
pada setiap halaman. Pada layout ini memiliki content yang berisikan
nama berita / agenda, foto, dan deskripsi.

2. Disain Layout Detail Berita / Agenda

34

HEADER
Home | Profile B NN | Unit K erja | Humas | K asus Narkoba

Jud ul Berita / Agenda

S uara
Masyarakat
Deskripsi B erit a / A genda

Agenda
K egiatan

F orm Kome ntar

Komentar
FOOTER

Gambar 3.17 Desain Layout Detail Berita / Agenda

Pada Desain Layout Detail berita / agenda ini berisi detail berita /
agenda yang ditampilkan lebih lengkap lagi dan lebih jelas lagi. Dalam
desain

ini

terdapat

juga

form

komentar

mengomentari berita / agenda yang kita inginkan.

3. Disain Layout Profile

dimana

kita

dapat

35

HEADER
Home | Profile B NN | Unit K erja | Humas | K asus Narkoba

S uara
Masyarakat

Agenda
K egiatan

Profile BNN
atau
Unit Kerja
FOOTER

Gambar 3.18 Desain Layout Profile

Pada desain diatas, merupakan desain layout profil yang berisi
informasi mengenai perusahaan.

4. Disain Layout Admin Login

36

LOGIN CPANEL
Username
Password
Login

Gambar 3.23 Desain Admin Login

Ini adalah form login admin, dmana admin harus melakukan
login terlebih dahulu sebelum menginputkan atau melihat data-data.
5. Disain Layout Admin Home
HEADER
- P rofil e BNN
- Unit K erja
- B agian Unit
- Agenda
- B erita
- S uara
Masyarakat
- K om ent ar
- Data Admin
- Logout

Data Admin
P enj elasan Tent ang Halam an

Daf tar Komentar Baru

FOOTER

Gambar 3.24 Desain Admin Home

Desain ini merupakan desain layout home halaman admin.
6. Disain Layout Admin Input Data

37

HEADER
Jeni s Input
- P rofil e BNN
- Unit K erja
- B agian Unit
- Agenda
- B erita
- S uara
Masyarakat
- K om ent ar
- Data Admin
- Logout

Form Input Data

FOOTER

Gambar 3.25 Desain Admin Input Data

Ini merupakan form input data.
7. Disain Layout Admin Lihat Data
HEADER
- P rofil e BNN
- Unit K erja
- B agian Unit
- Agenda
- B erita
- S uara
Masyarakat
- K om ent ar
- Data Admin
- Logout

Lihat D ata
Form Search

Form Filt er

F ield 1
Hap us | Edit
Hap us | Edit
Hap us | Edit
Hap us | Edit
Hap us | Edit

I siF ield
I siF ield

Fi eld 2
Isi Field
Isi Field

F ield 3
Isi Field
Isi Field

I siF ield

Isi Field

Isi Field

I siF ield

Isi Field

Isi Field

I siF ield

Isi Field

Isi Field

<<< ... | 5 | 6 | 7 | ... >>>

FOOTER

38

Gambar 3.26 Desain Admin Lihat Data

Gambar diatas merupakan disain lihat data admin. Dalam form
ini tedapat berbagai jenis property yang telah di inputkan sebelumnya
oleh admin.
8. Disain Layout Admin Data Admin
HEADER
- P rofil e BNN
- Unit K erja
- B agian Unit
- Agenda
- B erita
- S uara
Masyarakat
- K om ent ar
- Data Admin
- Logout

Data Ad min
Usernam e
P assword Lama
P assword Baru
Conf irm P ass
Simpan

FOOTER

Gambar 3.27 Desain Admin Data Admin

ini merupakan form data admin.di mana pada form ini admin
dapat melakukan atau mengedit password baru.

39

40

DAFTAR PUSTAKA
Anonim,AdobeDreamwever,Diunduhdi(http://id.wikipedia.org/wiki/Adobe_Drea
mweaver). diakses hari selasa 27 April 2011 pukul 14.00 WITA
Anonim, intenet, Di unduh di (http://www.sejarah-internet.com/pengertianinternet) Diakses Hari Minggu, 10 April 2011 Pukul 12:00 WITA.
Anonim,AdobePhotoshop,Diunduhdi(http://id.wikipedia.org/wiki/Adobe_Photos
hop) diakses Hari Selasa 5 Mei 2011 Pukul 16.00 WITA
Anonim, Pengertian Sistem, Di unduh di http://id.wikipedia.org/wiki/Sistem
diakses Hari Selasa 10 Mei 2011 Pukul 15.20 WITA
Anonim,PengertianXampp,Diunduh(http://kihendriku.wordpress.com/2009/03/
09/pengertian-xampp/) diakses Hari Selasa 27 April 2011 Pukul 14.00
WITA
Anonim, Pengertian informasi, Di unduh http://id.wikipedia.org/wiki/Informasi
diakses Hari Selasa 10 Mei 2011 Pukul 15.20 WITA
Anonim,PengertianSistemInformasi,Diunduhhttp://id.wikipedia.org/wiki/Sistem
_informasi. diakses Hari Selasa 10 Mei 2011 Pukul 15.20 WITA
Edhy Susanta[2005], Sistem Basis Data,Penerbit Graha ilmu.
Fathansyah,Ir [2005],Basis Data,Penerbit INFORMATIKA Bandung
Janner Simarmata & Iman paryudi [2006], Basis Data,Penerbit Andi.
Prof. Dr. Jogiyanto HM, MBA, Akt, [ 2005 ], Analisis & Disain Sistem Informasi,
3rd Edition, Penerbit Andi, Yogyakarta.
Sidik,Ir.[2004],pemograman web dengan PHP