BAB IV

ANALISIS DAN PERANCANGAN SISTEM

4.1 Analisis Sistem Yang Sedang Berjalan

Kegiatan analisis sistem yang berjalan dilakukan dengan analisis yang

berorientasi pada objek-objek yang diperlukan oleh sistem yang dirancang,

dimaksudkan untuk menitik beratkan kepada fungsionalitas sistem yang berjalan

dengan tidak terlalu menitik beratkan kepada alur proses dari sistem. Selanjutnya

dari hasil analisis ini divisualisasi dan didokumentasiakan dengan UML melalui

use case diagram, skenario use case dan activity diagram, pertimbangan diagram

tersebut ini karena dianggap mewakili secara keseluruhan sistem yang berjalan

pada Rumah Herbal AL-DAWA.

4.1.1 Analisis Kebutuhan

Sebelum membuat suatu sistem, hendaknya melakukan analisis terlebih

dahulu terhadap kebutuhan-kebutuhan apa saja yang diperlukan dengan

menggunakan metode-metode yang telah ada. Dalam hal ini penulis menggunakan

metodologi berorientasi objek, yaitu dimulai dari :

45
 46

[Link] Use Case Diagram

Gambar 4.1 Use Case Diagram Sistem Penjualan Yang Sedang Berjalan

[Link] Skenario Use Case Diagram

Skenario use case digunakan untuk memudahkan dalam menganalisa

skenario yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan

penilaian terhadap skenario tersebut. Adapun tahapan - tahapan sekenario use case

Sistem Penjualan pada Rumah Herbal AL-DAWA yang sedang berjalan adalah

sebagai berikut :

1. Skenario Use Case Pembelian Obat

Nama Use Case : Pembelian Obat

Aktor : Konsumen

Tujuan : Membeli Obat

Deskripsi : Untuk membeli obat yang sudah dipilih.

 47

Tabel 4.1
Tabel Skenario Use Case Pembelian Obat

Konsumen Kasir
1. Melihat katalog obat yang
disediakan.
2. Membeli obat yang telah
dipilih.
3. Mengecek persediaan obat,
apabila obat tersedia maka
dilanjutkan ke transaksi
pembayaran, tapi apabila obat
tidak tersedia maka pembelian
dibatalkan.
4. Menyimpan data penjualan obat.

2. Tabel Skenario Use Case Transaksi Pembayaran

Nama Use Case : Transaksi Pembayaran

Aktor : Konsumen

Tujuan : Melakukan transaksi pembayaran.

Deskripsi : Untuk melakukan pembayaran obat yang sudah dibeli.

Tabel 4.2
Tabel Skenario Use Case Transaksi Pembayaran

Konsumen Kasir
1. Melakukan pembelian obat.

2. Membuat nota traksaksi

pembayaran.
3. Menerima nota transaksi.
 48

3. Tabel Skenario Use Case Laporan Penjualan Obat

Nama Use Case : Laporan Penjualan Obat

Aktor : Kasir

Tujuan : Pembuatan laporan Penjualan Obat

Deskripsi : Untuk mengetahui hasil dari penjualan obat.

Tabel 4.3
Tabel Skenario Use Case Laporan Penjualan

Kasir Sistem
1. Melakukan pembuatan
laporan penjualan obat
2. Mencatat dan Menyimpan data
laporan penjualan obat pada
buku laporan penjualan.

[Link] Activity Diagram

Activity diagram digunakan untuk menggambarkan kegiatan-kegiatan

yang ada di dalam suatu sistem. Berikut diagram Activity Diagram yang sedang

berjalan pada Rumah Herbal AL-DAWA yaitu :

1. Activity Diagram Pembelian Obat

Gambar 4.2 Activity Diagram Membeli Obat yang sedang Berjalan

 49

2. Activity Diagram Transaksi Pembayaran

Gambar 4.3 Activity Diagram Transaksi Pembayaran Yang Sedang Berjalan

