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

melihat, membeli produk

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

Gambar 3.3 Sitemap Admin

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

form produk, menu 3 untuk ke form cara order,

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 3Text 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

Gambar 3.5LKT Form Product

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 3Text area 4

Text area 5

Slide 2

logo

Text area 6

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

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 3Text 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

about us, menu 5 untuk ke form contact us.

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 3Text 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.

- text area 1 untuk keranjang belanja, text area 2

untuk berita, text area 3 untuk testimoni, text area 4

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

login ke form menu admin.

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

username, label 2 untuk password, button 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.

- Menu 1 untuk admin, menu 2 untuk produk, menu 3

untuk kategori, menu 4 untuk news, dan menu 5

untuk logout.

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

Gambar 3.14LKT Form News

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

barang barang produk.

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

Nama Varchar(50) 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

Tabel Rincian Transaksi berfungsi untuk

menyimpan data pesanan, misalnya user atau

pelanggan memesan barang maka data akan

tersimpan pada Tabel Rincian Transaksi ini.

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

Tabel Testimoni berfungsi untuk menyimpan data

testimoni yang diinputkan oleh pelanggan.

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

Tabel Visitor berfungsi untuk menyimpan jumlah

pengunjung yang sedang mengakses website ini.

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

Us).

30

b. JST Admin

T1

T3

T4

T5

T6

T2Login

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),

didalamnya terdapat menu menu yang dapat

diakses oleh admin diantaraya : T3 (Admin), T4

(Produk), T5 (Kategori), T6 (News), dan T7

(Logout).

31