T0 562011033 BAB III

12

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

13 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.

14 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

15 - 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

16 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

17 - 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

18 - 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

19 - 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

20 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

21 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 data-data 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

22 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

T1 T2 T3 T4 T5 T6 T7 T8 Home Poduct Tentang Kami Kontak Kritik Saran Login Daftar T9 T10 T11 T12 T13 T14 Home Poduct Tentang Kami Kontak Kritik Saran Member

17

- 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

18

- 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

19

- 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

20 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.

21 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

data-data 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

22

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

T1 T2 T3 T4 T5 T6 T7 T8 Home Poduct Tentang Kami Kontak Kritik Saran Login Daftar T9 T10 T11 T12 T13 T14 Home Poduct Tentang Kami Kontak Kritik Saran Member