3. Activity Diagram Pembuatan Laporan Penjualan

Gambar 4.4 Activity Diagram Pembuatan Laporan Yang Sedang Berjalan

4.1.2 Evaluasi Sistem Yang Sedang Berjalan

Setelah melakukan analisis dari sistem yang sedang berjalan di Rumah

Herbal AL-DAWA saat ini. Terdapat beberapa kekurangan – kekurangan dari

sistem tersebut, kekurangan – kekurangan tersebut antara lain:

1. Pencatatan transaksi penjualan masih dituliskan dalam nota-nota dan buku-

buku transaksi sehingga menyebabkan kesulitan dalam pencarian data ketika

data atau arsip semakin banyak, baik berupa pencarian data transaksi.
 50

2. Penjualan produk hanya dapat dilakukan di Rumah Herbal AL-DAWA

sehingga menyulitkan para konsumen yang memiliki lokasi jauh dan waktu

terbatas.

3. Kurangnya media untuk mempromosikan produk-produk dari Rumah Herbal

AL-DAWA.

4. Sistem penjualan yang ada sekarang masih kurang mengakomodasi keinginan

konsumen yang sebagian besar telah terbiasa dengan pembelian produk

secara online.

5. Rumah Herbal AL-DAWA belum memiliki sistem penjualan online.

4.2 Perancangan Sistem

Setelah menganalisis sistem yang sedang berjalan di Rumah Herbal AL-

DAWA saat ini, penulis melihat masih terdapat beberapa kekurangan –

kekurangan yang perlu untuk di lakukan perubahan agar sistem yang ada dapat

berjalan lebih baik,efektif dan efisien.

Perancangan Sistem adalah tahapan untuk mengambarkan sistem secara

umum, menganalisis kebutuhan fungsional, penggambaran, perancangan maupun

pembuatan sketsa dari sistem yang akan diusulkan sehingga mempermudah

pembuatan sistem baru yang diusulkan.

 51

4.2.1 Tujuan Perancangan Sistem

Tujuan perancangan sistem adalah sebagai berikut :

1. untuk menghasilkan suatu sistem yang memiliki struktur dan rancangan yang

baik.

2. Sistem Informasi Penjualan Online Berbasis Web pada Rumah Herbal AL-

DAWA, ditujukan untuk dapat mempromosikan dan mensosialisasikan proses

peningkatan penjualan obat herbal di Rumah Herbal AL-DAWA.

3. Dengan adanya Sistem Informasi Penjualan Online Berbasis Web Pada Rumah

Herbal AL-DAWA, diharapkan dapat meningkatkan pelanggan yang ingin

membeli obat AL-DAWA tanpa harus datang ke toko.

4.2.2 Gambaran Umun Sistem Yang Diusulkan

Sistem yang diusulkan adalah sistem penjualan berbasis web. Dengan

menggunakan PHP dan CSS sebagai bahasa pemprograman utama dalam

pembuatan website.

Sistem yang akan diusulkan akan menggunakan website sebagai sistem

penjualan yang diharapkan dapat menjadi salah satu media promosi, dan

memperluas cakupan penjualan dari produk – produk di Rumah Herbal AL-

DAWA.

4.2.3 Perancangan Prosedur Yang Diusulkan

Perancangan sistem yang akan dibuat mencakup use case diagram, activity

diagram, collaboration diagram, class diagram, sequence diagram, Object

 52

Diagram, component diagram dan deployment diagram yang menghasilkan suatu

sistem yang lebih baik. Proses yang dirancang diuraikan menjadi beberapa bagian

yang dapat membentuk sistem tersebut menjadi satu kesatuan komponen.

Prosedur pengolahan data dalam sistem yang akan diusulkan pada Rumah

Herbal AL-DAWA adalah sebagai berikut :

[Link] Use Case Diagram

Gambar 4.5 Use Case Diagram Sistem Penjualan Yang Diusulkan

 53

