Modul 10 Praktikum Rekweb

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-10:

CodeIgniter 4 (dasar 2)

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 


Modul 10

CodeIgniter 4 (dasar 2)

 

Tujuan :

  1. Menunjang mata kuliah Rekayasa Web
  2. Mengetahui, mengenal dan memahami Framework Pengembangan Web (PHP)
  3. Mengetahui dan memahami Pengembangan Web dengan Framework PHP.

Jenis Praktikum :

  1. Eksplorasi pemrograman web dengan PHP, MySQL dan Framework CodeIgniter

Persyaratan :

  1. Praktikan harus menyiapkan terminal (Windows) perintah.
  2. Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.
  3. Praktikan harus menyiapkan browser (Chrome, Firefox) dan Server PHP.
  4. Memahami HTML, CSS, Javascript, PHP, CI tingkat dasar 2.

Perangkat praktikum :

  1. PC / Notebook

Materi

Modul ini membahas

 

aspek routing dari CI 4, struktur aplikasi, helper dan pustaka.

Struktur Aplikasi

Untuk mendapatkan hasil maksimal dari CI, Anda perlu memahami bagaimana struktur aplikasi dibentuk secara default, dan apa yang dapat Anda ubah untuk memenuhi kebutuhan aplikasi Anda. Struktur direktori CI 4 adalah seperti Gambar 1 di bawah.

Direktori Default

Instalasi CI yang masih baru, secara default memiliki enam direktori (folder): /app, /system, /public, /writable, /test dan mungkin /docs. Setiap direktori ini memiliki peranan masing-masing.

Gambar 1. Struktur aplikasi CI 4

Direktori /app adalah tempat kode aplikasi disimpan. Direktori ini memiliki beberapa sub direktori seperti tampak pada Tabel 1:

Tabel 1. Sub Direktori dalam /app

Sub Direktori

Peranan/Berisi

/Config

Menyimpan file-file konfigurasi

/Controllers

Berisi kelas kontroler yang menentukan jalannnya program

/Database

Menyimpan migrasi basis data dan file-file seed

/Filters

Menyimpan kelas filter yang akan dijalankan sebelum dan sesudah kontroler

/Helpers

Helpers menyimpan koleksi fungsi aplikasi tunggal

/Language

Aplikasi yang mendukung banyak bahasa membaca string berbagai bahasa dari sisi

/Libraries

Menyimpan kelas yang berguna yang tidak sesuai kategori lain

/Models

Menyimpan model yang digunakan basis data yang mewakili entitas bisnis.

/ThirdParty

Pustaka pihak ketiga yang digunakan dalam aplikasi

/Views

Menyimpan Views yang merangkai HTML yang ditampilkan ke pengguna.

 

Karena direktori /app sudah memakai inamspace, kita bisa bebas mengubah struktur direktori ini untuk menyesuaikan kebutuhan aplikasi. Misalkan aplikasi ingin menggunakan pola Repository dan Model Entity untuk datanya maka kita bisa mengganti nama /Models dengan /Repositories dan membuat direktori baru: /Entities.

Jika kita mengganti nama direktori /Controllers, kita tidak bisa menggunakan metode routing ke kontroler dan harus mendefinisikan semua route di file Routes.php. Semua berkas di direktori /app selalu menggunakan namespace App, tetapi bisa diubah dari app/Config/Constants.php.

Selanjutnya direktori /vendor atau /system menyimpan file-file yang membentuk framework itu sendiri. Sementara kita memiliki keleluasaan dalam menggunakan direktori aplikasi, maka file-file dalam direktori /sytem ini seharusnya tidak boleh diubah. Sebagai gantinya, kita bisa memiliki kelas baru dengan mewarisi kelas-kelas sistem tersebut. Semua file sistem memiliki namespace CodeIgniter.

