Desember 2015 - WordPress.com · iii DAFTAR ISI KATA PENGANTAR..... iii
BAB III. PERANCANGAN SISTEM 3.1 Rancangan...
-
Upload
nguyendiep -
Category
Documents
-
view
235 -
download
0
Transcript of BAB III. PERANCANGAN SISTEM 3.1 Rancangan...
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.
Registrasi Login Lihat Data Pelanggan
Member Admin
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
Data Pelanggan?
Selesai
Memilih Produk
Update BarangBelanja
Info produk
ya
tidak
Transaksi
Memilih ProdukLagi?
ya
tidak
kesalahan3 kali?
ya
tidak
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
Login Admin
Data Admin?
tidak
ya
Info admin panel
Selesai
Tranfer Diterima?
Info admin panel
tidak
ya
Update DataPemesanan
Info website
kesalahan3 kali?
ya
tidak
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
DESKRIPSI
LoginUsername
Password
Login Register
Produk
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
DESKRIPSI
LoginAnda 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
oleh admin pada kolom sebelah kanan
32
3. Produk sebelum login
PRODUK
GAMBAR HEADER
LoginUsername
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
pada kolom sebelah kanan bawah.
33
4. Produk setelah login
Polling kesukaan
ProfilAnda 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
admin.
34
- Pelanggan juga dapat mengisi tingkat
kesukaan pelanggan lewat polling kesukaan
pada kolom sebelah kanan bawah.
5. Detail produk
Update S tock
ProfilAnda 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.
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
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
admin pada kolom kanan.
36
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
mempermudah transaksi pembelian produk.
37
8. Admin
Home Admin
Profil
Diagram
Anda login sebagai....
Logout.
ProfilUser
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
mengenai informasi website saat ini.
38
9. Daftar Akun
Home Admin
ProfilAnda login sebagai....
Logout.
Username Password Email Namalengkap Alamatlengkal Jeniskelamin TanggalRegistrasi 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.
10. Daftar Produk
39
Daftar Produk
ProfilAnda login sebagai....
Logout.
Nama Barang Gambar Kode Bahan Tanggal input Opsi
HapusGambar
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.
11. Tambah Produk
40
Daftar ProdukProfil
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
telah disediakan.
41
- Setelah klik simpan maka tampilan halaman
utama akan otomatis diperbarui sesuai dengan
produk yang telah dimasukan.
12. Daftar Order / Pemesanan
Daftar ProdukProfil
Anda login sebagai....
Logout.
Nama Jumlah Order Status 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.
Admin dapat menghapus daftar pemesanan dari pelanggan yang telah menyelesaikan transaksi
42