[Link] Skenario

1. Skenario Use Case Katalog Obat

Nama Use Case : Katalog Obat

Aktor : User Non Member

Tujuan : Melihat produk yang tersedia

Deskripsi : Konsumen hanya bisa melihat katalog produk dan tidak

Bisa melakukan pemesanan obat tanpa menjadi member.

Tabel 4.4
Tabel Skenario Use Case Katalog Obat

Aktor Sistem
1. Membuka website Rumah
Herbal AL-DAWA.
2. Menampilkan website berupa
menu katalog obat, profil tentang
perusahan dan kontak.

2. Skenario Use Case Regisrasi Member

Nama Use Case : Registrasi Member

Aktor : User Non Member

Tujuan : User Menjadi Member

Deskripsi : Konsumen melakukan registrasi keanggotaan untuk

menjadi member.

Tabel 4.5
Tabel Skenario Use Case Regisrasi Member

Aktor Sistem
1. Membuka website Rumah
Herbal AL-DAWA.
2. Tampilan website dengan
 54

berbagai menu.
3. Pilih menu registrasi
member.
4. Tampilan form pendaftaran.
5. Mengisi form pendaftaran
dengan lengkap.
6. Memproses registrasi member.
7. Memberitahukan apabila data
tidak tidak valid dan tidak
lengkap.
8. Menyimpan data registrasi
member
9. Aktivasi akun ke email
10. Menerima data konfirmasi
member
11. Mengaktifkan akun
12. Simpan perubahan status
akun
13. Status member aktif

3. Skenario Use Case Login Member

Nama Use Case : Login Member

Aktor : User Member

Tujuan : Proses Validasi Akun Member

Deskripsi : Pengguna (Member) melakukan login seperti memasukan

username dan password.

Tabel 4.6
Tabel Skenario Use Case Login Member

Aktor Sistem
1. Masuk menu login

2. Mengisi nama username dan

password.
3. Memproses username dan
password pada sistem data base.
4. Jika akun valid maka pengguna
 55

akan masuk ke halaman member,

apabila akun tidak valid maka
akan kembali ke halaman login
member.
5. Menampilkan halaman utama
member.
6. Masuk halaman utama
member

4. Tabel Skenario Use Case Pemesanan Obat

Nama Use Case : Pemesanan Obat

Aktor : User Member

Tujuan : Melakukan transaksi pemesanan obat.

Deskripsi : Bagaimana user melakukan Pemesanan obat yang akan

Dilakukan.

Tabel 4.8
Tabel Skenario Use Case Pemesanan Obat

Aktor Sistem
1. Membuka website dan
melakukan login member.
2. Menampilkan macam-macam
jenis obat yang di tawarkan
perusahaan.
3. User member memilih obat
yang diinginkan dengan cara
mengklik tambah keranjang.
4. Mengecek persediaan obat,
apabila obat tersedia maka
dilanjutkan ke transaksi
pembayaran, tapi apabila obat
tidak tersedia maka pembelian
dibatalkan.
5. Mencatat pemesanan obat ke
dalam keranjang pembelian yang
di pilih oleh user tersebut.

6. Menampilkan layar halaman

 56

keranjang belanja

7. Mengklik chekout.
8. Memberikan no Invoice
pembelian untuk di catat oleh
member.

5. Tabel Skenario Use Case Konfirmasi Pembayaran

Nama Use Case : Konfirmasi Pembayaran

Aktor : User Member

Tujuan : Melakukan pembayaran obat yang telah dipesan

Deskripsi : Bagaimana konsumen melakukan konfirmasi pembayaran

atas pemesana yang telah dilakukan.

Tabel 4.9
Tabel Skenario Use Case Konfirmasi Pembayaran

