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 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 Admin Registrasi 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 Info produk kesalahan 3 kali? 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 Data Admin? tidak ya Info admin panel kesalahan 3 kali? ya Tranfer Diterima? tidak 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 DESKRIPSI Password Login Register Produk Twitter Gambar 3.9 LKT halaman Home atau halaman utama
30 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. - 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... DESKRIPSI Logout Produk Twitter Gambar 3.10 LKT halaman Home setelah login Klik Logout untuk keluar dari akun dan mengkahiri akses. - 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 Klik Beli untuk membeli produk. - 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 Photo Profil Anda login sebagai... Logout. Polling kesukaan Keterangan Produk Selengkapnya.. Gambar 3.12 LKT halaman Produk Klik selengkapnya untuk melihat detail keterangan produk. - 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 Photo Ukuran: Jumlah beli B e li Keterangan Produk Kembali... Profil Anda login sebagai... Logout. Update S tock photo keterangan Gambar 3.13 LKT halaman Detail Produk Klik Beli untuk membeli produk. Klik Kembali untuk kembali ke Menu produk.
35 - 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 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: Jenis kelamin: Produk kode captcha Register Gambar 3.13 LKT halaman Register Klik Register untuk memyimpan dan membuat akun baru. - 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 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.
38 9. Daftar Akun Home Admin Username Password Email Namalengkap Alamatlengkal Jeniskelamin TanggalRegistrasi Opsi Hapus Profil Anda login sebagai... Logout. Gambar 3.15 LKT halaman Daftar Akun Klik Hapus untuk menghapus akun dari database. - Admin dapat menghapus akun Pelanggan yang sudah tidak digunakan lagi oleh Pelanggan. 10. Daftar Produk
39 Daftar Produk Tambah Produk Nama Barang Gambar Kode Bahan Tanggal input Opsi Gambar Hapus Profil Anda login sebagai... Logout. Gambar 3.17 LKT halaman Daftar Produk Klik Hapus untuk menghapus produk dari database. Klik Tambah Produk untuk menambah produk baru. - 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 Kode Profil Anda login sebagai... Logout. Bahan Harga Gambar Produk Telusuri.. Tidak Ada berkas dipilih.. Simpan Gambar 3.18 LKT halaman Tambah Produk Klik Simpan untuk menyimpan info produk. Klik telusuri untuk memilih gambar produk yang akan digunakan. Klik Tambah Produk untuk menambah produk baru. - 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 Klik Lihat untuk melihat data pemesanan yang masuk. Klik Hapus untuk menghapus data pemesanan dari database. - Halaman ini berfungsi untuk melihat daftar pesanan yang telah dilakukan oleh Pelanggan. Admin dapat menghapus daftar pemesanan dari pelanggan yang telah menyelesaikan transaksi
42