Bab III. PERANCANGAN SISTEM

Transkripsi

1 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. Berdasarkan pada sistem e-commerce pada umumnya, sistem belanja online berbasis web disini dijelaskan tahapan analisis sistem yang memproses input dari dua pengguna yaitu pelanggan, dan penjual atau administrator. Pada tahap analisis sistem ini akan dijelaskan bagaimana setiap entitas berinteraksi dengan sistem untuk menjalankan setiap fungsinya masingmasing, oleh karena itu perlu mendefinisikan fungsi masing-masing entitas dalam sistem agar dalam perancangan sistem tidak terjadi kesalahan-kesalahan dalam implementasinya. Secara garis besar sistem belanja online yang akan dikembangkan disini terdiri dari prosesproses yang meliputi pendaftaran user, masuk ke area 16

2 pelanggan, pemesanan, pembayaran dan pengiriman barang 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 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. Dalam tahapan analisis perancangan sistem belanja online, dibuat Data Flow Diagram yang menunjukkan garis besar dari alur proses dalam sistem. Proses-proses yang berjalan dalam sistem ini di operasikan oleh dua entitas luar yang mempunyai fungsi tersendiri berdasarkan kebutuhan terhadap sistem, yaitu entitas pertama adalah 17

3 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 10. Input melakukan pemesanan 11. Mengirim deposit 50% 18

4 12. Data customer 13. Data pemesanan 14. Informasi barang siap kirim 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. Gambar 3.2 Data Flow Diagram Level 1 19

5 3.2 Flowchart Gambar 3.3 Flowchart Sistem Website 20

6 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 Data order, untuk menampilkan tabel order yang berfungsi untuk mengkonfirmasi dan membatalkan order dari user. 21

7 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) 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. Gambar 3.4 LKT Halaman beranda 22

8 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 Halaman daftar 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 field password. Menu Fld10 memuat field . Menu Fld11 memuat nama lengkap. Menu Fld12 memuat alamat. Menu Fld13 memuat no. telpon. Menu Fld14 memuat jenis kelamin. Menu Fld15 memuat kode captcha. Menu Fld16 memuat tombol button simpan, berfungsi untuk menyimpan data register. Fld17 memuat tombol reset berfungsi untuk menghapus semua field. 23

9 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 Fld3 : Menu navigasi (Beranda) Fld13 : No.Telp Fld4 : Menu navigasi (Galeri) Fld14 : Jenis kelamin Fld5 : Menu navigasi (Tentang) Fld15 : Kode captcha Fld6 : Menu navigasi (Faq) Fld16 : Button simpan Fld7 : Menu navigasi (Tips) Fld17 : Button reset Fld8 : Username Fld18 : Gambar Fld9 : Password Fld19 : Button top Fld10 : 24

10 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 : Fld1 : Menu (masuk/daftar) Fld11 : Button masuk Fld2 : Header Fld12 : Button Top Fld3 : Menu navigasi (Beranda) 25

11 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 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 gambar produk pintu. Menu Fld9 memuat gambar produk jendela. Klik menu Fld10 memuat tombol pilih, berfungsi untuk melanjutkan ke halaman berikutnya. Fld11 memuat tombol pilih, berfungsi untuk melanjutkan ke halaman berikutnya. Klik menu Fld12 untuk kembali ke atas. 26

12 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 Halaman tentang memuat beberapa menu. Klik Fld1 tampil navigasi masuk dan daftar. Klik menu Fld2 tampil halaman beranda. Klik menu Fld3 tampil halaman beranda. Klik 27

13 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 Fld3 : Menu navigasi (Beranda) Fld4 : Menu navigasi (Galeri) Fld5 : Menu navigasi (Tentang) Fld6 : Menu navigasi (Faq) Fld7 : Menu navigasi (Tips) 28

14 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. Keterangan : Fld1 : Menu (masuk/daftar) Fld2 : Header Gambar 3.9 LKT Halaman Faq 29

15 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. Klik Fld4 tampil halaman galeri. Klik Fld5 tampil halaman tentang. Klik Fld6 tampil halaman Faq. Klik menu Fld7 tampil halaman tips. Menu Fld8 memuat tips untuk menambah referensi pelanggan. Klik Menu Fld9 memuat tombol, berfungsi untuk melihat lebih lengkap dari tips. Klik menu Fld10 untuk kembali ke atas. 30

16 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 Halaman Pelanggan 1. Halaman Beranda Halaman beranda memuat beberapa menu. Klik Fld1 tampil navigasi keluar. Klik menu Fld2 tampil deskripsi 31

17 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) Fld7 : Menu navigasi (Daftar Order) Fld8 : Menu navigasi (Bantuan) 32

18 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. Gambar 3.12 LKT Halaman Galei 33

19 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 Halaman order 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 lebar. Klik Fld12 memuat field Input tinggi. Klik Fld13 memuat field Input tebal. Klik Fld14 memuat field pilih jeni kayu. Klik Fld15 memuat field Input jumlah order. Klik Fld16 memuat tombol buka. Klik Fld17 memuat tombol cek detail, burfungsi untuk melihat data serta harga. Klik Fld18 memuat tombol reset untuk mengkosongkan semu field. 34

20 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) Fld8 : Menu navigasi (Bantuan) Fld17 : Button Cek detail Fld9 : Menu navigasi (Faq) Fld18 : Button reset Fld10 : Menu navigasi (Tips) Fld20 : Button Simpan Fld19 : Info order (harga, ukuran) Fld21 : Button top 35

21 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. Gambar 3.14 LKT Halaman Bantuan 36

22 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) Fld8 : Menu navigasi (Bantuan) Fld9 : Menu navigasi (Faq) Fld10 : Menu navigasi (Tips) Fld11 : Kolom input pertanyaan 37

23 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 T7 : Bantuan pertanyaan 38

24 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 : Relasi Database Gambar 3.16 Relasi database db_belanjakusen Struktur Database 1. Tabel user Tabel user berfungsi untuk menyimpan data pelanggan. Dtunjukkan pada Tabel 3.1 Tabel 3.1 Tabel User Field Tipe Size Keterangan Key 39

25 id Int 11 Id PK pelanggan username Varchar 30 Username Unique password Varchar 32 Password Varchar 30 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 id Int 5 Id pesanan PK 40

26 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 komentar_bantuan berfungsi untuk menyimpan beberapa pertanyaan yang dikirim oleh pelanggan apabila mengalami kesulitan. Dtunjukkan pada Tabel

27 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 date_created Timestamp Tanggal Input Pertanyaan 42

28 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.6 Rancangan 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 dan jendela rumah. 43

29 e. Footer, berisi tentang tahun pembuatan sistem, pembuat dan hak cipta. Gambar 4.10 Rancangan Tampilan Sistem 44