BAB III PERANCANGAN SISTEM

BAB III PERANCANGAN SISTEM

1.1. Data Flow Diagram (DFD) 1.1.1. Data Flow Diagram Level 0

Customer

3 4

1

Pengunjung web

7

5 6

2

Website penjualan online berbasis e-commerce Venus Computer Equipment

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

Gambar 3.1. DFD Level 0 Website Venus Computer Equipment

16

1.1.2. Data Flow Diagram Level 1

Pengunjung web

Melihat produk

admin

Login admin

Proses admin

Sistem Toko Venus Computer

Memilih barang dan melakukan pembelian

customer

Proses customer


17

1.1.3. Data Flow Diagram Level 2 Data admin

Pengolahan data admin

Data berita

Pengolahan data berita

Data admin

Data berita

Data admin

Data berita

Baca berita Data categories

Pengolahan data categories

Data categories

Data categories Pilih Categories

Admin

Customer

Data produk

Data transaksi

Pengolahan data produk

Data produk

Pengolahan data transaksi

Data transaksi

Data produk

Data transaksi

Pilih Produk

Melakukan transaksi


18

1.2. Flowchart Sistem 1.2.1. Flowchart Customer

M ulai

Info D ata P roduk

In p u t d a ta cu sto m e r

P em belian

ke d a ta b a se

In fo D a ta C u sto m e r

Data Customer T idak

T r ansaksi

Ya

S eles ai

Gambar 3.4. Flowchart Customer

1.2.2. Flowchart Visitors / Pengunjung Web

Mulai

Info Data Produk

Selesai

Gambar 3.5. Flowchart Visitors / Pengunjung Web

19

1.3. Jaringan Semantik Tampilan (JST) 1.3.1. Jaringan Semantik Tampilan (JST) Web

Pembelian

Service

Tentang kami

Order

Power bank

Home

USB/FD

Headpho ne

Charger

Mp3 Player

Acesories Speaker

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 Pembelian, page Service, page Order, sub kategori untuk tiap produk seperti 20

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, Headphone dan USB/FD. 21



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 kategori untuk produk lain seperti USB/FD.

22

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 Tambah Produk

23

1.4. Lembar Kerja Tampilan (LKT) 1.4.1. Lembar Kerja Tampilan (LKT) Web 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

header

Home

Tentang kami

Cara pembelian

Service

Order

Selamat datang di Venus Computer Equipment

Categories

News

No Rekening

Admin Login

footer

Gambar 3.8. LKT untuk tampilan Home

24

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

header

Home

Tentang kami

Cara pembelian

Service

Order

Tentang Kami

Categories

News

No Rekening

Admin Login

footer

Gambar 3.9. LKT untuk tampilan Tentang Kami 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

header

Home

Tentang kami

Cara pembelian

Service

Order

Cara Pembelian

Categories

News

No Rekening

Admin Login

footer

Gambar 3.10. LKT untuk tampilan Cara Pembelian

25


header

Home

Tentang kami

Cara pembelian

Service

Order

Service

Categories

News

No Rekening

Admin Login

footer

Gambar 3.11. LKT untuk tampilan Service

26


header

home

Tentang kami

Cara pembelian

Service

Order

Order Barang

Nama Anda : Categories

Nama barang : Email Anda : Keterangan :

News kirim

No Rekening

reset

Admin Login

footer

Gambar 3.12. LKT untuk form Order Barang

Navigasi header

Home

Tentang kami

Cara pembelian

Service

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 Produk : berisi jenis-jenis produk yang ditawarkan

Order

Produk

Categories

News

No Rekening

Admin Login

footer

Gambar 3.13. LKT untuk tampilan Produk dari tiap Categories 27

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 Detail Barang : berisi detail dari barang yang dipilih barik berupa pilihan warna atau harga

header

home

Tentang kami

Cara pembelian

Service

Order

Detail Barang

Categories

News No Rekening

Admin Login

footer

Gambar 3.14. LKT untuk tampilan Detail Barang dari tiap Produk 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 Berita Teknologi : berisi sebuah berita yang lengkap dengan gambarnya yang menyangkut teknologi terbaru

header

Home

Tentang kami

Cara pembelian

Service

Order

Berita Teknologi

Categories

(gambar)

News (isi berita) No Rekening

Admin Login

footer

Gambar 3.15. LKT untuk tampilan Berita Teknologi daru sub menu News

28

1.4.2. Lembar Kerja Tampilan (LKT) Admin logout

Venus Computer Website Administration Home

Tambah Product

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

Tambah Berita

Content untuk update delete Produk dan Berita

Gambar 3.16. LKT untuk Tampilan Home pada Admin logout


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 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

Tambah Produk

Nama Produk Images

Pilih file

Harga Spesifikasi Kategori Submit

Gambar 3.17. LKT untuk tampilan Tambah Produk

29

logout


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 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

Tambah Berita

Tanggal Gambar

Pilih file

Judul Berita Isi Submit

Gambar 3.18. LKT untuk Tampilan Tambah Berita

30

BAB III PERANCANGAN SISTEM

Recommend Documents