100% menganggap dokumen ini bermanfaat (3 suara)

807 tayangan

Tutorial Codeigniter 4

Diunggah oleh

Mustafa

Hak Cipta

Format Tersedia

Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

100% menganggap dokumen ini bermanfaat (3 suara)

807 tayangan

Tutorial Codeigniter 4

Diunggah oleh

Mustafa

Hak Cipta

Format Tersedia

Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 155

petanikode.

com

Tutorial Codeigniter #1: Pengenalan

Codeigniter untuk Pemula
Ahmad Muhardian

7-9 minutes

Kamu sudah belajar basic PHP dan OOP?

Bagus.

Kini saatnya belajar framework.

Framework telah terbukti banyak membantu web developer dalam mengembangkan web.

Proyek web yang diperkirakan bisa jadi dalam satu bulan, dengan framework..

..mungkin bisa jadi dalam seminggu.

Hebat kan.
Karena itu, kamu harus menggunakan framework agar bisa membuat web lebih cepat dan juga
hemat biaya dan tenaga.

Baiklah…

Framework yang akan kita pelajari di tutorial ini adalah Codeigniter.

Codeigniter cukup populer di Indoensia dan juga banyak penggunanya.

Mari kita mulai..

Apa itu Framework?

Sebelum masuk ke Codeigniter, kita bahas dulu pengertian framework.

Jadi:

Framework dalam bahasa indonesia artinya kerangka kerja.

Saya yakin, kamu yang sedang membaca artikel ini sudah pernah membuat web dengan PHP.

Setidaknya membuat web sederhana yang berisi beberapa halaman.

Apa yang akan kamu lakukan jika webnya semakin kompleks?

Ya ditambahin lagi donk kodenya.

Tapi..

Kadang ini tidak berjalan mulus.

Kode website kita akan semakin ribet dan berantakan. Bisa jadi disbeabkan karena kita asal-
asalan menambahkan kode.

Belum lagi, kita dituntut menulis kode yang rapi agar bisa dipahami orang lain (misalnya teman
satu tim).

Maka di sini kita tidak boleh seenaknya menulis kode yang asal-asalan.

Karena itu, diciptakanlah framework atau kerangka kerja.

Kerangka kerja dibuat agar kita bisa bekerja lebih mudah. Biasanya, framework menyediakan
bahan-bahan yang siap pakai, sehingga kita tidak harus membuatnya dari nol.

Selain itu, framework juga memiliki aturan-aturan yang harus diikuti.

Contohnya seperti:

 Harus menaruh kode yang memiliki fungsi yang sama dalam satu folder;
 Harus mengikuti aturan penulisan kode (writing conventions) yang disepakati;
 Harus menggunakan pola desain ini, dan itu;
 dan lain sebagainya.

Jadi apa itu framework?

Framework adalah sebuah kerangka kerja yang digunakan untuk membantu developer dalam
mengembangkan kode aplikasi secara konsisten.

Lalu..

Apa itu Codeigniter?

Codeigniter adalah salah satu framework untuk membuat website dengan bahasa pemrograman
PHP.

Codeigniter terkenal dengan konsep MVC-nya. MVC merupakan singkatan dari Model–View–
Controller.

Nanti kita akan bahas lebih dalam tentang MVC pada: Konsep dasar Framework Codeigniter.

Codeigniter pernah menapat pujian dari creator PHP: Rasmus Lerdorf

Ia menyukai Codeigniter karena lebih cepat dan lebih ringan. 1

Website Codeigniter
Keunggulan Codeigniter

Ada beberapa kelebihan CodeIgniter (CI) dibandingkan dengan Framework PHP lain,

 Performa cepat: Codeigniter merupakan framework yang paling cepat dibanding framework
yang lain. Karena tidak menggunakan template engine dan ORM yang dapat memperlambat
proses.
 Konfigurasi yang minim (nearly zero configuration): tentu saja untuk menyesuaikan dengan
database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan mengubah
beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk
menggunakan codeigniter dengan setting standard, anda hanya perlu mengubah sedikit saja
pada file di folder config.
 Memiliki banyak komunitas: Komunitas CI di indonesia cukup ramai, tutorialnya pun mudah
dicari.
 Dokumentasi yang lengkap: Codeigniter disertai dengan user_guide yang berisi dokumentasi
yang lengkap.
 Mudah dipelajari pemula: Bagi pemula, CI sangat mudah dipelajari. Karena CI tidak terlalu
bergantung pada tool tambahan seperti composer, ORM, Template Engine, dll.

Contoh Website yang dikembangkan dengan Codeigniter

Saat ini ada sekitar 753.660 website yang menggunakan Codeigniter di seluruh dunia, dan di
indonesia sendiri terdapat sekitar 17.505 website yang menggunakan Codeingiter. 2

Berikut ini beberapa website populer di Indonesia yang menggunakan Codeiginter:

 jakartaglobe.id
 jawapos.com
 itb.ac.id
 ipb.ac.id
 indihome.co.id
 cs.kaskus.co.id
 sipma.ui.ac.id
 epaper.republika.co.id
 ibt.ristekdikti.go.id
 project.co.id

 pu.go.id
 mechanical-rally.petra.ac.id
 fo3.garena.co.id
 ird.widyatama.ac.id
 bkddki.jakarta.go.id
 idws.id

Catatan: website ini bisa saja berubah-ubah dan berganti framework Data ini diambil dari
buildwith.com
pada tanggal 19 Agustus 2020.

Sejarah Singkat Codeigniter

Codeigniter pertamakali dibuat oleh EllisLab, sebuah perushaan software yang berbasis di Santa
Barbara California. 1

EllisLab merilis Codeigniter pertamakali pada tanggal 28 Februari 2006.

Beberapa tahun kemudian…

Sudah sekian lama tidak dikembangkan. EllisLab akhirnya ingin memberikan proyek
Codeigniter kepada orang lain.

Pada tanggal 9 Juli 2013, EllisLab mencari pemilik baru Codeigniter. Akhirnya pada tanggal 6
Oktober 2014 pengembangan Codeigniter dialnjutkan dibawa kepengurusan dari British
Columbia Institute of Technology (BCIT).

Lalu..

Pada tanggal 23 Oktober 2019, Codeigniter Foundation mengambil alih proyek ini dan tidak
lagi dibawa kepengurusan BCIT.

Codeigniter Foundation adalah yayasan non-profit yang dibentuk untuk pengembangan

Codeigniter lebih lanjut.

Proyek Codeigniter 4 pun dimulai dengan Jim Parry

sebagai project lead.

…dan akhirnya pada tanggal 24 Februari 2020 Codeigniter 4 resmi dirilis.

Tanggal ini diambil, sebagai penghormatan terakhir kepada Jim Parry yang telah meninggal
dunia pada tanggal 15 Januari 2020. 3
Akun Github Jim Parry
R.I.P Jim Parry, terimakasih atas kontribusinya di Codeigniter 4.

Versi dan Perkembangan Codeigntier

 Codeigniter 1 oleh EllisLab (sudah tidak dikembangkan)
 Codeigniter 2 oleh BCIT (sudah tidak dikembangkan)
 Codeigniter 3 oleh BCIT (masih dikembangkan)
 Codeigniter 4 oleh Codeingter Foundation (versi saat ini)

Codeigniter Versi Berapa yang Harus saya Pelajari?

Saya merekomendasikan mempelajari Codeigniter 3 atau Codeigniter 4. Karena kedua versi ini
masih dikembangkan hingga saat ini.

Codeigniter 3, adalah codeigniter yang dirilis oleh BCIT dan ditargetkan untuk digunakan pada
PHP 5.

Codeigniter 3 juga bisa digunakan di PHP 7.

Meskipun sudah ada Codeigniter 4, versi 3 masih tetap dikembangkan.

Jadi, masih akan ada update terbaru di versi 3 hingga waktu yang belum ditentukan.

Kita tunggu saja, pengumuman resmi kapan Codeigniter 3 akan dihentikan.

Sementara itu Codeigniter 4, ditargetkan untuk digunakan pada PHP 7 ke atas. Versi ini dirilis
oleh Codeigniter Foundation dan akan menjadi generasi penerus Codeigniter 4.

Bingung mau belajar yang mana?

Mari kita coba bandingkan secara detail

Perbedaan Codeigniter 3 dengan Codeigniter 4

Dari segi Codeigniter 3 Codeigniter 4

Versi PHP PHP 5.6+ PHP 7.2+

Release oleh BCIT Codeigniter Foundation

Konsep MVC MVC

Site Root project root folder public folder

Application folder application app

Dari segi Codeigniter 3 Codeigniter 4

Controller Class CI_Controller \CodeIgniter\Controller

Object HTTP req/res tidak ada Request dan Response

Model Class CI_Model \CodeIgniter\Model

CRUD di Model Bikin sendiri Sudah disediakan

Entity Class Tidak ada Ada

View $this->load->view(x); echo view(x);

View Cell tidak ada ada

Load Library $this->load->library(x); $this->x = new X();

Middleware Tidak ada Ada Filters

FIle .env Tidak ada Ada

Command Line Tools Tidak ada Ada spark

Nah, itulah beberapa perbandingan dari segi teknis. Semoga kamu bisa menentukan versi
Codeigniter yang akan dipelajari.

Kalau bedasarkan pilihan pribadi, saya lebih menyarankan belajar yang versi 4, karena punya
lebih banyak fitur dan lebih canggih dan juga terupdate.

Apa Selanjutnya?
Sejauh ini, kita sudah mengenal Codeigniter. Mulai dari mempelajari sejarah dan asal usulnya.
Hingga versi terbaru saat ini.

Jika kamu sudah menentukan versi Codeigniter yang akan dipelajari, silahkan lanjutkan ke:

 Persiapan Belajar Codeigniter 3

 Persiapan Belajar Codeigniter 4

Selamat belajar.

1. Wikipedia. “Codeigniter”

 . Retrieved 19 Agustus 2020. ↩︎

 Websites using CodeIgniter in Indonesia

 . Retrieved 19 Agustus 2020. ↩︎

 Important News about Jim Parry and the Project

3. . Retrieved 19 Agustus 2020. ↩︎

petanikode.com

Tutorial Codeigniter 4: Instalasi dan

Persiapan Belajar Codeigniter 4
Ahmad Muhardian
11-13 minutes

Sebelum mulai belajar Codeigniter 4 lebih, kita harus meyiapkan alat yang dibutuhkan untuk
coding Codeigniter 4.
Apa Saja itu?

Persiapan Sebelum Belajar CI 4

Prasyarat belajar Codeigniter 4..

 Memahami basic bahasa pemrograman PHP. Silahkan, ikuti tutorial basic pemrograman
PHP jika kamu belum menguasainya.
 Untuk bisa belajar Codeigniter dengan lancar setidaknya kamu sudah paham konsep
pemrograman berorientasikan objek (OOP) dengan PHP.
 Memahami sintaks dasar SQL;

Nah, setelah prasyarat ini terpenuhi. Selanjutnya silahkan siapkan alat-alatnya untuk mulai
belajar.

Berikut ini beberapa peralatan yang harus kamu siapkan di komputermu:

1. Teks Editor
2. Web Browser
3. Web Server: PHP, MySQL, Phpmyadmin
4. Composer
5. File Project Codeigniter

Mari kita siapkan satu-per-satu.

1. Teks Editor

Teks editor akan kita gunakan untuk menulis kode. Kamu bebas menggunakan teks editor apa
saja untuk coding CI.

Saya merekomendasikan menggunakan VS Code, karena mudah digunakan dan punya banyak
fitur.
Untuk menginstal VS Code, silahkan baca:

 Review dan Cara Install VS Code di Linux

2. Web Browser
Web browser akan kita gunakan untuk melihat hasil dari aplikasi. Kamu juga bebas
menggunakan web browser apapun, asalkan masih mendukung teknologi web modern zaman
sekarang.

Rekomendasi, gunakan Google Chrome atau Firefox.

Web Browser Firefox

3. Web Server
Codeigniter merupakan framework PHP, karena itu ia pasti membutuhkan web server. Berikut
ini requirement server untuk Codeigniter 4:

 PHP Versi 7.2+

 MySQL Versi 5.1+
 Phpmyadmin

Jika kamu sudah menginstal XAMPP, maka ketiga aplikasi server ini sudah terpenuhi. Tapi jika
kamu pengguna Linux, maka ini bisa diinstal satu-per-satu.

Silahkan baca:

 Cara Install XAMPP di Windows (recommended)

 Persiapan Pemrograman Web PHP di Linux (recommended)
 Cara Install XAMPP di Linux (alternatif)

Setelah menginstal webserver, kita harus mengaktifkan beberapa ekstension yang dibutuhkan
untuk pengembangan CI 4.

Apa saja itu?

 php-json ekstension untuk bekerja dengan JSON;

 php-mysqlnd native driver untuk MySQL;
 php-xml ekstension untuk bekerja dengan XML;
 php-intl ekstensi untuk membuat aplikasi multibahasa;
 libcurl (opsional), jika ingin pakai Curl.

Silahkan install semuanya dengan perintah:

sudo apt install php-json php-mysqlnd php-xml php-intl libcurl

Untuk kamu yang menggunakan Windows dan XAMPP. Silahkan buka XAMPP Control Panel,
lalu pada bagian apache klik Config->PHP.

