Tutorial Codeigniter #1: Pengenalan Codeigniter untuk Pemula PHP memiliki banyak framework, saking banyaknya kadang kita dibuat galau untuk memilih framework. Milih framework saja masih bingung… …apalagi milih jodoh . Serius! Banyak yang masih galau memilih framework. Bahkan menghabiskan waktunya untuk mencari perbandingan antar framework. Daripada mebanding-bandingkan, sebaiknya kita mulai belajar salah satu framework. Agar nanti kita bisa menyimpulkan sendiri, mana framework yang disukai dan cocok untuk kita gunakan. Kalau tidak cocok… ya tinggal cari dan pelajari framework yang lain. Sia-sia donk, sudah susah belajar tapi tidak cocok. Menurut saya: Tidak ada yang namanya sia-sia dalam belajar. Karena kita akan mendapatkan ilmu dan pengalaman. Kalaupun ilmunya belum bisa diamalkan, setidaknya kita bisa mengajari orang lain. Oke, lanjut… Ngomong-ngomong, apa itu framework? Framework dalam bahasa indonesia artinya kerangka kerja. Kerangka kerja untuk membuat sesuatu (web). Perumpamaannya mungkin bisa seperti itu. Dengan menggunakan framework, pembuatan web akan lebih cepat dibandingkan PHP Native. Karena kita tidak perlu membuat semuanya dari nol. Framework sudah menyediakan fungsi, library, dan peralatan lainnya yang kita butuhkan. Salah satu framework yang cukup populer di Indonesia adalah Codeigniter.

Apa itu Codeigniter? Codeigniter merupakan sebuah framework PHP yang menggunakan pola desain (design pattern) MVC (Model View Controller)1. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi stabil terakhir—saat tulisan ini dibuat—adalah versi 3.1.9. Website Codeigniter Sedangkan Codeigniter 4 masih dalam tahap pengembangan. CI 4 adalah generasi penerus dari CI 3 yang konsepnya lebih modern 2. Codeigniter cocok digunakan untuk membuat aplikasi web seperti:  Portal Berita;  Sistem Informasi;  Web Startup;  Profile Company;  eComerce;  Blog;  dan sebagainya. Kelebihan Codeigniter Ada beberapa kelebihan CodeIgniter (CI) dibandingkan dengan Framework PHP lain, 3  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_guideyang berisi dokumentasi yang lengkap. Mudah dipelajari pemula: Bagi pemula, CI sangat mudah dipelajari. Karena CI tidak terlalu bergantung pada tool tambahan seperti composer, ORM, Template Engine, dll.

Contoh Website yang dikembangkan dengan Codeigniter Salah satu website indonesia yang masih menggunakan adalah projects.co.id.

Membuat Project Codeigniter Langkah-langkah yang harus dilakukan untuk membuat project CI: 1. Download Codeigniter; 2. Ekstrak CI ke htdocs. Silahkan buka website Codeigniter untuk mendownload.

CI

hingga

saat

ini

Kita akan mendapatkan sebuah file zip CodeIgniter-3.1.9.zip, ekstrak file tersebut ke dalam c:\xampp\htdocs (XAMPP) atau /var/www/html (di Linux). Setelah itu, ubah nama CodeIgniter-3.1.9 menjadi tokobuah. Kenapa namanya tokobuah? Karena pada project ini, kita akan membuat sebuah website yang menjual buah. Sekarang coba buka: http://localhost/tokobuah/

Selamat Codeigniter sudah berhasil diinstal. Selanjutnya, silahkan buka dengan teks editor. Lalu coba untuk mengenali struktur direktorinya. Saya membukanya dengan teks editor VS Code:

Mengenal Struktur Direktori Codeigniter Ini adalah struktur direktori Codeigniter:

Tedapat dua direktori penting di dalam CI: application dan system. Selain itu terdapat juga direktori user_guide dan beberapa file. Berikut ini penjelasannya: 1. application berisi semua kode aplikasi. Di dalam direktori inilah kita akan menulis semua kode aplikasi kita.

