tersebut. Aliran Informasi merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman per halaman.
4.3. Perancangan Data Flow Diagram DFD
Data Flow Diagram DFD merupakan diagram yang menggunkan notasi-notasi simbol-simbol untuk menggambarkan arus dari data sistem. DFD sering digunakan
untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data
tersebut mengalir. Gambaran ini tidak tergantung pada perangkat keras, lunak, struktur data atau organisasi. Adapun Data Flow Diagram yang penulis ajukan, yaitu:
Universitas Sumatera Utara
1. Tampilan Flowchart Menu Utama
Gambar 4.1 Tampilan Flowchart Menu Utama
START
Tampilan Web
Pilih Link yang ada
Fasilitas Pilih link yang ada
END A
Pilih link yang ada
Pilih link yang ada
Pilih link yang ada C
D Z
Sejarah
Visi dan Misi Ekstrakurikuler
Ekstrakurikuler
Pilih link yang ada E
F Ekstrakurikuler
Pilih link yang ada B
TIDAK YA
YA
YA
YA
YA
YA TIDAK
TIDAK
TIDAK
TIDAK
TIDAK
Universitas Sumatera Utara
Gambar 4.2 Tampilan Flowchart Menu Utama pada bagian atas
START
Tampilan Web
Kalender Akademik
Siswa Pilih link yang ada
END G
Pilih link yang ada
Pilih link yang ada I
J Z
Guru
Pegawai Roster
Pilih link yang ada H
TIDAK
TIDAK
TIDAK
TIDAK YA
YA YA
YA
Universitas Sumatera Utara
2. Tampilan Flowchart Buku Tamu
Gambar 4.3 Tampilan Flowchart Buku Tamu
Dengan adanya aliran informasi ini, akan membantu dalam menggambarkan isi dari setiap halaman dan link atau navigasi antara halaman-halaman didalam
website tersebut. Di samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML-nya, terutama link untuk navigasi penjelajahan ke seluruh halaman web.
Secara sederhana aliran Informasi dalam membangun website ini dapat dilihat pada gambar di bawah ini:
D
Buka Halaman Tamu
Isi Buku Tamu
Simpan Simpan db
Buku Tamu Data sudah
disimpan
Home B
YA
YA
Universitas Sumatera Utara
4.4 Mendesain LayoutHeader
Salah satu faktor agar website banyak dikunjungi para pengunjung adalah desain layout yang bagus. Desain Layout dibentuk oleh gambar-gambar dan teks-teks yang
menarik. Adapun langkah-langkah yang penulis lakukan dalam mendesain layout adalah sebagai berikut:
a. Membuat dokumen baru dengan ukuran panjang 750 pixel dan lebar 200 pixel.
Kemudian mengisi warna background dengan warna hijau.
b. Membuat layer baru dan mengisinya dengan ellipse tool 000000 dan kemudian
memberikan gradient fill tool dengan warna hijau pada foreground color dan warna hitam pada background color.
c. Dengan memanfaatkan tool-tool yang ada di Photoshop seperti rectangular
marquee tool, gradient fill tool, dan text tool dan dengan kreasi penulis, dibentuk suatu layoutheader seperti gambar berikut ini:
Gambar 4.4 LayoutHeader Website Yang Dibentuk Dengan Photoshop
Universitas Sumatera Utara
4.5 Mempersiapkan Database Server
Kategori