22
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.
c. Pengiriman Barang
23
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 8. Input produk
24
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. Member
Registrasi
Admin
Login
Lihat Data Pelanggan
Data Akun
Gambar 3.3 DFD tingkat 2 Proses Registrasi dan Login
25
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 barang baru akan langsung masuk ke data barang.
26
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 sebelumnya sesuai dengan data yang telah diperbarui.
27
3.2
Flowchart Mulai
Info website
Login Akun tidak
Data Pelanggan?
tidak
ya
kesalahan 3 kali?
Info produk
Memilih Produk
ya
Update Barang Belanja
Memilih Produk Lagi?
ya
tidak
Transaksi
Selesai
Gambar 3.7 Flowchart tahap 1 Proses pada Pelanggan
Jika login akun Member tidak sesuai dengan data akun maka akan kembali ke halaman home.
28
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
Info website
Login Admin tidak
tidak Data Admin?
ya kesalahan 3 kali? Info admin panel
ya
tidak Tranfer Diterima?
ya
Update Data Pemesanan
Info admin panel
Selesai
29
Gambar 3.8 Flowchart 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
Login Username
Password
DESKRIPSI
Login Register
Produk Twitter
Gambar 3.9 LKT halaman Home atau halaman utama
30
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
2. Home Sesudah login
31
HOME
GAMBAR HEADER
Login Anda login sebagai..... Logout
DESKRIPSI Produk
Twitter
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 oleh admin pada kolom sebelah kanan
32
3. Produk sebelum login PRODUK
GAMBAR HEADER
PRODUK
Login Username
Gambar
(Keterangan singkat produk)
Login Register Beli
Polling Kesukaan
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 pada kolom sebelah kanan bawah.
33
4. Produk setelah login Produk
Gambar
Produk Profil Anda login sebagai....
Photo
Logout.
P olling kesukaan
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 admin.
34
-
Pelanggan
juga
dapat
mengisi
tingkat
kesukaan pelanggan lewat polling kesukaan pada kolom sebelah kanan bawah.
5. Detail produk Produk
Gambar
Produk Profil Anda login sebagai....
Photo
Logout.
Keterangan Produk
U pdate S tock
Ukuran: photo
Jumlah beli B e li Kembali...
keterangan
Gambar 3.13 LKT halaman Detail Produk
Navigasi:
Klik Beli untuk membeli produk.
Klik Kembali untuk kembali ke Menu produk.
35
Keterangan: -
Setelah klik
selengkapnya pelanggan bisa
memilih ukuran dan jumlah produk yang akan dibeli.
6. Tentang ABOUT
GAMBAR HEADER
TENTANG
PETA
Photo
Twitter
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 admin pada kolom kanan.
36
7. Register Register
GAMBAR HEADER
Masukkan identitas: Nama: Password: Nama lengkap: Email: Alamat lengkap:
Produk
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 mempermudah transaksi pembelian produk.
37
8. Admin Home Admin
Profil Anda login sebagai.... Logout.
Diagram
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
pemberitahuan
mengetahui tentang
segala
website,
seperti
jumlah user, jumlah produk, jumlah order, dan jumlah user yang sedang online. -
Diagram
digunakan
sebagai
mengenai informasi website saat ini.
gambaran
38
9. Daftar Akun Home Admin
Username Password Email Namalengkap
Alamatlengkal
Jeniskelamin TanggalRegistrasi
Profil
Opsi
Anda login sebagai.... Hapus
Logout.
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.
10. Daftar Produk
39
Daftar Produk Nama Barang
Gambar
Tambah Produk
Kode
Bahan
Tanggal input
Opsi
Profil Anda login sebagai....
Gambar
Hapus
Logout.
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.
11. Tambah Produk
40
Daftar Produk Nama Barang
Profil Anda login sebagai....
Kode
Logout.
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 telah disediakan.
41
-
Setelah klik simpan maka tampilan halaman utama akan otomatis diperbarui sesuai dengan produk yang telah dimasukan.
12. Daftar Order / Pemesanan Daftar Produk Nama Jumlah Order Status
Opsi
Profil Anda login sebagai.... Logout.
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.
Admin dapat menghapus daftar pemesanan dari pelanggan yang telah menyelesaikan transaksi
42