2. system berisi kode-kode inti dari Codeiniter. Jangan mengubah apapun di dalam direktori ini. Jika kita ingin upgrade versi, kita cukup me-replace direktori ini dengan yang baru. 3. tests berisi kode untuk melakukan unit testing. 4. user_guide berisi dokumentasi codeigniter. Kita bisa menghapus direktori ini saat web sudah jadi. 5. .editor_config berisi konfigurasi untuk teks editor. 6. .gitignore berisi daftar file dan folder yang akan diabaikan oleh Git. 7. comspoer.json adalah file yang berisi keterangan project dan keterangan library yang digunakan. File ini dibutuhkan oleh composer. 8. contributing.md adalah file yang berisi penjelasan cara berkontribusi di proyek CI. Kita bisa menghapus file ini, apabila web sudah jadi. 9. license.txt adalah file yang berisi keterangan lisensi dari CI. 10. 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. 11. index.php adalah file utama dari CI. File yang akan dibuka pertamakali saat kita mengakses web. Selanjutnya silahkan buka direktori application dan perhatikan direktori yang ada di sana.  cache berisi cache dari aplikasi.  config berisi konfigurasi aplikasi. o autoload.php tempat kita mendefinisikan autoload; o config.php konfigurasi aplikasi; o constants.php berisi konstanta; o database.php konfigurasi database aplikasi; o doctypes.php berisi definisi untuk doctype HTML; o foreign_chars.php berisi karakter dan simbol; o hooks.php berisi konfigurasi hooks; o index.html untuk mencegah direct access; o memcached.php untuk berisi konfigurasi untuk memcached; o migration.php konfigurasi untuk migrasi; o mimes.php berisi definisi tipe file; o profiler.php konfigurasi untuk profiler; o routers.php tempat kita menulis route aplikasi; o smileys.php berisi kode untuk emoji; o 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.

Selamat datang di Codeigniter Ketika membuka http://localhost/tokobuah/, kita akan mendapatkan tampilan Welcome to Codeigniter. Ini adalah tampilan awal yang akan kita lihat saat baru pertama instal CI.

Sebagai pemanasan, cobalah untuk mengubah teks Welcome to CodeIgniter!menjadi Selamat datang di Toko Buah Petanikode. Caranya: Buka file application/views/welcome_message.php . Lalu ubah teks pada baris 71.

…dan sekarang coba reload kembali halaman http://localhost/tokobuah/.

Selamat Ini adalah perubahan pertama yang kamu buat. Penjelasan: File welcome_message.php yang berada di dalam direktori viewsmerupakan file yang bertanggung jawab untuk menampilkan sesuatu. Di sini kita bisa menuliskan kode untuk template dan CSS. File welcome_message.php di-load oleh sebuah controller application/controllers/welcome.php dengan kode: public function index() { $this->load->view('welcome_message'); }

Controller welcome adalah controller default yang digunakan. Hal ini bisa kita lihat pada konfigurasi routers di application/config/routers.php.

Tutorial Codeigniter #2: MVC dan Routing, Konsep dasar CI yang Harus Kamu Pahami Pada tutorial sebelumnya, kita sudah belajar cara menginstal CI dan mengenal struktur direktori dari CI. Sekarang kita lanjut belajar tentang routing dan MVC. Rencananya, kita akan membuat aplikasi online shop (olshop). Namun, sebelum kita mulai membuat aplikasi dengan CI, ada baiknya berkenalan dulu dengan kosep dasar CI. Codeigniter adalah frameowrk yang menggunakan konsep MVC. Apa itu MVC? Mari kita bahas… Mengenal Konsep MVC pada Codeigniter

MVC (Model, View, Controller) adalah sebuah pola desain (design pattern)arsitektur pengembangan aplikasi yang memisahkan dan mengelompokan beberapa kode sesuai degan fungsinya.1 MVC membagi aplikasi ke dalam tiga bagian fungsional: model, view, dan controller.  Model adalah kode-kode untuk model bisnis dan data. biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.  View merupakan bagian yang menangani presentation logic. berisi kode-kode untuk tampilan.  Controller merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

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.php akan 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. Controller akan bertanggunag jawab untuk mengambil data dari Modeldan merendernya ke dalam View dengan menggunakan library, plugin, dan helper yang ada. 7. Hasil render (view) dikirim ke pengguna dan disimpan dalam cache, apabila fitur cache aktif; 8. Selesai.