Setelah itu, cari di bagian extension dan hapus ; yang ada di depan nama extension untuk
mengaktifkannya.
4. Composer

Composer adalah program berbasis command line (CLI) untuk menajemen proyek PHP. Tugas
dari composer adalah melakukan instalasi paket, membuat proyek baru, menjalankan script, dan
lain-lain.

Silahkan install Composer dengan perintah berikut:

Jika kamu ingin belajar tentang composer lebih lanjut, silahkan baca:

 Cara Menggunakan Composer untuk Manajemen Proyek PHP

O ya, di sana juga ada penjelasan tentang cara installComposer di Windows.

5. File Project Codeigniter

File project Codeigniter dapat di-download di website resmi Codeigniter. Nanti kita akan
mendapatkan file berupa ZIP. File inilah yang akan kita gunakan untuk mulai membuat proyek
Codeigniter.

File project ini juga dapat kita download dengan composer.

Silahkan ikuti:

Install CI 4 dengan Composer

Untuk menginstal CI 4 dengan composer, silahkan ketik perintah berikut.

composer create-project codeigniter4/appstarter ci-news -vvv

Tungulah sampai prosesnya selesai.

Ada beberapa argumen yang kita berikan pada perintah ini:

 create-project adalah perintah untuk membuat proyek baru dengan composer;

 codeigniter4/appstarter adalah file CI yang akan di-download;
 ci-news adalah nama proyek yang akan kita buat;
 -vvv berfungsi untuk melihat proses install lebih detail.

Setelah prosesnya selesai, kita akan mendapatkan folder baru dengan nama ci-news.

buka folder ci-news dengan teks editor VS Code.

