13

BAB III

PERANCANGAN SISTEM

3.1 DFD

Diagram Alir Data (DAD) atau Data Flow Diagram (DFD)

adalah suatu diagram yang menggunakan notasi-notasi untuk

menggambarkan arus dari data sistem, yang penggunaannya

sangat membantu untuk memahami sistem secara logika,

tersruktur dan jelas. DFD merupakan alat bantu dalam

menggambarkan atau menjelaskan DFD ini sering disebut juga

dengan nama Bubble chart, Bubble diagram, model proses,

diagram alur kerja, atau model fungsi.

3.2 FLOWCHART

1. Flowchart Front End Pengunjung Web

14

2. Flowchart Front End Pembelian

15

3. Flowchart Login Administrator

16

4. Flowchart kategori produk Administrator

5. Flowchart produk Administrator

17

18

6. Flowchart berita Administrator

7. Flowchart Laporan Penjualan Administrator

19

3.3 Rancangan Desain Website Penjualan RC

Sebelum membuat sebuah aplikasi, terlebih dahulu

membuat rancang desain dari aplikasi yang akan dibuat

sehingga akan mempermudah dalam proses pembuatan

aplikasi sesuai yang dinginkan. Berikut beberapa

rancangan desain aplikasi yang dibuat :

1. Halaman Depan (Front End) :

a. Design Menu Home

Tampilan menu user, pada saat halaman web diakses.

Gambar 4.1 LKT Dashboard Menu Home

Home Produk Testimoni Tentang Kami

20

b. Design Home

Tampilan menu home

Gambar 4.2 LKT Home

c. Design Produk

Tampilan menu produk untuk user

Kontent berita

Slider

Kategori

Home Produk Testimoni Tentang Kami

Home Produk Testimoni Tentang Kami

21

Gambar 4.3 LKT Produk

d. Design Produk Detail

Bagian produk detail

Gambar 4.3 LKT Produk

Home Produk Testimoni Tentang Kami

Produk

Foto Produk

Foto

22

e. Design Tentang Kami

Bagian tentang kami

Gambar 4.4 LKT Tentang Kami

2. Halaman Administrator (Back End) :

a. Form Login

Form Login untuk admin

Gambar 4.5 LKT Form Login

Home Produk Testimoni Tentang Kami

Tentang Kami

Konten Tentang Kami

Login Reset

User :

Pass :

23

b. Halaman Dashboard

Halaman Dashboard

Gambar 4.6 LKT Dashboard

c. Design List Produk Admin

Halaman untuk List Produk di admin

Gambar 4.7 LKT List Produk

Home Produk Laporan Pengaturan

Home Produk Laporan Pengaturan

List Produk

List Produk

24

d. Design Tambah & Edit Produk

Halaman Untuk Tambah dan Edit Produk

Gambar 4.8 LKT Edit / Tambah Produk

e. Design Manajemen Artikel

Data manajemen artikel

Gambar 4.9 LKT Manajemen Artikel

Home Produk Laporan Pengaturan

Tambah / Edit Produk

Isian Data Produk

Home Produk Laporan Pengaturan

Tambah / Edit Artikel

Isian Data Artikel