BAB IV
PERANCANGAN DAN IMPLEMENTASI SISTEM
4.1 Analisa Kebutuhan Sistem
Perancangan sistem sangat dibutuhkan untuk mendapatkan suatu sistem yang dapat berjalan dengan baik. Diataranya mencakup perancangan database, perancangan perangkat keras (hardware), perangkat lunak (software).
4.1.1. Perangkat Keras (hardware)
Perangkat keras yang digunakan dalam pembuatan website Kantor PDAM kabupaten Brebes adalah:
1. Komputer dengan prosessor intel (R) CPU 1,60 Hz.
2. RAM 256 MB.
3. Monitor 15 ” / 14”.
4. Hardisk 20 GB.
5. CD Room Drive 52x.
6. Mouse, keyboard, printer.
4.1.2. Perangkat Lunak (software)
Pembuatan website Kantor PDAM Kabupaten Brebes ini menggunakan sistem operasi Microsoft Windows XP Profesional, Macromedia Dreamweaver 8, PHP, MySQL, Apache, dan Mozilla Firefox.
36
4.2 Data Flow Diagram (DFD)
Data Flow Diagram (DFD) adalah alat yang digunakan pada metodologi pengembangan system yang terstruktur dan juga merupakan alat yang dapat menggambarkan arus data di dalam sebuah sistem.
Berikut Hierarki Rancang Bangun Situs Website Kantor PDAM Kabupaten Brebes.
Top Level
Level 0
Gambar 4.1 Hierarki Kantor PDAM Kabupaten Brebes 0
Home
1 Profil
4 Kontak
Kami 3
Fitur 2
Data Umum
0 Website Kantor PDAM
Kab.Brebes
Berikut Context Diagram Rancang Bangun Situs Website Kantor PDAM Kabupaten Brebes.
Informasi Data Admin
Informasi Data PDAM
Informasi Data Admin Informasi Data PDAM
Gambar 4.2 Diagram Context 0 Informasi Kantor PDAM
Brebes
User Admin
Data Data Data Data Data Home Profil Umum Fitur Kontak
Kami
Data Data Data Data Data Home Profil Umum Fitur Kontak
Kami
Gambar 4.3 DFD Level 0 Rancang Bangun Situs Website Kantor PDAM USER
WEBSITE KANTOR PDAM
KABUPATEN BREBES
ADMIN
.
Data Home Data Home
D1 Data Menu
Data Profil Data Profil
D2 Data Profil
Data Umum Data Umum
D3 Data Umum
Data Fitur Data Fitur
D4 Data Fitur
Data Kontak Kami Data Kontak Kami
D5 Data Kontak Kami
Gambar 4.4 DFD Level 1 Rancang Bangun Situs Website Kantor PDAM 1
Home
User Admin
2 Profil
3 Data
Umum
4 Fitur
5 Kontak
Kami
4.3 ERD (Entity Relationship Diagram)
ERD adalah model konseptual yang mendeskripsikan hubungan antara penyimpanan (dalam DFD). ERD merupakan notasi grafis pemidahan data konseptual yang mendeskripsikan hubungan antara penyimpanan. ERD dapat menguji model dengan mengabaikan proses yang harus dilakukan.
Gambar 4.5 ERD Rancang Bangun Situs Website Kantor PDAM Kab. Brebes Informasi PDAM
Sistem Informasi
Data PDAM
USER
ADMIN
Sistem Informasi Data
USER
Tabel ADMIN
Data Profil
Data Fitur
4.4 Diagram Alir (Flowchart)
Bagan alir (flowchart) adalah bagan (chart) yang menunjukan alir (flow) di dalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi.
Flowchart dari pembuatan website Kantor PDAM Kabupaten Brebes adalah sebagai berikut :
Gambar 4.6 Flowchart pada website Kantor PDAM Kabupaten Brebes Mulai
Menu web
Home Profile Fitur Kontak
Kami
Selesai Data Umum
4.5 Instalasi Program yang dibutuhkan 4.5.1 Instalasi Web server
Untuk memulai pembuatan website ini, langkah awal adalah user menginstal web server terlebih dahulu sebagai web server localhost yaitu dengan menggunakan XAMPP versi 1.6.6, cara penginstalannya yaitu :
Gambar 4.7 Instalasi XAMPP
Pilih aplikasi XAMPP yang akan di-install kemudian klik Next untuk tahap selanjutnya, maka akan muncul ikon seperti gambar 4.8 dibawah ini.
Gambar 4.8 Proses instalasi XAMPP
Kemudian Klik Install, setelah XAMPP telah terpasang dengan benar maka akan muncul ikon seperti gambar 4.9 dibawah ini.
Gambar 4.9 Instalasi XAMPP selesai
4.6. PROSES PEMBUATAN LINK PADA HALAMAN WEBSITE
Pembuatan design website dilakukan dengan menggunakan macromedia dreamweaver 8. Selanjutnya design tersebut diisi dengan teks untuk proses pembuatan link pada halaman website.
4.6.1 Pembuatan Link Pada Halaman Home
Pembuatan link home cukup mengisi dialog link dengan nama file yang dimaksud, jika ingin membuat link ke halaman home maka di dalam dialog link cukup diisi dengan index.php.
Gambar 4.10 Menu Pembuatan Link Home
4.6.2 Pembuatan Link Pada Halaman Profil
Pembuatan link profil cukup mengisi dialog link dengan nama file yang dimaksud, jika ingin membuat link ke halaman profil maka di dalam dialog link cukup diisi dengan profil.php.
Gambar 4.11 Menu Pembuatan Link Profil
Di dalam link profil juga terdapat Sejarah PDAM Brebes, Visi dan Misi, Tujuan, dan Motto, cara mengelink dari teks masing-masing tersebut dengan memblok link profil lalu menuju Tag Inspector yang ada pada Panel Group, klik Behaviors lalu Add
Behavior kemudian Show Pop-Up Menu, tuliskan masing-masing teks tersebut.
Gambar 4.12 Menu Masukkan Link Sejarah
Gambar 4.13 Menu Masukkan Link Visi dan Misi
Gambar 4.14 Menu Masukkan Link Tujuan
Gambar 4.15 Menu Masukkan Link Motto
4.6.3 Pembuatan Link Pada Halaman Data Umum
Pembuatan link Data Umum cukup mengisi dialog link dengan nama file yang dimaksud, jika ingin membuat link ke halaman Data Umum maka di dalam dialog link cukup diisi dengan data_umum.php.
Gambar 4.16 Menu Pembuatan Link Data Umum
Di dalam link Data Umum juga terdapat Data Umum PDAM Brebes, Data Teknik, dan Data Keuangan, cara mengelink dari teks masing-masing tersebut dengan memblok link Data Umum lalu menuju Tag Inspector yang ada pada Panel Group, klik Behaviors lalu Add Behavior kemudian Show Pop-Up Menu, tuliskan masing-masing teks tersebut.
Gambar 4.17 Menu Masukkan Link Data Umum
Gambar 4.18 Menu Masukkan Link Data Teknik
Gambar 4.19 Menu Masukkan Link Data Keuangan
4.6.4 Pembuatan Link Pada Halaman Fitur
Pembuatan link Fitur cukup mengisi dialog link dengan nama file yang dimaksud, jika ingin membuat link ke halaman Fitur maka di dalam dialog link cukup diisi dengan fitur.php.
Gambar 4.20 Menu Pembuatan Link Fitur
Di dalam link Fitur juga terdapat Buku Tamu, Galeri Foto, Berita dan Artikel, cara mengelink dari teks masing-masing tersebut dengan memblok link Fitur lalu menuju Tag Inspector yang ada pada Panel Group, klik Behaviors lalu Add Behavior kemudian Show Pop-Up Menu, tuliskan masing-masing teks tersebut.
Gambar 4.21 Menu Masukkan Link Buku Tamu
Gambar 4.22 Menu Masukkan Link Galeri
Gambar 4.23 Menu Masukkan Link Berita
Gambar 4.24 Menu Masukkan Link Artikel
4.7 HASIL IMPLEMENTASI SISTEM 4.7.1 Tampilan Website
A. Halaman atau Jendela Home
Halaman ini juga dapat disebut sebagai halaman pembuka karena pada saat pertama website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lain. Pada halaman depan ini, akan dirancang cukup kompleks karena akan ada link untuk semua halaman website.
Berikut rancangan gambar menu halaman home atau depan.
Gambar 4.25 Halaman atau Jendela Home B. Halaman atau Jendela Profil
Halaman profil merupakan halaman yang menampilkan jendela profil yang meliputi halaman sejarah, halaman visi dan misi, halaman tujuan, dan halaman motto Kantor PDAM Kabupaten Brebes. Berikut rancangan gambar menu profil.
Gambar 4.26 Halaman atau Jendela Profil C. Halaman atau Jendela Data Umum
Pada halaman ini, akan menampilkan Data Umum tentang Kantor PDAM Kabupaten Brebes, menu data umum meliputi data teknik, dan data keuangan PDAM Kabupaten Brebes.
Berikut rancangan gambar menu data umum.
Gambar 4.27 Halaman atau Jendela Data Umum
D. Halaman atau Jendela Berita
Pada halaman ini, akan menampilkan berita-berita umum seperti berita perkembangan PDAM Kabupaten Brebes dan sekitarnya, berita politik, berita ekonomi dan lain-lain.
Berikut rancangan gambar halaman atau jendela berita.
Gambar 4.28 Halaman atau Jendela Berita
4.7.2 Membuat Layout dangan Dreamweaver 8
Sebelum memulai membuat layout, pastikan program Dreamweaver 8 telah dibuka. Setelah itu akan tampil program Dreamweaver 8 seperti gambar dibawah ini.
Gambar 4.29 Tampilan program Dreamweaver 8
Kemudian buat file PHP baru. Caranya pada bagian Create New klik PHP. Pastikan tab yang aktif pada bagian Design.
Selanjutnya pada jendela table isi nilai Row=1 dan Columns=1, Table Width=745 Pixels, Border thickness=1, Cell padding=0 dan Cell spacing=0. Klik bagian dalam table buat kembali table baru isi nilai Row=4, Columns=1, Table width=100 percent, Border thickness=0, Cell padding=0, dan Cell spacing=0.
4.7.3 Daftar domain gratis di www.co.cc
1. Buka situs penyedia domain gratis yaitu www.co.cc
Gambar 4.30 Tampilan www.co.cc
2. Masukan alamat situs yang ingin dibuat misal www.pdam- brebes.co.cc, setelah itu klik cek ketersediaan untuk memastikan apakah alamat web tersedia atau tidak.
3. Jika tersedia, kita klik lanjutkan pendaftaran. Kemudian klik Buat Account Baru jika kita belum pernah daftar di www.co.cc.
4. Isi formulir yang ada, kemudian pilih daftar.
5. Setelah menjadi anggota dan masuk sebagai anggota, pilih Manage Domain.
6. Klik domain yang telah dibuat tadi yaitu pdam-brebes.co.cc, kemudian pilih setup.
Gambar 4.31 Setup domain
7. Isikan ns01.000webhost.com pada Name Server 1 dan ns02.000webhost.com pada Name Server 2. Kemudian klik Setup dan setelah beberapa saat klik OK.
4.7.4 Upload website di hosting gratis www.000webhost.com
1. Buka situs penyedia hosting gratis yaitu www.000webhost.com.
Gambar 4.32 Tampilan www.000webhost.com 2. Klik Sign Up untuk mendaftar hosting gratis.
3. Isi formulir pendaftaran dan alamat web yang sudah dibuat yaitu www.pdam-brebes.co.cc. Klik Create My Account.
4. Setelah selesai mendaftar, tunggu konfirmasi pendaftaran yang akan dikirimkan lewat email dengan lama waktu menunggu sekitar 24 jam.
5. Setelah konfirmasi selesai, masuk ke control panel sebagai anggota.
Gambar 4.33 Control Panel www.000webhost.com 6. Pilih MySQL untuk membuat database. Masukan database name,
user, dan password, kemudian klik Create Database.
7. Setelah database terbuat masuk ke halaman phpMyAdmin.
Gambar 4.34 PhpMyAdmin
8. Klik nama database yang telah dibuat dan pilih import kemudian klik browse dan pilih database phpMyAdmin yang terlebih dahulu telah dibuat dalam bentuk file sql . Klik Go.
9. Setelah proses import selesai tutup halaman phpMyAdmin.
10. Masuk ke folder web yaitu C:\\ xampp\htdocs\pdambrebes. Buka file configuration.php dan rubah nama host, database, user, dan password dengan database yang sudah dibuat di www.000webhost.com.
11. Kompres file web dalam bentuk zip.
12. Pilih 1-Click Website Restore dan klik Browse kemudian pilih file dalam bentuk zip.
13. Klik Upload dan tunggu proses upload selesai. Setelah proses upload selesai dan berhasil coba buka website tersebut.
Gambar 4.35 Website PDAM Kabupaten Brebes
