T0 562011053 BAB III

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.

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

P elanggan A d m in

1 2 3 4

5 6 7

8 10 9

11 12

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.

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 B arang Regis tras i

dan Login

1.

---P emes anan B arang 2. ---P engiriman B arang 3.

---P ertany aan dan Tes timoni

4.

---P elanggan A dmin

Data A k un 1

2 3

4 5

Data P emes anan Data K omentar

6 7 8 9 10 11 12

1 2

3 4

5

6 7 _{810 11 9} 12

Gambar 3.2 DFD tingkat 1 Website Toko Nusantara

 Pada gambar 3.2 terlihat arus data yang mengalir pada

Regis tras i P elanggan 1.1 ---Login 1.2 ---Lihat Data P elanggan

1.3

---Ubah Data P elanggan

1.4

---P elanggan A dmin

Data A k un

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 B arang

2.2

---Ubah Info barang 2.3

---Lihat Daftar P emes anan

2.4

---P elanggan A dmin

Data B arang Data P emes anan

 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.

Trans ak s i 3.1

---P emes anan Dik onfirmas i

3.2

---B arang Dik irim

3.3 ---P elanggan

A dmin

Data P emes anan Data B arang

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.

Lihat K omentar 4.1

---Tulis K omentar 4.2

---P elanggan A dmin

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.

3.2 Flowchart

M u la i

In fo w e b s ite

L o g in A k u n

D a ta P e la n g g a n ?

S e le s a i

M e m ilih P r o d u k

U pdate B arang B elanja

K o n firm a si B a ra n g In fo p ro d u k

y a

tid a k

T r a n s a k s i M e m ilih P r o d u k

L a g i?

y a

tid a k

k e s a la h a n 5 k a li?

y a tid a k

 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.

M u la i

L o g in A d m in

D a ta A d m in ?

tid a k y a

In fo a d m in p a n e l

S e le s a i

K o n fir m a s i T r a n s a k s i B a r a n g

T ranfer D iterim a?

In fo a d m in p a n e l

tid a k

y a

U p d a te D a ta P e m e s a n a n

In fo w e b s ite

k e s a la h a n 5 k a li?

y a tid a k

Gambar 3.8 Flowchart tahap 1 Proses pada Admin

 Jika login akun Admin tidak sesuai dengan data akun

 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

L o g in U se rn a m e

P a ssw o rd

L o g in R e g iste r

(g a m b a r p ro d u k)

(ke te ra n g a n )

b e li

(g a m b a r p ro d u k)

(ke te ra n g a n )

b e li 1 .H O M 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:

- 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

L o g in

A n d a lo g in se b a g a i..

(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) 2 .A K U N

(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) L o g o u t

Gambar 3.10 LKT halaman Akun Navigasi:

 Klik Logout untuk keluar dari akun dan

mengkahiri akses.

- 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

(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) 3 .T E N TA N G 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

- 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

sila h ka n b e rta n ya ...

ke tika n ko m e n ta r.. 4 .K O N TA K

(a ku n tw itte r)

(a ku n fa ce b o o k)

(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 ) R e se t S im p a n

fo llo w

su ka

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

 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

sila h ka n isi fo rm re g istra si.. 5 .R E G IS T E R

* 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 * n o m o r h a n d p h o n e 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

 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 T E R A N G A N L o g in

A n d a lo g in se b a g a i A D M IN

L o g o u t

(g a m b a r d ia g ra m )

U S E R : .. P R O D U K : .. JU M L A H O R D E R : .. U S E R O N L IN E : ..

Gambar 3.14 LKT halaman Admin Navigasi:

 Klik Logout untuk keluar dari akun admin

dan mengakhiri akses.

- 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

u se rn a m e 7 .D A F TA R A K U N

u b a h h a p u s D A F TA R A K U N T O K O N U S A N TA R A

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

g e n d e r n o .te lp tg l. re g istra si o p si

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

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

sim p a n b a ta l p a ssw o rd e m a il ro le n a m a

le n g ka p

g e n d e r n o .te lp o p si a la m a t

le n g ka p

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

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

(g a m b a r p ro d u k) n a m a b a ra n g

u b a h h a p u s D A F TA R P R O D U K T O K O N U S A N TA R A

g a m b a r 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

+ ta m b a h p ro d u k

u b a h h a p u s (g a m b a r p ro d u k)

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

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

n a m a b a ra n g

sim p a n b a ta l TA M B A H P R O D U K

g a m b a r 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 + ta m b a h p ro d u k

b ro w se

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

 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

n a m a b a ra n g

sim p a n TA M B A H P R O D U K

g a m b a r 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 + ta m b a h p ro d u k

b ro w se

Gambar 3.19 LKT halaman Edit Produk

Navigasi:

 Klik Simpan untuk menyimpan info produk

 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

1 2 .D A F TA R O R D E R

n a m a

lih a t h a p u s D A F TA R O R D E R T O K O N U S A N TA R A

ju m la h o rd e r tg l. o rd e r o p si

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

n a m a b a ra n g

ko n firm D A F TA R O R D E R D A R I,(u se rn a m e )

la b e l h a rg a to ta l sta tu s tg l. o rd e r

o p si u ku ra n ju m la h

o rd e r

h a p u s

Gambar 3.21 LKT halaman Lihat Order Navigasi:

 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

u se rn a m e

b a la s ko m e n D A F TA R K O M E N TA R T O K O N U S A N TA R A

n a m a le n g ka p ko m e n ta r ta n g g a l o p si

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

sila h ka n b a la s ko m e n ta r... ke tika n ko m e n ta r.. 1 5 .B A L A S K O M E N TA R

(a ku n tw itte r)

(a ku n fa ce b o o k)

(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 ) R e se t S im p a n

fo llo w

su ka

Gambar 3.23 LKT halaman Balas Komentar Navigasi:

 Klik Reset untuk membatalkan tulisan pada

 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.

 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

n a m a b a ra n g

sim p a n TA M B A H P R O D U K

g a m b a r 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 + ta m b a h p ro d u k

b ro w se

Gambar 3.19 LKT halaman Edit Produk

Navigasi:

 Klik Simpan untuk menyimpan info produk yang telah diubah.

 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

1 2 .D A F TA R O R D E R

n a m a

lih a t h a p u s D A F TA R O R D E R T O K O N U S A N TA R A

ju m la h o rd e r tg l. o rd e r o p si

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

n a m a b a ra n g

ko n firm D A F TA R O R D E R D A R I,(u se rn a m e )

la b e l h a rg a to ta l sta tu s tg l. o rd e r

o p si u ku ra n ju m la h

o rd e r

h a p u s

Gambar 3.21 LKT halaman Lihat Order

 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

u se rn a m e

b a la s ko m e n D A F TA R K O M E N TA R T O K O N U S A N TA R A

n a m a le n g ka p ko m e n ta r ta n g g a l o p si

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

sila h ka n b a la s ko m e n ta r... ke tika n ko m e n ta r.. 1 5 .B A L A S K O M E N TA R

(a ku n tw itte r)

(a ku n fa ce b o o k)

(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 ) R e se t S im p a n

fo llo w

su ka

Gambar 3.23 LKT halaman Balas Komentar

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.

 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.