Tugas UTS PBKK - Aplikasi Point of Sales

Tugas UTS PBKK - Aplikasi Point of Sales

   11:38 AM       Benito Dannes

---

Aplikasi ini merupakan tugas UTS untuk mata kuliah PBKK. Aplikkasi ini berupa aplikasi Point of Sales, atau dapat juga disebut Aplikasi Kasir, dimana fungsi utamanya adalah mendaftarkan transaksi yang dilakukan pada suatu toko dan menampilkan tagihan serta menyimpan seluruh transaksi yang sudah terjadi.

Berikut adalah fitur-fitur dari aplikasi POS yang saya buat:

Login dan Registrasi

Untuk mengakses aplikasi ini, pertama harus dilakukan login terlebih dahulu. Jika belum memiliki akun, pengguna dapat melakukan registrasi akun terlebih dahulu. Setelah melakukan registrasi akun, pengguna bisa langsung login menggunakan akun tersebut. Namun, pembuatan akun melalui halaman registrasi hanya tersedia untuk pengguna kelas user saja. Untuk pengguna kelas admin, tidak bisa melalui halaman register. Harus langsung dari SQL.

Halaman yang dapat diakses pun berbeda. Untuk pengguna kelas user, mereka hanya dapat mengakses bagian kasirnya saja. Sedangkan untuk admin dia bisa mengakses page kasir, list barang, list user, juga data rekaman transaksi.

Halaman Login

Halaman Registrasi

Kasir

Fitur ini dapat diakses oleh semua user dari kedua tingkatan. Untuk menggunakan aplikasi ini, cukup masukkan id produk kedalam input. Kemudian tambah barang. Maka barang akan terdaftar dalam daftar belanja di tabel dibawahnya. Jika ingin menambah jumlah barang, tinggal masukkan lagi barang yang sama. Maka jumlah barang akan bertambah dan subtotal akan berubah. Kemudian total belanja akan tampil di bagian paling kanan bawah.

Setelah input selesai, pengguna dapat menyelesaikan transaksi dengan menekan tombol 'Payment' atau mengulang proses input jika ada kesalahan dengan menekan tombol 'Clear'. Disini juga terdapat fitur, jika pembayaran terjadi, jumlah stok yang dimiliki barang yang dibeli akan berkurang dalam database.

Setelah tombol 'Payment' ditekan, transaksi akan ditotal, kemudian akan dimunculkan data struk pembayarannya. Setelah itu, untuk memulai transaksi baru, dapat ditekan tombol 'New Transaction'. Pengguna akan dikembalikan ke halaman kasir dengan isi tabel belanjaan kosong.

Kasir dalam view Admin

Kasir dalam view User

Kasir dalam proses transaksi

Tagihan hasil transaksi

Daftar Barang

Jika level pengguna adalah admin, dia dapat mengakses daftar barang. Disini akan ditampilkan data barang yang terdaftar, harganya, serta jumlah stok yang dimiliki. Didalam halaman ini pengguna juga dapat menambahkan barang baru, atau mengedit, atau menghapus data yang sudah ada.

Halaman Utama Daftar Produk

Daftar Transaksi

Admin selain dapat melihat data barang, juga dapat melihat daftar transaksi yang sudah terjadi. Disini juga dapat dilihat detail barang apa saja yang sudah dibeli pada tiap transaksi, serta tagihan yang dikeluarkan.

Daftar Laporan Transaksi

Detil Laporan Transaksi

Untuk source code, dapat didapatkan di github berikut: https://github.com/BeniTama/PBKK-CodeIgniter/tree/master/UTS

Read More

Tugas 7 PBKK - Mengatur Akses User

Tugas 7 PBKK - Mengatur Akses User

   10:07 AM       Benito Dannes

---

Pada tugas kali ini, akan dibuat halaman login untuk admin kedalam website. Semua halaman dalam website ini, kecuali halaman login, hanya dapat diakses setelah pengguna berhasil login.

Langkah pertama yang harus dilakukan adalah membuat tabel users pada database. Buatlah tabel dengan format seperti berikut:

