Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
Field Type
Extra int10
no auto_increment
Dari varchar30
Kota varchar20
Tgl varchar30
Jam varchar30
Email varchar40
Komentar text
Tabel 4.2.5 Struktur Tabel komentar
4.3 Flowchart
Langkah selanjutnya adalah membuat outline atau garis besar dari situs tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi atau
flowchart bagan alir situs tersebut. Flowchart merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman per halaman, biasanya berbentuk
pohon yang bercabang-cabang.
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, terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana
flowchart dalam membangun situs ini dapat dilihat pada gambar di bawah ini:
Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
Gambar 4.3 Flowchart Rancangan Aplikasi Web situs
4.4 Mendesain LayoutTemplate
Desain layout yang bagus dan menarik merupakan salah satu faktor agar situs diminati para pengunjung. Perpaduan antara gambar-gambar dan teks-teks yang unik dapat
menciptakan suatu layout yang atraktif. Adapun langkah-langkah umum yang penulis lakukan dalam mendesain layout adalah sebagai berikut:
1 Membuka software Adobe Photoshop CS2 sebagai software editor untuk
mendesain layout. Tampilannya dapat dilihat seperti gambar berikut ini:
Index
Produk Profil
Customer Forum
Book Mark
Home News
Contact Us
FAQ
Permohona Login
Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
Gambar 4.4.1 Tampilan Adobe Photoshop CS2
2 Membuat dokumen baru dengan ukuran panjang 900 pixel dan lebar 676 pixel.
Kemudian mengisi warna background dengan warna putih FFFFFF. 3
Membuat layout baru dan mengisinya dengan gambar-gambar dan teks-teks yang dibutuhkan serta mengedit warna dari tiap-tiap gambar untuk menciptakan suatu
layout yang menarik dan atraktif. 4
Dengan memanfaatkan tool-tool yang ada di Photoshop seperti rectangular marquee tool, gradient fill tool, pencil tool,brush tool dan text tool dan dengan
kreasi penulis, dibentuk suatu layout seperti gambar berikut ini:
Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
Gambar 4.4.2 Layout Aplikasi Web yang dibentuk dengan Photoshop.
Membuka software Macromedia Dreamweaver 8 sebagai software pengatur letak layout dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya
dapat dilihat seperti gambar berikut ini:
Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
Gambar 4.4.3 Tampilan Macromedia Dreamweaver 8
1. Membuka layout yang sebelumnya telah dibuat di Photoshop.
2. Mengatur tata letak layout dengan memanfaatkan tool dan perintah yang terdapat
pada Macromedia Dreamweaver yaitu dengan meletakkan link-link, grafik, animasi, isi berita dan modul-modul lainnya di tempat yang telah ditentukan.
3. Menulis dan meletakkan skrip-skrip PHP, HTML, dan Javascript yang diperlukan
pada tempat yang sesuai yang dikerjakan di jendela Code pada Macromedia Dreamweaver.
4. Mengerjakan halaman-halaman berikutnya.
Nurjanah : Implementasi Web Dinamis Berbasis Php Dan MySQLl Di CV. Widya Tamara Medan, 2009. USU Repository © 2009
BAB 5
IMPLEMENTASI SISTEM
5.1 Pengertian Implementasi Sistem
