T0 562011003 BAB III

(1)

16

BAB III

PERANCANGAN SISTEM

1.1. Data Flow Diagram (DFD)

1.1.1. Data Flow Diagram Level 0

Website penjualan online berbasis

e-commerce Venus Computer Equipment

Customer

1 Pengunjung web

2 3 4

5 6

7

Penjelasan

Data yang mengalir dari atau ke customer

1. Info produk

2. Menampilkan produk

3. Beli produk

4. Menampilkan form order

5. Mengirim identitas untuk order

6. Data customer

Data yang mengalir dari atau Pengunjung web

7. Info data produk

(2)

17

1.1.2. Data Flow Diagram Level 1

Sistem Toko Venus Computer

admin customer

Proses admin Proses customer Login admin

Pengunjung web

Melihat produk

Memilih barang dan melakukan pembelian

(3)

18

1.1.3. Data Flow Diagram Level 2

Admin

Pengolahan

data admin Data admin

Pengolahan

data categories Data categories

Pengolahan

data produk Data produk

Pengolahan

data transaksi Data transaksi

Data admin Data admin

Data categories Data categories

Data produk Data produk

Data transaksi Data transaksi

Customer Pilih Categories

Pilih Produk

Melakukan transaksi Pengolahan

data berita Data berita

Data berita Data berita

Baca berita

(4)

19

1.2. Flowchart Sistem

1.2.1. Flowchart Customer

M ulai

Info D ata

P roduk

P em belian

In p u t d a ta c u s to m e r

k e d a ta b a s e

In fo D a ta C u s to m e r

T r ansaksi T idak

Ya

S eles ai

Data Customer

Gambar 3.4.

Flowchart Customer

1.2.2. Flowchart

Visitors

_{/ Pengunjung}

Web

Mulai

Info Data

Produk

Selesai

(5)

20 1.3. Jaringan Semantik Tampilan (JST)

1.3.1. Jaringan Semantik Tampilan (JST)

Web

USB/FD

Tentang

kami

Pembelian

Service

Order

Power

bank

Charger

Mp3

Player

Speaker

Acesories

Headpho

ne

Home

Gambar 3.6.

Jaringan Semantik Tampilan (JST)

Web

Keterangan Warna Line / garis



Line Biru Muda :

Dari page Home, dapat mengakses dengan klik ke page Tentang Kami, page

(6)

21 Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan

USB/FD.



Line Hijau :

Dari page Tentang Kami, dapat mengakses dengan klik ke page Pembelian,

page Service, page Order, sub kategori untuk tiap produk seperti seperti

Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan

USB/FD.



Line Merah :

Dari page Pembelian, dapat mengakses dengan klik ke page Order, sub

kategori untuk tiap produk seperti seperti Power Bank, Charger, Mp3 Player,

Speaker, Accessories, Headphone dan USB/FD.



Line Hitam :

Dari page Service, dapat mengakses dengan klik ke page Tentang Kami,

page Pembelian, page Order, sub kategori untuk tiap produk seperti seperti

Power Bank, Charger, Mp3 Player, Speaker, Accessories, Headphone dan

USB/FD.



Line Ungu :

Dari page Order, dapat mengakses dengan klik ke sub kategori untuk tiap

produk seperti seperti Power Bank, Charger, Mp3 Player, Speaker,

Accessories, Headphone dan USB/FD.



Line Pink :

Dari sub kategori produk Power Bank, dapat mengakses dengan klik ke sub

kategori untuk tiap produk seperti Charger, Mp3 Player, Speaker,

Accessories, Headphone dan USB/FD.



Line Hijau Tua :

Dari sub kategori produk Charger, dapat mengakses dengan klik ke sub

kategori untuk tiap produk seperti Mp3 Player, Speaker, Accessories,

(7)

22 

Line Oranye :

Dari sub kategori produk Mp3 Player, dapat mengakses dengan klik ke sub

kategori untuk tiap produk seperti Speaker, Accessories, Headphone dan

USB/FD.



Line Abu-abu :

Dari sub kategori produk Speaker, dapat mengakses dengan klik ke sub

kategori untuk tiap produk seperti Accessories, Headphone dan USB/FD.



Line Biru Muda :

Dari sub kategori produk Accessories, dapat mengakses dengan klik ke sub

kategori untuk tiap produk seperti Headphone dan USB/FD.



Line Coklat :

Dari sub kategori produk Headphone, dapat mengakses dengan klik ke sub

(8)

23

