T0 562011038 BAB III

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

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

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

- 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

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.

- 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

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

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

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

didalamnya terdapat menu – menu yang dapat diakses oleh admin diantaraya : T3 (Admin), T4 (Produk), T5 (Kategori), T6 (News), dan T7 (Logout).

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

didalamnya terdapat menu – menu yang dapat diakses oleh admin diantaraya : T3 (Admin), T4 (Produk), T5 (Kategori), T6 (News), dan T7 (Logout).