Sambungan Tabel 4.4 Field
Jenis Tanggal Lahir
Date Jenis Kelamin
Varchar 20 Asal Daerah
Varchar 60 Status
Varchar 20 Tahun Masuk
Varchar 10 Tahun Keluar
Varchar 10 Pendidikan Awal
Varchar 20 Pendidikan Akhir
Varchar 20 Penyaluran
Varchar 100 Keteranagan
Varchar 100
4.4 Membangun Halaman Situs
Adapun halaman-halaman yang akan dibangun adalah:
Universitas Sumatera Utara
a. Halaman Administrator, merupakan halaman-halaman yang hanya bisa dibuka
oleh admin saja, dimana admin mempunyai tugas untuk menambah, mengubah, menghapus seluruh data yang ada.
b. Halaman Beranda, merupakan halaman yang menjelaskan sejarah berdirinya
panti asuhan dan program-program kerja yang dilaksanakan oleh panti asuhan. c.
Halaman Lokasi, adalah halaman yang berisi tentang lokasi dan alamat lengkap.panti asuhan,
d. Halaman Galeri, adalah halaman yang berisikan photo-photo anak asuh dan
para penyumbang dan simpatisan e.
Halaman Kebutuhan, adalah halaman yang memberikan penjelasan mengenai kebutuhan panti asuhan.
f. Halaman Donatur, adalah halaman yang berisikan mengenai cara-cara menjadi
seorang donator panti asuhan. g.
Halaman Ucapan terimakasih, adalah halaman yang berisikan ucapan terima kasih kepada para donatur yang telah member sumbangan ataupun bantuan.
h. Halaman Data Anak Asuh, adalah halaman yang berisikan mengenai data
alumni, anak asuh dari awal berdirinya panti asuhan. Tahap-tahap yang dilakukan dalam membangun halaman situs adalah sebagai berikut:
1. Membuka software Macromedia Dreamweaver 8 sebagai software pengatur
letak layout dan penulisan-penulisan skrip-skrip PHP dalam membangun
Universitas Sumatera Utara
halaman tampilan yang dapat dilihat seperti gambar berikut:
Gambar 4.2 Tampilan Dreamweaver
2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat
pada Macromedia Dreamweaver yaitu dengan meletakkan link-link grafik, animasi dan modul lainnya ditempat yang telah disediakan.
3. Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada
tempat yang sesuai yang dikerjakan pada jendela code, split atau design pada Macromedia Dreamweaver.
4. Melakukan modifikasi pada format, font, size dan sebagainya.
Universitas Sumatera Utara
4.5 Perancangan Data Flow Diagram DFD
Data flow diagram menggambarkan arus data di dalam sistem dengan struktur, jelas dan menggunakan sejumlah bentuk-bentuk simbol untuk menggambarkan bagaimana
data mengalir melalui suatu proses yang saling berkaitan secara grafis. Berikut ini adalah bentuk Data FlowDiagram dari website panti asuhan Umar Bin Khattab.
- Info Panti Asuhan
- Info Struktur Organisasi - Login Administrator
- Info Visi Misi - Data Donatur
- Info Program kerja - Data Anak asuh
- Info Data Pengasuh - Data Pengurus
- Info Data Anak Asuh - Info Panti asuhan
Laporan - Pengunjung - Info Panti Asuhan
Laporan - Administrator
- Info Data Anak Asuh Laporan
- Data Anak Asuh - Informasi Pengurus
Laporan - Data Pengurus dan donatur
- Informasi Donatur
Gambar 4.3 Diagram Konteks Website
Pengunjung
Sistem Informasi Berbasis Web Pada Panti Asuhan Umar Bin
Khattab Lubuk Pakam Administrator
Anak Asuh Staf Tata Usaha
Universitas Sumatera Utara
4.5.1 Flowchart Menu Utama
Seorang pengunjung website dapat mengakses website Panti Asuhan Umar Bin Khattab Lubuk pakam dan dapat berpindah dari halaman yang satu ke halaman yang
lainnya. Masing-masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung. Flowchart menu utama dapat dilihat pada gambar 4.4 di bawah ini :
Gambar 4.4 Flowchart Menu Utama
Start Tampilan Menu
Beranda Lokasi
Galeri Kebutuhan
Ucapan Donatur
Data Anak Pilih Link
Pilih Link
Pilih Link Pilih Link
Pilih Link Pilih Link
Pilih Link
Keluar End
A B
C
D
E F
G
NO YES
YES YES
YES YES
YES
YES YES
Universitas Sumatera Utara
4.6 Design Website
4.6.1 Design halaman beranda
Dalam mendesign halaman ini, penulis menggunakan software Adobe Photoshop CS3 dan Macromedia Flash 8. Halaman beranda adalah halaman utama yang merupakan
halaman yang akan tampil setelah masuk ke dalam situs panti asuhan Umar bin Khattab Lubuk pakam. Adapun tampilan menu beranda adalah sebagai berikut :
Gambar 4.5 Tampilan Halaman Beranda
Universitas Sumatera Utara
4.6.2 Design halaman lokasi
Gambar 4.6 Tampilan Halaman Lokasi
4.6.3 Design halaman galeri
Gambar 4.6 Tampilan Halaman Galeri
Universitas Sumatera Utara
4.6.4 Design halaman kebutuhan
Gambar 4.8 Tampilan Halaman Kebutuhan
4.6.5 Design halaman donatur
Gambar 4.9 Tampilan Halaman Donatur
Universitas Sumatera Utara
4.6.6 Design halaman data anak asuh
Gambar 4.10 Tampilan Halaman Data Anak Asuh
4.6.7 Design halaman ucapan terimakasih
Gambar 4.11 Tampilan Halaman Ucapan Terimakasih
Universitas Sumatera Utara
4.6.8 Administrator website
Halaman administrator adalah kumpulan halaman web yang berfungsi sebagai ruang kerja seorang admin untuk meng update dan mengelola data dari website. Data yang
ditampilkan pada website diambil langsung dari database. Ada 3 tiga cara dari seorang admin dalam mengelola database melalui halaman admin yaitu menambah
data, mengedit data, dan menghapus data. Untuk masuk ke halaman menu admin pengguna harus melakukan login terlebih dahulu dengan username : admin dan
password : password.
Pada halaman administrator website Panti asuhan Umar bin Khattab Lubuk pakam terdapat 3 tiga menu utama, yaitu Halaman Data Siswa, Halaman Data Guru
dan Halaman Buku Tamu. Tampilan halaman Administrator dapat dilihat pada gambar berikut ini :
Gambar 4.12 Tampilan Halaman Administrator
Universitas Sumatera Utara
a. Halaman ucapan terimakasih
Halaman ini berfungsi menyediakan ruang kerja bagi administrator untuk menambah, mengubah, menghapus, dan menambah data ucapan terimakasih kepada donatur.
b. Halaman anak asuh