Aktor Sistem
1. User member melakukan
pembayaran sejumlah biaya
pemesanan dengan media
transfer Bank.
2. User member melakukan
konfirmasi pembayaran
dengan masuk ke menu
konfirmasi pembayaran dan
mengisi form konfirmasi.
3. Menampilkan from konfirmasi
pembayaran dan memberikan
pemilihan untuk cara
pembayaran yaitu :
 Pembayaran manual dengan
cara transper bank
 Pembayaran ATM

4. Member mengisi form

konfirmasi pembayaran dan
memilih cara pembayaran
lewat transfer bank (ATM)
 57

5. Menampilkan halaman informasi

cara pembayaran via transper
bank (ATM).
6. Member memilih untuk
pembayaran setoran tunai.
7. Mencatat dan menyimpan data
konfirmasi pembayaran ke dalam
database konfirmasi pembayaran.
8. Menampilkan halaman bahwa
konfirmasi pembayaran akan di
cek.

6. Tabel Skenario Use Case

Nama Use Case : Pengiriman

Aktor : Admin

Tujuan : Melakukan Pengiriman Barang.

Deskripsi : Melakukan pengiriman barang yang telah di pesan oleh

Konsumen.

Tabel 4.10
Tabel Skenario Use Case Pengiriman

Aktor Sistem
1. Admin mengecek konfirmasi
pembayaran dengan
mengakses halaman
konfirmasi.
2. Menampilkan daftar konfirmasi
pembayaran.
3. Mengecek pemesanan user.

7. Tabel Skenario Use Case Login Admin

Nama Use Case : Login Admin

Aktor : Admin

Tujuan : Proses Validasi Akun Admin

 58

Deskripsi : Admin melakukan login seperti memasukan username dan

password.

Tabel 4.7
Tabel Skenario Use Case Login Admin

Aktor Sistem
1. Menginput nama username
dan password.
2. Memproses username dan
password pada sistem data base.
3. Jika akun terdaftar (data valid),
maka secara otomatis akan
masuk ke halaman admin, jika
tidak ada data yang dimaksud
(data invalid), maka sistem akan
kembali ke halaman login admin.
4. Menampilkan halaman admin
5. Masuk halaman utama admin

[Link] Activity Diagram

1. Aktivity Diagram Katalog Obat

Gambar 4.7 Activity Diagram Katalog Obat

 59

2. Activity Diagram Login Admin

Gambar 4.8 Activity Diagram Login Admin

3. Activity Diagram Registrasi Member

Gambar 4.9 Activity Diagram Registrasi Member

 60

4. Activity Diagram Login Member

False

Gambar 4.10 Activity Diagram Login Member

5. Activity Diagram Pemesanan Obat

Gambar 4.11 Activity Diagram Transaksi Pemesanan Obat

 61

6. Activity Diagram Konfirmasi Pembayaran

False

True

Gambar 4.12 Activity Diagram Sistem Konfirmasi Pembayaran

7. Activity Diagram Pengiriman

Gambar 4.13 Activity Diagram Pengiriman

 62

[Link] Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di

sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang

digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal

(waktu) dan dimensi horizontal (objek-objek yang terkait).

Berikut ini adalah Sequence Diagram yang ada pada sistem penjualan di

Rumah Herbal AL-DAWA :

1. Sequence Diagram User Non Member Lihat Katalog Obat

User masuk kehalaman utama website dan user hanya bisa melihat obat,

tetapi tidak bisa melakukan pemesanan obat.

Gambar 4.14 Sequence Diagram Non Member yang Diusulkan

2. Sequence Diagram Registrasi Member

Apabila pelanggan atau user ingin melakukan pemesanan, seorang user harus

melakukakn proses registrasi terlebih dahulu.

 63

Gambar 4.15 Sequence Diagram Registrasi Member yang Diusulkan

3. Sequence Diagram Login Member

User member masuk ke halaman utama website. Apabila user ingin

melakukan pemesanan, maka user masuk kehalaman login member dengan

memasukan email dan password, jika berhasil login maka user akan masuk ke

