bab iii perancangan sistem 3.1 rancangan...
TRANSCRIPT
21
BAB III.
PERANCANGAN SISTEM
3.1 Rancangan DFD
Diagram arus data dari sistem informasi website
Toko Nusantara 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 Pelanggan sesuai dengan informasi yang
dimasukan pada saat registrasi.
b. Pemesanan Barang
Pelanggan yang telah memiliki akun di website dapat
memilih dan berbelanja produk Toko Nusantara.
Sedangkan Pelanggan 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.
22
c. Pengiriman Barang
Pemesanan barang pada website akan dikonfirmasi
oleh Admin setelah Pelanggan menyelesaikan
transaksi. Kemudian barang langsung dikirim. Nomor
resi pengiriman barang akan diinformasikan ke nomor
Pelanggan.
d. Pertanyaan dan Testimoni
Pelanggan dipersilahkan untuk bertanya pada Admin.
Pada proses ini Pelanggan dan Admin dapat saling
berinteraksi dalam kolom dialog.
W ebsite
Toko Nusantara
Pelanggan A dm in
123456
78
109
1112
Gambar 3.1 DFD tingkat 0 Website Toko Nusantara
Keterangan:
Data yang mengalir dari atau ke Pelanggan :
1. Username dan password.
2. Data konfirmasi login.
3. Info produk.
4. Status konfirmasi barang.
5. Pertanyaan dan testimoni.
Data yang mengalir dari atau ke Admin :
6. Username dan password.
23
7. Data identitas pelanggan.
8. Data pemesanan barang
9. Konfirmasi pemesanan
10. Daftar barang dan stok barang
11. Input produk dan ubah info produk
12. Jawaban pertanyaan pelanggan
Data Barang
Registrasi
danLogin
1.
-----------
Pemesanan
Barang
2.
-----------
Pengiriman
Barang
3.
-----------Pertanyaan
dan Testimoni
4.
-----------
Pelanggan Admin
Data Akun
1
2 3
4
5
Data Pemesanan Data Komentar
6 7 8 9 10 11 12
1 23 4
56 78 910 11
12
Gambar 3.2 DFD tingkat 1 Website Toko Nusantara
Pada gambar 3.2 terlihat arus data yang mengalir pada
website Toko Nusantara.
24
Registrasi
Pelanggan
1.1
-----------
Login
1.2
-----------Lihat
Data Pelanggan
1.3
-----------
Ubah
Data Pelanggan
1.4
-----------
Pelanggan Admin
Data Akun
Gambar 3.3 DFD tingkat 2 Proses Registrasi dan Login
Pada gambar 3.3 terlihat Pelanggan yang melakukan
registrasi seluruh datanya akan masuk ke data akun.
Pelanggan yang login akan mendapatkan konfirmasi
ketika sudah berhasil melakukan login. Untuk dapat
melihat data pelanggan Admin harus login dengan
akun miliknya. Hak akses sebagai Admin adalah dapat
melihat data identitas pelanggan dan mengubah data
pelanggan.
Memilih P roduk
2.1
-----------Input
Data Barang
2.2
-----------
Ubah Info barang
2.3
-----------
Lihat Daftar
Pemesanan
2.4
-----------
Pelanggan Admin
Data Barang Data Pemesanan
Gambar 3.4 DFD tingkat 2 Proses Pemesanan Barang
25
Pada gambar 3.4 Pelanggan yang memilih produk
merupakan data yang berasal dari data barang. Produk
yang telah dipilih akan langung masuk ke data
pemesanan, sehingga Admin dapat melihat daftar
pemesanan dari Pelanggan. Admin yang memasukan
data barang baru akan langsung masuk ke data barang.
Ketika Admin mengubah info barang maka perubahan
data info barang akan langsung diperbarui pada data
barang.
Transaksi
3.1
-----------Pemesanan
Dikonfirmasi
3.2
-----------
Barang
Dikirim
3.3
-----------
Pelanggan
AdminData Pemesanan Data Barang
Gambar 3.5 DFD tingkat 2 Proses Pengiriman Barang
Pada gambar 3.5 Pelanggan yang telah menyelesaikan
transaksi sesuai barang yang dipesan, berikutnya
pesanan akan dikonfirmasi oleh Admin. Kemudian
barang akan dikirim menuju ke tempat Pelanggan.
Barang yang telah dikirm akan mengubah data barang
sebelumnya sesuai dengan data yang telah diperbarui.
26
Lihat Komentar
4.1
-----------Tulis Komentar
4.2
-----------
Pelanggan Admin
Data Komentar
Gambar 3.6 DFD tingkat 2 Proses pada bagian Pertanyaan
dan Testimoni
Pada gambar 3.6 Pelanggan dapat bertanya dan
memberikan testimoni dengan menuliskan pada kotak
komentar. Ketika Pelanggan menulis komentar maka
data akan masuk ke data komentar, sehingga komentar
yang telah ditulis Pelanggan dapat dilihat oleh Admin.
Hal ini juga berlaku sebaliknya.
27
3.2 Flowchart
M ula i
In fo webs ite
Log in Akun
Da ta Pe langgan?
Selesai
M e m ilih P ro d u k
U pdate B arang
B elanja
K onfirm asi B arang
In fo p roduk
yatidak
Tra n sa ks i
M e m ilih P ro d u k
L a g i?
ya
tidak
kesa lahan
5 ka li?
ya
tidak
Gambar 3.7 Flowchart tahap 1 Proses pada Pelanggan
28
Jika login akun Pelanggan tidak sesuai dengan data
akun maka akan kembali ke halaman home.
Jika login berhasil Pelanggan dapat memilih produk
dan mengetahui info produk yang akan dibeli.
Jika Pelanggan telah menyelesaikan transaksi maka
berikutnya barang yang dipesan akan dikonfirmasi dan
dikirim.
29
M ula i
Log in Adm in
Da ta Adm in?
tidakya
In fo adm in panel
Selesa i
K o n firm a s i Tra n sa ks i
B a ra n g
Tranfer D iterim a?
In fo adm in panel
tidak
ya
U p d a te D a ta
P e m e sa n a n
In fo webs ite
kesa lahan
5 ka li?
ya
tidak
Gambar 3.8 Flowchart tahap 1 Proses pada Admin
Jika login akun Admin tidak sesuai dengan data akun
maka akan kembali ke halaman home.
30
Jika transaksi sudah diselesaikan pihak Pelanggan
maka Admin akan mengkonfirmasi pesanan barang
Pelanggan.
3.3 LKT (Lembar Kerja Tampilan)
Perancangan antarmuka website Toko Nusantara
digambarkan seperti ini :
1. Home
Login
Usernam e
P assword
Login Register
(gam bar produk)
(keterangan )
beli
(gam bar produk)
(keterangan )
beli
1 .HOM E
Gambar 3.9 LKT halaman Home atau halaman utama
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:
31
- Pada tampilan halaman home, user akan
dihadapkan pada produk-produk yang
ditampilkan berupa gambar dan sedikit info
mengenai produk.
- Untuk user yang belum mempunyai akun
pada website ini maka tidak akan dapat
membeli produk. Sedangkan user yang telah
memiliki akun maka akan diberikan info lebih
detail tentang produk ketika klik beli.
2. Akun
Login
A nda login sebagai..
(gam bar produk)
(keterangan
detil produk
yang d ibeli)
2.A K UN
(gam bar produk)
(keterangan
detil produk
yang d ibeli)
Logout
Gambar 3.10 LKT halaman Akun
Navigasi:
Klik Logout untuk keluar dari akun dan
mengkahiri akses.
Keterangan:
32
- Pelanggan yang telah memesan atau klik beli
akan dapat mengetahui produk apa saja yang
telah dibelinya pada halaman akun.
- Terdapat keterangan status pada keterangan
produk yang dibeli. Status ini berfungsi
sebagai konfirmasi produk yang akan dikirim
ketika transaksi telah diselesaikan oleh pihak
Pelanggan.
3. Tentang Kami
(keterangan tentang
website)(gam bar peta lokasi)
3.TE NTA NG K A M I
F.A .Q
Gambar 3.11 LKT halaman Tentang Kami
Keterangan:
- Pada halaman tentang kami terdapat
penjelasan tentang website Toko Nusantara
pada kotak sebelah kiri.
33
- Untuk Pelanggan yang masih belum
mengetahui lokasi Toko Nusantara disediakan
peta lokasi berdasarkan pada Google Map.
- Pelanggan yang awam akan sering bertanya
tentang tata cara berbelanja pada Admin.
Untuk itu disediakan pertanyaan dan jawaban
(F.A.Q).
4. Kontak
silahkan bertanya...
ketikan kom entar..
4.K ONTA K
(akun twitter)
(akun facebook)
(usernam e pelanggan)
(kom entar)
A dm in
(kom entar balasan)
Reset S im pan
follow
suka
Gambar 3.12 LKT halaman Kontak
Navigasi:
Klik Reset untuk membatalkan tulisan pada
kotak komentar.
Klik Simpan untuk mengirim pesan komentar
yang sudah diketik di kotak komentar.
Klik Follow untuk mengikuti kiriman akun
Twitter.
34
Klik suka untuk mengikuti kiriman akun
Facebook.
Keterangan:
- Pelanggan dapat bertanya dan memberikan
testimoni pada halaman ini. Komentar yang
dituliskan pada kotak komentar akan muncul
pada bagian bawah.
- Terdapat akun Twitter dan Facebook yang
dibuat agar dapat memudahkan pelanggan
jika ingin mengetahui informasi terbaru
tentang produk dari Toko Nusantara.
5. Register
silahkan isi form
registrasi..
5 .RE GIS TE R
*usernam e
*password
*em ail
*nam a lengkap
*alam at lengkap
*nom or handphone
laki-laki
(kode captcha)
*m asukan kode captcha
saya setu ju dengan ketentuan....
Reset S im pan
Gambar 3.13 LKT halaman Register
Navigasi:
35
Klik Reset untuk membatalkan tulisan pada
kotak register.
Klik Simpan 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.
6. Admin
6.A DM IN
K E TE RA NGA NLogin
A nda login sebagai
A DM IN
Logout
(gam bar d iagram )
US E R: ..
P RODUK : ..
JUM LA H ORDE R: ..
US E R ONLINE : ..
Gambar 3.14 LKT halaman Admin
Navigasi:
Klik Logout untuk keluar dari akun admin
dan mengakhiri akses.
Keterangan:
36
- 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.
7. Daftar Akun
usernam e
7.DA FTA R A K UN
ubah
hapus
DA FTA R A K UN TOK O NUS A NTA RA
password em ail nam a
lengkap
alam at
lengkap
gender no.te lp tg l. registrasi opsi
Gambar 3.15 LKT halaman Daftar Akun
Navigasi:
Klik Ubah untuk mengubah info dari akun
Pelanggan.
Klik Hapus untuk menghapus akun dari
database.
Keterangan:
- Admin dapat mengubah data diri atau
informasi pelanggan. Setelah klik ubah maka
37
akan diarahkan ke halaman baru untuk
mengubah informasi pelanggan.
- Admin dapat menghapus akun Pelanggan
yang sudah tidak digunakan lagi oleh
Pelanggan.
8. Edit User
8.E DIT US E R
E DIT US E R,(US E RNA M E )
usernam e
sim pan
batal
password em ail ro le nam a
lengkap
gender no.te lp opsia lam at
lengkap
Gambar 3.16 LKT halaman Edit User
Navigasi:
Klik Simpan untuk menyimpan info akun
(username) yang telah diubah.
Klik Batal untuk membatalkan dan kembali
ke halaman daftar akun.
Keterangan:
- Admin dapat mengubah semua data diri atau
informasi pelanggan. Admin juga dapat
mengubah jenis akun dari Pelanggan menjadi
38
Admin. Setelah klik simpan maka akan
memperbarui informasi pelanggan pada data
user.
9. Daftar Produk
9.DA FTA R P RODUK
(gam bar produk)
nam a barang
ubah
hapus
DA FTA R P RODUK TOK O NUS A NTA RA
gam bar keterangan stok
barang
label harga opsi
+ tam bah produk
ubah
hapus
(gam bar produk)
Gambar 3.17 LKT halaman Daftar Produk
Navigasi:
Klik Ubah untuk mengubah info dari produk.
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 Toko
Nusantara.
- Admin dapat mengubah info dari produk yang
ditampilkan pada website. Hal ini penting
39
karena info barang sangat diperlukan
Pelanggan seperti ketersediaan stok barang,
atau juga perubahan harga.
- 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.
10. Tambah Produk
10.TA M B A H P RODUK
nam a barang
sim pan
batal
TA M B A H P RODUK
gam bar keterangan stok
barang
label harga opsi
+ tam bah produk
browse
Gambar 3.18 LKT halaman Tambah Produk
Navigasi:
Klik Simpan untuk menyimpan info produk.
Klik Batal untuk membatalkan dan kembali
ke halaman daftar produk.
Klik Browse untuk memilih gambar produk
yang akan digunakan.
40
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.
- Setelah klik simpan maka tampilan halaman
utama akan otomatis diperbarui sesuai dengan
produk yang telah dimasukan.
11. Edit Produk
11.E DIT P RODUK
nam a barang
sim pan
TA M B A H P RODUK
gam bar keterangan stok
barang
label harga opsi
+ tam bah produk
browse
Gambar 3.19 LKT halaman Edit Produk
Navigasi:
Klik Simpan untuk menyimpan info produk
yang telah diubah.
41
Klik Browse untuk memilih gambar produk
yang akan digunakan.
Klik Tambah Produk untuk menambah
produk baru.
Keterangan:
- Halaman ini berfungsi untuk memperbarui
informasi stok produk dan harga produk.
Halaman ini juga membantu Admin
mengurangi kesalahan informasi apabila
Admin memasukan informasi produk yang
salah.
- Setelah klik simpan maka informasi produk
yang telah diubah otomatis akan diperbarui
pada data barang.
12. Daftar Order / Pemesanan
12.DA FTA R ORDE R
nam a
lihat
hapus
DA FTA R ORDE R TOK O NUS A NTA RA
jum lah order tg l. order opsi
Gambar 3.20 LKT halaman Daftar Order
42
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.
13. Lihat Order / Pemesanan
13.LIHAT ORDE R
nam a barang
konfirm
DA FTA R ORDE R DA RI,(usernam e)
label harga tota l status tg l.
order
opsiukuran jum lah
order
hapus
Gambar 3.21 LKT halaman Lihat Order
Navigasi:
43
Klik Konfirm untuk mengkorfirmasi transaksi
yang masuk.
Klik Hapus untuk menghapus data pesanan
dari database.
Keterangan:
- Setelah Admin memastikan transaksi dari
Pelanggan telah diselesaikan maka langkah
berikutnya Admin mengkonfirmasi pesanan
pelanggan sekaligus segera
menginformasikan nomor resi pengiriman
barang ke nomor pelanggan.
- Admin dapat menghapus daftar pemesanan
dari Pelanggan apabila transaksi tidak
diselesaikan dalam jangka waktu yang telah
ditentukan.
14. Lihat Komentar
14.LIHAT K OM E NTA R
usernam e
balas kom en
DA FTA R K OM E NTA R TOK O NUS A NTA RA
nam a lengkap kom entar opsitanggal
Gambar 3.22 LKT halaman Lihat Komentar
44
Navigasi:
Klik Balas Komen untuk membalas komentar
yang masuk.
Keterangan:
- Halaman ini berfungsi untuk melihat
komentar pertanyaan dan testimoni yang dari
pelanggan masuk ke website.
- Klik balas komentar akan mengarahkan
menuju halaman balas komentar.
15. Balas Komentar
silahkan balas kom entar...
ketikan kom entar..
15.B A LA S K OM E NTA R
(akun twitter)
(akun facebook)
(usernam e pelanggan)
(kom entar)
A dm in
(kom entar balasan)
Reset S im pan
follow
suka
Gambar 3.23 LKT halaman Balas Komentar
Navigasi:
Klik Reset untuk membatalkan tulisan pada
kotak komentar.
45
Klik Simpan untuk mengirim pesan komentar
yang sudah diketik di kotak komentar.
Klik Follow untuk mengikuti kiriman akun
twitter.
Klik suka untuk mengikuti kiriman akun
facebook.
Keterangan:
- Admin dapat membalas komentar dari
Pelanggan dengan menuliskan balasan pada
kotak komentar.
Setelah klik simpan maka balasan komentar dari Admin akan
muncul di bawah.