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

Twitter

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

Twitter

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

Twitter

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