halaman menu utama member dimana user bisa melakukan pemesanan obat

yang tersedia secara online.

 64

Gambar 4.16 Sequence Diagram Login Member yang Diusulkan

4. Sequence Diagram Pemesanan Obat

User member masuk ke halaman utama website. user masuk kehalaman login

member dengan memasukan email dan password, jika berhasil login maka

user akan masuk ke halaman menu utama member.

 65

Gambar 4.17 Sequence Diagram Pemesanan Obat yang Diusulkan

5. Sequen Diagram Konfirmasi Transaksi Pembayaran

Seorang member masuk ke dalam menu utama. Dan melakukan konfirmasi

pembayaran apabila telah melakukan pemesanan obat. jika konfirmasi

pembayaran valid, maka disimpan ke tabel konfirmasi.

 66

Gambar 4.18 Sequence Diagram Konfirmasi Transaksi Pembayaran

6. Sequence Diagram Pengiriman

Apabila user member telah melakukan konfirmasi pembayaran maka admin

akan mengirim obat yang telah dipesan oleh user.

Gambar 4.19 Sequence Diagram Pengiriman Yang Diusulkan

 67

7. Sequence Diagram Login Admin

Admin melakukan login dengan memasukan username dan password, jika

berhasil login maka admin akan masuk kehalaman utama admin.

Gambar 4.20 Sequence Diagram Login Admin yang Diusulkan

[Link] Collaborasi Diagram

Secara fungsional digram ini hampir mirip dengan sequence diagram.

Collaboration diagram memfokuskan pada interaksi dan hubungan diantara

sekumpulan objek yang berkolaborasi.

Berikut bentuk – bentuk collaboration diagram yang diusulkan :

1. Collaborasi Diagram Lihat Katalog Obat

User masuk kehalaman utama website dan user hanya bisa melihat obat,

tetapi tidak bisa melakukan pemesanan obat.

 68

Gambar 4.21 Collaborasi Diagram Non Member

2. Collaborasi Diagram Registrasi Member

Apabila pelanggan atau user ingin melakukan pemesanan, seorang user harus

melakukakn proses registrasi terlebih dahulu.

Gambar 4.22 Collaborasi Diagram Proses Registrasi Member

3. Collaborasi Diagram Login Member

User member masuk ke halaman utama website. user masuk kehalaman login

member dengan memasukan email dan password, jika berhasil login maka

user akan masuk ke halaman menu utama member.

 69

Gambar 4.23 Collaborasi Diagram Proses Login Member

4. Collaborasi Diagram Transaksi Pemesanan Obat

Jika berhasil login maka user akan masuk ke halaman menu utama member

dimana user bisa melakukan pemesanan obat yang tersedia secara online.

Gambar 4.24 Collaborasi Diagram Proses Transaksi Pemesanan

5. Collaborasi Diagram Konfirmasi Pembayaran

Seorang member masuk ke dalam menu utama. Dan melakukan konfirmasi

pembayaran apabila telah melakukan pemesanan obat. jika konfirmasi

pembayaran valid, maka disimpan ke tabel konfirmasi.

 70

Gambar 4.25 Collaborasi Diagram Proses Konfirmasi Pembayaran

6. Colaborasi Diagram Login Admin

Admin melakukan login dengan memasukan username dan password, jika

berhasil login maka admin akan masuk kehalaman utama admin.

Gambar 4.26 Colaborasi Diagram Proses Login Admin

7. Collaborasi Diagram Pengiriman

Apabila user member telah melakukan konfirmasi pembayaran maka admin

akan mengirim obat yang telah dipesan oleh user.

 71

Gambar 4.27 Collaborasi Diagram Proses Pengiriman

[Link] Class Diagram

Class diagram mendepkripsikan jenis - jenis objek dalam sistem dan

berbagai macam hubungan statis yang terdapat diantara mereka. Class diagram

