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.
21
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.
P elanggan 5 4 3
2
A d m in 1
W ebsite Toko Nusantara
6
7 8
9
10
11
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.
12
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 P elanggan
A dmin 5
1
4 2
6 7 8 9 10 11 12
3
5 12
1 2 6 7
3 8 10 11
1.
2.
-----------
9
4
3.
4.
-----------
-----------
-----------
Registrasi dan Login
P emesanan B arang
P engiriman B arang
P ertanyaan dan Testimoni
Data A kun
Data P emesanan
Data B arang
Data K omentar
Gambar 3.2 DFD tingkat 1 Website Toko Nusantara
Pada gambar 3.2 terlihat arus data yang mengalir pada website Toko Nusantara.
24
P elanggan
A dmin
1.1
1.2
-----------
-----------
Registrasi P elanggan
Login
1.3
1.4
-----------
-----------
Lihat Data P elanggan
Ubah Data P elanggan
Data A kun
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.
P elanggan
A dmin
2.2
2.1 ----------Memilih P roduk
----------Input Data B arang
Data B arang
2.3
2.4
-----------
-----------
Ubah Info barang
Lihat Daftar P emesanan
Data P emesanan
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. P elanggan
3.2
3.3
-----------
-----------
Trans ak s i
P emes anan Dik onfirmas i
B arang Dik irim
Data P emes anan
A dmin
Data B arang
3.1 -----------
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
P elanggan
A dmin
4.2
4.1
-----------
----------Lihat K omentar
Tulis K omentar
Data K omentar
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 u la i
In fo w e b s ite
L o g in A k u n
tid a k D a ta P e la n g g a n ?
ya tid a k k e s a la h a n 5 k a li? In fo p ro d u k
ya
M e m ilih P r o d u k
U pdate B arang B elanja
ya M e m ilih P r o d u k L a g i?
tid a k
Tra n sa ksi
K o n firm a si B a ra n g
S e le s a i
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 u la i
In fo w e b s ite
L o g in A d m in
tid a k D a ta A d m in ?
tid a k
ya k e s a la h a n 5 k a li? In fo a d m in p a n e l
ya
K o n fir m a s i T r a n s a k s i Ba ra n g
tid a k T ranfer D iterim a?
ya
U p d a te D a ta Pem esanan
In fo a d m in p a n e l
S e le s a i
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 1 .H O M E
L o g in (g a m b a r p ro d u k)
U se rn a m e
(g a m b a r p ro d u k)
P a ssw o rd (ke te ra n g a n )
(ke te ra n g a n )
R e g iste r
L o g in
b e li
b e li
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 2 .A K U N
L o g in
(g a m b a r p ro d u k)
(g a m b a r p ro d u k)
(ke te ra n g a n d e til p ro d u k ya n g d ib e li)
(ke te ra n g a n d e til p ro d u k ya n g d ib e li)
A n d a lo g in se b a g a i.. 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 3 .T E N TA N G K A M I
(ke te ra n g a n te n ta n g w e b site )
(g a m b a r p e ta lo ka si)
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 4 .K O N TA K sila h ka n b e rta n ya ...
(a ku n tw itte r) fo llo w
ke tika n ko m e n ta r..
(a ku n fa ce b o o k) S im p a n
R e se t
su ka
(u se rn a m e p e la n g g a n ) (ko m e n ta r)
A d m in (ko m e n ta r b a la sa n )
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 5 .R E G IS T E R
sila h ka n isi fo rm re g istra si..
* u se rn a m e * p a ssw o rd * e m a il * n a m a le n g ka p * a la m a t le n g ka p *nom or handphone la ki-la ki (ko d e ca p tch a ) * m a su ka n ko d e ca p tch a sa ya se tu ju d e n g a n ke te n tu a n .... R e se t
S im p a n
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 D M IN
K E TE RA NGA N
L o g in
U S E R : ..
A n d a lo g in se b a g a i A D M IN
P R O D U K : ..
Logout
JU M L A H O R D E R : .. U S E R O N L IN E : .. (g a m b a r d ia g ra m )
Gambar 3.14 LKT halaman Admin
Navigasi:
Klik Logout untuk keluar dari akun admin dan mengakhiri akses.
Keterangan:
36
-
Admin
dapat
pemberitahuan
mengetahui tentang
segala
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 7 .D A F TA R A K U N D A F TA R A K U N T O K O N U S A N TA R A u se rn a m e p a ssw o rd
e m a il
nam a le n g ka p
a la m a t le n g ka p
gender
n o .te lp
tg l. re g istra si
o p si
ubah hapus
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 D IT U S E R
E D IT U S E R ,(U S E R N A M E ) u se rn a m e p a ssw o rd
e m a il
ro le
nam a le n g ka p
a la m a t le n g ka p
gender
n o .te lp
o p si
sim p a n b a ta l
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 .D A F TA R P R O D U K + ta m b a h p ro d u k
D A F TA R P R O D U K T O K O N U S A N TA R A
n a m a b a ra n g
gam bar
ke te ra n g a n
sto k b a ra n g
la b e l
h a rg a
o p si
(g a m b a r p ro d u k) ubah hapus
(g a m b a r p ro d u k)
ubah hapus
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 1 0 .TA M B A H P R O D U K + ta m b a h p ro d u k
TA M B A H P R O D U K
n a m a b a ra n g
gam bar
ke te ra n g a n
sto k b a ra n g
la b e l
h a rg a
b ro w se
o p si
sim p a n b a ta l
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 D IT P R O D U K + ta m b a h p ro d u k n a m a b a ra n g
TA M B A H P R O D U K gam bar
ke te ra n g a n
sto k b a ra n g
la b e l
h a rg a
b ro w se
o p si
sim p a n
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 mengurangi
ini
juga
kesalahan
membantu
Admin
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 1 2 .D A F TA R O R D E R
D A F TA R O R D E R T O K O N U S A N TA R A nam a
ju m la h o rd e r
tg l. o rd e r
o p si
lih a t hapus
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 1 3 .L IH AT O R D E R
D A F TA R O R D E R D A R I,(u se rn a m e ) n a m a b a ra n g
la b e l
u ku ra n
h a rg a
to ta l
ju m la h o rd e r
sta tu s
tg l. o rd e r
o p si
ko n firm 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 1 4 .L IH AT K O M E N TA R
D A F TA R K O M E N TA R T O K O N U S A N TA R A u se rn a m e
n a m a le n g ka p
ko m e n ta r
ta n g g a l
o p si
b a la s ko m e n
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 1 5 .B A L A S K O M E N TA R sila h ka n b a la s ko m e n ta r...
(a ku n tw itte r) fo llo w
ke tika n ko m e n ta r..
(a ku n fa ce b o o k) S im p a n
R e se t
su ka
(u se rn a m e p e la n g g a n ) (ko m e n ta r)
A d m in (ko m e n ta r b a la sa n )
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.
