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.