BAB III PERANCANGAN SISTEM. 1.1 Data Flow Diagram ( DFD )

BAB III PERANCANGAN SISTEM

1.1 Data Flow Diagram ( DFD ) Berikut ini adalah Data Flow Diagram dari website “Chelly Garskin Gadget Accesories” : Data Flow Diagram ( DFD )

Admin

Customers

6

7

8

Pengunjung

9

5

10

4 3 2 1 Sistem Informasi Website Jual Beli online “GARSKIN” Chelly Garskin Gadget Accesories

Penjelasan : Data yang mengalir dari atau ke Admin : 1. Data Informasi 2. Log In 3. Tambah, Edit dan Delete data 4. Data admin 5. Log Out Data yang mengalir dari atau ke Customers : 6. Data Informasi 7. Beli 8. Isi form beli 9. Data customers Data yang mengalir dari atau ke Pengunjung website : 10. Data informasi

Gambar 3.1.1 Data Flow Diagram ( DFD )

18

19

1.2 Flowchart Dibawah

ini

adalah

flowchart

dari

administrator,

customers dan pengunjung website “Chelly Garskin Gadget Accesories” : 1. Flowchart Administrator Dibawah

ini

merupakan

flowchart

admin.

Flowchart ini menunjukkan lebih jelas bagaimana alur administrator

mendapatkan

informasi

dan

dapat

menambah, merubah dan meng hapus informasi dari mulai login hingga proses selesai. Flowchart Admin Data Informasi

Mulai

Log In

Tambah, Edit dan Delete data

Log Out

Data admin

Selesai

Gambar 3.2.1 Flowchart Administrator website

20

2. Flowchart Customers Flowchart ini menunjukkan bagaimana seorang pembeli dapat memesan garskin yang diinginkan, mulai dari informasi yang didapatkan hingga memesan garskin.

Flowchart Customers Mulai

Data Informasi

Proses beli

Input data customers

Data customers

Selesai

Gambar 3.2.2 Flowchart Customers website

21

3. Flowchart Pengunjung Website Flowchart dibawah ini hanya untuk memerjelas bagaimana seseorang website mendapatkan informasi dari web

yang dimiliki oleh P2PAUDNI

Regional II

Semarang.

Flowchart Pengunjung

Mulai

Data Informasi

Selesai

Gambar 3.2.3 Flowchart Pengunjung website

22

1.3 Bagan Jaringan Website Berikut ini adalah bagan jaringan dari website “Chelly Garskin Gadget Accesories” :

Gambar 3.3.1 Bagan Jaringan website

23

1.4 Lembar Kerja Tampilan ( LKT ) Lembar Kerja Tampilan ( LKT ) dibawah ini merupakan gambar rancangan dari website “Chelly Garskin Gadget Accesories” : 1.4.1 Halaman Awal ( Home ) Halaman home ini berisikan mengenai informasi tentang produk yang dijual belikan melalui website “Chelly Garskin Gadget Accesories” serta halaman untuk admin dapat log in. Berikut ini adalah rancangan dari halaman home : Header

Cara Pemesanan

Home

Administrator Admin,,,,,,

Cara Pembayaran

Check Order

Kontak

Tentang Kami

Kategori -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal

Mengenai kami

Harga -Nokia -Samsumg -Blackberry -Sony -Lain-Lain

Agenda Gambar Garskin

Footer

Gambar 3.4.1 Tampilan halaman Home

24

1.4.2 Halaman Cara Pemesanan Halaman cara pemesanan ini berisikan petunjuk bagaimana customers dapat memesan atau membeli produk. Berikut ini adalah tampilan halaman cara pemesanan : Header

Home

Cara Pemesanan

Kategori -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Harga -Nokia -Samsumg -Blackberry -Sony -Lain-Lain

Cara Pembayaran

Check Order

Kontak

Cara Pemesanan

Cara pemesanan


Footer

Gambar 3.4.2 Tampilan halaman Cara Pemesanan

25

1.4.3 Halaman Cara Pembayaran Halaman cara pemesanan ini berisikan langkahlangkah pembayaran dan rekening bank untuk pembayaran barang. Tampilan dibawah ini adalah tampilan dari cara pembayaran, tampilan ini sama dengan halaman cara pemesanan :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

Cara Pembayaran

Cara pembayaran


Footer

Gambar 3.4.3 Tampilan halaman Cara Pembayaran

26

1.4.4 Halaman Check Order Halaman check order ini digunakan untuk validasi atau konfirmasi customers yang membeli barang ke administrator sebagai penjual, bahwa barang yang dipesan sudah sampai ke tangan customer. Berikut adalah tampilan dari check order :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

