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” : Data News Data Kategori Data Produk Website Hery Furniture
Admin
Beli Produk Keranjang Belanja
Member
Produk Kategori News
Gambar 3.1Data Flow Diagram
Dari data flow diagram diatas Admin dapat mengolah data produk, data kategori, data news dan Member hanya dapat melihat, membeli produk
13
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 filefile yang ada pada sebuah website. Berikut gambaran sitemapwebsite Hery Furniture : 3.3.1
Sitemap Member Index.php/html
Home
Login
Produk Produk
Cara Order
About Us
Contact Us
Gambar 3.2Sitemap Member
3.3.2
Sitemap Admin Index.php/html
Login
Admin
Produk
Kategori
News
Logout
Gambar 3.3 Sitemap Admin
14
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 logo
Menu 1
Label 1
Enter Text
Label 2
Enter Text
Menu 2
Menu 3
Menu 4
Menu 5
Text area 1
Slide1
Button 1
Menu 6
Slide 2
Menu 7 Menu 8
Images 1
Images 3
Images 4
Menu 9
Button 2
Text area 4
Button 3
Text area 2
Images 5
Images 6
Images 6
Text area 5
Text area 3 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 form produk, menu 3 untuk ke form cara order,
15
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 logo
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Text area 1
Menu 7 Menu 8
Images 1
Images 3
Images 4
Menu 9
Text area 2
Text area 3
Button 1
Images 5
Button 2
Slide 2
Button 2
Images 6
Images 6
Text area 4
Button 2
Text area 5
logo
Gambar 3.5LKT Form Product
16
- 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 logo
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Text area 1
Menu 7 Menu 8 Menu 9
Slide 2
Text area 2 Text area 6
Text area 3
Text area 4
Text area 5
logo
Gambar 3.6LKT Form Cara Order
- Pada form cara order terdapat logo, menu 1 untuk ke form Home, menu 2 untuk ke form produk, menu
17
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 logo
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Text area 1
Menu 7 Menu 8 Menu 9
Slide 2
Text area 2 Text area 6
Text area 3
Text area 4
Text area 5
logo
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 about us, menu 5 untuk ke form contact us.
18
- 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 logo
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Text area 1
Menu 7 Menu 8 Menu 9
Slide 2
Text area 2 Text area 6
Text area 3
Text area 4
Text area 5
logo
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. - text area 1 untuk keranjang belanja, text area 2 untuk berita, text area 3 untuk testimoni, text area 4
19
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
Images 1
Label 1
Enter Text
Label 2
Enter Text
Button 1
logo
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 login ke form menu admin.
20
3.4.7Form Utama Admin logo
Menu 1 Menu 2 Menu 3 Menu 4 Menu 5
logo
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
Label 1
Enter Text
Label 2
Enter Text
Menu 3
Button 1
Button 2
Menu 4 Menu 5 Tabel 1
logo
Gambar 3.11LKT Form Admin
- Pada form admin terdapat logo, label 1 untuk username, label 2 untuk password, button 1 untuk
21
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
Label 1
Enter Text
Label 2
Enter Text
Menu 3
Label 3
Enter Text
Menu 4
Label 4
Enter Text
Label 5
Enter Text
Label 6
Enter Text
Menu 1 Menu 2
Menu 5
Button 1
Button 2
Tabel 1
logo
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. - Menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk logout.
22
3.4.10Form Kategori logo
Label 1
Menu 1 Menu 2
Enter Text
Button 1
Button 2
Menu 3 Menu 4 Menu 5 Tabel 1
logo
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
Label 1
Enter Text
Label 2
Enter Text
Menu 3
Button 1
Button 2
Menu 4 Menu 5
Tabel 1
logo
Gambar 3.14LKT Form News
23
-
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
Kategori
Varchar(35) No
Harga
Int(11)
No
Stok
Int(11)
No
Gambar
Varchar(50) No
No
Tabel barang berfungsi untuk menyimpan data barang – barang produk.
24
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
Nama
Varchar(50) No
25
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
Tabel
Nama Field
Type
Notransaksi
Varchar(25) No
Username
Varchar(20) No
Id
Int(11)
Nama
Varchar(50) No
Harga
Int(11)
No
Jumlah
Int(11)
No
Subtotal
Int(11)
No
Transaksi
berfungsi
Rincian
Null
No
untuk
menyimpan data pesanan, misalnya user atau pelanggan memesan barang maka data akan tersimpan pada Tabel Rincian Transaksi ini.
26
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
Tabel Testimoni berfungsi untuk menyimpan data testimoni yang diinputkan oleh pelanggan.
27
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
Tabel Visitor berfungsi untuk menyimpan jumlah pengunjung yang sedang mengakses website ini.
28
3.5 JST Berikut adalah gambaran JST dari website toko mebel “Hery Furniture” : a. JST Member
T7
Member
Home
T10
Poduct
T11
Cara Order
T12
About Us
T13
Contact Us
T14
T9
Login
T2
Home
Daftar
T8
T3
Poduct
Cara Order
T4
About Us
T5
Contact Us
T6
T1
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 Us).
29
b. JST Admin T3
Admin
T1
Login
Produk
T4
Kategori
T5
T2
News
Logout
T6
T7
Gambar 3.16 JST Admin
T1 merupakan halaman utama login admin, setelah login maka akan tampil halaman T2 (Menu Admin), didalamnya terdapat menu – menu yang dapat diakses oleh admin diantaraya : T3 (Admin), T4 (Produk), T5 (Kategori), T6 (News), dan T7 (Logout).
30
31
