BAB III PERANCANGAN SISEM 3.1 Perancangan Perancangan adalah proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem yang dibutuhkan, membuat suatu keputusan tentang bagaimana komponen sistem diaktualisasikan. Proses ini melibatkan tujuan sistem tersebut, audience, object dan informasi domain. Perancangan yang baik harus mengetahui ba gaimana mendapatkan dampak / efek yang diperlukan oleh spesifikasi tersebut dengan cara paling fleksibel dan efisien. Dalam hal ini, sistem yang akan dibangun adalah dengan menggunakan PHPsebagai bahasa pemrogramannya dan MySQL sebagai database nya serta Dreamweaversebagai media untuk membuat web ecommerce ini. Berikut spesifikasi serta target terhadap sistem yang akan dibangun yaitu : Perancangan yang akan dibangun yaitu Perancangan aplikasi web e- commerce WK Komputer berbasis multimedia yang menyediakan informasi informasi tentang cara pembelian, produk dan proses transaksi. arget yang akan dicapai dalam perancangan web e-commerce ini adalah diharapkan pengunjung mendapatkan segela informasi mengenai produk denganspesifikasi terbaru, sehingga memudahkan masyarakat dalam 13
melakukan transaksi dan diharapkan juga dapat memberikan kemudahan masyarakat luat pada saat melakukan transaksi secara online. 14
3.2 Rancangan Use Case Diagram Gambar 3.1 Use Case Diagram Pada diagram diatas dapat dilihat bahwa sistem penjualan toko WK Komputer Salatiga ini, user hanya memiliki hak ases menambah berita, 15
selebihnya tidak ada. Admin memiliki hak akses lebih tinggi untuk mengelola data website WK Komputer, seperti menambah,mengubah, mengedit user, kategori berita, berita, kategori produk, produk, dan menghapus mengedit order yang dilakukan oleh pengunjung, didalam system ini admin tidak diperkenankan menanmbah order yang hanya bisa dilakukan oleh pengunjung. 3.3 Rancangan DFD Berita Gambar 3.2 DFD tingkat 0 Website WK Komputer 16
Keterangan : 1= Primary key Berita, Berita 2= Primary key User, User 3= Primary key Setting, Setting 4= Primary key Kategori Berita, Katgeori Berita 5= Primary key download, data download 6= Primary key order, order 7= Primary key kategori produk, data kategori produk 17
8= Primary key Produk, Produk Gambar 3.3 DFD tingkat 1 Website WK Komputer 18
3.4 Struktur Halaman Website Gambar 3.4 Struktur Halaman Website 19
Dari gambar diatas dapat dijelaskan : 1. Ketika website dibuka maka pengunjung akan masuk kedalam halaman menu utama. 2. Dari link yang terdapat dalam halaman utama pengunjung dapat mengunjungi halaman kategori_berita.php, berita.php, download.php, profil.php, tampil_produk.php, keranjang_belanja.php, hubungi.php. 3. Halaman login_usr.php, merupakan form login untuk masuk ke halaman administrasi untuk admin dan halaman tambah berita untuk anggota 4. Pengunjung tidak dapat masuk ke halaman login_usr.php tanpa login lebih terdahulu. 5. Setelah masuk sebagai admin, maka halaman web akan menampilkan hak ases untuk mengelola dan mengatur isi yang ada di website, seperti edit setting, update berita, update kategori berita, update download, update kategori produk, update produk, edit serta hapus order, namun jika login sebagai anggota maka hanya akan menampilkan halaman untuk hak akses menambah berita saja. 6. Untuk mengakhiri session maka user dapat mengklik link menuju halaman logout.php 20
3.5 Desain base abel-tabel dan relasinya yang digunakan dalam Website WK Komputer Salatiga dalam bentuk gambar pembuatan Gambar 3.5Relasi base tblcms dengan tblkategori, Gambar 3.6base User 21
Gambar 3.7Relasi base orders, orders_detail, produk, orders_temp dengan kategori. Gambar 3.8baseSetting 22
Gambar 3.9 base Download 23
3.6 Flowchart Gambar 3.10Flowchart Menu Utama Website WK Komputer 24
Pada gambar 3.10 diatas, dapat dijelaskan jalannya Website WK Komputer Salatiga sebagai berikut : Awal mulai, website dibuka. Menampilkan halaman Awal atau halaman Utama Lalu pilih alamat halaman sesuai dengan kebutuhan pada tampilan menu utama terdapat menu lainnya, yaitu menu berita, menu download, menu profile, menu produk kami, menu keranjang belanja, menu hubungi kami, dan menu login Lalu selesai 25
Start ampilkan halaman produk Beli Input Informasi Pembeli Isian Lengkap base End Gambar 3.11Alur Flowchart Pemesanan Produk (Keranjang Belanja) Pada gambar 3.11 diatas, dapat dijelaskan jalannya alur Pemesanan produk sebagai berikut : Awal mulai, website dibuka. Pilih produk kami Lalu menampilkan Produk Beli produk Jika belum menentukan produk halaman akan kembali menampilkan produk hingga menentukan. 26
Setelah selesai menentukan pilihan maka isi informasi data pembeli secara lengkap jika belum lengkap akan muncul pesan agar melengkapi data pembeli Setelah data lengkap ke database Selesai Start ampil Halaman Login Input Username dan Password Periksa Password dan Username Username atau Password salah Halaman Anggota End Gambar 3.12Alur Flowchart Login Anggota Pada gambar 3.12 diatas, dapat dijelaskan jalannya alur flowchart login anggota sebagai berikut : 27
Halaman anggota hanya dapat diakses ketika seseorang sudah mendaftar jadi anggota dengan cara pilih menu login dan mengisi data lengkap lalu login kembali. Pada halaman anggota hanya dibatasi hak aksesnya hanya bisa menambah data berita selebih nya tidak ada hak akses untuk ke menu lainnya. Ketika username dan password pada menu login sudah dimasukkan dengan benar maka menu akan menuju ke menu anggota dan ketika salah memasukkan kode atau memasukkan kode yang tidak benar, maka akan kembali ke menu awal atau menu login. 28
Start Pilih Login Pilih Daftar Menampilkan Halaman Daftar Input Kelengkapan base End Gambar 3.13Alur Flowchart Daftar Anggota Pada gambar 3.13 diatas, dapat dijelaskan jalannya alur daftar anggota Sebagai berikut : Awal mulai, website dibuka. Pilih login Pilih daftar Menampilkan halaman daftar Masukkan data 29
Mengecek kelengkapan data, jika data belum lengkap akan kembali ke halaman daftar Setelah data lengkap ke database Selesai Start Anggota Pilih link pada Home Berita Halaman Utama Halaman Berita (anggota) Logout End Gambar 3.14Alur Flowchart Menu Utama Anggota Pada gambar 3.14 diatas, dapat dijelaskan jalannya alur Menu Utama Anggota sebagai berikut : Awal mulai, website dibuka. Menampilkan menu login sebagai anggota Pilih alamat menu pada Home, berita, logout Selesai 30
Anggota Buka Hal Berita ampilkan Berita Sudah Disimpan ambah Isi Form Berita Lengkap?? base Isi Record Dibatalkan Gambar 3.15Alur Flowchart Berita (anggota) Pada gambar 3.15diatas, dapat dijelaskan jalannya alur Berita anggota sebagai berikut : Login sebagai anggota Buka hal data berita Menampilkan data berita Fungsi tambah data, isi form berita,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan, tapi apabila data belum lengkap akan kembali ke form berita. 31
Login ampil Halaman Login Input Username dan Password Periksa Password dan Username Username dan Password Salah Halaman Administrator Administrator Gambar 3.16Alur Flowchart Login Administrator Pada gambar 3.16 diatas, dapat dijelaskan jalannya alur flowchart login alur administrator sebagai berikut : Halaman administrator hanya bisa dibuka oleh seorang yang berhak mengaksesnya. login terdiri dari username dan password dariadministrator harus sesuai dengan data yang ada pada tabel user. Jika data username dan password sesuai, maka akan berindah ke halaman admin dengan hak ases yang lebih daripada anggota. Jika akses login gagal, maka akan kembali ke menu login. 32
Gambar 3.17Alur Flowchart Menu Utama Admin Pada gambar 3.17 diatas, dapat dijelaskan jalannya alur Menu Utama Admin sebagai berikut : Awal mulai, website dibuka. Menampilkan menu login sebagai admin 33
Pilih alamat menu pada Home, setting, user, Kategori Berita, Berita, Download, Kategori Produk, Produk, Order, Logout Selesai Admin Buka Hal Setting ampilkan Edit? Pilih Dari DB Lengkap? Ubah? base Isi Record Dibatalkan Gambar 3.18Alur Flowchart Setting (admin) Pada gambar 3.18 diatas dapat dijelaskan jalannya alur Flowchart Setting admin sebagai berikut : 34
Login sebagai admin Buka hal data setting Menampilkan data setting, Fungsi edit data, ubah isi form setting apabila ada yang akan dirubah,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data dikembalikan ke awal, tapi apabila data belum lengkap akan kembali ke form setting. 35
Admin Buka Hal User ampilkan disimpan ambah Menampilkan Form simpan base Edit Hapus Isi Form Pilih Dari DB User Isi Record Di Hapus Lengkap? Isi Record Dibatalkan base User Isi Record Dibatalkan Gambar 3.19Alur Flowchart User (admin) Pada gambar 3.19 diatas, dapat dijelaskan jalannya alur FlowchartUser (admin) sebagai berikut : Login sebagai admin Buka hal data user Menampilkan data user 36
Fungsi tambah data, isi form user,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan, Fungsi edit data, pilih data dari tabel user yang akan di edit, setelah data user selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data user di tabel yang akan dihapus lalu hapus maka data akan dihapus 37
Admin Buka Hal Kategori Berita ampilkan disimpan ambah Menampil kan Form simpan base Edit Isi Form Kategori Pilih Dari DB Kategori Lengkap? Isi Record Dibatalkan base Kategori Hapus Isi Record Di Hapus Isi Record Dibatalkan Gambar 3.20 Alur Flowchart Kategori Berita (admin) Pada gambar 3.20 diatas, dapat dijelaskan jalannya alur Flowchart Kategori Berita (admin) sebagai berikut : Login sebagai admin Buka hal data kategori berita Menampilkan data kategori berita 38
Fungsi tambah data, isi form kategori berita,jika data sudah diisi maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan, Fungsi edit data, pilih data dari tabel kategori berita yang akan di edit, setelah data kategori berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data kategori berita di tabel yang akan dihapus lalu hapus maka data akan dihapus 39
Admin Buka Hal Berita ampilkan disimpan ambah Edit Form Isi Form Berita Pilih Dari DB Berita Lengkap? simpan base Isi Record Dibatalkan base Berita Hapus Isi Record Di Hapus Isi Record Dibatalkan Gambar 3.21Alur Flowchart Berita (admin) Pada gambar 3.21 diatas, dapat dijelaskan jalannya alur Flowchart Berita (admin) sebagai berikut : Login sebagai admin 40
Buka hal data berita Menampilkan data berita Fungsi tambah data, isi form berita,jika data sudah diisi maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan. Fungsi edit data, pilih data dari tabel berita yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data berita di tabel yang akan dihapus lalu hapus maka data akan dihapus 41
Admin Buka Hal Download ampilkan ambah Isi Form Input File disimpan simpan base Isi Record Dibatalkan Edit Hapus Pilih Dari DB Download Isi Record Di Hapus base Download Isi Record Dibatalkan Gambar 3.22Alur Flowchart Download (admin) Pada gambar 3.22 diatas, dapat dijelaskan jalannya alur Flowchart Download (admin) sebagai berikut : Login sebagai admin Buka hal data download Menampilkan data download 42
Fungsi tambah data, isi form doenload,jika data sudah diisi maka masukkan file untuk didownload lalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan. Fungsi edit data, pilih data dari tabel download yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data download di tabel yang akan dihapus lalu hapus maka data akan dihapus 43
Admin Buka Hal Kategori Produk ampilkan disimpan ambah Edit Form Isi Form Pilih Dari DB Lengkap? simpan base Isi Record Batal base Isi Record Batal Hapus Isi Record Di Hapus Gambar 3.23Alur Flowchart Kategori Produk (admin) Pada gambar 3.23 diatas, dapat dijelaskan jalannya alur Flowchart Kategori Produk (admin) sebagai berikut : Login sebagai admin Buka hal data Kategori Produk Menampilkan data Kategori Produk 44
Fungsi tambah data, isi form Kategori Produk,jika data sudah diisilalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan. Fungsi edit data, pilih data dari tabel Kategori Produk yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data Kategori Produk di tabel yang akan dihapus lalu hapus maka data akan dihapus 45
Admin Buka Hal Produk ampilkan disimpan ambah Edit Form Isi Form Pilih Dari DB Lengkap? simpan base Isi Record Dibatalkan base Isi Record Dibatalkan Hapus Isi Record Di Hapus Gambar 3.24Alur Flowchart Produk (admin) Pada gambar 3.24 diatas, dapat dijelaskan jalannya alur Flowchart Produk (admin) sebagai berikut : Login sebagai admin Buka hal data Produk Menampilkan data Produk 46
Fungsi tambah data, isi form Produk,jika data sudah diisilalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan. Fungsi edit data, pilih data dari tabel Produk yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan. Fungsi hapus data, pilih data Produk di tabel yang akan dihapus lalu hapus maka data akan dihapus 47
Admin Buka Hal Order ampilkan Edit Pilih Dari DB base Isi Record Dibatalkan Hapus Isi Record Di Hapus Gambar 3.25Alur Flowchart Order (admin) Pada gambar 3.25 diatas, dapat dijelaskan jalannya alur Flowchart Order (admin) sebagai berikut : Login sebagai admin Buka hal data Order Menampilkan data Order 48
Fungsi edit data, pilih data dari tabel Order yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikembalikan ke kondisi awal. Fungsi hapus data, pilih data Order di tabel yang akan dihapus lalu hapus maka data akan dihapus 49