Tutorial Codeigniter #01: Pengenalan Codeigniter untuk Pemula

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.

ontoh 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

Controller Class CI_Controller \CodeIgniter\Controller

Object HTTP req/res tidak ada Request dan Response

 Dari segi Codeigniter 3 Codeigniter 4

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.

Tutorial Codeigniter #02: Persiapan Belajar

Codeigniter
Sebelum mulai belajar Codeigniter lebih lanjut, kita harus meyiapkan alat
yang dibutuhkan untuk coding Codeigniter.

Apa Saja itu?

Persiapan Sebelum Belajar CI

Prasyarat belajar Codeigniter..

 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. 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 3:

 PHP Versi 5.6+

 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)
 4. 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.

Silahkan ikuti:

Cara Membuat Project Codeigniter

Langkah-langkah yang harus dilakukan untuk membuat project CI:

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

Silahkan buka website Codeigniter untuk mendownload.

Kita akan mendapatkan sebuah file zip 📦 CodeIgniter-3.x.xx.zip,

ekstrak file tersebut ke dalam c:\xampp\htdocs (XAMPP)
atau /var/www/html (di Linux).
Setela

h itu, ubah nama CodeIgniter-3.x.xx menjadi beritacoding.

Kenapa namanya beritacoding?

Karena kita akan membuat proyek semacam web portal sederhana yang
berisi berita tentang dunia coding. Tujuannya, agar kita paham konsep
dasar dari Codeigniter.

Sekarang coba buka web browser dan buka

alamat: http://localhost/beritacoding/

Selamat 🎉 proyek Codeigniter berhasil dibuat.

Berikutnya, kita bisa mulai coding..

Membuat Domain Virtual Host

Ini sebenarnya opsional, kamu boleh membuatnya dan boleh tidak. Namun
agar memudahkan dalam proses development, sebaiknya dibuatkan virtual
host untuk tiap proyek.

Virtual host adalah alamat virtual yang akan digunakan untuk mengakses
website di localhost.
Pada contoh di atas, kita membuka aplikasi melalui
alamat http://localhost/beritacoding dengan virtual host kita bisa
membukanya dari beritacoding.test .

Apa domainnya boleh diganti dengan .com, misalnya beritacoding.com .

Bisa, terserah kita mau pakai domain apapun. Soalnya ini kan di localhost.
Tapi agar tidak membingungkan, baiknya pakai domain .test atau .local.

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/beritacoding.test.conf

Perintah ini akan melakukan copy dari konfigurasi default host apache.

Setelah itu, buka file beritacoding.test.conf dengan tekes editor. Ketik

perintah berikut:

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

Lalu ubah isinya menjadi seperti ini:

<VirtualHost *:80>
ServerAdmin [email protected]
ServerName beritacoding.test
ServerAlias www.beritacoding.test
DocumentRoot /var/www/html/beritacoding
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:

sudo nano /etc/hosts

Setelah itu, tambahkan:

127.0.0.1 beritacoding.test

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 beritacoding.test.conf

Terakhir, restart server dengan perintah berikut:

sudo service apache2 restart

…dan coba buka alamat beritacoding.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:

Selanjutnya tambahkan kode berikut ini pada file httpd-vhosts.conf :

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

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

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

pada kolom Open.

Kemudian tekan enter, maka file hosts akan terbuka dengan Notepad.

Tambahkan kode berikut di dalam file hosts:

127.0.0.1 beritacoding.test

Setelah itu simpan, dan restart server apache.

Sekarang coba buka browser dan arahkan ke alamat beritacoding.test,

maka hasilnya:
Apa Selanjutnya?

Pada tahapan ini, kita sudah berhasil membuat proyek baru Codeigniter.
Jadi intinya, kita hanya perlu mengekstrak file ZIP dari Codeigniter ke
folder server htdocs atau /var/www/html. Setelah itu, mengubah namanya
dengan nama proyek.

Berikutnya, silahkan pelajari tentang:

➡️Tutorial Codeigniter #03: Memahami Konsep MVC di Codeigniter

Tutorial Codeigniter #03: Memahami

Konsep MVC dan Routing
Sudah berhasil mengisntal Codeigniter 3?

Bagus..

Berikutnya, kita akan berkenalan lebih dekat dengan Codeigniter 3.

Mulai dari memahami struktur direktorinya, hingga mengenal konsep MVC

yang ada di Codeigniter 3.
Mari kita mulai..

Mengenal Struktur Direktori Codeigniter

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 beritacoding.

Maka kita akan mendapatan struktur direktori seperti ini:

Tedapat dua direktori penting di dalam CI yang harus kamu perhatikan,

yakni: 📁 application dan 📁 system.

Selain itu terdapat juga direktori 📁 user_guide dan beberapa file lainnya.
 Berikut ini penjelasannya:

 📁 application berisi semua kode aplikasi. Di dalam direktori inilah kita akan
menulis semua kode aplikasi kita.
 📁 system berisi kode-kode inti dari Codeigniter. Jangan mengubah apapun
di dalam direktori ini. Jika kita ingin upgrade versi, kita cukup me-replace
direktori ini dengan yang baru.
 📁 tests berisi kode untuk melakukan testing. Folder ini memang belum ada
di project kita saat ini, tapi kita bisa buat nanti saat melakukan testing.
 📁 user_guide berisi dokumentasi codeigniter. Kita bisa menghapus direktori
ini saat web sudah jadi.
 📄 .editor_config berisi konfigurasi untuk teks editor.
 📄 .gitignore berisi daftar file dan folder yang akan diabaikan oleh Git.
 📄 comspoer.json adalah file yang berisi keterangan project dan keterangan
library yang digunakan. File ini dibutuhkan oleh composer.
 📖 contributing.md adalah file yang berisi penjelasan cara berkontribusi di
proyek CI. Kita bisa menghapus file ini, apabila web sudah jadi.
 📖 license.txt adalah file yang berisi keterangan lisensi dari CI. Kita juga
bisa menghapus file saat web sudah jadi.
 📖 readme.rst sama seperti file 📄 contributing.md file ini berisi penjelasan dan
informasi tentang project CI. Kita juga bisa menghapus file ini saat web
sudah selesai.
 📄 index.php adalah file utama dari CI. File yang akan dibuka pertamakali
saat aplikasi dibuka.

Selanjutnya silahkan buka direktori 📁 application dan perhatikan direktori

yang ada di sana.

 📁 cache berisi cache dari aplikasi.

 📁 config berisi konfigurasi aplikasi.
 📄 autoload.php tempat kita mendefinisikan autoload;
 📄 config.php konfigurasi aplikasi;
 📄 constants.php berisi konstanta;
 📄 database.php konfigurasi database aplikasi;
 📄 doctypes.php berisi definisi untuk doctype HTML;
 📄 foreign_chars.php berisi karakter dan simbol;
 📄 hooks.php berisi konfigurasi hooks;
 📄 index.html untuk mencegah direct access;
 📄 memcached.php berisi konfigurasi untuk memcached;
 📄 migration.php konfigurasi untuk migrasi;
 📄 mimes.php berisi definisi tipe file;
 📄 profiler.php konfigurasi untuk profiler;
 📄 routers.php tempat kita menulis route aplikasi;
 📄 smileys.php berisi kode untuk emoji;
 📄 user_agents.php berisi definisi untuk user agents.
 📁 controller berisi kode untuk controller.
 📁 core berisi kode untuk custom core.
 📁 helpers berisi fungsi-fungsi helper.
 📁 hooks berisi kode untuk script hook.
 📁 language berisi string untuk bahasa, apabila web mendukung
multibahasa.
 📁 libraries berisi library.
 📁 logs berisi logs dari aplikasi.
 📁 models berisi kode untuk model.
 📁 thrid_party berisi library dari pihak ketiga.
 📁 views berisi kode untuk view.
 📄 index.html file html untuk mencegah direct access.

Mengenal Konsep MVC pada Codeigniter

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. 1

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.
 Bagaimana bentuk MVC di Codeigniter?
Secara gambaran besar, kita akan berpikir.. kalau di Codeigniter itu cuma
ada tiga kelompok kode yakni Model, View, dan Controller.

Akan tetapi, dalam praktiknya.. kita akan membutuhkan juga kode-kode

yang lain seperti library, utility, cofigurasi, dll.

Berikut ini flowchart arsitektur aplikasi Codeigniter:

Alur kerjanya seperti ini: 2

1. Mulai;
2. User mengirim request ke web;
3. File yang pertama kali dieksekusi adalah index.php;
4. Lalu dari index.php, request akan diteruskan oleh routers.php;
5. routers.phpakan mencari cache di server, apabila
tedapat cache maka cache itu yang akan dikirim sebagai
balasan (response). Apabila tidak ada cache barulah request diteruskan
ke Controller;
6. Sebelum diteruskan ke Controller di sini ada lapisan Security untuk
keamanan;
7. Controller akan bertanggunag jawab untuk mengambil data
dari Model dan me-rendernya ke dalam View dengan
menggunakan library, plugin, dan helper yang ada.
8. Hasil render (view) dikirim ke pengguna dan disimpan dalam cache,
apabila fitur cache aktif;
9. Selesai.
Memahami Router pada Codeigniter

Router pada Codeigniter bertugas untuk

menentukan controller dan method/fungsi yang akan dieksekusi.

💬 P.S:

Contoh project yang digunakan pada penjelasan ini adalah project

bernama tokobuah sama seperti project beritacoding yang baru saja kita
buat.

Ketika kita membuka, http://localhost/tokobuah/ maka fungsi yang akan

dieksekusi adalah fungsi index() yang berada di dalam controller welcome.

class Welcome extends CI_Controller {

public function index()
{
$this->load->view('welcome_message');
}
}

Kenapa bisa begitu?

Ini karena konfigurasi router defaultnya adalah controller welcome.

Coba saja buka pada file 📄 config/routers.php.

ungsi index() adalah fungsi yang akan dieksekusi saat kita
mengakses controller welcome.

Sekarang coba buka:

http://localhost/tokobuah/index.php/welcome/index, maka kita akan
mendapatkan hal yang sama seperti membuka http://localhost/tokobuah/.

Latihan: Membuat Beberapa Router

Sebagai latihan, coba tambahkan route /about/ dan /contact/ di

dalam Controller Welcome dengan method ini:

public function about()

{
// fungsi untuk me-load view about.php
$this->load->view('about');
}

public function contact()

{
// fungsi untuk me-load view contact.php
$this->load->view('contact');
}

Tambahkan di bawah method index().

Setelah itu tambahkan dua buah file view di dalam direktori
📁 views dengan isi sebagai berikut.

📄 views/about.php

<h1>About Us</h1>
<p>Ini adalah halaman about</p>

📄 views/contact.php

<h1>Contact Us</h1>
<p>Ini adalah halaman Contact</p>
 Route sudah kita tambahkan.

Sekarang coba buka:

 http://localhost/beritacoding/index.php/welcome/about/

 dan http://localhost/beritacoding/index.php/welcome/contact/

Atau bisa juga buka dari domain beritacoding.test yang sudah kita buat:

 http://beritacoding.test/index.php/about
 http://beritacoding.test/index.php/welcome/contact/

Hasilnya:
Apabila kita
membuka http://beritacoding.test/index.php/contact, maka akan
terjadi error 404 not found.

Kenapa bisa begitu?

Ini karena route yang baru saja kita buat, belum didaftarkan ke
dalam routers.php.

Sekarang buka file 📄 config/routers.php , lalu tambahkan kode berikut.

$route['about'] = 'welcome/about';
$route['contact'] = 'welcome/contact';
Tambahkan di bawah kode route yang sudah ada.

Hasilnya:

Apakah kita harus menambahkan route pada routers.php di

setiap pembuatan route baru?

Jawabannya:
Tidak harus, karena CI juga mampu mendeteksi otomatis route
berdasarkan nama controller dan method yang dibuat. 3

Ini formatnya:

http://example.com/[controller-class]/[controller-method]/[arguments]

Penambahan route pada 📄 routers.php dibutuhkan saat kita ingin membuat

kustom route untuk controller tertentu.

Latihan: Ubah Controller Welcome

Biar enak, kita ubah Controller Welcome menjadi Page.

Ubah nama Welcome.php menjadi Page.php:

Lalu ubah, isinya menjadi seperti ini:

<?php

class Page extends CI_Controller

{
 public function index()
{
$this->load->view('home');
}

public function about()

{
$this->load->view('about');
}

public function contact()

{
$this->load->view('contact');
}
}

Perhatikan!

Di Controller Page, kita melakukan load view home dan view ini belum kita
buat. Kita bisa memanfaatkan view welcome_message.php untuk menjadi
view home.

Silahkan rename welcome_message.php menjadi home.php:

Terakhir..

Ubahlah route default di config/routes.php menjadi seperti ini:

$route['default_controller'] = 'page';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['contact'] = 'page/contact';
$route['about'] = 'page/about';

Nah, sekarang kita sudah punya Controller Page yang berfungsi untuk
menampilkan beberapa halaman seperti Home, About, dan Contact.
 Apa Selanjutnya?

Kita sudah belajar tentang MVC dan Route. Ini memang masih dasar.
Selanjutnya nanti kita akan banyak menggunakannya.

Jadi, harap diphami betul dua hal ini.

Jika masih bingung, silahkan ditanyakan melalui komentar.

Berikutnya kita akan belajar tentang Controller lebih dalam lagi, seperti
bagaimana cara mengolah input dari form dan aturan penulisan Controller.

Silahkan lanjutkan ke:

 Tutorial Codeigniter #04: Memahami Controller lebih dalam

Selamat belajar.

Tutorial Codeigniter #04: Memahami

Controller Lebih Dalam
Pada tutorial sebelumnya, kita sudah belajar tentang konsep MVC dan
bagaimana hubungan routes dengan Controller.

Pada tutorial ini, kita akan memahami Controller lebih dalam.

Seperti:

 Apa tugas utama dari Controller?

 Bagaimana cara membuat Controller dan aturannya;
 Membaca input dan membuat output;
 Fitur-fitur berguna lainnya di Controller.

Mari kita mulai…

Apa tugas utama Controller?

Controller adalah jantungnya aplikasi yang bertugas meng-handle HTTP

request. 1
 Coba perhatikan URL berikut:

example.com/index.php/blog/

Jika kita membuka URL tersebut, maka Codeigniter akan mencari

Controller bernama Blog. Lalu si Controller Blog akan meng-handle request
kita.

Meng-handle dapat kita artikan dengan:

 Menerima HTTP request;

 Memprosesnya;
 Mengirim HTTP response.

Jadi itulah tugas utama dari Controller.

Tapi ada juga yang memberi tugas Controller untuk menentukan logika
bisnis.

Saya tidak bilang ini salah, tapi di bagian memproses HTTP request.. kita
memang harus meproses sesuai dengan logika bisnis yang ditentukan.

Akan tetapi, menulis semua logika bisnis di dalam Controller akan

membuat kode kurang rapi dan sulit di test.

Karena itu, ada juga yang menyarankan:

Sebaiknya logika bisnis ditulis di dalam model atau membuat layer

tesendiri seperti pada repository/service pattern.
Aturan Membuat Controller

1. Penulisan nama File

File Controller harus dibuat di dalam folder application/controllers dan
penulisan nama filenya harus diawali dengan huruf besar.

✅ Contoh benar:

Blog.php
Product.php

❌ Contoh salah:

blog.php
product.php

Jika nama terdiri dari dua suku kata atau lebih, boleh dipisah
dengan underscore.

Contoh:

Pendaftaran_siswa.php

2. Penulisan nama Class

File Controller berisi sebuah class, cara menulis nama class harus diawali
dengan huruf kapital. Kalau bisa ikuti nama filenya.