Memahami Router pada Codeigniter Router pada Codeigniter bertugas untuk menentukan controller dan method/fungsi yang akan dieksekusi. 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.

Fungsi index() adalah fungsi yang akan dieksekusi saat kita mengaksescontroller welcome. Sekarang coba buka: http://localhost/tokobuah/index.php/welcome/index, maka kita akan mendapatkan hal yang sama seperti membuka http://localhost/tokobuah/.

Membuat Beberapa Router Sebagai latihan, coba tambahkan dalam Controller Welcome dengan method ini:

route /about/ dan /contact/ di

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

About Us

Ini adalah halaman about

views/contact.php

Contact Us

Ini adalah halaman Contact

Route sudah kita tambahkan. Sekarang coba buka:  http://localhost/tokobuah/index.php/welcome/about/  dan http://localhost/tokobuah/index.php/welcome/contact/ Hasilnya:

Apabila kita membuka http://localhost/tokobuah/index.php/contact, terjadi error 404 not found.

maka

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.

akan

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. Apa Selanjutnya? Kita sudah belajar tentang MVC dan Route. Ini memang masih dasar. Selanjutnya nanti kita akan banyak menggunakannya.

Tutorial Codeigniter #3: Cara Menggunakan Bootstrap pada Codeigniter Bootstrap merupakan CSS framework yang populer dalam pengembangan web. Bahkan template Petanikode juga dibuat dengan Bootstrap. Pada tutorial ini, kita tidak akan membahas bootstrap secara detail. Karena saya sudah membuat tutorial bootstrap di artikel yang berbeda. Apabila kamu belum paham bootstrap… …tenang, ikuti saja tutorial ini sambil belajar. Nanti juga paham sendiri, hehehe. Lanjut… Rencananya pada aplikasi yang akan kita buat, kita akan menggunakan template SB Admin. Kenapa SB Admin? Karena sederhana, gartis, menggunkan Bootstrap 4, dan mudah diimplementasikan pada Codeigniter.

Tampilan Template SB Admin

Langkah-langkah yang harus dilakukan untuk menggunakan bootstrap (template SB Admin) pada Codeigniter: 1. 2. 3. 4. 5. 6. 7. 8.

Konfigurasi Codeigniter; Download SB Admin; Ekstrak SB Admin; Copy file assets yang dibutuhkan; Membuat Template; Membuat partial template; Menggunakan partial pada template; Selesai…

Kedengarannya mdudah, namun dalam prakteknya, kita akan mendapatkan banyak kendala dan masalah. Karena itu, pastikan kamu mengikuti tutorial ini dengan seksama. 1. Konfigurasi Awal Codeigniter Sebelum memulai membuat template, silahkan lakukan konfigurasi terlebih dahulu… Konfigurasi Base URL

Base URL berfungsi untuk menentukan alamat atau URL yang akan digunakan oleh web. Saat mengembangkan web, kita akan menggunakan Base URL berikut: http://localhost/tokobuah

Ini adalah alamat yang bisa kita akses dari localhost. Saat web sudah jadi, nanti ubah alamat tersebut ke alamat domain.

Misal: https://www.petanikode.com

Cara mengatur Base URL, silahkan buka file config/config.php. Lalu isi bagian $config['base_url'] = ''; menjadi seperti ini:

Konfigurasi Autoload

Berikutnya kita harus meload sebuah helper ke memori secara otomatis melalui autoload.php. Helper adalah fungsi-fungsi Codeigniter yang akan membantu kita dalam berbagai hal, seperti: membuat form, mengakses URL, dll. Salah satu helper yang kita butuhkan dalam pembuatan template adalah helper url. Helper url berisi fungsi-fungsi untuk mengakses URL seperti base_url(), site_url(), $this->uri, dll. Cara mengaktifkan helper url: Pertama buka file config/autoload.php, lalu cari $autoload['helper']. Tambahkan url, sehingga menjadi seperti ini:

Membuat Konstanta

Setelah itu, buat konstanta SITE_NAME untuk menyimpan nama web. Konstanta ini nanti kita perlukan untuk mengambil judul web pada template. Bila kamu belum paham tentang konstanta di PHP, silahkan baca: Apa itu Konstanta? Lanjut… Silahkan buka file config/constants.php, lalu tambahkan kode berikut… /* |-------------------------------------------------------------------------| Constants for Site |-------------------------------------------------------------------------| */ define('SITE_NAME', 'Tokobuah');