Untuk password, buatlah password dengan hash. Hash dapat didapatkan dengan perintah fungsi password_hash().

Untuk langkah selanjutnya, model untuk aktifitas logging dibuat. Buatlah file dalam direktori application/models/ dengan nama User_model.php. Kemudian file tersebut diisi dengan kode berikut:

Setelah file model, buatlah file controller. Buat filenya dalam direktori controllers/admin dan namai dengan Login.php kemudian isi dengan kode berikut:

Dengan file model dan controller berhasil dibuat, seharusnya website bisa menjalankan login. Tetapi untuk memastikan kalau pengguna harus login terlebih dahulu sebelum mengakses halaman lain dalam website, harus dibuat cara bagaimana pengguna akan ter-redirect ke halaman login jika ia belum melakukan login. Untuk itu, buka file controller Overview.php dan Product.php dalam direktori controller/admin/. Kemudian tambahkan kode berikut di setiap kontroller:

Setelah memastikan bahwa pengguna harus login, harus disediakan tampilan untuk pengguna melakukan login. Maka, buatlah file view untuk login pada direktori application/views/admin/ dengan nama login_page.php. Sebagian besar isi dari file bisa dicontek dari file yang sudah disediakan oleh template dengan sedikit perubahan pada form. Kode selengkapnya sebagai berikut:

Dengan pengguna dapat melakukan login, sekarang harus disediakan cara agar pengguna dapat logout. Untuk itu, bukalah file /views/admin/_partials/modal.php dan ubah alamat link logout. Ubahlah menjadi seperti berikut:

Setelah itu, ujicoba login ke website dapat dilakukan. Cobalah untuk mengakses halaman website. Seharusnya, akan langsung tertuju ke halaman login.

Jika login berhasil, website akan langsung tertuju ke halaman utama. Jangan lupa untuk mencoba fitur logout. Jika logout berhasil, website akan langsung kembali menuju halaman login yang kosong.

Read More

Tugas 6 PBKK - File Upload pada CodeIgniter

Tugas 6 PBKK - File Upload pada CodeIgniter

   4:43 AM       Benito Dannes

---

Berikut adalah tahap-tahap untuk dapat melakukan upload file pada website dan terdaftar di database.

Pada awalnya, input data pada image tidak akan berhasil. Melainkan, sudah disetting jika gambar tidak ada input, akan di-replace dengan nilai default berupa file default.jpg. File ini disimpan dalam direktori /upload/product/default.jpg. Di tahap selanjutnya gambar yang diupload juga akan disimpan dalam direktori yang sama.

Untuk memulai proses upload, pertama harus dibuat method yang bersangkutan didalam file model. Maka buka file Product_model.php, kemudian tambahkan method _uploadImage() pada model. Berikut isi kode dari method _uploadImage():
Kemudian setelah membuat method, modifikasi method save() dan update() agar dapat menggunakan method upload gambar yang baru saja ditambahkan. Kodenya akan menjadi sperti ini:

Kemudian coba melakukan upload file. Jika berhasil, gambar akan keluar pada list.

Setelah berhasil melakukan upload file, selanjutnya harus diberikan fitur untuk menghapus file yang sudah terupload. Caranya, tambahkan method _deleteImage($id) pada model Product_model. Isi dengan kode berikut:

Kemudian masukkan method tersebut dalam method delete(). Ini akan membuat gambar yang berhubungan dengan id data yang dihapus akan turut terhapus juga.

Read More

Tugas 5 PBKK - CRUD Dalam CodeIgniter

Tugas 5 PBKK - CRUD Dalam CodeIgniter

   3:39 AM       Benito Dannes

---

Dalam tugas kali ini, akan dijelaskan mengenai cara mengaplikasikan CRUD menggunakan CodeIgniter.

Langkah pertama adalah membuat database mySQL. Untuk membuat database, akses page phpmyadmin, kemudian buat database baru dan tabel baru. Berikut adalah format tabel yang dibuat:

Selanjutnya lakukan konfigurasi pada CodeIgniter. Pertama buka file /config/database.php, kemudian ubah string yang ada sesuai dengan yang dibutuhkan. Karena pengerjaan menggunakan XAMPP, maka isinya sebagai berikut:

