Flowchart Program Rancangan Tampilan Web Rancangan Menu Home

34

3.7 Flowchart Program

Flowchat adalah suatu bagan yang digunakan arus logika untuk pemrosesan data dalam suatu program dari awal sampai akhir. Bagan alir program merupakan alat yang berguna bagi programer untuk mempersiapkan program yang rumit. Bagan alir terdiri atas simbo-simbol yang mewakili langkah program dan garis alir flow lines menunjukkan urutan dari simbol-simbol yang dikerjakan. Bagan arus flowchat terdapat pada Gambar 3.5 sampai dengan 3.10 Gambar 3.5 Bagan arus flowchart Home Galery News Register Mulai Selesai 35 a. Flowchart Menu Home Gambar 3.6 Flowchart Menu home Mulai Menu home Tampilan isi menu home Selesai 36 b. Flowchart Menu Login Tidak Ya Gambar 3.7 Flowchart Menu Login Mulai Menu Login Input nama user dan password Nama user passwor = benar Masuk menu user Selesai Nama user atau password salah, ulangi kembali 37 c. Flowchart Daftar Sebagai User Tidak ya Gambar 3.8 Flowchart daftar sebagai user Mulai Daftar user Input nama user Input password Input alamat Input kota Input provinsi Input kode pos Input email Input No tlp Data sukses Data tersimpan Selesai Data tidak tersimpan input data anda yang tidak terisi 38 d. Flowchart daftar admin Tidak Ya Gambar 3.9 Flowchart daftar sebagai admin Mulai Daftar admin Input nama user Input password Input alamat Input kota Input provinsi Input kode pos Input email Data sukses Data tersimpan Selesai Data tidak tersimpan input data anda yang tidak terisi Input No tlp 39 e. Flowchart Input dan hapus Kategori Tidak Ya Tidak Tidak ya ya Gambar 3.10 Flowchart input dan hapus kategori Mulai Login admin 1. Edit 2. Hapus Input pilihan kategori Pil=1 Pil=2 Selesai Hapus kategori Tampil kategori Edit kategori Edit kategori simpan Hapus kategori 40

3.8 Rancangan Tampilan Web

Berikut merupakan rancangan tampilan dari website yang dibuat terdapat pada Gambar 3.11 sampai dengan 3.23

a. Rancangan Menu Home

Gambar 3.11 Rancangan tampilan home GEMAR CELLULAR Home Galery News Register Selamta datang di wesite Gemar Cellulars Copyright © 2010 RikaMaster. All Rights Reserved By RikaMaster Online Design By Rika Rosmala Sari Kategori Cari Cari Kategori Gambar Kontak Login Username password News cari Login 41 b. Rancangan Menu Galery Gambar 3.12 Rancangan tampilan galery GEMAR CELLULAR Home Galery News Register Copyright © 2010 RikaMaster. All Rights Reserved By RikaMaster Online Design By Rika Rosmala Sari Kategori Cari Cari Kategori Gambar Kontak Login Username password News Login 42

c. Rancangan Menu News