Membangun Halaman Situs Halaman ucapan terimakasih

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