BAB III

PERANCANGAN SISTEM
3.1 Perancangan Sistem
Tahap perancangan sistem merupakan tahap identifikasi kebutuhan-
kebutuhan fungsional di mana kebutuhan-kebutuhan fungsional tersebut
digunakan untuk persiapan rancang bangun implementasi. Rancang bangun
implementasi ini bertujuan untuk mendesain sistem yang lengkap dan jelas
yang akan digunakan dalam implementasi yang ditujukan untuk memenuhi
kebutuhan pemakai sistem.
Perancangan sistem meliputi diagram konteks, Hierarchy Input Process
Output (HIP!, Data Flow Diagram ("#"! yang menunjukkan rancangan
proses-proses pada sistem.
3.2 Kebutuhan Perangat Sistem
$ntuk menghasilkan output yang baik, maka sistem harus didukung
oleh sistem perangkat keras (hardware) dan perangkat lunak (software).
3.2.1 Sistem Perangat Keras !Hardware"
Perangkat keras (hardware) adalah perangkat fisik dari sebuah sistem
komputer. $mumnya terdiri dari tiga jenis perangkat keras (hardware!, yaitu
perangkat masukan, perangkat keluaran dan perangkat pengolah.
%dapun komponen perangkat keras (hardware! yang digunakan dalam
perancangan sistem antara lain &
'! (omputer Pentium III atau yang lebih tinggi
)! Hardisk *+ ,b
-! .,% /ard minimal -) 01
*! R%0 2* atau yang lebih besar
3! 0onitor 4.,%
2! Printer, (eyboard dan Mouse.
3.2.2 Sistem Perangat #una !Software"
Perangkat lunak (software) adalah program komputer yang merupakan
suatu susunan instruksi yang harus diberikan kepada unit pengolah agar
komputer dapat menjalankan pekerjaan sesuai dengan yang dikehendaki.
%dapun perangkat lunak (software) yang dibutuhkan dalam
perancangan sistem antara lain sebagai berikut &
'! Microsoft ndows 5
)! PHP
-! 0y467
*! Photoshop /42
3! .isio )++5
2! 0s-8ord )++5
3.3 $%&'chart Sistem
#lo9chart sistem terdiri dari data yang mengalir melalui sistem dan
proses yang mentransformasikan data itu. #lo9chart sistem ini dapat dilihat
seperti gambar berikut&
,ambar -.'Flowchart 4istem
Pada flowchart sistem ini terlihat ada pengembangan dari
keseluruhannya. "ari dokumen informasi data : data pari9isata yang
didapat dari melakukan penelitian dan pengumpulan berbagai data a9al dan
menghasilkan suatu informasi yang lengkap. "ata : data tersebut kemudian
di input dan terorganisisr dalam database lalu menghasilkan output berupa
informasi pari9isata (abupaten 4abu Raijua melalui 9ebsite. 4istem
informasi ini akan bekerja untuk menginputkan data melalui keyboard lalu
memproses kedalam suatu database dan dibuat suatu laporan, berupa
informasi melalui 9ebsite.
3.( )iagram A%ur )ata !Data Flow Diagram"
"#" merupakan suatu model logika data atau proses yang dibuat
untuk menggambarkan dari mana asal dan kemana tujuan data yang keluar
dari sistem, dimana data disimpan, proses apa yang menghasilkan data
tersebut dan interaksi antar data yang tersimpan dan proses yang dikenakan
pada data tersebut. %dapun "iagram %lir "ata (Data Flow Diagram! sebagai
berikut &
3.(.1 )iagram K&ntes !Context Diagram"
"iagram (onteks merupakan diagram le;el tertinggi dari "#" yang
menggambarkan hubungan sistem dengan lingkungan luarnya. "iagram
konteks digunakan untuk menunjukkan secara garis besar hubungan dari
input, proses dan output, dimana di bagian input menunjukkan item-item data
yang akan digunakan oleh bagian proses. 1agian proses berisi langkah-
langkah yang menggambarkan kerja dari fungsi atau modul. 4edangkan
bagian output berisi hasil dari pemrosesan data. !onte"t diagram dari 4istem
Informasi ,eografis Pari9isata (abupaten 4abu Raijua seperti yang
ditunjukkan pada ,ambar berikut ini&
,ambar -.) "iagram (onteks
,ambar di atas menunjukkan bah9a sistem mempunyai dua buah
konteks dalam pemrosesan data yaitu sistem diproses oleh administrator dan
sistem yang diproses oleh pengguna atau pengunjung.
3.(.2 )iagram Ber*en*ang
"iagram berjenjang merupakan gambaran proses sistem yang akan
dibangun, yang mana ada proses pengimputan data, proses lihat data dan
proses pencetakan data.
,ambar -.- "iagram 1erjenjang
3.(.2.1 )iagram #e+e%,
"iagram %rus "ata ("%"! le;el + merupakan representasi detail dari
arus data terkait dan data#ase yang ada di dalam tabel.* %lat ini juga
merupakan penjabaran lebih detail dari diagram konteks.
,ambar -.* "iagram 7e;el +
3.(.2.2 )iagram #e+e% 1 Pr&ses 1
,ambar -.3 "iagram 7e;el ' Proses '
3.(.2.3 )iagram #e+e% 1 Pr&ses 2
,ambar -.2 "iagram 7e;el 'Proses )
3.- Entit. Relationship )iagram
0odel $ntity %elationship "iagram menyediakan suatu konsep yang
dapat mendeskripsikan kebutuhan pengguna dalam sebuah model yang lebih
detail sehingga dapat diimplementasikan kedalam sistem manajemen basis
data.
"alam $&% "iagram menggunakan entity dan atribut. $ntity adalah
obyek yang mempunyai eksistensi dan terdefenisi dengan baik. 1erikut model
$&% "iagram&
,ambar -.5 <-R "iagram
3./ Perancangan Basis )ata
4istem Data#ase adalah suatu informasi yang mengintegrasikan
kumpulan dari data yang saling berhubungan satu dengan yang lain dan
membuatnya tersedia untuk beberapa aplikasi didalam suatu Instansi.
Data#ase itu sendiri merupakan salah satu komponen yang sangat penting
dalam suatu tabel informasi, karena berfungsi sebagai dasar dalam
menyediakan informasi bagi pemakai (user!.
a. Re%asi Antar Tabe%
,ambar -.=Relasi Tabel
b.Perancangan Tabe%
$ntuk merancang Data#ase dalam suatu %plikasi Perancangan 4istem
Informasi ,eografis Pari9isata (ota (upang dibutuhkan rancangan tabel
sebagai berikut &
1". Tabe% Kecamatan
Tabel -.'
Tabel (ecamatan
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>kec /har 3 ? Id (ecamatan
). nm>kec .archar -+ @ama (ecamatan
2". Tabe% )esa
Tabel -.)
Tabel (elurahan
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>kel /har 3 ? Id (elurahan
). id>kec /har 3 ?? Id (ecamatan
-. nm>kel .archar -+ @ama (elurahan
3". Tabe% Kateg&ri
Tabel -.-
Tabel (ategori
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>kategori /har 3 ? Id (ategori
). nm>kategori .archar -+ @ama (ategori
(". Tabe% 3b*e 4isata
Tabel -.*
Tabel bjek 8isata
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>9isata /har 3 ? Id bjek 8isata
). nm>9isata .archar 3+ @ama bjek 8isata
-. id>kel /har 3 ?? Id (elurahan
*. id>kec /har 3 ?? Id (ecamatan
3. alamat .archar 3+ %lamat A @ama Balan
2. koordinat .archar 3+ Titik (oordinat 7okasi
5. id>kategori /har 3 ?? Id (ategori
=. file>gambar .archar 3+ #oto
C. keterangan TeDt (eterangan 7okasi 8isata
-". Tabe% 5&te%
Tabel -.3
Tabel Hotel
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>hotel /har 3 ? Id Hotel
). nm>hotel .archar 3+ @ama Hotel
-. klasifikasi .archar -+ (lasifikasi Hotel
*. jumlah>kamar Int 3 Bumlah (amar
3. fasilitas TeDt #asilitas Hotel
2. alamat .archar 3+ %lamat Hotel
5. no>telp .archar 3+ @omor Telepon
/". Tabe% Tra+e%
Tabel -.2
Tabel Tra;el
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>tra;el /har 3 ? Id Tra;el
). nm>tra;el .archar 3+ @ama Tra;el
-. %lamat .archar 3+ %lamat Hotel
6". Tabe% Pr&7i%
Tabel -.5
Tabel 1erita
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>profil /har 3 ? Id Profil
). Isi TeDt Isi 1erita
8". Tabe% Ga%eri
Tabel -.=
Tabel ,aleri
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>galeri /har 3 ? Id ,aleri
). Budul .archar 3+ Budul
-. ,ambar .archar 3+ #oto ,aleri
9". Tabe% Berita
Tabel -.C
Tabel 1erita
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>berita /har 3 ? Id 1erita
). judul .archar )3+ Budul
-. isi>berita .archar 3+ Isi 1erita
1,". Tabe% Buu Tamu
Tabel -.'+
Tabel 1uku Tamu
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>btamu Int 3 ? Id 1uku Tamu
). @ama .archar -+ @ama Pengunjung
-. email .archar -+ <mail Pengunjung
*. asal .archar 3+ %sal @egara Pengunjung
3. Pesan TeDt Pesan atau (omentar
2. Tanggal "ate Tanggal Posting
11". Tabe% Admin
Tabel -.''
Tabel %dmin
N&. $ ie%0 T.1e Si2e Ke. Keterangan
'. id>admin .archar '+ ? Id %dmin
). Pass9ord .archar )3 Pass9ord %dmin
-. nama>lengkap .archar 3+ @ama 7engkap
3.6..Perancangan Antar Mua (Interface)
%dapun design interface dari Perancangan 4istem ,eografis
Pari9isata (abupaten 4abu Raijua adalah sebagai berikut&
1" )esain Menu :tama
,ambar -.C "esain 0enu $tama
2" )esain In1ut Buu Tamu
MAS:KAN )ATA 53TE#
Nama
Email
Asal
Pesan /
Komentar
SIMPAN
,ambar -.'+"esain Form Pengisian 1uku Tamu
3" )esain Form Login
#3GIN A)MINISTRAT3R
User Name
Paswword
#3GIN
,ambar -.''"esain Form 'ogin
(" )esainFormInput0an Form Tam1i%an )ata Kecamatan
MAS:KAN )ATA KECAMATAN
Id Kecamatan
Nama
Kecamatan
SIMPAN
,ambar -.')"esain Form Input "ata (ecamatan
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Data Kecamatan
Tambah
field tael erdasar!an inputan diatas
,ambar -.'-"esain Tampilan"ata (ecamatan
-" )esainFormInput0an Form Tam1i%an )ata Ke%urahan
MAS:KAN )ATA KE#:RA5AN
Id Kelurahan
I0 Kecamatan
;
Nama Kelurahan
SIMPAN
,ambar -.'*"esain Input "ata (ecamatan
header
)ata Kecamatan
)ata Ke%urahan
Data Kelurahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Tambah
field tael erdasar!an inputan diatas
,ambar -.'3"esain Tampilan"ata (elurahan
/" )esain Form Input0an Form Tam1i%an )ata Kateg&ri
MAS:KAN )ATA KATEG3RI
Id Kategori
Nama Kategori
SIMPAN
,ambar -.'2 "esain Form Input (ategori
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
Data Kategori
Tambah
field tael erdasar!an inputan diatas
#3G3:T
,ambar -.'5"esain Tampilan"ata (ategori
6" )esain Form Input0an Form Tam1i%an )ata 3b*e 4isata
MAS:KAN )ATA 3B<EK 4ISATA
Id Kategori
Nama Wisata
Pi%ih Ke%urahan
;
Alamat
Titik Koordinat
Kateg&ri
;
$i%e Gambar
br&'se
Keterangan
.
SIMPAN
,ambar -.'5"esain Form Input "ata bjek 8isata
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Data O!ek Wisata
Tambah
field tael erdasar!an inputan diatas
,ambar -.'="esain Tampilan"ata bjek 8isata
8" )esainFormInput0an Form Tam1i%an )ata 5&te%
MAS:KAN )ATA 53TE#
Id "otel
Nama "otel
Klasi#ikasi
$umlah Kamar
%asilitas
Alamat
No& Tel'
.
SIMPAN
,ambar -.'C"esain Form Input "ata Hotel
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Data "otel
Tambah
field tael erdasar!an inputan diatas
,ambar -.)+"esain Tampilan"ata HotelE
9" )esain Form Input0an Form Tam1i%an )ata Pr&7i%
MAS:KAN )ATA PR3$I#
Id Pro#il
Isi
SIMPAN
,ambar -.)-"esain Form Input "ata Profil
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Data Pro#il
Tambah
field tael erdasar!an inputan diatas
,ambar -.)*"esain Tampilan"ata Profil
1," )esain Form Input0an Form Tam1i%an )ata Ga%eri
MAS:KAN )ATA GA#ERI
Id (aleri
$udul
Gambar
br&'se
SIMPAN
,ambar -.)3"esain Form Input "ata ,aleri
header
)ata Kecamatan
)ata Ke%urahan
Data (aleri
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
#3G3:T
Tambah
field tael erdasar!an inputan diatas
,ambar -.)2 "esain Tampilan"ata ,aleri
11" )esain Form Input0an Form Tam1i%an )ata Berita
MAS:KAN )ATA BERITA
Id Berita
$udul
Isi Berita
SIMPAN
,ambar -.)5"esain Form Input "ata 1erita
header
)ata Kecamatan
)ata Ke%urahan
)ata Kateg&ri
)ata 3b*e 4isata
)ata 5&te%
)ata Tra+e%
)ata Pr&7i%
)ata Ga%eri
Data Berita
Tambah
field tael erdasar!an inputan diatas
)ata Berita
#3G3:T
,ambar -.)="esain Tampilan"ata 1erita