BAB 4

DESAIN SISTEM

Pada bab ini akan dijelaskan mengenai desain sistem yang digunakan

dalam pembuatan sistem penjualan online untuk CV. Rajawali Nuansa Indah.

Desain yang dibuat meliputi desain Business Process Model and Notation

(BPMN), desain Entity Relation Diagram (ERD) dan mapping beserta kamus

datanya.

4.1 BUSINESS PROCESS MODEL AND NOTATION (BPMN)

Business Process Model and Notation pada subbab ini menggambarkan

alur proses toko online dalam menanggapi aktivitas pelanggan saat berbelanja.

Proses-proses yang terdapat dalam toko online ini antara lain menampilkan

informasi produk, mencatat pesanan dalam troli, memproses checkout dan

memberi notifikasi pembayaran kepada pelanggan. Proses checkout terdiri dari

pengecekan login, menghitung biaya ongkos kirim dan menampilkan pilihan

metode pembayaran.

4.1.1 PROSES BELANJA

Proses ini dilihat dari sisi toko online dan dimulai ketika pembeli

mengakses toko online. Informasi produk akan ditampilkan, pembeli dapat

memilih barang-barang yang diinginkan dan menambahkan barang yang dipilih

kedalam troli. Saat pembeli sudah selesai memilih dan menambahkan barang-
barang kedalam troli proses selanjutnya adalah checkout dan pengiriman

notifikasi via email. BPMN dari toko online dapat dilihat pada gambar 4.1

Gambar 4.1 BPMN Proses Belanja

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

4.1.2 PROSES CHECKOUT

Ketika pembeli sudah selesai memilih dan menambahkan produk kedalam

troli proses selanjutnya adalah checkout. Didalam proses ini terdapat beberapa

proses yang dilakukan oleh toko online antara lain pengecekan login, menghitung

ongkos kirim apabila pelanggan ingin barangnya dikirim, menampilkan order

review agar pelanggan dapat mengecek ulang pesanan dan mengirim email

notifikasi. BPMN dari proses ini dapat dilihat pada gambar 4.2

Gambar 4.2 BPMN Proses Checkout

4.1.3 PROSES PENGECEKAN LOGIN

Ketika pembeli akan melakukan checkout, website akan melakukan

pengecekan apakah pelanggan sudah login atau belum. Proses checkout hanya

dapat dilakukan jika pelanggan sudah login. Alur pengecekan adalah mengecek

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

apakah pelanggan sudah login jika belum maka pembeli dapat melakukan

registrasi dan apabila sudah pernah registrasi namun lupa password website dapat

mengirim email untuk mengatur ulang password. Pada gambar 4.3 merupakan

BPMN dari proses pengecekan login.

Gambar 4.3 BPMN Proses Pengecekan login

4.2 DESAIN BASIS DATA

Desain Basis Data menjelaskan bagaimana Entity Relation Diagram

(ERD) beserta tabel-tabel hasil ERD yang digunakan dalam kerja praktik ini.

4.2.1 ENTITY RELATION DIAGRAM (ERD)

Entity Relation Diagram (ERD) diperlukan untuk representasi hubungan

tabel-tabel data dan isinya. ERD memiliki entitas-entitas yang mewakili tabel-

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

tabel dan data. Toko online untuk CV. Rajawali Nuansa Indah memiliki data-data

yang saling berhubungan satu sama lain. Data-data tersebut di kelompokan dalam

tabel-tabel antara lain tabel users, addresses, categories, products dan orders.

Pada gambar 4.4 merupakan visualisasi ERD pada sistem penjualan online

untuk CV. Rajawali Nuansa Indah.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Gambar 4.4 ERD Toko Online

4.2.2 MAPPING ERD

Mapping adalah proses memetakan entitas-entitas hasil dari rancangan

ERD ke dalam sebuah tabel yang saling berhubungan satu dengan yang lain.

Mapping pada subbab ini dibuat berdasarkan ERD yang sudah didesain. Berikut

merupakan mapping toko online yang ditunjukan pada tabel 4.1

Tabel 4.1 Hasil Pemetaan ERD Toko Online

Tabel users

id name email password admin

Tabel addresses

id street city zip province country phone user_id

FK tabel users

Tabel categories

id name description

Tabel products

id name image price weight description category_id

FK tabel categories

Tabel orders

id created_at total status delivery delivery_id user_id

FK tabel deliveries FK tabel users

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

Payment_method Delivery_method Delivery_service Delivery_cost

Tabel 4.1 Hasil Pemetaan ERD Toko Online (lanjutan)

Tabel order_product

id order_id product_id created_at

FK tabel orders FK tabel users

4.2.3 KAMUS DATA

Subbab ini akan menjelaskan tentang kamus data dari setiap tabel yang

terbentuk pada proses mapping. Kamus data berisi penjelasan mengenai atribut

atribut setiap tabel yang meliputi nama tabel, nama kolom, tipe data dan

