BAB III.
PERANCANGAN SISTEM
3.1 Rancangan DFD
Diagram arus data dari sistem informasi website CV
Saint De Valo terdiri dari :
a. Registrasi dan Login
Proses ini merupakan proses awal ketika user
mengakses website. Untuk dapet mengkses seluruh
informasi dari website, user wajib memiliki akun.
Dalam proses ini Admin dapat mengetahui informasi
data pribadi user sesuai dengan informasi yang
dimasukan pada saat registrasi.
b. Pemesanan Barang
User yang telah memiliki akun di website dapat
memilih dan berbelanja produk – produk dari CV Saint
De Valo . Sedangkan User yang belum mempunyai
akun diwajibkan membuat akun untuk dapat memesan
barang. Pada bagian ini Admin bertugas untuk
memperbarui informasi barang sesuai stok barang yang
tersedia.
Pemesanan barang pada website akan dikonfirmasi
oleh Admin setelah Member menyelesaikan transaksi.
Kemudian barang langsung dikirim. Nomor resi
pengiriman barang akan diinformasikan ke Email
Member.
Gambar 3.1 DFD tingkat 0 Website CV Saint De Valo
Keterangan:
Data yang mengalir dari atau ke Pelanggan :
1. Username dan password.
2. Data konfirmasi login.
3. Info produk.
Data yang mengalir dari atau ke Admin :
4. Username dan password.
5. Data identitas pelanggan.
6. Data pemesanan barang
7. Daftar barang dan stok barang
Gambar 3.2 DFD tingkat 1 Website CV Saint De Valo
Pada gambar 3.2 terlihat arus data yang mengalir pada
website CV Saint De Valo.
Registrasi Login Lihat Data
Pelanggan
Member Admin
Data Akun
Pada gambar 3.3 terlihat Pelanggan yang melakukan
registrasi seluruh datanya akan masuk ke data akun.
Member yang login akan mendapatkan konfirmasi
ketika sudah berhasil melakukan login. Untuk dapat
melihat data member, Admin harus login dengan akun
miliknya. Hak akses sebagai Admin adalah dapat
melihat data identitas pelanggan.
Gambar 3.4 DFD tingkat 2 Proses Pemesanan Barang
Pada gambar 3.4 Member yang memilih produk
merupakan data yang berasal dari data barang. Produk
yang telah dipilih akan langsung masuk ke data
pemesanan, sehingga Admin dapat melihat daftar
pemesanan dari Member. Admin yang memasukan data
Ketika Admin mengubah info barang maka perubahan
data info barang akan langsung diperbarui pada data
barang.
Gambar 3.5 DFD tingkat 2 Proses Pengiriman Barang
Pada gambar 3.5 Member yang telah menyelesaikan
transaksi sesuai barang yang dipesan, berikutnya
pesanan akan dikonfirmasi oleh Admin. Kemudian
barang akan dikirim menuju ke tempat Member.
Barang yang telah dikirim akan mengubah data barang
3.2 Flowchart
Mulai
Info website
Login Akun
Data Pelanggan?
Selesai
Memilih Produk
Update Barang Belanja
Info produk ya
tidak
Transaksi Memilih Produk
Lagi?
ya
tidak
kesalahan 3 kali?
ya tidak
Gambar 3.7Flowchart tahap 1 Proses pada Pelanggan
Jika login akun Member tidak sesuai dengan data akun
Jika login berhasil Member dapat memilih produk dan
mengetahui info produk yang akan dibeli.
Jika Member telah menyelesaikan transaksi maka berikutnya barang yang dipesan akan dikonfirmasi dan
dikirim.
Mulai
Login Admin
Data Admin?
tidak
ya
Info admin panel
Selesai
Tranfer Diterima?
Info admin panel tidak
ya
Update Data Pemesanan
Info website
kesalahan 3 kali?
Gambar 3.8Flowchart tahap 1 Proses pada Admin
Jika login akun Admin tidak sesuai dengan data akun
maka akan kembali ke halaman home.
Jika transaksi sudah diselesaikan pihak Member maka
Admin akan mengkonfirmasi pesanan barang Member.
3.3 LKT (Lembar Kerja Tampilan)
Perancangan antarmuka website CV Saint De Valo
digambarkan seperti ini :
1. Home sebelum login
HOME
GAMBAR HEADER
DESKRIPSI
Login Username
Password
Login Register
Produk
Navigasi:
Klik Login untuk dapat mengakses belanja
selanjutnya,jika user belum mempunyai
Username harus melakukan Register terlebih
dahulu dengan klik Register.
Klik beli untuk memilih produk yang akan
dibeli.
Keterangan:
- Pada tampilan halaman home, user akan
dihadapkan pada deskripsi tentang perusahaan
serta nomer telepon.
- Produk – produk yang telah dipasang oleh
admin pada kolom sebelah kanan
- Sosial media yang akan selalu diperbaharui
oleh admin pada kolom sebelah kanan
HOME
GAMBAR HEADER
DESKRIPSI
Login
Anda login sebagai...
Logout
Produk
Gambar 3.10 LKT halaman Home setelah login
Navigasi:
Klik Logout untuk keluar dari akun dan
mengkahiri akses.
Keterangan:
- Pada tampilan halaman home setelah login,
user akan dihadapkan pada deskripsi tentang
perusahaan serta nomer telepon.
- Produk – produk yang telah di pasang oleh
admin pada kolom sebelah kanan
- Sosial media yang akan selalu diperbaharui
3. Produk sebelum login
PRODUK
GAMBAR HEADER
Login Username
Login Register
Polling Kesukaan
PRODUK
Gambar
Beli
(Keterangan singkat produk)
Gambar 3.11 LKT halaman Produk
Navigasi:
Klik Beli untuk membeli produk.
Keterangan:
- Pada halaman berisi produk – produk CV
Saint De valo yang telah diperbaharui oleh
admin.
- Pelanggan tidak bisa beli apabila belum login.
- Pelanggan juga dapat mengisi tingkat
kesukaan pelanggan lewat polling kesukaan
4. Produk setelah login
P o llin g ke su ka a n
Profil
Anda login sebagai....
Logout.
Produk
Gambar
Produk
Photo
Keterangan Produk
Selengkapnya..
Gambar 3.12 LKT halaman Produk
Navigasi:
Klik selengkapnya untuk melihat detail
keterangan produk.
Keterangan:
- Pada halaman berisi produk – produk CV
Saint De valo yang telah diperbaharui oleh
- Pelanggan juga dapat mengisi tingkat
kesukaan pelanggan lewat polling kesukaan
pada kolom sebelah kanan bawah.
5. Detail produk
U p d a te S to ck
Profil
Anda login sebagai....
Logout.
Produk
Gambar
Produk
Photo Keterangan Produk
B e l i
photo
keterangan Ukuran:
Jumlah beli
Kembali...
Gambar 3.13 LKT halaman Detail Produk
Navigasi:
Klik Beli untuk membeli produk.
Keterangan:
- Setelah klik selengkapnya pelanggan bisa
memilih ukuran dan jumlah produk yang akan
dibeli.
6. Tentang
ABOUT
GAMBAR HEADER
Photo
TENTANG
PETA
Gambar 3.12 LKT halaman About / Tentang
Keterangan:
Peta tempat admin tinggal
Pelanggan juga bisa melihat photo admin
pada kolom kanan
Pelanggan bisa melihat update Twitter dari
7. Register
Register
GAMBAR HEADER
Produk
Masukkan identitas: Nama:
Password:
Nama lengkap:
Email:
Alamat lengkap:
Jenis kelamin:
kode captcha
Register
Gambar 3.13 LKT halaman Register
Navigasi:
Klik Register untuk memyimpan dan
membuat akun baru.
Keterangan:
- Pelanggan yang belum mempunyai akun
harus membuat akun dengan mengisi data diri
lengkap pada kolom yang disediakan untuk
8. Admin
Home Admin
Profil
Diagram
Anda login sebagai....
Logout.
Profil
User Produk Jumlah Order User Online
Gambar 3.14 LKT halaman Admin
Navigasi:
Klik Logout untuk keluar dari akun admin
dan mengakhiri akses.
Keterangan:
- Admin dapat mengetahui segala
pemberitahuan tentang website, seperti
jumlah user, jumlah produk, jumlah order,
dan jumlah user yang sedang online.
- Diagram digunakan sebagai gambaran
9. Daftar Akun
Home Admin
Profil
Anda login sebagai....
Logout.
Username Password EmailNamalengkapAlamatlengkal JeniskelaminTanggalRegistrasi Opsi
Hapus
Gambar 3.15 LKT halaman Daftar Akun
Navigasi:
Klik Hapus untuk menghapus akun dari
database.
Keterangan:
- Admin dapat menghapus akun Pelanggan
yang sudah tidak digunakan lagi oleh
Pelanggan.
Daftar Produk
Profil
Anda login sebagai....
Logout.
Nama Barang Gambar Kode Bahan Tanggal input Opsi
Hapus
Gambar
Tambah Produk
Gambar 3.17 LKT halaman Daftar Produk
Navigasi:
Klik Hapus untuk menghapus produk dari
database.
Klik Tambah Produk untuk menambah
produk baru.
Keterangan:
- Halaman ini berfungsi sebagai halaman untuk
mengatur produk-produk dari CV Saint De
Valo.
- Admin dapat menghapus produk dari website.
- Admin dapat menambah produk baru yang
belum ditampilkan pada website. Setelah klik
tambah produk maka akan diarahkan ke
halaman tambah produk.
Daftar Produk
Profil
Anda login sebagai....
Logout. Nama Barang
Kode
Bahan
Harga
Gambar Produk
Telusuri.. Tidak Ada berkas dipilih..
Keterangan:
Simpan
Gambar 3.18 LKT halaman Tambah Produk
Navigasi:
Klik Simpan untuk menyimpan info produk. Klik telusuri untuk memilih gambar produk
yang akan digunakan.
Klik Tambah Produk untuk menambah
produk baru.
Keterangan:
- Admin dapat memasukan produk baru ke
website dengan cara memasukan segala
informasi tentang produk beserta dengan
gambar produk sesuai dengan kolom yang
- Setelah klik simpan maka tampilan halaman
utama akan otomatis diperbarui sesuai dengan
produk yang telah dimasukan.
12.Daftar Order / Pemesanan
Daftar Produk
Profil
Anda login sebagai....
Logout.
Nama Jumlah OrderStatus Opsi
Lihat Hapus
Gambar 3.20 LKT halaman Daftar Order
Navigasi:
Klik Lihat untuk melihat data pemesanan
yang masuk.
Klik Hapus untuk menghapus data pemesanan
dari database.
Keterangan:
- Halaman ini berfungsi untuk melihat daftar
pesanan yang telah dilakukan oleh Pelanggan.