…di bagian akhir:

2. Download dan Ekstrak SB Admin Silahkan download SB Admin dari websitenya.

Setelah itu, kita akan mendapatkan sebuah file ZIP. Ekstrak file tersebut sehingga kita punya file SB admin seperti ini:

Ini adalah file template yang akan kita gunakan pada proyek Codeigniter. 3. Menambahkan SB Admin di Codeigniter Tugas kita berikutnya adalah menambahkan file SB Admin ke dalam proyek Codeigniter. Caranya: Kita tinggal copy/paste file dan folder yang dibutuhkan. Berikut ini folder yang harus kita copy: 1. Folder css

2. Folder js 3. Folder vendor –rename menjadi–> assets Untuk folder vendor, kita akan ubah namanya menjadi assets agar tidak bercampur dengan folder vendor dari composer. Folder vendor berisi library front-end dari pihak ketiga, seperti: Bootstrap, Font awesome untuk ikon, chart.js, datatables, dan jquery. Folder sass dapat juga kita copy apabila kita ingin memodifikasi dan menggunakan sass pada project. Namun, karena kita hanya akan memakai saja. Kita cukup copy tiga folder yang tadi.

Setelah itu, kita bisa mulai membuat template untuk tampilan admin. 4. Membuat dan Modifikasi Template Buat sebuah direktori baru di dalam direktori views dengan nama admin. Lalu di dalamnya berisi kode php dengan nama overview.php.

File overview.php akan menjadi template untuk halaman home admin. Isi dari file overview.php akan kita ambil dari file index.html SB Admin. Silahkan buka kembali template SB Admin, ambil semua kode yang ada di dalam file index.html lalu copy ke overview.php. Sehingga file overview.php akan terisi seperti ini: <meta <meta <meta <meta <meta

charset="utf-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> name="description" content=""> name="author" content="">

<script src="vendor/jquery/jquery.min.js"> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"> <script src="vendor/jquery-easing/jquery.easing.min.js"> <script src="vendor/chart.js/Chart.min.js"> <script src="vendor/datatables/jquery.dataTables.js"> <script src="vendor/datatables/dataTables.bootstrap4.js"> <script src="js/sb-admin.min.js"> <script src="js/demo/datatables-demo.js"> <script src="js/demo/chart-area-demo.js">

Setelah itu, buat sebuah controller baru dengan nama Overview.php di dalam direktori controllers/admin.

Perhatikan nama file untuk controller, di depannya selalu diawali dengan huruf besar atau kapital. Isi controller Overview.php dengan kode berukut: load->view("admin/overview"); } }

Setelah itu, buat sebuah route baru untuk controller Overview. Buka file config/routes.php, lalu tambahkan kode ini: $route['admin'] = 'admin/overview';

Setelah itu coba buka http://localhost/tokobuah/index.php/admin/, maka kita akan mendapatkan tampilan seperti ini:

Kenapa tampilannya berantakan? Ini karena CSS dan Javascript belum berhasil di-load alias Not Found. Coba saja buka view source dari halamannya.

Kalau kita klik link CSS dan Javascriptnya, maka akan Not Found. Kenapa bisa begini? Ini karena alamat yang diberikan pada link tersebut belum benar. Masih mengarah ke /vendor/.... Kita harus mengubahnya agar mengarah ke /assets/..., karena tadi kita sudah mengubah nama vendor menjadi assets. Mari kita perbaiki… Buka file views/overview.php lalu cari link CSS dan javascriptnya.

Setelah itu ubah link-nya dengan link yang benar. Gunakan fungsi base_url()untuk menyisipkan link CSS dan Javascript agar konsisten. Dari kode ini:

<script src="vendor/jquery/jquery.min.js"> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"> <script src="vendor/jquery-easing/jquery.easing.min.js"> <script src="vendor/chart.js/Chart.min.js"> <script src="vendor/datatables/jquery.dataTables.js"> <script src="vendor/datatables/dataTables.bootstrap4.js"> <script src="js/sb-admin.min.js"> <script src="js/demo/datatables-demo.js"> <script src="js/demo/chart-area-demo.js">