keterangan setiap atribut. Kamus data dapat dilihat pada Tabel 4.2.

Tabel 4.2 Tabel Kamus Data Toko Online

Nama Tabel Nama Kolom Tipe Data Keterangan

Tabel Users id integer id pengguna, wajib diisi.

name string nama pengguna, wajib diisi

email string Email pengguna, wajib diisi.

password string Password pengguna,

menggunakan metode

enkripsi bcrypt, wajib diisi.

admin tinyInteger Status pegguna, default(0),

wajib diisi.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

Tabel 4.2 Tabel Kamus Data Toko Online (lanjutan)

Tabel Users address_id integer id address yang juga

(lanjutan) disimpan dalam addresses

TABEL id integer Identitas alamat, auto

ADDRESSES increment.

street string Nama jalan

city string Nama kota, wajib diisi

zip string Kodepos

province string Nama provinsi, wajib diisi

coutry string Nama negara, wajib diisi,

default = indonesia

TABEL id integer Identitas kategori, auto

CATEGORIES increment

name string nama pengguna, wajib diisi

description text Deskripsi kategori, wajib

diisi

TABEL id integer Identitas produk

PRODUCTS

name string Nama produk, wajib diisi

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

Tabel 4.2 Tabel Kamus Data Toko Online (lanjutan)

TABEL category_id integer Id dari tabel categories

PRODUCTS

(lanjutan)

image string Lokasi penyimpanan

gambar

description text Keterangan produk

price bigInteger Harga barang

weight double Berat barang

TABEL id integer Identitas order, bersifat auto

ORDERS increment

created_at datetime Keterangan waktu order

dilakukan

total bigInteger Keterangan total harga

status enum Status order (not paid, paid,

ready to take, sending,

done)

delivery_method enum Jenis metode pengiriman

(take away, jne)

delivery_service integer Jenis layanan pengiriman

delivery_cost bigInteger Keterangan ongkos kirim

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Tabel 4.2 Tabel Kamus Data Toko Online (lanjutan)

TABEL Payment_method enum Jenis pembayaran cash,

ORDERS BCA

(lanjutan)

TABEL id integer Identitas detail order, auto

PRODUCT_ increment

ORDER

Order_id integer Identitas order, tersimpan

pada tabel orders

Product_id integer Identitas produk, tersmpan

pada tabel products

Selling_price bigInteger Keterangan harga penjulan

quantity integer Keterangan jumlah produk

yang dipesan

4.3 DESAIN ANTARMUKA

Dalam subbab ini akan dibahas rancangan desain antarmuka sebagai

tampilan dari sistem yang akan dibuat. Terdapat dua jenis tampilan antarmuka

pada sistem yaitu untuk pelanggan dan untuk admin. Untuk pelanggan terbagi lagi

menjadi beberapa halaman, antara lain beranda, kontak, tentang kami, akun dan

troli, checkout dan email tagihan. Untuk admin terdapat beberapa bagian antara

lain dashboard, pelanggan, produk, kategori produk, pesanan dan pengaturan.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Pada saat pertama kali website diakses tampilan pertama adalah halaman

beranda. Pada halaman beranda pembeli dapat melihat informasi produk, kontak,

tentang kami, akun dan cart. Pada gambar 4.5 ditunjukkan tampilan desain user

interface dari halaman beranda.

Gambar 4.5 Halaman Beranda

Dalam halaman beranda pelanggan dapat melihat informasi barang,

menambah barang ke dalam keranjang, membuka halaman detail produk,

membuka halaman kontak, membuka halaman tentang kami, login dan daftar.

Pada gambar 4.6 ditunjukkan tampilan antarmuka informasi detail produk yang

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

dapat dibuka melalui halaman beranda dengan menekan tombol detail atau dengan

cara klik nama produk.

Gambar 4.6 Informasi Detail Produk

Pada halaman keranjang atau troli akan ditampilkan barang-barang yang

telah ditambahkan oleh pelanggan ke dalam troli. Dalam halaman ini pembeli juga

dapat memperbarui informasi barang yang dipesan dengan cara klik tombol

perbarui cart setelah mengubah jumlah barang sesuai kehendak pelanggan.

Tampilan halaman troli ditunjukan pada gambar 4.7.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Gambar 4.7 Halaman Troli

Setelah proses memilih barang selesai pelanggan dapat melakukan

pembayaran dengan menekan tombol lanjut checkout. Terdapat beberapa

pemeriksaan untuk dapat masuk dalam proses checkout yaitu pembeli harus

sudah login atau registrasi. Jika pembeli belum login maka akan diarahkan pada

halaman login terlebih dahulu. Jika pelanggan belum memiliki akun maka dapat

memilih kolom registrasi. Setelah registrasi selesai halaman akan diarahkan

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

kembali kepada halaman checkout. Gambar 4.8 adalah halaman untuk login dan

regstrasi.

Gambar 4.7 Halaman Login dan Registrasi

Proses checkout dimulai dari pemilihan metode pengiriman barang.

