4.4. Metode Perancangan
Metode perancangan sistem ini menggunakan metode pendekatan atas-bawah top down approach. Perancangan dimulai dari bentuk yang paling global yaitu diagram
konteks, kemudian diturunkan secara bertahap menjadi bentuk yang lebih detail.
4.4.1. Pembuatan Flowchart Diagram Alir
Flowchart adalah penggambaran secara grafik dari langkah-langkah danurut-urutan prosedur dari suatu program. Flowchart menolong analis dan programmer untuk
memecahkan masalah kedalam segmen-segmen yanglebih kecil dan menolong dalam menganalisis alternatif-alternatif lain dalam pengoperasian. Flowchart Sistem
merupakan bagan yang menunjukkan alur kerja atau apa yang sedang dikerjakan di dalam sistem secara keseluruhan dan menjelaskan urutan dari prosedur-prosedur yang
ada di dalam sistem. Dengan kata lain, flowchart ini merupakan deskripsi secara grafik dari urutan prosedur-prosedur yang terkombinasi yang membentuk suatu
sistem. Flowchart Sistem terdiri dari data yang mengalir melalui sistem dan proses yang mentransformasikan data itu. Data dan proses dalam flowchart sistem dapat
digambarkan secara online dihubungkan langsung dengan komputer atau offline tidak dihubungkan langsung dengan komputer, misalnya mesin tik, cash retister atau
kalkulator.
Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Di
samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML nya,
Universitas Sumatera Utara
Tombol Kepengurusan
terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana flowchart keseluruhan dalam membangun situs ini dapat dilihat pada
gambar berikut:
Start
Tombol Home
Tombol Kegiatan
Tombol
Membership
Tombol Gallery
Stop
Tampilan Home
Tampilan Kepengurusan
Tampilan Membership
Tampilan Kegiatan Y
Y
Y N
N
N Halaman Utama
Tampilan Gallery A
B
C
D
E
Keterangan: A= Tampilan Home
B= Tampilan Kepengurusan C= Tampilan Membership
D= Tampilan Kegiatan E= Tampilan Gallery
Y
Y N
Universitas Sumatera Utara
Gambar 4.1 Flowchart Perancangan Website CISC Regional Medan
E
Foto 1
Foto 2
Foto 3
Foto 4
Foto 5
Foto 6
Foto 7
Foto 8
Foto 9
Stop
Tampilan Gallery
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto
Tampilan Foto Back
Y Y
Y
Y
Y
Y
Y
Y
Y
Y N
N N
N N
N N
N
N
Universitas Sumatera Utara
Gambar 4.2 Flowchart Admin
4.4.2 Diagram Konteks Contex Diagram
Kategori