ETS - PBKK 2020

Soal

Membuat Sistem Informasi yang mencatat transaksi penjualan di kasir/POS (Point of Sales) menggunakan Framework Codegniter.

Asumsi
Sistem Informasi digunakan untuk kegiatan transaksi penjualan di suatu restoran.

Fitur
  1. CRUD (Create, Read, Update, Delete) menu hidangan
  2. Upload gambar untuk makanan
  3. Melihat daftar keranjang
  4. Mengurangi menu dalam keranjang
  5. me-reset daftar keranjang (Mengcancel transaksi)


Pengerjaan


Konfigurasi Awal
1. Konfigurasi nama url di file config/config.php
Isi bagian base url dengan lokasi file


2. Konfigurasi autoload
Mengubah isi config/autoload.php dengan menambahkan 'url' pada bagian helper. Hal ini dilakukan agar memudahkan dalam memprogram web ini.


3. Menambahkan konstanta nama website
Agar memudahkan dalam membangun SI ini, nama dari website yang akan dibagun dibuatkan sebuah konstanta agar tidak perlu menuliskannya satu per satu. Caranya adalah dengan menambahkan konstata baru dengan nilai nama website pada file config/constats.php pada bagian SITE_NAME


4. Merancang tampilan
Saya tidak menggunakan bootstrap/template sb-admin seperti pada tutorial yang pernah diajarkan untuk menyesuaikan tampilan dengan konsep yang saya inginkan. Maka, saya membut file css berdasarkan prototype yang saya buat.



Catatan: Nama menu dan tampilan dapat berubah

Halaman Utama (Halaman Transaksi)
Pada rancangan website ini, halaman utama dari sistem informasi ini berupa halaman transaksi

1. Menambahkan folder admin

Karena halaman bisa dikembangkan menjadi hanya dapat dilihat oleh admin, maka dibuat sebuah folder dengan nama admin. Sehingga halaman-halaman yang berada di dalam folder ini hanya bisa diakses dengan user yang terautentikasi (admin).


2. Membuat tabel menu

Sebelum membuat halaman utama, yang dilakukan pertama kali adalah membuat database SI ini. Kemudian membuat tabel produk yang hasilnya sebagai berikut.


3. Konfigurasi
Database dikonfigurasikan dengan mengatur variabel pada konfigurasi di file config/database.php dan config/autoload.php. Hasilnya adalah sebagai berikut.


database.php
isi fungsi array() pada file autoload.php seperti berikut

4. Membuat Model Menu
File baru dibuat pada direktori application/models dengan nama Menu_model.php. File ini merupakan model untuk data menu makanan pada kafe. File tersebut diisi sebagai berikut.


5. Membuat Controller Menu
Membuat file baru pada direktori application/controllers/admin dengan nama Menu.php dan isi seperti berikut.



6. Membuat Folder View Product
Folder product dibuat untuk menyimpan halaman web yang berkaitan dengan pengelolaan menu (produk). folder tersebut disimpan pada /application/views/admin


-Halaman Daftar Menu Hidangan
Halaman ini menunjukan daftar menu hidangan dan opsi untuk mengedit hidangan, menambah, dan menghapus hidangan.


-Halaman Tambah Hidangan

Halaman ini merupakan halaman formulir penambahan menu hidangan yang dijual.




-Halaman Ubah Deskripsi Hidangan
Halaman ini merupakan halaman formulir pengubahan menu hidangan yang dijual.


7. Membuat Halaman Transaksi
Yang perlu dilakukan untuk membuat halaman transaksi adalah membuat database transaksi untuk menyimpan transaksi yang dilakukan.

Kemudian membuat model dan controller untuk Transaction. Karena transaction disini hanya bisa menambah dan melihat, maka yang diterapkan adalah sebagai berikut.


Controller Transaction diubah menjadi seperti berikut

Model Transaction hanya berisi fungsi yang diperlukan untuk keperluanmenambah dan melihat

Membuat Halaman Transaction
Seperti yang sudah dijelaskan pada awal laporan, halaman ini menjadi halaman utama yang digunakan untuk bertransaksi.

1. Mengatur Data pada Shopping Cart
Mengatur koneksi database

Jika menu ditambahkan ke keranjang, maka menu tersebut akan ditambahkan ke array sebanyak 1 untuk ditampilkan dikeranjang.

Menghapus menu tertentu dari keranjang berdasarkan id-nya

Membatalkan transaksi dengan menghapus array 'keranjang'

Menyimpan transaksi kedalam data base, kemudian array untuk 'keranjang' dihapus untuk memulai transaksi yang baru.

Tombol untuk membatalkan pembayaran, bisa dilihat bahwa tombol ini memuat variabel action yang bernilai 'cancel'
Menampilkan daftar menu dan tombol untuk menambahkannya. 
Bisa dilihat bahwa terdapat hiden input yang bernilai id dari menu yang ditampilkan. Id tersebut akan dioper sehingga masuk kedalam array keranjang ($_SESSION['products'])  dan ditambahkan kuantitasnya.

Menampilkan daftar keranjang yang berisi nama, kuantitas, harga, dan harga total
Terdapat tombol  'remove' yang akan mengurangi jumlam menu tertentu yang dibeli. Tombol 'Pay' untuk menyimpan transaksi di database yang nantinya halaman ini akan dimuat ulang dan menghilangkan semua daftar menu di keranjang.

Tampilan Akhir

Tampilan Halaman Ubah Menu

Tampilan Halaman Daftar Menu

Tampilan Halaman Tambah Menu

Tampilan Halaman Transaksi (Tidak ada transaksi)
Tampilan Halaman Transaksi (Menu makanan ditambahkan)

Berhasil ditambahkan

Lihat Kodingan



Komentar

Postingan populer dari blog ini

Tugas 3 PBKK - Penggunaan Bootstrap, Pembuatan Template, dan Fitur CRUD

Tugas PBKK - Membuat Form App Android dengan Google Sheets