Direktori /public menyimpan bagian yang bisa diakses browser di aplikasi kita, untuk mencegah akses langsung ke kode sumber. Direktori ini menyimpan file .htaccess, index.php dan aset aplikasi lain yang kita tambahkan seperti gambar, video, CSS, JS. Folder /public ini dimaksudkan untuk menjadi ”web root” dari situs dan server web dikonfigurasi untuk mengarah ke direktori ini: secara default, kita menyertakan /public dalam URL.

Kemudian direktori /writable. Direktori ini menyimpan beberapa direktori yang mungkin perlu untuk ditulis/dibuat pada saat aplikasi berjalan. Ini mencakup juga direktori untuk menyimpan cache, log dan unggahan yang dikirm pengguna. Anda harus menambahkan direktori lain yang perlu untuk dipkai aplikasi. Ini memungkinkan anda untuk menjaga direktori penting lain yang tidak boleh ditulisi menyangkut masalah keamanan.

Adapun direktori /tests (Gambar 2) dibat untuk menyimpan file pengujian. Sub direktori /_support menyimpan berbagai kelas tiruan dan utilitas lain yang dapat digunakan selama pengujian. Direktori ini hanya untuk pengujian dan tidak perlu ditransfer ke server tujuan (produksi).

Gambar 2. Direktori /test

Terakhir direktori /docs, jika ada, menyimpan salinan lokal CI 4 sebagai dokumentasi panduan pengguna CI 4.

Itulah direktori default instalasi CI 4 dan jika anda merelokasi direktori utama, anda dapat mengubah pengaturan konfigurasi di app/Config/Paths. Selanjutnya bisa dilihat di Managing your Applications.

URL CodeIgniter

Secara default, URL di CI dirancang agar ramah mesin pencari dan ramah pengguna. Ketimbang menggunakan pendekatan query-string ke URL yang sinonim dengan sistem dinamik, CI menggunakan pendekatan berbasis segmen (segment-based), seperti:

example.com/news/article/my_article

Segmen dalam URL (dalam rangka mengikuti pola MVC) berbentuk:

example.com/class/method/ID

Segemen pertama (class dalam contoh di atas) menunjukkan kelas kontroler yang akan dipanggil.

Segmen kedua (method dalam contoh di atas) menunjukkan metode kelas yang akan dipanggil.

Segemen ketiga dan selanjutnya menunjukkan ID dan suatu variabel yang akan dikirim sebagai parameter ke kontroler.

Pustaka URI dan Helper URI berisi fungsi-fungsi yang mempermudah menangani data URI. Di samping itu, URL di CI bisa dipetakan kembali ke URI Routing untuk fleksibilitas.

Menghapus public di URL CI 4

Secara default, direktori public yang menjadi tujuan server memanggil kontroler sehingga apabila anda menggunakan server Apache misalnya, anda harus selalu menyertakan /public di URL seperti:

localhost/ci-news/public/pages/view

di mana pages menunjukkan kontroler Pages dan view adalah metode (fungai) di kelas Pages yang dipanggil. Kita bisa menanggalkan /public di URL tersebut sehingga akan menjadi:

localhost/ci-news/pages/view

Caranya adalah:

  • Copy file index.php dan .htaccess dari folder /public ke root.
  • Ganti nama index.php dan .htaccess di folder /public dengan nama lain, terserah anda. Ini digunakan untuk cadangan dalam eksperimen di praktikum ini.
  • Ganti isi .htaccess di root menjadi sebagai berikut:

DirectoryIndex index.php

RewriteEngine On

RewriteCond %{SCRIPT_FILENAME} !-d

RewriteCond %{SCRIPT_FILENAME} !-f

RewriteRule ^ index.php [L]