Setelah itu buka terminal dengan menekan Ctrl+` dan jalankan perintah:

Perintah ini akan menginstal semua library yang dibutuhkan CI 4.

Setelah selesai, coba ketik perintah:
Perintah ini akan menjalankan server CI 4 pada port 8080.

Coba buka web browser dan arahkan ke alamat http://localhost:8080, maka hasilnya:
Selamat. 👏👏👏
CI 4 sudah berhasil diinstal.

Selanjutnya kita tinggal mulai coding.

Install CI 4 dengan Cara Manual

Nah, buat kamu yang ingin menginstal CI4 dengan cara manual, tanpa harus melalui Composer,
bisa ikuti cara ini.

Langkah-langkah yang harus dilakukan:

1. Download Codeigniter;
2. Ekstrak File ZIP Codeigniter ke htdocs.

Silahkan buka website Codeigniter

untuk mendownload.
Note: Biar versi CI4 sama dengan versi yang digunakan pada tutorial ini, yakni 4.0.4.. silahkan
Download CI dari link ini

Kita akan mendapatkan sebuah file zip 📦 framework-4.x.x.zip, ekstrak file tersebut ke dalam
c:\xampp\htdocs (XAMPP) atau /var/www/html (di Linux).

Setelah itu, ubah nama framework-4.x.xx menjadi ci-news.

Sekarang coba buka web browser dan buka alamat: http://localhost/ci-news/public/.

Jiak hasilnya kosong atau blank, maka kita harus melakukan install library yang dibutuhkan.

Silahkan buka folder ci-news dengan Visual Studio Code, lalu buka terminal dan ketik perintah
berikut.

Perintah ini akan menginstal semua library yang dibutuhkan CI 4.

Setelah itu, ubah kepemilikan dari folder writable dengan perintah berikut ini:
sudo chown -Rv www-data writable/

Note: ini khusus di Linux

Setelah selesai, coba buka kembali http://localhost/ci-news/public/, maka hasilnya:

Selamat. 👏👏👏
CI 4 sudah berhasil diinstal.

Selanjutnya kita tinggal mulai coding.

Biar Enak, Hidupkan Mode Debugging

CI4 menyediakan fitur debugging yang cukup bagus. Ini sama seperti profiler pada CI3.

Secara default, fitur ini belum aktif. Jika ada error pada aplikasi, maka ia akan menampilkan
pesan Whoops! seperti ini:

Kita tidak akan bisa tahu tempat masalahnya jika aplikasi cuma menampilkan ini. Cocoknya ini
dipakai pada aplikasi production.

Nah, untuk mengaktifkan mode debugging, kita harus mengubah environment variabel
CI_ENVIRONMENT menjadi development.
Silahkan buka file env, kemudian cari variabel CI_ENVIRONMENT dan ubahlah nilainya menjadi
development.

Setelah itu, ubah nama file env menjadi .env (tinggal tambah titik di depan).

Sekarang, coba buat sebuah kesalahan. Misalnya, saya menghapus titik koma pada controller
Home.
Lalu buka kembali aplikasinya.

Maka hasilnya:
Nah, dengan begini.. kita bisa debug aplikasi dengan lebih mudah. CI akan ngasih tahu, di mana
letak error-nya.

Nanti, setelah kita selesai mengembangkan aplikasi. Ubah kembali CI_ENVIRONTMENT menjadi
production.

Membuat Virutal Host Domain

Ini boleh kamu lakukan dan boleh juga tidak.

Buat kamu yang menginstal CI4 secara manual di htdocs, ada baiknya membuatkan virtual host
agar memudahkan dalam proses development.
Virtual host adalah alamat khusus yang kita buat di localhost untuk mengakses aplikasi.

Pada contoh di atas, kita membuka aplikasi melalui http://localhost/ci-news/public/.

Nah, dengan virtual host, kita bisa membukanya melalui cinews.test.

Nama domain yang digunakan terserah kita, bisa .com, .net, .web, dan sebagainya.

Tapi..

Biar tidak membingungkan dan bentrok dengan domain yang sudah ada di internet, kita berikan
domain .test atau .local saja.

Biaklah, langkah-langkah berikut:

Membuat Virtual Host di Linux

Untuk kamu pengguna Linux atau Mac, bisa mengikuti cara berikut. Silahkan buka Terminal lalu
ketik.

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-

available/cinews.test.conf

Perintah ini akan melakukan copy dari konfigurasi default host apache.

Setelah itu, buka file cinews.test.conf dengan tekes editor. Ketik perintah berikut:

sudo nano /etc/apache2/sites-available/cinews.test.conf

Lalu ubah isinya menjadi seperti ini:

<VirtualHost *:80>
ServerAdmin [email protected]
ServerName cinews.test
ServerAlias www.cinews.test
DocumentRoot /var/www/html/ci-news/public
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Setelah itu, tekan Ctrl+x lalu pilih y untuk menyimpan.

Berikutnya, buka file /etc/hosts ketik perintah berikut:

Setelah itu, tambahkan:

Ini akan menjadi alamat domain yang akan kita pakai. Kamu juga bisa menggantinya dengan
yang lain.
Setelah itu, simpan dengan menekan Ctrl+x lalu pilih y.

Berikutnya, kita harus mengaktifkan konfigurasi site apache yang sudah dibuat. Silahkan ketik
perintah berikut:

sudo a2ensite cinews.test.conf

Terakhir, restart server dengan perintah berikut:

sudo service apache2 restart

…dan coba buka alamat cinews.test dari web browser.

Membuat Virtual Host di Windows

Untuk kamu yang menggunakan XAMPP di Windows, berikut ini cara membuat virtual host.

Silahkan buka windows explorer, lalu masuk ke folder C:/xampp/apache/conf/extra.

Setelah itu, buka file httpd.vshosts.conf dengan Notepad atau Notepad++.
Selanjutnya tambahkan kode berikut ini pada file httpd-vhosts.conf:

<VirtualHost *:80>
ServerAdmin [email protected]
ServerName cinews.test
ServerAlias www.cinews.test
DocumentRoot "c:\xampp\htdocs\ci-news\public"
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory "c:\xampp\htdocs\ci-news\public"></Directory>
</VirtualHost>

Setelah itu, tekan Windows+r, lalu masukkan..

C:\Windows\System32\drivers\etc\hosts

pada kolom Open.

Tambahkan kode berikut:

Setelah itu simpan, dan restart server apache.

Sekarang coba buka browser dan arahkan ke alamat beritacoding.test, maka hasilnya:
Troubleshooting..
Saya yakin ada beberapa diantara kamu yang akan mendapatkan masalah saat install Codeigniter
4. Berikut ini beberapa masalah yang sering ditemukan.

Tidak bisa menjalankan server

Saat menjalankan server dengan perintah php spark serve muncul pesan error seperti ini:

PHP Warning:
require(/app/Config/../../vendor/codeigniter4/framework/system/bootstrap.php):
failed to open stream: No such file or directory in /home/dian/Playground/ci-
playground/ci-news/spark on line 44

Contoh:
Kalau kita lihat, perintah ini akan mencari file di folder vendor. Folder ini adalah folder yang
berisi library yang diinstal dengan composer.

✅ Solusi:

Lakukan install dengan perintah

Argumen -vvv berfungsi untuk melihat proses instalasi lebih detail.

Tunggulah sampai prosesnya selesai..

..dan akan ada folder vendor di proyek kita.

Tidak bisa melakukan install

Saat melakukan install dengan perintah composer install, muncul pesan seperti ini:

codeigniter4/framework v4.0.4 requires ext-intl * -> the requested PHP

extension intl is missing from your system
Installation request for codeigniter4/framework ^4 -> satisfiable by
codeigniter4/framework[4.0.0, v4.0.1, v4.0.2, v4.0.3, v4.0.4].

Ini artinya ekstensi ext-intl belum terinstal

✅ Solusi:

Instal ekstensi tersebut dengan perintah:

sudo apt install php-intl

Setelah itu, coba jalankan lagi composer install

Apa Selanjutnya?
Pada tahapan ini, kita sudah berhasil membuat proyek baru Codeigniter. Baik itu dengan
composer, maupun install secara manual ke htdocs.
Kamu lebih suka cara yang mana?

Kalau saya, lebih suka yang pakai Composer, karena lebih praktis.

Berikutnya, silahkan pelajari tentang:

 ➡️Tutorial CI 4 #03: Memahami Konsep MVC di CI 4

Untuk tutorial CI lainnya, cek di 📚 List Tutorial Codeigntier

petanikode.com

Tutorial Codeigniter 4: Konsep Dasar CI4

yang Harus dipahami
Ahmad Muhardian
6-8 minutes

Sudah berhasil install CI 4?

Bagus..

Berikutnya, kita akan berkenalan lebih dekat dengan CI4.

Harapannya, kamu bisa terbiasa denga lingkungan kerja atau codebase CI4.

Kita akan mulai dengan mengenal struktur direktorinya terlebih dahulu, lalu membahas konsep
MVC yang ada di Codeigniter 4.

Baiklah..

Mari kita mulai!

Struktur Direktori Codeigniter 4

Jika kamu baru pertama kali belajar Codeigniter, maka wajib hukumnya mengetahui apa saja isi
direktori dan file yang ada di dalam project codeigniter.

Silahkan buka teks Editor VS Code, lalu pilih File->Open Folder. Cari folder 📁 ci-news.

Maka kita akan mendapatan struktur direktori seperti ini:

Terdapat beberapa direktori dan file di sana. Mari kita bahas satu persatu. Mulai dari direktori
dulu ya.
Struktur direktori Codeigniter 4

 📁 .github folder ini kita butuhkan untuk konfigurasi repo github, seperti konfigurasi
untuk build dengan github action;
 📁 app folder ini akan berisi kode dari aplikasi yang kita kembangkan;
 📁 public folder ini berisi file yang bisa diakses oleh publik, seperti file index.php,
robots.txt, favicon.ico, ads.txt, dll;
 📁 tests folder ini berisi kode untuk melakukan testing dengna PHPunit;
 📁 vendor folder ini berisi library yang dibutuhkan oleh aplikasi, isinya juga termasuk
kode core dari system CI.
 📁 writable folder ini berisi file yang ditulis oleh aplikasi. Nantinya, kita bisa pakai
untuk menyimpan file yang di-upload, logs, session, dll.
Berikutnya, kita akan bahas tentang file-file yang ada di direktori CI 4.

 📄 .env adalah file yang berisi variabel environment yang dibutuhkan oleh aplikasi.
 📄 .gitignore adalah file yang berisi daftar nama file dan folder yang akan diabaikan
oleh Git.
 ⚙️build adalah script untuk mengubah versi codeigniter yang digunakan. Ada versi
release (stabil) dan development (labil).
 📜 composer.json adalah file JSON yang berisi informasi tentang proyek dan daftar
library yang dibutuhkannya. File ini digunakan oleh Composer sebagai acuan.
 📜 composer.lock adalah file yang berisi informasi versi dari libraray yang digunakan
aplikasi.
 ©️license.txt adalah file yang berisi penjelasan tentang lisensi Codeigniter;
 📜 phpunit.xml.dist adalah file XML yang berisi konfigurasi untuk PHPunit.
 📖 README.md adalah file keterangan tentang codebase CI. Ini biasanya akan dibutuhkan
pada repo github atau gitlab.
 ⚙️spark adalah program atau script yang berfungsi untuk menjalankan server, generate
kode, dll.

Kemudian, coba kita fokus ke folder 📁 app, di sana ada beberapa fodler dan file yang perlu kita
ketahui.

 📁 Config adalah folder yang berisi konfigurasi untuk aplikasi;

 📁 Controllers adalah folder yang berisi kode Controller dari aplikasi;
 📁 Database adalah folder yang berisi kode untuk migrasi database;
 📁 Filters adalah folder yang berisi kode untuk filter atau middleware;
 📁 Helpers adalah folder yang berisi kode untuk fungsi-fungsi helper;
 📁 Language adalah folder yang berisi kamus bahasa untuk aplikasi;
 📁 Libraries adalah folder yang berisi library tambahan untuk aplikasi;
 📁 Models adalah folder yang berisi kode untuk model;
 📁 ThridParty adalah folder yang berisi library dari pihak ketiga;
 📁 Views adalah folder yang berisi kode untuk view;
 📜 .htaccess adalah file yang berisi konfigurasi akses untuk web server;
 📜 Common.php adalah file yang berisi definisi fungsi untuk menindih fungsi core dari CI.
 📜 index.html adalah file placeholder untuk mencegah direct access.

Nah, itulah beberapa file dan folder yang harus dipahami. Sebenarnya masih banyak lagi file di
dalam folder app yang harus kamu ketahui.

Namun, karena terlalu banyak.. nanti kita bahas barengan dengan tutorial berikutnya.

Mengenal Konsep MVC Codeigniter 4

Codeigniter sejak awal menganut konsep MVC. Karena itu, ia begitu terkenal. Soalnya,
implementasi MVC di CI mudah dipahami.
Apa itu MVC?

MVC adalah singkatan dari Model–View–Controller. MVC merupakan sebuah pola desain
arsitektur yang umum digunakan dalam pengembangan aplikasi.

Masih ingat latar belakang mengapa kita harus pakai framework?

Yap, biar kode program lebih konsisten dan tersetruktur. Sehingga kita akan mudah kolaborasi
dengan tim.

Nah, si MVC ini adalah pola penulisan kode yang umum dipakai.. dimana kode untuk Model di
taruh dalam folder yang sama, begitu juga dengan kode untuk View dan Controller.

Coba perhatikan gambar berikut:

Gambar ini menyatakan bagaimana hubungan kode pada MVC.

Apa itu Model?

Model adalah kode yang bertugas untuk membuat pemodelan data. Kadang juga dipakai untuk
pemodelan bisnis.

Model bisa mengakses data dari Database dan juga sumber lainnya.

Intinya:
Kalau berkaitan tentang data, itu tugasnya model.

Apa itu View?

View adalah kode yang bertugas untuk membuat tampilan aplikasi.

Ingat:

Fokusnya untuk membuat tampilan aplikasi, bukan yang lain. Kita tidak boleh query data dari
view, meskipun itu bisa dilakukan.

Kadang juga kita akan membuat sedikit logika di dalam view, seperti logika untuk menampilkan
dan menghilangkan elemen tertentu.

Apa yang kita lihat di aplikasi, itu adalah kode dari View.

Apa itu Controller?

Nah, si Controller inilah yang bertugas menyatukan Model dan View.

Jadi, setiap ada request..

Controller akan bertanggung jawab untuk membalas request tersebut.

Jika itu request untuk menyimpan data ke database, maka Controller harus memanggil Model
yang bertanggung jawab untuk data tersebut. Lalu meminta model untuk menyimpannya ke
database.

Jika itu request untuk view data, maka Controller akan mencari kode View yang bertanggung
jawab untuk menampilkan data tersebut.

Kadang juga Controller akan membutuhkan beberapa library dan helper untuk memproses
request.

Intinya:

Controller bertanggung jawab untuk membalas request dari client.

Tapi sebelum itu.. ada router di depan controller yang bertanggung jawab untuk menentukan
Controller mana yang akan dieksekusi.

Router di Codeigniter 4
Coba buka file app/Config/Routes.php. File ini adalah file router yang bertugas untuk
menentukan, Controller mana yang akan bertanggung jawab pada request tertentu.
Sebagai contoh:

Perhatikan kode ini.

$routes->get('/', 'Home::index');

Saat ada request ke halaman root (/) atau alamat domain dari aplikasi, maka Controller yang
akan bertugas adalah Home dan method yang akan dipakai adalah index.

Intinya:

Router akan memberikan tugas pada Controller tertentu untuk membalas sebuah request.

Apa Selanjutnya?
Jadi kesimpulannya:

Codeigniter 4, menggunakan konsep MVC. Request pada Codeigniter pertamakali akan diterima
oleh file public/index.php kemudian diteruskan ke router dan diproses oleh Controller.

Berikutnya, silahkan pelajari:

 ➡️Tutorial CI 4: Memahami Router dan Controller

Untuk tutorial CI lainnya, cek di 📚 List Tutorial Codeigntier

petanikode.com

Tutororial Codeigniter 4: Memahami

Routing dan Controller
Ahmad Muhardian
5-7 minutes

Routing dan Controller..

Kedua hal ini wajib kamu pahami.

Mengapa?

Karena kedua hal inilah yang menjadi ‘penggerak’ dalam aplikasi.

Pada tutorial ini, kita akan belajar seputar Routing dan Controller pada Codeigniter 4.

Pastikan kamu menyimaknya sampai selesai agar benar-benar paham.

Baiklah…

Mari kita mulai!

Routing adalah proses menentukan arah atau rute yang harus dilalui.

Pada framework CI4, routing bertujuan untuk menentukan Controller mana yang harus merespon
sebuah request.

Controller adalah class atau script yang bertanggung jawab merespon sebuah request.

Ia bisa saja merespon dengan mengirimkan view, data JSON, data XML, atau bahkan tidak
mengirimkan respon apapun.

Karena ada juga bagian dari Controller yang harnya bertugas menerima data dan menyimpannya
ke database.

Coba perhatikan lagi gambar ini:

File index.php adalah file entri point yang akan dieksekusi pertamakali saat aplikasi dibuka.

Request yang diterima oleh index.php akan diserahkan ke Router. Lalu si Router akan
menentukan Controller yang akan meresponnya.

Oh iya, jangan bingung dengan istilah routes, router, dan routing..

Berikut ini penjelasannya:

 Routes adalah kumpulan definisi routing;

 Router adalah script yang menentukan routing;
 Routing adalah proses menentukan rute.

Lalu, bagaimana cara kita membuat Routes di Codeigniter?

Mari kita bahas:

Membuat Routes di Codeigniter

Oke, sekarang coba lihat kembali kode aplikasi ci-news.

Buka file app/config/Routes.php.

Pada file Routes.php, kita bisa mendefinisikan rute untuk aplikasi.
Coba perhatikan bagian ini:

$routes->get('/', 'Home::index');

Ini adalah rute untuk home page.

Bingung?

Coba perhatikan gambar berikut:

Sudah paham?

Bagus..

Sekarang mari kita coba membuat sebuah rute baru.

Tambahkan kode berikut di dalam Routes.php:

$routes->get('/about', 'Page::about');
$routes->get('/contact', 'Page::contact');
$routes->get('/faqs', 'Page::faqs');

Nah, di sini kita membuat tiga buat rute baru. Pada rute ini kita memberikan tugas kepada
controller Page untuk merespon request pada rute tersebut.

Sehingga sekarang kode routes-nya menjadi seperti ini:

Untuk memastikan rute sudah dibuat dengan benar, coba ketik perintah:

Jika muncul seperti ini:

Maka pembuatan rute berhasil.

Selanjutnya kita harus membuat Controller Page.php.

Membuat Controller
Silahkan buat file baru di dalam folder app/Controllers dengan nama Page.php.
Pastikan kamu menggunakan huruf kapital di awal nama file. Karena ini sudah menjadi aturan
pada Codeigniter.

Kemudian isi file Page.php dengan kode berikut:

<?php namespace App\Controllers;

class Page extends BaseController

{
public function about()
{
echo "about page";
}

public function contact()

{
echo "contact page";
}

public function faqs()

{
echo "Faqs page";
}

Controller Page memiliki tiga method, yakni about(), contact(), dan faqs().

Nama method ini mengikuti nama yang sudah kita tentukan di dalam rute. Jika kita
menggunakan nama yang berbeda, maka ia tidak akan bisa dibuka.

Pada setiap method di Controller Page, kita membuat respon dengan perintah echo. Kita juga
nanti bisa merespon dengan view.

Oke, sekarang mari kita tes hasilnya.

Silahkan buka halaman berikut:

 localhost:8080/about
 localhost:8080/contact
 localhost:8080/faqs

Hasilnya:
Bagus..

Rute yang kita buat berhasil dibuka.

Autoroute di Codeigniter 4
Pada Codeigniter 3, routing dilakukan secara otomatis dengan mengikuti nama Controller dan
method-nya.

Pada Codeigniter 4, kita juga bisa mengaktifkan fitur ini dengan kode:

$routes->setAutoRoute(true);

Jika ingin menonaktifkan autoroute, tinggal ganti true menjadi false.

$routes->setAutoRoute(false);

Secara default, fitur autoroute sudah aktif.

Mari kita coba..

Tambahkan method tos() pada Controller Page dengan isi seperti ini:

public function tos()

{
echo "Halaman Term of Service";
}
Sehingga sekarang kode Controller Page menjadi seperti ini:

<?php namespace App\Controllers;

class Page extends BaseController

{
public function about()
{
echo "about page";
}

public function contact()

{
echo "contact page";
}

public function faqs()

{
echo "Faqs page";
}

public function tos()

{
echo "Halaman Term of Service";
}

Ingat:

Method tos() belum kita daftarkan di dalam Routes.php. Namun, karena kita mengaktifkan
autoroute, maka method ini bisa kita akses melalui:

localhost:8080/index.php/page/tos

Hasilnya:
Sekarang coba matika fitur autoroute.

Pada kode app/Config/Routes.php, berikan nilai false pada setAutoRoute().

$routes->setAutoRoute(false);

Maka sekarang method tos() tidak akan bisa dibuka.

Ini karena kita mematikan fitur autoroute.

Sebaiknya pakai autoroute atau manual route?

Sebenarnya ini tergantung kita sebagai developer, jika tidak ingin repot-repot membuat rute
maka baiknya pakai autoroute. Namun atuoroute akan membuat semua method public di
Controller akan bisa diakses.

Apa Selanjutnya?
Sebenarnya masih banyak lagi hal tentang routing yang harus diketahui. Namun, untuk tutorial
basic.. saya cukupkan sampai di sini.

Nanti kita akan pelajari routing lebih lenjut, bersamaan dengan dengan pembahasan fitur
Codeigniter lainnya.

Barikutnya kita akan belajar tentang View di Codeigniter.

Silahkan lanjutkan ke:

 ➡️Tutorial Codeigniter: Memahami View di Codeigniter

Untuk tutorial CI lainnya, cek di 📚 List Tutorial Codeigntier

petanikode.com

Tutorial Codeigniter 4: Cara Membuat View

yang Menarik dengan Bootstrap
Ahmad Muhardian
21-26 minutes

View yang menarik tentunya akan membuat nyaman penggunanya.

Banyak orang yang kesulitan membuat view yang menarik, karena kurang paham cara membuat
CSS-nya.

Namun, jangan khawatir..

Sekarang sudah banyak CSS Framework yang siap pakai. Salah satunya adalah Bootstrap.

Bootstrap adalah CSS Framework yang banyak digunakan saat ini. Bootstrap memberikan kita
kemudahan dalam membuat tampilan web yang menarik.
Pada tutorial ini, kita akan belajar tentang View di Codeigniter 4 dan juga menggunakan
Bootstrap.

Mari kita mulai..

Menambahkan Bootstrap di Codeigniter 4

Pertama.. silahkan download Bootstrap dari link berikut ini:

 📥 Download bootstrap-4.5.2-dist.zip

Setelah itu, ekstrak folder 📁 css dan 📁 js ke dalam folder 📁 public di project kita.

Sehingga isi folder 📁 public akan menjadi seperti ini:

Setelah itu, tambahkan JQuery.. karena bootstrap versi 4.5.2 ini juga membutuhkan JQuery
untuk bisa mengaktifkan beberapa fitur.

Download JQuery melalui link berikut.

 📥 Download jquery.min.js

 (klik kanan save as)

Setelah itu, pindahkan ke dalam folder public/js, sehingga sekarang kita punya file
jquery.min.js di sana.

Buat yang belum tahu..

Folder 📁 public adalah folder yang berisi file statis seperti Gambar, CSS, JS, dan lain-lain.

Semua file yang ada di dalam folder nantinya akan kita buatkan link dengan fungsi base_url()
pada View.

Namun, sebelum itu..

Mari kita kenalan dulu dengan View di Codeigniter.

Apa itu View di Codeigniter?

View adalah bagian dari Codeigniter yang bertugas untuk membuat tampilan. View berisi kode
HTML, PHP, CSS, dan Javascript yang membentuk sebuah tampilan.

Masih ingat dengan konsep MVC di tutorial sebelumnya?

Ketiga komponen ini saling bekerja sama dalam aplikasi Codeigniter.

 Model bertugas untuk mengolah data;

 View bertugas untuk membuat tampilan;
 Controller bertugas untuk membuat logika dan merespon request.

Saat Controller merespon sebuah request, kadang ia harus mengirimkan view ke client.

Cara Load View di Controller

Pada tutorial sebelumnya ( Routing dan Controller), kita merespon request dengan perintah echo.

public function about()

{
echo "Halaman About";
}

Seharusnya di sini kita merespon dengan mengirimkan view.

Bagaimana caranya?
Caranya, kita harus gunakan fungsi view().

Contoh:

public function about()

{
echo view('about');
}

Saat fungsi view() dieksekusi, ia akan mencari file view pada folder 📁 app/Views berdasarkan
nama file view yang diberikan.

Mari kita coba..

Kita akan membuat 4 buah view untuk halaman Home, About, Contact, dan Faqs.

Silahkan buka Controller Page, kemudian ubah kodenya menjadi seperti ini:

<?php namespace App\Controllers;

class Page extends BaseController

{
public function about()
{
echo view("about");
}

public function contact()

{
echo view("contact");
}

public function faqs()

{
echo view("faqs");
}
}

Berikutnya, kita akan membuat file view-nya.

1. View untuk Halaman Home

Secara default, view halaman home adalah welcome_message.php, kita bisa juga menggantinya
dengan yang lain.

Namun, biar cepat.. Kita modifikasi saja view ini.

Silahkan ubah isi kode apps/Views/welcome_message.php menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?
>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?=
base_url('about') ?>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?=
base_url('contact') ?>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?=
base_url('faqs') ?>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron jumbotron-fluid">

<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Portal Berita
Codeigniter</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Codeigniter 4 Sudah
Rilis!</h5>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam perferendis commodi tenetur quos
ducimus repellat nulla, nam magni. Commodi iusto ad harum voluptas
exercitationem facere eos earum laboriosam excepturi quas?</p>
</div>
</div>
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Pengembangan Codeiginter
4 Tertunda</h5>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam perferendis commodi tenetur quos
ducimus repellat nulla, nam magni. Commodi iusto ad harum voluptas
exercitationem facere eos earum laboriosam excepturi quas?</p>
</div>
</div>
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Wow, Ini 5 Startup yang
Menggunakan Codeigniter</h5>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam perferendis commodi tenetur quos
ducimus repellat nulla, nam magni. Commodi iusto ad harum voluptas
exercitationem facere eos earum laboriosam excepturi quas?</p>
</div>
</div>
<div class="col-md-12 my-2 card">
<div class="card-body">
<h5 class="h5">Codeigniter Ternyata
Framework Terpopuler di Inodnesia</h5>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam perferendis commodi tenetur quos
ducimus repellat nulla, nam magni. Commodi iusto ad harum voluptas
exercitationem facere eos earum laboriosam excepturi quas?</p>
</div>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?=
Date('Y') ?> CI News</div>
</footer>

</body>

</html>

Jika sekarang kita membuka localhost:8080, maka tampilannya akan berubah menjadi seperti
ini.
Kereen.. 😍

Mari kita buat juga view untuk halaman yang lainnya.

2. View untuk Halaman About

Buatlah file baru di dalam folder app/Views dengan nama about.php dan isilah dengan kode
berikut.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About us</title>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">About us</h1>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?=
Date('Y') ?> CI News</div>
</footer>

</html>

Hasilnya: localhost:8080/about
3. View untuk Halaman Contact
Buatlah file baru dengan nama contact.php di dalam folder app/Views dengan isi sebagai
berikut:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact us</title>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Contact us</h1>
</div>
</div>
</div>
</header>

<form action="" class="form">

<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>

<div class="form-group">
<label for="email">Message</label>
<textarea name="message" class="form-control" id="" cols="30"
rows="10"></textarea>
</div>

</form>

</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?=
Date('Y') ?> CI News</div>
</footer>

</body>

</html>

Hasilnya: localhost:8080/contact
4. View untuk Halaman FAQs

Terakhir.. buatlah file baru dengan nama faqs.php di dalam folder app/Views dengan isi
sebagai berikut:

<!DOCTYPE html>
<html lang="en">

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">FAQs</h1>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="h2">Apa itu CI Neews?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<h2 class="h2">Bagaimana Cara Membuat Akun CI News?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<h2 class="h2">Bagaimana Cara Menulis Artikel di CI News?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
<h2 class="h2">Apakah CI News Official?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia modi unde cumque! Cum repellendus eveniet, illum id doloribus,
quibusdam tenetur debitis est libero quasi assumenda voluptates aliquam
tempore. Porro, asperiores.</p>
</div>
</div>
</div>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?=
Date('Y') ?> CI News</div>
</footer>

</html>

Hasilnya: localhost:8080/faqs
Mengirim Data Ke View
Sejauh ini, kita sudah berhasil menampilkan view.

Namun, kadang kita juga nantinya akan menggunakan data dari database dan menampilkannya
di dalam view.

Karena itu, kita harus mengirim data ke View.

Caranya bagaimana?

Caranya:

Tambahkan variabel array sebagai parameter kedua pada fungsi view().

Data yang akan dikirim ke view harus dalam bentuk array asosiatif.

Array asosiatif adalah array yang memiliki key dan value. Key akan menjadi nama variabel di
dalam view, dan value akan menjadi nilainya. Value ini bebas kita isi dengan apa saja.. boleh
diisi dengna string, array, object, integer, dll.

Jika kamu baru mendengar jenis array ini.. saya sarankan untuk membaca lagi tutorial tentang
Array di PHP.

Lanjut..
Sekarang mari kita coba mengirim data ke view.

Silahkan buka Controller Page, kemudian ubahlah kode pada method contact() menjadi seperti
ini:

public function contact()

{
$data['name'] = "Petani Kode";
echo view("contact", $data);
}

Variabel $data adalah variabel asosiatif array, dengan name sebagai key dan ‘Petani Kode’
sebagai value untuk name.

Key name nantinya akan menjadi sebuah variabel di dalam view.

Sekarang, buka kode app/Views/contact.php dan tambahkan kode di bawah ini tepat di atas
pembuatan form.

<h3 class="h3">Hello <?= $name ?>!</h3>

<p>Silahkan hubungi kami melalui form berikut</p>

Sehingga akan menjadi seperti ini:

Perhatikanlah..

Di sana kita menggunakan:

untuk mencetak isi variabel name.

Ini adalah bentuk singkat dari

Oke..

Sekarang coba buka halaman contact melalui alamat localhost:8080/contact, maka hasilnya:
Mengirim Data Array ke View

Jika tadi kita hanya mengirim data berupa string, kini kita coba yang lebih kompleks dengan
mengirim data array.

Biasanya ini nanti akan sering kita pakai untuk menampilkan data yang berasal dari database.

Baiklah..

Silahkan buka Controller Page, kemudian ubah kode pada method faqs menjadi seperti ini.

<?php

namespace App\Controllers;

class Page extends BaseController

{
public function about()
{
echo view("about");
}

public function contact()

{
$data['name'] = "Petani Kode";
echo view("contact", $data);
}

public function faqs()

{
// membuat data untuk dikirim ke view
$data['data_faqs'] = [
[
'question' => 'Apa itu Codeigniter?',
'answer' => 'Codeigniter adalah framework untuk
membuat web'
],
[
'question' => 'Siapa yang membuat
Codeiginter?',
'answer' => 'CI awalnya dibuat oleh Ellislab'
],
[
'question' => 'Codeigniter versi berapakah yang
digunakan pada tutoril ini?',
'answer' => 'Codeigniter versi 4.0.4'
]
];

// load view dengan data

echo view("faqs", $data);
}
}
Variabel $data adalah variabel yang berisi asosiatif array. Pada kode di atas, kita membuat
data_faqs sebagai key dan mengisinya dengan array dari kumpulan pertanyaan dan jawaban.

Berikutnya, silahkan ubah kode view app/Views/faqs.php menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?= Date('Y') ?> CI
News</div>
</footer>

</html>

Pada kode tersebut, kita menggunakan perulangan foreach untuk meng-iterasi semua data pada
variabel $data_faqs.

Maka hasilnya:
Apa Selanjutnya?
Sejauh ini kita sudah berhasil membuat view di Codeigniter.

Namun..

Jika diperhatikan, semua view yang dibaut strukturnya sama dan diulang-ulang. Mulai dari
pembuatan <!DOCTYPE html> hingga bagian penutup HTML-nya.
Hanya saja berbeda di bagian konten.

Ini boleh-boleh saja dilakukan.

Tapi masalahnya nanti saat kita mengubah sesuatu—misalnya mengubah warna navbar—maka
kita harus mengubah di semua view. Kalau cuma satu atau dua view, ini tidak apa-apa.

Tapi kalau sudah banyak.. kita bakal kerepotan.

Solusinya:

Gunakan View Layout dan View Cell.

Nah, selanjutnya kita akan belajar tentang dua hal ini. Silahkan lanjutkan ke:

 Tutorial CI 4 (Part #06): Membuat Template dengan View Layout

 Tutorial CI 4 (Part #07): Membuat Widget dengan View Cell

Untuk tutorial Codeigniter lainnya, cek di 📚 List Tutorial Codeigniter

petanikode.com

Tutorial Codeigniter 4: Membuat Template

yang Efektif dengan View Layout
Ahmad Muhardian
14-18 minutes
Ini adalah lanjutan dari tutorial sebelumnya. Jika kamu belum membacanya, saya sarankan untuk
membacanya terlebih dahulu.

 Tutorial Codeigniter 4 (Part #05): Membuat View untuk Halaman

Pada tutorial sebelumnya, kita sudah membuat View. Namun, kita membuatnya dengan kode
yang sama dan berulang-ulang.

Ini tentunya kurang efektif jika kita punya banyak view.

Mengapa?

Karena jika ada sedikit perubahan—misalnya mengubah warna navbar—maka kita harus
mengubahnya di semua view.

Bayangkan jika kita punya banyak view..

Pasti akan capek mengedit semuanya.

Karena itu, gunakanlah View Layout biar view yang kita buat lebih efektif.

Apa itu View Layout?

View Layout adalah fitur terbaru di Codeigniter 4 yang akan membantu kita dalam membuat
layout untuk halaman atau view.

Layout kita butuhkan agar tidak mengulang-ulang kode yang sama di dalam View. Cukup buat
satu kode layout dan nanti kita pakai di beberapa view.

Coba perhatikan gambar berikut:

Pada gambar tersebut, kita punya dua layout.. yakni Page Layout dan Post Layout.

Page Layout menggunakan satu kolom, sedangkan Post Layout menggunakan dua kolom.

Jika kamu pernah membuat template blog, pasti tidak akan asing dengan layout ini.

Nah nantinya kedua Layout ini akan dipakai oleh beberapa view.

Page Layout akan dipakai pada view About Page, Contact Page, FAQs Page, dll.

..dan untuk Post Layout akan dipakai untuk view News Page dan juga Blog post.

Jika kamu punya halaman produk, bisa juga dibuatkan layout tersendiri. Namun, karena kita
menggunakan studi kasus web portal berita, kita cukup buat dua Layout saja.

Oke, sekarang mari kita coba membuatnya.

Membuat Layout untuk Page
Buatlah folder baru di dalam app/Views dengan nama layout.

Folder ini akan kita pakai untuk menyimpan kode layout.

Selanjutnya..

Buatlah file PHP baru di dalam folder 📁 layout dengan nama page_layout.php dan isilah
dengan kode berikut.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<?= $this->renderSection('content') ?>

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright &copy <?=
Date('Y') ?> CI News</div>
</footer>

</body>

</html>

Coba perhatikan kode di bawah </header>.

<?= $this->renderSection('content') ?>

Kode ini berfungsi untuk me-render bagian konten dari halaman. Artinya nanti di bagian ini akan
berisi konten yang berbeda-beda.

Selanjutnya, ubah kode view untuk halaman Home, About, Contact, dan FAQs.

Ubah kode app/Views/welcome_message.php menjadi seperti ini:

<?= $this->extend('layout/page_layout') ?>

<?= $this->section('content') ?>

<?= $this->endSection() ?>

Ubah kode app/Views/about.php menjadi seperti ini:

<?= $this->extend('layout/page_layout') ?>

<?= $this->section('content') ?>

Ubah Kode app/Views/contact.php menjadi seperti ini:

<?= $this->extend('layout/page_layout') ?>

<?= $this->section('content') ?>

<h3 class="h3">Hello <?= $name ?>!</h3>

<p>Silahkan hubungi kami melalui form berikut</p>

<form action="" class="form">

<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>

<div class="form-group">
<label for="email">Message</label>
<textarea name="message" class="form-control" id=""
cols="30" rows="10"></textarea>
</div>

</form>

</div>
</div>
</div>

<?= $this->endSection() ?>

Terakhir ubah kode app/views/faqs.php menjadi seperti ini:

<?= $this->extend('layout/page_layout') ?>

<?= $this->section('content') ?>

<?= $this->endSection() ?>

Jika kita lihat hasilnya, maka tidak akan terlihat perubahan apapun.

Namun, cobalah untuk melihat di bagian Debugger bar. Klik pada logo CI yang ada di pojok
kanan bawah, lalu klik menu Views.
Berdasarkan hasil tersebut, ada dua view yang digunakan.

Oke sekarng coba perhatikan..

Setiap View yang ingin menggunakan layout harus meng-extend Layoutnya.

<?= $this->extend('layout/page_layout') ?>

Lalu setelah itu, barulah kita buat view section untuk menampilkan konten.

<?= $this->extend('layout/page_layout') ?>

<?= $this->section('content') ?>

<?= $this->endSection() ?>

Gampang kan..

View Partial untuk Layout

View Partial adalah view yang bisa digunakan kembali. View Partial bisa kita include-kan atau
gunakan di dalam Layout maupun View.

Cara membuat view partial sama seperti membuat view biasa.

Mari kita coba buat..

Kita akan membuat tiga partial, yakni navbar.php, header.php, dan footer.php.

Buatlah file baru di dalam folder app/Views/layout/ dengan nama navbar.php, kemudian isi
dengan kode berikut:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

Selanjutnya buat lagi file baru dengan nama header.php dengan isi sebagai berikut:

<header class="jumbotron jumbotron-fluid">

<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Portal Berita Codeigniter</h1>
</div>
</div>
</div>
</header>

Terakhir, buatlah file footer.php dengan isi sebagai berikut.

<footer class="jumbotron jumbotron-fluid mt-5 mb-0">

<div class="container text-center">Copyright © <?= Date('Y') ?> CI
News</div>
</footer>

Sehingga sekarang kita punya tiga file partial di dalam folder Views/layout.
Berikutnya, kita akan menggunakan partial ini di dalam page_layout.php.

Ubahlah isi file page_layout.php menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>

<body>

<?= $this->include('layout/navbar') ?>

<?= $this->include('layout/header') ?>

<?= $this->renderSection('content') ?>

<?= $this->include('layout/footer') ?>

</body>

</html>

Hasilnya:

Sekarang akan ada 5 view yang digunakan.

Membuat Layout untuk News
Nah, untuk latihan.. kita akan membuat satu lagi layout, yakni layout untuk halaman news.

Halaman ini menggunakan layout dua kolom dengan sidebar di samping kanan.

Buatlah file baru di dalam folder Views/layout dengan nama post_layout.php dan isilah
kodenya seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protal Berita Codeigniter</title>

<body>

<?= $this->include('layout/navbar') ?>

<?= $this->include('layout/header') ?>

<div class="container">
<div class="row">
<div class="col-md-8">
<?= $this->renderSection('content') ?>
</div>
<div class="col-md-4">
<?= $this->include('layout/sidebar') ?>
</div>
</div>
</div>

<?= $this->include('layout/footer') ?>

</body>

</html>

Kemudian buat satu lagi file di dalam Views/layout dengan nama sidebar.php dan isilah
dengan kode berikut.

<h5 class="h5">Ini Title Sidebar</h5>

<p class="lead">Ini isi sidebar</p>
Berikutnya, buatlah file view bernama news.php di dalam folder app/Views dengan isi sebagai
berikut:

<?= $this->extend('layout/post_layout') ?>

<?= $this->section('content') ?>

<h2 class="h2">Komunitas Codeigniter Indonesia Mengadakan Meetup</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2 class="h2">Dukungan Keamanan untuk Codeigniter 3 akan barakhir tahun
ini</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<?= $this->endSection() ?>

Sehingga sekarang kita punya tiga file bari di dalam folder app/Views dan app/Views/layout.

Berikutnya, kita harus membuat Controller agar bisa menampilkan halaman News.

Buatlah Controller baru dengan nama News.php dengan isi sebagai berikut:

<?php namespace App\Controllers;

class News extends BaseController

{
public function index()
{
echo view('news');
}

//----------------------------------------------------

Berikutnya, daftarkan Controller ini ke dalam Routes.php.

Buka file app/Config/Routes.php dan tambahkan kode berikut:

$routes->get('/news', 'News::index');

Nah, sekarang kita bisa membuka halaman News melalui alamat localhost:8080/news.

Hasilnya:
Nantinya halaman News akan kita gunakan untuk menampilkan list berita terbaru dan berita itu
sendiri.

Apa Selanjutnya?
Bagaimana?

Gampang kan pakai View Layout?

View Layout memang akan memudahkan kita dalam membuat template untuk halaman.

Namun, ada sedikit masalah..

Apa itu?

Partial tidak bisa menerima parameter data saat kita menggunakannya di dalam View.

Misalnya gini:

<?= $this->include('header', ['title' => 'About Page']) ?>

Data title tidak akan bisa dibaca di dalam partial header.

Tapi tenang saja..

Solusi dari masalah ini adalah menggunakan View Cell?

Ini akan dibahas di tutorial berikutnya.

Silahkan lanjutkan:

 ➡️Tutorial CI 4 (Part #07): Membuat Widget dengan View Cell

Untuk tutorial CI lainnya, cek di 📚 List Tutorial Codeigntier

petanikode.com

Tutorial Codeigniter 4: Membuat Widget

dengan View Cells
Ahmad Muhardian
6-8 minutes
Pada tutorial sebelumnya, kita sudah belajar cara membuat template view dengan View Layout
dan View Partial.

View Partial memang bagus buat memisah kode view yang sering digunakan. Ia juga sebenarnya
sudah mampu mengenali variabel data yang dikirim dari Controller.

Namun kekurangannya.. ia tidak bisa menerima data parameter saat kita menggunakannya di
dalam View.

Misalnya gini:

<?= $this->include('header', ['title' => "Belajar CI 4"]) ?>

Pada kode ini, kita ingin include view partial header dengan memberikan data title.

Namun ini tidak bisa dilakukan..

Kode tersebut akan membuat error.

Tapi jangan khawatir.

Karena kita bisa menggunakan View Cell untuk masalah ini.

Apa itu View Cell?

Bagaimana cara menggunakan View Cell?

Mari kita bahas..

Apa itu View Cell?

Cell artinya Sel.. merupakan bagian terkecil dari makhluk hidup.

Kalau View Cell?

View Cell adalah bagian terkecil dari View. Secara teknis, View Cell sebenarnya adalah sebuah
Class yang bertugas membuat kode HTML (generate HTML) dengan method-methodnya. 1

Kita bisa bayangkan View Cell seperti Widget yang bisa kita tempel di view mana saja.

Class View Cell bisa menerima data dari parameter dan juga bisa mengakses data dari Model.

Cara kerjanya mirip seperti Controller ya.

Namun perlu diingat:

Class View Cell bukanlah Controller, karena ia tidak bertugas untuk membalas sebuah request.
Ia hanya Class yang bertugas membuat HTML.

Biar lebih jelas..

Mari kita coba membuat View Cell.

Buatlah folder baru di dalam app/Views dengan nama widget.

Setelah itu, buatlah file baru di dalam folder widget dengan nama recent_post.php dan isilah
dengan kode berikut:

<div class="card">
<div class="card-body">
<h5 class="h5">Recent Posts</h5>
<hr>
<div class="list-group list-group-flush">
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Komunitas Codeigniter Indonesia
Mengadakan Meetup</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3"
src="http://lorempixel.com/60/60/nature/" width="60" height="60">
</div>
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">9 Fitur Terbaru Codeigniter
4</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/"
width="60" height="60">
</div>
<div class="media mb-2">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Tutorial Codeigniter Terlengkap
Bahasa Indonesia</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3"
src="http://lorempixel.com/60/60/cats/" width="60" height="60">
</div>
</div>
</div>
</div>

Setelah itu buatlah Class baru bernama Widget.php di dalam folder app/Libraries .

Kemudian isi dengan kode berikut.

<?php namespace App\Libraries;

class Widget
{
public function recentPost()
{
return view('widget/recent_post');
}
}

Pembuatan widget sudah selesai, namu belum kita gunakan.

Kita akan gunakan widget recentPost di dalam view sidebar.php.

Bukalah file app/Views/layout/sidebar.php, kemudian ubah semua kodenya menjadi seperti

ini:

<?= view_cell('\App\Libraries\Widget::recentPost') ?>

Fungsi view_cell() adalah fungsi untuk menggunakan View Cell.

Sekarang mari kita coba lihat hasilnya.

Bukalah localhost:8080/news.

Hasilnya:
Sekila mirip seperti View Partial ya..

Nah, sekarang mari kita coba menggunakan parameter.

View Cells dengan Parameter

Parameter adalah data atau variabel yang diberikan ke View Cell. Parameter ini diberikan saat
kita menggunakan View Cell. Parameter ini sama seperti saat kita mengirim data ke view.

Contoh:

<?= view_cell('\App\Libraries\Widget::recentPost', ['limit' => 5]) ?>

Pada contoh ini, kita memberikan parameter berupa asosiatif array dengan key limit dan value-
nya 5.

Nantinya key title akan dikenali sebagai variabel di dalam View Cell.

Mari kita coba..

Ubahlah kode app/Views/widget/recent_post.php menjadi seperti ini:

<div class="card">
<div class="card-body">
<h5 class="h5">Recent Posts</h5>
<hr>
<div class="list-group list-group-flush">
<?php for($i=0; $i < $limit; $i++): ?>
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Komunitas Codeigniter Indonesia
Mengadakan Meetup</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/"
width="60" height="60">
</div>
<?php endfor; ?>
</div>
</div>
</div>

Kemudian ubah class Libraries/Widget.php menjadi seperti ini:

<?php namespace App\Libraries;

class Widget
{

public function recentPost(array $params)

{
return view('widget/recent_post', $params);
}

Terakhir.. ubah kode Views/layout/sidebar.php menjadi seperti ini:

<?= view_cell('\App\Libraries\Widget::recentPost', ['limit' => 5]) ?>

Sekarang mari kita coba lihat hasilnya:

View Cells vs View Partials

View Cell dan View Partials memang agak mirip, namun terdapat beberapa perbedaan yang
perlu diketahui.

View Cells View Partials

Bisa baca Variabel yang
ya ya
dikirim dari Controller?
Bisa menerima parameter saat
ya tidak
digunakan di View?
ya, karena punya
Bisa akses data dari Model? tidak, harus melalui controller
class sendiri
Memecah kode yang sama dan sering
Widget, Metadata
Cocok digunakan untuk digunakan (cth: sidebar, footer, header, navbar,
SEO
dll)

Apa Selanjutnya?
Oke.. sekian dulu materi tentang View di Codeigniter 4.

Sebenarnya masih ada lagi yang belum dibahas, seperti View Parser. Silahkan pelajari sendiri di
dokumentasi

Kita akan lanjutkan tutorial ini dengan membahas Model, Migrasi Database, dan membuat
CRUD.

Silahkan lanjut ke:

 ➡️Tutorial CI 4 (Part #08): Migrasi Database

Untuk tutorial Codeigniter yang lainnya, cek di 📚 List Tutorial Codeigniter

1. Codeigniter 4 Doc. “View Cells”

1. diakses pada 23 September 2020. ↩︎

petanikode.com

Tutorial Codeigniter 4: Migrasi Database

Ahmad Muhardian
15-19 minutes

Sebelum kita masuk membahas tentang CRUD di Codeigniter 4, kita bahas dulu tentang migrasi
database.

Apa itu migrasi database?

Mengapa kita membutuhkan migrasi database?

..dan bagaimana cara migrasi database di Codeigniter 4?

Mari kita mulai.

Apa itu Migrasi Database?

Migrasi artinya berpindah.

Migrasi manusia = perpindahan manusia dan menetap di suatu tempat.

Nah, kalau migrasi database apa?

Migrasi database adalah perpindahan database dari suatu tempat ke tempat yang lain.
Misalnya database di localhost ke server production.

Perpindahan ini biasanya kita lakukan dengan manual, yakni dengan cara dump dan export
database di localhost.. lalu mengimpornya di server production.

Cara ini memang bisa dilakukan.

Tapi masalanya:

Jika nanti kita bekerja dengan tim.. Saat perubahan skema database terjadi, maka tim yang lain
juga harus mengikuti.

Mau tidak mau, kita harus dump dan export skema milik kita dan memberikan ke semua anggota
tim yang terlibat. Belum lagi versi database yang mereka gunakan beragam.

Bisa jadi ini akan menghambat kita dalam membuat aplikasi.

Contoh kasus lain:

Karena itulah, kita membutuhkan migrasi database agar bisa menyimpan semua perubahan
sekeman yang kita lakukan.

Salah satu program untuk melakukan migrasi database yang bisa digunakan di PHP adalah
Spinx.

Buat kamu yang tertarik dengan Spinx, bisa baca-baca di:

 Panduan Migrasi Database Menggunakan PHP Phinx

Namun, pada tutorial ini.. kita tidak akan menggunakan Spinx, karena Codeigniter sendiri udah
punya fitur untuk migrasi database.

Lalu, bagaimana cara menggunakannya?

Migrasi Database di Codeigntier

Migrasi database sebelumnya (pada Codeigniter 3) dilakukan dengan class CI_Migration, lalu
memanggil class tersebut di Controller.

Pada Codeigniter 4.. kita sudah disediakan program khusus, yakni melalui spark.

Perintah-perintah untuk membuat migrasi database dengan spark, bisa kita lihat dengan perintah
php spark --help.
Ketujuh perintah inilah yang akan kita gunakan untuk membuat migrasi database. Berikut ini
penjelasannya:

 db:seed untuk membuat data awal (benih data);

 migrate untuk melakukan migrasi (menjalankan method up());
 migrate:create untuk membuat file migrasi;
 migrate:refresh untuk melakukan rollback dan melakukan migrasi perubahan terbaru;
 migrate:rollback untuk melakukan rollback pada versi tertentu (menjalankan method
down());
 migrate:status untuk melihat status migrasi;
 make:seeder untuk membuat file seeder.

Jika kamu bingung dengan cara menggunakan perintah tersebut, bisa lihat bantuannya dengan
perintah:

php spark help <perintah>

Contoh:

php spark help migrate:create

Maka akan ditampilkan cara menggunaknya.

Mungkin akan lebih jelas, jika kita mencobanya sendiri.

Baiklah..

Mari kita coba!

Tapi sebelum itu, lakukan dulu:

Konfigurasi Database di Codeigniter 4

Silahkan buka file .env, kemudian ubahlah konfigurasi database menjadi seperti ini:

#------------------------------------------------------------------
# DATABASE
#------------------------------------------------------------------

database.default.hostname = localhost
database.default.database = ci_news
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

Untuk username dan password, sesuaikan dengan username dan password pada server MySQL
yang kamu gunakan.

Sebagai contoh:

Saya sudah pernah mengubha username dan password di server MySQL saya dengan admin dan
password 123, maka dikonfigurasi saya harus mengisi seperti ini:

#------------------------------------------------------------------
# DATABASE
#------------------------------------------------------------------

database.default.hostname = localhost
database.default.database = ci_news
database.default.username = admin
database.default.password = 123
database.default.DBDriver = MySQLi

Jika kita salah memasukan username dan password, bisa jadi aplikasi tidak akan bisa terhubung
dengan server database.

Setelah itu, buatlah database baru dengan nama ci_news. Ini bisa dilakukan melalui command
line atau Phpmyadmin.

Membuat database baru melalui Phpmyadmin:

Jika kamu ingin membuat database dari command line:

Buka shell MySQL, lalu ketik perintah berikut.

Selanjutnya, kita bisa mulai membuat migrasi.

Membuat Migrasi untuk Tabel News

Pertama kita akan membuat sekema untuk tabel news. Sebenarnya akan lebih gampang jika kita
sudah memiliki rancangan sekema atau ERD.

Berikut ini ERD sementara untuk project ci-news.

Catatan: Kita akan fokus mengerjakan untuk tabel news saja dulu. Untuk tabel yang lainnya
bisa diabaikan atau kalau mau dikerjakan sendiri juga boleh.

Oke sekarang buka kembali project ci-news yang sudah kita buat di tutorial sebelumnya.

Kemudian ketik perintah berikut untuk membuat file migrasi:

php spark migrate:create news

Perintah ini akan membuat file baru dengan nama 2020-11-23-053942_news.php di dalam
folder app/Database/Migration.
Tanggal dan waktu di awal nama file menandakan versi dari migrasi.

Berikut ini adalah isi file 2020-11-23-053942_news.php.

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class News extends Migration

{
public function up()
{
//
}

//------------------------------------------------------

public function down()

{
//
}
}

Pada kode ini terdapat class News yang merupakan turunan dari class Migration.

Pada class News terdapat dua method, yakni up() dan down(). Method ini nantinya akan
dijalankan saat melakukan migrasi.
Method up() akan dijalankan saat melakukan migrasi, sedangkan down() saat melakukan
rollback.

Tips: contoh di atas menggunakan news sebagai nama file migrasi. Ada juga yang menyarankan
sebaiknya menggunakan nama yang deskriptif agar memudahkan. Misalnya seperti
create_news_table, add_views_to_news_table, dsb.

Oke..

Sekarang mari kita buat skema untuk tabel News. Silahkan ubah kode pada file 2020-11-23-
053942_news.php menjadi seperti ini:

<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;

class News extends Migration

{
public function up()
{
// Membuat kolom/field untuk tabel news
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 5,
'unsigned' => true,
'auto_increment' => true
],
'title' => [
'type' => 'VARCHAR',
'constraint' => '255'
],
'author' => [
'type' => 'VARCHAR',
'constraint' => 100,
'default' => 'John Doe',
],
'content' => [
'type' => 'TEXT',
'null' => true,
],
'status' => [
'type' => 'ENUM',
'constraint' => ['published', 'draft'],
'default' => 'draft',
],
]);

// Membuat primary key

$this->forge->addKey('id', TRUE);

// Membuat tabel news

$this->forge->createTable('news', TRUE);
}
//-------------------------------------------------------

public function down()

{
// menghapus tabel news
$this->forge->dropTable('news');
}
}

Penjelasan kode:

Perhatikan pada method up(), pertama kita membuat field terlebih dahulu baru membuat tabel.

Field dibuat dengan fungsi $this->forge->addField() dan memberikan parameter berupa

array yang berisi data dari field. Selain dalam bentuk array, bisa juga dalam bentuk string SQL
seperti ini: 1

$this->forge->addField([
'id INT(5)',
'title VARCHAR(255)'
]);

Bahkan juga bisa digabung, string SQL dan array.

Selanjutnya kita membuat primary key dengan fungsi:

$this->forge->addKey('id', TRUE);

Paramater TRUE berfungsi untuk menyatakan key yang dibuat adalah Primary Key. Jika tidak
diberikan TRUE maka akan dibuat menjadi key biasa atau foreign key.

Terakhir, kita membuat tabel dengan fungsi:

$this->forge->createTable('news', TRUE);

Nilai TRUE berfungsi untuk mengecek apakah tabel sudah ada di database atau belum, jika ada
maka tidak dilakukan pembuatan tabel. Jika kita tidak memberikan nilai TRUE, maka tabel akan
tetap dibuat.. meskipun sudah ada.

Terakhir kita menghapus tabel dengan fungsi:

$this->forge->dropTable('news');

Karena kita menulisnya di dalam method down(), maka ini nantinya akan dipanggil saat kita
melakukan rollback.

Oke, sekarang mari kita coba lakuka migrasi pertama.

Lakukan migrasi dengan perintah:

Jika tidak ada error..

Maka migrasi berhasil dilakukan.

Sekarang coba cek database melalui Phpmyadmin, pasti di sana sudah ada dua tabel, yakni tabel
migrations dan tabel news.

Tabel migrations adalah tabel yang otomatis dibuat untuk menyimpan versi migrasi yang sudah
dilakukan. Lalu tabel news adalah tabel yang kita buat berdasarkan file migrasi.

Coba buka tabel migrations, di sana akan ada data migrasi.

Terdapat beberapa kolom:

 id merukan id primary key;

 version versi dari file migrasi dibuat dalam bentuk tanggal dan waktu;
 class file class untuk migrasi;
 group group yang digunakan, ada default, test, production, dll. Kita juga bisa
membuat group sendiri;
 namespace name space yang digunakan;
 time waktu dalam format unix time stamp;
 batch nomer batch yang menyatakan nomer kloter migrasi;

Nomer batch ini akan bertambah setiap kita melakukan migrasi yang baru. Karena ini migrasi
pertama yang kita lakukan, maka nomernya adalah 1.

Jika kita membuat file migrasi baru dan menjalankan perintah php spark migrate, maka
migrasi yang baru akan memiliki nomer 2.

Bagaimana Kalau ada Perubahan Skema?

Ada dua cara yang bisa dilakukan:

Pertama, membuat file migrasi baru dan menuliskan perubahannya di sana, lalu melakukan
migrasi lagi.

Cara pertama ini cocok dilakukan jika kita sudah punya data, karena perubahanya akan bisa di-
rollback.

Kedua, bisa malakukan rollback, lalu mengubah file migrasi yang sudah ada dan melakukan
migrasi kembali atau ini bisa dipersingkat dengan migrate:refresh.

Cara kedua ini gampang dilakukan dan cocok dilakukan untuk migrasi awal. Namun kurang
cocok dilakukan untuk aplikasi yang sudah punya data dan sudah melakukan migrasi berkali-
kali, karena akan berpotensi menghapus data.
Kalau menurut saya, cara pertama lebih aman dibandingkan dengan cara kedua. Tapi tidak
masalah jika migrasi ini dilakukan di server development.

Oke, sekarang mari kita coba kedua-duanya..

Pertama kita akan coba cara yang paling gampang, yakni migrate:refresh.

Ubahlah kode pada file 2020-11-23-053942_news.php menjadi seperti ini:

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class News extends Migration

// Membuat primary key

$this->forge->addKey('id', TRUE);

// Membuat tabel news

$this->forge->createTable('news', TRUE);
}
//---------------------

public function down()

{
// menghapus tabel news
$this->forge->dropTable('news');
}
}

Pada kode ini kita menambahkan kolom created_at dengan tipe DATETIME dan nilai default
CURRENT_TIMESTAMP.

Setelah itu, jalankan perintah:

php spark migrate:refresh

Coba perihatikan output dari perintah ini:

Dia melakukan rollback ke batch 0, lalu melakukan migrasi ulang ke batch 1.

Sekarang coba cek kembali tabel news, di sana akan ada kolom baru bernama created_at.
Jika tabel news sudah punya data, maka data tersebut akan dihapus karena dilakukan rollback
(drop table).

Inilah mengapa cara ini kurang aman untuk aplikasi yang sudah punya data, tapi tidak masalah
untuk dilakukan di awal.

Oke sekarang kita coba cara yang lain..

Misalkan, kita ingin menambahkan kolom slug pada tabel news, kita bisa membuat file migrasi
baru dengan perintah:

php spark migrate:create alter_news

Kemudian mengisi file tersebut dengan kode berikut:

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class AlterNews extends Migration

{
public function up()
{
$this->forge->addColumn('news', [
'slug VARCHAR(100) UNIQUE'
]);
}

//--------------------------------------------------------
public function down()
{
$this->forge->dropColumn('news', 'slug');
}
}

Pada kode ini kita menambahkan kolom slug pada tabel news dengan tipe VARCHAR,
ukurannya 100 dan bersifat unik (key unique).

Lalu pada method down(), kita melakukan penghapusan kolom.

Setelah itu, coba lakukan migrasi dengan perintah:

Jika tidak ada error..

Maka migrasi berhasil dilakukan.

Coba cek kembali tabel news dari Phpmyadmin, maka akan ada kolom baru bernama slug.
Coba juga untuk melihat isi tabel migrations, di sana akan ada data baru dengan nomer batch 2.

Jika kita melakukan rollback ke batch 1, maka data dengan nomer batch 2 akan dihapus dan
kondisi database akan kembali seperti saat batch 1.
Gampang kan?

Nah sekarang pertanyaanya:

Apakah setiap membuat file migrasi baru, kita harus melakukan migrasi (php spark migrate)?

Tidak harus, kita bisa membuat file migrasi sebanyak-banyaknya di awal. Misalnya aplikasi kita
punya 10 tabel, maka kita bisa buat 10 file migrasi dulu baru melakukan migrasi.

Oh iya, jangan lupa untuk selalu mengecek status migrasi dengan perintah:

Tujuannya untuk tahu migrasi apa saja yang sudah dilakukan.

Berikutnya kita akan membuat seed data awal.

Membuat Seed Data untuk News

Seed data adalah data awal untuk mengisi tabel. Seed data kadang kita butuhkan untuk mengetes,
dan menyiapkan data yang diperlukan di awal seperti user pertama pada aplikasi.

Untuk membuat seed data, kita membutuhkan file seeder. File seeder ini dapat dibuat dengan
perintah:

php spark make:seeder <nama_seed>

Contoh:

php spark make:seeder news

Maka kita akan memiliki file baru di dalam folder app/Database/Seeds dengan nama
news.php.
Ubahlah isi file news.php menjadi seperti ini:

<?php namespace App\Database\Seeds;

use CodeIgniter\Database\Seeder;

class News extends Seeder

{
public function run()
{
// membuat data
$news_data = [
[
'title' => 'Selamat datang di Codeigntier',
'slug' => 'codeigniter-intro',
'content' => 'Pengenalan Codeigniter untuk
Pemula.'
],
[
'title' => 'Hello World',
'slug' => 'hello-world',
'content' => 'Hello World, ini contoh artikel'
],
[
'title' => 'Meetup komunitas Codeigniter
Indonesia',
'slug' => 'codeigniter-meetup',
'content' => 'Seru sekali meetup perdana
komunitas codeigniter..'
]
];

foreach($news_data as $data){
// insert semua data ke tabel
$this->db->table('news')->insert($data);
}

}
}

Perhatikan, pada method run() kita membuat array yang berisi data yang akan disimpan dalam
tabel news.

Lalu kita menggunakan perulangan foreach untuk menyimpan semuanya. Jika hanya satu data
saja, maka tidak perlu menggunakan perulangan.

Method run() akan dijalankan ketika kita menjalankan perintah db:seed.

Mari kita coba..

Jalankan seeder dengan perintah berikut:

Kemudian isi nama seeder.

Atau bisa juga dilakukan dengan langsung memberikan nama seeder di awal seperti ini:

Maka sekarang tabel news akan memiliki data awal.

Apa Selanjutnya?
Sejauh ini kita sudah mengetahui cara melakukan migrasi di Codeigniter 4. Buat kamu yang baru
pertama belajar tentang migrasi, mungkin akan bingung.

Tapi percayalah, kelak saat aplikasi kita pindah-pindah sever dan bekerja dengan tim.. migrasi
ini akan terasa manfaatnya.

Selanjutnya silahkan lanjut ke:

 ➡️Tutorial CI 4 (Part #09): Membuat CRUD News

Untuk tutorial Codeigniter yang lainnya, cek di 📚 List Tutorial Codeigniter

1. https://codeigniter.com/user_guide/dbmgmt/forge.html#adding-fields ↩︎

petanikode.com

Tutorial Codeigniter 4: Cara Membuat

CRUD dan Validasi Data
Ahmad Muhardian
19-24 minutes
Pada tutorial sebelumnya, kita sudah membuat tabel dengan CI Migration.

Jika kamu belum membacanya, silahkan baca terlebih dahulu:

 Migrasi database pada Codeigniter 4

Nah, sekarang kita akan belajar cara membuat CRUD di Codeigniter.

CRUD merupakan singkatan dari Create, Read, Update, dan Delete. Ini merupakan hal dasar
yang harus kamu ketahui dalam operasi database.

Langkah-langkah membuat CRUD di Codeigniter:

1. Buat tabel di database (sudah dilakukan di tutorial sebelumnya);

2. Baut class Model;
3. Buat class Controller;
4. Terakhir buat View.

Pada tutorial ini, kita akan banyak bekerja dalam membuat Model, Controller, dan View.

Pastikan kamu mengikuti dengan teliti..

Hingga pada akhir tutorial ini, kamu akan bisa menguasai cara membuat CRUD di Codeigniter 4,
dilengkapi dengan validasi data.
Sudah siap?

Mari kita mulai..

Membuat NewsModel
Model merupakan class yang berfungsi untuk operasi database seperti insert data, read data,
update, dan delete.

Di dalam class model, terdapat fungsi-fungsi yang siap pakai untuk mengakses database.

Fungsi-fungsi ini disebut query builder, yang sebenarnya menajalankan sebuah query SQL.

Jadi berkat fungsi-fungsi ini, kita tidak perlu membuat query. Cukup panggil fungsinya.

Nah, untuk membuat Model di Codeigniter 4, kita harus melakukan extends atau mewariskan
class Model.

Mari kita buat!

Buatlah file baru di dalam folder app/Models dengan nama NewsModel.php, lalu isi dengan
kode berikut:

<?php

namespace App\Models;

use CodeIgniter\Model;

class NewsModel extends Model

{
protected $table = 'news';
protected $primaryKey = 'id';

protected $useAutoIncrement = true;

protected $allowedFields = ['title', 'content', 'status', 'author',
'slug'];
}

Penjelasan kode:

Pada class NewsModel terdapat beberapa member yang menjadi konfigurasi untuk Model:

 $table adalah nama tabel yang akan digunakan oleh Model;

 $primaryKey adalah nama kolom untuk primary key;
 $useAutoIncrement untuk mengaktifkan auto increment pada primary key;
 $allowedFields berisi daftar nama kolom yang boleh kita isi.
Selain keempat properti ini, masih ada lagi properti lainnya.

Kamu bisa melihatnya di dokumentasi model CI

Class NewsModel nantinya akan kita gunakan pada Controller untuk mengakses database.

Oke sekarang lanjut, kita coba membaca data.

Read Data News

Pertama kita kerjakan dulu fitur untuk read news. Jadi nantinya saat user kita membuka halaman
/news ia akan mendapatkan list news terbaru yang sudah terbit.

Lalu saat membuka /news/slug-news maka akan ditampilkan halaman news. Ini mirip seperti
artikel pada blog.

Tambahkan route untuk membuka halaman news, buka file Config/Routers.php, kemudian
tambahkan ini:

$routes->get('/news', 'News::index');
$routes->get('/news/(:any)', 'News::viewNews/$1');

Route /news/(:any) memiliki parameter berupa slug, nantinya parameter ini dapat kita akses
dari controller. O ya, jangan lupa juga tambahakan /$1 agar parameter bisa terbaca di controller.
Langkah berikutnya, kita tambahkan route ini ke dalam menu.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">
<a class="navbar-brand" href="<?= base_url() ?>">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('news') ?
>">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('about') ?
>">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('contact') ?
>">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('faqs') ?
>">Faqs</a>
</li>
</ul>
</div>
</div>
</nav>

Setelah itu…

Ubahlah controller News.php, menjadi seperti ini:

<?php

namespace App\Controllers;

use App\Models\NewsModel;
use CodeIgniter\Exceptions\PageNotFoundException;

class News extends BaseController

{
public function index()
{
// buat object model $news
$news = new NewsModel();

/*
siapkan data untuk dikirim ke view dengan nama $newses
dan isi datanya dengan news yang sudah terbit
*/
$data['newses'] = $news->where('status', 'published')-
>findAll();

// kirim data ke view

echo view('news', $data);
}

//------------------------------------------------------------

public function viewNews($slug)

{
$news = new NewsModel();
$data['news'] = $news->where([
'slug' => $slug,
'status' => 'published'
])->first();

// tampilkan 404 error jika data tidak ditemukan

if (!$data['news']) {
throw PageNotFoundException::forPageNotFound();
}

echo view('news_detail', $data);

}
}

Pada kode di atas kita menggunakan method findAll() untuk mengambil semua data di
database dan first() untuk mengambil satu data saja.

Di sana kita juga menggunakan where() untuk menentukan data mana yang akan di ambil.

Pada kasus di atas, kita mengambil data news yang statusnya sudah terbit (published) dan juga
mengambil berdasarkan slug.

Terakhir..

Mari kita ubah view untuk News.

Buka file Views/news.php, lalu ubah isinya menjadi seperti ini:

<?= $this->extend('layout/post_layout') ?>

<?= $this->section('content') ?>

</div>

<?php endforeach ?>

</div>

<?= $this->endSection() ?>

Setelah itu, buat satu lagi view untuk menampilkan detail news. Pada folder Views buat file baru
bernama news_detail.php dengan isi sebagai berikut:

<?= $this->extend('layout/post_layout') ?>

<?= $this->section('content') ?>

<?= $this->endSection() ?>

Oke beres..

Sekarang coba buka localhost:8080/news.

Maka hasilnya:
Oke, sekarang kita sudah berhasil menampilkan data di sisi depan website.

Berikutnya, kita akan mengerjakan sisi admin.

Membuat Halaman Admin untuk News
Berbeda dengan halaman /news, halaman Admin akan kita gunakan untuk menambahkan news,
mengubah, dan menghapus news.

Berikut ini langkah-langkah membuat halaman Admin untuk News:

Step 1 – Membuat Route Admin

Kali ini kita akan menggunakan route group untuk membuat group route /admin.

Silahkan buka file Config/Routes.php, kemudian tambahkan kode berikut.

$routes->group('admin', function($routes){
$routes->get('news', 'NewsAdmin::index');
$routes->get('news/(:segment)/preview', 'NewsAdmin::preview/$1');
$routes->add('news/new', 'NewsAdmin::create');
$routes->add('news/(:segment)/edit', 'NewsAdmin::edit/$1');
$routes->get('news/(:segment)/delete', 'NewsAdmin::delete/$1');
});

Coba perhatikan!

Kode di atas adalah kode untuk membuat group route.

Artinya semua route yang ada di dalam group admin, harus dibuka dengan /admin baru diikuti
routenya.

Contoh, mau buka form create.. maka harus buka alamat /admin/news/new.

Coba perhatikan juga method yang digunakan pada route.

Ada yang menggunakan get() dan ada juga add().

Apa bedanya?

Bedanya, method add() bisa dibuka dengan dua method yakni get() dan post(). Sedangkan
get() hanya untuk GET saja.

Mengapa kita pakai add() pada route create dan edit?

Karena selain menampilkan form create dan edit (GET), kita juga akan mengirim data (POST).
Bagaimana, paham tidak?

Oke lanjut..

Pada route yang sudah dibuat, kita membutuhkan controller NewsAdmin untuk meng-handle route
tersebut.

Mari kita buat!

Step 2 – Membuat NewsAdmin Controller

Buatlah file baru di dalam app/Controllers dengan nama NewsAdmin.php kemudian isi
dengan kode berikut:

<?php namespace App\Controllers;

use \App\Models\NewsModel;
use CodeIgniter\Exceptions\PageNotFoundException;

class NewsAdmin extends BaseController

{
public function index()
{
$news = new NewsModel();
$data['newses'] = $news->findAll();
echo view('admin_list_news', $data);
}

//------------------------------------------------------------------------
--
public function preview($id)
{
$news = new NewsModel();
$data['news'] = $news->where('id', $id)->first();

if(!$data['news']){
throw PageNotFoundException::forPageNotFound();
}
echo view('news_detail', $data);
}

//------------------------------------------------------------------------
--

public function create()

{
// lakukan validasi
$validation = \Config\Services::validation();
$validation->setRules(['title' => 'required']);
$isDataValid = $validation->withRequest($this->request)->run();

// jika data valid, simpan ke database

if($isDataValid){
$news = new NewsModel();
$news->insert([
"title" => $this->request->getPost('title'),
"content" => $this->request->getPost('content'),
"status" => $this->request->getPost('status'),
"slug" => url_title($this->request->getPost('title'), '-',
TRUE)
]);
return redirect('admin/news');
}

// tampilkan form create

echo view('admin_create_news');
}

//------------------------------------------------------------------------
--

public function edit($id)

{
// ambil artikel yang akan diedit
$news = new NewsModel();
$data['news'] = $news->where('id', $id)->first();

// lakukan validasi data artikel

$validation = \Config\Services::validation();
$validation->setRules([
'id' => 'required',
'title' => 'required'
]);
$isDataValid = $validation->withRequest($this->request)->run();
// jika data vlid, maka simpan ke database
if($isDataValid){
$news->update($id, [
"title" => $this->request->getPost('title'),
"content" => $this->request->getPost('content'),
"status" => $this->request->getPost('status')
]);
return redirect('admin/news');
}

// tampilkan form edit

echo view('admin_edit_news', $data);
}

//------------------------------------------------------------------------
--

public function delete($id){

$news = new NewsModel();
$news->delete($id);
return redirect('admin/news');
}
}

Pada controller ini, kita membuat 5 method yakni:

 index() untuk menampilkan list artikel;

 preview($id) untuk menampilkan preview berdasarkan $id artikel;
 create() untuk membuat artikel baru;
 edit() untuk edit artikel;
 dan delete($id) untuk menghapus artikel berdasarkan $id.

Sudah paham?

Jika belum..

Saya akan jelaskan satu-per-satu.

Mari kita mulai dari method index().

Method ini bertugas untuk menampilkan list news atau artikel.

Pada method index() kita menggunakan method findAll() untuk mengambil semua artikel
yang ada di tabel news.

Sebenarnya ini tidak direkomendasikan, jika ada banyak sekali data news. Karena akan membuat
performanya lambat.

Mungkin nanti akan kita ubah saat menerapkan sorting dan pagination.

Lanjut ke method preview($id)..

Method ini berfungsi untuk menampilkan preview dari artikel. Pada method ini, kita
menggunakan method first() untuk mengambil satu artikel saja.

Jika artikel tidak ditemukan di database, maka kita akan menampilkan halaman 404 error.

Lanjut ke method create()..

Method ini berfungsi untuk menampilkan form create dan menyimpan data yang di POST dari
form create news.

Sebelum menyimpan data ke database, pastikan sudah lolos validasi. Karena bisa saja data yang
dimasukan user tidak valid.

Lanjut ke method edit()..

Method edit() hampir sama seperti method create() hanya saja di method edit() kita harus
mengambil data yang akan diedit lalu ditampilkan pada form.

Terakhir method delete()..

Seperti namanya, method ini bertugas untuk menghapus news.

Jika ada yang kurang kamu pahami, silahkan tanyakan di komentar!

Berikutnya kita akan membuat layout dan view untuk Admin.

Step 3 – Membuat Layout dan View untuk Admin

Karena tampilan halaman admin berbeda dengan halaman depan, maka kita perlu membuat
template layout yang berbeda.

Buatlah file baru di dalam layouts/admin dengan nama navbar.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">
<a class="navbar-brand" href="<?= base_url('admin') ?>">Admin Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?= base_url('admin/news') ?
>">News</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="<?= base_url('admin/news/new') ?>" class="btn
btn-primary mr-3">New Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('admin/setting') ?
>">Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url('auth/logout') ?
>">Logout</a>
</li>
</ul>
</div>
</div>
</nav>

Buatlah file baru di dalam layout/admin dengan nama admin_layout.php kemudian isi
dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Berita Codeigniter</title>

<body>

<?= $this->include('layout/admin/navbar') ?>

<div class="container my-5">

<div class="row">
<div class="col-md-12">
<?= $this->renderSection('content') ?>
</div>
</div>
</div>

</body>

</html>

Sekarang kita punya layout untuk admin.

Layout sudah selesai, berikutnya kita buat view untuk News Admin.

Ada tiga view yang kita butuhkan:

1. View untuk list news (admin_list_news.php)

2. View untuk menulis news (admin_create_news.php)
3. View untuk edit news (admin_edit_news.php)

Mari kita buat satu per satu.

Buatlah file baru di dalam folder app/Views dengan nama admin_list_news.php, lalu isi
dengan kode berikut:

<?= $this->extend('layout/admin/admin_layout') ?>

<?= $this->section('content') ?>

<table class="table">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($newses as $news): ?>
<tr>
<td><?= $news['id'] ?></td>
<td>
<strong><?= $news['title'] ?></strong><br>
<small class="text-muted"><?= $news['created_at'] ?></small>
</td>
<td>
<?php if($news['status'] === 'published'): ?>
<small class="text-success"><?= $news['status'] ?></small>
<?php else: ?>
<small class="text-muted"><?= $news['status'] ?></small>
<?php endif ?>
</td>
<td>
<a href="<?= base_url('admin/news/'.$news['id'].'/preview') ?>"
class="btn btn-sm btn-outline-secondary" target="_blank">Preview</a>
<a href="<?= base_url('admin/news/'.$news['id'].'/edit') ?>"
class="btn btn-sm btn-outline-secondary">Edit</a>
<a href="#" data-href="<?= base_url('admin/news/'.
$news['id'].'/delete') ?>" onclick="confirmToDelete(this)" class="btn btn-sm
btn-outline-danger">Delete</a>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>

<div id="confirm-dialog" class="modal" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h2 class="h2">Are you sure?</h2>
<p>The data will be deleted and lost forever</p>
</div>
<div class="modal-footer">
<a href="#" role="button" id="delete-button" class="btn btn-
danger">Delete</a>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

<?= $this->endSection() ?>

Setelah itu, buat lagi file baru di dalam app/Views dengan nama admin_create_news.php dan
isi sebagai berikut:

<?= $this->extend('layout/admin/admin_layout') ?>

<?= $this->section('content') ?>

<form action="" method="post" id="text-editor">

<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" class="form-control" placeholder="News
title" required>
</div>
<div class="form-group">
<textarea name="content" class="form-control" cols="30" rows="10"
placeholder="Write a great news!"></textarea>
</div>
<div class="form-group">
<button type="submit" name="status" value="published" class="btn btn-
primary">Publish</button>
<button type="submit" name="status" value="draft" class="btn btn-
secondary">Save to Draft</button>
</div>
</form>

<?= $this->endSection() ?>

Terakhir, kita akan buat form edit.

Buat satu lagi file baru di dalam folder app/Views dengan nama admin_edit_news.php dan isi
sebagai berikut:

<?= $this->extend('layout/admin/admin_layout') ?>

<?= $this->section('content') ?>

<form action="" method="post" id="text-editor">

<input type="hidden" name="id" value="<?= $news['id'] ?>" />
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" class="form-control"
placeholder="News title" value="<?= $news['title'] ?>" required>
</div>
<div class="form-group">
<textarea name="content"
class="form-control"
cols="30" rows="10"
placeholder="Write a great news!"><?= $news['content'] ?
></textarea>
</div>
<div class="form-group">
<button type="submit" name="status" value="published" class="btn btn-
primary">Publish</button>
<button type="submit" name="status" value="draft" class="btn btn-
secondary">Save to Draft</button>
</div>
</form>

<?= $this->endSection() ?>

Sekarang kita sudah punya view yang dibutuhkan untuk halaman admin news.
Uji Coba..
Jika tidak ada error, seharusnya sudah bisa dicoba.

Silahkan buka localhost:8080/admin/news untuk melakukan uji coba.

Selanjutnya, coba buat artikel baru di localhost:8080/admin/news/new.
Hasilnya, artikel berhasil disimpan. 🎉
Coba juga untuk melakukan edit dan hapus data.
Jika tidak ada yang error..

Selamat! 🥳

Kamu sudah menyelesaikan tutorial ini.

Tapi jika masih ada error, jangan menyerah. Coba diskusikan errornya di kolom komentar, siapa
tau dapat solusi.

Apa Selanjutnya?
Oke.. Smapai di sini dulu tutorial membuat CRUD di Codeigntier 4. Selanjutnya kita harus
membuat halaman login untuk Admin.

Soalnya, di tahap ini.. semua orang bisa mengakses route /admin/.

Selanjutnya:

 Tutorial CI 4 (Part #10): Login dan Register (Coming soon)

Untuk tutorial Codeigniter yang lainnya, cek di 📚 List Tutorial Codeigniter

Anda mungkin juga menyukai

Mempelajari Dasar Dasar Laravel A-Z v1.0 - 12661
Belum ada peringkat
Mempelajari Dasar Dasar Laravel A-Z v1.0 - 12661
420 halaman
Drop Ships Hope e
Belum ada peringkat
Drop Ships Hope e
62 halaman
SOP Instalasi Transformer (Copy)
Belum ada peringkat
SOP Instalasi Transformer (Copy)
11 halaman
Ebook Tutorial Codeigniter Lengkap Dengan Studi Kasus Membuat Sistem Informasi Perpustakaan PDF
100% (2)
Ebook Tutorial Codeigniter Lengkap Dengan Studi Kasus Membuat Sistem Informasi Perpustakaan PDF
239 halaman
Modul Laravel Bootstrap
0% (1)
Modul Laravel Bootstrap
88 halaman
Seminggubelajarlaravel PDF
100% (1)
Seminggubelajarlaravel PDF
349 halaman
30 Hari Javascript-Compressed
100% (1)
30 Hari Javascript-Compressed
181 halaman
Belajar Laravel Untuk Pemula
100% (1)
Belajar Laravel Untuk Pemula
42 halaman
Backend Developer Fundamental
Belum ada peringkat
Backend Developer Fundamental
34 halaman
Membuat Aplikasi Siakad Dengan Codeigniter 3
100% (1)
Membuat Aplikasi Siakad Dengan Codeigniter 3
17 halaman
Tutorial Codeigniter
100% (5)
Tutorial Codeigniter
63 halaman
Rangkuman CodeIgniter
Belum ada peringkat
Rangkuman CodeIgniter
4 halaman
Membangun Aplikasi Dengan Codeigniter Dan Database SQL Server PDF
100% (1)
Membangun Aplikasi Dengan Codeigniter Dan Database SQL Server PDF
21 halaman
Belajar Cepat CodeIgniter Lengkap Dengan Studi Kasus Membuat Aplikasi Rental Mobil
100% (6)
Belajar Cepat CodeIgniter Lengkap Dengan Studi Kasus Membuat Aplikasi Rental Mobil
237 halaman
Membuat CMS WebSite Dengan Codigniter Dari Nol Sampai Online 20.21.1686 - Ebook - Free
100% (1)
Membuat CMS WebSite Dengan Codigniter Dari Nol Sampai Online 20.21.1686 - Ebook - Free
513 halaman
Modul Developer (Pemrograman Web - Lanjutan)
Belum ada peringkat
Modul Developer (Pemrograman Web - Lanjutan)
148 halaman
Buku Belajar CRUD Menggunakan PHP & MySQL
100% (2)
Buku Belajar CRUD Menggunakan PHP & MySQL
106 halaman
Membuat CRUD Ajax CodeIgniter
Belum ada peringkat
Membuat CRUD Ajax CodeIgniter
14 halaman
PHP MySQL Untuk Pemula Sampai Profesional
Belum ada peringkat
PHP MySQL Untuk Pemula Sampai Profesional
480 halaman
Modul Web Programming II
25% (4)
Modul Web Programming II
111 halaman
Tutorial PHP MVC Ebook
100% (1)
Tutorial PHP MVC Ebook
94 halaman
Pemrograman Web Desain Web
100% (2)
Pemrograman Web Desain Web
115 halaman
Pemrograman Berbasis Objek Modern Dengan PHP Sample
100% (1)
Pemrograman Berbasis Objek Modern Dengan PHP Sample
219 halaman
Membangun Website Donasi Online Dengan Laravel Vue Js Tailwind Css Dan Payment Gateway Dark
100% (2)
Membangun Website Donasi Online Dengan Laravel Vue Js Tailwind Css Dan Payment Gateway Dark
805 halaman
Pemrograman Web Dengan PHP MySQL
100% (1)
Pemrograman Web Dengan PHP MySQL
133 halaman
Membangun Website Toko Online Dengan Laravel Nuxtjs Dan Payment Gateway Dark
100% (5)
Membangun Website Toko Online Dengan Laravel Nuxtjs Dan Payment Gateway Dark
1.067 halaman
Belajar PHP & MySQLi
100% (4)
Belajar PHP & MySQLi
367 halaman
Buku PHP Dan MySQL - Web Lanjutan
Belum ada peringkat
Buku PHP Dan MySQL - Web Lanjutan
150 halaman
90sample Membanguncodeigniter
Belum ada peringkat
90sample Membanguncodeigniter
52 halaman
Modul Sistem Basis Data
Belum ada peringkat
Modul Sistem Basis Data
111 halaman
Pengolahan Database MySQL
Belum ada peringkat
Pengolahan Database MySQL
34 halaman
Kumpulan PHP Script
100% (1)
Kumpulan PHP Script
21 halaman
Modul Praktikum Basis Data 1 PDF
Belum ada peringkat
Modul Praktikum Basis Data 1 PDF
77 halaman
VueJS - Framework Dengan Kekuatan Super
Belum ada peringkat
VueJS - Framework Dengan Kekuatan Super
17 halaman
Untitled
Belum ada peringkat
Untitled
85 halaman
Seminggu Belajar Laravel
100% (2)
Seminggu Belajar Laravel
16 halaman
Bootstrap
Belum ada peringkat
Bootstrap
12 halaman
Bikin Framework PHP Sendiri Dengan Teknik OOP Dan MVC PDF
0% (1)
Bikin Framework PHP Sendiri Dengan Teknik OOP Dan MVC PDF
19 halaman
Vue - Js Fundamental
100% (2)
Vue - Js Fundamental
111 halaman
Belajar HTML Dan CSS
80% (5)
Belajar HTML Dan CSS
162 halaman
MODUL 2 - Mengenal Struktur Widget
Belum ada peringkat
MODUL 2 - Mengenal Struktur Widget
14 halaman
MySQL Dari Pemula Hingga Mahir
100% (1)
MySQL Dari Pemula Hingga Mahir
119 halaman
JavaScript Dasar
100% (4)
JavaScript Dasar
311 halaman
Pemrograman Web
100% (1)
Pemrograman Web
155 halaman
Belajar Membuat Aplikasi Flutter Untuk Pemula
Belum ada peringkat
Belajar Membuat Aplikasi Flutter Untuk Pemula
257 halaman
Tutorial Codeigniter 1-.............
100% (1)
Tutorial Codeigniter 1-.............
172 halaman
Tutorial Codeigniter Untuk Pemula
100% (1)
Tutorial Codeigniter Untuk Pemula
63 halaman
Tutorial Codeigniter
100% (1)
Tutorial Codeigniter
53 halaman
Tutorial Codeigniter Part 1
Belum ada peringkat
Tutorial Codeigniter Part 1
21 halaman
Tutorial Codeigniter
Belum ada peringkat
Tutorial Codeigniter
13 halaman
02-05. Modul Codeigniter Dasar
Belum ada peringkat
02-05. Modul Codeigniter Dasar
46 halaman
Pengenalan Framework Codeigniter
Belum ada peringkat
Pengenalan Framework Codeigniter
3 halaman
6 Webtek
Belum ada peringkat
6 Webtek
5 halaman
Membangun Aplikasi SMS Codeigniter PPC2012
Belum ada peringkat
Membangun Aplikasi SMS Codeigniter PPC2012
66 halaman
Nadiya Zulfa Fauziyah (19573013) SI-2B (PPT Mengenai CodeIgniter)
100% (1)
Nadiya Zulfa Fauziyah (19573013) SI-2B (PPT Mengenai CodeIgniter)
18 halaman
RekWeb CI Modul 1
Belum ada peringkat
RekWeb CI Modul 1
16 halaman
Materi Pertemuan 13
Belum ada peringkat
Materi Pertemuan 13
31 halaman
Pertemuan 1 Mengenal Framework CI 4
Belum ada peringkat
Pertemuan 1 Mengenal Framework CI 4
5 halaman
Modul Ci3
Belum ada peringkat
Modul Ci3
54 halaman
Bag 2 Lanjutan 5-6 Pimplementasi Dan Pembuatan Web Dengan Framework CI
Belum ada peringkat
Bag 2 Lanjutan 5-6 Pimplementasi Dan Pembuatan Web Dengan Framework CI
53 halaman
Framework CodeIgniter
Belum ada peringkat
Framework CodeIgniter
4 halaman
Pemrograman Python untuk Pemula: Pemrograman
Dari Everand
Pemrograman Python untuk Pemula: Pemrograman
JUD
5/5 (10)
01 Warehousing Overview
Belum ada peringkat
01 Warehousing Overview
26 halaman
Contoh Sasaran Mutu Iso 90012015 - Compress
Belum ada peringkat
Contoh Sasaran Mutu Iso 90012015 - Compress
2 halaman
Manajemen-Mutu Compress
Belum ada peringkat
Manajemen-Mutu Compress
89 halaman
ERP (Procedure)
Belum ada peringkat
ERP (Procedure)
18 halaman
Template SOP
Belum ada peringkat
Template SOP
3 halaman
SOP Distmantling Transformer (Copy)
0% (1)
SOP Distmantling Transformer (Copy)
9 halaman
Relokasi GITET Ampel
Belum ada peringkat
Relokasi GITET Ampel
12 halaman
Proposal Proyek Trafo IBT (WIKA PLN) - 030622
Belum ada peringkat
Proposal Proyek Trafo IBT (WIKA PLN) - 030622
40 halaman
HSE Inpection Checklist Form
Belum ada peringkat
HSE Inpection Checklist Form
1 halaman
Form Checklist Area Gudang DL - B
Belum ada peringkat
Form Checklist Area Gudang DL - B
3 halaman