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 : Admin Data News Data Kategori Data Produk Produk Kategori News Website Hery Furniture Beli Produk Keranjang Belanja Gambar 3.1Data Flow Diagram Member 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 Menu 2 Menu 3 Menu 4 Menu 5 Label 1 Label 2 Text area 1 Slide1 Button 1 Menu 6 Menu 7 Slide 2 Menu 8 Images 1 Images 3 Images 4 Menu 9 Text area 2 Button 2 Button 3 Text area 4 Text area 3 Images 5 Images 6 Images 6 Button 2 Button 2 Text area 5 Gambar 3.4LKT Form Home - Pada bagian header Form menu utama terdapat, 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. 3.4.2Form Product Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Menu 9 Images 1 Images 3 Images 4 Text area 1 Text area 2 Button 1 Button 2 Slide 2 Text area 3 Images 5 Images 6 Images 6 Text area 4 Button 2 Button 2 Text area 5 Gambar 3.5LKT Form Product 16
- Pada form product terdapat, 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. 3.4.3Form Cara Order Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Text area 1 Menu 8 Menu 9 Text area 2 Slide 2 Text area 6 Text area 3 Text area 4 Text area 5 Gambar 3.6LKT Form Cara Order - Pada form cara order terdapat, 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 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Text area 1 Menu 8 Menu 9 Text area 2 Slide 2 Text area 6 Text area 3 Text area 4 Text area 5 Gambar 3.7LKT Form About Us - Pada form cara order terdapat, 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 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Text area 1 Menu 8 Menu 9 Text area 2 Slide 2 Text area 6 Text area 3 Text area 4 Text area 5 Gambar 3.8LKT Form Contact Us - Pada form cara order terdapat, 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 Images 1 Label 1 Label 2 Button 1 Gambar 3.9LKT Form Login Admin Pada form login admin terdapat, images 1, label 1 untuk admin, label 2 untuk password, button 1 untuk login ke form menu admin. 20
3.4.7Form Utama Admin Menu 2 Menu 3 Menu 4 Menu 5 Gambar 3.10LKT Form Utama Admin Pada form utama admin terdapat, menu 1 untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk ut. 3.4.8 Form Admin Menu 2 Label 1 Label 2 Menu 3 Menu 4 Button 1 Button 2 Menu 5 Tabel 1 Gambar 3.11LKT Form Admin - Pada form admin terdapat, 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 ut. 3.4.9Form Produk Menu 2 Label 1 Label 2 Menu 3 Label 3 Menu 4 Menu 5 Label 4 Label 5 Label 6 Button 1 Button 2 Tabel 1 Gambar 3.12LKT Form Produk - Pada form produk terdapat, 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. - untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk ut. 22
3.4.10Form Kategori Label 1 Menu 2 Button 1 Button 2 Menu 3 Menu 4 Menu 5 Tabel 1 Gambar 3.13LKT Form Kategori - Pada form kategori terdapat, label 1 untuk kategori, button 1 untuk simpan, button 2 untuk batal, dan tabel 1 untuk menyimpan data kategori. - untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk ut. 3.4.11Form News Menu 2 Label 1 Label 2 Menu 3 Button 1 Button 2 Menu 4 Menu 5 Tabel 1 Gambar 3.14LKT Form News 23
- Pada form news terdapat, label 1 untuk judul, label 2 untuk berita, button 1 untuk simpan, button 2 untuk batal, dan tabel 1 untuk menyimpan data berita. - untuk admin, menu 2 untuk produk, menu 3 untuk kategori, menu 4 untuk news, dan menu 5 untuk ut. 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. 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 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. 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 Home T10 Poduct T11 Cara Order T12 Home T2 Login Daftar T7 T8 Member T9 About Us T13 Poduct T3 Contact Us T14 Cara Order T4 T1 About Us T5 Contact Us T6 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 Produk T4 T1 Login T2 Kategori T5 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