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
12
ini.
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 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, 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 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. - 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 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. - 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 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.
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.
3.4.8
Dan button untuk login.
Form Menu Utama Admin
Gambar 3.10. Form Menu Utama Admin
18
- 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 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 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 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 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 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
Varchar(50) No
Pass_name
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
No
Int(4)
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
T7
Member
Home
T10
Poduct
T11
Tentang Kami
T12
Kontak
T13
Kritik Saran
T14
T9
Login Home
T2 Daftar
Poduct
T8
T3
Tentang Kami
T4
Kontak
T5
Kritik Saran
T6
T1
Gambar 3.16. JST Admin
22