juga menunjukan property dan operasi sebuah class dan batasan - batasan yang

terdapat dalam hubungan - hubungan objek tersebut. Berikut Class Diagram pada

Rumah Herbal AL-DAWA yang diusulkan :

 72

Gambar 4.28 Class Diagram Yang Diusulkan

[Link] Object Diagram

Diagram objek dalam Unified Modeling Language (UML), adalah

diagram yang menunjukkan pandangan yang lengkap atau sebagian dari struktur

suatu model sistem pada waktu tertentu.

Diagram Objek pada khusus mengatur tentang objek contoh dan atribut ,

dan hubungan antara contoh. Sebuah berkorelasi set diagram objek memberikan

wawasan tentang bagaimana pandangan wewenang dari sistem diharapkan untuk

berevolusi dari waktu ke waktu. Diagram objek lebih konkrit dari diagram kelas ,

dan sering digunakan untuk memberikan contoh, atau bertindak sebagai uji kasus
 73

untuk diagram kelas. Berikut adalah Object Diagram pada Rumah Herbal AL-

DAWA yang di usulkan :

Gambar 4.29 Object Diagram Yang Diusulkan

[Link] Component Diagram

Component adalah unit fisik yang nyata yang menjadi bagian dari

deployment independent. Component ini diimplementasikan meskipun pada

sistem yang kecil.

Component Diagram yang ada terbagi menjadi 3 komponen yaitu

Component Diagram Admin Web, Component Diagram Member dan Component

Diagram Non Member.

 74

1. Componen Diagram Admin Website

Gambar 4.30 Component Diagram Admin

2. Component Diagram Non Member

Gambar 4.31 Component Diagram Non Member

 75

3. Component Diagram Member

Gambar 4.32 Component Diagram Member

[Link] Deployment Diagram

Diagram ini memperlihatkan pemetaan software kepada hardware.

Diagram ini menggambarkan detail bagaimana komponen deployment dalam

infrastruktur sistem. Asumsi yang digunakan pada perangkat lunak ini memakai

sistem yang stand alone, artinya tidak ada satu komponen pun yang akan dibagi

pakai (sharing) dengan aplikasi web yang lain, oleh karena itu tidak perlu

applikasi server terpisah.

Permintaan Halaman Web Server

Web Browser
 Apache
 Internet Explore
 Google Crom

Permintaan Koneksi Database

Database Server
 MySQL Database

Gambar 4.33 Deployment Diagram

 76

4.2.4 Perancangan Antar Muka

Perancangan antar muka ini bertujuan untuk memberikan tentang desain

program yang akan dibuat. Berikut ini Terdapat desain pada tampilan program

yang akan di buat.

[Link] Struktur Menu

Strutkur menu dari Perancangan Sistem Informasi Penjualan Online

Berbasis Web ini dapat dilihat pada gambar sebagai berikut:

Gambar 4.34 Perancangan Antar Muka Halman Depan

 77

[Link] Perancangan Input

Perancangan input merupakan tampilan yang digunakan untuk pemasukan

informasi yang diperlukan oleh sistem. Perancangan input terdiri dari 3, yaitu

perancangan input admin, perancangan input non member, dan perancangan input

member.

1. Perancangan Input Admin

a. Form Login Admin

Perancangan input login ini merupakan tahapan sebelum masuk kehalaman

admin dimana Admin dapat melakukan perubahan pada content website

Rumah Herbal AL-DAWA. Jika username atau password tidak diisi atau

salah maka Admin akan di kembalikan kembali kepada halaman login.

Login Admin

Username XXXXXXXX

Password xxxxxxxxx

LOGIN

Gambar 4.35 Perancangan Input Login Admin

b. Form Input Kategori Obat

Form input kategori obat digunakan Admin untuk menambah Kategori

Obat pada Rumah Herbal AL-DAWA.

 78

Nama Kategori XXXXXXXX