Pelanggan dapat memilih metode ambil ditempat atau JNE. Jika pelanggan

memilih metode ambil ditempat akan langsung diarahkan kepada halaman metode

pembayaran, namun bila pelanggan memilih metode JNE maka akan diarahkan

pada halaman pengisian alamat untuk dilakukan perhitungan biaya kirim

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

berdsarkan lokasi tujuan dan total berat barang. Pada gambar 4.8 merupakan

halaman pemilihan metode pengiriman.

Gambar 4.8 Halaman Pemilihan Metode Pengiriman

Halaman alamat berfungsi untuk pengisian alamat pengiriman barang.

Dalam halaman ini ongkos kirim juga dihitung berdasarkan dengan lokasi

pengiriman barang dan total berat barang. Ongkos kirim didapat berdasarkan tarif

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

JNE dari API rajaongkir.com. Pada gambar 4.9 merupakan halaman pengisian

alamat kirim.

Gambar 4.9 Halaman Alamat Kirim

Setelah halaman metode pengiriman atau halaman alamat kirim diisi maka

selanjutnya adalah metode pembayaran. Terdapat dua pilihan metode pembayaran

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

dalam halaman ini yaitu cash dan transfer BCA. Pada gambar 4.10 ditunjukan

halaman pilihan metode pembayaran.

Gambar 4.10 Halaman Metode Pembayaran

Proses checkout terakhir adalah pada halaman review pesanan. Pelanggan

dapat memeriksa pesanan kembali sebelum email tagihan dikirim. Apabila sudah

yakin maka email mengenai informasi tagihan dan pembayaran akan dikirim via

email setelah tombol bayar ditekan. Pada gambar 4.11 merupakan halaman

checkout review pesanan dan.email tagihan.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Gambar 4.11 Halaman Checkout Review

Pada halaman untuk pelanggan terdapat navigasi akun yang memiliki

beberapa pilihan antara lain pesanan, akun dan logout. Pada gambar 4.12

ditunjukan pilihan dalam navigasi akun.

Gambar 4.12 Pilihan Navigasi Akun

Pilihan diatas dapat dilihat hanya bila pelanggan sudah login. Didalam link

order pelanggan dapat melihat status pesanan pada halaman pesanan yang akan

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

muncul ketika link order dipilih dan untuk link logout digunakan untuk keluar.

Halaman order menyajikan informasi daftar pesanan. Pembeli juga dapat melihat

detail pesanan dengan menekan tombol detail pesanan. Gambar 4.13

menunjukkan halaman pesanan.

Gambar 4.13 Halaman Pesanan

Pelanggan juga dapat melihat detail pesanan dengan menekan tombol

view. Detail pesanan antara lain berisi nomor order, nomor produk, harga

penjualan dan kuantitas produk. Pada gambar 4.14 merupakan antarmuka detail

produk.

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Gambar 4.14 Halaman Detail Pesanan

Tampilan untuk admin terdapat beberapa bagian antara lain dashboard,

pelanggan, produk, kategori produk dan pesanan. Pada gambar 4.15 merupakan

tampilan antarmuka dari admin.

Gambar 4.15 Antarmuka admin

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Bagian pelanggan merupakan bagian untuk mengelola data pelanggan.

Admin dapat melihat informasi pelanggan dan dapat menghapus pelanggan

melalui halaman ini. Gambar 4.16 menunjukkan bagian pelanggan.

Gambar 4.16 Admin Pelanggan

Pesan popup akan selalu muncul setiap kali admin akan melakukan

penghapusan data pelanggan maupun data pada bagian lain. Gambar 4.17

menunjukkan popup saat penghapusan data.

Gambar 4.17 Pesan Popup Saat Proses Penghapusan

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya

 Bagian lain produk, kategori produk, pesanan dan pengaturan memiliki

struktur desain antarmuka yang sama dengan bagian admin diatas. Hanya bagian

pesanan dan detail pesanan admin yang jika dipilih akan mengarahkan pada

halaman antarmuka untuk pelanggan yang berisi data pesanan dari pelanggan

yang dipilih.

merupakan bagian untuk mengelola data produk; nama, gambar dan harga. Admin

dapat menambah, melihat, mengubah dan menghapus data produk. Pada gambar

4.16 merupakan gambar antarmuka admin bagian produk.Gambar 4.15 Admin

Pada bagian kategori produk berfungsi sebagai antarmuka admin dalam

mengelola kategori produk. Admin dapat menambah, melihat, mengubah dan

menghapus kategori produk. Gambar 4.17 merupakan gambar antarmuka admin

bagian kategori produk.

Gambar 4.17 Admin Kategori Produk

Bagian pesanan berfungsi sebagai antarmuka admin dalam mengelola

pesanan. Admin dapat melihat daftar pesanan, melihat detail pesanan dan

mengubah status pesanan. Pada gambar 4.18 merupakan antarmuka admin bagian

pesanan.

Gambar 4.18 Admin Pesanan

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Surabaya