Check Order

Form Check Order


Footer

Gambar 3.4.4 Tampilan halaman Check Order

27

1.4.5 Halaman Kontak Halaman kontak ini berisikan tentang customer service yang dapat dihubungi oleh customers yang akan memesan garskin. Dibawah ini adalah tampilan dari kontak :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

Kontak


Kontak


Footer

Gambar 3.4.5 Tampilan halaman Kontak

28

1.4.6 Halaman Log In Admin Halaman log in admin ini digunakan sebagai halaman untuk admin dapat masuk ke home admin dan dapat menambah, mengubah dan meng hapus data yang perlu. Berikut ini adalah tampilan dari halaman log in admin :

Log In Administrator

Gambar

Username : Password :

Login

Gambar 3.4.6 Tampilan halaman Log In Administrator

29

1.4.7 Halaman Home Pada Menu Admin Home admin ini hanya menampilkan kata-kata selamat datang pada halaman administrator saja. Berikut adalah tampilan dari home admin : Administrator Log Out

Header

Home Kategori Harga

Selamat Datang

Kontak Log Out

Footer

Gambar 3.4.7 Tampilan halaman Home Administrator

30

1.4.8 Halaman Kategori Pada Menu Admin Halaman

kategori

admin

ini

digunakan

administrator untuk menambah, mengubah dan menghapus kategori-kategori garskin atau untuk meng update kategori garskin yang baru. Halaman dibawah ini adalah tampilan dari halaman kategori admin : Administrator Log Out

Header

Home Kategori

List Category Tambah

Harga Kontak

Tabel untuk Edit dan Hapus

Log Out

Footer

Gambar 3.4.8 Tampilan halaman Kategori Admin

31

1.4.9 Halaman Harga Pada Menu Admin Halaman harga admin ini berfungsi sama dengan halaman

kategori

menambah,

admin.

mengubah

dan

Disini

admin

menghapus

dapat harga.

Halaman harga admin dapat dilihat dibawah ini : Administrator Log Out

Header

Home Kategori

List Price Tambah

Harga Kontak


Log Out

Footer

Gambar 3.4.9 Tampilan halaman Harga Admin

32

1.4.10 Halaman Kontak Pada Menu Admin Halaman kontak admin memiliki fungsi yang sama dengan halaman kategori admin dan harga admin. Dibawah ini adalah tampilan dari halaman kontak admin : Administrator Log Out

Header

Home Kategori

List Contact Tambah

Harga Kontak


Log Out

Footer

Gambar 3.4.10 Tampilan halaman Kontak Admin

33

1.4.11 Halaman Log Out Dialog ini akan muncul ketika administrator telah log out dari halaman administrator. Berikut adalah tampilan halaman log out :

Kamu telah berhasil keluar dari sistem administrator OK

Gambar 3.4.11 Tampilan dialog Log Out

34

1.4.12 Halaman Kategori Halaman

kategori

merupakan

beberapa

pengelompokan

dari

gambar-gambar

garskin.

Halaman ini digunakan customers untuk melihat serta dapat memesan garskin. Tampilan kategori dari gambar garskin adalah ebagai berikut ini : Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

(Nama Kategori)


Agenda

Selanjutnya Sebelumnya

Gambar Garskin

Footer

Gambar 3.4.12 Tampilan halaman Kategori

35

1.4.13 Halaman Beli Halaman beli ini berisikan form untuk diisi customers saat hendak membeli garskin. Tampilan halaman beli tersebut adalah sebagai berikut :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

Beli


Form Beli


Footer

Gambar 3.4.13 Tampilan halaman Form Beli

36

1.4.14 Halaman Harga Halaman ini berisikan penggolongan jenis HP sesuai dengan ukuran dan daftar harga. Tampilan tersebut dapat dilihat dibawah ini :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

(Harga sesuai merk HP)

Tabel pengelompokan ukuran HP

Harga -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Harga Agenda

Daftar Harga

Gambar Garskin

Footer

Gambar 3.4.14 Tampilan halaman tabel Harga

37

1.4.15 Halaman Agenda Halaman agenda ini berisikan tentang informasi acara-acara yang dilaksanakan. Tampilan agenda tersebut adalah dibawah ini :

Header

Home

Cara Pemesanan


Cara Pembayaran

Check Order

Kontak

Agenda


Isi agenda


Footer

Gambar 3.4.15 Tampilan halaman Agenda

BAB III PERANCANGAN SISTEM. 1.1 Data Flow Diagram ( DFD )

Recommend Documents