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 Pengunjung 6 7 8 9 1 2 3 4 5 10 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 Mulai Data Informasi 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 ( ) 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 : Pemesanan Pembayaran Check Order Administrator Admin,,,,,, Tentang Kami -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Mengenai kami -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Agenda Gambar Garskin Gambar 3.4.1 Tampilan halaman
24 1.4.2 Halaman Pemesanan Halaman cara pemesanan ini berisikan petunjuk bagaimana customers dapat memesan atau membeli produk. Berikut ini adalah tampilan halaman cara pemesanan : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Pemesanan -Nokia -Samsumg -Blackberry -Sony -Lain-Lain pemesanan Agenda Gambar Garskin Gambar 3.4.2 Tampilan halaman Pemesanan
25 1.4.3 Halaman 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 : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Pembayaran -Nokia -Samsumg -Blackberry -Sony -Lain-Lain pembayaran Agenda Gambar Garskin Gambar 3.4.3 Tampilan halaman 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 : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Check Order -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Form Check Order Agenda Gambar Garskin Gambar 3.4.4 Tampilan halaman Check Order
27 1.4.5 Halaman Halaman kontak ini berisikan tentang customer service yang dapat dihubungi oleh customers yang akan memesan garskin. Dibawah ini adalah tampilan dari kontak : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Agenda Gambar Garskin Gambar 3.4.5 Tampilan halaman
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 Pada Menu Admin admin ini hanya menampilkan kata-kata selamat datang pada halaman administrator saja. Berikut adalah tampilan dari home admin : Administrator Log Out Selamat Datang Log Out Gambar 3.4.7 Tampilan halaman Administrator
30 1.4.8 Halaman 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 List Category Tambah Tabel untuk Edit dan Hapus Log Out Gambar 3.4.8 Tampilan halaman Admin
31 1.4.9 Halaman Pada Menu Admin Halaman harga admin ini berfungsi sama dengan halaman kategori admin. Disini admin dapat menambah, mengubah dan menghapus harga. Halaman harga admin dapat dilihat dibawah ini : Administrator Log Out List Price Tambah Tabel untuk Edit dan Hapus Log Out Gambar 3.4.9 Tampilan halaman Admin
32 1.4.10 Halaman 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 List Contact Tambah Tabel untuk Edit dan Hapus Log Out Gambar 3.4.10 Tampilan halaman 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 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 : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal (Nama ) -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Agenda Selanjutnya Sebelumnya Gambar Garskin Gambar 3.4.12 Tampilan halaman
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 : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Beli -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Form Beli Agenda Gambar Garskin Gambar 3.4.13 Tampilan halaman Form Beli
36 1.4.14 Halaman Halaman ini berisikan penggolongan jenis HP sesuai dengan ukuran dan daftar harga. Tampilan tersebut dapat dilihat dibawah ini : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal -Nokia -Samsumg -Blackberry -Sony -Lain-Lain ( sesuai merk HP) Tabel pengelompokan ukuran HP Agenda Daftar Gambar Garskin Gambar 3.4.14 Tampilan halaman tabel
37 1.4.15 Halaman Agenda Halaman agenda ini berisikan tentang informasi acara-acara yang dilaksanakan. Tampilan agenda tersebut adalah dibawah ini : Pemesanan Pembayaran Check Order -Anei -Bola -Keroppi -Hello Kitty -London -Paris -Tribal Agenda -Nokia -Samsumg -Blackberry -Sony -Lain-Lain Isi agenda Agenda Gambar Garskin Gambar 3.4.15 Tampilan halaman Agenda