Tugas UAS PBKK - Contribution Based Evaluation

Tugas UAS PBKK - Contribution Based Evaluation

   12:54 PM       Benito Dannes

---

Latar Belakang

Coronavirus Disease 2019 atau COVID-19 adalah penyakit baru yang dapat menyebabkan gangguan pernapasan dan radang paru. Penyakit ini disebabkan oleh infeksi Severe Acute Respiratory Syndrome Coronavirus 2 (SARS-CoV-2). Gejala klinis yang muncul beragam, mulai dari seperti gejala flu biasa (batuk, pilek, nyeri tenggorok, nyeri otot, nyeri kepala) sampai yang berkomplikasi berat (pneumonia atau sepsis).

Penyakit ini menyebabkan banyak negara yang melaksanakan kebijakan Social Distancing atau Pembatasan Sosial Berbatas Besar (PSBB), termasuk di Indonesia. Hal ini membuat aktifitas normal masyarakat terganggu, seperti tidak boleh keluar untuk bekerja, sekolah diliburkan, dsb. Untuk itu, saya membuat website kursus online sebagai materi alternatif untuk masyarakat yang ingin mempelajari sesuatu yang lain di masa PSBB ini.

Deskripsi Website

Website ini adalah sebuah website media pembelajaran. Website ini berfungsi menjual kursus berbagai jenis materi kepada orang yang membutuhkan. Ada dua bagian dalam website ini, bagian user dan bagian admin. Bagian admin dapat melakukan managemen pada produk-produk yang ingin ditampilkan. Admin juga dapat melihat transaksi yang dilakukan user. Bagian user dapat melakukan pendaftaran akun dan transaksi pada produk.

Screenshot Website

Berikut adalah beberapa screenshot dari website saya:

Homepage

Pilihan kursus yang tersedia

Transaksi yang dilakukan user

Halaman Login dan Register

Product List di bagian Admin

Bagian history transaksi oleh user pada halaman Admin

Untuk website, saat ini masih belum dapat dipush dengan sukses.

Untuk video demo, bisa dilihat di link berikut: https://youtu.be/Yv7Au_LCWd8

Untuk file website, bisa didapatkan di link github berikut: https://github.com/BeniTama/PBKK-CodeIgniter/UAS/

Read More

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

Tugas 2 PBKK - Route dan Controller pada CodeIgniter

Tugas 2 PBKK - Route dan Controller pada CodeIgniter

   7:38 AM       Benito Dannes

---

Pada tugas kali ini saya akan membuat dua buah halaman pada website berbasis CodeIgniter yang telah saya buat pada tugas sebelumnya, yaitu halaman 'Contact Us' dan 'About Us'. Kedua halaman ini akan ditempatkan pada website, dan dapat dibuka dengan konfigurasi routes dan controller pada framework.

Untuk membuat kedua halaman, pertama ditambahkan route 'contact' dan 'about' pada file 'Welcome.php' yang terdapat pada folder 'controllers'.

Setelah itu, kedua file 'about.php' dan 'contact.php' dibuat di folder view. Ini akan membuat controller dapat memanggil page itu yang terdaftar dalam view.

Kemudian, route untuk mengakses kedua file tersebut didaftarkan dalam file 'routes.php' yang terdapat dalam folder 'config'.

Untuk mengakses halaman tersebut, karena masih belum ada link menuju kesana, bisa diakses melalui alamat berikut:

• http://localhost/biodata/index.php/contact
• http://localhost/biodata/index.php/about

Output dari kedua halaman itu adalah sebagai berikut:

About us

Contact Us

Read More

Tugas 1 PBKK - Framework Yang Pernah Dipakai dan Halaman Pertama CodeIgniter

Tugas 1 PBKK - Framework Yang Pernah Dipakai dan Halaman Pertama CodeIgniter

   8:13 AM       Benito Dannes

---

Framework Yang Pernah Dipakai

1. Bootstrap

Kelebihan dari Bootstrap: 

• Mudah digunakan
• Lebih mudah digunakan ketimbang koding CSS tanpa menggunakan Bootstrap
• Layout yang dibuat bisa lebih variatif dan lebih banyak dibandingkan cara biasa.
• Template yang menggunakan Bootstrap sangat banyak, dan lebih terstruktur dan dapat dibaca dengan jelas, jadi modifikasi pada template bisa dengan mudah dilakukan.

Kekurangan dari Bootstrap:

• Sulit memberikan tampilan yang sesuai di semua web browser

Kapan Menggunakan Bootstrap

Saya menggunakan bootstrap untuk beberapa proyek FP pada kuliah, terutama yang mengandalkan desain halaman berbasis web, misalnya PWeb dan IMK. Untuk PWeb, saya membuat sebuah sistem web database film, dengan login user dan admin. Untuk IMK, saya membuat sesuatu yang hampir sama namun dengan tema berbeda. Sayangnya, kedua proyek FP itu tidak saya backup dan dokumentasikan dengan baik, jadi screenshotnya tidak bisa ditampilkan.

Hello World Menggunakan CodeIgniter

Dibawah ini merupakan screenshot dari halaman pertama saya menggunakan CodeIgniter:

Berikut adalah source codenya: https://github.com/BeniTama/PBKK-CodeIgniter/tree/master/Tugas-1-Perkenalan

Read More