Keterangan XXXXXXXXXXXXXXXXXXX

Simpan Batal

Gambar 4.36 Perangan input Kategori Obat

c. From Input Obat

Form input obat digunakan Admin untuk menambah obat pada Rumah

Herbal AL-DAWA.

Gambar Obat Pilih Berkas

No
Image

Kode Obat XXXXXX

Nama Obat XXXXXXXX

Kategori Obat XXXXXXXXXX

Harga Obat XXXXXXX

Stok Obat XXX

Isi Obat XX
Keterangan XXXXXXXXXXXXXX

Simpan Batal

Gambar 4.37 Perancangan Input Form Input Obat

 79

d. From Input Stok dan Harga

Form input stok dan harga obat digunakan Admin untuk menambah dan

mengubah stok dan harga Obat pada Rumah Herbal AL-DAWA.

Kode Obat XXXX

Harga XXXXXXX

Jumlah XXX

Tambah Batal

Gambar 4.38 Perancangan Input Form Input Stok

e. From Konfirmasi

Form input konfirmasi digunakan oleh admin untuk memvalidasi dan

mengirim barang apabila member telah melakukan konfirmasi pembayaran.

No Id Transaksi Pemilik Rek No Rek Jumlah Option

Kirim

X XXXXX XXXXX XXX XXX Detail Valid

X XX XX Kirim
X
X
X
Gambar 4.39 Form Konfirmasi

2. Perancangan Input Non Member

a. Registrasi Member

Form Registrasi Member ini Digunakan untuk non-member melakukan

registrasi Member.
 80

Registrasi

Nama XXXXXX

Alamat XXXXXXXXXXXXXXXXXXXXX

Kota XXXXXXXXX

Provinsi XXXXXXXXX
Kode Pos XXXXXXX
Telepon XXXXXXXXXXXXX
Email XXXXXXXXXXXX
Password XXXXXXXX

Ulangi Password XXXXXXXX

Daftar Ulang

Gambar 4.40 Perancangan Input Registrasi Member

3. Perancangan Input Member

a. Form Login Member

Perancangan input login ini merupakan tahapan selanjutnya setelah

melakukan pendaftaran registrasi baru. Pada halaman ini Member diminta

untuk mengisikan email dan password yang benar untuk dapat melakukan

proses selanjutnya.
 81

Login Anggota

Email XXXXXXXXXX

Password XXXXXXXXXXXX

LOGIN

Lupa Password Daftar Baru

Gambar 4.41 Perancangan Input Form Login Member

b. Form Keranjang

Form keranjang, digunakan Member melakukan pemesanan obat, sesuai

keinginan member.

Keranjang

Nama Obat Kode Obat Harga Satuan Qity Subtotal Harga Option

XXXXX XXXXX XXXXX X XXXXX Hapus

X
X Update Keranjang
X
X
Total XXXXX

Pengiriman XXXXX XX
XX
Grand Total XXXXX X

Lanjutkan Berbelanja Checkout

Gambar 4.42 Perancangan Input Form Keranjang

 82

c. Form Konfirmasi Pembayaran

Form konfirmasi pembayaran ini merupakan tahapan selanjutnya setelah

Member melakukan pemesanan obat. Member melakukan pengisian di

form keranjang pembayaran setelah melakukan pembayaran.

Konfirmasi Pembayaran
No. Pesanan XXXXXXXX
Cara Pembayaran
XXXXXXXXXX
Bank XXXXXXXX
Pemilik Rekening XXXXXXX
No. Rekening XXXXXXXXXX
Jml. Pembayaran XXXXXXXXX
Rekening Tujuan XXXXXXXXX

Kirim Reset

Gambar 4.43 Perancangan Input Konfirmasi Pembayaran

[Link] Perancangan Output

1. Perancangan Output Admin

a. Form Daftar Kategori

Form daftar kategori merupakan form yang menampilkan kategori obat