❌ Contoh salah:

<?php
class blog extends CI_Controller {

✅ Contoh yang benar:

<?php
class Blog extends CI_Controller {

Jika nama terdiri dari dua suku kata atau lebih, bisa dipisah
dengan underscore.

Contoh:
<?php
class Account_info extends CI_Controller {

Nanti pada URL akan diakses dengan:

example.com/index.php/account_info/

Atau kita juga bisa membuat aliasnya di config/routes.php .

3. Penulisan nama Method

Nama method ditulis dengan huruf kecil dan jika terdapat lebih dari satu
suku kata, bisa dipisah dengan underscore.

Contoh:

<?php
class Blog extends CI_Controller {
public function index()
{
echo 'Hello World!';
}

public function comments()

{
echo 'Look at this!';
}
}

4. Folder untuk Controller

Kita juga bisa membuat sub folder di dalam
folder application/controllers untuk mengelompokan Controller.

Contoh:

📂 admin/
📜 Dashboard.php
📜 Product.php
📜 Report.php
📜 Setting.php
📂 member/
📜 Overview.php
📜 Transaction.php
📜 Profile.php

Lalu kita bisa memberikan default route untuk masing-masing folder

pada config/routes.php seperti ini:
 <?php

$routes['admin'] = 'admin/dashboard';
$routes['admin/product'] = 'admin/product';

Input dan Output di Controller

Pada controller, kita bisa mengambil input dari properti $this->input dan
untuk menghasilkan output kita bisa gunakan echo, load->view, dan
properti $this->output.

Empat Macam Input Dasar

Ada empat macam yang bisa kita dapatkan di Controller dengan
properti $this->input:

1. untuk mengambil input dari form yang menggunakan

$this->input->post()
metode POST untuk pengiriman data;
2. untuk mengambil input dari query string atau form yang
$this->input->get()
menggunakan metode GET untuk pengiriman data;
3. $this->input->cookie() untuk mengambil input dari cookie browser;
4. $this->input->server() untuk mengambil input dari server;

Sebenarnya kita juga bisa memanfaatkan variabel global bawaan PHP

seperti $_POST, $_GET, $_COOKIE, dan $_SERVER.

Apa bedanya variabel tersebut dengan $this->input?

Bedanya:

Mengambil input dari $this->input lebih aman, karena sudah di-filter dan
diproteksi XSS serta CSRF.

Untuk mempelajari lebih lanjut tentang properti $this->input di Controller,

silahkan baca di dokumentasinya.

Membuat Output
Output akan menjadi HTTP Response dari request yang diterima oleh
Controller.
Kita bisa membuat output dengan fungsi echo(), print(), dan fungsi output
lainnya.

Tapi biasanya, kita menampilkan sebuah view dengan fungsi:

$this->load->view('nama_view');

Sebenarnya fungsi tersebut menjalankan perintah echo() juga.

Header untuk Output

Codeigniter menyediakan properti khusus untuk menentukan header dan
output tertentu yang kita inginkan.

Misalnya:

Kita ingin membalas sebuah HTTP request dengan file PDF.

Maka kita tinggal set header untuk HTTP response dan mengirim file PDF-
nya pada body HTTP response.

Contoh kodenya:

$this->output->set_content_type('pdf')
->set_output('dokument.pdf');

Contoh untuk response JSON:

$data = [
'nama' => 'petanikode',
'email' => '[email protected]'
];

$this->output->set_content_type('json')
->set_output($data);

Fungsi $this->output dapat kamu pelajari lebih lengkap di dokumentasi

Class Output.

Private Method di Controller

Jika kita membuat method pada controller dengan modifier private, maka
method tersebut tidak akan bisa diakses dair publik atau URL.

Contoh:

<?php
class Blog extends CI_Controller {
public function index()
{
echo 'Hello World!';
}

private function _utility()

{
echo 'Look at this!';
}
}

Coba akses controller tersebut melalui URL:

example.com/index.php/blog/_utility

Maka pasti tidak akan bisa.

Method private biasanya dipakai untuk fungsi tambahan seperti utility dan
hanya bisa dipanggil pada class itu sendiri.

Apa bedanya method index() dengan __construct()?

Method index() adalah method yang akan dijalankan secara default saat kita
mengakses nama controller.

Contoh:

<?php
class Blog extends CI_Controller {
public function index()
{
echo 'Hello World!';
}

public function comment()

{
echo 'Look at this!';
}
}

Maka saat membuaka URL:

example.com/index.php/blog/

Method index() yang akan dieksekusi.

Sedangkan method __costruct() adalah method yang akan selalu dieksekusi

setiap kita mengakses Controller, entah kita mau akses method apapun.
Biasanya method __construct() digunakan untuk inisialiasi atau persiapan
awal.

Contoh:

<?php
class Blog extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('post');
}

public function index()

{
echo 'Hello World!';
}

public function comment()

{
echo 'Look at this!';
}
}

Pada contoh tersebut, kita melakukan load model pada

method __construct(), ini akan membuat model post di-load otomatis pada
Controller Blog.

Menjalankan Controller dari CLI

Selain di akses melalui URL, Controller bisa juga kita jalankan melalui CLI
(Command Line Interface).

Hah?

Memangnya buat apa menjalankan Controller dari CLI/CMD?

Kadang ini kita butuhkan untuk mengeksekusi CORN jobs di server.

Soalnya di server kan gak ada web browser. Semua berbasis teks hehe.

Cara mengeksekusi Controller dari CLI adalah dengan mengeksekusi

file index.php lalu diberikan argumen dengan nama controller dan method.

Contoh:

Kita punya controller seperti ini:

<?php
class Notification extends CI_Controller
{
public function send_remainder($message){
print("Remainder: $message");
}
}

Maka perintah untku menjalankannya adalah:

php index.php notification send_remainder 'Hello'

Latihan: Membuat Controller Artikel

Silahkan buka project beritacoding!

Kita akan membuat Controller Article untuk menampilkan list artikel dan
detail artikel.

Buatlah file baru di dalam application/controllers/ dengan nama Article.php.

Kemudian isi dengan kode berikut:

<?php

class Article extends CI_Controller

{
public function index()
{
// @TODO: get article from model
$data['articles'] = [
[
'title' => 'Foo',
'content' => 'Ini artikel tentang foo',
],
[
'title' => 'Bar',
'content' => 'Ini artikel tentang Bar',
],
];

if(count($data['articles']) > 0){

$this->load->view('articles/list_article.php', $data);
} else {
$this->load->view('articles/empty_article.php');
}
}

public function show($slug = null)

{
// @TODO: get article from model
$this->load->view('articles/show_article.php');
}
}
Pada kode di atas, kita membuat variabel $data dengan isi array untuk
dummy data yang akan ditampilkan ke view list_article.php .

View yang kita load belum dibuat.

Mari kita buat..

Buatlah folder baru di dalam views dengan nama articles dengan kode
masing-masing sebagai berikut:

📜 views/articles/list_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Llist of Article</title>
</head>
<body>

<h1>List Artikel</h1>
<ul>
<?php foreach($articles as $article): ?>
<li><?= $article['title'] ?></li>
<?php endforeach ?>
</ul>

</body>
</html>

📜 views/articles/empty_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Llist of Article</title>
</head>
<body>

<h1>Tidak ada artikel</h1>

</body>
</html>

📜 views/articles/show_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read Article</title>
</head>
<body>

<h1>Halaman untuk baca artikel</h1>

</body>
</html>

Sekarang mari kita coba.

Buka URL berikut:

localhost/beritacoding/index.php/article/

Hasilnya:

Coba juga untuk membuka

localhost/beritacoding/index.php/article/show

Hasilnya:
Latihan: Memproses Form di Controller

Setelah kita belajar banyak tentang input dan output di Controller, saatnya
kita mencoba sendiri.

Oke, sekarang coba buka kembali Controller Page.

<?php

class Page extends CI_Controller

{
public function index()
{
$this->load->view('home');
}

public function about()

{
$this->load->view('about');
}

public function contact()

{
$this->load->view('contact');
}
}

Pada Controller ini, kita akan coba mengambil input dari method contact().

Mari kita buat form-nya dulu!

Bukalah file view/contact.php kemudian isi kodenya menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hubungi kami</title>
</head>

<body>

<h1>Contact Us</h1>
<p>Hubungi kami melalui form berikut</p>
<form action="" method="post">
<div>
<label for="name">Name</label>
<input type="text" name="name" placeholder="your name"
required/>
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" placeholder="your email
address" required/>
</div>
<div>
<label for="messaage">Message</label><br>
<textarea name="message" cols="30" rows="5"
placeholder="write your message" required></textarea>
</div>

<div>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</div>
</form>

</body>

</html>

Perhatikan!

Pada form ini kita menggunakan atribut action="" yang artinya kita akan
mengirim post ke method yang me-load view tersebut, dalam kasus
ini contact().

Apabila ingin mengirim data ke controller yang lain, kita bisa tentukan
alamant controllernya pada atribut action="".

Contohnya:

<form action="/article/new" method="post">

Kita juga bisa memanfaatkan URL helper, yang akan kita pelajari nati di
bagian View.
Oke lanjut..

Sekarang ubahlah method contact() pada Controller Page menjadi seperti

ini:

public function contact()

{
if ($this->input->method() === 'post') {
print_r($this->input->post());
}

$this->load->view('contact');
}

Pada method ini, kita melakukan pengecekan..

Apakah methodnya diakses dengan metode POST atau GET. Jika

menggunakan POST berarti ada pengiriman data, dan kita coba tampilkan
datanya dengan print_r().

Sedangkan jika dibuka dengan metode GET, maka tampilkan saja form dari
view contact.

Mari kita coba hasilnya:

Sekarang coba isi formnya dan kirim!

Maka hasilnya:
Sekarang coba isi formnya dan kirim!

Maka hasilnya:
 Yap, hasilnya ditampilkan karena kita menggunakan fungsi print_r().

Berdasarkan hasil tersebut, ternyata $this->input->post() isinya berupa array

assosiatif.

Buat kamu yang belum tau apa itu array assosiatif, silahkan baca:

 Tutorial PHP: Memahami Array di PHP

Selanjutnya kita bisa proses data yang didapatkan dari $this->input-

>post() seperti menyimpannya ke database atau mengirim ke email admin.

Apa Selanjutnya?

Selamat, kamu sudah belajar tentang Controller di Codeigniter.

Saya tahu, ini masih belum cukup.

Karena itu, silahkan baca juga dokumentasi Codeginiter.

 Berikutnya silahkan pelajari tentang:

 Tutorial Codeigniter #05: Membuat View dan Menambahkan CSS

Source code tutorial dapat didownload di Github.

Tutorial Codeigniter #05: Menggunakan

View dan CSS pada Codeigniter

Pada tutorial sebelumnya, kita sudah belajar banyak tentang Controller.

Kini saatnya kita fokus ke View.

Pada tutorial ini, kita akan belajar:

 Apa itu View?

 Cara menampilkan data di View;
 Bagaiaman cara membuat templete view yang efektif.

Siap?

Mari kita mulai!

Apa itu View?

View adalah kode yang bertugas untuk membuat tampilan aplikasi. View
berisi kode campuran dari PHP, HTML, JS, dan CSS.

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.
Aturan Penulisan View

View dibuat di dalam folder application/views/ dan ada beberapa aturan

penulisan view yang harus diperhatikan:

1. Penulisan Nama File

Nama file menggunakan huruf kecil dan jika terdiri dari dua suku kata, bisa
dipisah dengan undescore.

✅ Contoh yang benar:

📜 welcome_message.php
📜 about.php
📜 overview.php

👎 Contoh yang tidak dianjurkan:

📜 WelcomeMessage.php
📜 ABOUT.php
📜 over View.php

Sebaiknya konsisten menggunakan huruf kecil dan undescore, jangan yang

aneh-aneh agar kodemu lebih rapi.
2. Penulisan Kode
File view bisa berisi kode PHP, HML, CSS, dan JS. Karena tugasnya view
untuk menampilkan output.. maka kita akan banyak menggunakan echo di
sini.

Contoh:

<?php echo $name ?>

Sangat tidak dianjurkan melakukan query data di sini, meskipun itu bisa
dilakukan..

Contoh yang buruk: ❌

<?php
$this->db->query('SELECT * from user');
?>

Kalau tidak boleh query data, lalu datanya didapat dari mana?

Datanya akan kita dapatkan dari Controller.

Mari kita pelajari:

Cara Load View dan Data

View bisa kita load dari controller dan juga view dengan fungsi $this->load-
>view() .

Contoh:

$this->load->view('home_page.php');

Kita juga bisa me-loadnya, tanpa harus menggunakan ekstensi .php seperti
ini:

$this->load->view('home_page');

Kita juga bisa mengirim data ke View pada parameter kedua.

Contoh:

$data = ['name' => 'Petani Kode'];

$this->load->view('product.php', $data);
 Data yang dikirim ke View berupa array asosiatif.

Apa itu array asosiatif?

Silahkan pelajari di:

 Tutorial PHP: Memahami Array di PHP

Cara Menampilkan Data di View

Saat kita melakukan load view dengan data seperti ini:

$data['name'] = 'Petani Kode';

$this->load->view('product.php', $data);

Kita bisa menampilkan isi datanya di dalam view dengan kode seperti ini:

<?php echo $name ?>

Variabel $name dapatnya dari mana?

Variabel $name didapatkan dari $data, perhatikanlah di sana ada key

bernama name. Ini akan menjadi variabel di dalam view.

Paham?

Bagus..

Sekarang mari kita pelajari lebih lanjut tentang cara menampilkan data.

1. Shorcut untuk Echo

Selain menggunakan fungsi echo, kita juga bisa memanfaatkan shortcut
atau bentuk pendeknya dari echo.

Perhatikan kode ini:

<?php echo $name ?>

Kita bisa menyingkatnya seperti ini:

<?= $name ?>

Kedua kode ini sebenarnya sama, hanya saja menggunakan <?= akan lebih
pendek dibandingkan harus menulis <?php echo.
2. Percabangan di View
Seperti yang saya bilang tadi, di View kita juga bisa membuat ligika untuk
menampikan data.

Contohnya:

Pada controller kita load view dan mengirimkan data seperti ini:

$data['user'] ='petanikode';
$this->load->view('dashboard', $data);

Lalu pada view, kita bisa buat logika if/else seperti ini:

<?php
if ($user === 'petanikode'){
echo "Welcome admin";
} else {
echo "Hello guest";
}
?>

Atau bisa juga menggunakan operator ternary seperti ini:

<?= $user === 'admin' ? "Welcome admin" : "Hello guest"; ?>

Kadang kita juga akan menampilkan banyak kode HTML di dalam blok
if/else.

Kita bisa saja melakukannya seperti ini:

<?php if ($user === 'petanikode'){ ?>

<h1>Hello Admin</h1>
<?php } else { ?>
<h1>Hello guest</h1?>
<?php } ?>

Ini boleh-boleh saja dilakukan, namun agak sulit terbaca karena harus
mengingat tutup kurung }. Kadang-kadang ini membuat kita kesulitan.

Karena itu, gunakanlah bentuk if/else seperti ini:

<?php if ($user === "admin"): ?>

<h1>Hello Admin</h1>
<?php else: ?>
<h1>Hello guest</h1>
<?php endif ?>
Bentuk seperti ini lebih mudah dibaca karena kita tidak menggunakan
kurung {}, melainkan menggunakan endif untuk menutup blok
percabangan if/else.

3. Perulangan di View
Sama seperti percabangan, kita juga bisa melakukan perulangan pada
View. Perulangan biasanya digunakan untuk menampilkan banyak data
dari array.