Ubah menjadi seperti ini: <script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src="">

Sehingga kode lengkap untuk overview.php akan menjadi seperti ini: <meta <meta <meta <meta <meta

charset="utf-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> name="description" content=""> name="author" content="">

<script src=""> <script src="">



<script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src=""> <script src="">

Setelah itu, coba buka kembali http://localhost/tokobuah/index.php/admin/, maka kita akan mendapatkan tampilan seperti ini:

Woho… keren

Apa Selanjutnya? Tugas kita masih belum selesai. Karena kita baru hanya menambahkan Bootstrap dan membuat template awalnya. Selanjutnya kita akan membuat partials untuk menata template agar lebih efektif dan mudah digunakan. Tutorial Codeigniter #4: Teknik Membuat Template Admin yang Efektif Pada tutorial sebelumnya, kita sudah berhasil menambahkan Bootstrap pada proyek CI. Namun, masih ada yang kurang… Template masih dibuat dalam satu file saja. Ini nanti akan bermasalah ketika kita membuat halaman baru. Permsalahannya: Kita akan menulis kode yang sama berulang-ulang dalam file template yang berbeda. Bagaimana nanti kalau ada perubahan? Misal, perubahan link pada navbar. Maka kita harus mengubah semua file template yang kita buat satu per satu. Tentu ini kurang efektif, karena kita akan menghabiskan banyak waktu dan tentaga untuk mengubahnya. Salah satu solusi dari permasalahan ini yaitu dengan menggunakan partials. Dengan partials kita akan membagi template menjadi bagian-bagian kecil yang dapat digunakan kembali. Jika kamu pernah belajar Laravel, kamu mungkin pernah mendengar fungsi yield yang memungkinkan kita untuk mengimpor bagian template yang lain. Fungsi yield di Laravel sering digunakan untuk membuat layout.1 Lalu di Codeigniter, apakah ada fungsi yield? Tidak, di Codeigniter tidak ada fungsi yield. Namun, kita bisa menggunakan fungsi $this>load->view() sebagai penggantinya. Karena fungsinya hampir sama dengan yield, yaitu untuk me-load sebuah view.2

Fungsi $this->load->view() ini, nanti akan kita gunakan untuk me-load partials ke dalam template. Tapi sebelum itu, kita harus membuat dulu partial-nya.

Membuat Partial Template

Partial merupakan teknik untuk membagi template menjadi bagian-bagian kecil agar mudah digunakan.

Sebenarnya teknik ini pertama saya dengar saat membuat template Hugo… …dan rencananya akan saya coba juga terapkan untuk template aplikasi Codeigniter. Sekarang coba buka file index.html pada SB Admin dan perhatikan, apa saja partial yang bisa kita buat dari sana?

Berdasarkan gambar di atas, berikut ini partial yang bisa kita buat:  head.php untuk meinyimpan isi dari tag ;  navbar.php untuk menyimpan kode navbar;  sidebar.php untuk menyimpan kode menu bagian samping (sidebar);  breadcrumb.php untuk menyimpan kode link breadcrumb;  scrolltop.php untuk menyimpan kode tombol scrolltop;  footer.php untuk menyimpan kode footer;  modal.php untuk menyimpan kode modal;  js.php untuk meload javascript. Mari kita buat satu per satu…

Tapi sebelum itu, silahkan buat dulu direktori baru bernama _partials di dalam views/admin/.

Apakah nama direktorinya harus _partials? Tidak harus, karena ada juga membarikan nama includes atau _includes. Nama _partials menurut saya lebih jelas dan menggambarkan isinya. Kenapa ada garis bawah (underscore) di depannya? Ini untuk memudahkan dalam membedakan view dan partial. View akan kita load dari Controller, sedangkan partial akan kita load dari view. Biasanya dalam penulisan kode (OOP), sesuatu yang bersifat private dan lokal kadang ditulis dengan garis bawah di depannya. Oke, lanjut… Berikutnya kita akan membuat semua partial yang telah kita tentukan di atas. Partial head.php

Partial ini berisi kode-kode untuk tag . Kita bisa copy file views/admin/overview.php mulai dari tag sampai penutupnya . Sehinggak kode untuk partial head.php akan menjadi seperti ini:

dari

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Perhatikan kode pada tag