setelah penginputan di form Input kategori.

 83

No Nama Kategori Keterangan Option

X XXXXX XXXXX Ubah Hapus

X
X
X
X Gambar 4.44 From Daftar Kategori

b. Form Daftar Produk

Form daftar produk merupakan form yang menampilkan obat setelah

penginputan di form Input obat.

No Kode Nama Kategori Harga Isi Stok Option

obat obat

X XXXXX XXXXX XXXXX XXXXX XX XX Ubah Hapus

X XX XX
X X X
X
X Gambar 4.45 From Daftar Produk

c. From Daftar Transaski

Pada Tampilan Daftar Transaksi, admin dapat melihat daftar Transaksi

dengan status “Lunas”.

No Id Pemesanan Total bayar Status Option

transaksi

X XXXXX XXXXX XXXXX XXXXX Detail

X
X
X Gambar 4.46 From Daftar Transaksi
X
 84

d. Form Daftar Kofirmasi

Pada Tampilan Daftar Konfirmasi, admin dapat melihat daftar Konfirmasi

pada website Rumah Herbal AL-DAWA dengan status barang sudah

dikirim.

No Id Pemilik No Jumlah Status Option

transaksi rekening rekening kirim

X XXXXX XXXXX XXXXX XXXXX XXXXX Detail

X
X
X Gambar 4.47 From Daftar Konfirmasi
X
e. Form Daftar Pesan

Form daftar pesan merupakan form yang menampilkan pesan yang telah

ditanggapi oleh admin.

No Nama Email Tanggal Status

X XXXXX XXXXX XXXXX Detail

X
X
X Gambar 4.48 From Daftar Pesan
X
f. Daftar User

Form daftar user merupakan form yang menampilkan user dengan status

aktif.
 85

No Nama Email Status Option

X XXXXX XXXXX XXXXX Detail Blokir

X
X
X
Gambar 4.49 From Daftar User
X
2. Perancangan Output Non Member

a. Form Kategori Obat

Pada Tampilan Kategori Obat ini ditampilkan kategori yang tersedia di

Website Rumah Herbal AL-DAWA.

Kategori Obat

Seluruh kategori
Produk Formula
Produk Tunggal

Gambar 4.50 Perancangan Output Katalog Obat

b. Katalog Obat

Pada Tampilan katalog Obat ini ditampilkan seluruh obat yang tersedia di

Website Rumah Herbal AL-DAWA.

 86

Katalog Obat

1 2 Selajutnya >>

Gambar 4.51 Perancangan Output Katalog Obat

3. Perancangan Output Member

a. Data Pemesanan Barang

Pada Tampilan Daftar Kerajang ini ditampilkan informasi pemesanan

obat yang telah dilakukan.

 87

Pemesanan anda dengan Id 311211.0421.101 telah kami terima. Dengan detail

Nama Obat Kode Obat Harga Satuan Qity Subtotal Harga Option

XXXXX XXXXX XXXXX X XXXXX Hapus

X
X
Total XXXXX
X
X
Pengiriman XXXXX

Grand Total XXXXX

Gambar 4.52 Perancangan Output Data Pemesanan Barang

b. Data Konfirmasi Pembayaran

Pada Tampilan Daftar konfirmasi Pembayaran ini ditampilkan informasi

konfirmasi pembayaran yang telah dilakukan.

Keranjang

Konfirmasi anda dengan detail

Id Transaksi : XXXXX
Cara Pembayaran : XXXXX
Bank : XXXXX
Pemilik rek : XXXXX
No Rekening : XXXXX
Jumlah Pengiriman : XXXXX

Gambar 4.53 Perancangan Output Data Keranjang

 88

4.2.5 Perancangan Arsitek Jaringan

Adapun perancangan arsitek jaringan untuk mendukung program ini

adalah sebagai berikut seperti gambar dibawah ini :

Internet

Gambar 4.54 Perancangan Arsitek Jaringan