Contoh:

// load view di Controller

$data['names'] = [
"Foo",
"Bar",
"Bob"
];
$this->load->view('name', $data);

Maka di View kita bisa menggunakan perulangan seperti ini:

<?php

for ($i = 0, $i < count($names); $i++)

{
echo $names[$i];
}

?>

Bisa juga dengan perulangan while seperti ini:

<?php
$i = 0;
while ($i < count($names))
{
echo $names[$i];
$i++;
}

?>

atau dengan perulangan foreach seperti ini:

<?php

foreach ($names as $name)

{
echo $name;
}
?>

..dan yang paling saya rekomendasikan adalah

menggunakan foreach tanpa kurung {}.

Contoh:

<ul>
<?php foreach ($names as $name): ?>
<li><?= $name ?><li>
<?php endforeach ?>
</ul>

Bentuknya lebih bersih dan mudah dibaca.

Selain foreach, kita juga bisa menggunakan for dan while tanpa kurung {}.

Contoh:

<ul>
<?php for ($i = 0, $i < count($names); $i++): ?>
<li><?= $name ?><li>
<?php endfor ?>
</ul>

dan conoth while:

<ul>
<?php $i = 0; ?>
<?php while ($i < count($names)): ?>
<li><?= $name ?><li>
<?php endwhile ?>
</ul>

Latihan: Membuat Template View

Mari kita lanjutkan project beritacoding, kali ini kita akan membaat template
view agar lebih rapi.

Pada kode beritacoding, kita sudah membuat tiga view seperti ini:

📜 views/articles/list_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Llist of Article</title>
</head>
<body>

<h1>List Artikel</h1>
<ul>
<?php foreach($articles as $article): ?>
<li><?= $article['title'] ?></li>
<?php endforeach ?>
</ul>

</body>
</html>

📜 views/articles/empty_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Llist of Article</title>
</head>
<body>

<h1>Tidak ada artikel</h1>

</body>
</html>

📜 views/articles/show_article.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read Article</title>
</head>
<body>

<h1>Halaman untuk baca artikel</h1>

</body>
</html>

Sejauh ini tidak ada masalah, tapi akan lebih baik jika membuatkan
template supaya tidak mengulang kode yang sama terus-menerus.

Mari kita buat!

1. Membuat Template Partials
Buatlah folder baru di dalam application/views dengan nama _partials.
Folder ini berisi bagian kode View yang akan dipakai di beberapa view.

Buatlah tiga file di dalam folder _partials dengan nama head.php, navbar.php,
dan footer.php.

Kemudian isi masing-masing kode seperti berikut ini:

📜 _partials/head.php

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

Pada partial ini, kita menggunakan data dari variabel $meta yang nanti akan
kita kirim melalui Controller. Pada contoh di atas, kita menggunakan data
meta untuk judul.

📜 _partials/navbar.php

<nav class="navbar">
<a href="<?= site_url() ?>">Home</a>
<a href="<?= site_url('article') ?>">Article</a>
<a href="<?= site_url('page/about') ?>">About</a>
<a href="<?= site_url('page/contact') ?>">Contact</a>
<a href="<?= site_url('auth/login') ?>" style="margin-
left:auto">Login</a>
</nav>

📜 _partials/footer.php

<footer class="footer">
&copy; <?= Date('Y') ?> Beritacoding.com
</footer>
 2. Menggunakan Helper URL
Perhatikan pada kode _partials/navbar.php , kita menggunakan
fungsi site_url() di sana.

Fungsi ini berasal dari Helper url, jika kamu tidak melakukan autolaod
helper url, maka fungsi tersebut tidak akan bisa digunakan.

Karena itu, silahkan lakukan load untuk helper tersebut.

Caranya:

Buka file config/autoload.php , kemudian ubah nilai pada $autoload menjadi

seperti ini.

$autoload['helper'] = array('url');

Ini artinya, kita akan melakukan load otomatis untuk helper url sehingga
kita bisa menggunakan fungsi site_url(), base_url(), dan fungsi-fungsi URL
lainnya.

Tapi fungsi ini tidak akan bekerja dengan baik, kalau base_url belum
diataur.

Silahkan atur dulu base_url pada file congfig/config.php .

Set seperti ini:

$config['base_url'] = 'http://localhost/beritacoding/';

Atau bisa juga dengan alamat domain virtual yang sudah kita buat:

$config['base_url'] = 'http://beritacoding.test';

Setelah itu, silahkan lanjutkan:

3. Menggunakan Partials di View

Kita bisa menggunakan partials yang sudah dibuat dengan fungsi $this-
>load->view() di dalam view.

Sekarang silahkan ubah kode view:

 home.php ;

 about.php ;
 contact.php ;

 articles/list_article.php ;

 articles/show_article.php ;

 articles/empty_article.php ;

Masing-masing menjadi seperti ini:

📜 home.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>Home Page</h1>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

📜 about.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>About Page</h1>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

📜 contact.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>Contact Us</h1>
<p>Hubungi kami melalui form berikut</p>
<form action="" method="post">
<div>
<label for="name">Name</label>
<input type="text" name="name" placeholder="your name"
required />
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" placeholder="your email
address" required />
</div>
<div>
<label for="messaage">Message</label><br>
<textarea name="message" cols="30" rows="5"
placeholder="write your message" required></textarea>
</div>

<div>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</div>
</form>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

📜 articles/list_article.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>List Artikel</h1>
<ul>
<?php foreach ($articles as $article) : ?>
<li><?= $article['title'] ?></li>
<?php endforeach ?>
</ul>

<?php $this->load->view('_partials/footer.php'); ?>

</body>
</html>

📜 articles/show_article.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>Halaman untuk baca artikel</h1>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

📜 articles/empty_article.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<h1>Tidak ada artikel</h1>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

4. Mengirim Data ke View

Karena kita menggunakan variabel $meta pada view partial head.php, maka
kita harus mengirimkan data ini saat kita load view agar data yang
ditampilkan dinamis.

Kita akan mengirimkan data meta seperti ini:

$data['meta'] = [
'title' => 'About BeritaCoding',
];
Sekarang ubahlah kode controller Page menjadi seperti ini:

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Page extends CI_Controller

{
public function index()
{
$data['meta'] = [
'title' => 'BeritaCoding',
];

$this->load->view('home', $data);
}

public function about()

{
$data['meta'] = [
'title' => 'About BeritaCoding',
];

$this->load->view('about', $data);
}

public function contact()

{
$data['meta'] = [
'title' => 'Contact Us',
];

if($this->input->method() === 'post'){

print_r($this->input->post());
}

$this->load->view('contact', $data);
}
}

Sekarang mari kita coba!

Maka hasilnya akan seperti ini:

5. Menambahkan CSS 💄
Tinggal sentuhan terakhir nih.

Nah, untuk menambahkan CSS. Kita bisa tambahkan

pada _partials/head.php .

Mari kita coba!

Tambahkanlah kode CSS berikut di _partials/head.php :

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

<style>
.navbar {
display: flex;
gap: 1em;
background-color: teal;
}

.navbar a {
font-family: sans-serif;
font-weight: 500;
color: white;
text-decoration: none;
padding: 1rem;
}

.navbar a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
 .footer {
font-family: sans-serif;
background-color: whitesmoke;
padding: 1em;
text-align: center;
border-top: 1px solid lightgray;
}
</style>

Maka sekarang hasilnya akan seperti ini:

Biar lebih rapi, kita akan menggunakan eksternal CSS.

6. Menggunakan Eksternal CSS

Buatlah folder baru bernama assets di dalam project beritacoding. Lalu di
dalamnya buat lagi dua folder dengan nama css dan js.

Setelah itu, buatlah file baru di dalam css dengan nama main.css.
Kemudian pindahkan css pada _partials/head.php ke dalam main.css.

Sehingga kode di main.css akan menjadi seperti ini:

.navbar {
display: flex;
gap: 1em;
background-color: teal;
}

.navbar a {
font-family: sans-serif;
font-weight: 500;
color: white;
text-decoration: none;
padding: 1rem;
}

.navbar a:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.footer {
font-family: sans-serif;
background-color: whitesmoke;
padding: 1em;
text-align: center;
border-top: 1px solid lightgray;
}

Lalu ubah kode _partials/head.php menjadi seperti ini:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

<link rel="stylesheet" href="<?= base_url('assets/css/main.css') ?>" />

Dan cobalah lihat hasilnya!

Jika CSS-nya tidak berhasil, coba lihat link CSS-nya dari View Source.
 Apa Selanjutnya?

Selamat, kamu sudah belajar tentang View di Codeigniter.

Sampai di sini ada pertanyaa?

Kalau ada silahkan sampaikan di komentar ya!

Nah, berikutnya kita akan belajar tentang:

 Tutorial Codeginiter #06: Model dan Database

Source code tutorial ini bisa kamu donwload di Github.

Tutorial Codeigniter #06: Menggunakan

Model dan Database
Setelah kita belajar tentang Controller dan View, berikutnya kita akan
belajar tentang Model dan database.

Pada tutorial ini kita akan belajar tentang:

 Apa itu Model?

 Bagaimana cara menulis model yang benar?
 dan latihan menggunakan model untuk menampilkan dan insert data.

Mari kita mulai..

Apa itu Model?

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

Model bisa mengakses data dari Database dan juga sumber lainnya. Seperti
API pihak ketiga.

ntinya:

Kalau berkaitan tentang data, itu tugasnya model.

Cara Membuat Model dan Aturannya

Model dapat kita buat di dalam folder models, aturan penulisan model
hampir sama dengan controller.

1. Penulisan Nama File

Nama file model harus menggunakan huruf besar atau kapital di awal dan
jika terdiri dari dua suku kata atau lebih, bisa dipisah dengan underscore.
Contoh:

📜 Arcticle_model.php
📜 Product_model.php
📜 Account_model.php

Penamaan file model dengan akhiran _model boleh dilakukan boleh juga
tidak, tujuan memberikan akhiran _model adalah untuk menghindari
bentrok dengan nama Controller.

2. Penulisan Nama Class

Class model harus melakukan extends dari class CI_Model.

Nama class mengukuti nama file, yakni diawali dengan huruf besar dan
boleh dipisah dengan underscore.

Contoh:

<?php

class Product_model extends CI_Model

{

3. Penulisan Nama Method

Nama method diawali dengan huruf kecil dan jika terdiri dari dua suku
kata, boleh dipisah dengan underscore.

Contoh:

<?php

class Product_model extends CI_Model

{
public function find()
{

}
public function get_expired_product()
{

}
}
4. Apa yang ditulis di dalam Model?
Di dalam model, kita harus menulis query untuk mengambil data di
database dan mengembalikan hasil query berupa data. Nilai kembalian
boleh berupa array maupun objek.

Contoh:

<?php

class Product_model extends CI_Model

{
public function find()
{
$query = $this->db->get_where('table_name', ['id' => $id]);
return $query->row(); // return berupa satu object
}
public function get_expired_product()
{
$query = $this->db->query("SELECT * FROM table WHERE expired=1");
return $query->result(); // return berupa array objek
}
}

Selain itu, ada juga yang menulis logika bisnis di dalam model.

Contohnya:

<?php

class Account_model extends CI_Model

{
public function deposit($deposit_count, $id)
{
$current_balance = $this->db->get_where('balance', ['id' => $id]);
$new_balance = $current_balance + $deposit_count;
$this->db->update($new_balance, ['id' => $id]);
}

public function withdraw($wd_count, $id)

{
$current_balance = $this->db->get_where('balance', ['id' => $id]);
$new_balance = $current_balance - $wd_count;
$this->db->update($new_balance, ['id' => $id]);
}
}

Pada contoh ini model menerima input dari argumen yang diberikan
melalui method seperti $deposit_count, $wd_count, dan $id.

Lalu di simpan dengan query update().

 Dari mana asalnya query update()?

Query ini berasal dari library Query Builder di Codeigniter.

Apa itu Query Build?

Query Builder adalah class yang berisi method untuk membuat query
database.

Contoh:

 $this->db->insert() untuk menambahkan data ke tabel;

 $this->db->get() untuk mengambil data dari tabel, sama seperti query SELECT.
 $this->db->update() untuk update data di tabel;
 $this->db->delete() untuk menghapus data di tabel;
 $this->db->get_where() untuk mengambil data dengan WHERE;

Selain method-method ini, masih banyak lagi method lain yang disediakan
Query Builder untuk membuat query database.

Selengkapnya kamu bisa baca di Dokumentasi Query Builder.

5. Apa yang tidak boleh dilakukan di Model?

Jika kamu sudah tahu tugas model, tentunya juga tau apa yang tidak boleh
dilakukan di model.

Misalnya seperti:

 Melakukan load view di dalam model 🤦‍♂️;

