T0 562011030 BAB III
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.
Member
Registrasi
Admin
Login
Lihat Data
Pelanggan
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
tidak
Data Pelanggan?
tidak
ya
kesalahan
3 kali?
Info produk
Memilih Produk
ya
Update Barang
Belanja
Memilih Produk
Lagi?
ya
tidak
Transaksi
Selesai
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
Info website
Login Admin
tidak
tidak
Data Admin?
ya
kesalahan
3 kali?
Info admin panel
ya
tidak
Tranfer Diterima?
ya
Update Data
Pemesanan
Info admin panel
Selesai
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
Login
Username
Password
DESKRIPSI
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
Login
Anda login sebagai.....
Logout
DESKRIPSI
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
PRODUK
Login
Username
Gambar
(Keterangan singkat
produk)
Login Register
Beli
Polling Kesukaan
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
Produk
Gambar
Produk
Profil
Anda login sebagai....
Photo
Logout.
P olling kesukaan
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
Produk
Gambar
Produk
Profil
Anda login sebagai....
Photo
Logout.
Keterangan Produk
U pdate S tock
Ukuran:
photo
Jumlah beli
B e li
Kembali...
keterangan
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
TENTANG
PETA
Photo
Twitter
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
Masukkan identitas:
Nama:
Password:
Nama lengkap:
Email:
Alamat lengkap:
Produk
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
Anda login sebagai....
Logout.
Diagram
Profil
User
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
pemberitahuan
mengetahui
tentang
segala
website,
seperti
jumlah user, jumlah produk, jumlah order,
dan jumlah user yang sedang online.
-
Diagram
digunakan
sebagai
mengenai informasi website saat ini.
gambaran
38
9. Daftar Akun
Home Admin
Username Password Email Namalengkap
Alamatlengkal
Jeniskelamin TanggalRegistrasi
Profil
Opsi
Anda login sebagai....
Hapus
Logout.
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
Nama Barang
Gambar
Tambah Produk
Kode
Bahan
Tanggal input
Opsi
Profil
Anda login sebagai....
Hapus
Gambar
Logout.
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 Produk
Nama Barang
Profil
Anda login sebagai....
Logout.
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 Produk
Nama Jumlah Order Status
Opsi
Profil
Anda login sebagai....
Logout.
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
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.
Member
Registrasi
Admin
Login
Lihat Data
Pelanggan
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
tidak
Data Pelanggan?
tidak
ya
kesalahan
3 kali?
Info produk
Memilih Produk
ya
Update Barang
Belanja
Memilih Produk
Lagi?
ya
tidak
Transaksi
Selesai
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
Info website
Login Admin
tidak
tidak
Data Admin?
ya
kesalahan
3 kali?
Info admin panel
ya
tidak
Tranfer Diterima?
ya
Update Data
Pemesanan
Info admin panel
Selesai
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
Login
Username
Password
DESKRIPSI
Login Register
Produk
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
Login
Anda login sebagai.....
Logout
DESKRIPSI
Produk
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
PRODUK
Login
Username
Gambar
(Keterangan singkat
produk)
Login Register
Beli
Polling Kesukaan
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
Produk
Gambar
Produk
Profil
Anda login sebagai....
Photo
Logout.
P olling kesukaan
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
Produk
Gambar
Produk
Profil
Anda login sebagai....
Photo
Logout.
Keterangan Produk
U pdate S tock
Ukuran:
photo
Jumlah beli
B e li
Kembali...
keterangan
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
TENTANG
PETA
Photo
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
Masukkan identitas:
Nama:
Password:
Nama lengkap:
Email:
Alamat lengkap:
Produk
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
Anda login sebagai....
Logout.
Diagram
Profil
User
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
pemberitahuan
mengetahui
tentang
segala
website,
seperti
jumlah user, jumlah produk, jumlah order,
dan jumlah user yang sedang online.
-
Diagram
digunakan
sebagai
mengenai informasi website saat ini.
gambaran
38
9. Daftar Akun
Home Admin
Username Password Email Namalengkap
Alamatlengkal
Jeniskelamin TanggalRegistrasi
Profil
Opsi
Anda login sebagai....
Hapus
Logout.
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
Nama Barang
Gambar
Tambah Produk
Kode
Bahan
Tanggal input
Opsi
Profil
Anda login sebagai....
Hapus
Gambar
Logout.
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 Produk
Nama Barang
Profil
Anda login sebagai....
Logout.
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 Produk
Nama Jumlah Order Status
Opsi
Profil
Anda login sebagai....
Logout.
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