Setelah file database, akses file /config/autoload.php. Disini tambahkan library database dan session pada autoload config. Hal ini dilakukan agar fungsi-fungsi pada library database dan session dapat digunakan dalam proyek ini. Library itu dibutuhkan untuk melakukan CRUD yang menggunakan database dan session untuk session user saat login. Kode lengkapnya seperti berikut:

Langkah selanjutnya adalah membuat model pada CodeIgniter. Model adalah class yang berhubungan dengan data. Buat file Product_model pada folder /models/. Kemudian isi dengan kode berikut:
Setelah model selesai dibuat, buat controller yang akan digunakan dalam operasi CRUD. Buat file baru dalam folder application/controllers/admin/ dengan nama Products.php. Dari file ini semua operasi CRUD akan berawal. isi dengan fungsi-fungsi berikut:
Setelah semua aktifitas "di balik layar" sudah selesai dipersiapkan, sekarang saatnya membuat halaman view yang bersangkutan. Ada beberapa halaman yang akan dibuat, yaitu list.php untuk menampilkan list data yang sudah ada, new_form.php untuk menampilkan form input data baru, dan edit_form.php untuk menampilkan form edit data yang sudah ada. Buat ketiga file dalam folder /views/admin/product/. Kode dari file-file tersebut akan dijabarkan dibawah ini:

list.php
new_form.php
edit_form.php


Setelah itu, aplikasi dapat coba dijalankan. Buka halaman admin dengan alamat http://localhost/[nama_website]/index.php/admin/products/. Jika tidak ada error, aplikasi berjalan dengan baik.

Kemudian klik link Add New untuk menambahkan entry data baru.

Setelah entry data berhasil, coba cek halaman Product List untuk memastikan apakah data berhasil diinput atau tidak.

Kemudian, cobalah untuk menghapus data. Jika data hilang, berarti penghapusan data telah berhasil.

Read More

Tugas 4 PBKK - Membuat Partial View Pada Halaman CodeIgniter

Tugas 4 PBKK - Membuat Partial View Pada Halaman CodeIgniter

   8:42 AM       Benito Dannes

---

Untuk tugas kali ini, akan dijelaskan cara menggunakan partials. Partials ini berfungsi untuk membagi template menjadi bagian-bagian kecil yang bisa digunakan kembali. Dengan adanya partials, kita tidak perlu mengetik seluruh bagian dari file html dari header hingga footer dalam setiap halaman yang akan dibuat. Dengan partials yang harus dilakukan hanyalah memanggil lagi bagian partials yang ingin digunakan dan membuat perubahan di bagian yang memang ingin dirubah.

Untuk membuat partial, desain template awal bisa dilihat terlebih dahulu. Desain itu kemudian dipecah-pecah menjadi bagian-bagian tertentu yang spesifik. Dalam template ini, bisa dibuat beberapa bagian menjadi:

• Head untuk menyimpan konten dari header
• Navbar untuk navbar
• Sidebar untuk menu samping
• Breadcrumb untuk menyimpan breadcrumb
• Scrolltop untuk tombol scrolltop
• Footer untuk menyimpan konten dari footer
• Modal untuk modal
• Js untuk semua script js.

Untuk lokasi membuat file partials dalam sebuah folder tersendiri. Buat terlebih dahulu folder _partials didalam folder views/admin/. 

Untuk membuat file partials, cukup melakukan cut-paste pada overview.php ke file-file partials yang bersangkutan hingga menyisakan bagian utama bodynya saja. Contoh dari kode-kode dari file partials saya adalah sebagai berikut:

Head.php

Navbar.php

Sidebar.php

Breadcrumb.php

Scrolltop.php

Footer.php

Modal.php

Js.php

Setelah selesai membagi-bagi file partialsnya, selanjutnya adalah cara untuk memanggil file-file tersebut. Untuk memanggil file partial dalam halaman utama, dapat dilakukan dengan perintah <?php $this->load->view("admin/_partials/[nama_file].php") ?> pada tempat yang sesuai. Untuk contohnya, dapat dilihat di file Overview.php berikut:

Contoh gambar outputnya jika berhasil akan sama sperti semula.

Read More

Tugas 3 PBKK - Menggunakan Bootstrap Pada CodeIgniter

Tugas 3 PBKK - Menggunakan Bootstrap Pada CodeIgniter

   8:50 AM       Benito Dannes

---

Untuk tugas kali ini, akan ditunjukkan cara untuk mengaplikasikan Bootstrap pada CodeIgninter.

Langkah-langkahnya adalah sebagai berikut.

Pertama-tama, konfigurasi Base URL pada CodeIgniter. Karena masih menggunakan localhost, maka konfigurasi Base URL dengan alamat web pada localhost. Untuk melakukan konfigurasi, isi bagian $config['base_url'] pada file config/config.php menjadi seperti ini:

Berikutnya konfigurasi helper pada file autoload.php. Helper yang dibutuhkan untuk saat ini adalah helper url. Helper url berisi fungsi-fungsi untuk mengakses URL seperti base_url(), site_url(), $this->uri, dll. Fungsi-fungsi ini akan sering digunakan pada aplikasi template bootstrap yang akan digunakan nanti, bahkan juga berguna untuk mengupload gambar pada website.

Untuk mengaktifkan helper url, cari string $autoload['helper'] pada file config/autoload.php. Kemudian tambahkan url, seperti contoh dibawah ini:

Setelah menambahkan helper, buat konstanta SITE_NAME untuk menyimpan nama web. Konstanta ini akan digunakan untuk mengambil judul pada web nanti. Untuk menambahkan konstanta nama web, buka file config/constants.php, dan tambahkan kode berikut:

Langkah selanjutnya adalah menambahkan template Bootstrap yang diinginkan pada folder proyek web yang sedang dikerjakan. Pada proyek ini, template yang akan digunakan adalah SB Admin. Template ini bisa didapatkan disini.

Setelah mendownload file template yang diinginkan, file template harus diekstrak dalam folder yang sesuai dengan direktori yang ada dalam CodeIgniter. File yang harus diekstrak adalah file yang berada dalam folder css, js, dan vendor atau assets. Jika nama foldernya vendor, lebih baik untuk mengganti namanya menjadi assets agar tidak bercampur dengan folder vendor dari composer.

Setelah ekstrak file ke direktori selesai, pengaturan untuk menampilkan template pada web sudah bisa dilakukan. Untuk melakukannya, buat sebuah folder baru dalam folder views dengan nama admin. Lalu didalamnya dibuat file overview.php. File ini akan menjadi halaman utama dari template. Isi dari file ini adalah isi dari file index.html dari template.

Setelah overview selesai, konfigurasi file controller untuk membuat CodeIgniter dapat menampilkan file itu. Buat file controller baru dengan nama Overview.php dalam folder controllers/admin. Kemudian isi filenya seperti demikian:

Setelah itu, buat route baru untuk controller ini. Caranya adalah tambahkan kode berikut pada filee config/routes.php:

Setelah halaman dapat ditampilkan, template mungkin tidak tampil dengan sempurna. Ini bisa disebabkan oleh alamat untuk mengakses file CSS dan JS belum diberikan dengan benar. Terutama jika pada ekstraksi file awal, terjadi perubahan nama folder dari vendor ke assets.

Untuk memperbaikinya, buka lagi file views/overview.php. Kemudian cari link CSS dan JS yang ada.

Agar CodeIgniter dapat mengakses file CSS dan JSnya, gunakan fungsi base_url() agar konsisten. Contohnya bisa diambil dari gambar berikut:

Untuk mengakses halaman web, dapat diakses melalui alamat http://localhost/[nama_web]/index.php/admin/. Contoh tampilan yang didapatkan adalah seperti berikut:

Read More

Membuat Form HTML dengan PHP

Membuat Form HTML dengan PHP

   5:29 AM       Benito Dannes

---

Ini adalah hasil latihan saya membuat form HTML dengan PHP.

Berikut gambar formnya.

Gambar form yang akan diisi

Gambar setelah form di-submit

Read More