RewriteRule !^(public/|index\.php) [NC,F]

  • Cari $pathsPath = realpath(FCPATH . '../app/Config/Paths.php');
  • Ubah menjadi $pathsPath = realpath(FCPATH . 'app/Config/Paths.php’);

Sekarang coba jalankan aplikasi anda pada praktikum sebelum ini tanpa ada /public di URLnya.

Fungsi Helper

Seperti namanya, helper membantu kita untuk mengerjakan tugas tertentu. Setiap file helper berisi kumpulan fungsi untuk kategori tertentu. Misal helpers urlmembantu membuat link. Helper form membantu membuat elemen form. Helper text untuk memformat teks. Helper cookie untuk membuat dan membaca cookie dan helper file untuk menangani file.

Helper di CI tidak ditulis dalam bentuk objek (Object-Oriented format) karena memang berupa fungsi prosedural yang sederhana. Setiap fungsi helper melakukan tugas yang khusus dan tidak bergantung pada fungsi lain. Secara default, CI tidak memuat helper sehingga harus dimuat dulu sebelum bisa digunakan. Sekali dimuat, helper tersedia secara global bagi kontroler dan view. Helper disimpan di folder /system/Helpers atau app/Helpers. CI mencari helper yang harus dimuat dari app/Helpers terlebih dahulu jika ada. Jika tidak ada, CI mencarinya di /system/Helpers.

Cara untuk memuat helper agar bisa digunakan adalah:

helper(’namaHelper’);

di mana namaHelper adalah nama file yang menunjukkan helper, tanpa menyebutkan ekstensinya (php). Sebagai contoh, untuk memuat helper cookie, tuliskan sebagai:

helper(‘cookie’);

Jika kita membutuhkan beberapa helper, dapat dituliskan sekaligus, dipisahkan dengan koma:

helper(’cookie’, ’date’);

Perlu dicatat bahwa helper url selalu dimuat sehingga anda tidak perlu memuatnya lagi. Helper bisa dimuat di kontroler atau view tetapi sebaiknya dimuat di konstruktor kelas (kontroler), atau di fungsi yang membutuhkannya saja. Untuk menggunakan helper, perlakukan seperti fungsi lainnya (tanpa nilai return). Sebagai contoh, untuk membuat link, gunakan fungsi anchor() yang ada di helper url seperti:

<?php echo anchor('blog/comments', 'Click Here');?>

di mana 'blog/comments' adalah URI untuk nama kontroler dan metode yang akan dipanggil dan ‘Click Here’ adaah nama linknya.

Kontroler dan Routing

Kontroler merupakan jantung aplikasi yang menangani HTTP request. Kontroler hanya berupa file kelas yang diberi nama sedemikian sehingga bisa menjadi URI. Perhatikan URI berikut:

example.com/public/helloworld/

Pada contoh tersebut, CI akan mencoba mencari kontroler dengan nama Helloworld.php dan memuatnya untuk dieksekusi. Jika nama suatu kontroler cocok dengan bagian pertama dari URI, maka kontroler itu akan dieksekusi.

Routing URI

Biasanya ada hubungan satu ke satu antara string URL dengan kontroler/metode yang terkait. Segemn dalam URI biasanya berbentuk:

example.com/class/method/id/

Akan tetapi dalam beberapa hal mungkin anda perlu memetakan ulang hubungan antara URL dengan kelas kontroler/metode yang berbeda dari nama yang ditunjukkan di URL. Misal anada ingin di URL berbentuk:

example.com/product/1/

example.com/product/2/

example.com/product/3/

example.com/product/4/

Artinya, segmen kedua berbentuk ID bukan metode yang akan dieksekusi. Untuk bisa menangani hal ini, CI memungkinkan melakukan pemetaan ulang yang menangani URI.

Menentukan Aturan Routing Sendiri

Aturan routing didefinisikan di app/Config/Routes.php. Di file tersebut kita bisa menentukan routing dengan placeholder ataupun regular expressions (regex). Definisi routing ini berbentuk pasangan URI di sebelah kiri dan pemetaannya ke kontroler dan metode di sebelah kanan, beserta parameternya yang akan dikirm ke kontroler. Kontroler dan metode harus dicantumkan dengan cara yang sama seperti menggunakan metode statik. Kelas dengan nama penuh (dengan namespace) dipisahkan dengan metodenya dengan tanda dobel kolon (dobel titik dua) seperti Users::list. Jika metode tersebut memerlukan parmeter, maka harus disertakan setelah nama metode, dipisahkan dengan garis miring maju (forward slash, /) seperti: Users::list/1/24.

Placeholders

Placeholder adalah string yang menunjukkan pola Regex. Selama proses routing, placeholder ini diganti dengan nilai regex. Ini dimaksudkan untuk readibilitas (mudah, enak dibaca). Contoh penggunaan placeholder:

$routes->add('product/(:num)', 'App\Catalog::productLookup');

Dalam contoh di atas, jika literal product menempati segmen pertama (biasanya nama kontroler) dan diikuti bilangan sebagai segmen kedua, maka routing menuju kontroler App\Catalog dengan metode productLookup. Berikut ini beberapa placeholder yang bisa dipakai:

Placeholders

Deskripsi

(:any)

(:any) akan cocok (match) dengan semua karakter dari titik itu sampai akhir URI. Bisa mencakup beberapa segmen URI

(:segment)

akan cocok dengan karakter apapun kecuali garis miring maju yang membatasi hasil ke suatu segmen.

(:num)

akan cocok dengan semua integer

(:alpha)

akan cocok dengan string huruf

(:alphanum)

akan cocok dengan string huruf dan/atau angka

(:hash)

sama seperti (:segment) tetapi dapat digunakan agar dengan mudah melihat route mana yang menggunakan id yang dihashed.

 

Regular Expressions

URI dalam definisi routing dapat dituliskan dalam bentuk regular expression (regex). Contoh:

$routes->add('products/([a-z]+)/(\d+)', 'Products::show/$1/id_$2');

Pada contoh di atas, URI yang mirip dengan products/shirts/123 akan dipetakan ke metode show dari kelas kontroler Products. Notasi Regex secara ringkas dapat dilihat seperti di Wikipedia: https://en.wikipedia.org/wiki/Regular_expression

 

 

 

 

 

 

 

 

 

 

 

 

Eksperimen

Eksplorasi CI 4 (Routing)
  • Eksperimen 1: AutoRoute = true

Gunakan aplikasi yang dibuat pada praktikum CI sebelum ini (Modul 9).

Pastikan folder app/Controllers memiliki file-file: BaseController.php, Home.php, News.php dan Pages.php

Pastikan dulu setAutoRoute di Routes.php diset true: $routes->setAutoRoute(true);

Definisi routing (di bawah label Route Definitions) semua dibuat komen.

Pastikan server MySQL sudah aktif.

Jalankan server CI dengan perintah php spark serve di CLI.

Lakukan eksperimen seperti berikut ini:

No

URL

Hasil

1

http://localhost:8080/

Halaman Welcome

2

http://localhost:8080/home

Halaman Home

3

http://localhost:8080/news

Overview link ke artikel

4

Klik link

404 - File Not Found

5

http://localhost:8080/news/view/

404 - File Not Found

6

http://localhost:8080/news/view/elvis-sighted

Berita tentang Elvis

7

http://localhost:8080/pages

Halaman welcome

8

http://localhost:8080/pages/view

Halaman Home

9

http://localhost:8080/pages/view/about

Halaman About

10

http://localhost:8080/news/create

Halaman create news

11

 

 

 

  • Eksperimen 2: AutoRoute = false

Kita lanjut dengan eksperimen kedua.

Pastikan dulu setAutoRoute di Routes.php diset false: $routes->setAutoRoute(false);

Biarkan yang lain seperti pada eksperimen sebelum ini.

Coba lakukan rekues seperti pada eksperimen di atas dengan mengetikkan URL di address bar.

Perhatikan apa yang terjadi!

Apa kesimpulan Anda?

  • Eksperimen 3: AutoRoute = false, Definisi routing dibuka

Kita lanjutkan eksperimen 3 dari eksperimen 2:

Biarkan setAutoRoute(false).

Buka komen (uncomment) semua definisi routing, sehingga tampak seperti gambar berikut:

Lakukan eksperimen seperti ini (Jangan gunakan tombol back di sebelah address bar).

No

URL

Hasil

1

http://localhost:8080/

Halaman welcome

2

http://localhost:8080/home/

Halaman Home

3

http://localhost:8080/news

Overview link ke artikel

4

Klik link

Berita tentang …

5

http://localhost:8080/news/view/

404 - File Not Found

6

http://localhost:8080/news/view/elvis-sighted

404 - File Not Found

7

http://localhost:8080/news/elvis-sighted

Berita tentang Elvis

8

http://localhost:8080/news/create

Halaman create news

9

http://localhost:8080/pages/

404 - File Not Found

10

http://localhost:8080/pages/view

404 - File Not Found

11

http://localhost:8080/pages/view/about

404 - File Not Found

12

http://localhost:8080/about/

Halaman About

 

 

 

 

Mengapa no 5, 6, 9, 100, 11, mendapatkan error 404?

Apa kesimpulan anda dari eksperimen ini?

  • Eksperimen 4: AutoRoute = false, Definisi routing dibuka, Server Apache

Kita lanjutkan eksperimen 4 dari eksperimen 3:

Biarkan setAutoRoute(false), definisi routing seperti pada eksperimen 3.

Matikan server CI dengan menekan Ctrl-C di terminal CLI

Aktifkan server Apache di Laragon/XAMPP. Jika sudah aktif, matikan dulu dan aktifkan lagi.

Lakukan eksperimen seperti ini (Jangan gunakan tombol back di sebelah address bar).

No

URL

Hasil

1

http://localhost/ci-news/

Halaman welcome

2

http://localhost/ci-news/public/

Halaman welcome

3

http://localhost/ci-news/public/news

Overview link ke artikel

4

Klik link

Not Found

5

http://localhost/ci-news/public/news/elvis-sighted

Berita tentang Elvis

6

http://localhost/ci-news/public/news/create

Halaman create news

7

http://localhost/ci-news/public/pages

404 - File Not Found

 

Perhatikan butir no 4 dalam eksperimen ini. Ada pesan error “Not Found”. Mengapa? Perhatikan address bar setelah anda mengklik link tersebut! Di situ tampak URL tanpa ada folder /ci-news. Ini karena nilai atribut href link tersebut masih berbasis server CI.

Jika menggunakan server Apache, harus menyertakan folder root sebagai base_URL, yang dalam hal ini folder /ci_news.

Untuk itu perbaiki nilai href dengan menyertakan baseURL yang diset di file configurasi .env.

Ubah nilai app.baseURL di .env menjadi app.baseURL = 'http://localhost/ci-news/'

Ubah nilai href di app/Views/news/overview.php menjadi: href="<?= base_URL()."/news/". esc($news_item['slug'], 'url'); ?>"

Ulangi eksperimen butir no 3 dan 4 di atas dan perhatikan apa yang terjadi. Masih error?

Ubah nilai app.baseURL di .env menjadi app.baseURL = 'http://localhost:8080/'

Ulangi eksperimen butir 3 dan 4 di atas, perhatikan apa yang terjadi. Lihat di address bar!

Tugas Akhir

  • Lanjutkan eksperimen 4 dengan melakukan eksperimen 5 sebagai berikut:

Masih seperti eksperimen 4.

Ubah aplikasi supaya di URL tidak membutuhkan folder /public dengan cara seperti dijelaskan di atas.

Ubah nilai app.baseURL di .env menjadi app.baseURL = 'http://localhost/ci-news/'

Lakukan beberapa eksperimen seperti pada tabel di eksperimen 4.

Definisikan routing agar bisa menampilkan halaman Home dan About dari kontroler Pages.php

  • Implementasikan pencari data dari basisdata dengan AJAX:

Buatkan aplikasi live search dari basisdata yang dibuat di tugas pada praktikum modul 9 dengan AJAX dan dengan CI 4.

Lihat modul praktikum 8 dan 9.


Last modified: Sunday, 6 December 2020, 8:09 PM