BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Website Berdasarkan kebutuhan dari pengguna, pembuatan website ini ditujukan kepada masyarakat yang membutuhkan media atau sarana dalam mempromosikan informasi secara cepat dan praktis mengenai usaha sepatu Desucha Shop pada website ini. 3.2 DFD (Data Flow Diagram) Gambar 3.1. Data Flow Diagram Gambar 3.2.1 menunjukkan DFD dimana seorang admin yang meng-update dan meng-upload informasi terbaru di website. Dan user membeli produk dan dapat memberikan komentar di website ini. 12
3.3 Site Map 3.3.1 Sitemap Admin Gambar 3.2. Sitemap 3.4 Lembar Kerja Tampilan Perancangan web ini menggunakan software bantuan WampServer 2.1 yang dikoneksikan secara offline untuk membuat koneksi dengan cara local dan dengan bahasa pengkodean yang digunakan pada perancangan web ini adalah menggunakan PHP. Susunan LKT terdiri dari : a. Coding pembuatan web. b. Cara mengoneksikan ke phpmyadmin. c. Cara membuat database pada phpmyadmin. d. Cara import dan export database pada phpmyadm. 13
3.4.1 Form Menu Utama Gambar 3.3. FormMenu Utama - Pada form menu utama terdapat menu 1 untuk ke beranda, menu ke 2 untuk ke produk, menu ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo toko sepatu Desucha Shop. - Gambar 1 untuk mewakili jenis produk sepatu. - Teks 2 untuk alamat lokasi dan Teks 3 untuk hubungi kami. 3.4.2 Form Produk Gambar 3.4. Form Produk 14
- Pada form menu utama terdapat menu 1 untuk ke beranda, menu ke 2 untuk ke produk, menu ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Gambar 1, gambar 2, gambar 3, dan gambar 4 untuk mewakili jenis produk sepatu. 3.4.3 Form Tentang Kami Gambar 3.5. Form Tentang Kami - Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo toko sepatu Desucha Shop, teks 2 untuk informasi tentang website ini. - Teks 3 untuk alamat lokasi dan teks 4 untuk hubungi kami. 15
3.4.4 Form Kontak Gambar 3.6. Form Kontak - Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Pada logo untuk menampilkan peta alamat. - Teks 1 untuk ke alamat lokasi dan teks 2 untuk hubungi kami. 3.4.5 Form Kritik dan Saran Gambar 3.7. Form Kritik & Saran 16
- Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo toko sepatu Desucha Shop. - Pada label 1 untuk nama, label 2 untuk email, dan label 3 untuk kritik dan saran. - Pada button 1 umtuk kirim. 3.4.6 Form Pemesanan Gambar 3.8. Form Pemesanan - Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. 17
- Pada gambar 1 untuk menampilkan gambar sepatu yang dipesan. - Teks 1 untuk menampilkan keterangan sepatu. - Dan button 1 untuk pesan. 3.4.7 Form Login Admin Gambar 3.9. Form Login Admin - Pada teks 1 masuk admin, teks 2 untuk nama akun,admin dan teks 3 untuk kata sandi admin. - Dan button untuk login. 3.4.8 Form Menu Utama Admin Gambar 3.10. Form Menu Utama Admin 18
- Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo sepatu Desucha Shop. - Gambar 1, gambar 2, gambar 3, dan gambar 4 untuk mewakili jenis produk sepatu. 3.4.9 Form Kritik & Saran Admin Gambar 3.11 Form Kritik dan Saran Admin - Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo sepatu Desucha Shop. - Menu 6 untuk menampilkan nama, menu 2 untuk menampilkan email, dan menu 7 utnuk menampilkan keterangan. 19
3.4.10 Form Menu Produk Admin Gambar 3.12. Form Menu Produk Admin - Pada form menu utama terdapat menu 1 untuk ke 3 untuk ke untuk ke tentang kami, menu ke 4 untuk ke kontak, dan menu ke 5 untuk ke kritik dan saran. - Teks 1 untuk logo sepatu Desucha Shop. - Pada label 1 untuk menampilkan nama sepatu, label 2 untuk menampilkan keterangan, label 3 untuk menampilkan harga, dan label 4 untuk menampilkan gambar. - Button 1 untuk browse dan button 2 untuk masukkan. 20
3.4.11 Tabel Admin Tabel 3.13. Tabel Admin Nama Field Type Null Id_admin Int(4) No User_name Pass_name Varchar(50) No Varchar(50) No - Tabel admin berfungsi untuk menyimpan datadata admin. 3.4.1.2 Tabel Kritik Tabel 3.14. Tabel Kritik Nama Field Type Null Id_kritik Int(4) No Nama_kritik Varchar(50) No Email_kritik Varchar(50) No Keterangan Text No - Tabel kritik ini berfungsi untuk menyipan data-data kritik. 3.4.13 Tabel Sepatu Tabel 3.15. Tabel Sepatu Nama Field Type Null Id_sepatu Int(4) No 21
Nama_sepatu Varchar(50) No Ket_sepatu Varchar(50) No Harga Int(50) No Gambar Text No - Tabel sepatu ini berfungsi untuk menyimpan data-data sepatu. 3.5 JST Ini adalah gambarn JST website toko sepatu Desucha Shop : 3.5.1 JST admin Home T10 Poduct T11 Tentang Kami T12 Home T2 Login Daftar T7 T8 Member T9 Kontak T13 Poduct T3 Kritik Saran T14 Tentang Kami T4 T1 Kontak T5 Kritik Saran T6 Gambar 3.16. JST Admin 22