Modul WP2
Modul WP2
Segala puji syukur kepada Tuhan Yang Maha Esa karena berkat rahmatNya
penulisan modul Mata Kuliah Web Programming II dapat terselesaikan dengan baik.
Modul ini disusun untuk memenuhi kebutuhan mahasiswa dalam mata kuliah Web
Programming II yang disajikan dalam bentuk praktikum dan diharapkan dapat
membekali mahasiswa dalam memahami Pembuatan web dengan menggunakan
Framework Codeigniter.
Codeigniter merupakan salah satu framework terbaik yang ada saat ini. Banyak
website-website besar telah menggunakan codeigniter sabagai framwork utama dalam
membangun website maupun aplikasi. Selain kemudahkan dalam menggunakan,
codeigniter juga cepat, mudah di kustomisasi dan integrasikan dengan library atau
framework lainnya.
Penulis berharap Modul Web Programming II dapat menjadi acuan dan referensi
dalam membangun web aplikasi berbasis framework. Dimana pada penyusunan
materi web programming II mahasiswa mendapatkan materi dari pertemuan 1 s/d 10,
pada pertemuan 11 akan dilakukan review materi, selanjutnya pada pertemuan 12 a/d
15 mahasiswa mempresentasikan hasil dari membangun web berbasis framework
yang dimana kelompok dan tema sudah ditentukan pada awal kontrak perkuliahan.
Penilaian hasil dari presentasi projek kelompok mahasiswa akan menjadi nilai ujian
akhir semester.
Penulis menyadari sepenuhnya bahwa modul ini tentu memiliki banyak
kekurangan. Untuk itu penulis dengan lapang dada menerima masukan dan kritik
yang konstruktif dari berbagai pihak demi kesempurnaannya di masa yang akan
datang. Semoga modul ini dapat bermanfaat bagi para pembaca.
2
Daftar Isi
3
Membuat View di Codeigniter 4.................................................................................. 38
Cara Membuat View ............................................................................................ 38
Cara Menampilkan View ..................................................................................... 38
Cara Menampilkan Views di dalam Subdirektori ................................................ 39
Mengakses Multiple View ................................................................................... 40
Menampilkan data dari Controller ke View......................................................... 42
Menampilkan data berupa array dari controller ke view menggunakan Looping 43
Membuat Model dan Interaksi Database melalui model di Codeigniter 4 .................. 46
Cara Membuat Model .......................................................................................... 46
Cara Mengakses Model........................................................................................ 46
Persiapan Database & Koneksikan Codeigniter dengan database ............................... 49
Koneksikan Codeigniter 4 dengan database ........................................................ 50
Konfigurasi Model agar dapat mengakses database ............................................ 50
Perintah Insert Data.............................................................................................. 54
Perintah Update Data ........................................................................................... 55
Perintah Save ....................................................................................................... 56
Method Save untuk update data ........................................................................... 57
Method Save untuk insert data ............................................................................. 57
Method Save untuk update tanpa array ................................................................ 58
Perintah Delete ..................................................................................................... 59
Menghapus data dengan beberapa ID .................................................................. 59
Menghapus data dengan perintah where .............................................................. 60
Menghapus Permanent Seluruh data dari fitur SoftDeletes ................................ 60
Menghapus Data secara permanen....................................................................... 60
Menampilkan Data ............................................................................................... 60
Menggunakan method find ................................................................................. 60
Menggunakan method find Column .................................................................... 61
Menggunakan method findAll ............................................................................ 62
Menggunakan method findAll dengan withDeleted ............................................ 63
Ujian Tengah Semester ................................................................................................ 64
Membuat Layout / Template di Codeigniter 4 ............................................................. 65
Preview Tampilan Template ................................................................................ 66
Membuat View untuk bagian template ................................................................ 66
Mengatur bagian content agar bersifat dinamis ................................................... 68
Menggunakan Layout dibagian View .................................................................. 71
Method Include untuk menambahkan View Partial............................................. 73
Penanganan Form dan Form Validasi di Codeigniter 4 ............................................... 79
Buat Sebuah Controller Siswa ............................................................................. 79
Membuat File View dengan nama formSiswa.php .............................................. 79
Mengakses Inputan Form di Controller ....................................................... 81
MEMBUAT VALIDASI FORM ......................................................................... 83
Testing Form Validation ...................................................................................... 85
Hasil Akhir ........................................................................................................... 86
PRESENTASI PROJEK .............................................................................................. 89
Tugas Projek (Kelompok) .................................................................................... 89
UJIAN AKHIR SEMESTER ....................................................................................... 91
DAFTAR PUSTAKA .................................................................................................. 92
4
Apa Sih Pemrograman Web?
Dalam semua ilmu tentang pemrograman baik itu desktop, mobile, game maupun
software atau aplikasi lainnya pasti selalu ada bahasa-bahasa pemrograman yang
digunakan untuk membuat aplikasi tersebut yang berisi statement-statement, perintah,
atau pun fungsi agar aplikasi yang dibuat sesuai dengan apa yang telah didesain oleh
si programmer. Oleh karena itu pemrograman web pun memiliki banyak bahasa yang
digunakan, di antaranya:
• HyperText Markup Language (HTML)
HTML sebenarnya bukan sebuah bahasa pemrograman, melainkan markup
language atau bahasa penandaan yang terdiri dari kumpulan tag. Pada dasarnya
HTML hanya mendeskripsikan bahwa bagian tertentu dalam sebuah halaman web
adalah isi yang harus ditampilkan oleh browser dengan cara tertentu. HTML
merupakan standar internet yang didefinisikan dan dikendalikan oleh World Wide
Web Consortium (W3C).
• Cascading Style Sheet (CSS)
CSS merupakan bahasa stylesheet yang digunakan untuk mengatur tampilan suatu
dokumen yang ditulis dengan HTML. CSS juga memiliki css framework dan
digunakan untuk menambah desain-desain tertentu pada halaman web agar desain
halaman menarik untuk dilihat. Penggunaan CSS paling umum adalah untuk
mengatur halaman web yang ditulis dengan HTML atau XHTML.
• Hypertext Preprocessor (PHP)
Bahasa pemrograman PHP merupakan salah satu bahasa scripting yang wajib
dikuasai oleh seorang web developer. Karena sifatnya yang server-side scripting,
maka untuk menjalankan bahasa pemrograman PHP tidak bisa hanya memanggil file
yang berekstensi PHP saja. Bahasa pemrograman PHP memerlukan sebuah web
server untuk menjalankannya. PHP juga dapat diintegrasikan dengan HTML,
JavaScript, jQuery, Ajax dan lain sebagainya. Akan tetapi pada umumnya bahasa
pemrograman PHP digunakan bersamaan dengan file yang bertipe HTML agar file
tersebut dapat menjalankan berbagai fungsi.
• JavaScript
JavaScript adalah bahasa scripting yang berjalan pada sisi client. Maksudnya
adalah pemrosesan script dilakukan sendiri pada komputer user. Biasanya JavaScript
digunakan untuk membuat animasi-animasi dan bentuk interaktif lain pada halaman
web. Terbukti dari banyaknya library-library JavaScript yang dapat digunakan
oleh programmer untuk membuat halaman web yang dibuat menjadi lebih interaktif.
Untuk menjalankan script yang ditulis dalam JavaScript, kita membutuhkan browser
5
yang mendukung dan mampu menjalankan JavaScript atau sering disebut
dengan javascript-enabled browser.
• Structured Query Language (SQL)
SQL merupakan domain-spesific language yang digunakan untuk mengolah data
dalam Relational Database Management System (RDBMS). Aplikasi RDBMS yang
banyak digunakan oleh para programmer aplikasi web untuk mengolah basis data
mereka adalah MySQL. Biasanya digunakan fungsi-fungsi dalam bahasa
pemrograman PHP untuk membuat, membaca, mengubah atau pun menghapus data
dalam SQL yang kemudian dapat ditampilkan pada halaman web.
Selain bahasa di atas, bisa dikatakan hampir semua bahasa pemrograman dapat
digunakan dalam pemrograman web selama bahasa tersebut dapat bekerja dalam web
server dan dapat menciptakan HTML, XML, dan XHTML. Beberapa bahasa
pemrograman web yang populer di antaranya yaitu PHP, ASP.NET, Ruby on Rails,
PERL, ASP classic, Python, dan JSP.
6
Mengenal Apa itu Framework
Fungsi Framework
Jenis-Jenis Framework
Ada beragam jenis framework yang sering digunakan untuk membuat website.
Setiap framework memiliki fungsinya masing-masing dan juga menggunakan bahasa
pemrograman yang berbeda juga. Nah, berikut ini adalah jenis-jenis framework untuk
membuat suatu website.
⚫ Framework CSS
Cascading Style Sheet atau yang disingkat menjadi CSS adalah bahasa
pemrograman yang digunakan untuk mengatur layout dan tampilan pada HTML agar
menjadi lebih menarik. Biasanya CSS ini dibuat oleh front end developer. Berikut ini
adalah beberapa contoh dari framework CSS.
• Bootstrap
Yang pertama adalah Bootstrap. Framework ini memiliki tampilan yang modern,
dinamis, dan juga lebih ramah pengguna. Fitur lain dari framework ini adalah website
yang dibuat menggunakan bootstrap ini akan responsive jika dibuat dengan mengikuti
aturan-aturan yang disediakan bootstrap.
7
• Semantic UI
Framework ini memiliki kelebihan dalam penulisan class yang lebih mudah
dibandingkan framework lain. Selain itu ia juga menyediakan banyak komponen UI
yang berguna untuk membuat tampilan HTML menjadi lebih menarik.
• Materialize
Framework ini dibuat dengan tujuan untuk mengembangkan desain yang
memungkinkan pengguna merasakan pengalaman yang serupa saat menggunakan
produk di semua platform. Materialize ini mengadaptasi Material Design yang dibuat
dan dikembangkan oleh Google.
⚫ Framework JavaScript
JavaScript merupakan bahasa pemrograman yang sering digunakan oleh para
front end developer dalam pembuatan tampilan website menjadi lebih interaktif.
JavaScript merupakan bahasa pemrograman yang berjalan pada sisi front end dan
masuk ke dalam golongan bahasa pemrograman tingkat tinggi. Berikut ini merupakan
beberapa framework JavaScript yang sering digunakan.
• AngularJS
Framework AngularJS ini bersifat open source dan ia berjalan pada sisi client
dengan menggunakan konsep MVC untuk membuat tampilan dari website menjadi
lebih dinamis.
• ReactJS
ReactJS adalah framework yang dikembangkan oleh Facebook. Ia sering
digunakan untuk membuat UI untuk suatu website atau aplikasi mobile karena
ReactJS ini dapat digunakan secara multi platform. ReactJS ini merupakan inti dari
React Native yang dapat memungkinkan kamu untuk mengembangkan aplikasi
mobile di dua sistem operasi secara bersamaan, yaitu Android dan iOS.
⚫ Framework PHP
• CodeIgniter
CodeIgniter atau dapat disingkat menjadi CI merupakan framework dengan
arsitektur yang khas, yaitu arsitektur MVC (Model, View, controller). Dengan begitu
kamu dapat menulis kode dengan lebih terstruktur dan spesifik.
• Laravel
Laravel ini biasanya digunakan oleh para developer untuk mengembangkan
website dengan kompleksitas yang tinggi. Ia memiliki library yang lengkap serta
memilih sintaksis atau kode yang elegan, ringkas, dan rapi.
• Symfony
Symfony ini cocok digunakan untuk mengembangkan website dengan skala yang
besar dan kompleks. Ia juga memakan sedikit memori jika dibandingkan dengan
framework lainnya dan menghasilkan performa yang tinggi.
8
Jadi, Apa itu Framework?
Jadi, itulah pembahasan kali ini. Framework ini dapat diartikan sebagai kerangka
kerja yang digunakan untuk mempermudah web developer dalam mengembangkan
website. Banyak fungsi yang menguntungkan para developer jika ia menggunakan
framework ini seperti dapat menghemat waktu dan biaya pembuatan aplikasi. Kamu
juga dapat menggunakan berbagai jenis framework sesuai dengan kebutuhanmu. Ada
tiga jenis framework yang sering digunakan oleh para web developer, yaitu
framework CSS, framework JavaScript, dan framework PHP.
Masing-masing framework memiliki fungsi dan kegunaan masing-masing ya, jadi
pilihlah framework yang sesuai dengan kebutuhanmu.
9
Rekomendasi Framework PHP Populer di 2021
Jika dulu proses pembuatan sebuah website terkenal sangat rumit dan memakan
banyak waktu? Itu karena tidak adanya struktur paling dasar yang membantu para
developer dalam membuat sebuah website. Namun sejak munculnya beragam
framework PHP proses pembuatan website terasa lebih cepat dan mudah.Mengapa
membuat website dengan framework akan terasa lebih mudah? Hal itu karena
framework menyediakan struktur dasar untuk sebuah website. Terlebih, PHP adalah
salah satu bahasa pemrograman yang banyak digunakan oleh web developer.
Pada pembahasan kali ini, kami akan memberikan informasi mengenai
framework PHP. Mulai dari alasan menggunakan framework PHP sampai dengan
rekomendasi framework PHP yang populer di tahun 2021.
Ada banyak alasan mengapa kamu dapat menggunakan framework PHP untuk
membangun websitemu, berikut adalah beberapa alasannya.
10
Selain itu kamu juga tidak perlu khawatir perihal perawatan dari inti framework,
karena hal tersebut sudah dilakukan oleh pengembang framework.
Jadi kamu sudah tau kan apa itu framework PHP dan alasan menggunakannya?
Nah, sekarang kita masuk ke dalam pembahasan utama, yaitu framework PHP
terpopuler di tahun 2021. Simak baik-baik ya, siapa tau kamu tertarik untuk
menggunakan salah satu framework ini dalam membuat website.
⚫ Laravel
Yang pertama adalah Laravel. Framework ini sangat populer di kalangan web
developer dan diperkenalkan pada tahun 2011. Laravel memiliki sintaksis atau
kode yang elegan, ringkas, dan rapi. Ia digunakan untuk mengembangkan
website yang memiliki tingkat kompleksitas yang tinggi. Selain itu, kelebihan
lain dari Laravel adalah memiliki library yang lengkap, kemampuan yang dapat
diandalkan, dan komunitas yang cukup besar.
⚫ CodeIgniter
Berikutnya adalah CodeIgniter atau disingkat menjadi CI. Framework ini
diluncurkan pada tahun 2006 dan memiliki arsitektur yang khas yaitu Model
View Controller (MVC). Melalui arsitektur MVC, kode yang ditulis lebih
terstruktur karena ia dipisahkan berdasarkan tugas secara spesifik. Jika kamu
adalah developer yang baru ingin mempelajari framework PHP, CodeIgniter ini
dapat menjadi pilihan yang tepat, karena mudah untuk dipahami. Tetapi di balik
kemudahannya itu, framework ini memiliki beberapa kekurangan seperti
library-nya yang kurang lengkap dan proses testing yang cukup rumit.
⚫ Symfony
Selanjutnya adalah Symfony. Jika diurutkan dari yang paling populer symfony ini
menempati urutan ketiga setelah Laravel dan CodeIgniter. Meski diluncurkan
pada tahun 2005, Symfony masih digunakan dalam mengerjakan berbagai proyek,
baik proyek kecil maupun besar. Framework ini cocok digunakan dalam
mengembangkan website yang berskala besar dan kompleks. Kelebihan dari
framework ini adalah dapat mengonsumsi memori lebih sedikit ketimbang
framework lain serta menghasilkan performa yang tinggi. Kamu tidak perlu
khawatir ketika menggunakan Symfony karena ia memiliki komunitas yang
cukup besar.
⚫ CakePHP
Berikutnya ada CakePHP. Framework ini sudah banyak digunakan oleh ribuan
website, baik website yang bersifat statis maupun dinamis. Alasan CakePHP ini
banyak digunakan adalah karena ia dapat mencegah terjadinya SQL Injection,
mendukung MVC, dan mudah untuk dikonfigurasi.
⚫ Yii Framework
Yang terakhir adalah Yii Framework. Framework ini memiliki keamanan dan
kinerja yang baik.. Karena alasan itu ia sangat sesuai digunakan untuk
mengembangkan website modern. Framework ini memiliki kelebihan seperti
mudah untuk dipelajari, memiliki fitur keamanan yang baik, dan dapat
diintegrasikan dengan jQuery.
11
Model View Controller(MVC)
Pengertian MVC
Model View Controller atau yang dapat disingkat MVC adalah sebuah pola
arsitektur dalam membuat sebuah aplikasi dengan cara memisahkan kode menjadi tiga
bagian yang terdiri dari:
⚫ Model
Bagian yang bertugas untuk menyiapkan, mengatur, memanipulasi, dan
mengorganisasikan data yang ada di database.
⚫ View
Bagian yang bertugas untuk menampilkan informasi dalam bentuk Graphical
User Interface (GUI).
⚫ Controller
Bagian yang bertugas untuk menghubungkan serta mengatur model dan view
agar dapat saling terhubung.
Setelah kamu mengetahui penjelasan dan komponen dari MVC, sekarang kita
akan membahas alur proses dari MVC. Berikut ini adalah alur prosesnya.
⚫ Proses pertama adalah view akan meminta data untuk ditampilkan dalam bentuk
grafis kepada pengguna.
⚫ Permintaan tersebut diterima oleh controller dan diteruskan ke model untuk
diproses.
⚫ Model akan mencari dan mengolah data yang diminta di dalam database
⚫ Setelah data ditemukan dan diolah, model akan mengirimkan data tersebut
kepada controller untuk ditampilkan di view.
⚫ Controller akan mengambil data hasil pengolahan model dan mengaturnya di
bagian view untuk ditampilkan kepada pengguna.
12
Manfaat dari MVC
Ada beragam manfaat ketika kamu menerapkan MVC ini dalam pembuatan
aplikasi kamu. Berikut ini adalah manfaatnya.
⚫ Proses pengembangan aplikasi menjadi lebih efisien
Penggunaan MVC dapat mempercepat pengembangan aplikasi karena kode dapat
dikerjakan oleh beberapa developer. Contohnya dalam kasus pengembangan
aplikasi web, bagian model dan controller dapat dikerjakan oleh back-end
developer sedangkan bagian view dapat dilakukan oleh front-end developer.
⚫ Penulisan kode menjadi lebih rapi
Karena dibagi menjadi tiga bagian, maka penulisan kode akan jadi lebih rapi dan
memudahkan developer lain untuk mengembangkan kode tersebut.
⚫ Dapat melakukan testing dengan lebih mudah
Untuk memastikan seluruh aplikasi bekerja sesuai dengan rencana maka langkah
testing atau uji coba wajib dilakukan. Dengan menggunakan model view
controller ini, maka proses uji coba dapat dilakukan pada setiap bagian.
⚫ Perbaikan bug atau error lebih cepat untuk diselesaikan
Penggunaan MVC dapat memudahkan developer untuk memperbaiki error atau
bug yang terjadi. Developer dapat fokus untuk menemukan dan memperbaiki
masalah yang terjadi karena kode dituliskan pada bagian-bagian terpisah.
⚫ Mempermudah pemeliharaan
Konsep MVC ini dapat mempermudah pemeliharaan aplikasi, karena script atau
kode yang lebih rapi dan terstruktur sehingga mempermudah developer dalam
proses pemeliharaan aplikasi.
Untuk framework PHP, ada cukup banyak dan hampir semuanya menggunakan
konsep MVC:
⚫ Laravel
⚫ Symfony
⚫ CakePHP
⚫ Zend
⚫ Yii Framework
⚫ Codeigniter (versi 3 kebawah sudah tidak recommended untuk dipelajari) dll
Untuk framework Python di antaranya:
⚫ Django
⚫ Turbogears2
⚫ Watson-Framework
Untuk framework Nodejs di antaranya:
⚫ Express
⚫ Adonis
⚫ Sails.js
⚫ Total.js
⚫ Mean.js
⚫ Mojito
Dari tulisan ini telah jelaslah mengenai konsep dasar MVC. Dengan memiliki
pemahaman terhadap konsep ini, kita tidak akan menemukan kesulitan yang berarti
13
ketika mempelajari framework baru. Karena framework-framework tersebut bekerja
dengan arsitektur yang kita sudah nyaman dengannya.
Contoh Kasus
14
CodeIgniter
Beberapa hal yang mungkin Anda inginkan dan Anda butuhkan dalam
membangun sebuah website maupun aplikasi:
⚫ Anda menginginkan framework dengan tapak kecil.
⚫ Anda membutuhkan kinerja yang luar biasa.
⚫ Anda menginginkan framework yang membutuhkan konfigurasi hampir nol.
⚫ Anda ingin sebuah framework yang tidak mewajibkan Anda menggunakan
command line.
⚫ Anda menginginkan framework yang tidak mewajibkan Anda untuk mematuhi
aturan coding yang terbatas.
⚫ Anda tidak tertarik dengan perpustakaan monolitik skala besar seperti PEAR.
⚫ Anda menghindari kerumitan, menyukai solusi sederhana.
⚫ Anda membutuhkan framework dengan dokumentasi yang jelas dan menyeluruh.
Jika semua hal di atas Anda butuhkan dan Anda inginkan, maka CodeIgniter
adalah jawaban dari semua kebutuhan Anda. Saat ini CodeIgniter telah meningkatkan
layanannya dengan mengeluarkan CodeIgniter 4. Apa bedanya dengan CodeIgniter 3?
berikut penjelasnya selengkapnya pada segmen berikut.
Sebenarnya, CodeIgniter versi 4 sudah dilaunching sejak tahun 2020. Akan tetapi
tidak banyak developer yang menyadari hal tersebut. Hal ini dikarenakan banyak
orang yang sudah terlanjur senang dengan CodeIgniter atau framework PHP lainnya
yang lebih canggih seperti Laravel.
15
Ya, bisa dibilang CodeIgniter merupakan framework PHP yang cukup
ketinggalan zaman, di mana CodeIgniter 3 sudah ada bertahun-tahun lalu. Berbeda
dengan Laravel yang setiap waktu terus menerus memperbarui versinya.
Namun, bukan berarti versi ke-4 dari CodeIgniter ini tidak kalah bagus karena
ada banyak peningkatan yang dilakukan dari versi ketiga. Ini dia perbedaan
CodeIgniter 3 dan CodeIgniter 4:
⚫ Dukungan Versi PHP, CodeIgniter 4 dapat digunakan pada PHP minimal versi
7.2. sementara CodeIgniter 3 dapat beroperasi di PHP versi 5.6, yang mana PHP
versi tersebut telah di-discontinued.
⚫ Pengorganisasian direktori, Struktur file kedua versi ini benar-benar berbeda.
CodeIgniter versi 4 mempunyai struktural yang dibagi ke dalam 5 direktori:
/app,/system,/public,/writable,/tests. Sedangkan CodeIgniter 3 diatur dalam 2
direktori:/applicationand/system`.
⚫ Penggunaan Namespace, CodeIgniter versi 4 sepenuhnya ditulis dalam PHP 7.
Versi terbaru ini juga menggunakan namespace, sedangkan CodeIgniter 3 tidak
menggunakan namespace.
⚫ Autoloading, CodeIgniter4 mempunyai proses autoloading yang sangat efisien
bahkan jauh lebih efisien dari versi sebelumnya. Salah satu faktor yang
membantu hal ini adalah penggunaan namespace. Sementara di CodeIgniter 3,
sebagian besar file yang akan dimuat harus dikonfigurasi secara manual.
⚫ Penggunaan Entitas, CodeIgniter4 memiliki dukungan asli (native support) untuk
penggunaan Entitas yang membantu dalam menyusun bagian database dari suatu
aplikasi, yang mewakili kolom yang ada dalam tabel. CodeIgniter 3 tidak
memiliki fitur ini dan Anda perlu menggunakannya perlu menggunakan
perpustakaan pihak ketiga dan melakukan penyesuaian pada unggahan file untuk
mendukungnya.
⚫ Performa, CodeIgniter versi 4, untuk penggunaan PHP 7 secara tertulis dan
sebagai konfigurasi minimum pada server, dan aspek lainnya, memiliki kinerja
yang lebih baik daripada CodeIgniter 3.
⚫ Pustaka Monolitik, Tidak seperti CodeIgniter 3, dalam versi baru ini penggunaan
perpustakaan monolitik dalam gaya PEAR hampir nol.
⚫ Pengaturan, Dengan versi terbaru CodeIgniter ini, pengaturan awal agar aplikasi
Anda mulai berjalan minimal, sedangkan di CodeIgniter 3 perlu melakukan
sejumlah konfigurasi yang baik.
⚫ Dukungan asli untuk file .env
⚫ CodeIgniter versi terbaru ini memiliki dukungan asli untuk file .env,
memungkinkan pengoptimalan pengaturan lingkungan yang berbeda di mana ia
mungkin berjalan (produksi, pengujian, pengembangan). Fitur ini tidak ada secara
native di CodeIgniter 3.
⚫ Migrasi antara 2 versi, CodeIgniter 4 tidak kompatibel ke belakang, sehingga
proses memperbarui aplikasi dari versi 3 ke versi 4 akan membutuhkan sedikit
lebih banyak pekerjaan, tetapi sama sekali tidak rumit.
Sementara migrasi dari versi 2.x ke 3.x, dan antara versi 3.x yang berbeda hanya
menimpa file di direktori / sistem dan memperbarui nama beberapa file, dari versi 3
ke versi empat diperlukan struktur baru untuk aplikasi dan penulisan ulang semua
kelas yang digunakan di dalamnya untuk beradaptasi dengan standar baru.
16
Dasar-Dasar Penggunaan CodeIgniter 4
CodeIgniter versi keempat mendukung PHP versi 7.2+, jika server web Anda
tidak mendukung PHP 7.2+, kami sarankan untuk mengupgrade versi PHP Anda jika
ingin menggunakan versi terbaru ini. Selain itu, CodeIgniter 4 juga tidak dapat
berjalan jika server web Anda tidak mengaktifkan ekstensi intl, php-json,
php-mbstring, php-mysqlnd, dan php-xml.
Untuk menggunakan CURLRequest, Anda perlu menginstal libcurl. Database
sangat dibutuhkan pada sebagian besar pemrograman aplikasi web. Database yang
mendukung CodeIgniter versi terbaru saat ini adalah:
• MySQL (5.1+) melalui driver MySQLi
• PostgreSQL melalui driver Postgre
• SQLite3 melalui driver SQLite3
• MSSQL melalui driver SQLSRV (hanya versi 2005 ke atas)
Tidak semua driver telah dikonversi/ditulis ulang untuk CodeIgniter4. Penjelasan
tentang driver database akan dijabarkan sebagai berikut:
• MySQL (5.1+) melalui driver pdo
• Oracle melalui driver oci8 dan pdo
• PostgreSQL melalui driver pdo
• MSSQL melalui driver pdo
• SQLite menggunakan sqlite versi kedua dan driver pdo
• CUBRID melalui driver cubrid dan pdo
• Interbase/Firebird melalui driver ibase dan pdo
• ODBC yang digunakan melalui driver odbc dan pdo (Anda harus tahu bahwa
ODBC sesungguhnya adalah lapisan abstraksi)
Saat tutorial ini dibuat codeigniter berada di versi 4.0.3, dan untuk
mengisntallnya anda memerlukan server requirement seperti berikut ini :
• Versi PHP >= 7.2
• intl & mbstring extention yang harus diaktifkan
• jika anda menggunakan CURL Request anda membutuhkan libcurl yang
terinstall
17
Install CodeIgniter 4
Untuk proses instalasi dari codeigniter 4 bisa anda lakukan dengan beberapa cara
antara lain :
• Instalasi Secara Manual
• Instalasi Menggunakan Composer
Sebelum proses instalasi, pastikan anda menggunakan versi PHP >= 7.2, secara
terinstall extention yang dibutuhkan, bisa dilihat dulu spesifikasi yang dibutuhkan di
codeigniter 4. kita akan membahasnya menggunakan cara manual terlebih dahulu.
1. klik dibagian tombol “Download” maka anda akan mendownload file installer
codeigniter 4, dengan nama framework-4.0.3.zip (karena saat tutorial ini dibuat
berada di versi 4.0.3)
2. Copy di dalam folder htdocs/ dan ekstrak.
3. Ubah nama folder misalnya: codeigniter4
Setelah kita belajar bagaimana cara menginstall dengan cara manual, berikutnya
kita akan belajar menginstall dengan menggunakan composer. nah mungkin
teman-teman sudah menggunakan cara install manual, dan memberikan nama ci4app
pada folder codeigniter, ada baiknya teman – teman hapus dulu, karena di instalasi
dengan composer kita akan berikan nama yang sama pada folder yaitu ci4app
Pastikan anda sudah menginstall composer ya, untuk download composer bisa
mengakses halaman berikut ini : https://getcomposer.org/download/ Untuk proses
instalasi silahkan buka CMD / Terminal, lalu berikutnya arahkan folder di CMD itu
berada di direktori web server anda, dalam contoh ini adalah C:/xampp/htdocs lalu
tuliskan perintah :
18
composer create-project codeigniter4/appstarter ci4app
Keterangan :
ci4app adalah nama folder yang akan terbuat dan berisi file codeigniter 4
Tunggu proses instalasinya, lama instalasi tergantung koneksi internet yang anda
gunakan. jika selesai tampilan di CMD / Terminal akan menjadi seperti berikut ini :
Ketika proses instalasi dengan composer selesai, maka didalam folder htdocs
akan terdapat folder dengan nama ci4app, folder ini sesuai perintah yang digunakan
saat menginstall codeigniter4 menggunakan composer sebelumnya.
Untuk teman – teman yang menemui masalah yang mengatakan kita belum
mengaktifkan extention intl, masalah ini ditemui saat kita menginstall dengan
menggunakan composer. Cara untuk mengatasinya adalah sebagai berikut, silahkan
buka file php.ini, karena saya menggunakan xampp sehingga saya perlu membuka file
php.ini yang berada di C:/xampp/php/php.ini, bisa dibuka menggunakan text editor
semacam notepad saya asumsikan teman – teman sudah membuka file php.ini
Kemudian cari tulisan seperti ini extension=intl, hilangkan tanda titik koma
diawal sehingga kurang lebih seperti ini :
;extention=intl
menjadi
extention=intl
setelah itu restart service apache
Menjalankan Codeigniter 4
19
Mengakses dengan local development server
20
Cara Membuat Controller
namespace App\Controllers;
21
Penjelasan :
Kita akan bahas untuk file Controllers Siswa.php, pada line 3 kita menuliskan
namespace App\Controllers.
Line 5 kita buat class dengan nama Siswa, class ini kita extends dengan
BaseController. didalam class Siswa kita buat method dengan nama index (Line 7),
dimana didalamnya kita tuliskan perintah untuk menampilkan text dengan
menggunakan echo, text yang ditampilkan adalah “Halo ini adalah controller Siswa”
Method index adalah method yang pertama akan diakses ketika controller diakses,
sehingga saat kita mengakses controller Siswa yang diakses adalah method index.
Catatan Penting : Nama class untuk controller harus diawali huruf Kapital, dan
hanya karakter pertama yang dapat menggunakan huruf besar
Contoh penulisan class yang benar :
<?php namespace App\Controllers;
use CodeIgniter\Controller;
}
Contoh Penulisan class yang salah :
<?php namespace App\Controllers;
use CodeIgniter\Controller;
}
<?php namespace App\Controllers;
use CodeIgniter\Controller;
Setelah anda belajar mengenai pembuatan class untuk controller, berikutnya anda
akan belajar mengenai method di dalam controller. Pada contoh sebelumnya kita
sudah membuat method dengan nama index, dimana method dengan nama index,
22
adalah method yang otomatis diakses secara default, jika pada URL kita tidak
menuliskan nama method setelah nama Controller.
Sebagai contoh kita akan menambahkan method nama semisal, sehingga isi
controller menjadi seperti berikut ini :
<?php
namespace App\Controllers;
}
Kemudian berikutnya coba akses method nama, dengan menggunakan URL :
localhost/ci4app/public/siswa/nama
hasilnya adalah sebagai berikut :
Keterangan :
Maka akan menampilkan text “ini adalah method nama di controller Siswa” hal
tersebut dikarenakan kita mengakses method nama, terlihat saat kita mengakses URL
kita menuliskan nama method, setelah nama controller.
23
PASSING URI Segment ke Method Controller
Berikutnya kita akan belajar untuk passing data melalui URI Segment, dimana data
ini dapat digunakan sebagai parameter method di controller. Anda bisa mengirimkan
data lebih dari satu melalui URI ini.. Sebagai contoh kita akan modifikasi code
controller Siswa yang sebelumnya sudah kita buat :
<?php
namespace App\Controllers;
echo "Nama Saya adalah " . $nama . " , Usia " . $usia;
}
Keterangan :
Kita menambahkan parameter dibagian method nama, kita buat 2 parameter,
yaitu nama dan usia (Line 12)
parameter ini kita tulis sebagai bentuk variabel yaitu $nama, $usia
Berikutnya coba gunakan url ini untuk mengakses method nama di class siswa.
http://localhost/ci4app/public/siswa/nama/taufik/17
Hasilnya akan menampilkan tampilan sebagai berikut :
Keterangan :
kita analisa dulu url yang digunakan untuk mengakses :
http://localhost/ci4app/public/siswa/nama/taufik/17
24
• http://localhost/ci4app/public : ini adalah url utama dari project codeigniter 4
kita, karena dalam contoh ini kita tidak menjalankan local development server
bawaan codeigniter.
• siswa : ini adalah nama controller
• nama : ini adalah nama method didalam controller
• taufik : ini adalah data pertama yang dipassing melalui URI Segment, taufik
ini akan dijadikan nilai dari variabel $nama didalam method nama controller
siswa
• 17 : ini adalah data kedua yang dipassing melalui URI Segment, 17 ini akan
Dijadikan nilai dari variabel $usia didalam method nama controller siswa
jadi bisa kita simpulkan kita mengirimkan 2 parameter, untuk nama = taufik, dan usia
= 17 kedalam method nama didalam controller Siswa. Berikutnya karena didalam
method nama kita menuliskan perintah sebagai berikut :
echo "Nama Saya adalah " . $nama . " , Usia " . $usia;
Sehingga didalam tampilan web muncul sebagai berikut : Nama Saya adalah taufik ,
Usia 17
namespace App\Controllers;
25
Lalu coba kita mengakses method testing menggunakan URL berikut :
http://localhost/ci4app/public/siswa/testing
Maka hasilnya adalah sebagai berikut ini :
Maka akan terdapat pesan 404 File Not Found, hal ini dikarenakan untuk bagian
method testing kita berikan visibility protected yang menyebabkan, method itu
bersifat private.
26
Catatan Penting : Nama folder harus diawali dengan huruf besar, dan hanya 1
karakter pertama yang menggunakan huruf besar. Berikutnya untuk isi code dari file
Users.php adalah sebagai berikut :
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
Keterangan :
Pada bagian url kita tuliskan nama sub direktori sebelum menuliskan nama
controllernya.
http://localhost/ci4app/public/admin/users
Terlihat kita menuliskan admin, sebelum kita menuliskan nama controller users
pada bagian controller kita merubah bagian namespace dengan menambahkan nama
subdirektori sehingga menjadi seperti berikut (line 30)
namespace App\Controllers\Admin;
Berikutnya kita tambahkan perintah dibawah ini :
use App\Controllers\BaseController;
agar tetep dalam extends basecontroller didalam controller tersebut.
27
Mengatur Routing di Codeigniter 4
Mengenal Routing
Routing adalah sebuah fitur yang disediakan oleh codeigniter 4, fitur ini
digunakan untuk mengatur ketika pengguna aplikasi mengakses URL tertentu apa sih
yang akan dilakukan oleh Codeigniter ?
Akan diarahkan ke controller dan method mana ? hal ini sangatlah penting untuk
mengatur proses yang dilakukan codeigniter ketika ada request dari pengguna aplikasi.
Mungkin pembahasanya agak rumit ya… kita akan coba sederhanakan ya, perhatikan
URL berikut ini : www.example.com/profil
Diatas ada contoh sebuah URL, dimana URL utamanya adalah
www.example.com, berikutnya disitu ada tulisan profil, nah ketika kita mengakses
URL itu maka web akan memberikan response tampilan tertentu, nah hal seperti ini
diatur dibagian routing.
Routing mengatur jika ada request URL dari pengguna, apa sih yang akan
dilakukan oleh aplikasi web, itu fungsi dari routing. Walaupun codeigniter ini tidak
seperti laravel, yang mengharuskan setiap halaman harus kita buatkan routing,
codeigniter lebih dinamis, meskipun kita tidak menuliskan perintah di routing,
controller serta method didalamnya masih dapat kita akses dengan memperhatikan
URI Segment yang ada di Codeigniter, jadi disini akan saya singgung terkait
Penggunaan URI Segment di Codeigniter 4.
Perhatikan URL berikut ini : www.example.com/siswa/profil/12 Kita akan coba
membagi URL diatas menjadi beberapa bagian sesuai dengan URI Segment, menjadi
seperti berikut ini :
• www.example.com adalah URL utama dari web
• siswa adalah Segment 1 yang merupakan nama controller
• profil adalah Segment 2 yang merupakan nama methodnya
• 12 adalah Segment 3 yang merupakan nilai parameter pertama dari method
pada segment 2
Jadi jika diartikan URL diatas akan mengakses method profil pada controller
siswa, serta mengirimkan nilai angka 12 sebagai nilai dari parameter di method profil.
itu adalah URI Segment, jika anda tidak mendaftarkan controller atau method melalui
routing, anda bisa menggunakan URI segment ini untuk mengakses controller ataupun
method tanpa mendaftarkannya dibagian routing. Akan tetapi jika anda ingin
membuat URL yang custom, anda bisa memanfaatkan fitur routing.
28
Keterangan :
Pada baris perintah route tersebut ada 3 bagian yang perlu anda perhatikan :
⚫ pertama adalah HTTP Request Method, dalam contoh diatas adalah get, jika kita
isi dengan get, maka akan membaca URL yang kita tuliskan di URL Browser,
jika anda membuat pemrosesan terhadap entrian form bisa menggunakan post
⚫ kedua adalah URL yang akan digunakan, dalam contoh diatas kita menuliskan
‘/‘ artinya adalah mengakses halaman utama dari webnya
⚫ ketiga adalah controller dan method apa yang akan diakses saat pengguna aplikasi
mengakses url dibagian kedua.
Jadi keteika kita melihat contoh routing diatas, ketika kita mengakses halaman
utama dari web codeigniternya, maka codeigniter akan mengarahkan untuk
mengakses method index didalam controller Home.
Berikutnya kita akan belajar untuk menambahkan routing baru, untuk bahan
belajar, silahkan buat sebuah Controller dengan nama Siswa.
Buat file baru dengan Siswa.php dan simpan di folder app/Controllers, untuk isi
codenya adalah sebagai berikut ini :
<?php
namespace App\Controllers;
29
karena method yang otomatis diakses ketika kita tidak menulisnya di URI Segment
kedua setelah controller adalah method index
Berikutnya akses URL berikut ini :
http://localhost:8080/siswa/profil
maka akan menampilkan tulisan :
Ini adalah method profil di controller Siswa
Perhatikan dibagian URL kita menuliskan URI Segment 1 adalah siswa, dan URI
Segment 2 adalah profil, yang artinya kita mengakses method profil di bagian
controller siswa, sehingga menampilkan text “Ini adalah method profil di controller
Siswa”.
Lalu berikutnya bagaimana kalau kita ingin, saat kita mengakses URL seperti
dibawah ini :
http://localhost:8080/profil-siswa
tuliskan perintah diatas dibawah perintah routing :
$routes->get('/', 'Home::index');
Setelah itu kita coba mengakses URL berikut ini, jangan lupa menjalankan local
development server dulu ya, dengan perintah php spark serve :
http://localhost:8080/profil-siswa
Penjelasan :
kita analisa routing yang kita buat ya, coba perhatikan
$routes->get('/profil-siswa', 'Siswa::profil');
Perintah routing diatas memiliki arti : ketika pengguna aplikasi mengakses url
profil-siswa, jadi kalau dicontohkan dalam hal ini adalah localhost:8080/profil-siswa,
dengan menggunakan method GET artinya kita menuliskan di URL Browser maka
akan mengakses method profil di Controller Siswa, sehinga akan menampilkan tulisan
“Ini adalah method profil di controller Siswa”, seperti yang tertulis pada method
profil di controller Siswa.
Berikutnya kita akan membahas mengenai route name, route name adalah fitur
untuk memberikan nama terhadap routing yang kita buat. Sebagai contoh kita akan
memberikan nama pada routing yang barusan kita buat dengan nama profil, maka kita
perlu merubah perintah routing menjadi seperti berikut ini :
30
Kita menambahkan perintah [‘as’]=>’profil’ yang artinya routing ini kita berikan
nama profil. Baik setelah kita memberikan nama pada routing tersebut, lalu apa
fungsi ? dengan anda memberikan nama terhadap routing, anda bisa mengakses
routing menggunakan Link, sebagai contoh kita akan membuat link yang mengakses
routing dengan nama profil tersebut, sebagai contoh linknya akan kita letakkan di
method index di controller Siswa. ubah code controller Siswa menjadi seperti berikut
ini :
<?php
namespace App\Controllers;
31
Membuat Closure di Routing
Berikutnya kita akan membahas cara membuat closure di routing, jadi kita bisa
membuat function yang berisi perintah php, dimana akan dijalankan ketika routing
diakses, sebagai contoh kita akan menambahkan routing dengan nama coba, silahkan
buka file routing didalam folder : app/Config/Routes.php
berikutnya tambahkan code seperti berikut ini dibagian routing.
1 $routes->get('/coba', function () {
2 echo "Ini adalah route coba";
3 });
Berikutnya kita akan mengakses route coba tersebut, jangan lupa menjalankan
local development server dengan perintah :
php spark serve maka hasilnya adalah sebagai berikut ini :
Keterangan :
Akan menampilkan tulisan “Ini adalah route coba“, hal ini karena kita
menuliskan closure didalam route coba, dimana didalam function tersebut kita
menggunakan perintah echo untuk menampilkan text “Ini adalah route coba”
namespace App\Controllers;
32
{
echo "Halo ini adalah controller Siswa <a href='" . route_to('profil') . "'>Link ke
routing profil</a>";
}
Keterangan :
Kita bahas terlebih dahulu dibagian perintah routing.
1 $routes->get('data-siswa/(:alpha)/(:num)', 'Siswa::dataSiswa/$1/$2');
Routing tersebut, kita berikan URL data-siswa, dimana akan mengakses method
dataSiswa didalam Controller Siswa, tidak hanya itu, disitu kita berikan 2 parameter,
dimana parameter yang dikirimkan melalui URL ini akan dijadikan nilai parameter
pada method dataSiswa pada Controller Siswa. Berikutnya perhatikan dibagian
routing kita menyebutkan jenis parameter (placeholder) pertama adalah (:alpha) yang
artinya nilainya harus berupa huruf, dan dibagian parameter kedua (placeholder)
adalah (:num) yang artinya nilainya harus berupa angka,
Pada dokumentasi dari codeigniter 4, terdapat beberapa jenis placeholder yang
dapat digunakan :
⚫ (:any) digunakan untuk menangkap seluruh jenis inputan
⚫ (:segment) digunakan untuk menangkap seluruh jenis inputan kecuali forward
slash (/)
33
⚫ (:num) digunakan untuk menangkap angka
⚫ (:alpha) digunakan untuk menangkap data berupa huruf
⚫ (:alphanum) digunakan untuk menangkap data berupa huruf dan angka
⚫ (:hash) memiliki konsep yang sama dengna segment hanya saja.. ini lebih mudah
digunakan jika ketika id pada routing menggunakan hash
Maka akan menampilkan pesan error, karena kita melanggar aturan tipe
placeholder saat mengakses routing data-siswa.
Berikutnya kita akan belajar cara membuat multiple routing atau bisa dikatakan
routing dengan nama yang sama, tetapi kita bedakan tipe placeholdernya, sehingga
codeigniter akan mendeteksi tipe placeholder yang seperti apa yang digunakan, yang
akan menentukan method mana yang akan diakses.
dalam contoh ini kita akan buat 2 routing dengan nama “get-siswa” hanya saja kita
bedakan dibagian placeholdernya :
⚫ routing pertama akan menggunakan placeholder (:num) yang artinya
parameternya harus berupa angka
⚫ routing kedua akan menggunakan placeholder (:alpha) yang artinya parameternya
harus berupa huruf
Berikutnya kita akan buat 2 method baru didalam controller Siswa yaitu :
⚫ method siswaDataId yang akan digunakan untuk memproses saat placeholder
berupa (:num)
⚫ method siswaDataName yang akan digunakan untuk memproses saat placeholder
berupa (:alpha)
Baik kita tambahkan terlebih dahulu untuk 2 parameter tersebut didalam
controller Siswa, sehingga Controller Siswa menjadi seperti berikut ini :
34
<?php
namespace App\Controllers;
1 $routes->get('get-siswa/(:num)', 'Siswa::siswaDataId/$1');
2 $routes->get('get-siswa/(:alpha)', 'Siswa::siswaDataName/$1');
Keterangan :
kita buat 2 parameter dengan nama yang sama yaitu get-siswa, yang membedakan
hanyalah placeholder :
⚫ jika dibagian placeholder berupa angka (:num) maka akan mengakses method
siswaDataId di controller Siswa
⚫ jika placeholder berupa huruf (:alpha) maka akan mengakses method
siswaDataName di controller Siswa.
35
Baik kita akan coba untuk mengakses routing tersebut, jangan lupa untuk
menjalankan local development server dengan perintah “php spark serve” kita coba
mengakses URL : localhost:8080/get-siswa/3
Maka yang tampil adalah sebagai berikut :
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
36
}
}
Berikutnya silahkan buat file controller baru dengan nama Blog.php didalam
folder admin dengan isi code seperti berikut ini :
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
37
Membuat View di Codeigniter 4
Dalam tutorial – tutorial sebelumnya kita sudah sering memberikan contoh dalam
penggunaan views, tetapi disini kita akan jelaskan ulang bagaimana cara membuat
view di codeigniter 4, di direktori Codeigniter 4 file view disimpan pada folder
app/Views
Dalam contoh ini kita akan buat file view dengan nama product_page.php, file
tersebut simpan di dalam folder app/Views
untuk isi file view product_page.php bisa anda isi dengan code dibawah ini :
1 <html>
2 <head>
3 <title>Product Page</title>
4 </head>
5 <body>
6 <h1>Ini adalah halaman Product</h1>
7 </body>
8 </html>
Setelah kita membuat view, kita akan belajar cara untuk menampilkan view,
sebagai tampilan halaman aplikasinya. Kita akan buat Controller terlebih dahulu,
semisal dalam contoh ini kita buat controller dengan nama Product.php dan disimpan
didalam folder app/Controllers
Pada file Product.php isi dengan code seperti berikut :
1 <?php
2
3 namespace App\Controllers;
4
5 class Product extends BaseController
6 {
7 public function index()
8 {
9 return view('product_page');
10 }
11 }
Keterangan :
Perhatikan line 9 pada method index, kita menuliskan perintah :
1 return view('product_page');
Artinya saat method index pada controller Product diakses, maka akan
menampilkan file view dengan nama ProductPage. Selain menggunakan perintah
return anda juga bisa menggunakan perintah :
38
1 echo view('product_page');
jadi anda bisa juga mengganti perintah return menjadi echo. Berikutnya kita akan
mencoba mengaksesnya, kita jalankan dulu untuk local development servernya, kita
tuliskan perintah berikut ini di terminal :
1 php spark serve
Lalu akses menggunakan URL :
1 localhost:8080/product
Berikutnya kita akan belajar bagaimana menampilkan jika file view yang berada
didalam subdirektori, semisal kita buat file view dengan nama product_display.php,
file ini kita simpan didalam folder app/views/product untuk isi code didalam file
product_display.php adalah sebagai berikut :
1 <html>
2
3 <head>
4 <title>Product Display Page</title>
5 </head>
6
7 <body>
8 <h1>Ini adalah halaman Product Display</h1>
9 </body>
10
11 </html>
Berikutnya kita buat method baru dengan nama display, didalam controller
Product, dan didalam method display ini mengakses view product_display yang
barusan kita buat, sehingga untuk controller Product kurang lebih seperti berikut ini :
1 <?php
2
3 namespace App\Controllers;
4
5 class Product extends BaseController
6 {
7 public function index()
8 {
39
9 return view('product_page');
10 }
11
12 public function display()
13 {
14 return view('product/product_display');
15 }
16 }
Keterangan :
Perhatikan pada line 14 di method display, kita mengakses view
product_display.php didalam folder product, jadi kita perlu menuliskan foldernya
terlebih dahulu dalam hal ini adalah product, baru file viewnya dengan nama
product_display.php, karena itu untuk mengakses view kita menggunakan perintah
1 return view('product/product_display');
Berikutnya kita coba untuk mengakses method display, jangan lupa menjalankan
local development server terlebih dahulu dengan perintah php spark serve lalu akses
URL berikut ini : localhost:8080/product/display
maka akan menampilkan tampilan seperti berikut ini :
Berikutnya kita akan belajar untuk mengakses beberapa view sekaligus, atau
biasanya kita kenal dengan istilah load multiple views. Konsep ini dapat digunakan
untuk menampilkan template disertai dengan content webnya, meskipun dari
codeigniter 4 sendiri sudah menyediakan fitur untuk menggunakan template, mungkin
dalam beberapa part mendatang kita akan membahasnya terkait penggunaan template
di codeigniter 4.
Baik sebagai contoh kita akan membuat beberapa file view : buat file view
dengan nama header.php, simpan didalam folder app/views
1 <h1>Ini adalah bagian Header</h1>
buat file view dengan nama content.php, simpan didalam folder app/views
1 <hr />
2 Ini adalah bagian content
3 <hr />
buat file view dengan footer.php, simpan didalam folder app/views
1 <h3>Ini adalah bagian footer</h3>
Berikutnya kita akan membuat method baru dengan nama page didalam
controller Product, sehingga controller Product menjadi seperti berikut ini :
1 <?php
2
3 namespace App\Controllers;
40
4
5 class Product extends BaseController
6 {
7 public function index()
8 {
9 return view('product_page');
10 }
11
12 public function display()
13 {
14 return view('product/product_display');
15 }
16
17 public function page()
18 {
19 echo view('header');
20 echo view('content');
21 echo view('footer');
22 }
23 }
Keterangan :
Perhatikan pada line 17 kita membuat method dengan nama page, didalamnya
kita mengakses file view, dimulai dari header, content, dan footer.
yang berbeda disini adalah karena kita mengakses beberapa view sekaligus, sehingga
kita menggunakan perintah echo, karena ketika kita menggunakan return maka yang
akan dijalankan adalah bagian views pertama saja.
Berikutnya kita coba untuk mengaksesnya, jangan lupa menjalankan local
development server dengan perintah php spark serve
lalu akses URL berikut untuk mengakses method page di controller product :
1 localhost:8080/product/page
maka tampilannya adalah sebagai berikut ini :
Maka akan ditampilkan isi dari file view header, content, dan footer.
41
Menampilkan data dari Controller ke View
Berikutnya kita akan belajar bagaimana cara passing data dari controller agar
ditampilkan dibagian view, baik kita akan tambahkan method baru dengan nama
catalog di controller product, sehingga controller product menjadi seperti berikut ini :
1 <?php
2
3 namespace App\Controllers;
4
5 class Product extends BaseController
6 {
7 public function index()
8 {
9 return view('ProductPage');
10 }
11
12 public function display()
13 {
14 return view('product/ProductDisplay');
15 }
16
17 public function page()
18 {
19 echo view('header');
20 echo view('content');
21 echo view('footer');
22 }
23
24 public function catalog()
25 {
26 $data = [
27 'product' => 'Redmi Note 9 Pro'
28 ];
29 return view('product_catalog', $data);
30 }
31 }
Keterangan :
Perhatikan pada line 24 kita membuat method dengan nama catalog didalam
method itu kita buat variabel $data yang berisi array, dengan key ‘product‘, dan value
‘Redmi Note 9 Pro‘
‘product‘
yang merupakan key dari array disini nantinya akan menjadi nama variabel yang
bisa dipanggil dibagian view, dan ‘Redmi Note 9 Pro‘ adalah value dari variabel
$product pada bagian line 29 kita mengakses view dengan nama
product_catalog,dimana kita juga menuliskan variabel $data sebagai parameter kedua
dari function view, dimana variabel $data telah berisi data array yang akan di passing
kebagian view.
42
Berikutnya kita buat file view dengan nama product_catalog.php, dan simpan
didalam folder app/views, untuk isi dari file view product_catalog.php adalah
1 <html>
2 <head>
3 <title>Product Catalog Page</title>
4 </head>
5 <body>
6 Nama Product Adalah <?= $product; ?>
7 </body>
8 </html>
Keterangan :
Perhatikan dibagian line 6 kita menuliskan variabel $product, variabel ini adalah
data yang kita kirim dari controller, yang merupakan key dari variabel $data
Berikutnya kita coba untuk mengaksesnya, Jangan lupa untuk menjalankan local
development server, lalu akses dengan menggunakan URL :
1 localhost:8080/product/catalog
Maka tampilannya adalah sebagai berikut :
Berikutnya kita akan belajar bagaimana cara menampilkan data berupa Array dari
controller agar dapat ditampilkan dibagian view, cara ini nantinya sangat sering
digunakan saat kita akan menampilkan data dari database untuk ditampilkan dibagian
view. secara sederhana konsepnya adalah kita membuat array multidimensi dibagian
controller, array itu kita passing ke bagian view, lalu dibagian view, akan kita lakukan
perulangan untuk extract array multidimensi itu agar dapat ditampilkan dibagian
view.
sebagai contoh kita akan modifikasi method catalog dibagian controller product,
sehingga controller product menjadi sebagai berikut :
1 <?php
2
3 namespace App\Controllers;
4
5 class Product extends BaseController
6 {
7 public function index()
8 {
9 return view('ProductPage');
43
10 }
11
12 public function display()
13 {
14 return view('product/ProductDisplay');
15 }
16
17 public function page()
18 {
19 echo view('header');
20 echo view('content');
21 echo view('footer');
22 }
23
24 public function catalog()
25 {
26 $data = [
27 'title' => 'Product Catalog',
28 'brand' => 'Smartphone Xiaomi',
29 'product' => ['Redmi Note 9', 'Redmi Note 9 Pro', 'Mi Note 10', 'Mi Note 10
30 Pro']
31 ];
32 return view('product_catalog', $data);
33 }
}
Keterangan :
Perhatikan di line 26 pada method catalog, kita membuat variabel $data yang
berisi array multidimensi, ada beberapa data dibagian product.
jika dilihat dari isi array $data, akan terdapat 3 variabel yang dapat kita akses dibagian
view yaitu title, brand, dan product.
variabel $data itu kita passing dibagian view dengan nama product_catalog.php,
perhatikan line 31
Berikutnya kita modifikasi juga untuk file view dengan product_catalog.php,
menjadi seperti berikut ini :
1 <html>
2
3 <head>
4 <title><?= $title ?></title>
5 </head>
6
7 <body>
8 <h1><?= $brand ?></h1>
9 <hr />
10 <ul>
11 <?php foreach ($product as $item) : ?>
12
13 <li><?= $item ?></li>
14
15 <?php endforeach; ?>
44
16 </ul>
17 </body>
18
19 </html>
Keterangan :
Line 4 kita menampilkan isi variabel $title agar tampil dibagian page title, ini
membuat page title akan tertulis ‘Product Catalog‘
Line 8 kita akan menampilkan isi variabel $brand, agar tampil tulisan “Smartphone
Xiaomi“
Line 11 kita menuliskan perintah foreach, untuk melakukan perulangan sesuai
data pada variabel $product, dan setiap perulangan datanya disimpan di variabel $item,
lalu setiap perulangan akan menampilkan value dari variabel $item, sehingga
menampilkan seluruh data product.
Berikutnya kita coba mengakses method tersebut, jangan lupa menjalankan local
development server, lalu akses menggunakan URL berikut ini :
1 http://localhost:8080/product/catalog
Sehingga yang ditampilkan adalah sebagai berikut :
Keterangan :
Maka data yang dipassing dari controller untuk ditampilkan dibagian view, akan
tampil dibagian page title (Product Catalog), Header (Smartphone Xiaomi), dan
content yang menampilkan data product.
45
Membuat Model dan Interaksi Database melalui model di
Codeigniter 4
Model adalah bagian yang cukup penting di Codeigniter, dimana dengan model
kita akan dapat berkomunikasi dengan database. Pada Codeigniter 4 peran Model
akan sedikit berbeda dengan Codeigniter 3, karena di Codeigniter 4 Model memiliki
peran untuk dapat langsung berkomunikasi dengan database, tanpa kita membuat
method didalam model itu sendiri seperti yang kita lakukan di Codeigniter 3, konsep
seperti ini ada juga di Laravel dimana Model bisa dikatakan seperti representasi dari
tabel yang ada didatabase.
Jadi dengan memanfaatkan peran dari model, anda bisa menampilkan seluruh
data, mencari data tertentu, insert data, update data, dan hapus data di database,
dengan perintah yang cukup sederhana, jika di laravel fitur ini kita kenal dengan nama
eloquent. Meskipun itu Codeigniter 4 masih memiliki fitur query builder, ataupun kita
bisa juga menuliskan query secara manual, tapi fitur model ini cukup menjadikan
perubahan yang baru yang dihadirkan di Codeigniter versi 4.
1 <?php
2
3 namespace App\Models;
4
5 use CodeIgniter\Model;
6
7 class ProductModel extends Model
8{
9}
Keterangan :
⚫ Line 3 anda perlu menuliskan namespace App\Models
⚫ Line 7 kita buat class ProductModel dengan extends class Model, untuk nama
class ini sendiri harus sama dengan nama file Model, dalam contoh ini adalah
ProductModel
Setelah dibagian sebelumnya kita telah membuat sebuah model dengan nama
ProductModel yang kita simpan didalam folder app/Models. Berikutnya kita akan
belajar bagaimana cara mengakses Model tersebut, kita akan modifikasi terlebih
dahulu method didalam ProductModel, kita tambahkan method getData, berikutnya
46
kita akan belajar bagaimana cara mengakses method yang ada didalam model, melalui
Controller.
Kita modifikasi sehingga model menjadi seperti berikut ini :
1 <?php
2
3 namespace App\Models;
4
5 use CodeIgniter\Model;
6
7 class ProductModel extends Model
8 {
9 public function getData()
10 {
11 return 'Ini adalah Method getData didalam ProductModel';
12 }
13 }
Keterangan :
Kita membuat method baru dengan nama getData Line 9, bagian ini kita buat
sederhana saja, hanya return text dengan tulisan
‘Ini adalah Method getData didalam ProductModel’ berikutnya kita buat sebuah
controller dengan nama Product kita simpan didalam folder app/Controllers
Untuk isi code controller Product adalah seperti berikut ini :
1 <?php
2
3 namespace App\Controllers;
4
5 use App\Models\ProductModel;
6
7 class Product extends BaseController
8 {
9 public function index()
10 {
11 $product = new ProductModel();
12 echo $product->getData();
13 }
14 }
Keterangan :
Line 5 kita load model dengan nama ProductModel, dengan perintah :
1 use App\Models\ProductModel;
Line 7 kita membuat class dengan nama Product sesuai dengan nama
controllernya yaitu Product
Pada method index, kita membuat object baru dengan nama $product (line 11)
dengan menggunakan class ProductModel line 12 kita mengakses method getData
pada model productModel, kita gunakan object $product, kita gunakan perintah echo
untuk menampilkan text hasil return dari method getData.
1 echo $product->getData();
Sekarang kita coba mengaksesnya, jangan lupa untuk menjalankan local
development server, dengan perintah :
47
1 php spark serve
lalu jalankan URL : http://localhost:8080/product
Maka hasilnya adalah sebagai berikut :
48
Persiapan Database & Koneksikan Codeigniter dengan database
Sebagai bahan belajar terkait cara model dapat berinteraksi dengan database, kita akan
buat sebuah database dengan nama db_product, dan didalamnya kita buat tabel
dengan nama tb_product, untuk struktur tabel seperti berikut ini :
⚫ kd_product (int) (primary key) (auto increment)
⚫ name (varchar 255)
⚫ price (float)
⚫ created_at (datetime)
⚫ updated_at (datetime)
⚫ deleted_at (datetime)
Untuk mempermudah teman – teman saya sediakan script SQL untuk membuat
database serta tabelnya :
1 -- phpMyAdmin SQL Dump
2 -- version 5.0.2
3 -- https://www.phpmyadmin.net/
4 --
5 -- Host: 127.0.0.1
6 -- Generation Time: Aug 10, 2020 at 04:34 PM
7 -- Server version: 10.4.11-MariaDB
8 -- PHP Version: 7.4.5
9
10 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 START TRANSACTION;
12 SET time_zone = "+00:00";
13
14
15 /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
16 /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
17 /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
18 /*!40101 SET NAMES utf8mb4 */;
19
20 --
21 -- Database: `db_product`
22 --
23 CREATE DATABASE IF NOT EXISTS `db_product` DEFAULT CHARACTER SET utf8mb4 COLLATE
24 utf8mb4_general_ci;
25 USE `db_product`;
26
27 -- --------------------------------------------------------
28
29 --
30 -- Table structure for table `tb_product`
31 --
32
33 CREATE TABLE `tb_product` (
34 `kd_product` int(11) NOT NULL,
35 `name` varchar(255) NOT NULL,
36 `price` float NOT NULL,
37 `created_at` datetime NOT NULL,
38 `updated_at` datetime NOT NULL,
39 `deleted_at` datetime NOT NULL
40 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
41
42 --
43 -- Indexes for dumped tables
44 --
45
46 --
49
47 -- Indexes for table `tb_product`
48 --
49 ALTER TABLE `tb_product`
50 ADD PRIMARY KEY (`kd_product`);
51
52 --
53 -- AUTO_INCREMENT for dumped tables
54 --
55
56 --
57 -- AUTO_INCREMENT for table `tb_product`
58 --
59 ALTER TABLE `tb_product`
60 MODIFY `kd_product` int(11) NOT NULL AUTO_INCREMENT;
61 COMMIT;
62
63 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
64 /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
baik saya asumsikan teman – teman semua sudah memiliki database yang
didalamnya sudah ada tabelnya ya..
Berikutnya kita akan koneksikan project codeigniter 4 dengan database yang baru
saja kita buat, langkah – langkahnya adalah sebagai berikut :
Pada folder project codeigniter terdapat file dengan nama env, silahkan rename
terlebih dahulu menjadi .env buka file .env pada bagian database di sekitar line 52 –
56 setting bagian database, sebelum itu hilangkan tanda # lalu lakukan settingan
koneksi ke database jadi kurang lebih seperti berikut ini :
1 database.default.hostname = localhost
2 database.default.database = db_product
3 database.default.username = root
4 database.default.password =
5 database.default.DBDriver = MySQLi
Keterangan :
⚫ bagian hostname adalah alamat server dari databasenya, dalam hal ini adalah
localhost
⚫ bagian database diisi dengan nama database, dalam hal ini adalah db_product
⚫ bagian username diisi dengan user dari database, dalam hal ini adalah root
⚫ bagian password diisi dengan password dari username tersebut, dalam hal ini
saya kosongkan karena default password dibagian mysql pada xampp itu kosong
untuk user root
DBDriver kita isikan MySQLi karena kita pakai MySQL / Maria DB sebagai
databasenya.
Setelah dibagian sebelumnya kita telah belajar, bagaimana membuat model, serta
mengakses model dan method didalamnya melalui controller, berikutnya kita akan
belajar untuk mensetting bagian model, agar dapat mengakses database.
50
Berikutnya kita akan belajar konfigurasi apa saja yang bisa kita setting dibagian
model :
⚫ $DBGroup = digunakan untuk menentukan group database mana yang akan
digunakan, nama group database ini bisa anda lihat di konfigurasi database, bisa
anda lihat di file .env, jika anda tidak setting bagian DBGroup maka akan
menggunakan default database yang disetting di bagian konfigurasi database.
⚫ $table = bagian ini diisi dengan nama tabel di database, dimana model ini dapat
berkomunikasi dengan nama tabel yang ditulis dibagian ini.
⚫ $primaryKey = digunakan untuk menentukan primary key dari tabel yang dapat
diakses oleh model ini, kolom dibagian primaryKey akan digunakan untuk dasar
pencarian menggunakan method find, method find akan kita bahas lebih lanjut
ditutorial berikutnya.
⚫ $returnType = digunakan untuk mengatur format return data hasil dari query,
anda bisa menuliskan value array ataupun object.
⚫ $useSoftDeletes = jika bernilai true, maka ketika ada data yang dihapus, akan
menyimpan waktu kapan data dihapus dalam format datetime dalam kolom
dengan nama deleted_at didalam tabel, secara sederhana seakan – akan ketika
data dihapus, data tidak benar – benar hilang, data berada di semacam recycle bin,
dimana nantinya data bisa kita restore, ataupun kita kita hapus secara permanen.
jika bernilai true, ketika kita menggunakan method find ataupun findAll hanya
menampilkan data yang tidak dalam keadaan terhapus, kecuali anda juga
menambahkan perintah withDeleted() maka akan menampilkan keseluruhan data
termasuk yang dalam keadaan telah dihapus.
⚫ $allowedFields = digunakan untuk menentukan kolom mana saja yang dapat kita
insert data, baik menggunakan method insert, ataupun
⚫ $useTimestamps = jika bernilai true, maka setiap ada perubahan di database
seperti insert dan update data, maka waktu akan dicatat dalam kolom created_at
dan updated_at
⚫ $createdField = digunakan untuk mengatur kolom mana yang akan digunakan
untuk menyimpan waktu dalam format datetime saat data ditambahkan (anda bisa
mengosongi bagian ini kecuali bagian $useTimestamps dalam keadaan enable )
⚫ $updatedField = digunakan untuk mengatur kolom mana yang akan digunakan
untuk menyimpan waktu dalam format datetime saat data diupdate (anda bisa
mengosongi bagian ini kecuali bagian $useTimestamps dalam keadaan enable )
⚫ $deletedField = digunakan untuk mengatur kolom mana yang akan digunakan
untuk menyimpan waktu dalam format datetime saat data didelete
⚫ $dateFormat = nilai dibagian ini akan menentukan format tanggal dan waktu
yang disimpan, saat anda mengaktifkan bagian
$useTimestamps dan $useSoftDeletes, secara default menggunakan format
DATETIME, tetapi anda bisa menggunakan format lainnya
seperti datetime, date, int (a PHP timestamp)
⚫ $validationRules = bagian ini bisa anda gunakan untuk membuat sebuah aturan
terhadap format data yang akan diinsert ataupun diupdate ke database, untuk
bagian ini akan kita singgung sedikit saja, karena ada pembahasan lebih lanjutnya
di part pembahasan mengenai validasi.
⚫ $validationMessages = bagian ini digunakan untuk mengatur pesan yang
ditampilkan saat data tidak sesuai dengan validationRules
⚫ $skipValidation = bagian ini dapat berisi true atau false, secara default bernilai
false yang artinya data yang masuk harus melewati tahap validasi, tetapi jika anda
memberikan nilai true, maka data yang masuk tidak perlu melalui bagian validasi.
51
Baik berikutnya silahkan buka file model dengan nama ProductModel.php, lalu
modifikasi kode seperti berikut ini :
1 <?php
2
3 namespace App\Models;
4
5 use CodeIgniter\Model;
6
7 class ProductModel extends Model
8 {
9 protected $table = 'tb_product';
10 protected $primaryKey = 'kd_product';
11
12 protected $returnType = 'object';
13 protected $useSoftDeletes = true;
14
15 protected $allowedFields = ['name', 'price'];
16
17 protected $useTimestamps = true;
18 protected $createdField = 'created_at';
19 protected $updatedField = 'updated_at';
20 protected $deletedField = 'deleted_at';
21
22 protected $validationRules = [
23 'name' => 'required|min_length[3]',
24 'price' => 'required|numeric',
25 ];
26
27 protected $validationMessages = [
28 'name' => [
29 'required' => 'Bagian Name Harus diisi',
30 'min_length' => 'Minimal 3 Karakter'
31 ],
32 'price' => [
33 'required' => 'Bagian Price Harus diisi',
34 'numeric' => 'Hanya bisa diisi dengan angka'
35 ]
36 ];
37 protected $skipValidation = false;
38
39 public function getData()
40 {
41 return 'Ini adalah Method getData didalam ProductModel';
42 }
43 }
Keterangan :
1 protected $table = 'tb_product';
Line 9 kita set agar model ini dapat berkomunikasi dengan tabel “tb_product”
52
1 protected $primaryKey = 'kd_product';
Line 10 kita primary dari tabel tb_product adalah kolom “kd_product”
1 protected $returnType = 'object';
Line 12 kita set untuk format return hasil query adalah object
1 protected $useSoftDeletes = true;
Line 13 kita set useSoftDeletes bernilai true, agar data yang dihapus tidak benar benar
dihapus.
1 protected $allowedFields = ['name', 'price'];
line 15 kita set untuk kolom yang dapat di insert atau diupdate adalah kolom name,
dan price
1 protected $useTimestamps = true;
line 17 kita set bagian useTimestamps kita set true agar mencatat bagian created_at
dan updated_at
1 protected $createdField = 'created_at';
Line 18 untuk setting waktu insert data disimpan di kolom created_at
1 protected $updatedField = 'updated_at';
Line 19 untuk setting waktu update data disimpan di kolom updated_at
1 protected $deletedField = 'deleted_at';
Line 20 untuk setting waktu delete data disimpan di kolom deleted_at
untuk 3 settingan diatas, jika tidak diset maka akan memberikan nilai default :
kolom yang menyimpan waktu insert data adalah created_at
kolom yang menyimpan waktu update data adalah updated_at
kolom yang menyimpan waktu delete data adalah deleted_at
1 protected $validationRules = [
2 'name' => 'required|min_length[3]',
3 'price' => 'required|numeric',
4 ];
untuk Line 22 kita setting validasi insert atau update, kita buat sederhana saja ya :
kolom nama harus diisi (required) dan minimal 3 karakter
kolom price harus diisi (required) dan menggunakan angka
1 protected $validationMessages = [
2 'name' => [
3 'required' => 'Bagian Name Harus diisi',
4 'min_length' => 'Minimal 3 Karakter'
5 ],
6 'price' => [
7 'required' => 'Bagian Price Harus diisi',
8 'numeric' => 'Hanya bisa diisi dengan angka'
9 ]
10 ];
Line 27 kita set bagian pesan yang ditampilkan untuk kebutuhan validasi, kita
menuliskan pesan dimasing – masing validasi pada kolom
1 protected $skipValidation = false;
Line 37 kita set skipValidation kita berikan nilai false, agar validasi tetap dilakukan
53
Sebenarnya kita tidak perlu memberikan settingan sebanyak ini, tapi karena saya
ingin menjelaskan ke teman – teman terkait dengan konfigurasi yang memungkinkan
untuk dilakukan di bagian model sehingga semuanya saya tuliskan.
Berikutnya kita akan mulai belajar untuk melakukan komunikasi data dengan
database dengan menggunakan model, kita mulai belajar dengan menggunakan
method insert(), method ini digunakan untuk insert data ke database. untuk dapat
melakukan insert data, anda bisa menggunakan associative array, dimana key yang
digunakan disamakan dengan nama kolom di tabel.
silahkan buka file controller Product.php, lalu kita tambahkan method baru
semisal dengan nama insertdata, method insertdata seperti berikut ini :
1 public function insertdata()
2 {
3 $product = new ProductModel();
4 $insert = $product->insert([
5 'name' => 'Redmi Note 9 Pro',
6 'price' => '3499000'
7 ]);
8 if ($insert) {
9 echo "Data Berhasil diinsert";
10 } else {
11 echo "<pre>";
12 echo print_r($product->errors());
13 echo "</pre>";
14 }
15 }
Keterangan :
Line 1 kita buat method baru semisal dengan nama insertdata
1 $product = new ProductModel();
Line 3 kita buat object dengan nama $product menggunakan class ProductModel
1 $insert = $product->insert([
2 'name' => 'Redmi Note 9 Pro',
3 'price' => '3499000'
4 ]);
kita mengakses method insert dengan menggunakan object $product, kita
menggunakan array associative, dimana key sesuai dengan nama kolom yang ada di
tabel tb_product, dan hasil query kita simpan di variabel $insert
1 if ($insert) {
2 echo "Data Berhasil diinsert";
3 } else {
4 echo "<pre>";
5 echo print_r($product->errors());
6 echo "</pre>";
7 }
54
Line 8 kita cek value variabel $insert dengan menggunakn perintah IF, jika query
berhasil maka akan menampilkan tulisan “Data berhasil diinsert“, Jika query gagal
akan menjalankan Line 11 – 13 untuk menampilkan untuk menampilkan error
massage dari validasi, jika memang yang gagal adalah dibagian validasi
sebenarnya perintahnya tidak sepanjang ini, tapi disini saya akan contohkan jika kita
ingin melakukan pengecekan terhadap validasinya, dan jika validasi gagal akan
menampilkan pesan error. baik kita coba mengakses method insertdata di controller
Product, dengan menggunakan URL :
localhost:8080/product/insertdata
lalu coba cek data di dalam tabel tb_product, bisa gunakan sql editor, dalam contoh
ini saya menggunakan sqlyog
Maka ada satu data dengan name Redmi Note 9 Pro, dan untuk bagian price
3499000
Berikutnya kita akan membahas method update, method ini digunakan untuk
update data, method ini memiliki 2 parameter :
⚫ nilai dari kolom primary key data yang ingin diupdate
⚫ perubahan data yang ingin dilakukan, dalam bentuk associative array
berikutnya kita akan coba mengupdate data yang barusan kita insert, kita akan
menambahkan method baru di controller Product, semisal nama methodnya
updatedata, isi dari method updatedata adalah seperti berikut ini :
1 public function updatedata()
2 {
3 $product = new ProductModel();
4 $id = 1;
5 $update = $product->update($id, [
6 'name' => 'Redmi Note 9',
7 'price' => '3000000'
8 ]);
9 if ($update) {
10 echo "Data Berhasil diupdate";
11 } else {
12 echo "<pre>";
13 echo print_r($product->errors());
14 echo "</pre>";
15 }
16 }
Keterangan :
Line 1 kita membuat method dengan nama updatedata
Line 3 kita membuat object baru dengan nama $product dengan class ProductModel
55
Line 4 kita buat variabel $id dengan value 1, ini adalah nilai dari kolom kd_product
(yang merupakan primary key) yang akan dijadikan parameter pertama method update,
karena data yang akan kita update adalah data yang memiliki kd_product = 1
1 $update = $product->update($id, [
2 'name' => 'Redmi Note 9',
3 'price' => '3000000'
4 ]);
Line 5 kita gunakan method update pada object $product, dan mengirimkan 2
parameter yaitu :
variabel $id
array associative dari data yang akan diupdate
hasilnya akan kita simpan didalam variabel $update.
1 if ($update) {
2 echo "Data Berhasil diupdate";
3 } else {
4 echo "<pre>";
5 echo print_r($product->errors());
6 echo "</pre>";
7 }
Line 9 kita akan memeriksa hasil query yang disimpan di variabel $update, jika proses
berhasil maka akan tampil tulisan “Data Berhasil diupdate”
Line 13 jika proses gagal, maka akan menampilkan pesan error dari hasil validasi jika
yang gagal memang di bagian validasi
Berikutnya kita coba mengakses method updatedata di controller Product dengan
menggunakan URL : localhost:8080/product/updatedata jika proses update berhasil
akan tertulis :
Data Berhasil diupdate
berikutnya kita akan cek data di table tb_product , saya gunakan sql yog
maka datanya sudah berubah, name menjadi “Redmi Note 9” dan untuk bagian price
menjadi “3000000”.
Perintah Save
Method save ini memiliki fungsi yang cukup unik,,, bisa digunakan untuk fitur
insert data ataupun update data, tergantung isi array associative yang kita buat, jika
kita menyertakan kolom yang menjadi primary key maka akan dianggap mengupdate
data , tetapi jika tidak menyertakan maka akan dianggap sebagai proses insert data.
56
Method Save untuk update data
Baik kita akan mulai pembahasannya bagaimana kalau method save digunakan
untuk update data, anda perlu primary key dibagian array associative, dalam contoh
ini kita akan menambahkan method dengan nama saveupdate dibagian controller
Product, method saveupdate adalah sebagai berikut :
1 public function saveupdate()
2 {
3 $product = new ProductModel();
4 $data = [
5 'kd_product' => 1,
6 'name' => 'Redmi 9',
7 'price' => '2000000'
8 ];
9 $product->save($data);
10 }
Keterangan :
Line 3 kita buat object dengan nama $product dengan class ProductModel
Line 4 – 8 kita buat array associative dengan key kd_product(primary key),name, dan
price
Array associative berisi key dari kolom primary key, dan juga data yang akan
diupdate
Line 9 kita gunakan method save dibagian object $product, dengan mengisikan
parameternya adalah array associative
kita coba mengakses method saveupdate yang barusan kita buat dengan
menggunakan alamat URL : localhost:8080/product/saveupdate lalu periksa data
didatabase harusnya data dengan kd_product = 1 akan berubah, name menjadi “Redmi
9” dan untuk bagian price “2000000”
Berikutnya kita akan coba untuk menggunakan method save untuk kebutuhan
insert data, seperti yang dijelaskan diawal, perbedaannya jika untuk kebutuhan insert
data anda tidak perlu menuliskan kolom primary key dibagian array associative.
dalam contoh ini kita akan membuat method baru di contoller Product, semisal kita
beri nama saveinsert, untuk isi methodnya adalah sebagai berikut :
1 public function saveinsert()
2{
3 $product = new ProductModel();
4 $data = [
5 'name' => 'Xiaomi Mi Note 10 Pro',
6 'price' => '10999000'
57
7 ];
8 $product->save($data);
9}
Keterangan :
Line 3 kita buat object baru dengan nama $product dengan menggunakan class
ProductModel
Line 4 – 7 kita buat data array associative dengan key name, dan price sesuai nama
kolom di tabel tb_product
Line 8 kita gunakan method save dengan object $product, dan menyertakan variabel
$data yang berisi array untuk digunakan dibagian sebagai parameter method save
berikutnya kita coba mengakses method saveinsert dengan menggunakan URL :
localhost:8080/product/saveinsert maka hasilnya akan ada data baru di tabel
tb_product, sehingga kurang lebih seperti berikut ini :
Berikutnya kita akan bahas untuk cara update data menggunakan method save,
tapi yang berbeda didisini kita tidak perlu menggunakan array, baik sebagai contoh
kita akan membuat method baru dengan nama saveupdate2 di controller Product,
untuk isi dari method saveupdate2 kurang lebih seperti berikut ini :
1 public function saveupdate2()
2{
3 $product = new ProductModel();
4 $dataProduct = $product->find(1);
5 $dataProduct->price = '2050000';
6 $product->save($dataProduct);
7}
Keterangan :
Line 3 kita buat object baru dengan nama $product dengan menggunakan class
ProductModel
Line 4 kita mendapatkan data product dengan kd_product = 1, dengan menggunakan
perintah method find, pembahasan find akan ada dibab selanjutkan, hasil pencairan
disimpan pada variabel $dataProduct
Line 5 kita isi nilai kolom price dengan value ‘2050000‘, menggunakan variabel
$dataProduct
Line 6 kita menggunakan method save dengan menggunakan object $product, dan
untuk parameter method save adalah array $dataProduct berikutnya kita akan
coba mengakses method saveupdate2 dengan menggunakan URL sebagai berikut :
localhost:8080/product/saveupdate2 Maka data dengan kd_product 1 akan berubah,
nilai price akan menjadi 2050000
58
Perintah Delete
Berikutnya kita akan belajar mengenai method Delete, method ini digunakan
untuk menghapus data di database, dalam contoh ini kita akan membuat method baru
di controller Product, semisal method kita beri nama deletedata, isi method deletedata
adalah sebagai berikut :
1 public function deletedata()
2{
3 $product = new ProductModel();
4 $product->delete(1);
5}
Keterangan :
Line 3 kita buat object dengan nama product dengan class ProductModel
Line 4 kita gunakan method delete dengan menggunakan object $product, dengan
parameter 1, yang artinya menghapus data di tabel tb_product yang kd_product = 1,
hal ini dikarenakan kita set variabel $primaryKey di model adalah kd_product Coba
kita mengakses method deletedata di controller Product, dengan menggunakan URL :
localhost:8080/product/deletedata
maka hasilnya datanya akan seperti berikut ini :
Keterangan :
Perhatikan pada data dengan kd_product 1, data tidak dihapus, tetepi bagian
deleted_at akan berisi waktu data itu dihapus, hal ini dikarenakan kita menset
$useSoftDeletes = true; dibagian model ProductModel
Anda bisa menghapus beberapa data sekaligus, dengan menuliskan ID data sesuai
primary key, kedalam bentuk array, contohnya adalah sebagai berikut :
1 $product = new ProductModel();
2 $product->delete([1,2,3]);
59
Menghapus data dengan perintah where
Seperti contoh diatas saat kita memberikan nilai TRUE dibagian SoftDeletes,
ketika kita menghapus data, data itu tidak benar – benar terhapus tapi sebenernya
hanya memberikan nilai pada bagian kolom deleted_at, dengan perintah dibawah ini
anda bisa menghapus data tersebut secara permanent.
$product = new ProductModel();
$product->purgeDeleted();
dengan perintah diatas, maka data didalam tabel tb_product yang memiliki nilai
di kolom deleted_at atau bisa dikatakan nilai pada value kolom deleted_at IS NOT
NULL maka data itu akan dihapus.
Seperti yang telah kita bahas diawal, codeigniter 4 memiliki fitur softdelete
dibagian model, jika anda ingin menghapus data secara permanent bisa menambahkan
value true, diparameter kedua pada method delete, jadi contoh perintahnya adalah
seperti berikut ini :
1 $product = new ProductModel();
2 $product->delete(1, true);
Keterangan :
perintah diatas digunakan untuk menghapus data secara permanen untuk data di
tabel tb_product yang nilai kd_product = 1, kita hanya perlu menambahkan parameter
kedua dengan nilai true.
Menampilkan Data
Method find ini digunakan untuk menampilkan data berdasarkan nilai yang ada
dibagian kolom yang menjadi primary key.
Semisal kita ingin mencari data di tabel tb_product yang nilai kd_product adalah 2,
contohnya kita akan menambahkan method baru dengan nama getdata di controller
Product, jadi controller Product kurang lebih seperti berikut ini :
60
1 public function getdata()
2 {
3 $product = new ProductModel();
4 $dataProduct = $product->find(2);
5 echo "<pre>";
6 echo print_r($dataProduct);
7 echo "</pre>";
8 }
Keterangan :
• Line 3 kita buat object dengan nama $product dengan class ProductModel
• Line 4 kita menggunakan method find() dengan nilai parameter adalah 2
yang artinya kita mencari data di tb_product dengan nilai di kolom kd_product
sebagai primary key
• Line 5 – 7 kita tampilkan datanya, kita gunakan print_r agar anda dapat
melihat isi return hasil query
Kita dapat mengaksesnya dengan menggunakan perintah :
localhost:8080/product/getdata
Perintah ini digunakan untuk menampilkan data yang ada didalam kolom yang
kita inginkan, semisal dalam contoh ini kita ingin menampilkan isi dari kolom name
didalam tabel tb_product, kita akan modifikasi method getdata yang ada di dalam
controller Product, sehingga method getdata akan menjadi seperti berikut ini :
1 public function getdata()
2{
3 $product = new ProductModel();
4 $dataProduct = $product->findColumn('name');
5 echo "<pre>";
6 echo print_r($dataProduct);
7 echo "</pre>";
8}
Keterangan :
Line 3 kita buat object dengan nama $product dengan class ProductModel
61
Line 4 kita menggunakan method findColumn() dengan nilai parameter adalah name
yang artinya kita ingin menampilkan kolom dengan nama name di tabel tb_product
Line 5 – 7 kita tampilkan datanya, kita gunakan print_r agar anda dapat melihat isi
return hasil query
kita akan coba mengakses method getdata dengan URL :
localhost:8080/product/getdata
maka hasilnya adalah sebagai berikut :
Keterangan :
yang tampil hanya satu data, padahal data ada 2, karena yang satunya dalam
keadaan terhapus, jadi yang tampil hanya Xiaomi Mi Note 10 Pro yang merupakan
nilai dari kolom name.
Method ini digunakan untuk menampilkan seluruh data yang ada pada sebuah
tabel kecuali data yang terhapus dengan fitur softdelete, anda bisa menggunakan
perintah seperti berikut :
1 public function getdata()
2{
3 $product = new ProductModel();
4 $dataProduct = $product->findAll();
5 echo "<pre>";
6 echo print_r($dataProduct);
7 echo "</pre>";
8}
Keterangan :
Line 4 kita menggunakan perintah findAll yang akan menampilkan seluruh data yang
ada di tabel tb_product kecuali data yang dihapus. Anda juga dapat dapat menuliskan
perintah pencarian where dibagian ini, contoh perintahnya adalah sebagai berikut :
1 $product = new ProductModel();
2 $dataProduct = $product->where('name','Xiaomi Mi Note 10 Pro')->findAll();
Keterangan :
Perintah diatas digunakan untuk menampilkan seluruh data di tabel tb_product yang
kolom name bernilai ‘Xiaomi Mi Note 10 Pro‘
Anda juga bisa menggunakan perintah limit dan offset seperti pada perintah SQL
biasanya, contoh penggunaannya adalah seperti berikut ini :
62
1 $users = $userModel->findAll($limit, $offset);
Keterangan :
kita bisa menuliskan parameter 1 untuk bagian limit, dan parameter 2 untuk bagian
offset pada method findAll
Berikutnya anda juga dapat mengakses data seluruh data dalam sebuah tabel
tanpa terkecuali, sekalian dengan data yang sudah anda hapus dengan fitur softdelete,
contoh penggunaannya adalah sebagai berikut ini :
1 $product = new ProductModel();
2 $dataProduct = $product->withDeleted()->findAll();
Keterangan :
Anda cukup menambahkan method withDeleted dibagian findAll, Menggunakan
method findAll dengan onlyDeleted
Anda juga dapat menampilkan data yang sudah dihapus melalui fitur softdelete, anda
bisa menambahkan method onlyDeleted, sehingga penggunaannya adalah sebagai
berikut :
1 $product = new ProductModel();
2 $dataProduct = $product->onlyDeleted()->findAll();
Keterangan :
Anda cukup menambahkan method onlyDeleted dibagian findAll, maka data yang
tampil hanya yang sudah dihapus melalui softdelete
63
Ujian Tengah Semester
Ujian Tengah Semester biasanya sudah masuk pada pertemuan 8 dan untuk
matakuliah Web programming 2 tidak ada UTS melainkan membuat project yang
akan di kumpulkan sebelum Ujian Akhir Semester (UAS)
64
Membuat Layout / Template di Codeigniter 4
Keterangan :
Jika kita perhatikan pada gambar diatas ada 4 bagian :
⚫ header
⚫ sidebar
⚫ content
⚫ footer
dari 4 bagian itu… yang biasanya kita buat tampilannya tidak berubah (statis)
adalah header, sidebar, dan footer, tetapi untuk bagian content tampilannya akan
berubah – ubah menyesuaikan menu apa yang diakses (dinamis), nah pengaturan
semacam ini sudah terfasilitasi di Codeigniter 4, kalau di codeigniter 3 sebelumnya
saya perlu menambahkan library tambahan untuk membuat template semacam ini, ya
meskipun di codeigniter 3 sendiri ada, hanya saya kurang nyaman untuk
menggunakannya.
Bagi teman – teman mungkin yang sudah pernah belajar framework Laravel,
konsep pembuatan layout di codeigniter 4 ini sama seperti konsep penggunaan blade
di laravel untuk proses pembuatan template, jadi saya rasa untuk teman – teman yang
sudah belajar laravel, akan mudah memahami konsep layout di codeigniter 4.
65
Preview Tampilan Template
Berikutnya kita akan membahas tampilan template yang kita akan gunakan, kita
gunakan template dari bootstrap dengan nama sticky footer navbar, bisa anda akses di
alamat ini : https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/ hanya
saja disini scriptnya akan saya sedikit modifikasi ya, kita buat library CSS dan JS
akan mengakses library bootstrap langsung secara online. Jadi saya sarankan ketika
belajar membuat layout menggunakan template bootstrap yang kita sediakan, gunakan
koneksi internet.
Baik tampilannya seperti berikut ini :
Berikutnya kita akan mulai membuat layoutnya, buat folder dengan nama layout
didalam folder app/Views, lalu berikutnya buat file dengan nama template.php
didalam folder app/Views/layout, untuk code dari file template.php adalah sebagai
berikut :
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
66
<meta name="generator" content="Jekyll v4.1.1">
<title>Sticky Footer Navbar Template · Bootstrap</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
67
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
</html>
Berikutnya kita akan mengatur bagian dari template yang sifatnya dinamis,
seperti yang telah kita bahas sebelumnya bagian content itu bersifat dinamis, akan
menyesuaikan menu yang diakses didalam aplikasi. kita dapat menggunakan perintah
renderSection() untuk mengatur bagian dari template yang isinya akan menyesuaikan
apa yang kita set dibagian view, method renderSection memiliki 1 argument yaitu
nama dari section, semisal dalam contoh ini namanya kita buat content.
68
kita akan gunakan method renderSection() untuk set bagian content, jadi kita perlu
merubah file template.php pada line 74 – 77 menjadi :
<?= $this->renderSection('content') ?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Sticky Footer Navbar Template · Bootstrap</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
69
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/sticky-footer-navbar.c
ss" rel="stylesheet">
</head>
</html>
70
Nah sampai disini kita sudah set section dengan nama content pada bagian
template, agar nanti isinya akan menyesuaikan dari view.
Berikutnya kita akan belajar untuk menggunakan layout dibagian view, untuk
dapat menggunakan layout / template dibagian view kita menggunakan method
extend(), method extend memiliki 1 argument yaitu nama file view yang digunakan
sebagai template.
baik sebelum kita akan belajar menggunakan layout, kita akan buat dulu sebuah
controller, semisal kita buat controller dengan nama Product.php dan kita simpan di
folder app/Controllers, untuk isi code file controller Product.php adalah sebagai
berikut ini :
<?php
namespace App\Controllers;
71
Berikutnya kita akan coba untuk mengaksesnya, kita jalankan dulu local
development servernya gunakan perintah di terminal : php spark serve lalu kita
mengakses method index di controller Product dengan URL :
1 localhost:8080/product
Hasilnya sebagai berikut :
Keterangan :
Coba perhatikan dibagian content, dibagian content menampilkan apa yang kita
tulis dibagian view productpage.php pada line 4 – 7.
Biar teman – teman lebih memahami lagi, kita akan buat lagi sebuah method di
controller Product, dalam contoh ini kita buat method dengan nama catalog, sehingga
controller Product isi codenya menjadi seperti berikut ini :
<?php
namespace App\Controllers;
72
8 <?= $this->endSection() ?>
Berikutnya kita akan coba mengakses method catalog di controller Product, jangan
lupa untuk menjalankan local development server, lalu kita akses dengan URL :
localhost:8080/product/catalog
Keterangan :
Terlihat yang berubah hanya dibagian content, terdapat tulisan Catalog Product,
bagian ini sesuai code dibagian view, yang kita set dibagian section content, jika
dilihat ada di line 4 – 7 di view catalogproduct.php
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Sticky Footer Navbar Template · Bootstrap</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/">
73
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/apple-touch-icon.png"
sizes="180x180">
<link rel="icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32"
type="image/png">
<link rel="icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/safari-pinned-tab.svg"
color="#563d7c">
<link rel="icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config"
content="https://getbootstrap.com/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
74
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
</html>
kita akan coba bagi code di file template.php menjadi beberapa bagian, langkah –
langkahnya adalah sebagai berikut :
1. Buat file header.php simpan di folder app/Views/layout, untuk isi file ini cut dari
file template.php diatas line 4 – 46, sehingga file header.php berisi code seperti ini :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Sticky Footer Navbar Template · Bootstrap</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/">
75
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/safari-pinned-tab.svg"
color="#563d7c">
<link rel="icon"
href="https://getbootstrap.com/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config"
content="https://getbootstrap.com/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
76
</div>
</nav>
3. Buat file footer.php simpan di folder app/Views/layout, untuk isi file ini cut dari
file template.php diatas line 77 – 81, sehingga file footer.php berisi code seperti ini :
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Warung Belajar @2020</span>
</div>
</footer>
4. Berikutnya kita akan modifikasi file template.php menjadi seperti berikut ini :
<!doctype html>
<html lang="en" class="h-100">
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
window.jQuery || document.write('<script
src="https://getbootstrap.com/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')
</script>
<script
src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Keterangan :
<?= $this->include('layout/header') ?>
Line 4 kita tulisankan perintah method include dengan parameter layout/header
artinya kita akan menyisipkan file view dengan nama header.php di folder
app/views/layout, karena sebelumnya code di file template.php bagian tag <head>
hingga </head> sudah kita pindah ke file app/views/layout/header.php
<?= $this->include('layout/nav') ?>
Line 4 kita tulisankan perintah method include dengan parameter layout/nav
artinya kita akan menyisipkan file view dengan nama nav.php di folder
app/views/layout, karena sebelumnya code di file template.php bagian tag <nav>
hingga </nav> sudah kita pindahkan ke file app/views/layout/nav.php
77
1 <?= $this->include('layout/footer') ?>
Line 19 kita tulisankan perintah method include dengan parameter layout/footer
artinya kita akan menyisipkan file view dengan nama footer.php di folder
app/views/layout, karena sebelumnya code di file template.php bagian tag <footer>
hingga </footer> sudah kita pindahkan ke file app/views/layout/footer.php
78
Penanganan Form dan Form Validasi di Codeigniter 4
Berikutnya silahkan buat controller dengan nama Siswa.php dan simpan didalam
folder app/Controllers, untuk isi controller Siswa.php adalah sebagai berikut ini :
<?php
namespace App\Controllers;
Berikutnya kita akan membuat file view dengan nama formSiswa.php, file view
ini akan berisi form, kita juga gunakan bootstrap untuk mengatur tampilannya, ..
teman – teman bisa copy paste saja dengan code dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Width Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
79
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header bg-primary text-white">Tambah Data Siswa</div>
<div class="card-body">
<?php if (!empty(session()->getFlashdata('error'))) : ?>
<div class="alert alert-danger alert-dismissible fade
show" role="alert">
<h4>Periksa Entrian Form</h4>
</hr />
<?php echo
session()->getFlashdata('error'); ?>
<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<?php endif; ?>
<form action="<?= base_url('siswa/save'); ?>" method="post">
<?= csrf_field(); ?>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama"
class="form-control" value="<?= old('nama'); ?>" id="nama">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email"
class="form-control" id="email" value="<?= old('email'); ?>">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password"
class="form-control" id="password">
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat"
class="form-control" cols="3" rows="3"><?= old('alamat'); ?></textarea>
</div>
<button type="submit" class="btn
btn-primary">Save</button>
</form>
</div>
</div>
</div>
</body>
80
</html>
Keterangan :
Bagian tampilan form ini kita menggunakan bootstrap, dan untuk library js dan css
kita langsung mengaksesnya secara online, jadi kita sarankan untuk terkoneksi
internet saat mengakses tampilan form.
Pada line 32 kita mengisi beberapa attribute di tag <form>, seperti bagian
action="<?= base_url('siswa/save'); ?>"
artinya ketika tombol save di klik maka entrian form akan di proses didalam
method save pada controller Siswa
Pada Line 33 kita menuliskan perintah :
<?= csrf_field(); ?>
diatas digunakan untuk memberikan token CSRF (Cross-Site Request Forgery)
dibagian form, kami sarankan teman – teman menggunakan perlindungan CSRF ini.
Berikutnya kita buat beberapa inputan pada bagian form, seperti halnya kita membuat
form di HTML, kita perlu memberikan value pada attribute name di masing – masing
inputan form. (Line 36 name=”nama”), (Line 40 name=”email”), (Line 45
name=”password”), (Line 50 name=”alamat”)
Tombol submit kita buat di line 52
Untuk mengakses tampilan form teman – teman bisa mengaktifkan local
development server terlebih dahulu dengan perintah “php spark serve” lalu bisa
mengakses url :
1 localhost:8080/siswa
Tampilannya adalah sebagai berikut :
Sebelumnya kita sudah membuat tampilan form, berikutnya kita akan belajar
menuliskan perintah yang digunakan untuk mengakses inputan dibagian form.
Seperti yang telah kita tuliskan dibagian attribute action pada tag form, ketika tombol
submit di form di klik, maka inputan form akan diproses dibagian method save di
81
controller Siswa, perhatikan method save di controller Siswa kita menuliskan perintah
sebagai berikut :
Ketika kita klik tombol save, maka akan mengakses method save di controller
siswa, dan akan menampilkan seperti gambar dibawah.
82
terlihat kita sudah berhasil menangkap inputan berdasarkan name dari inputan
form. Semisal kita akan menangkap salah satu dari inputan saja, semisal kita ingin
menangkap inputan email saja, kita bisa merubah method save menjadi berikut ini :
1 public function save()
2{
3 var_dump($this->request->getVar('email'));
4}
Maka saat kita entry bagian form lalu klik tombol save, hasilnya adalah sebagai
berikut :
83
session()->setFlashdata('error', $this->validator->listErrors());
return redirect()->back()->withInput();
} else {
print_r($this->request->getVar());
}
}
Keterangan :
Line 3 kita gunakan perintah IF dimana melakukan pengecekan dari penggunaan
method $this->validate.
method validate, pada method validate kita isi parameternya dengan array
multidimensi, dimana bisa anda isi dengan rules (aturan) dan message error (pesan
error)
Misal jika kita lihat lagi :
'nama' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
artinya inputan nama, rulesnya ‘required’ (harus diisi), dan jika tidak diisi akan
menampilkan pesan error “nama Harus diisi”, {field} ini akan bernilai nama
inputannya.
'email' => [
'rules' => 'required|valid_email',
'errors' => [
'required' => '{field} Harus diisi',
'valid_email' => 'Format Email Harus Valid'
]
],
artinya inputan email, rulesnya ‘required’ (harus diisi), dan jika tidak diisi akan
menampilkan pesan error “email Harus diisi”, selain itu terdapat rules valid_email
artinya inputan harus menggunakan format email yang valid, jika tidak diisi maka
akan menampilkan pesan error “Format Email Harus Valid”
Jika terdapat rules yang bernilai false (inputan form tidak sesuai aturan) maka
akan menjalankan perintah di line 42 – 43.
Line 42 kita kirimkan error dengan menggunakan session flashdata, flashdata
adalah istilah pengiriman data lewat session, tapi hanya satu kali pakai, biasanya
digunakan untuk mengirimkan pesan / alert.
dalam contoh ini kita gunakan untuk mengirimkan pesan error dari form validation,
setFlashdata memiliki 2 parameter yaitu :
• nama flashdata
• value flashdata
session()->setFlashdata('error', $this->validator->listErrors());
pada contoh diatas kita membuat flashdata dengan nama error yang berisi list error
dari form validation
Line 43 kita tuliskan perintah :
1 return redirect()->back()->withInput();
Perintah diatas berfungsi untuk redirect ke halaman sebelumnya (form input),
yang artinya adalah halaman formSiswa, dengan menyertakan inputan yang sudah
dientrikan sebelumnya (withInput)
84
Line 45 akan dijalankan jika inputan form sudah sesuai rules.. kita tuliskan aja
sebagai contoh menggunakan perintah dd untuk menampilkan isi entrian form.
Setelah kita setting bagian form validation pada method save di controller Siswa,
berikutnya kita akan coba lakukan testing, kita coba akses dulu untuk formnya :
localhost:8080/Siswa
Maka tampilannya adalah seperti berikut ini :
Keterangan :
semisal kita isi bagian form untuk nama dan email, tapi bagian password dan alamat
kita kosongkan, lalu kita tekan tombol Save. Maka hasilnya adalah sebagai berikut :
Keterangan :
Maka akan menampilkan List Error pada form validation, ada kotak berwarna merah
diatas form, tertulis :
• password Harus diisi
• alamat Harus diisi
85
seperti yang telah dibahas dibagian method save, jika ada kesalahan pada form
validation maka akan menjalakan perintah :
session()->setFlashdata('error', $this->validator->listErrors());
jadi ketika redirect kembali ke bagian form entry, ada sebuah flashdata dengan
nama error yang berisi error dari form validation. nah sekarang perhatikan dibagian
file view formSiswa.php pada line 22 hingga line 31
<?php if (!empty(session()->getFlashdata('error'))) : ?>
<div class="alert alert-danger alert-dismissible fade
show" role="alert">
<h4>Periksa Entrian Form</h4>
</hr />
<?php echo
session()->getFlashdata('error'); ?>
<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<?php endif; ?>
Keterangan :
Hasil Akhir
Berikutnya saya sertakan code hasilnya mungkin teman – teman biar mudah
mengikutinya :
File Controller Siswa.php
<?php
namespace App\Controllers;
86
]
],
'email' => [
'rules' => 'required|valid_email',
'errors' => [
'required' => '{field} Harus diisi',
'valid_email' => 'Format Email Harus Valid'
]
],
'password' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
],
'alamat' => [
'rules' => 'required',
'errors' => [
'required' => '{field} Harus diisi'
]
]
])) {
session()->setFlashdata('error', $this->validator->listErrors());
return redirect()->back()->withInput();
} else {
echo "<pre>";
var_dump($this->request->getVar());
echo "</pre>";
}
}
}
File view formSiswa.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Width Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body>
<div class="container">
<div class="card">
<div class="card-header bg-primary text-white">Tambah Data Siswa</div>
<div class="card-body">
<?php if (!empty(session()->getFlashdata('error'))) : ?>
<div class="alert alert-danger alert-dismissible fade
87
show" role="alert">
<h4>Periksa Entrian Form</h4>
</hr />
<?php echo
session()->getFlashdata('error'); ?>
<button type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<?php endif; ?>
<form action="<?= base_url('siswa/save'); ?>" method="post">
<?= csrf_field(); ?>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama"
class="form-control" value="<?= old('nama'); ?>" id="nama">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email"
class="form-control" id="email" value="<?= old('email'); ?>">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password"
class="form-control" id="password">
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat"
class="form-control" cols="3" rows="3"><?= old('alamat'); ?></textarea>
</div>
<button type="submit" class="btn
btn-primary">Save</button>
</form>
</div>
</div>
</div>
</body>
</html>
88
PRESENTASI PROJEK
1. Tugas project diadakan untuk memperoleh nilai dan pengganti UTS dan UAS.
Tugas ini dikerjakan secara kelompok dengan maksimal 5 mahasiswa/kelompok
atau disesuaikan dengan jumlah mahasiswa dalam satu kelas.
2. Tugas dan Kelompok harus sesuai dan disinkronkan dengan tugas mata kuliah
SIM, PSBO, dan WP2.
3. Judul Project Kelompok tidak boleh sama dalam satu (1) kelas dan wajib
dikoordinasikan dahulu dengan dosen pengampu.
4. Bentuk tugas projek adalah membuat projek baru Aplikasi Web Php dengan
Framework CodeIgninter dengan tiga (3) pilihan sebagai berikut:
⚫ Membangun Aplikasi OOP baru dari riset kelompok di instansi/perusahaan atau
hasil observasi di internet.
⚫ Membangun Aplikasi OOP dengan referensi dari penelitian Dosen UBSI berupa
artikel ilmiah yang luarannya berupa Web Sistem Informasi. Artikel ilmiah dapat
dipilih dan unduh dari link Google Drive.
⚫ Membangun Aplikasi OOP dari modifikasi source code aplikasi web Php Native
(tidak menggunakan framework) baik hasil dari Project Kelompok Web
Programming I maupun source code yang didapat dari observasi di internet
5. Setiap kelompok membuat repository proyek public di Github dan link repository
disampaikan ke dosen pengampu untuk dipantau. Setiap anggota wajib bekerja dan
aktif di repository yang dapat dilihat/dibuktikan dari log repository.
Dokumen/file Tugas Project yang dikumpulkan ke dosen pengampu, antara lain:
⚫ Link Repository Project Kelompok
⚫ File Zip/Rar/7zip dari Project + Backup Database
⚫ Makalah Project (docx)
89
2.2.3. Class Diagram
2.3. Implementasi
Berisi screenshot interface tiap modul program (front end & back end) beserta
keterangan singkat fungsi dan penggunaannya.
2.4. Pengujian Unit
Pengujian unit dapat menggunakan tools PHPUnit dengan pilihan Teknik Unit
Testing berupa Blackbox Testing, White Box Testing, maupun Grey Box Testing.
LAMPIRAN
Lampiran 1. Log Repository Project (git log)
➔ Berisi screenshot Log Revisi tiap Author (anggota)
Lampiran 2. Kode Program
➔ Berisi hasil copy teks dari sample kode program project (Model-View-Control)
yang mewakili Autentikasi (Login), File Master, File Transaksi, dan File
Laporan. Ukuran font kecil jangan terlalu besar.
90
UJIAN AKHIR SEMESTER
Pertemuan 16
91
DAFTAR PUSTAKA
92