Sebelum memulai menggunakan Framework Codeigniter, perlu dilakukan konfigurasi pada webserver. Beberapa ekstensi PHP perlu diaktifkan untuk kebutuhan pengembangan Codeigniter 4.
- php-json ekstension untuk bekerja dengan JSON;
- php-mysqlnd native driver untuk MySQL;
- php-xml ekstension untuk bekerja dengan XML;
- php-intl ekstensi untuk membuat aplikasi multibahasa;
- libcurl (opsional), jika ingin pakai Curl
Aktifkan ekstensi tersebut melalui XAMPP Control Panel pada bagian Apache dengan cara klik Config -> PHP.ini seperti berikut.
Lalu pada bagian extention, hilangkan tanda ; (titik koma) pada ekstensi yang akan diaktifkan seperti berikut. Kemudian simpan kembali filenya dan restart Apache web server.
- Codeigniter dapat didownload dari website https://codeigniter.com/download
- Extrak file zip Codeigniter ke direktori htdocs/lab11_php_ci.
- Ubah nama directory framework-4.x.xx menjadi ci4.
- Buka browser dengan alamat http://localhost/lab11_php_ci/ci4/public/ Untuk melakukan instalasi Codeigniter 4 dapat dilakukan dengan dua cara, yaitu cara manual dan menggunakan composer. Pada praktikum ini kita menggunakan cara manual seperti berikut.
Codeigniter 4 menyediakan CLI untuk mempermudah proses development. Untuk mengakses CLI buka terminal/command prompt, lalu arahkan lokasi direktori sesuai dengan direktori kerja project dibuat (C:\xampp\htdocs\Lab11_php_ci\ci4). Kemudian setelah itu jalankan perintah untuk memanggil CLI Codeigniter seperti berikut.
Codeigniter 4 menyediakan fitur debugging untuk memudahkan developer untuk mengetahui pesan error apabila terjadi kesalahan dalam membuat kode program. Secara default fitur ini belum aktif. Ketika terjadi error pada aplikasi akan ditampilkan pesan kesalahan seperti berikut.
Semua jenis error akan ditampilkan sama. Untuk memudahkan mengetahui jenis errornya, maka perlu mengaktifkan mode debugging dengan mengubah nilai konfigurasi pada environment variable CI_ENVIRONMENT menjadi development. Kemudian mengubah nama file env menjadi .env lalu setelah itu buka file tersebut dan ubah nilai variable CI_ENVORNMENT menjadi development. Setelah mengubah nilai konfigurasi pada environment variable CI_ENVIRONMENT menjadi development. maka hapus tanda tagar (#) pada awal baris CI_ENVIRONMENT. Dan yang terakhir, ubah kode pada file app/Controller/Home.php kemudian hilangkan titik koma (;) pada akhir kode seperti berikut.
Maka hasilnya akan terjadi error seperti berikut.
Menambahkan kode di dalam Routes.php seperti berikut.
Untuk mengetahui route yang ditambahkan sudah benar, buka CLI dan jalankan perintah berikut.
Selanjutnya coba akses route yang telah dibuat dengan mengakses alamat url http://localhost:8080/about seperti berikut. Maka hasilnya akan terjadi error, yang artinya file/page tersebut tidak ada. Untuk dapat mengakses halaman tersebut, harus dibuat terlebih dahulu Contoller yang sesuai dengan routing yang dibuat yaitu Contoller Page.
Selanjutnya adalah membuat Controller Page. Buat file baru dengan nama page.php pada direktori Controller kemudian isi kodenya seperti berikut.
Secara default fitur autoroute pada Codeiginiter sudah aktif. Untuk mengubah status autoroute dapat mengubah nilai variabelnya. Untuk menonaktifkan ubah nilai true menjadi false.
Kemudian tambahkan method baru pada Controller Page seperti berikut.
Method ini belum ada pada routing, sehingga cara mengaksesnya dengan menggunakan alamat: http://localhost:8080/page/tos
Selanjutnya adalah membuat view untuk tampilan web agar lebih menarik. Buat file baru dengan nama about.php pada direktori view (app/view/about.php) kemudian isi kodenya seperti berikut.
Kemudian ubah method about pada class Controller Page menjadi seperti berikut.
Maka hasilnya akan seperti berikut.
Pada dasarnya layout web dengan css dapat diimplementasikan dengan mudah pada Codeigniter. Yang perlu diketahui adalah pada Codeigniter 4 file yang menyimpan asset css dan javascript terletak pada direktori public. Buat file css pada direktori public dengan nama style.css seperti berikut.
Kemudian buat folder template pada direktori view ke mudian buat file header.php dan footer.php seperti berikut.
Maka hasilnya seperti berikut.
Lengkapi kode program untuk menu lainnya yang ada pada Controller Page, sehingga semua link pada navigasi header dapat menampilkan tampilan dengan layout yang sama.
Untuk memulai membuat aplikasi CRUD sederhana, yang perlu disiapkan adalah database server menggunakan MySQL. Pastikan MySQL Server sudah dapat dijalankan melalui XAMPP seperti berikut.
Membuat database kemudian membuat Tabel dan masukkan kode pada database query seperti berikut.
Selanjutnya membuat konfigurasi untuk menghubungkan dengan database server. Kemudian melakukan konfigurasi dengan cara mengubah beberapa kode pada file htdocs\lab11_php_ci\ci4\.env. Lalu cari pada line DATABASE dan hilangkan tanda pagar (#) didepan seperti berikut ini.
Selanjutnya adalah membuat Model untuk memproses data Artikel. Buat file baru pada direktori app/Models dengan nama ArtikelModel.php lalu masukkan kode seperti berikut.
Buat Controller baru dengan nama Artikel.php pada direktori app/Controllers lalu masukkan kode seperti berikut.
Buat folder baru dengan nama artikel pada direktori app/views, kemudian buat file baru dengan nama index.php seperti berikut.
Selanjutnya buka browser kembali, dengan mengakses url http://localhost:8080/artikel maka hasilnya akan seperti berikut.
Terlihat belum ada data yang diampilkan. Kemudian coba tambahkan beberapa data pada database query agar dapat ditampilkan datanya seperti berikut.
Lalu refresh kembali browser, sehingga akan ditampilkan hasilnya seperti berikut.
Tampilan pada saat judul berita di klik maka akan diarahkan ke halaman yang berbeda. Tambahkan fungsi baru pada Controller Artikel dengan nama view() seperti berikut.
Buat view baru untuk halaman detail dengan nama app/views/artikel/detail.php seperti berikut.
Buka kembali file app/config/Routes.php, kemudian tambahkan routing untuk artikel detail maka hasilnya akan seperti berikut.
Menu admin adalah untuk proses CRUD data artikel. Buat method baru pada Controller Artikel dengan nama admin_index() seperti berikut.
Selanjutnya buat view untuk tampilan admin dengan nama admin_index.php seperti berikut.
Setelah itu tambahkan routing untuk menu admin seperti berikut.
Setelah itu buat template header dan footer baru untuk Halaman Admin. Kemudian buat file baru dengan nama admin_header.php pada direktori app/view/template seperti berikut.
Lalu buat file baru lagi dengan nama admin_footer.php pada direktori app/view/template seperti berikut.
Dan yang terakhir buat file baru lagi dengan nama admin.css pada direktori ci4/public untuk memperindah tampilan Halaman Admin seperti berikut.
Kemudian akses menu admin dengan url http://localhost:8080/admin/artikel seperti berikut.
Tambahkan fungsi/method baru pada Controller Artikel dengan nama add() seperti berikut.
Kemudian buat view untuk form tambah dengan nama form_add.php seperti berikut.
Setelah itu, lalu klik Tambah Artikel pada menu Halaman Admin Maka hasilnya akan seperti berikut.
Tambahkan fungsi/method baru pada Controller Artikel dengan nama edit() seperti berikut.
Kemudian buat view untuk form tambah dengan nama form_edit.php
Setelah itu, lalu klik Ubah pada salah satu judul artikel, maka hasilnya akan seperti berikut.
Tambahkan fungsi/method baru pada Controller Artikel dengan nama delete() seperti berikut.
Untuk memulai membuat modul Login, yang perlu dipersiapkan adalah database server menggunakan MySQL. Pastikan MySQL Server sudah dapat dijalankan melalui XAMPP seperti berikut.
Membuat tabel user pada database lab_ci4 seperti berikut.
Selanjutnya adalah membuat Model untuk memproses data Login. Buat file baru pada direktori app/Models dengan nama UserModel.php dan masukkan kode seperti berikut.
Buat Controller baru dengan nama User.php pada direktori app/Controllers. Kemudian tambahkan method index() untuk menampilkan daftar user, dan method login() untuk proses login dan masukkan kode seperti berikut.
Buat folder baru dengan nama user pada direktori app/views, kemudian buat file baru dengan nama login.php dan masukkan kode seperti berikut.
Database seeder digunakan untuk membuat data dummy. Untuk keperluan ujicoba modul login, kita perlu memasukkan data user dan password kedalam database. Untuk itu buat database seeder untuk tabel user. Buka CLI, kemudian ketik perintah berikut:
Selanjutnya, buka file UserSeeder.php yang berada di lokasi direktori /app/Database/Seeds/UserSeeder.php kemudian isi dengan kode berikut:
Selanjutnya buka kembali CLI dan ketik perintah berikut:
Selanjutnya buka url http://localhost:8080/user/login seperti berikut:
Namun sebelum mengakses urlnya, pastikan untuk menjalankan perintah php spark serve terlebih dahulu untuk menjalankan program ci4 di port 8080 dengan cara membuka CLI kemudian ketik perintah berikut:
Selanjutnya membuat filter untuk halaman admin. Buat file baru dengan nama Auth.php pada direktori app/Filters dan masukkan kode seperti berikut.
Selanjutnya buka file app/Config/Filters.php tambahkan kode berikut:
Selanjutnya buka file app/Config/Routes.php dan sesuaikan kodenya seperti berikut.
Tambahkan method logout pada Controller User dan masukkan kode seperti berikut:
Menambahkan tombol Logout pada menu header admin dengan cara ke direktori app\view\template lalu buka file admin_header.php dan masukkan kode seperti berikut.
Selanjutnya, tambahkan route logout dengan cara ke direktori app\Config\Routes.php dan masukkan kode seperti berikut.
Setelah semuanya selesai, maka lakukan percobaan untuk mengakses menu admin dengan cara buka url dengan alamat http://localhost:8080/admin/artikel ketika alamat tersebut diakses, maka akan muncul halaman login seperti berikut.
Berikut adalah halaman utama (menu admin) yang sudah ditambahkan tombol Logout untuk keluar dari menu ini dan kembali ke menu Login.
Hal pertama yang dilakukan adalah menjalankan Apache & MySQL server di XAMPP seperti berikut.
Pagination merupakan proses yang digunakan untuk membatasi tampilan yang panjang dari data yang banyak pada sebuah website. Fungsi pagination adalah memecah tampilan menjadi beberapa halaman tergantung banyaknya data yang akan ditampilkan pada setiap halaman. Untuk membuat pagination, buka Kembali Controller Artikel pada direktori (htdocs\Lab11_php_ci\ci4\Controllers\Artikel.php), kemudian modifikasi kode pada method admin_index seperti berikut.
Kemudian buka file views/artikel/admin_index.php dan tambahkan kode seperti berikut dibawah deklarasi tabel data.
Setelah itu untuk melihat hasilnya, buka kembali menu Dashboard yang berisi daftar artikel maka hasilnya akan seperti berikut.
Pencarian data digunakan untuk memfilter data. Untuk membuat pencarian data, buka kembali Controller Artikel pada direktori (htdocs\Lab11_php_ci\ci4\Controllers\Artikel.php), pada method admin_index dan ubah kodenya seperti berikut.
Kemudian buka kembali file views/artikel/admin_index.php dan tambahkan form pencarian sebelum deklarasi tabel seperti berikut:
Dan pada link pager ubah seperti berikut.
Selanjutnya ujicoba dengan membuka kembali halaman admin artikel, masukkan kata kunci tertentu pada form pencarian seperti berikut.
Menambahkan fungsi unggah gambar pada tambah artikel. Buka kembali Controller Artikel pada direktori (htdocs\Lab11_php_ci\ci4\Controllers\Artikel.php), sesuaikan kode pada method add seperti berikut.
Kemudian pada file views/artikel/form_add.php tambahkan field input, lalu sesuaikan tag form dengan menambahkan ecrypt type seperti berikut.
Setelah itu untuk mengetahui hasilnya, ujicoba file upload dengan mengakses menu tambah artikel seperti berikut.
Berikut adalah hasil dari artikel yang diupload dengan gambar.
