BAB III PERANCANGAN SISTEM 3.1 Diagram Contect Diagram contect pada system pembuatan e-commerce ditunjukkan pada gambar 3.1 ADMIN 2 1 Sistem informasi website e- commerce Konveksi Fausta Gallery 3 4 PENGUNJUNG WEBSITE 6 5 PEMBELI/ MEMBER Gambar 3.1 Diagram contect 1. Info identitas Fausta Gallery, info data kategori, info data produk, info laporan penjualan, info data customers, info data pesan, info no resi pengiriman, info berita, info artikel, info polling. 19
20 2. Data identitas Fausta Gallery, data kategori, data produk, data laporan penjualan, data customers, data pesan, data resi pengiriman, data berita, data artikel, data polling. 3. Informasi identitas Fausta Gallery, info produk, info berita, info artikel, info testimoni, info resi pengiriman, info rss, info syarat dan ketentuan belanja, info cara pembelian. 4. Data identitas Fausta Gallery, data produk, data berita, data artikel, data testimoni, data resi pengiriman, data rss, data syarat dan ketentuan belanja, data cara pembelian. 5. Info data login, info identitas Fausta Gallery, info data kategori, info data produk, info data keranjang belanja/shopping cart, info konfirmasi pembelian, info data berita, info data artikel, info rss, info testimony, info polling. 6. Data login, data identitas Fausta Gallery, data kategori, data produk, data keranjang/shopping cart, data konfirmasi pembelian, data berita, data artikel, data rss, data testimoni, data polling. 1.2 Lembar Kerja Tampilan (LKT) 1.2.1 Lembar Kerja Tampilan 1 LKT ini digunakan pada halaman index. Pada halaman home terdapat form login member, member harus memasukkan username dan password apabila
21 akan membeli barang yang ada pada konveksi Fausta Gallery. Apabila member tidak memasukkan username dan password maka member atau customer tidak dapat membeli produk-produk yang ada pada website Fausta Gallery. Tampilan dapat dilihat pada gambar. 3.2 No. sheet 1 Index Judul Isi... Judul Isi... Navigasi - Klik login maka akan masuk pada halaman home. Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Medan data pakai Calibri, kuning Button pakai Calibri, hitam Gambar 3.2 LKT index
22 1.2.2 Lembar Kerja Tampilan 2 Pada LKT ini digunakan pada halaman home, requirement, how to buy, no resi, artikel, berita, rss, karena pada tampilan ini sama, hanya isi pada halaman masing-masing yang membedakannya. Tampilan dapat dilihat pada gambar. 3.3 No. sheet 2 home, requirement, how to buy, no resi, artikel, berita, rss Navigasi Judul Isi... Judul Isi... Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Medan data pakai Calibri, kuning Button pakai Calibri, hitam Gambar 3.3 LKT home, requirement, how to buy, no resi, artikel, berita, rss
23 1.2.3 Lembar Kerja Tampilan 3 Lembar Kerja Tampilan 3 ini digunakan untuk form testimony. Form testimony di isi oleh pengunjung website.testimoni ini berguna sebagai statemen yang muncul dalam bentuk rekomendasi dari seseorang ke orang lain. No. sheet 3 Testimoni Nama pengunjung Email Website Komentar Submit http:// Reset Navigasi -Klik submit maka data akan dikirim pada database -Klik reset maka borang akan kosong Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Medan data pakai Calibri, kuning Button pakai Calibri, hitam Gambar 3.4 LKT Testimoni
24 1.2.4 Lembar Kerja Tampilan 4 Lembar Kerja Tampilan 4 ini digunakan untuk tampilan halaman contact. Tampilan dapat dilihat pada gambar. 3.5 No. sheet 4 Contact Nama Jenis kelamin Alamat Email Phone Pesan Pria Wanita Navigasi - Klik kirim, data akan tersimpan pada database dan borang akan kosong - Klik reset, borang akan merefresh dan kosong Kirim Reset Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Medan data pakai Calibri, kuning Button pakai Calibri, hitam Gambar 3.5 LKT Contact
25 1.2.5 Lembar Kerja Tampilan 5 Tampilan 5 ini digunakan pada LKT polling. Pada LKT polling ini customer atau pelanggan bisa memilih jawaban yang sudah tersedia pada website. Tampilan dapaat dilihat pada gambar. 3.6 No. sheet 5 Polling Judul Pilihan 1 Pilihan 2 Pilihan 3 Kirim Navigasi - Klik Klik kirim, data akan tersim-pan dan hasil akan tampil di bawah form polling Hasil ------------ ------------ Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Medan data pakai Calibri, kuning Button pakai Calibri, hitam Gambar 3.6 LKT polling
26 1.2.6 Lembar Kerja Tampilan 6 Pada LKT ini digunakan pada halaman home admin. Pada home admin menampilkan informasi tentang Fausta Gallery, jam kerja, social network, dan information. Jam kerja digunakan sebagai pengingat admin. Tampilan dapat dilihat pada gambar. 3.7 No. sheet 6 Home admin Navigasi Judul Isi -------------------- -------------------- -------------------- -------------------- -------------------- Judul pakai Calibri, 12 point, biru Teks pakai Calibri, 12 point, hitam Gambar 3.7 LKT home admin
27 1.2.7 Lembar Kerja Tampilan 7 Pada LKT ini digunakan pada halaman admin, laporan pj, daftar customer, daftar pesan. Pada tampilan ini sama, hanya isi pada halaman masingmasing yang membedakannya. Tampilan dapat dilihat pada dambar 3.8 No. sheet 7 Admin, laporan pj, daftar customer, daftar pesan Navigasi Judul Isi -------------------- Tabel (admin/ laporan pj/ daftar customer/ daftar pesan) Judul pakai Arial, 12 point, biru Teks pakai Calibri, 12 point, hitam Isi pakai Times new roman, 12 point, hitam Tabel pakai times new roman, 12 point, hitam Gambar 3.8 LKT Admin, laporan pj, daftar customer, daftar pesan
28 1.2.8 Lembar Kerja Tampilan 8 Pada LKT ini digunakan pada halaman admin produk, kategori, no resi, news, artike, polling dan about. Pada tampilan ini sama, hanya isi pada halaman masing-masing yang membedakannya. Tampilan dapat dilihat pada gambar. 3.9 No. sheet 8 Produk, kategori, no resi, news, artike, polling dan about Judul Tambah Tabel (produk/kategori/no resi/news/artike/polling/ about) Edit/hapus Edit/hapus dst Navigasi - Klik tambah akan masuk pada halaman tambah - Klik edit, akan masuk pada halaman edit data - Klik Hapus, akan menhapus data yang telan ada. Judul pakai Arial, 12 point, biru Teks pakai Calibri, 10 point, hitam Tabel pakai times new roman, 12 point, hitam Isi pakai Times new roman, 12 point, hitam Gambar 3.9 LKT Produk, kategori, no resi, news, artike, polling dan about
29 3.3 Data Flow Diagram Level 0 ADMIN Pengunjung website 5 2 3 4 Sistem informasi website e- commerce Konveksi Fausta Gallery 6 7 8 9 1 15 14 13 12 11 10 Pembeli/member Gambar 3.10 Data Flow Diagram Level 0 Data yang mengalir dan atau dari admin : 1. Username dan password 2. Data identitas Fausta Gallery 3. Input/edit data 4. Update data
30 Data yang mengalir dari atau pengunjung website : 5. Informasi identitas Fausta Gallery 6. Info produk, requirement, how to buy, no resi, news, artikel, rss. 7. Isi testimoni 8. Data testimoni 9. Isi contact data Data yang mengalir dari atau Pembeli/member : 10. Input data pembeli/member 11. Username dan password 12. Data produk, identitas Fausta Gallery 13. Beli produk 14. Data shopping cart 15. Data konformasi pembelian 16. Konfirmasi pembelian
31 3.4 Flowchart 3.4.1 Admin MULAI Input username dan password Username dan password Tidak Form admin Ya Info Identitas Gallery Gombal Input/edit data produk, katefori, laporan pj, daftar customer, no resi, about, artikel, news, polling Input/edit data Tidak Halaman roduk, katefori, laporan pj, daftar customer, no resi, about, artikel, news, polling Ya Update Data Logout SELESAI Gambar 3.11 Flowchat Admin
32 3.4.2 Pengunjung website MULAI Informasi identitas Gallery Gombal Input testimoni Input contact Reset Tidak testimoni lengkap Ya Info produk, requirement, how to buy, no resi, news, artikel, rss Contact lengkap Tidak Reset Data testimon i Ya SELESAI Gambar 3.12 Flowchat Pengunjung Website
33 3.4.3 Pembeli/member MULAI Input data pembeli/ member Lengkap Ya Username dan password Tidak Form member Benar Tidak Reset Ya Identitas Gallery Gombal, kategori, data produk, requirement, how to buy, no resi, berita, artikel, polling Tidak Detail Produk Lihat Ya Beli produk Ya Tambah Barang Tidak Data konfirmasi pembelian Konfirmasi Pembelian SELESAI Gambar 3.13 Data Flow Diagram Level 0 Pembeli/member
34 3.4.5 Jaringan Semantik Tampilan (JST) a. JST Website pembeli/member T5 Reset T6 Reset T7 Kirim T4 Kembali Lihat Submit Kembali T3 Lihat Loop Lihat T8 kembali Lihat T2 Kembali T1 LOGIN LOGPUT T9 T10 T13 T12 T11 Gambar 3.14 JST Website pembeli/member T1, T2,..., T13 adalah nomor tampilan (lembar kerja), tulisan yang ada seperti kembali,save, reset dan lainlain menyatakan event, dan anak panah menunjukkan transisi yang terjadi. Event yang menyebabkan terjadinya transisi dari satu tampilan ke tampilan berikutnya, seperti yang dikatakan di atas. T1 : Login T2 : Home
35 T3 : Requirement T4 : How to buy T5 : No Resi T6 : Testimoni T7 : Contact T8 : Artikel T9 : News T10 : RSS T11 : Produk T12 :Shopping cart T13 : Halaman Konfirmasi Pembelian
36 b. JST Website admin T4 Lihat Kembali T3 Lihat T5 simpan tambah Loop T2 Kembali Kembali Lihat T1 login Tambah T6 logout Simpan T13 simpan Tambah simpan tambah tambah simpan T7 simpan tambah T9 T9 T9 T8 Gambar 3.15 JST Website admin T1, T2,..., T13 adalah nomor tampilan (lembar kerja), tulisan yang ada seperti kembali,simpan, tambah dan lain-lain menyatakan event, dan anak panah menunjukkan transisi yang terjadi. Event yang menyebabkan terjadinya transisi dari satu tampilan ke tampilan berikutnya, seperti yang dikatakan di atas. T1 : Login T2 : Home
37 T3 : Produk T4 : Kategori T5 : Laporan Penjualan T6 : Daftar Customer T7 : Daftar Pesan T8 : No Resi T9 : About T10 : News T11 : Artikel T12 :Polling T13 : Logout
38 3.4.6 ERD(Entity Relationship Diagram) waktu Judul isi cp tang gal id judul artikel cp paragr af id news name isi id Input data pertanyan id Polling Jenis_ kelamin input id nama phone Contact input id nama email Testimoni id Resi tanggal level Input data Id_ user Admin/ administrasi input input id about tangg al pilihan jumlah alamat pesan phone url pesan komentar nam a Resi_ pengirima n Username passwor d judul isi password Username Member _id id Id_ Produk Id_ pemesan an nama id Produk_ name Input data price id First_ name members mengorder Order_ product memilih product mempunyai category category email produk Last_ name Jenis_ kelamin alamat email addres s phone status image Id_ catefory deskripsi qty Id_produ ct Id_ keranja ng Keranjang Order Tanggal_ keranjan g Id_sesi on Gambar 3.16 ERD (Entity Relationship Diagram