Bab III. PERANCANGAN SISTEM
3.1 Analisis Sistem
Secara umum pengertian dari sistem adalah sekelompok elemen atau komponen yang saling berhubungan dan bekerjasama dalam mencapai suatu tujuan tertentu. Elemen-elemen dari suatu sistem pada dasarnya terdiri atas input, proses dan output. Sistem
belanja online merupakan bagian dari aplikasi sistem e-commerce yang tidak terlepas dari elemen – elemen input, proses dan output.
pelanggan, pemesanan, pembayaran dan pengiriman barang.
3.1.1 Alur Sistem
Sistem belanja online berbasis web dikembangkan atas dasar fungsi operasi dari penjual dan pembeli yang dibuat untuk mempermudah dalam pembelian barang. Penjual dan pembeli adalah pengguna sistem yang
melakukan proses penukaran barang, didalam sistem ini penjual sebagai penyedia barang sekaligus pengelola sistem web yang disebut administrator, sedangkan pembeli adalah yang membutuhkan barang tersebut.
3.1.2 DFD
Data Flow Diagram (DFD) merupakan suatu model logika data atau proses yang dibuat untuk menggambarkan dari mana asal data, kemana tujuan data yang keluar sistem dan dimana data disimpan. Secara umum DFD adalah grafik yang menggambarkan aliran data yang berhubungan dengan input, proses dan output dari model sistem.
user atau pelanggan yang berfungsi sebagai pembeli barang, entitas kedua adalah penjual atau administrator yang berfungsi sebagai penyedia barang serta pengelola basis data sistem. Berdasarkan definisi fungsi entitas tersebut dibuat DFD Level 0 pada Gambar 3.1 sebagai awal penyusunan analisis perancangan sistem belanja online berbasis web.
Gambar 3.1 Data Flow Diagram Level 0 Keterangan :
Data yang mengalir dari atau ke admin : 1. Login
2. Konfirmasi order
3. Cek konfirmasi pembayaran 4. Konfirmasi barang siap kirim 5. Informasi Customer
6. Informasi order customer
7. Informasi konfirmasi pembayaran
Data yang mengalir dari atau ke Customer : 8. Registrasi customer
9. Login customer
12. Data customer 13. Data pemesanan
14. Informasi barang siap kirim
3.1.3 Data Flow Diagram level 1
Selanjutnya untuk memenuhi kebutuhan sistem yang masih belum lengkap pada DFD level 0 maka dibuat DFD pada tahapan proses yang diperlukan oleh sistem belanja online yang ditunjukkan pada Gambar 3.2 sebagai DFD yang meneruskan proses sistem DFD sebelumnya.
3.2 Flowchart
Pada gambar 3.3 diatas, dapat dijelaskan jalannya alur sistem web Jual Pintu dan Jendela Rumah adalah sebagai berikut :
a. Input data register
b. User harus memasukkan data diri ke form register.
c. Sistem akan mengecek apakah username sudah ada di sistem atau belum, kalau belum data akan tersimpan di database dan akan menuju ke halaman login.
d. User memasukkan username dan password. Tipe user saat login menentukkan fungsi-fungsi halaman yang dapat digunakan.
e. Proses verification apakah username dan password yang digunakan sesuai dengan yang tersimpan di database. Apabila cocok maka dilanjutkan ke menu utama, bila tidak cocok maka ada peringatan dan kembali ke halaman login.
f. Tampilan halaman, yang berisi navigasi yang memiliki fungsi – fungsi seperti :
o Galeri Order, menampilkan galeri produk yang berfungsi untuk memesan produk yang akan dibeli.
o Halaman pertanyaan, menampilkan form yang berfungsi untuk menginputkan pertanyaan kepada admin.
o Data user, menampilkan table user yang berfungsi untuk mengubah dan menghapus data user.
o Menu bantuan, yang memiliki fungsi untuk memberi bantuan bagi user cara penggunaan pemesanan ataupun mengalami kesulitan.
g. Semua data akan tersimpan ke dalam database. h. Pemesanan selesai.
3.3 LKT (Lembar Kerja Tampilan)
3.3.1 Halaman awal (sebelum pelanggan login) 1. Halaman Beranda
Halaman beranda memuat beberapa menu. Klik Fld1 tampil navigasi masuk dan daftar. Klik menu Fld2 tampil halaman beranda. Klik menu Fld3 tampil halaman
beranda. Klik Fld4 tampil halaman galeri. Klik Fld5 tampil halaman tentang. Klik Fld6 tampil halaman Faq. Klik menu Fld7 tampil halaman tips. Menu Fld8 memuat slideshow produk. Klik Fld9 untuk kembali ke atas.
Keterangan :
Fld1 : Menu (masuk/daftar) Fld2 : Header
Fld3 : Menu navigasi (Beranda) Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips) Fld8 : Slideshow produk Fld9 : Button top
2. Halaman Daftar
Menu Fld18 memuat gambar. Klik Fld19 untuk kembali ke atas.
Gambar 3.5 LKT Halaman daftar Keterangan :
Fld1 : Menu (masuk/daftar) Fld11 : Nama lengkap Fld2 : Header Fld12 : Alamat
3. Halaman Login
Halaman login memuat beberapa menu. Klik Fld1 tampil navigasi masuk dan daftar. Klik menu Fld2 tampil halaman beranda. Klik menu Fld3 tampil halaman beranda. Klik Fld4 tampil halaman galeri. Klik Fld5 tampil halaman tentang. Klik Fld6 tampil halaman Faq. Klik menu Fld7 tampil halaman tips. Menu Fld8 memuat field username. Menu Fld9 memuat password. Menu Fld10 memuat
gambar. Menu Fld11 memuat tombol masuk, berfungsi untuk masuk ke dalam halaman pelanggan. Klik Fld12 untuk kembali ke atas.
Gambar 3.6 LKT Halaman login Keterangan :
Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips) Fld8 : Username
Fld9 : Password Fld10 : Gambar 4. Halaman Galeri
Halaman galeri memuat beberapa menu. Klik Fld1 tampil
Gambar 3.7 LKT Halaman Galeri Keterangan :
Fld1 : Menu (masuk/daftar) Fld11 : Button buka Fld2 : Header Fld12 : Button top Fld3 : Menu navigasi (Beranda)
Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips) Fld8 : Galeri pintu
Fld9 : Button buka Fld10 : Galeri jendela
5. Halaman Tentang
Fld4 tampil halaman galeri. Klik Fld5 tampil halaman tentang. Klik Fld6 tampil halaman Faq. Klik menu Fld7 tampil halaman tips. Menu Fld8 memuat peta alamat perusahaan. Menu Fld9 memuat gambar, info kontak dan nomor rekening pemilik. Klik menu Fld10 memuat deskripsi perusahaan. Klik menu Fld11 untuk kembali ke atas.
Gambar 3.8 LKT Halaman Tentang Keterangan :
Fld1 : Menu (masuk/daftar) Fld11 : Button top Fld2 : Header
Fld8 : Peta alamat (google map) Fld9 : Deskripsi website
Fld10 : Gambar, info kontak dan nomor rekening pemilik 6. Halaman Faq
Halaman beranda memuat beberapa menu. Klik Fld1 tampil navigasi masuk dan daftar. Klik menu Fld2 tampil halaman beranda. Klik menu Fld3 tampil halaman beranda. Klik Fld4 tampil halaman galeri. Klik Fld5 tampil halaman
tentang. Klik Fld6 tampil halaman Faq. Klik menu Fld7 tampil halaman tips. Menu Fld8 memuat pertanyaan – pertanyaan penting seputar sistem pemesanan. Klik menu Fld9 untuk kembali ke atas.
Gambar 3.9 LKT Halaman Faq Keterangan :
Fld3 : Menu navigasi (Beranda) Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips)
Fld8 : FAQ (Pertanyaan – pertanyaan penting) Fld9 : Button top
7. Halaman Tips
Halaman beranda memuat beberapa menu. Klik Fld1 tampil navigasi masuk dan daftar. Klik menu Fld2 tampil halaman beranda. Klik menu Fld3 tampil halaman beranda.
Gambar 3.10 LKT Halaman Tips Keterangan :
Fld1 : Menu (masuk/daftar) Fld2 : Header
Fld3 : Menu navigasi (Beranda) Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips) Fld8 : Tips
Fld9 : Link read more Fld10 : Button top
3.3.2 Halaman Pelanggan 1. Halaman Beranda
login. Klik menu Fld3 tampil halaman beranda. Klik Fld4
tampil halaman beranda. Klik Fld5 tampil halaman galeri. Klik Fld6 tampil halaman tentang. Klik Fld7 tampil halaman daftar order. Klik menu Fld8 tampil halaman bantuan. Klik menu Fld9 memuat halaman faq. Klik menu Fld10 memuat halaman tips. Klik Fld11 memuat slideshow gambar produk. Klik menu Fld12 untuk kembali ke atas.
Gambar 3.11 LKT Halaman Beranda Keterangan :
Fld1 : Menu (keluar) Fld10 : Menu navigasi (Tips) Fld2 : Status login Fld11 : Slideshow produk Fld3 : Header Fld12 : Button top
Fld4 : Menu navigasi (Beranda) Fld5 : Menu navigasi (Galeri) Fld6 : Menu navigasi (Tentang)
Fld9 : Menu navigasi (Faq) 2. Halaman Galeri
Halaman galeri memuat beberapa menu. Klik Fld1 tampil navigasi keluar. Klik menu Fld2 tampil deskripsi login. Klik menu Fld3 tampil halaman beranda. Klik Fld4 tampil halaman beranda. Klik Fld5 tampil halaman galeri. Klik Fld6 tampil halaman tentang. Klik Fld7 tampil halaman daftar order. Klik menu Fld8 tampil halaman bantuan. Klik
menu Fld9 memuat halaman faq. Klik menu Fld10 memuat halaman tips. Klik Fld11 memuat produk pintu. Klik Fld12 memuat tombol pilih, berfungsi untuk ke halaman selanjutnya. Klik Fld13 memuat produk jendela. Klik Fld13 memuat tombol pilih, berfungsi untuk ke halaman selanjutnya. Klik menu Fld15 untuk kembali ke atas.
Keterangan :
Fld1 : Menu (keluar) Fld11 : Galeri pintu Fld2 : Status login Fld12 : Button buka Fld3 : Header Fld13 : Galeri jendela Fld4 : Menu navigasi (Beranda) Fld14 : Button buka Fld5 : Menu navigasi (Galeri) Fld15 : Button top Fld6 : Menu navigasi (Tentang)
Fld7 : Menu navigasi (Daftar Order)
Fld8 : Menu navigasi (Bantuan) Fld9 : Menu navigasi (Faq) Fld10 : Menu navigasi (Tips) 3. Halaman Order
Klik Fld19 memuat tombol simpan semua data ke dalam database. Klik menu Fld20untuk kembali ke atas.
Gambar 3.13 LKT Halaman Order Keterangan :
Fld1 : Menu (keluar) Fld11 : Input lebar (cm) Fld2 : Status login Fld12 : Input tinggi (cm) Fld3 : Header Fld13 : Input tebal (cm) Fld4 : Menu navigasi (Beranda) Fld14 : Pilih jenis kayu Fld5 : Menu navigasi (Galeri) Fld15 : jumlah order Fld6 : Menu navigasi (Tentang) Fld16 : Button buka Fld7 : Menu navigasi (Daftar Order)
4. Halaman Bantuan
Halaman bantuan memuat beberapa menu. Klik Fld1 tampil navigasi keluar. Klik menu Fld2 tampil deskripsi login. Klik menu Fld3 tampil halaman beranda. Klik Fld4
tampil halaman beranda. Klik Fld5 tampil halaman galeri. Klik Fld6 tampil halaman tentang. Klik Fld7 tampil halaman daftar order. Klik menu Fld8 tampil halaman bantuan. Klik menu Fld9 memuat halaman faq. Klik menu Fld10 memuat halaman tips. Klik Fld11 memuat field input
pertanyaan. Klik Fld12 memuat tombol simpan, berfungsi untuk mengirim pertanyaan. Klik Fld13 memuat tombol reset untuk mengkosong filed pertanyaan. Klik Fld14 memuat semua pertanyaan dari user atau yang telah terkirim. Klik Fld15 memuat semua pertanyaan dari admin atau yang telah terkirim Klik menu Fld16 untuk kembali ke atas.
Keterangan :
Fld1 : Menu (keluar) Fld12 : Button simpan Fld2 : Status login Fld13 : Button reset Fld3 : Header Fld14 : Pertanyaan pelanggan Fld4 : Menu navigasi (Beranda) Fld15 : Pertanyaan admin Fld5 : Menu navigasi (Galeri) Fld16 : Button top Fld6 : Menu navigasi (Tentang)
Fld7 : Menu navigasi (Daftar Order)
3.4 JST (Jaringan Semantik Tampilan)
Gambar 3.15 Jaringan Semantik Tampilan Jual Pintu dan Jendela Rumah Keterangan :
T1 : Beranda T8 : Beranda admin T2 : Login T9 : Daftar user T3 : Beranda pelanggan T10 : Daftar order
T4 : Galeri T11 : Bantuan pertanyaan T5 : Order T12 : Tips
T6 : Daftar order
3.5 Rancangan Database
Rancangan basis data untuk pembuatan website jual pintu dan jendela rumah ini menggunakan database MySQL. Pada tabel database terdapat kunci primary key (PK) dan juga terdapat kunci
foreign key (FK) yang menunjukkan kunci pada tabel induk. Detail
dari tabel rancangannya ditunjukkan pada tabel berikut :
3.5.1 Relasi Database
Gambar 3.16 Relasi database db_belanjakusen
3.5.2 Struktur Database 1. Tabel user
Tabel user berfungsi untuk menyimpan data pelanggan.
Dtunjukkan pada Tabel 3.1
Tabel 3.1 Tabel User
id Int 11 Id
pelanggan
PK
username Varchar 30 Username Unique
password Varchar 32 Password
email Varchar 30 Email
status Varchar 15 Status User
tanggal_regristasi Date Tanggal Regristasi
namalengkap Varchar 100 Nama Lengkap
alamatlengkap Varchar 200 Alamat lengkap no_telp decimal 50.0 Nomor
Telpon jenis_kelamin Varchar 30 Jenis
Kelamin
2. Tabel tbl_barang
Tabel tbl_barang adalah table yang mengatur beberapa data pesanan dari pelanggan, misalkan pelanggan akan memesan satu pintu, maka data pesanan pintu akan masuk ke dalam tabel tbl_barang. Dtunjukkan pada Tabel 3.2
Tabel 3.2 Tabel tbl_barang
Field Tipe Size Keterangan Key
username Varchar 20 Username
namalengkap Varchar 100 Nama Lengkap jeniskayu Varchar 30 Jenis Kayu
kode_kusen Varchar 30 Kode Pintu atau Jendela
nama_order Varchar 100 Nama Pesanan
lebar Varchar 30 Lebar Pintu atau Jendela
panjang Varchar 30 Panjang Pintu atau Jendela
tebal Varchar 30 Tebal Pintu atau Jendela luas Varchar 30 Luas Pintu atau
Jendela totalharga Varchar 30 Total Harga
tgl_order timestamp Tanggal Pesan
gmbr_kusen Varchar 30 Gambar Pesanan
jumlah Varchar 11 Jumlah pesanan
status Varchar 30 Status Pesanan
3. Tabel komentar_bantuan
Tabel 3.3 Tabel komentar_bantuan
Field Tipe Size Keterangan Key
komen_id Int 11 Id komentar PK
username Varchar 20 Username namalengkap Varchar 100 Nama
Lengkap
status Varchar 11 Status User
komentar Text Pertanyaan
Pelanggan
date_created Timestamp Tanggal Input Pertanyaan
4. Tabel komentar_bantuan_admin
Tabel komentar_bantuan_admin berfungsi untuk menyimpan beberapa pertanyaan yang dikirim oleh administrator kepada pelanggan. Dtunjukkan pada Tabel 3.4
Tabel 3.4 Tabel komentar_bantuan_admin
Field Tipe Size Keterangan Key
id Int 11 Id komentar PK
username Varchar 30 Username
komen Text Pertanyaan
Administrator
5. Tabel tips
Tabel tips berfungsi untuk menyimpan beberapa tips untuk pelanggan, misalkan untuk membantu atau menambah referensi dalam memesan. Dtunjukkan pada Tabel 3.5
Tabel 3.5 Tabel tips
Field Tipe Size Keterangan Key
id Int 11 Id komentar PK
username Varchar 30 Username
komen Text Pertanyaan
Administrator date_created Timestamp Tanggal
Input
Pertanyaan
3.6Rancangan Tampilan Sistem
Perancangan desain untuk web jual pintu dan jendela rumah ditunjukan seperti gambar 4.10 di bawah ini yang terbagi menjadi beberapa bagian yaitu :
a. Header, bagian ini adalah tampilan atas dari desain yang berisi judul untuk sistem web jual pintu dan jendela rumah.
b. Menu Navigation, adalah bagian yang memuat tentang
menu navigasi untuk membuka halaman yang lain. d. Content, adalah isi utama dari website berisi tentang pintu
e. Footer, berisi tentang tahun pembuatan sistem, pembuat dan hak cipta.
