BAB III. PERANCANGAN SISTEM 3.1 Analisa Kebutuhan Sebagaima dijelaskan pada bab satu tentang konsep point of sales berbasis website yang mampu memudahkan pencatatan data produk penjualan. Penulis dalam membangun aplikasi ini memerlukan beberapa kebutuhan antara lain sebagai berikut: 3.1.1 Kebutuhan Antar Muka Kebutuhan antar muka yang diperlukan untuk membangun sistem informasi ini meliputi: a. Sistem yang dibangun harus mempunyai tampilantampilan yang familiar bagi user. b. Sistem yang akan dibangun harus mampu menyimpan data-data yang dimasukkan oleh user ke dalam storage. c. Sistem yang akan dibangun memiliki fasilitas untuk menambah, memperbaharui dan menghapus data yang ada di dalam storage. d. Sistem yang akan dibangun dapat memberikan laporan penjualan. 3.1.2 Kebutuhan Data Data-data yang dibutuhkan dan akan diolah oleh aplikasi ini antara lain: 17
a. Data Primer Yaitu data atau segala informasi yang diperoleh dan didapat langsung dari sumber pertama, baik individu atau elemen bagian dari objek penelitian, seperti melakukan wawancara dan observasi langsung pada objek yang diteliti. Data primer yang dibutuhkan antara lain sebagai berikut: Data Produk, meliputi atribut produk yang digunakan untuk mengisi field. Field tersebut antara lain nama barang, harga barang, deskripsi barang dan kode barang. b. Data Sekunder Meliputi data-data yang diperoleh dari internet, buku literatur, studi pustaka mengenai arsitektur web application, database dan teknologi pemrograman dengan aplikasi web. 3.1.3 Kebutuhan Fungsional Layanan yang disediakan oleh aplikasi yang akan dibangun ini antara lain antara lain sebagai berikut: 18
a. Mengelola otoritas passcode, yaitu data passcode yang dimasukan oleh user dengan benar dan selanjutnya b. Mengelola data produk, harga produk, dan deskripsi produk c. Memberikan laporan penjualan d. Memberikan fasilitas insert, update, dan delete produk. 3.2 Perancangan Aplikasi Proses perancangan meliputi: a. Pemodelan arsitektur aplikasi web yang sesuai kebutuhan. b. Perancangan interface (antarmuka). c. Pembuatan database. Pendekatan yang dilakukan pada proses perancangan aplikasi ini antara lain: 3.2.1 DFD (Data Flow Diagram) Sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat data bergerak dari input menjadi output. Berikut ini DFD sistem informasi point of sales berbasis web untuk UD.Naga Santosa. 19
Update Data Category Update Data Product Update Data Customers Melihat Data Product Customers Admin System Penjualan UD. Naga Santosa Melihat Grafik Melakukan Order Data User Login Memberi Report Gambar 1.1 Diagram Konteks Sistem point of sales berbasis website Pada diagram diatas menunjukan adanya dua dua interaksi antara admin dan customers. Admin dapat dapat melakukan update data category, data product dan data customers. Sedangkan customers dapat melakukan order dengan cara login terlebih dahulu. Data-data yang telah masuk dari customer selanjutnya dapat dilihat oleh admin melalui halaman admin berupa report. Selain report admin juga dapat melihat grafik penjualan 20
Memasukan kategori ADMIN Memasukan kategori Data kategori Data kategori TAMBAH PRODUK VIEW PRODUK EDIT PRODUK HAPUS PRODUK Data kategori Data Data kategori kategori Memasukan kategori TABEL CATEGORY Memasukan kategori Gambar 1.2 Data Flow Diagram Level 1 Sistem point of sales berbasis website untuk proses update kategori oleh admin Pada halaman admin yang dapat dilakukan adalah proses tambah produk dengan memilih kategori terlebih dahulu selanjutnya mengisi form tambah produk, selanjutnya data-data tersebut disimpan kedalam tabel category. Begitu pula dengan edit produk dan hapus produk. 21
Customers id LOGIN MENU UTAMA PEMESANAN BARANG Menyimpan data keranjang Gambar 1.3Data Flow Diagram Level 1 Sistem point of sales berbasis website untuk proses pembelian produk oleh customers. Pada data flow diagram level 1 dijelaskan customer masuk ke sistem melalui login, selanjutnya customers dapat masuk ke menu utama dan melakukan pemesanan barang. Data yang masuk akan disimpan kedalam tabel keranjang. 22
3.2.2 Flowchart a. Flowchart Proses Login Start Input Username & Password Cek Username & Password Ya Ulangi? Tidak Benar? Tidak Ya Stop Cek Status User Ya Admin? Tidak A B Gambar 2.1 Flowchart untuk Login Sistem Informasi Point Of Sales berbasis Website UD.Naga Santosa Alur flowchart diatas menerangkan proses login sistem. Alur akhir dari flowchart ini adalah masuk ke halaman web, namun untuk admin dan customer memiliki halaman berbeda. Maka dari itu dibedakan menjadi dua yaitu A untuk Admin dan B untuk Customers. 23
b. Flowchart Proses Pemesanan Produk Oleh Customers B PILIH MENU Pilih Kategori Pesan Produk Detail Keluar Shopping Cart Belanja Lagi Insert Into Hapus pesanan Database Keluar Gambar 2.2Flowchart untuk Proses Pemesanan pada Sistem Informasi Point Of Sales berbasis Website UD.Naga Santosa Flowchart diatas menerangkan proses pemesanan barang oleh customer. Customer dapat memilih beberapa menu utama yang disediakan seperti memilih produk berdasar kategori, melihat detail produk maupun langsung 24
memesannya dan selanjutanya akan tercatat kedalam database. c. Flowchart halaman admin A Pilih Menu Keluar Home Produk Kategori Report Tambah Produk Hapus Produk Edit Add Kategori Hapus Produk Edit Nama Barang Kategori, Deskripsi, Gambar Nama Kategori Nama Kategori Update Data Select Data Select Data Database Gambar 2.3 Flowchart untuk Halaman Admin pada Sistem Informasi Point Of Sales berbasis Website UD.Naga Santosa Pada gambar diatas dapat dijelaskan sistem informasi point of sales berbasis web untuk UD.NAGA SANTOSA adalah sebagai berikut: 25
a. Saat aplikasi dijalankan b. Sistem meminta user memasukan username dan password yang akan menentukan menu yang dapat diakses sesuai tipe autentifikasinya. Proses pencocokan username dan password dengan data yang tersimpan dalam database. Bila data sesuai aplikasi akan menampilkan pilihan menu sesuai dengan hak akses user, bila data tidak sesuai user dapat melakukan proses ulang login atau memilih menutup aplikasi. c. Proses pencocokan username dan password dengan data yang tersimpan dalam database. Bila data sesuai aplikasi akan menampilkan pilihan menu sesuai dengan hak akses user, bila data tidak sesuai user dapat melakukan proses ulang login atau memilih menutup aplikasi. d. Tampilan menu berisi navigasi menuju fitur-fitur yang ada pada aplikasi seperti: Kategori, meliputi halaman yang menampilkan data produk yang dibedakan berdasarkan merk produk atau kategori. Pada halaman ini customer. Halaman ini memiliki sub menu pesan barang dan detail. Pada menu pesan barang maka otomatis barang yang dipilih akan masuk kedalam shoppong cart. Pada menu detail akan 26
menampilkan deskripsi barang. Selanjutnya setelah customer memilih barang, customer dapat kembali ke halaman sebelumnya untuk memilih barang kembali dengan menu kembali yang telah disediakan atau customer dapat memesan barang menu selesai dan barang yang telah dipesan akan langsung otomatis masuk ke database dan ditampilkan ke halaman report admin untuk diproses. Produk, meliputi tampilan daftar barang yang siap dibeli oleh customer. Halaman ini terdiri dari submenu tambah barang, edit dan hapus. Pada menu tambah barang, admin dapat mengisi field berupa nama barang, kategori, harga, deskripsi barang dan gambar barang. Pada menu edit teradapat field-field yang sama pada halaman tambah barang, admin hanya melakukan editing saja. Kategori, menu kategori menampilkan namanama ketegori barang yang dijual. Setaiap nama kategori dapat diedit dan dihapus. Selain itu terdapat menu tambah kategori yang berguna untuk menambahkan kategori dengan cara mengisi field nama kategori yang selanjutnya disimpan dalam database. 27
Report, menu report berisi daftar pemesan barang. Data ini diperoleh dari database order_produk. e. Sistem menyimpan data kedalam database. 3.2.3 Jaringan Semantik T1 Login T2 Admin T3 Pilih menu Customers T4 Home T5 Kategori Report Produk T14 Pilih Menu T11 T12 T13 T6 Tambah Produk Hapus produk Edit produk Hapus produk Pilih Kategori Add kategori Pesan Produk Detail Logout T15 T16 T17 Edit produk T18 T19 T20 T7 T8 T9 T10 Gambar 3.1 Jaringan Semantik untuk Sistem Informasi Point Of Sales berbasis Website UD.Naga Santosa 3.3 Perancangan Basis Data Tabel-tabel beserta relasinya yang digunakan dalam sistem informasi point of sales berbasis website ini disajikan dalam gambar-gambar sebagai berikut: 28
Gambar 4.1 Perancangan alur basis data padasistem Informasi Point Of Sales berbasis Website UD.Naga Santosa a. Tabel User user id_user password email level varchar(50) varchar(50) varchar(100) varchar(50) Gambar 5.1 Data User 29
Tabel User berisi data login admin, id_user adalah id yang digunakan saat login. b. Tabel Category category id int(11) category varchar(100) Gambar 5.2Data Category Tabel category berisi daftar kategori produk atau pengelompokan barang beradasarkan merk. c. Tabel Member member member_id UserName Password Firstname Lastname int(11) varchar(200) varchar(200) varchar(200) varchar(200) Gambar 5.3Data Member Tabel member menampung data customer. Username digunakan untuk login kedalam sistem. 30
d. Tabel Keranjang keranjang id_keranjang id_product id_session tgl_keranjang qty int(5) int(5) varchar(100) date int(4) Gambar 5.4Data Keranjang Pada tabel keranjang ini menampung data pembelian yang telah dilakukan oleh customer. e. Tabel Product product id product_name price image id_category deskripsi int(11) varchar(100) bigint(20) varchar(1000) int(11) text Gambar 5.5Data Product Tabel ini menampung data produk yang dijual, meliputi nama produk, harga, gambar dan deskripsi produk. Field kategori berguna untuk memilah produk berdasar kategori yang ada pada tabel kategori. 31
f. Tabel Order_Produk order_product id int(11) id_product int(11) id_pemesan varchar(100) name varchar(100) email varchar(100) address varchar(1000) phone bigint(20) status varchar(30) jumlah int(4) tanggal date Gambar 5.6Data Order Produk Tabel ini menampung semua data pembelian oleh customer, mulai detail barang yang dibeli dan nama customer. Sehingga ketika data tersebut telah tertampung dapat diproses pembeliannya. 3.4 Perancangan Antar Muka Pada tampilan awal sistem informasi point of sales berbasis website ini penulis merancang halaman login untuk dapat mengakses tampilan menu utama sistem ini. Penulis memberikan dua halaman login untuk member dan login untuk admin. Adapun perancangan tampilan setiap halaman website untuk member dan admin yang dijelaskan dalam lembar kerja tampilan sebagai berikut: 32
a. Lembar Kerja Tampilan Halaman Login Halaman ini berisi form username dan form password untuk melakukan login kedalam sistem. Gambar 6.1 LKT halaman login b. Lembar Kerja Tampilan Halaman Menu Utama Pada halaman utama menampilkan pilihan menu-menu utama. Menu logout digunakan untuk keluar dari sistem. Menu ketegori digunakan untuk mengelompokan produk berdasarkan merk produk. Menu pesan digunakan untuk memesan produk, jika di klik maka akan masuk pada halaman shopping cart. Menu detail masuk pada halaman deskripsi. 33
Gambar 6.2LKT Menu Utama c. Lembar Kerja Tampilan halaman detail produk Menu logout digunakan untuk keluar dari sistem. Menu ketegori digunakan untuk mengelompokan produk berdasarkan merk produk. Menu kembali digunakan untuk kembali ke menu utama. Ketika menu beli di klik maka akan masuk pada halaman shopping cart. 34
Gambar 6.3LKT detail produk d. Lembar Kerja Tampilan Shopping cart Pada halaman shopping cart berisi list produk yang telah dipesan. Tombol hapus digunakan untuk menghapus list produk yang dipesan. 35
Gambar 6.4LKT shopping cart e. Lembar Kerja Tampilan login administrator Halaman ini berisi form usernama dan password untuk melakukan login kedalam sistem. 36
Gambar 6.1 LKT login administrator f. Lembar Kerja Tampilan menu utama Tampilan menu utama admin berisi chart yang menunjukan banyaknya penjualan terakhir per tanggal. Menu 1 merupakan menu home. Jika diklik maka akan kembali ke halaman home. Menu 2 merupakan menu produk. Dalam menu tersebut mengarah pada halaman produk yang berisi daftar produk yang ada. Menu 3 adalah menu kategori, jika diklik akan mengarah pada halaman untuk megelola kategori produk. Menu 3 jika diklik maka masuk halaman report. 37
Gambar 6.5LKT halaman login g. Lembar Kerja Tampilan Tambah Produk Halaman ini berisi list produk yang sudah ada, pada halaman ini admin dapat mengedit dan menghapus produk dengan menu edit dan delete yang telah tersedia. Menu 1 merupakan menu home. Jika diklik maka akan kembali ke halaman home. Menu 2 merupakan menu produk. Dalam menu tersebut mengarah pada halaman produk yang berisi daftar produk yang ada. Menu 3 adalah menu kategori, jika diklik akan mengarah pada halaman untuk megelola kategori produk. Menu 3 jika diklik maka masuk halaman report. 38
Gambar 6.6 LKT tambah produk h. Lembar Kerja Tampilan add Product Halaman ini berisi form untuk menambahkan produk yang nantinya akan otomatis masuk kedalam database. Menu 1 merupakan menu home. Jika diklik maka akan kembali ke halaman home. Menu 2 merupakan menu produk. Dalam menu tersebut mengarah pada halaman produk yang berisi daftar produk yang ada. Menu 3 adalah menu kategori, jika diklik akan mengarah pada halaman untuk megelola kategori produk. Menu 3 jika diklik maka masuk halaman report. 39
Gambar 6.7LKT add product i. Lembar Kerja Tampilan Tambah Kategori Halaman ini berisi menu untuk menambah kategori produk yang akan otomatis masuk kedalam database. Menu 1 merupakan menu home. Jika diklik maka akan kembali ke halaman home. Menu 2 merupakan menu produk. Dalam menu tersebut mengarah pada halaman produk yang berisi daftar produk yang ada. Menu 3 adalah menu kategori, jika diklik akan mengarah pada halaman untuk megelola kategori produk. Menu 3 jika diklik maka masuk halaman report. Button simpan digunakan untuk menyimpan data yang telah diisi. 40
Gambar 6.8LKT tambah kategori j. Lembar Kerja Tampilan Laporan Halaman in berisi laporan penjualan produk berupa kolom-kolom dengan data penjualan. 41
Gambar 6.9LKT halaman laporan 42