BAB III PERANCANGAN SISTEM 3.1
Analisis Sistem Murdick, R. G (1991:27), Sistem adalah seperangkat elemen yang membentuk kumpulan atau prosedurprosedur atau bagan-bagan pengolahan yang mencari suatu tujuan bagian atau tujuan bersama dengan mengoperasikan data dan atau barang pada waktu rujukan tertentu untuk menghasilkan informasi dan atau energi dan atau barang. Pada dasarnya web penjualan dan pemesanan online ini memproses data input yang dilakukan oleh pengguna dan administrator. Analasis sistem bertujuan untuk menguraikan masing – masing fungsi pengguna dan admnistrator, meliputi kewenangan apa saja yang dimiliki, batasan apa saja yang bisa dilakukan oleh masing – masing pengguna sisitem agar dalam pembuatan sistem ini tidak terjadi kesalahan dalam memcahkan masalah yang sudah ditetapkan. Dalam garis besar, sistem yang akan
dibuat
ini
meliputi
input
data
penjualan
administrator, input pemesanan oleh pelanggan, output data yang diterima oleh administrator perihal pemesanan, dan output data hasil pemesanan yang diterima oleh pelanggan. Setelah sistem web sesuai dengan tujuan pengembangan,
maka
selanjutnya
21
akan
dilakukan
pengumpulan
data
yang
akan
digunakan
sebagai
pembangunan SEO. 3.1.1
Alur Sistem Sistem pemesanan dan penjualan online akan dikembangkan sesuai dengan fungsi operasi antara penjual dan pembeli yang akan memudahkan dalam transaksi. Dalam hal ini masing – masing user mempunyai fungsi tersendiri, dimana penjual merupakan orang yang mengatur akses web sebagai administrator dan menyediakan jasa sedangkan
pembeli
merupakan
orang
yang
membutuhkan jasa yang dimilik oleh penjual. Pengembangan web ini juga akan diatur secara terstruktur dalam membangun SEO sesuai keyword dan deskripsi tentang perusahaan yang akan meningkatkan rating web dalam search engine. 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.
22
Dalam tahap analisis perancangan website penjualan ini, dibuat DFD yang akan menunjukkan alur proses dari sistem yang berjalan. Pada sistem yang berjalan akan dioperasikan oleh dua user yang masing – masing mempunyai fungsi sendiri, dimana pelanggan sebagai pembeli dan penjual sebagai administrator yang akan mengelola basis data siste. Berdasarkan kedua fungsi dan definisi diatas tersebut dibuat DFD level 0 pada gambar 3.1
sebagai
permulaan
penyusunan
analisis
perancangan sistem penjualan online berbasis web.
Gambar 3.1 Data Flow Diagram Level 0 Keterangan : Data yang mengalir dari atau ke admin : 1. Username dan Password 2. Edit konten website 3. Konfirmasi order 4. Input jawaban 5. Data pertanyaan 6. Data order Data yang mengalir dari atau ke Customer : 7. Input data order
23
8. Input pertanyaan 9. Konfirmasi order 10. Jawaban pertanyaan 11. Akun Facebook atau Gmail atau identitas diri 3.1.3 Data Flow Diagram level 1 dan 2 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 sebagai DFD yang meneruskan proses sistem DFD sebelumnya.
Gambar 3.2 Data Flow Diagram Level 1
24
Gambar 3.3 Data Flow Diagram Prose Order
Gambar 3.4 Data Flow Diagram Proses Chatbox Online
25
Gambar 3.5 Data Flow Diagram Proses Management Content Keterangan : Data yang mengalir dari atau ke admin : 1. Username dan Password 2. Edit konten website 3. Konfirmasi order 4. Input jawaban 5. Data pertanyaan 6. Data order Data yang mengalir dari atau ke Customer : 7. Input data order 8. Input pertanyaan 9. Konfirmasi order 10. Jawaban pertanyaan 11. Akun Facebook atau Gmail atau identitas diri 3.2
FLOWCHART Diagram alur sistem pada sistem belanja online berbasis web meliputi beberapa proses yang dilakukan
26
oleh user dalam berinteraksi dengan sistem. Sistem ujian online dikembangkan atas dasar interaksi antara dosen dengan mahasiswa dalam menempuh suatu perkuliahan konvensional. 1.
Diagram alur pemesanan customer. Untuk dapat melakukan pemesanan online, makan pelanggan akan terlebih dahulu melakukan input order data pemesanan setelah memilih barang yang akan dipesan. Dalam input data, pelanggan akan melakukan upload desain atau mengirim url bahan desain yang akan digunakan dalam acuan desain barang yang akan dipesan. Setelah barang siap, selanjutnya customer akan melakukan pembayaran. Berikut adalah Gambar 3.3 dari diagram alur pemesanan barang.
27
Gambar 3.6 Flowchart pemesanan customer 2. Diagram alur bantuan chat online. Proses pemesanan barang memungkinkan customer mengalami kendala. Customer bisa meminta bantuan penjelasan dengan melakukan chat online melalui box chat dipojok kanan bawah web. Customer harus mengisi nama yang akan digunakan untuk memulai chat, lalu customer dapat melakukan pertanyaan yang akan dijawab langsung oleh administrator. Berikut alur bantuan chat online pada gambar 3.4 ini.
Gambar 3.7 Flowchart bantuan chat online
28
3.3
LKT (Lembar Kerja Tampilan) 3.3.1 Halaman Pelanggan 1.
Halaman Beranda
Gambar 3.8 Halaman beranda Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Slideshow promo Fr8 : Footer Fr9 : Slideshow promo perkategori Fr10: Button next dan previous Fr11: Chatbox online
29
2.
Halaman Profil
Gambar 3.9 Halaman Profil Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Detail profil Fr8 : Footer Fr9 : Judul halaman Fr10 : Chatbox online
30
3.
Halaman Kontak
Gambar 3.10 Halaman Profil Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Google Map Fr8 : Footer Fr9 : Judul halaman Fr10 : Chatbox online
31
4.
Halaman Portofolio
Gambar 3.11 Halaman Portofolio Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Foto Produk Fr8 : Footer Fr9 : Judul halaman Fr10 : Halaman Fr11 : Chatbox online
32
5.
Halaman Galeri
Gambar 3.12 Halaman Galeri Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Foto Promo Fr8 : Footer Fr9 : Judul halaman Fr10 : Chatbox online
33
6.
Halaman Produk Perkategori
Gambar 3.13 Halaman Produk Perkategori Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Foto Produk Fr8 : Footer Fr9 : Halaman Fr10 : Chatbox online
34
7.
Halaman Detail Produk
Gambar 3.14 Halaman Detail Produk Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Deskripsi produk Fr8 : Footer Fr9 : Judul produk Fr10 : Gambar produk Fr11 : Judul Deskripsi Fr12 : Judul halaman Fr13 : Chatbox online
35
8.
Halaman Form Pemesanan
Gambar 3.15 Halaman Form Pemesanan Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Judul aturan pemesanan Fr8 : Footer Fr9 : Aturan pemesanan Fr10 : Judul form pemesanan Fr11 : Judul halaman Fr12 : Chatbox online
36
9.
Halaman Promo
Gambar 3.16 Halaman Promo Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Gambar promo Fr8 : Footer Fr9 : Halaman Fr10 : Judul halaman Fr11 : Chatbox online
37
10. Halaman Detail Promo
Gambar 3.17 Halaman Detail Promo Keterangan : Fr1 : Logo perusahaan Fr2 : Search box Fr3 : Menu kategori produk Fr4 : Testimoni Fr5 : Kontak perusahaan Fr6 : Sosial media Fr7 : Deskripsi promo Fr8 : Footer Fr9 : Judul promo Fr10 : Gambar promo Fr11 : Judul deskripsi Fr12 : Judul halaman Fr13 : Chatbox online
38
3.3.2
Halaman Admin 1.
Halaman Login Admin
Gambar 3.18 Halaman Login Admin Keterangan : Fr1 : Logo perusahaan Fr2 : Username Fr3 : Password Fr4 : Button login
39
1. Halaman Admin
Gambar 3.19 Halaman Login Admin Keterangan : Fr1 : Logo perusahaan Fr2 : Menu utama Fr3 : Link menu utama Fr4 : Menu produk Fr5 : Link menu produk Fr6 : Menu admin Fr7 : Link menu admin Fr8 : Menu Website Fr9 : Link menu website Fr10 : Tampilan edit konten Fr11 : logout
40
3.4
JST (Jaringan Semantik Tampilan)
Gambar 3.20 Jaringan Semantik Tampilan Penjualan dan pemesanan online Keterangan : 1 : Home
6 : Kategori produk
2 : Profil
7 : Produk perkategori
3 : Kontak
8 : Detail produk
4 : Porotofolio
9 : Form pemesanan
5 : Galeri
10 : Chatbox Online
41