1.3.2. Jaringan Semantik Tampilan (JST) Admin

Home

Tambah

Produk

Tambah

Berita

Gambar 3.7.

JST Admin

Keterangan :

Line Ungu : Dari page Home dapat mengakses ke page Tambah Produk dan

Tambah Berita

Line Merah : Dari page Tambah Produk dapat mengakses ke page Home dan

Tambah Berita

Line Biru : Dari page Tambah Berita dapat mengakses ke page Home dan

(9)

24 1.4. Lembar Kerja Tampilan (LKT)

1.4.1. Lembar Kerja Tampilan (LKT)

Web

header

Categories

Home Tentang

kami

Cara

pembelian Service Order

News

footer

Selamat datang di Venus Computer Equipment

Navigasi

Tab Home : menampilkan halaman awal pada web

Tab Tentang Kami : menampilkan identitas toko Tab Cara pembelian : menampilkan tata cara pembelian dalam web ini

Tab Service : menampilkan jenis jasa yang ditawarkan toko berupa service

Tab Order : menampilkan form untuk memesan barang

Categories : berisi daftar kategori produk yang ditawarkan

No Rekening : berisi daftar nomor rekening untuk transaksi pembelian

Admin Login : apabila admin akan masuk ke page admin dan update isi web

News : berisi berita teknologi terbaru

No Rekening

Admin Login

(10)

25

header

Categories

Home Tentang

kami

Cara

News

footer Tentang Kami

Navigasi

No Rekening

Admin Login

Gambar 3.9.

LKT untuk tampilan Tentang Kami

header

Categories

Home Tentang

kami

Cara

News

footer Cara Pembelian

Navigasi

No Rekening

Admin Login

(11)

26

header

Categories

Home Tentang _kami _pembelianCara Service Order

News

footer Service

Navigasi

No Rekening

Admin Login

(12)

27

header

Categories

home Tentang _kami _pembelianCara Service Order

News

footer Order Barang

No Rekening

Navigasi

News : berisi berita teknologi terbaru Nama Anda :

Nama barang :

Email Anda :

Keterangan :

kirim reset

Admin Login

Gambar 3.12.

LKT untuk form Order Barang

header

Categories

Home Tentang

kami

Cara

News

footer Produk

No Rekening

Navigasi

News : berisi berita teknologi terbaru Produk : berisi jenis-jenis produk yang ditawarkan

Admin Login

(13)

28

header

Categories

home Tentang _kami _pembelianCara Service Order

News

footer Detail Barang

No Rekening

Navigasi

News : berisi berita teknologi terbaru Detail Barang : berisi detail dari barang yang dipilih barik berupa pilihan warna atau harga

Admin Login

Gambar 3.14.

LKT untuk tampilan Detail Barang dari tiap Produk

header

Categories

Home Tentang _kami _pembelianCara Service Order

News

News : berisi berita teknologi terbaru Berita Teknologi : berisi sebuah berita yang lengkap dengan gambarnya yang menyangkut teknologi terbaru

Admin Login

(14)

29

1.4.2. Lembar Kerja Tampilan (LKT) Admin

logout

Content untuk update delete Produk dan Berita

Venus Computer Website Administration

Home Tambah _Product Tambah _Berita

Navigasi

Tab Home : Untuk tampilan awal page Admin berisi untuk iupdate delete produk dan berita

Tab Tambah Produk : Untuk menambahkan produk Tab Tambah Berita : Untuk menambahkan berita pada web

Gambar 3.16.

LKT untuk Tampilan Home pada Admin

logout

Venus Computer Website Administration

Home Tambah

Product

Text box Nama produk : untuk memberi nama produk yang akan ditambahkan

Buttton Pilih File : untuk pilih gambar dari produk yang akan ditambahkan

Text box harga : untuk mencantumkan harga produk yang akan ditambahkan

Text box Spesifikasi : untuk menambahkan Spesifikasi produk yang akan ditambahkan

Text bos Kategori : untuk memilih jenis kategori pada produk yang akan ditambahkan

(15)

30

logout

Venus Computer Website Administration

Home Tambah _Product Tambah _Berita

Tambah Berita

Tanggal

Gambar

Judul Berita

Isi Pilih file

Submit

Navigasi

Text box Tanggal : untuk memilih tanggal berita Button Gambar : untuk memilih gambar dari berita yang akan ditambahkan

Text box Judul Berita : untuk memasukkan Judul berita yang akan ditambahkan

Text box Isi : untuk memasukkan isi berita yang akan ditambahkan