13
BAB III
PERANCANGAN SISTEM
3.1 Ruang Lingkup Website
Berdasarkankebutuhan dari pengguna, pembuatan website ini ditujukan kepada masyarakat yang membutuhkan media atau sarana dalam mempromosikan informasi secara cepat dan praktis mengenai Mebel.
3.2 DFD ( Data Flow Diagram )
Sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat data bergerak
dari input menjadi output. Berikut adalah gambaran DFD
website“Hery Furniture” :
Website Hery Furniture
Admin Member
Data Produk
Produk Data Kategori
Data News
Kategori News
Beli Produk Keranjang Belanja
Gambar 3.1Data Flow Diagram
Dari data flow diagram diatas Admin dapat mengolah data produk, data kategori, data news dan Member hanya dapat
14
3.3 Sitemap
Sitemap atau sering disebut peta situs kurang lebihnya
adalah sesuatu yang menggambarkan tentang peta dari
website,yaitu segala informasi mengenai halaman atau
file-file yang ada pada sebuah website. Berikut gambaran
sitemapwebsite Hery Furniture :
3.3.1 Sitemap Member
Index.php/html
Home
Login
Produk
Cara Order
About Us
Contact Us
Produk
Gambar 3.2Sitemap Member
3.3.2 Sitemap Admin
Index.php/html
Login
Admin
Produk
Kategori
News
Logout
15
3.4 Lembar Kerja Tampilan
Perancangan web ini menggunakan aplikasi bantuan
xampp-win32-1.7.2. secaraoffline untuk membuat koneksi
secara lokal dan bahasa yang digunakan pengkodean web ini menggunakan PHP.
Susunan LKT di bawah ini terdiri atas : a. Coding pembuatan web.
b. Cara mengkoneksikan ke phpmyadmin.
c. Cara pembuatan database pada phpmyadmin.
3.4.1FormMenu Utama
Menu 1 logo
Menu 2 Menu 3 Menu 4 Menu 5
Slide1 Enter Text
Enter Text Button 1 Label 1
Label 2 Text area 1
Text area 2 Menu 6 Menu 7 Menu 8 Menu 9
Text area 3
Text area 4
Text area 5 Slide 2 Images 1 Images 3 Images 4
Button 2 Button 3
Images 5 Images 6 Images 6
Button 2 Button 2
logo
Gambar 3.4LKT Form Home
- Pada bagian header Form menu utama terdapat logo, menu 1 untuk ke form Home, menu 2 untuk ke
16
menu 4 untuk ke form about us, menu 5 untuk ke form contact us.
- Pada bagian main column terdapat label 1 untuk username, label 2 untuk password, button 1 untuk login user, slide picture 1, text area 1 untuk keranjang belanja, text area 2 untuk berita, text area 3 untuk testimoni, text area 4 untuk informasi, text area 5 untuk pembayaran,slide picture 1, menu 6
untuk all produk, menu 7 untuk Lemari, menu 8 untuk meja, menu 9 untuk kursi, images 1 untuk mewakili produk, button 2 untuk beli poduk, button 3 untuk detail produk.
- Pada bagian footer terdapat logo.
3.4.2Form Product
Menu 1 logo
Menu 2 Menu 3 Menu 4 Menu 5
Text area 1
Text area 2 Menu 6 Menu 7 Menu 8 Menu 9
Text area 3 Text area 4
Text area 5 Slide 2 Images 1 Images 3 Images 4
Button 1 Button 2
Images 5 Images 6 Images 6
Button 2 Button 2
logo
17
- Pada form product terdapat logo, menu 1 untuk ke form Home, menu 2 untuk ke form produk, menu 3 untuk ke form cara order, menu 4 untuk ke form
about us, menu 5 untuk ke form contact us.
- text area 1 untuk keranjang belanja, text area 2 untuk berita, text area 3 untuk testimoni, text area 4 untuk informasi, text area 5 untuk pembayaran,slide
picture 1, menu 6 untuk all produk, menu 7 untuk
Lemari, menu 8 untuk meja, menu 9 untuk kursi, images 1 untuk mewakili produk, button 1 untuk beli poduk, button 2 untuk detail produk dan logo.
3.4.3Form Cara Order
Menu 1 logo
Menu 2 Menu 3 Menu 4 Menu 5
Text area 1
Text area 2 Menu 6 Menu 7 Menu 8 Menu 9
Text area 3
Text area 4
Text area 5 Slide 2
logo Text area 6
Gambar 3.6LKT Form Cara Order
18
3 untuk ke form cara order, menu 4 untuk ke form
about us, menu 5 untuk ke form contact us.
- text area 1 untuk keranjang belanja, text area 2 untuk berita, text area 3 untuk testimoni, text area 4 untuk informasi, text area 5 untuk pembayaran,slide
picture 1, menu 6 untuk all produk, menu 7 untuk
Lemari, menu 8 untuk meja, menu 9 untuk kursi, images 1 untuk mewakili produk, button 1 untuk
beli poduk, button 2 untuk detail produk, text area 6 untuk informasi tentang cara order.
3.4.4Form About Us
Menu 1 logo
Menu 2 Menu 3 Menu 4 Menu 5
Text area 1
Text area 2 Menu 6 Menu 7 Menu 8 Menu 9
Text area 3 Text area 4
Text area 5 Slide 2
logo Text area 6
Gambar 3.7LKT Form About Us
- Pada form cara order terdapat logo, menu 1 untuk ke form Home, menu 2 untuk ke form produk, menu 3 untuk ke form cara order, menu 4 untuk ke form
19
- text area 1 untuk keranjang belanja, text area 2 untuk berita, text area 3 untuk testimoni, text area 4 untuk informasi, text area 5 untuk pembayaran,slide
picture 1, menu 6 untuk all produk, menu 7 untuk
Lemari, menu 8 untuk meja, menu 9 untuk kursi, images 1 untuk mewakili produk, button 1 untuk beli poduk, button 2 untuk detail produk, text area 6 untuk informasi tentang About us.
3.4.5Form Contact Us
Menu 1 logo
Menu 2 Menu 3 Menu 4 Menu 5
Text area 1
Text area 2 Menu 6 Menu 7 Menu 8 Menu 9
Text area 3
Text area 4
Text area 5 Slide 2
logo Text area 6
Gambar 3.8LKT Form Contact Us
- Pada form cara order terdapat logo, menu 1 untuk ke form Home, menu 2 untuk ke form produk, menu 3 untuk ke form cara order, menu 4 untuk ke form
about us, menu 5 untuk ke form contact us.
20
untuk informasi, text area 5 untuk pembayaran,slide
picture 1, menu 6 untuk all produk, menu 7 untuk
Lemari, menu 8 untuk meja, menu 9 untuk kursi, images 1 untuk mewakili produk, button 1 untuk beli poduk, button 2 untuk detail produk, text area 6 untuk informasi tentang contact us.
3.4.6Form Login Admin
logo
logo Images 1
Label 1
Button 1 Label 2
Enter Text Enter Text
Gambar 3.9LKT Form Login Admin
Pada form login admin terdapat logo, images 1, label 1 untuk admin, label 2 untuk password, button 1 untuk
21
3.4.7Form Utama Admin
logo
Menu 1 Menu 2 Menu 3 Menu 4
logo Menu 5
Gambar 3.10LKT Form Utama Admin
Pada form utama admin terdapat logo, menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk
logout.
3.4.8 Form Admin
logo
Menu 1 Menu 2 Menu 3 Menu 4
logo Menu 5
Label 1
Button 1 Label 2
Enter Text Enter Text
Tabel 1 Button 2
Gambar 3.11LKT Form Admin
- Pada form admin terdapat logo, label 1 untuk
22
simpan, button 2 untuk batal, tabel 1 untuk menyimpan data admin.
- menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk logout.
3.4.9Form Produk
logo
Menu 1 Menu 2 Menu 3 Menu 4
logo Menu 5
Label 1
Button 1 Label 2
Enter Text Enter Text
Tabel 1 Button 2 Label 3 Enter Text Label 4 Enter Text Label 5 Enter Text Label 6 Enter Text
Gambar 3.12LKT Form Produk
- Pada form produk terdapat logo, label 1 untuk nama, label 2 untuk deskripsi, label 3 untuk kategori, label 4 untuk harga, label 5 untuk stock, label 6 untuk gambar, button 1 untuk simpan, button 2 untuk batal, dan tabel 1 untuk menimpan data produk.
23
3.4.10Form Kategori
logo
Menu 1 Menu 2 Menu 3 Menu 4
logo Menu 5
Label 1
Button 1 Enter Text
Tabel 1 Button 2
Gambar 3.13LKT Form Kategori
- Pada form kategori terdapat logo, label 1 untuk kategori, button 1 untuk simpan, button 2 untuk batal, dan tabel 1 untuk menyimpan data kategori.
- Menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk logout.
3.4.11Form News
logo
Menu 1 Menu 2 Menu 3 Menu 4
logo Menu 5
Label 1
Button 1 Enter Text
Tabel 1 Button 2 Label 2 Enter Text
24
- Pada form news terdapat logo, label 1 untuk judul, label 2 untuk berita, button 1 untuk simpan, button 2 untuk batal, dan tabel 1 untuk menyimpan data berita.
- Menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk logout.
3.4.12Design Database
a. Tabel Barang
Tabel 3.1 Tabel Barang
Nama Field Type Null
Id Int(11) No
Nama Varchar(35) No
Deskripsi Text No Kategori Varchar(35) No
Harga Int(11) No
Stok Int(11) No
Gambar Varchar(50) No
Tabel barang berfungsi untuk menyimpan data
25 b. Tabel Berita
Tabel 3.2 Tabel Berita
Nama Field Type Null
Tanggal Date No
Judul Varchar(50) No
Berita Text No
Tabel berita berfungsi untuk menyimpan data berita yang diinputkan oleh admin.
c. Tabel Kategori
Tabel 3.3 Tabel kategori
Nama Field Type Null
Id int(11) No
Kategori Varchar(35) No
Tabel Kategori berfungsi untuk menyimpan data kategori yang diinputkan oleh admin.
d. Tabel Pelanggan
Tabel 3.4 Tabel Pelanggan
Nama Field Type Null
Id Int(11) No
26
Alamat Text No
Email Text No
Telepon Varchar(25) No
Username Varchar(30) No
Password Text No
Tabel Pelanggan berfungsi untuk menyimpan data pelanggan.
e. Tabel Rincian Transaksi
Tabel 3.5 Tabel Rincian Transaksi
Nama Field Type Null Notransaksi Varchar(25) No
Username Varchar(20) No
Id Int(11) No
Nama Varchar(50) No
Harga Int(11) No
Jumlah Int(11) No
Subtotal Int(11) No
27 f. Tabel Admin
Tabel 3.6 Tabel Admin
Nama Field Type Null
Id int(11) No
Username Varchar(20) No
password text No
Tabel Admin berfungsi untuk menyimpan data yang telah menjadi admin pada website ini.
g. Tabel Testimoni
Tabel 3.7 Tabel Testimoni
Nama Field Type Null
Id Int(11) No
Nama Varchar(35) No Tanggal Varchar(50) No
Email Date No
Testi Text No
28 h. Tabel Transaksi
Tabel 3.8 Tabel Transaksi
Nama Field Type Null
Notransaksi Int(11) No Username Varchar(20) No
status tinyint(1) No
Tabel Transaksi berfungsi untuk menyimpan data transaksi, misalkan pelanggan membeli barang maka data pelanggan akan tersimpan pada tabel transaksi.
i. Tabel Visitor
Tabel 3.9 Tabel Visitor
Nama Field Type Null
ip Int(11) No
waktu Int(11) No
29
3.5 JST
Berikut adalah gambaran JST dari website toko mebel
“Hery Furniture” :
a. JST Member
T1 T2 T3 T4 T5 T6 T7 T8 Home Poduct Cara Order About Us Contact Us Login Daftar T9 T10 T11 T12 T13 T14 Home Poduct Cara Order About Us Contact Us Member
Gambar 3.15 JST Member
T1 merupakan halaman utama dari website toko
mebel Hery Furniture, didalamnya terdapat menu – menu. T2 (Home), T3 (Product), T4 (Cara Order), T5 (About Us), dan T6 (Contact Us). Pada T2 (Home) akan Login T7 sebagai member T9 dan Member baru T8. T9(member) akan menampilkan menu yang sama T10 (Home), T11 (Product), T12 (Cara Order), T13 (About Us), dan T14 (Contact
30
b. JST Admin
T1
T3
T4
T5
T6 T2
Login Admin
Produk
Kategori
News
Logout
T7
Gambar 3.16 JST Admin
T1 merupakan halaman utama login admin, setelah
login maka akan tampil halaman T2 (Menu Admin),