 Mengambil alih tugas Controller seperti mengakses fungsi $this-
>input dan $this->output di dalam model;

Hal-hal tersebut, bisa dilakukan di dalam model. Tapi sangat disarankan

agar tidak melakukannya.

Karena nanti akan mengakibatkan model jadi berantakan dan sulit ditest
dengan unit test.

Latihan: Menggunakan Model

Baiklah, sekarang mari kita latihan menggunakan model.

Tapi sebelum itu, lakukan ini:

1. Membuat Database
Silahkan buat dulu database di PHPmyadmin. Buatlah database dengan
nama beritacoding.

Setelah itu buatlah tabel dengan name article dengan struktur sebagai
berikut:
Atau biar cepat gunakan perintah SQL berikut:

CREATE TABLE `beritacoding`.`article` (

`id` VARCHAR(32) NOT NULL ,
`title` VARCHAR(128) NULL ,
`slug` VARCHAR(128) NOT NULL ,
`content` TEXT NULL ,
`draft` ENUM('true','false') NOT NULL DEFAULT 'true' ,
`created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

Ketik perintahnya di menu SQL:

Setelah itu klik Kirim.

Database dan tabel sudah selesai, berikutnya kita lakukan konfigurasi di

Codeigniter agar bisa terhubung dengan database.

2. Konfigurasi Database
Pertama, silahkan lakukan autoload library database.

Caranya:

Buka file config/autoload.php , kemudian pada bagian $autoload['libraries'] isi

nilainya seperti ini:

$autoload['libraries'] = array('database');

Setelah itu lakukan konfigurasi databasenya:

Bukalah file config/database.php kemudian ubah konfigurasi databasenya

menjadi seperti ini:
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'beritacoding',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Perhatikan, hostame diisi dengan localhost karena kita akan menggunakan

server database dari XAMPP atau di localhost.

Untuk usernem kita isi pakai root, karena default username database di
XAMPP adalah root dan passwordnya kosong.

Tapi jika kamu sudah pernah mengubah username dan password, silahkan
diisi dengan usernmae dan password tersebut.

Terakhir, kita mengisi database yang merupakan nama database yang akan
digunakan.

Nah, sekarang coba buka kembali aplikasinya dari localhost/beritacoding/ ,

kalau tidak ada yang error berarti konfigurasi databasenya sudah benar.

Tapi kalau error seperti ini:

Artinya konfigurasinya belum benar.

Pada error di atas, dapat kita ketahui penyebabnya karena:

Access denied for user 'root'@'localhost'

Yang artinya username root tidak bisa dipakai pada server yang digunakan.
Cobalah untuk mengubahnya dengan user yang valid.

3. Membuat Model Article

Buatlah file baru di dalam folder application/models dengan
nama Article_model.php .

Kemudian isi dengan kode berikut:

<?php

class Article_model extends CI_Model

{
private $_table = 'article';

public function get_published($limit = null, $offset = null)

{
if (!$limit && $offset) {
$query = $this->db->get_where($this->_table, ['draft' =>
'false']);
} else {
$query = $this->db->get_where($this->_table, ['draft'
=> 'false'], $limit, $offset);
}
 return $query->result();
}

public function find_by_slug($slug)

{
if (!$slug) {
return;
}
$query = $this->db->get_where($this->_table, ['slug' => $slug]);
return $query->row();
}
}

Untuk saat ini, Article_model cuma kita gunakan untuk mengambil data
dengan dua method:

 get_published()untuk mengambil semua artikel yang statusnya terbit ( draft =

false ). Parameter $limit dan $offset berfungsi untuk menentukan banyak
data yang harus diambil. Ini memang belum kita butuhkan saat ini, tapi
nanti kita akan pakai saat membuat pagination.
 find_by_slug() untuk mengambil satu artikel dengan slug tertentu,

Nanti kita juga akan tambahkan method-method lain

seperti insert(), update(), dan delete().

Sekarang kita lanjut dulu ke:

4. Menggunakan Model di Controller

Sekarang buka kembali controller Article dan ubah kodenya menjadi
seperti ini:

<?php

class Article extends CI_Controller

{

public function __construct()

{
parent::__construct();
$this->load->model('article_model');
}

public function index()

{
// ambil artikel yang statusnya bukan draft
$data['articles'] = $this->article_model->get_published();

if (count($data['articles']) > 0) {
// kirim data artikel ke view
$this->load->view('articles/list_article.php', $data);
 } else {
// kalau gak ada artikel, tampilkan view ini
$this->load->view('articles/empty_article.php');
}
}

public function show($slug = null)

{
// jika gak ada slug di URL tampilkan 404
if (!$slug) {
show_404();
}

// ambil artikel dengan slug yang diberikan

$data['article'] = $this->article_model->find_by_slug($slug);

// jika artikel tidak ditemuakn di database tampilkan 404

if (!$data['article']) {
show_404();
}

// tampilkan artikel
$this->load->view('articles/show_article.php', $data);
}
}

Pada kode di atas kita menggunakan dua method, yakni:

 index() untuk menampilkan list artikel;

 dan show() untuk menampilkan satu artikel dengan slug tertentu.

5. Menampilkan Data di View

Berikutnya, ubahlah kode view list_article.php dan show_article.php masing-
masing menjadi seperti ini:

📜 view/articles/list_article.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>

<?php $this->load->view('_partials/navbar.php'); ?>

<h1>List Artikel</h1>
<ul>
<?php foreach ($articles as $article) : ?>
<li>
 <a href="<?= site_url('article/'.$article->slug)
?>">
<?= $article->title ?
html_escape($article->title) : "No Title" ?>
</a>
</li>
<?php endforeach ?>
</ul>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

📜 views/articles/show_article.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>

<?php $this->load->view('_partials/navbar.php'); ?>

<article class="article">
<h1 class="post-title"><?= $article->title ?
html_escape($article->title) : "No Title" ?></h1>
<div class="post-meta">
Published at <?= $article->created_at ?>
</div>
<div class="post-body">
<?= $article->content ?>
</div>
</article>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

Coba perhatikan kode di atas, di sana kita menggunakan

fungsi html_escape(), fungsi ini bertujuan untuk mencegah XSS attack.

Kita juga menggunakan fungsi site_url() untuk membuat link.

Sekarang semuanya view sudah siap, mari kita lanjut ke:

6. Membuat Route untuk Artikel
Pada Controller, kita menggunakan method show() untuk menampilkan
artikel.

Method ini nantinya akan bisa dibuka melalui:

index.php/article/show/contoh-slug-artikel

Nah, biar lebih enak dilihat.. kita tidak akan menggunakan /show/.

Karena itu, kita harus membuat custom route.

Mari kita buat!

Bukalah file config/routes.php .

Kemudian tambahkan kode berikut:

$route['article/(:any)'] = 'article/show/$1';

Dengan route ini, artikel akan bisa kita buka melalui URL:

index.php/arcicle/contoh-slug-artikel

Sekarang mari kita coba!

7. Percobaan
Cobalah buka halaman beritacoding/index.php/article . Jika kita belum
menambahkan artikel di tabel article maka akan tampil seperti ini:
Sekarang coba tambahkan data di tabel article melalui Phpmyadmin.

Silahkan isi data artikel yang akan ditambahkan dan jangan lupa berikan
nilai false untuk kolom draft.
Atau kalau mau cepat, bisa jalankan kode SQL berikut:

INSERT INTO `article` (`id`, `title`, `slug`, `content`, `draft`, `created_at`)

VALUES ('1', 'Hello World!', 'hello-world', 'Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.', 'false', CURRENT_TIMESTAMP);

Nah sekarang kita punya satu artikel yang sudah terbit.

Coba lihat hasilnya di halaman list artikel:

oba klik link artikel tersebut, maka kita akan membuka halaman show
artikel.
Keren 😍..

Tampilan list artikel dan show artikelnya memang masih belum rapi karena
kita belum berikan CSS untuk elemen ini.

Kalau mau ditambahkan CSS untuk tampilan show artikel, silahkan

tambahkan kode CSS berikut pada main.css.

.article {
max-width: 740px;
margin: 4em auto;
padding: 0 2em;
}

.article .post-title {
font-weight: bolder;
font-family: sans;
}

.article .post-meta {
margin: 1em 0;
font-size: 0.8rem;
font-family: sans;
color: grey;
}
.article .post-body {
line-height: 1.6rem;
}

Maka hasilnya:
Terlihat lebih bagus 👍

Silahkan tambahkan juga CSS sesukamu untuk tampilan yang lain. Karena
pada tutorial ini, kita tidak fokus pada CSS, melainkan pada konsep
Codeigntier.

Oke lanjut..

Latihan: Insert Data ke Model

Kita sudah berhasil menampilkan data yang didapatkan dari model ke

View.

Nah, sekarang.. bagaimana caranya menyimpan data ke model?

Gampang!

Kita bisa manfaatkan query insert().

Mari kita coba..

1. Membuat Tabel Feedback
Buatlah tabel baru di dalam database beritacoding dengan nama feedback.

Biar cepat, gunakan perintah SQL berikut:

CREATE TABLE `beritacoding`.`feedback` (

`id` VARCHAR(32) NOT NULL ,
`name` VARCHAR(32) NOT NULL ,
`email` VARCHAR(32) NOT NULL ,
`message` TEXT NOT NULL ,
`created_at` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;

Sehingga sekarang kita punya tabel seperti ini:

Berikutnya, kita akan membuat Model untuk tabel feedback.

2. Membuat Model Feedback

Silahkan buat file baru di dalam folder models dengan
nama Feedback_model.php kemudian isi kodenya seperti ini:

<?php

class Feedback_model extends CI_Model

{
private $_table = "feedback";

public function insert($feedback)

{
if(!$feedback){
return;
}

return $this->db->insert($this->_table, $feedback);

}
}

Pada model ini kita menggunakan query insert() untuk menambahkan data
ke dalam tabel feedback.
Berikutnya silahkan lanjutkan ke:

3. Menggunakan Model pada Controller

Buka kembali Controller Page.php, kemudian ubahlah isi
method contact() menjadi seperti ini:

public function contact()

{
$data['meta'] = [
'title' => 'Contact Us',
];

if ($this->input->method() === 'post') {

$this->load->model('feedback_model');

// @TODO: lakukan validasi di sini sebelum insert ke model

$feedback = [
'id' => uniqid('', true), // genearate id unik
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'message' => $this->input->post('message')
];

$feedback_saved = $this->feedback_model->insert($feedback);

if ($feedback_saved) {
return $this->load->view('contact_thanks');
}
}

$this->load->view('contact', $data);
}

Coba perhatikan, di sana kita melakukan load view contact_thanks, view ini
belum kita buat.

Karena itu mari kita:

4. Membuat View untuk Thanks

Buatlah file baru di dalam folder views dengan
nama contact_thanks.php dengan isi sebagai berikut:

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>
<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<div class="container">
<h1>Thank You!</h1>
<p>Your message has been sent!</p>
</div>

<?php $this->load->view('_partials/footer.php'); ?>

</body>

</html>

View ini cuma bertugas untuk menampilkan pesan feedback saat berhasil
mengirim data dari form contact.

Oke sekarang, mari kita coba..

4. Percobaan
Bukalah halaman beritacoding/index.php/page/contact/ .

Jika tampil view Thanks berarti berhasil disimpan.

 Untuk memastikan, apakah benar berhasil disimpan atau tidak..

..coba buka tabel feedback di Phpmyadmin.

Apa Selanjutnya?

Kita sudah belajar tentang model dan berhasil melakukan view dan insert
data dengan Model.

Namun, yang belum kita coba adalah update dan delete data. Ini akan kita
pelajari di tutorial berikutnya.

Yakni:

 Tutorial Codeigniter #07: Membuat Halaman Admin

Jika ada yang ditanyakan, silahkan sampaikan di kolom komentar.

 Tutorial Codeigniter #07: Membuat
Halaman Admin (CRUD)
Ini adalah tutorial lanjutan dari tutorial sebelumnya:

 Tutorial Codeigniter #06: Menggunakan Model dan Database

Pada tutorial ini, kita akan fokus mengerjakan halaman Admin.

Saya tidak akan banyak berteori di tutorial ini, karena penjelasan tentang
dasar-dasar Codeigniter sudah dijelaskan di tutorial-tutorial sebelumnya.

Seperti:

 Konsep MVC di Codeigniter;

 Controller di Codeigniter;
 View di Codeigniter.

Mari kita langsung saja praktek dan melanjutkan project beritacoding.

Membuat Controller Admin

Buatlah folder baru di dalam folder application/controllers/ dengan

nama admin.

Kemudian di dalam folder admin, buatlah Controller berikut:

 Dashboard.php untuk halaman awal admin;

 Post.php untuk CRUD artikel;
 Feedback.php untuk menampikan feedback dari contact form;
 Setting.php untuk setting website.
Berikut ini isi untuk masing-masing Conttroller:

📜 controllers/admin/Dashboard.php

<?php

class Dashboard extends CI_Controller

{
public function index()
{
$this->load->view('admin/dashboard.php');
}
}

📜 controllers/admin/Feedback.php

<?php

class Feedback extends CI_Controller

{
public function index()
{
$this->load->view('admin/feedback_list');
}

📜 controllers/admin/Post.php

<?php

class Post extends CI_Controller

{
public function index()
{
$this->load->view('admin/post_list.php');
}
}
📜 controllers/admin/Setting.php

<?php

class Setting extends CI_Controller

{
public function index()
{
$this->load->view('admin/setting');
}
}

Untuk saat ini, semua controller Admin yang kita buat hanya bertugas
untuk menampilkan view admin.

Nanti kita akan buat semua View-nya.

Berikutnya silahkan lanjutkan ke:

Membuat Route Default untuk Admin

Buka file config/routes.php kemudian tambahkan route default untuk admin

seperti ini:

$route['admin'] = 'admin/dashboard';

Artinya, kita akan menggunakan Controller admin/dashboard sebagai

Controller yang menerima request dari index.php/admin.

Setelah itu silahkan lajutkan ke:

Membuat Template Admin

Kita ingin memisah template untuk halaman admin dan halaman depan,
karena bentuk layoutnya berbeda.
Berikut ini bentuk rancangan atau desain dari halaman admin yang akan
kita buat:

Mari kita mulai membuat tempalate.

Buatlah folder baru di dalam 📁 views dengan nama 📁 admin.

Kemudian di dalamnya folder 📁 admin, buat lagi folder baru dengan

nama 📁 _partials.
Folder _partials akan berisi partial atau bagian dari view yang akan
digunakan pada view admin.

Nama dengan underscore di depan berfungsi sebagai penanda kalau ini

partial, bukan view yang di-load dari Controller. Ini sebenarnya tidak wajib,
namun agar lebih mudah dibaca kita pakai nama ini saja.

Oke berikutnya mari kita buat partial untuk admin.

Buatlah file baru di dalam 📁 admin/_partials dengan nama dan isi sebagai
berikut:

📜 head.php

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacoding</title>

<link rel="stylesheet" href="<?= base_url('assets/css/admin.css') ?>" />

Pada kode partial ini, kita menggunakan admin.css sebagai CSS untuk
halaman admin. File ini akan kita buat nanti.

📜 footer.php

<footer class="footer">
&copy; <?= Date('Y') ?> Beritacoding.com Version 1.0.0
</footer>

📜 side_nav.php

<aside class="side-nav">
<div class="brand">
<h2>Berita Coding</h2>
</div>
<nav>
<a href="<?= site_url('admin/dashboard') ?>">Overview</a>
<a href="<?= site_url('admin/post') ?>">Post</a>
<a href="<?= site_url('admin/feedback') ?>">Feedback</a>
<a href="<?= site_url('admin/setting') ?>">Setting</a>
<a href="<?= site_url('auth/logout') ?>">Logout</a>
</nav>
</aside>

Nah, berikutnya karena kita menggunakan file CSS admin.css di dalam

partial head.php maka kita perlu membuatnya.

Buatlah file baru di dalam folder 📁 assets/css/ dengan

nama admin.css dengan isi sebagai berikut:
body {
margin: 0;
padding: 0;
}

.main {
display: flex;
}

.side-nav {
background: teal;
width: 25vw;
max-width: 200px;
height: 100vh;
}

.side-nav .brand {
padding: 0 1rem;
color: white;
}

.side-nav nav {
display: flex;
flex-direction: column;
}

.side-nav nav a {
font-family: sans;
text-decoration: none;
color: white;
padding: 0.8rem;
}

.side-nav nav a:hover {

background-color: rgba(0, 0, 0, 0.2);
}

.content {
padding: 1rem;
padding-right: 2rem;
width: 100%;
position: static;
}

.toolbar {
display: flex;
margin: 1rem 0;
}

.table {
width: 100%;
border-collapse: collapse;
}

.table,
th,
td {
 border: 1px solid grey;
border-left: none;
border-right: none;
padding: 0.5rem;
text-align: left;
}

.action {
display: flex;
justify-content: center;
gap: 0.8rem;
}

.footer {
position: absolute;
bottom: 1rem;
text-align: center;
font-family: sans-serif;
font-size: 0.7rem;
}

/* Form */
form {
box-sizing: border-box;
padding: 0rem;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
input, textarea {
display: inline-block;
padding: 0.5rem;
margin-bottom: 1rem;
width: 100%;
}
input:focus, textarea:focus {
outline-color: dodgerblue;
}

/* Card */
.card {
border: 1px solid lightgray;
padding: 1rem;
margin: 1rem 0;
}

.card-header {
display: flex;
justify-content: space-between;
font-family: sans-serif;
}

/* Button */
.button {
background-color: #e7e7e7;
border: 2px solid transparent;
 border-radius: 8px;
color: black;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
font-family: sans-serif;
}

.button:hover {
opacity: 0.8;
}

.button:active {
border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
background-color: #4caf50;
color: white;
}
.button-primary {
background-color: #008cba;
color: white;
}
.button-danger {
background-color: #f44336;
color: white;
}

.button-small {
font-size: 0.7rem;
}

/* Text */
.text-green {
color: #4caf50;
}

.text-gray {
color: grey;
}

.text-center {
text-align: center;
}

Template partial sudah selesai. Berikutnya kita akan menggunakannya di

dalam View.
 Membuat View Admin

View yang harus kita buat sebenarnya sudah ditentukan di Controller. Kita
bisa lihat, view apa saja yang dibutuhkan di sana.

Berikut ini view yang di-load pada Controller admin:

 dashboard.php
 feedback_list.php
 post_list.php
 setting.php

Mari kita buat semuanya.

Buatlah file baru di dalam folder views/admin/ dengan nama dan isi sebagai
berikut:

📜 dashboard.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Overview</h1>
<p><b>13</b> <span class="text-gray">Post</span></p>
<p><b>11</b> <span class="text-gray">Feedback</span></p>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

📜 feedback_list.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>
<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Feedback</h1>

<div class="card">
<div class="card-header">
<div>
<b>Dian</b> <small class="text-
gray">[email protected]</small>
</div>
<div><small class="text-gray">19 Juli
2021</small></div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Nemo atque
delectus nihil voluptatibus odit
temporibus tempora amet quasi omnis.
</p>
<a href="#" class="button button-danger button-
small" role="button">Delete</a>
</div>
<div class="card">
<div class="card-header">
<div>
<b>Dian</b> <small class="text-
gray">[email protected]</small>
</div>
<div><small class="text-gray">19 Juli
2021</small></div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Nemo atque
delectus nihil voluptatibus odit
temporibus tempora amet quasi omnis.
</p>
<a href="#" class="button button-danger button-
small" role="button">Delete</a>
</div>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

📜 post_list.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>List Artikel</h1>

<div class="toolbar">
<a href="#" class="button button-primary"
role="button">+ Tulis Artikel</a>
</div>

<table class="table">
<thead>
<tr>
<th>Title</th>
<th style="width: 15%;"
class="text-center">Status</th>
<th style="width: 25%;"
class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Hello World!</div>
<div class="text-
gray"><small>12 Jan 2021<small></div>
</td>
<td class="text-center text-
gray">Draft</td>
<td>
<div class="action">
<a href="#"
class="button button-small" role="button">View</a>
<a href="#"
class="button button-small" role="button">Edit</a>
<a href="#"
class="button button-small button-danger" role="button">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<div>Hello World!</div>
<div class="text-
gray"><small>12 Jan 2021<small></div>
</td>
<td class="text-center text-
green">Published</td>
<td>
<div class="action">
<a href="#"
class="button button-small" role="button">View</a>
 <a href="#"
class="button button-small" role="button">Edit</a>
<a href="#"
class="button button-small button-danger" role="button">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

📜 setting.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Settings</h1>

<p>Comming Soon..</p>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Jika kita perhatikan, semua kode di view belum menggunakan data

apapun.

Kita menampilkan view dengan hardcode data-data yang akan kita

tampilkan. Ini agar nantinya kita mudah menentukan akan seperti apa
datanya ditampilkan.

Mari kita coba lihat dulu hasilnya:

Halaman Dashboard Overview

Halaman List Artikel

Halaman List Feedback

Halaman Setting’

Terlihat bagus 😍

Tapi..

Ini hanya tampilan saja, datanya tidak dinamis karena hardcoding.

 Nah, biar dinamis.. Kita akan menggunakan data dari database untuk
halaman Post dan Feedback.

Mari kita mulai dari yang gampang dulu..

Yakni halaman Feedback.

Menampilkan List Feedback

Ubahlah Feedback_model.php menjadi seperti ini:

<?php

class Feedback_model extends CI_Model

{
private $_table = "feedback";

public function insert($feedback)

{
if(!$feedback){
return;
}

return $this->db->insert($this->_table, $feedback);

}

public function get()

{
$query = $this->db->get($this->_table);
return $query->result();
}

public function delete($id)

{
if(!$id){
return;
}

$this->db->delete($this->_table, ['id' => $id]);

}
}

Pada model ini kita menambahkan dua method, yakni get() dan delete().

 Method get() berfungsi untuk mengambil semua data di tabel feedback;

 Method delete() berfungsi untuk menghapus feedback.

Berikutnya, ubahlah Controller admin/Feedback.php menjadi seperti ini:

<?php
class Feedback extends CI_Controller
{
public function index()
{
$this->load->model('feedback_model');
$data['feedbacks'] = $this->feedback_model->get();
$this->load->view('admin/feedback_list', $data);
}

public function delete($id = null)

{
if(!$id){
show_404();
}

$this->load->model('feedback_model');
$this->feedback_model->delete($id);

$this->session->set_flashdata('message', 'Data was deleted');

redirect(site_url('admin/feedback'));
}
}

Jika kita perhatikan, pada Controller ini.. kita menggunakan

libraray seasion untuk menampilkan feedback saat berhasil dihapus.

Library ini belum kita load.

Karena itu, silahkan tambahkan di config/autoload.php pada

bagian libraries menjadi seperti ini:

$autoload['libraries'] = array('database', 'session');

Oke, sekarang ubahlah view feedback_list.php menjadi seperti ini:

📜 views/admin/feedback_list.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Feedback</h1>

<?php foreach($feedbacks as $feedback): ?>

<div class="card">
<div class="card-header">
 <div>
<b><?= $feedback->name ?></b>
<small class="text-gray"><?= $feedback->email ?></small>
</div>
<div><small class="text-gray"><?=
$feedback->created_at ?></small></div>
</div>
<p><?= $feedback->message ?></p>
<a href="#"
data-delete-url="<?=
site_url('admin/feedback/delete/'.$feedback->id) ?>"
class="button button-danger button-
small"
role="button"
onclick="deleteConfirm(this)">Delete</a>
</div>
<?php endforeach ?>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function deleteConfirm(event){
Swal.fire({
title: 'Delete Confirmation!',
text: 'Are you sure to delete the item?',
icon: 'warning',
showCancelButton: true,
cancelButtonText: 'No',
confirmButtonText: 'Yes Delete',
confirmButtonColor: 'red'
}).then(dialog => {
if(dialog.isConfirmed){

window.location.assign(event.dataset.deleteUrl);
}
});
}
</script>

<?php if($this->session->flashdata('message')): ?>

<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter',
Swal.stopTimer)
toast.addEventListener('mouseleave',
Swal.resumeTimer)
}
})
 Toast.fire({
icon: 'success',
title: '<?= $this->session->flashdata('message')
?>'
})
</script>
<?php endif ?>
</body>

</html>

Pada view ini, kita menggunakan libraray SweetAlert2 untuk menampilkan

dialog konfirmasi dan pesan Toast saat datanya berhasil dihapus.

Mari kita uji coba!

Wuhuuu.. keren 😍

Nah, biar makin bagus..

Tampilkan juga view saat feedback-nya kosong.

Kita bisa buat view baru dengan nama feedback_empty.php di dalam

folder views/admin/ dengan isi seperti ini:

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Feedback is Empty</h1>

<p>No Feedback to show</p>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Kemudian, ubah Controller Feedback pada method index() menjadi seperti

ini:

public function index()

{
$this->load->model('feedback_model');
$data['feedbacks'] = $this->feedback_model->get();
if(count($data['feedbacks']) <= 0){
$this->load->view('admin/feedback_empty');
} else {
$this->load->view('admin/feedback_list', $data);
}
}

Maka hasilnya:
Yoshh!! Halaman feedback sudah beres.

Berikutnya silahkan lanjut ke:

Membuat CRUD Artikel

Kita sudah membuat view untuk halaman artikel secara hartcode.

Nah, sekarang saatnya kita membuatnya hidup dan berfungsi seperti yang
kita harapkan.

Baiklah, mari kita mulai!

1. Ubah Model Article

Ubahlah model Article_model.php menjadi seperti ini:

<?php

class Article_model extends CI_Model

{

private $_table = 'article';

public function get()

{
$query = $this->db->get($this->_table);
return $query->result();
}

public function get_published($limit = null, $offset = null)

{
if (!$limit && $offset) {
$query = $this->db
->get_where($this->_table, ['draft' =>
'FALSE']);
} else {
$query = $this->db
->get_where($this->_table, ['draft' => 'FALSE'],
$limit, $offset);
}
return $query->result();
}

public function find_by_slug($slug)

{
if (!$slug) {
return;
}
$query = $this->db->get_where($this->_table, ['slug' => $slug]);
return $query->row();
 }

public function find($id)

{
if (!$id) {
return;
}

$query = $this->db->get_where($this->_table, array('id' => $id));

return $query->row();
}

public function insert($article)

{
return $this->db->insert($this->_table, $article);
}

public function update($article)

{
if (!isset($article['id'])) {
return;
}

return $this->db->update($this->_table, $article, ['id' =>

$article['id']]);
}

public function delete($id)

{
if (!$id) {
return;
}

return $this->db->delete($this->_table, ['id' => $id]);

}
}

Pada Model Article_model.php kita menambahkan beberapa method yang

akan dibutuhkan untuk operasi data.

 Method get() untuk mengambil semua artikel dari database;

 Method find() untuk mengambil satu artikel saja dengan id tertentu;
 Method insert() untuk menambahkan artikel baru;
 Method update() untuk mengupdate artikel;
 dan method delete() untuk menghapus artikel.

Berikutnya, lanjutkan:

2. Ubah Controller Admin Post

Ubahlah Controller admin/Post.php menjadi seperti ini:
<?php

class Post extends CI_Controller

{
public function __construct()
{
parent::__construct();
$this->load->model('article_model');
}

public function index()

{
$data['articles'] = $this->article_model->get();
$this->load->view('admin/post_list.php', $data);
}

public function new()

{
if ($this->input->method() === 'post') {
// TODO: Lakukan validasi sebelum menyimpan ke model

// generate unique id and slug

$id = uniqid('', true);
$slug = url_title($this->input->post('title'), 'dash',
TRUE) . '-' . $id;

$article = [
'id' => $id,
'title' => $this->input->post('title'),
'slug' => $slug,
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];

$saved = $this->article_model->insert($article);

if ($saved) {
$this->session->set_flashdata('message',
'Article was created');
return redirect('admin/post');
}
}

$this->load->view('admin/post_new_form.php');
}

public function edit($id = null)

{
$data['article'] = $this->article_model->find($id);

if (!$data['article'] || !$id) {
show_404();
}

if ($this->input->method() === 'post') {

// TODO: lakukan validasi data seblum simpan ke model
$article = [
 'id' => $id,
'title' => $this->input->post('title'),
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];
$updated = $this->article_model->update($article);
if ($updated) {
$this->session->set_flashdata('message',
'Article was updated');
redirect('admin/post');
}
}

$this->load->view('admin/post_edit_form.php', $data);
}

public function delete($id = null)

{
if (!$id) {
show_404();
}

$deleted = $this->article_model->delete($id);
if ($deleted) {
$this->session->set_flashdata('message', 'Article was
deleted');
redirect('admin/post');
}
}
}

Ada beberapa method yang kita tambahkan dan ubah di sini:

 Method __construct() konstruktor untuk load model Article_model.php secara

default;
 Method index() untuk menampilkan list artikel baik yang statusnya sudah
terbit maupun draft;
 Method new() untuk membuat atau menambhakan artikel baru;
 Method edit() untuk mengubah artikel tertentu;
 dan method delete() untuk menghapus artikel.

Pada method new() kita menggunakan fungsi url_title() dari

helper url untku membuat slug dan uniqid() untuk membuat id unik.

// generate unique id and slug

$id = uniqid('', true);
$slug = url_title($this->input->post('title'), 'dash', TRUE) . '-' . $id;

Kita juga menggunakan libraray session pada method new(), edit(),

dan delete() untuk menampilkan flash data atau message.
$this->session->set_flashdata('message', 'Article was updated');

Ini nanti akan ditampilkan dengan Toast dari SweetAlert2.

Sekarang mari kita lanjut megubah view.

3. Ubah View Admin Post

Pertama ubahlah view admin/post_list.php menjadi sperti ini:

📜 views/admin/post_list.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>List Artikel</h1>

<div class="toolbar">
<a href="<?= site_url('admin/post/new') ?>"
class="button button-primary" role="button">+ Tulis Artikel</a>
</div>

<table class="table">
<thead>
<tr>
<th>Title</th>
<th style="width: 15%;"
class="text-center">Status</th>
<th style="width: 25%;"
class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($articles as $article): ?>
<tr>
<td>
<div><?= $article-
>title ?></div>
<div class="text-
gray"><small><?= $article->created_at ?><small></div>
</td>
<?php if($article->draft ===
'true'): ?>
<td class="text-center
text-gray">Draft</td>
 <?php else: ?>
<td class="text-center
text-green">Published</td>
<?php endif ?>
<td>
<div class="action">
<a href="<?=
site_url('article/'.$article->slug) ?>" class="button button-small"
target="_blank" role="button">Preview</a>
<a href="<?=
site_url('admin/post/edit/'.$article->id) ?>" class="button button-small"
role="button">Edit</a>
<a href="#"
data-
delete-url="<?= site_url('admin/post/delete/'.$article->id) ?>"

class="button button-small button-danger"

role="button"

onclick="deleteConfirm(this)">Delete</a>
</div>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function deleteConfirm(event){
Swal.fire({
title: 'Delete Confirmation!',
text: 'Are you sure to delete the item?',
icon: 'warning',
showCancelButton: true,
cancelButtonText: 'No',
confirmButtonText: 'Yes Delete',
confirmButtonColor: 'red'
}).then(dialog => {
if(dialog.isConfirmed){

window.location.assign(event.dataset.deleteUrl);
}
});
}
</script>

<?php if($this->session->flashdata('message')): ?>

<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
 showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter',
Swal.stopTimer)
toast.addEventListener('mouseleave',
Swal.resumeTimer)
}
})

Toast.fire({
icon: 'success',
title: '<?= $this->session->flashdata('message')
?>'
})
</script>
<?php endif ?>
</body>

</html>

Berikutnya kita membutuhkan view untuk form add dan form edit.

Silahkan buat view baru di dalam folder 📁 views/admin/ dengan

nama post_new_form.php dan post_edit_form.php dengan isi sebagai berikut:

📜 views/admin/post_new_form.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Write new Article</h1>

<form action="" method="POST">

<label for="title">Title*</label>
<input type="text" name="title"
placeholder="Judul artikel" required title="Wajib tulis judul artikel"/>

<label for="content">Konten</label>
<textarea name="content" cols="30" rows="10"
placeholder="Tuliskan isi pikiranmu..."></textarea>

<div>
<button type="submit" name="draft"
class="button" value="true">Save to Draft</button>
 <button type="submit" name="draft"
class="button button-primary" value="false">Publish</button>
</div>
</form>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

📜 views/admin/post_edit_form.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Edit Article</h1>

<form action="" method="POST">

<label for="title">Title*</label>
<input type="text" name="title"
placeholder="Judul artikel"
required
title="Wajib tulis judul artikel"
value="<?= $article->title ?>"/>

<label for="content">Konten</label>
<textarea name="content" cols="30" rows="10"
placeholder="Tuliskan isi pikiranmu..."><?= $article->content ?></textarea>

<div>
<button type="submit" name="draft"
class="button" value="true">Save to Draft</button>
<button type="submit" name="draft"
class="button button-primary" value="false">Publish Update</button>
</div>
</form>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Nah, sekarang semua sudah siap..

Mari kita lakukan:

4. Percobaan
Percobaan membuka halaman admin list artikel:

Jika kita sudah pernah menambahkan artikel, maka artikelnya akan

ditampilkan.

Berikutnya, cobalah untuk membuat artikel baru.

oba juga untuk edit artikelnya.
Semua berhasil tanpa error.

Tinggal sentuhan terakhir untuk artikel:

5. Membuat View Saat Artikel Kosong

Saat artikel kosong, halaman admin post hanya akan menampilkan header
dari tabel saja seperti ini:
Namun, kita ingin yang ditampilkan adalah pesan kalau artikelnya kosong.

Kita bisa melakukannya dengan membuat view baru seperti halaman

feedback, atau juga membuat logika di dalam view untuk menampilkan
pesan “artikel kosong”.

Biar konsisten, kita ikuti cara seperti yang di halaman feedback. Yakni
membuat view baru.

Buatlah view baru dalam folder views/admin dengan

nama post_empty.php dengan isi sebagai berikut:

📜 views/admin/post_empty.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Article is Empty</h1>
<p>No Article to show. Please create new article.</p>

<div>
<a href="<?= site_url('admin/post/new') ?>"
class="button button-primary">+ Create New Article</a>
</div>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Kemudian ubah method index() pada Controller admin/Post.php menjadi

seperti ini:

public function index()

{
$data['articles'] = $this->article_model->get();
if(count($data['articles']) <= 0){
$this->load->view('admin/post_empty.php');
} else {
$this->load->view('admin/post_list.php', $data);
}
}

Sekarang coba hapus semua artikel, maka hasilnya:

Mantap!

Tinggal terakhir nih:

Perbaiki Halaman Overview

Halaman overview akan kita gunakan untuk menampilkan ada berapa total
artikel yang sudah dibuat dan total feedback yang sudah didapatkan.

Mari kita buat modelnya terlebih dahulu.

Silahkan tambahkan method count() pada

model Article_model.php dan Feedback_model.php seperti ini:

📜 models/Article_model.php

public function count(){

return $this->db->count_all($this->_table);
}

📜 models/Feedback_model.php
public function count(){
return $this->db->count_all($this->_table);
}

Fungsi ini akan mengembalikan nilai berupa integer sesuai dengan jumlah
data yang ada pada tabel.

Berikutnya silahkan ubah controller admin/Dashboad.php menjadi seperti ini:

<?php

class Dashboard extends CI_Controller

{
public function index()
{
$this->load->model('article_model');
$this->load->model('feedback_model');

$data = [
"article_count" => $this->article_model->count(),
"feedback_count" => $this->feedback_model->count()
];

$this->load->view('admin/dashboard.php', $data);
}
}

Nah, sekarang ubahlah view untuk halaman overview menjadi seperti ini:

📜 views/admin/dashboard.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Overview</h1>

<div style="display:flex; gap: 1em">

<div class="card text-center" style="width: 100px;">
<h2>
<?= $article_count ?>
</h2>
<p><a href="<?= site_url('admin/post') ?>">Artikel</a></p>
</div>
<div class="card text-center" style="width: 100px;">
<h2>
 <?= $feedback_count ?>
</h2>
<p><a href="<?= site_url('admin/feedback') ?>">Feedback</a></p>
</div>
</div>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Hasilnya:

Mantap!

Apa Selanjutnya?

Halaman admin hampir jadi. Tinggal membuat fitur

untuk Setting dan Login/Logout aja nih.

Tapi sebelum itu, silahkan pelajari dulu tentang validasi data.

 Tutorial Codeigniter #08: Validasi Data Form

 Jika kamu mendapatkan masalah atau error dan ingin bertanya, mari
sampaikan di

Tutorial Codeigniter #08: Cara Validasi

Form agar Aplikasimu Lebih Aman

Tutorial ini merupakan lanjutan dari tutorial sebelumnya:

 Tutorial Codigniter #07: Membuat Halaman Admin (CRUD)

Pada tutorial ini, kita akan belajar tentang validasi data di Codeigniter.
Agar kita bisa membuat aplikasi yang lebih aman.

Mari kita langsung saja mulai..

Apa itu Form Validation?

Form validation adalah proses validasi data input yang diinputkan dari
form.

Proses validasi ini biasanya dilakukan di Controller dan menggunalan

library form_validation.

Mengapa Kita Butuh Validasi?

Intinya:

Jangan percaya apa yang diinputkan user.

Bisa saja mereka menginputkan kode javascript pada form, sehingga

aplikasi kita akan rentan dengan XSS Attack.

Bisa juga mereka menginputkan data asal-asalan.

Misal disuruh input email, malah memberikan nomer hp 😔.

Walau kita berpikir hal ini tidak mungkin akan dilakukan user, tapi hal ini
patut kita waspadai agar aplikasi kita semakin aman.

Salah satunya dengan melakukan validasi input yang dilakukan oleh user.

Gimana Cara Validasi data di Codeigniter

Sebenarnya validasi bisa dilakukan di dua sisi.

Pertama di sisi client.

Ini bisa menggunakan validasi dari HTML5 dan juga Javascript.

Kedua di sisi server.

Ini dilakukan saat data dikirim melalui metode POST dan di sana kita
melakukan pengecekan data. Bisa dilakukan secara manual maupun
dengan library.

Nah Codeigniter sendiri sudah menyediakan library untuk melakukan

validasi data, yakni form_validation.

Bagaimana cara pakainya?

Cara pakainya, kita tinggal load saja library-nya pada method yang akan
menggunakan validasi data.

Berikut ini kode untuk load library form_validation.

$this->load->library('form_validation');

Bisa juga kita load di dalam konstruktor atau atauloader jika memang kita
membutuhkan di semua method.

Tapi, kita menginginkan agar libary ini digunakan pada method tertentu
saja. Yakni method-method yang menerima input dari user.

Karena itu, lebih baik di-load di method saja dari pada di autoloader.

Kemudian, setelah berhasil di-load.. kita bisa pakai library-nya untuk

validasi.

Contoh:

// menentukan rules untuk validasi

 $this->form_validation->set_rules($rules);
// menjalankan validasi
$this->form_validation->run();

Saat menjalankan validasi, fungsi run() akan mengembalikan nilai TRUE jika
datanya valid dan FALSE jika datanya invalid atau tidak sesuai
dengan rules yang kita berikan.

Apa itu rules?

Rules adalah kumpulan aturan-aturan yang harus dipenuhi sebuah input.

Kalau tidak dipenuhi, berarti input atau data itu akan dinyatakan invalid
oleh validator.

Berikut ini contoh rules:

$rules = [
[
'field' => 'email', //<- ini mengikuti nama input di form
'label' => 'Email Address',
'rules' => 'required|valid_email|max_length[64]']
];

Pada rule tersebut, kita menentukan input field dengan nama email :

<input name="email" />

Input field ini harus mengikuti rules:

 required wajib diisi;

 valid_email bentuknya berupa alamat email yang benar;
 max_length[64] panjangnya maksimal 64 karakter.

Jika user menginputkan diluar dari rules yang kita tentukan..

..maka akan dianggap invalid.

Codeigniter menyediaakan rules yang bisa kita pakai langsung. Kita juga
bisa membuat custom rules apabila rulse tidak ada di dalam rules bawaan
Codeigniter.

Berikut ini tabel rules bawaan Codeigniter yang bisa kita pakai.
 Paramete
Rule r Keterangan

required Tidak Input wajib diisi atau tidak boleh kosong

Input harus match dengan parameter yang ditentukan.

matches Ya Contoh: matches[form_item]

Input harus match dengan pola regex yang ditentukan.

regex_match Ya Contoh: regex_match[/regex/]

Input harus berbeda dari parameter yang ditentukan.

differs Ya Contoh: differs[form_item]

Input harus unik berdasarkan nama field pada database. Rule ini
membutuhkan Query Builder agar bisa digunakan.
is_unique Ya Contoh: is_unique[table.field]

Panjang input harus setidaknya minimal dari nilai yang ditentukan.

min_length Ya Contoh: min_length[3]
 Paramete
Rule r Keterangan

Panjang input harus lebih pendek dari nilai maksimal yang

max_length Ya ditentukan. Contoh: max_length[12]

Panjang input harus sama dengan nilai yang ditentukan.

exact_length Ya Contoh: exact_length[8]

Input harus lebih besar dari angka yang ditentukan dan harus
greater_than Ya berupa angka. Contoh: greater_than[8]

Input harus lebih besar atau sama dengan nilai yang ditentukan dan
greater_than_equal_to Ya harus berupa angka. Contoh: greater_than_equal_to[8]

Input harus lebih kecil dari nilai yang ditentukan dan harus berupa
less_than Ya angka. Contoh: less_than[8]

Input harus lebih kecil atau sama dengan dari nilai yang ditentukan
less_than_equal_to Ya dan harus berupa angka, Contoh: less_than_equal_to[8]
 Paramete
Rule r Keterangan

Input harus mengandung item seperti yang ada di dalam list,

in_list Ya Contoh: in_list[red,blue,green]

alpha Tidak Input harus berupa huruf alphabet

alpha_numeric Tidak Input harus berupa karakter alpha-numeric

Input harus berupa karakter alpha-numeric dan juga boleh

alpha_numeric_spaces Tidak mengandung spasi.

Input harus berupa alpabet boleh mengandung - (dash)

alpha_dash Tidak dan _ (underscore)

numeric Tidak Input harus berupa karakter angka

integer Tidak Input harus berupa angka

 Paramete
Rule r Keterangan

decimal Tidak Input harus berupa angka desimal

is_natural Tidak Input harus berupa angka alami.

is_natural_no_zero Tidak Input harus berupa angka alami yang bukan nol.

valid_url Tidak Input harus berupa URL yang benar

valid_email Tidak Input harus berupa alamat email

valid_emails Tidak input list yang dipisah dengan koma harus berupa email yang benar

valid_ip Tidak Input harus berupa IP Address. Bisa dengan format ‘ipv4’ atau ‘ipv6’.

valid_base64 Tidak Input harus mengandung Base64

 Paramete
Rule r Keterangan

Kamu tidak harus menghapal semua rules ini. Kalau tidak ingat, bisal
dilihat di dokumentasi Form Validation.

Nah, sekarang mari kita coba menerapkan validasi data di aplikasi yang
kita buat. Yakni beritacoding.

Latihan: Validasi Input Feedback

Pertama mari kita buat validasi input untuk form Contact atau Feedback.

1. Membuat Rules untuk Input

Kita akan menyimpan rules pada model.

Boleh juga dibuat di Controller.

Namun, membuat rules di dalam model akan membuatnya bisa dipakai lagi
pada method yang membutuhkannya.

Oke sekarang..

Buatlah method baru bernama rules() di dalam model Feedback_model.php .

Method ini akan mengembalikan sebuah array yang berisi rules untuk
input field yang kan kita validasi.

<?php

class Feedback_model extends CI_Model

{
private $_table = "feedback";

public function rules()

{
 return [
[
'field' => 'name',
'label' => 'Name',
'rules' => 'required|max_length[32]'
],
[
'field' => 'email',
'label' => 'Email',
'rules' => 'required|valid_email|max_length[32]'
],
[
'field' => 'message',
'label' => 'Message',
'rules' => 'required'],
];
}

// ... ada kode lain di sini ...

}

Perhatikan!

Kita memberikan rules untuk tiga input field, yakni name, email dan message.

Ketiga input field wajib diisi, karena itu kita berikan rule required.

Lalu untuk max_length kita bisa mengikuti panjang karakter yang sudah
ditentukan pada tabel di database.

Mengapa id dan created_at tidak dibuatkan rules?

Karena id dan created_at tidak diinputkan oleh user. Melainkan kita

generate sendiri di dalam kode dan created_at diisi otomatis oleh MySQL.

Oke sekarang kita gunakan rules ini di dalam Controller.

2. Membuat Validasi di Controller

Ubahlah method contact() pada Controller Page.php seperti ini:

public function contact()

{
$data['meta'] = [
'title' => 'Contact Us',
];
$this->load->library('form_validation');

if ($this->input->method() === 'post') {

$this->load->model('feedback_model');

$rules = $this->feedback_model->rules();
$this->form_validation->set_rules($rules);

if ($this->form_validation->run() == FALSE) {
return $this->load->view('contact', $data);
}

$feedback = [
'id' => uniqid('', true),
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'message' => $this->input->post('message')
];

$feedback_saved = $this->feedback_model->insert($feedback);

if ($feedback_saved) {
return $this->load->view('contact_thanks');
}
}

$this->load->view('contact', $data);
}

Perhatikan pada baris yang saya highlight..

Di sana kita melakukan load library form_validation di bagian atas, tujuannya

agar bisa digunakan pada metode POST maupun GET.

Lalu di dalam blok $this->input->method() === 'post' kita melakuan validasi

data.

$rules = $this->feedback_model->rules();
$this->form_validation->set_rules($rules);

if ($this->form_validation->run() == FALSE) {
return $this->load->view('contact', $data);
}

Jika hasil validasi data pada method run() adalah FALSE atau invalid, maka
fungsi akan mengembalikan view contact dan kode di bawahnya tidak akan
tereksekusi.
Namun, sebaliknya.. jika hasilnya valid atau TRUE maka kode dibawahnya
akan dieksekusi, yakni kode untuk menyimpan data ke database.

Mengapa kok tidak dieksekusi?

Ini karena kita menggunakan return yang akan menghentikan eksekusi

method dan mengembalikan nilai.

Oke sekarang..

Kita harus modifikasi dulu form-nya.

3. Menampilkan Feedback di Form

Ubahlan kode form pada views/contact.php menjadi seperti ini:

📜 views/contact.php

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>

<div class="container">
<h1>Contact Us</h1>
<p>Hubungi kami melalui form berikut</p>
<form action="" method="post" style="max-width: 600px;">
<div>
<label for="name">Name*</label>
<input type="text" name="name" class="<?=
form_error('name') ? 'invalid' : '' ?>" placeholder="your name" value="<?=
set_value('name') ?>" />
<div class="invalid-feedback"><?=
form_error('name') ?></div>
</div>
<div>
<label for="email">Email*</label>
<input type="email" name="email" class="<?=
form_error('email') ? 'invalid' : '' ?>" placeholder="your email address"
value="<?= set_value('email') ?>" />
<div class="invalid-feedback"><?=
form_error('email') ?></div>
</div>
<div>
<label for="messaage">Message*</label><br>
 <textarea name="message" cols="30" class="<?=
form_error('message') ? 'invalid' : '' ?>" rows="5" placeholder="write your
message"><?= set_value('message') ?></textarea>
<div class="invalid-feedback"><?=
form_error('message') ?></div>
</div>

<div style="display: flex; gap: 1rem">

<input type="submit" class="button button-
primary" value="Kirim">
<input type="reset" class="button"
value="Reset">
</div>
</form>
</div>
<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

Jika kita perhatikan.. ada dua fungsi baru yang kita pakai di dalam view ini.

 set_value() adalah fungsi untuk mengisi ulang nilai pada input field dengan
nilai sebelumnya. Fungsi ini akan mencegah input field dikosongkan saat
kita submit dan terjadi invalid.
 form_error() adalah fungsi untuk menampilkan pesan feedback saat input
field invalid.

Parameter yang kita harus berikan pada kedua fungsi ini adalah nama dari
input field sesuai pada rules yang kita buat.

Berikutnya kita harus:

4. Mengubah CSS untuk Form

Ini adalah tampilan form yang sudah kita buat.
Agar tampilannya lebih menarik, kita akan menambahkan CSS untuk form
ini.

Silahkan buka file assets/css/main.css kemudian tambahkan kode CSS

berikut.

/* Form */
form {
box-sizing: border-box;
display:flex;
flex-direction: column;
gap: 1rem;
margin: 2em 0;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
input, textarea {
display: inline-block;
padding: 0.5rem;
width: 100%;
}
input:focus, textarea:focus {
outline-color: dodgerblue;
}

.invalid {
border: 2px solid rgb(153, 16, 16);
}
.invalid::placeholder {
color: rgb(153, 16, 16);
}

.invalid-feedback:empty {
display: none;
}
.invalid-feedback {
font-size: smaller;
color: rgb(153, 16, 16);
}

/* Button */
.button {
background-color: #e7e7e7;
border: 2px solid transparent;
border-radius: 8px;
color: black;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
font-family: sans-serif;
}

.button:hover {
opacity: 0.8;
}

.button:active {
border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
background-color: #4caf50;
color: white;
}
.button-primary {
background-color: #008cba;
color: white;
}
.button-danger {
background-color: #f44336;
color: white;
}

.button-small {
font-size: 0.7rem;
}

Maka hasilnya:
5. Percobaan
Cobalah untuk tidak negisi input pada halaman form, lalu klik submit.
Yap! validasi kita berhasil.

Form kosong akan invalid.

Lalu kita coba isi form Name dengan teks yang lebih dari 32 karakter.
 Yap! ini juga berhasil.

Bagaimana jika user menginputkan kode Javascript yang tujuannya untuk

melakukan serangan XSS?

Bisa juga sebenarnya kita filter dari sini, namun karena XSS berjalan di
client. Solusinya bisa diatasi di sisi client.

Ini akan kita bahas di kesempatan yang lain:

 Melindungi Aplikasi Codigniter dari Serangan XSS

Lalu gimana dengan SQL injection?

Tentang saja, Codeigniter sendiri sudah melakukan escape pada query

untuk mencegah SQL Injection. Selama Query itu dibuat dengan Active
Record atau Query Builder. 1

Berikutnya, mari kita latihan lagi..

Latihan: Validasi Input Artikel

Artikel diinputkan oleh admin, namun tidak menutup kemungkinan juga

akan diinputkan dengan data yang invalid.

Mari kita buat validasi untuk input artikel.

1. Membuat Rules untuk Input

Buatlah method rules() pada model Article_model.php seperti ini:

public function rules()

{
return [
[
'field' => 'title',
'label' => 'Title',
'rules' => 'required|max_length[128]'
],
[
'field' => 'draft',
'label' => 'Draft',
'rules' => 'required|in_list[true,false]'
],
[
'field' => 'content',
'label' => 'Content',
'rules' => '' // <-- rules dikosongkan
]
];
}

Ada dua input field yang perlu kita validasi di dalam artikel,
yakni title dan draft.

Sedangkan content tidak kita berikan rules, namun tetap kita tulis dalam
array rules.

Tujuannya agar kita bisa mendapatkan kembali nilai konten

dengan set_value() saat terjadi invalid input.

Berikut ini struktur tabel artikel:

 Mengapa kita hanya validasi title dan draft saja?

Karena kedua field ini yang patut kita waspadai.

 id diinputkan dari generate code dengan uniqid() di dalam controller;

 titlediinputkan oleh user dan tidak boleh kosong, karena titile akan kita
pakai untuk membuat slug di controller.
 slug dibuat otomatis di controller dengan memanfaatkan teks dari title;
 contentsebenarnya konten boleh diisi boleh juga tidak. Tapi kalau kamu
mewajibkan konten harus diisi, silahkan buat rules required juga
untuk content.
 diinputkan oleh user dengan mengambil nilai dari tombol Save to
draft
Draft dan Publish.
 created_at diinputkan otomatis oleh MySQL.

Berdasarkan pertimabangan tersebut, maka kita memutuskan hanya dua

input field saya yang harus divalidasi.

Oke sekarang lanjut..

2. Membuat Validasi di Controller

Ubahlah method new() dan edit() pada Controlleradmin/Post.php menjadi
seperti ini:

📜 controllers/admin/Post.php

<?php

class Post extends CI_Controller

{
// ... ada kode lain di sini ...
 public function new()
{
$this->load->library('form_validation');
if ($this->input->method() === 'post') {
// Lakukan validasi sebelum menyimpan ke model
$rules = $this->article_model->rules();
$this->form_validation->set_rules($rules);

if($this->form_validation->run() === FALSE){

return $this->load-
>view('admin/post_new_form.php');
}

// generate unique id and slug

$id = uniqid('', true);
$slug = url_title($this->input->post('title'), 'dash',
TRUE) . '-' . $id;

$article = [
'id' => $id,
'title' => $this->input->post('title'),
'slug' => $slug,
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];

$saved = $this->article_model->insert($article);

if ($saved) {
$this->session->set_flashdata('message',
'Article was created');
return redirect('admin/post');
}
}

$this->load->view('admin/post_new_form.php');
}

public function edit($id = null)

{
$data['article'] = $this->article_model->find($id);
$this->load->library('form_validation');

if (!$data['article'] || !$id) {
show_404();
}

if ($this->input->method() === 'post') {

// lakukan validasi data seblum simpan ke model
$rules = $this->article_model->rules();
$this->form_validation->set_rules($rules);

if($this->form_validation->run() === FALSE){

return $this->load-
>view('admin/post_edit_form.php', $data );
}
 $article = [
'id' => $id,
'title' => $this->input->post('title'),
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];
$updated = $this->article_model->update($article);
if ($updated) {
$this->session->set_flashdata('message',
'Article was updated');
redirect('admin/post');
}
}

$this->load->view('admin/post_edit_form.php', $data);
}

// ... ada kode lain di sini ...

}

Berikutnya kita perlu mengubah view untuk form new dan edit agar bisa
mengampilkan feedback validasi.

Silahkan lanjut:

3. Menampilkan Feedback di Form

Ubahlah kode
view admin/post_new_form.php dan admin/post_edit_form.php masing-masing
menjadi seperti ini:

📜 views/admin/post_new_form.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Write new Article</h1>

<form action="" method="POST">

<div>
<label for="title">Title*</label>
 <input type="text" name="title"
class="<?= form_error('title') ? 'invalid' : '' ?>" placeholder="Judul artikel"
value="<?= set_value('title') ?>" />
<div class="invalid-feedback">
<?= form_error('title') ?>
</div>
</div>

<div>
<label for="content">Konten</label>
<textarea name="content" cols="30"
rows="10" placeholder="Tuliskan isi pikiranmu..."><?= set_value('content') ?
></textarea>
</div>

<div>
<button type="submit" name="draft"
class="button" value="true">Save to Draft</button>
<button type="submit" name="draft"
class="button button-primary" value="false">Publish</button>
<div class="invalid-feedback">
<?= form_error('draft') ?>
</div>
</div>
</form>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

📜 views/admin/post_edit_form.php

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

<head>
<?php $this->load->view('admin/_partials/head.php') ?>
</head>

<body>
<main class="main">
<?php $this->load->view('admin/_partials/side_nav.php') ?>

<div class="content">
<h1>Edit Article</h1>

<form action="" method="POST">

<div>
<label for="title">Title*</label>
<input type="text" name="title"
class="<?= form_error('title') ? 'invalid' : '' ?>"
value="<?= form_error('title') ?
set_value('title') : $article->title ?>" />
 <div class="invalid-feedback">
<?= form_error('title') ?>
</div>
</div>

<div>
<label for="content">Konten</label>
<textarea name="content" cols="30"
rows="10" placeholder="Tuliskan isi pikiranmu..."><?= form_error('content') ?
set_value('content') : $article->content ?></textarea>
</div>

<div>
<button type="submit" name="draft"
class="button" value="true">Save to Draft</button>
<button type="submit" name="draft"
class="button button-primary" value="false">Publish Update</button>
<div class="invalid-feedback">
<?= form_error('draft') ?>
</div>
</div>
</form>

<?php $this->load->view('admin/_partials/footer.php') ?>

</div>
</main>
</body>

</html>

Jika kita perhatikan, pada form edit.. kita menggunakan dua nilai untuk
input field judul.

value="<?= form_error('title') ? set_value('title') : $article->title ?>"

Jika form edit error, maka kita akan pakai nilai dari form validation.
Namun, sebaliknya.. kita akan pakai nilai dari database.

Nah berikutnya kita harus mengubah kode CSS untuk form agar bisa
menampilkan pesan feedback.

4. Mengubah CSS untuk Form

Bukalah file 📜 assets/admin.css , kemudian ubah kode CSS untuk form
menjadi seperti ini:

/* Form */
form {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 0;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
input, textarea {
display: inline-block;
padding: 0.5rem;
width: 100%;
}
input:focus, textarea:focus {
outline-color: dodgerblue;
}

.invalid {
border: 2px solid rgb(153, 16, 16);
}

.invalid::placeholder {
color: rgb(153, 16, 16);
}

.invalid-feedback:empty {
display: none;
}
.invalid-feedback {
font-size: smaller;
color: rgb(153, 16, 16);
}

Semua sudah beres..

Mari kita lakukan:

5. Percobaan
Cobalah untuk membuat artikel baru, lalu kosongkan judulnya. Maka akan
terjadi error seperti ini:
Coba juga untuk mengisi judul yang melebihi batas maksimal, yakni 128
karakter.
Coba juga untuk tes form edit. Pastikan hasilnya sesui seperti yang kita
harapkan.

Yakni untuk judul wajib diisi dan tidak boleh lebih dari 128 karakter.

Lalu bagaiman dengan input draft?

Nilai draft sebenarnya kita dapatkan dari tombol Save to Draft (true)
dan Publish (false).

Secara otomatis nilai ini akan tersisi, tergantung dari tombol yang diklik
oleh user.

Namun kadang bisa saja ada user yang jahil, sengaja mengubah value di
dalam tombol melalui inspect element.
Nilai draft tidak lagi true dan false, melainkan nilai yang sudah diubah.

Karena itu, untuk mengatasi ini..

..kita melakukan valiadasi terhadap nilai draft yang hanya boleh diisi
dengan true dan false.

Jika user mencoba-coba untuk mengubah nilainya, maka akan terjadi

invalid.

Kita sudah melakukan validasi di sisi server untuk semua input.

Lakukan juga:

Validasi di Sisi Client dengan HTML 5

Sebenarnya ini opsional, boleh dilakukan boleh juga tidak. Karena kita
sudah membuat validasi di sisi server.

Akan tetapi, ada baiknya kita buat juga validasi di sisi client. Agar aplikasi
kita inputnya divalidasi dari dua sisi.

Untuk melakukan validasi di sisi client, kita bisa gunakan atribut validasi
bawaan HTML 5 dan juga Javascript.
 Biar gampang kita pakai saja atribut bawaan:

 atribut required agar input wajib diisi;

 atribut type='email' input harus berupa email;
 atribut pattern input harus mengikuti pola regex
 atribut min dan max untuk membatasi angka;
 atribut minlength dan maxlength untuk membatasi panjang karakter;
 dan lain sebagainya.

Contoh:

<input type="email" required />

<input type="text" pattern="[0-9]" />
<input type="number" min="0" max="100" />
<input type="text" maxlength="32" />

Atribut ini bisa kamu pelajari di:

 Cara Validasi Form di HTML

Mari kita ubah kembali view untuk form contact, new artikel, dan edit
artikel.

📜 views/contact.php
Tambahkan atribut required dan maxlength="32" pada input nama.

<input
type="text"
name="name"
class="<?= form_error('name') ? 'invalid' : '' ?>"
placeholder="your name"
value="<?= set_value('name') ?>"
required
maxlength="32"
/>

Tambahkan juga atribut required pada email dan message.

<input
type="email"
name="email"
class="<?= form_error('email') ? 'invalid' : '' ?>"
placeholder="your email address"
value="<?= set_value('email') ?>"
required
/>
<textarea
name="message"
cols="30"
class="<?= form_error('message') ? 'invalid' : '' ?>"
rows="5"
placeholder="write your message"
required
><?= set_value('message') ?></textarea>

📜 views/admin/post_new_form.php
Tambahkan atribut required dan maxlength="128" pada input title.

<input
type="text"
name="title"
class="<?= form_error('title') ? 'invalid' : '' ?>"
value="<?= form_error('title') ? set_value('title') : $article->title ?>"
required
maxlength="128"
/>

📜 views/admin/post_edit_form.php
Tambahkan atribut required dan maxlength="128" pada input title.

<input
type="text"
name="title"
class="<?= form_error('title') ? 'invalid' : '' ?>"
value="<?= form_error('title') ? set_value('title') : $article->title ?>"
required
maxlength="128"
/>

Percobaan:
Silahkan coba melakukan input.
 Input akan otomatis dilakukan oleh browser saat kita melakukan submit.

Apa Selanjutnya?

Akhirnya selesai juga pembahasan tentang validasi.

Ini memang cukup panjang.

Saya menghargai semangatmu untuk belajar Codeigniter, hingga rela

membaca tutorial sepanjang ini. 😄

Nah, selanjutnya kita akan membuat fitur login.

Silahkan lanjut ke:

 Tutorial Codigntier #09: Membuat Fitur Login

Kalau ada pertanyaan, mari diskusikan di kolom komentar.

Selamat belajar!

Souce code dari tutorial ini bisa kamu donwload di Github.

 [🎁 Download Source Code]

Tutorial Codeigniter #09: Membuat Fitur

Login untuk Admin

Tutorial ini merupakan lanjutan dari tutorial sebelumnya:

 Tutorial Codeigniter #07: Membuat Halaman Admin

 Tutorial Codeigniter #08: Validasi Data

Pada tutorial ini, kita akan membuat fitur login untuk admin dengan
library session bawaan dari Codeigniter.

Mari kita mulai..

Apa itu Session?

Dalam ilmu komputer atau jaringan komptuer, Session atau sesi

merupakan informasi sementara yang disimpan saat dua buah
pernagkat atau komputer saat saling berkomunikasi atau bertukar data. 1

Ingat kata kucinya: Informasi sementara

Jadi, ketika kita membuka website.. di sana bisa kita katakan sedang
memulai sebuah sesi baru.

Lalu ketika kita menutup website, berarti sesi kita akhiri.

Data sementara yang disimpan di dalam session, bisa kita pakai

untuk authentication atau login.

Data session bisa kita simpan di dalam client dan juga server.

Data session yang disimpan di dalam client, akan hilang saat browser atau
tab ditutup. Sedangkan session yang disimpan di dalam server akan hilang
saat server malakukan restart atau dihapus manual.
Nah, pada tutorial ini.. kita akan membuat login dengan menyimpan
session di dalam server.

Mengenal Library Session

Sebenarnya PHP sendiri sudah menyediakan fitur session yang bisa diakses
dari variabel global $_SESSION.

Namun, jika kita menggunakan session bawaan PHP, kita harus memanggil
fungsi session_start() di awal eksekusi.

Nah, pada Codeigniter.. kita tidak perlu memanggil fungsi session_start().

Kita cukup pakai library session yang sudah disediakan oleh Codeigniter.

Cara Load Library Session

Silahkan buka file config/autoload.php kemudian, pada bagian libraries..
tambahkan session seperti ini:

$autoload['libraries'] = array('database', 'session');

Maka library session sudah diload otomatis dan akan bisa kita gunakan dari
aplikasi Codeigniter.

Cara Menggunakan Library Session

Kita bisa menggunakan library session dengan method seperti ini:

$this->session->nama_method_session();

Ada beberapa method yang akan sering kita gunakan pada library session.

// flash data untuk data sementara

$this->session->set_flashdata('key');
$this->session->flash_data('key');

// user data untuk authenikasi

$this->session->set_userdata('key');
$this->session->userdata('key');
$this->session->has_userdata('key');

// menghapus session
$this->session->unset_userdata('key');
// hapus semua session
$this->session->sess_destory();
Parameter key kita perlukan untuk membuat dan mengakses isi session.

Penjelasan lebih detail tentang library ini, bisa juga kamu baca
di dokumentasi library session.

Oke sekarang..

Biar lebih paham, langsung saja kita praktik.

1. Membuat Tabel User

Buatlah tabel baru bernama user dengan struktur seperti ini:

Biar cepat, Kamu bisa gunakan query SQL berikut:

CREATE TABLE `user` (

`id` varchar(32) NOT NULL,
`name` varchar(32) NOT NULL,
`email` varchar(64) NOT NULL,
`username` varchar(64) NOT NULL,
`password` varchar(255) NOT NULL,
`avatar` varchar(32) DEFAULT NULL,
`created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
`last_login` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

Jalankan kode SQL ini pada database beritacoding di menu SQL.

 Setelah itu, tambahkan satu data dengan menjalankan kode SQL berikut.

INSERT INTO `user` (`id`, `name`, `email`, `username`, `password`, `avatar`,

`created_at`, `last_login`) VALUES
('6118b2a943acc2.78631959', 'Administrator', '[email protected]', 'admin',
'$2y$10$hRi1qju2KOeEPcBZ0wYfhu/PN5e9Wl.ddWeDTds8Uokad764X9D1a', NULL, '2021-08-15
06:22:33', '2021-08-19 15:55:42');

Maka kita akan punya data baru dengan:

 email: [email protected]
 username: admin
 password: admin

Password kita simpan dalam bentuk hash dengan fungsi password_hash() dan
algoritma PASSWORD_DEFAULT .

2. Membuat Model Auth

Buatlah model baru dengan nama Auth_model.php dengan isi sebagai berikut:

<?php

class Auth_model extends CI_Model

{
private $_table = "user";
const SESSION_KEY = 'user_id';

public function rules()

{
return [
[
'field' => 'username',
'label' => 'Username or Email',
'rules' => 'required'
],
[
'field' => 'password',
'label' => 'Password',
'rules' => 'required|max_length[255]'
]
];
}

public function login($username, $password)

{
$this->db->where('email', $username)->or_where('username',
$username);
$query = $this->db->get($this->_table);
$user = $query->row();

// cek apakah user sudah terdaftar?

if (!$user) {
return FALSE;
}

// cek apakah passwordnya benar?

if (!password_verify($password, $user->password)) {
return FALSE;
}

// bikin session
$this->session->set_userdata([self::SESSION_KEY => $user->id]);
$this->_update_last_login($user->id);

return $this->session->has_userdata(self::SESSION_KEY);
}

public function current_user()

{
if (!$this->session->has_userdata(self::SESSION_KEY)) {
return null;
}

$user_id = $this->session->userdata(self::SESSION_KEY);
$query = $this->db->get_where($this->_table, ['id' => $user_id]);
return $query->row();
}

public function logout()

{
 $this->session->unset_userdata(self::SESSION_KEY);
return !$this->session->has_userdata(self::SESSION_KEY);
}

private function _update_last_login($id)

{
$data = [
'last_login' => date("Y-m-d H:i:s"),
];

return $this->db->update($this->_table, $data, ['id' => $id]);

}
}

Terdapat empat method di dalam model ini:

1. Method login() untuk melakukan login dengan input

berupa username dan password. Fungsi ini mengembalikan nilai TRUE jika
berhasil login, sebaliknya akan mengembalikan FALSE jika gagal login;
2. Method current_user() untuk mendapatkan data user yang sedang login.
Fungsi ini akan menghasilkan null jika user tidak sedang login, dan akan
menghasilkan data objek dari user yang sedang login jika status user
sedang login.
3. Method logout() untuk melakukan logout atau menghapus session;
4. Method _update_last_login() berfungsi untuk mengupdate tanggal last_login.

3. Membuat Controller Auth

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

<?php

class Auth extends CI_Controller

{
public function index()
{
show_404();
}

public function login()

{
$this->load->model('auth_model');
$this->load->library('form_validation');

$rules = $this->auth_model->rules();
$this->form_validation->set_rules($rules);

if($this->form_validation->run() == FALSE){
return $this->load->view('login_form');
}
 $username = $this->input->post('username');
$password = $this->input->post('password');

if($this->auth_model->login($username, $password)){
redirect('admin');
} else {
$this->session->set_flashdata('message_login_error',
'Login Gagal, pastikan username dan passwrod benar!');
}

$this->load->view('login_form');
}

public function logout()

{
$this->load->model('auth_model');
$this->auth_model->logout();
redirect(site_url());
}
}

Pada Controller Auth, kita membuat dua method penting yakni:

1. login() untuk menampilkan form login dan memproses login;

2. dan logout() untuk melakukan logout.

Sementara itu, method index() tidak kita pakai. Maka kita bisa
panggil show_404() di sana.

Oke lanjut..

Sekarang kita harus:

4. Membuat View Form Login

Kita membutuhkan view untuk menampilkan form login.

Buatlah file baru bernama login_form.php di dalam folder views dengan isi
sebagai berikut:

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

<head>
<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
<?php $this->load->view('_partials/navbar.php'); ?>
 <div class="container">
<h1>Login</h1>
<p>Masuk ke Dashboard</p>

<?php if($this->session->flashdata('message_login_error')): ?>

<div class="invalid-feedback">
<?= $this->session-
>flashdata('message_login_error') ?>
</div>
<?php endif ?>

<form action="" method="post" style="max-width: 600px;">

<div>
<label for="name">Email/Username*</label>
<input type="text" name="username" class="<?=
form_error('username') ? 'invalid' : '' ?>"
placeholder="Your username or email"
value="<?= set_value('username') ?>" required />
<div class="invalid-feedback">
<?= form_error('username') ?>
</div>
</div>
<div>
<label for="password">Password*</label>
<input type="password" name="password" class="<?
= form_error('password') ? 'invalid' : '' ?>"
placeholder="Enter your password"
value="<?= set_value('password') ?>" required />
<div class="invalid-feedback">
<?= form_error('password') ?>
</div>
</div>

<div>
<input type="submit" class="button button-
primary" value="Login">
</div>
</form>
</div>
<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

Sejauh ini, fitur login sudah bisa dicoba.

Namun, belum bisa melindungi halaman admin.

Karena itu, silahkan lanjutkan ke:

5. Mengubah Controller Admin

Kita ingin setiap membuat halaman admin, user harus login terlebih
dahulu.

Ini bisa kita lakukan dengan memanggil fungsi current_user() pada

konstruktor Controller halaman admin.

Mari kita ubah semuanya..

Ubahlah Controller 📜 admin/Dashboard.php menjadi seperti ini:

<?php

class Dashboard extends CI_Controller

{
public function __construct()
{
parent::__construct();
$this->load->model('auth_model');
if(!$this->auth_model->current_user()){
redirect('auth/login');
}
}

// ... ada kode lain di sini ...

}

Lalu ubah juga Controller 📜 admin/Feedback.php menjadi seperti ini:

<?php

class Feedback extends CI_Controller

{
public function __construct()
{
parent::__construct();
$this->load->model('auth_model');
if(!$this->auth_model->current_user()){
redirect('auth/login');
}
}

// ... ada kode lain di sini ...

}

Ubah Controller 📜 admin/Post.php menjadi seperti ini:

<?php

class Post extends CI_Controller

{
 public function __construct()
{
parent::__construct();
$this->load->model('article_model');
$this->load->model('auth_model');
if(!$this->auth_model->current_user()){
redirect('auth/login');
}
}

// ... ada kode lain di sini ...

}

Terakhir, ubah Controller 📜 admin/Setting.php menjadi seperti ini:

<?php

class Setting extends CI_Controller

{
public function __construct()
{
parent::__construct();
$this->load->model('auth_model');
if(!$this->auth_model->current_user()){
redirect('auth/login');
}
}

// ... ada kode lain di sini ...

}

Dengan begini, saat kita membuka controller admin, maka kita akan
diminta login terlebih dahulu.

6. Percobaan

Sekarang cobalah melakukan login dengan membuka

localhost/beritacoding/index.php/auth/login

atau

beritacoding.test/index.php/auth/login

Silahkan isi username dengan admin dan password admin.

Jika berhasil login, maka kita akan dialihkan ke halaman admin.

Akan tetapi, jika kita memasukan username dan password yang salah..
maka login akan gagal dan tetap akan berada di halaman login.

Maka kita akan dibawa lagi ke halaman login.

Untuk memastikan halaman admin diproteksi dengan login, coba buka

kembali halaman admin setelah melakukan logout.

beritacoding.test/index.php/admin

Jika halaman admin berhasil terbuka, berarti fitur login belum bekerja
sesui yang diharapkan.

Akan tetapi, jika kita dialihkan ke halaman login. Berarti kita sudah
berhasil membuat halaman login.

7. Menampilkan User yang Sedang Login

Kita ingin menampilkan data user yang sedang login di bagian navbar.
Gimana cara mendapatkan data usernya?

Kita bisa manfaatkan method current_user() dari model Auth_model.

Kita akan banyak mengubah controller admin, karena semua view admin
melakukan load view navbar.

Mari kita kerjakan satu per satu!

1. Mengubah Controller Admin

Ubahlah Controller admin/Dashboard.php , pada method index() tambahkan
data current_user seperti ini:

public function index()

{
$this->load->model('article_model');
$this->load->model('feedback_model');

$data = [
"current_user" => $this->auth_model->current_user(),
"article_count" => $this->article_model->count(),
"feedback_count" => $this->feedback_model->count()
];

$this->load->view('admin/dashboard.php', $data);
}

Berikutnya, ubahlah controller admin/Feedback.php pada method index(),

tambahkan data current_user seperti ini:

public function index()

{
$this->load->model('feedback_model');
$data['feedbacks'] = $this->feedback_model->get();
$data['current_user'] = $this->auth_model->current_user();
if(count($data['feedbacks']) <= 0){
$this->load->view('admin/feedback_empty', $data);
} else {
$this->load->view('admin/feedback_list', $data);
}
}

Berikutnya, tambahkan data current_user pada

controller admin/Post.php seperti ini:

<?php

class Post extends CI_Controller

{
public function __construct()
 {
parent::__construct();
$this->load->model('article_model');
$this->load->model('auth_model');
if(!$this->auth_model->current_user()){
redirect('auth/login');
}
}

public function index()

{
$data['current_user'] = $this->auth_model->current_user();
$data['articles'] = $this->article_model->get();
if(count($data['articles']) <= 0){
$this->load->view('admin/post_empty.php', $data);
} else {
$this->load->view('admin/post_list.php', $data);
}
}

public function new()

{
$data['current_user'] = $this->auth_model->current_user();
$this->load->library('form_validation');
if ($this->input->method() === 'post') {
// Lakukan validasi sebelum menyimpan ke model
$rules = $this->article_model->rules();
$this->form_validation->set_rules($rules);

if($this->form_validation->run() === FALSE){

return $this->load-
>view('admin/post_new_form.php', $data);
}

// generate unique id and slug

$id = uniqid('', true);
$slug = url_title($this->input->post('title'), 'dash',
TRUE) . '-' . $id;

$article = [
'id' => $id,
'title' => $this->input->post('title'),
'slug' => $slug,
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];

$saved = $this->article_model->insert($article);

if ($saved) {
$this->session->set_flashdata('message',
'Article was created');
return redirect('admin/post');
}
}

$this->load->view('admin/post_new_form.php', $data);
 }

public function edit($id = null)

{
$data['current_user'] = $this->auth_model->current_user();
$data['article'] = $this->article_model->find($id);
$this->load->library('form_validation');

if (!$data['article'] || !$id) {
show_404();
}

if ($this->input->method() === 'post') {

// lakukan validasi data seblum simpan ke model
$rules = $this->article_model->rules();
$this->form_validation->set_rules($rules);

if($this->form_validation->run() === FALSE){

return $this->load-
>view('admin/post_edit_form.php', $data );
}

$article = [
'id' => $id,
'title' => $this->input->post('title'),
'content' => $this->input->post('content'),
'draft' => $this->input->post('draft')
];
$updated = $this->article_model->update($article);
if ($updated) {
$this->session->set_flashdata('message',
'Article was updated');
redirect('admin/post');
}
}

$this->load->view('admin/post_edit_form.php', $data);
}

// ... ada kode lain di sini ...

}

Terakhir ubahlah controller admin/Setting.php , pada

method index() tambahkan data current_user seperti ini:

public function index()

{
$data['current_user'] = $this->auth_model->current_user();
$this->load->view('admin/setting', $data);
}

Urusan dengan Controller sudah beres.

2. Mengubah View Side Nav
Berikutnya, ubahlah view views/admin/_partials/side_nav.php menjadi seperti
ini:

<aside class="side-nav">
<div class="brand">
<h2>Berita Coding</h2>
<div style="display: flex; gap: 0.8rem; margin:1rem 0;">
<?php
$avatar = $current_user->avatar ?
base_url('upload/avatar/' . $current_user-
>avatar)
: get_gravatar($current_user->email)
?>
<img src="<?= $avatar ?>" alt="<?=
htmlentities($current_user->name, TRUE) ?>" height="32" width="32">
<div>
<b><?= htmlentities($current_user->name) ?></b>
<small><?= htmlentities($current_user->email) ?
></small>
</div>
</div>
</div>
<nav>
<a href="<?= site_url('admin/dashboard') ?>">Overview</a>
<a href="<?= site_url('admin/post') ?>">Post</a>
<a href="<?= site_url('admin/feedback') ?>">Feedback</a>
<a href="<?= site_url('admin/setting') ?>">Setting</a>
<a href="<?= site_url('auth/logout') ?>">Logout</a>
</nav>
</aside>

Pada view ini, kita menggunakan fungsi get_gravatar() untuk menampilkan

avatar user secara default.

Fungsi ini belum kita buat.

Karena itu, silahkan lanjutkan:

3. Membuat Helper untuk Avatar

Buatlah file baru di dalam 📁application/helpers dengan
nama gravatar_helper.php dan isi sebagai berikut:

<?php
/**
* Get either a Gravatar URL or complete image tag for a specified email address.
*
* @param string $email The email address
* @param string $s Size in pixels, defaults to 80px [ 1 - 2048 ]
 * @param string $d Default imageset to use [ 404 | mp | identicon | monsterid |
wavatar ]
* @param string $r Maximum rating (inclusive) [ g | pg | r | x ]
* @param boole $img True to return a complete IMG tag False for just the URL
* @param array $atts Optional, additional key/value attributes to include in the
IMG tag
* @return String containing either just a URL or a complete image tag
* @source https://gravatar.com/site/implement/img/php/
*/
function get_gravatar( $email, $s = 80, $d = 'mp', $r = 'g', $img = false, $atts
= array() ) {
$url = 'https://www.gravatar.com/avatar/';
$url .= md5( strtolower( trim( $email ) ) );
$url .= "?s=$s&d=$d&r=$r";
if ( $img ) {
$url = '<img src="' . $url . '"';
foreach ( $atts as $key => $val )
$url .= ' ' . $key . '="' . $val . '"';
$url .= ' />';
}
return $url;
}

Fungsi helper ini untuk mengambil gambar dari

website gravatar.com berdasarkan alamat email yang kita berikan pada
parameter.

Agar dapat menggunakan Helper ini, silahkan tambahkan di dalam

autoload.

Buka file 📜 application/config/autoload.php , kemudian pada

bagian $autoload['helper'] tambahkan gravatar.

Sehingga kodenya akan menjadi seperti ini:

$autoload['helper'] = array('url', 'gravatar');

Dengan begitu, kita bisa menggunakan fungsi get_gravatar() di mana saja.

Oke sekarang mari kita coba:

4. Percobaan
Bukalah halaman admin..

Maka akan bisa melihat data user yang sedang login seperti ini:
 Mantap 👍

Apa Selanjutnya?

Kita sudah berhasil membuat fitur login untuk admin.

Namun, sepertinya masih ada yang kurang…

Yap! kita belum membuat fitur untuk setting atau ubah nama dan avatar admin.

Karena itu silahkan lanjutkan ke:

 Tutorial Codeigntier #10: Membuat Fitur Setting

 Tutorial Codeigniter #11: Membuat Fitur Upload Avatar

Jika ada pertanyaan pada tutorial ini, mari sampaikan di kometar!