Modul 9 Praktikum Rekweb

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-9:

CodeIgniter 4

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 


Modul 8

CodeIgniter 4

 

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

Perangkat praktikum :

  1. PC / Notebook

Materi

CodeIgniter (CI) adalah framework pengembangan aplikasi, toolkit yang menyediakan pustaka untuk mengerjakan tugas yang biasa dibutuhkan dalam aplikasi web. Arsitektur CI mengikuti pola MVC (Model-View-Controller) yang memisahkan logika program dengan presentasi data. Gambar 1 berikut ini menggambarkan alur kontrol dalam MVC:

Secara garis besar, proses berlangsung sebagai berikut: berawal dari browser (klien) yang mengajukan permintaan (HTTP Request) ke kontroler. Jika tidak ada permintaan untuk menangani basis data, kontroler langsung mengirim halaman web ke view untuk ditayangkan ke browser sebagai HTTP response. Jika ada permintaan untuk menangani basis data, kontroler memanggil model, menangani basis data dan hasilnya dikirim ke view untuk ditampilkan ke browser sebagai HTTP response.

Instalasi CI 4

Instalasi CI 4 bisa dilakukan secara manual ataupun dengan Composer. Instalasi manual sudah dibicarakan di kuliah. Di sini hanya disajikan cara instalalsi dengan Composer:

Pastikan Composer sudah diinstal. Atau unduh di https://getcomposer.org/download/

Jalankan file explorer, masuk ke direktori www di Laragon atau htdocs di XAMPP.

Klik kanan pilih terminal.

Instal CI 4 di folder ci-news: ketik composer create-project codeigniter4/appstarter ci-news.

Copy file env dan ganti salinannya menjadi .env. Buka file .env.

Cari CI_ENVIRONMENT, buka komennya dengan menghapus tanda pagar dan set menjadi CI_ENVIRONMENT = development

Test apakah instalasi sudah benar dengan ketik php spark serve di terminal di direktori ci-news

Ketik di browser http://localhost:8080. Akan menampilkan halaman Welcome.

Secara default, URL di atas akan memanggil kontroler Home.php di app\Controlers:

<?php namespace App\Controllers;

 

class Home extends BaseController

{

public function index()

{

return view('welcome_message');

}

 

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

 

}

Kontroler ini memiliki berupa kelas dengan metode index() sebagai metode default yang dieksekusi, yang memanggil metode view milik CI untuk menampilkan view welcome_message.php. Di dalam view ekstensi .php tidak perlu dituliskan.

Membuat Web Statik Dengan CI 4

Materi ini diambil dari https://codeigniter4.github.io/userguide/tutorial/static_pages.html. Halaman web statik adalah halaman web yang isinya tidak berubah dan tidak bisa merespon pengguna. Berbeda dengan statik, halaman web dinamik bisa menampilkan halaman dengan isi yang berubah-ubah sesuai permintaan pengguna. Dengan CI untuk membuat halaman statik dimulai dengan membuat kontroler. Untuk itu buatlah file app/Controllers/Pages.php: membuat file Pages.php di direktori (untuk Windows) app\Controllers. Isi file ini dengan kode berikut:

<?php namespace App\Controllers;

 

use CodeIgniter\Controller;

 

class Pages extends Controller

{

public function index()

{

return view('welcome_message');

}

 

public function view($page = 'home')

{

}

}

Kontroler Pages ini berupa kelas yang memiliki dua metode: index() seperti pada kontroler Home dan metode vew() yang menerima parameter $pages. Kelas Pages mewarisi kelas CodeIgniter\Controler (system/Controller.php). Kontroler ini menjadi pintu masuk permintaan (request) ke situs web yang bersangkutan. Kelas ini juga bisa diacu sebagai %this.

Sekarang buatlah template halaman. Buat folder templates di app/Views. Buatlah header di file header.php di app/Views/templates tersebut. Isi dengan kode ini:

<!doctype html>

<html>

<head>

<title>CI 4 Tutorial</title>

</head>

<body>

 

<h1><?= esc($title); ?></h1>

Ingat bahwa kode di view berupa file HTML. Header berisi sesuatu yang akan ditempilkan sebelum isi utama. Di sini header membersihkan variabel $title dengan fungsi esc() dari CI untuk mencegah Cross Site Scripting (XSS). Tag <?= singkatan dari tag <?php echo. Sekarang, buatlah footer (isi footer akan ditampilkan setelah isi utama) di folder yang sama dengan header dengan nama file footer.php, dengan kode berikut:

<em>&copy; 2019</em>

</body>

</html>

Menambahkan Logik di Kontroler

Kontroler Pages memiliki metode view() yang memiliki satu parameter ($page) yang merupakan variabel untuk halaman yang akan ditampilkan. Badan halaman statik disimpan di folder app/Views/pages. Di direktori ini buatlah file home.php dan about.php dengan isi misalnya <h2>Isi Halaman Home/About</h2>. Untuk memuat halaman-halaman ini sebaiknya periksa dulu apakah halaman yang diminta ada. Pemeriksaaan ini dilakukan di fungsi view() yang akan menampilkannya dengan fungsi is_file() dari PHP:

public function view($page = 'home')

{

if ( ! is_file(APPPATH.'/Views/pages/'.$page.'.php'))

{

// Whoops, we don't have a page for that!

throw new \CodeIgniter\Exceptions\PageNotFoundException($page);

}

 

$data['title'] = ucfirst($page); // Capitalize the first letter

 

echo view('templates/header', $data);

echo view('pages/'.$page, $data);

echo view('templates/footer', $data);

}

Fungsi is_file() meminta nama file sebagai parameter. Di fungsi ini nama parameter lengkap dengan APPPATH dari CI yang menunjukkan path direktori app. Jika file yang diminta tidak ada, aplikasi berhenti dan jika file ada, aplikasi meneruskan eksekusi statemen berikutnya.

Statemen berikutnya adalah membuat array $data[’title’]: array $data dengan elemen (key) title yang diambil dari nama halaman dengan huruf pertama dikapitalisasi. Statemen berikutnya adalah echo view() yang merupakan cara untuk menampilkan view ke browser. Karena di sini ada tiga perintah untuk menampilkan view, maka isi view akan ditampilkan secara berurutan.

Parameter kedua dari view merupakan cara mengirim parameter ke view dari kontroler yang harus berupa array. Di view, kita bisa mengakses data yang dikirim dari kontroler dengan nama variabel sesuai nama kunci (elemen) arraynya. Di file header.php, nama variabel $title menggunakan tanda dolar.

Perhatikan perintah echo view() yang kedua di metode view di atas. Parameter pertama mengandung variabel $pages (jenis string) yang disambung dengan nama sub direktori pages/. Dengan demikian nanti akan terbentu pages/home yang berarti view home.php di direktori pages atau pages/about. Ingat bahwa nama file atau direktori yang dikirim di view() bersifat peka kasus.

Menjalankan Aplikasi

Sampai di sini kita hanya bisa menjalankan aplikasi dengan server CI menggunakan spark. Format URL untuk mengakses aplikasi ini adalah

http://example.com/[kelas-kontroler]/[metode-kontroler]/[argumen]

Jika argumen lebih dari satu, sambung lagi dengan /. Jalankan server CI: ketik perintah berikut di terminal (CLI) dari direktori root (direktori tempat anda menginstal proyek aplikasi):

php spark serve

Ketik di browser URL berikut:

URL

akan menampilkan

localhost:8080/pages

hasil dari metode index() di kontroler Pages yang menamplikan halaman welcome karena index merupakan metode default.

localhost:8080/pages/index

juga menampilkan halaman “welcome”, karena secara eksplisit memanggil metode index().

localhost:8080/pages/view

halaman “home” yang anda buat, karena menjadi halaman default sebagai parameter metode view().

localhost:8080/pages/view/home

halaman “home” karena secara eksplisit meminta halaman itu

localhost:8080/pages/view/about

halaman “about” karena secara eksplisit meminta halaman itu

localhost:8080/pages/view/shop

pesan eror “404 - File Not Found”, karena tidak ada view shop.php

Routing

Pada tabel URL di atas tampak bahwa URL cukup panjang untuk mengakses kontroler/metode yang kita inginkan. Dengan penentuan routing, kita bisa memetakan URL ke kontroler/metode yang ingin dituju. Jadi yang dimaksud routing di sini adalah memetakan string (atau regex) ke kontroler/metode yang ingin dipanggil.

Sampai di sini aplikasi anda masih menggunakan routing otomatis, CI menentukan kelas/metode sesuai URL di alamat browser dengan aturan/konvensi seperti di atas. Dengan mengatur routing di file app/Config/Routes.php kita bisa memetakan string untuk URL dengan kelas/metode yang kita tentukan. Perlu dicatat bahwa auto-routing harus diset false supaya pemetaan routing bisa bekerja dengan cara mengeset nilai $routes->setAutoRoute(false) di file Routes.php. Untuk mencobanya, lakukan langkah berikut:

Buka file Routes.php.

Cari $routes->setAutoRoute(true) ganti dengan $routes->setAutoRoute(false)

Cari $routes->get('/', 'Home::index'); di bawah label Route Definitions

Di bawahnya, sisipkan $routes->get('(:any)', 'Pages::view/$1'); yang memetakan apa saja (:any) menjadi akses metode view() di kontroler Pages dan menjadikannya (:any tersebut) sebagai parameter di metode view().

Sekarang, coba ketikkan localhost:8080/home yang akan memanggil metode view() di kontroler Pages dengan parameter home.

Membuat Web Dinamis

Web dinamis berarti bisa menampilkan isi yang dinamis, berubah-ubah. Untuk itu diperlukan basis data sebagai sumber data (konten/isi web) untuk mengubah halaman web. Sekarang buatlah tabel di basis data yang dibuat pada praktikum sebelum ini, sebagai berikut:

CREATE TABLE news (

id int(11) NOT NULL AUTO_INCREMENT,

title varchar(128) NOT NULL,

slug varchar(128) NOT NULL,

body text NOT NULL,

PRIMARY KEY (id),

KEY slug (slug)

);

Anda bisa membuatnya dengan aplikasi pengolah basis data seperti PhpMyAdmin, HeidiSQL atau apa saja. Kolom slug pada tabel tersebut digunakan sebagai key yang berfungsi seperti id untuk memilih berita. Kemudian, isilah tabel dengan beberapa data misalnya:

INSERT INTO news VALUES

(1,'Elvis sighted','elvis-sighted','Elvis was sighted at the Podunk internet cafe. It looked like he was writing a CodeIgniter app.'),

(2,'Say it isn\'t so!','say-it-isnt-so','Scientists conclude that some programmers have a sense of humor.'),

(3,'Caffeination, Yes!','caffeination-yes','World\'s largest coffee shop open onsite nested coffee shop for staff only.');

Setelah membuat tabel dan mengisinya, dan dibrowsing, akan tampak seperti di bawah:

Koneksi ke Basisdata

Untuk koneksi ke basis data, atur konfigurasi di file .env (bisa juga di Database.php). Buka file .env dan temukan variabel berikut:

#--------------------------------------------------------------------

# DATABASE

#--------------------------------------------------------------------

 

database.default.hostname = localhost

database.default.database = db_news

database.default.username = root

database.default.password = pswrd_mu

database.default.DBDriver = MySQLi

Membuat Model

Model merupakan tempat kita menyisipkan, mengubah dan mendapatkan kembali data dalam basis data atau tempat lain. Model memberi akses ke basis data. Untuk membuat model, buatlah file misalnya NewsModel.php di folder app/Models dengan kode sebagai berikut:

<?php namespace App\Models;

 

use CodeIgniter\Model;

 

class NewsModel extends Model

{

protected $table = 'news';

}

Membuat model mirip dengan membuat kontroler: membuat kelas yang mewarisi Model. Dengan pewarisan ini, berarti sudah menyiapkan pustaka basis data dan menyebabkan kelas database tersedia dengan objek $this->db.

Setelah basis data dan model sudah diseting, sekarang kita buat metode untuk mengambil data yang dalam hal ini berita yang disimpan dalam basis data. Untuk itu kita gunakan lapisan abstraksi basis data yang disediakan CI: Query Builder (QB), yang memungkinkan untuk membuat kueri sekali dan bisa digunakan di semua sistem basis data yang didukung. Kelas Model juga memungkinkan kita dengan mudah menggunakan QB dan memberi perangkat tambahan agar pengolahan basis data lebih sederhana. Selanjutnya, tambahkan kode berikut ke NewsModel.php:

public function getNews($slug = false)

{

if ($slug === false)

{

return $this->findAll();

}

 

return $this->asArray()

->where(['slug' => $slug])

->first();

}

Kode di atas memberi dua cara mendapatkan data: mendapatkan semua baris atau mendapatkan berita sesuai slug. Di sini variabel $slug tidak disanitasi sebelum mengeksekusi kueri karena QB yang melakukannya. Dua metode yang dipakai: findAll() dan first() disediakan kelas Model. Metode ini tahu tabel yang dipakai dari properti $table yang didefinisikan di model yang anda buat. Keduanya adalah metode helper yang menggunakan QB untuk menjalankan perintah terhadap tabel dan memberikan array hasil. Di sini fndAll() mengembalikan nilai array objek.

Menayangkan Hasil

Untuk menampilkan hasil, kontroler jugalah yang melakukannya. Kita bisa menggunakan kontroler Pages yang sudah ada tapi untuk lebih jelas, buat kontroler baru: News dengan kode sebagai berikut:

<?php namespace App\Controllers;

 

use App\Models\NewsModel;

use CodeIgniter\Controller;

 

class News extends Controller

{

public function index()

{

$model = new NewsModel();

 

$data['news'] = $model->getNews();

}

 

public function view($slug = null)

{

$model = new NewsModel();

 

$data['news'] = $model->getNews($slug);

}

}

Kelas News memiliki dua metode, index() untuk menampilkan semua berita dan view() untuk menampilkan berita tertentu saja menggunakan %slug sebagai parameternya. Parameter $slug ini digunakan untuk identifikasi/menentukan berita yang ditayangkan. Kontroler mengambil data melalui metode getNews() yang ada di model. Data yang diperoleh dari model ini harus ditayangkan melalui view. Untuk itu kita buat array $data seperti sebelumnya, yang berisi berita (news). Ubah metode index() menjadi seperti ini:

public function index()

{

$model = new NewsModel();

 

$data = [

'news' => $model->getNews(),

'title' => 'News archive',

];

 

echo view('templates/header', $data);

echo view('news/overview', $data);

echo view('templates/footer', $data);

}

Metode index() ini mengambil semua baris (record) dan menimpannya di variabel news sebagai elemen array $data. Variabel $data inilah yang dikirim ke view. Sekarang kita harus membuat view untuk merangkai (render) tampilan. Untuk itu buatlah overview.php di app/Views/news/ seperti ini:

<h2><?= esc($title); ?></h2>

 

<?php if (! empty($news) && is_array($news)) : ?>

 

<?php foreach ($news as $news_item): ?>

 

<h3><?= esc($news_item['title']); ?></h3>

 

<div class="main">

<?= esc($news_item['body']); ?>

</div>

<p><a href="/news/<?= esc($news_item['slug'], 'url'); ?>">View article</a></p>

 

<?php endforeach; ?>

 

<?php else : ?>

 

<h3>No News</h3>

 

<p>Unable to find any news for you.</p>

 

<?php endif ?>

View tersebut digunakan untuk menayangkan semua berita dengan loop foreach sedangkan kalau untuk menayangkan satu berita, gunakan metode view() dengan parameter $slug. Modifikasi metode view() di kontroler News menjadi:

public function view($slug = NULL)

{

$model = new NewsModel();

 

$data['news'] = $model->getNews($slug);

 

if (empty($data['news']))

{

throw new \CodeIgniter\Exceptions\PageNotFoundException('Cannot find the news item: '. $slug);

}

 

$data['title'] = $data['news']['title'];

 

echo view('templates/header', $data);

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

echo view('templates/footer', $data);

}

Metode ini memanggil view view.php di app/Views/news/. Untuk itu, buatlah file view.php di folder tersebut dengan isi seperti ini:

<h2><?= esc($news['title']); ?></h2>

<?= esc($news['body']); ?>

Routing

Sekarang kita tambahkan routing untuk menangani kontroler baru, buka file Routes.php dan tambahkan kode berikut:

$routes->get('news/(:segment)', 'News::view/$1');

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

$routes->get('(:any)', 'Pages::view/$1');

Setelah itu, coba dengan URL berikut:

localhost:8080/news

 

Membuat Artikel Berita

Sampai di sini anda tahu bagaimana membaca data dari basis data dan menampilkannya, tetapi belum tahu bagaimana menyimpan datanya. Di sini dibahas bagaimana mengambil data dari pengguna dan menyimpannya ke dalam basis data. Untuk mengambil data, kita buat form.

Membuat Form

Form (formulir) merupakan pintu untuk memasukkan data yang akan disimpan. Materi dalam tutorial ini membutuhkan dua isian form: satu untuk judul berita dan lainnya untuk isi (teks) berita, sedangkan slug diturunkan dari judul. Form merupakan antar muka pengguna sehingga form harus dibuat dalam modul view. Buatlah modul create.php di app/Views/news/ dengan isi sebagai berikut:

<h2><?= esc($title); ?></h2>

 

<?= \Config\Services::validation()->listErrors(); ?>

 

<form action="/news/create" method="post">

<?= csrf_field() ?>

 

<label for="title">Title</label>

<input type="input" name="title" /><br />

 

<label for="body">Text</label>

<textarea name="body"></textarea><br />

 

<input type="submit" name="submit" value="Create news item" />

 

</form>

Ingat bahwa yang mengolah form ini adalah metode dalam kontroler yang ditentukan dalam atribut action di elemen <form>. Nilai atribut action di atas menunjukkan metode create di dalam kontroler News. Di dalam modul di atas juga ada yang baru yaitu fungsi \Config\Services::validation()->listErrors() yang digunakan untuk menampilkan pesan eror saat validasi form. Sedangkan yang kedua, fungsi csrf_field() yang membuat input tersembunyi yang membawa token CSRF (Cross Site Request Forgery) yang membantu melindungi serangan CSRF.

Sekarang kita kaji fungsi apa saja pada metode create untuk menangani data dari form. Pertama harus memeriksa apakah form sudah disubmit dan apakah datanya sudah valid (sesuai aturan validasi). Untuk itu gunakan pustaka form validation. Perhatikan metode create dengan kode berikut:

public function create()

{

$model = new NewsModel();

 

if ($this->request->getMethod() === 'post' && $this->validate([

'title' => 'required|min_length[3]|max_length[255]',

'body' => 'required'

]))

{

$model->save([

'title' => $this->request->getPost('title'),

'slug' => url_title($this->request->getPost('title'), '-', TRUE),

'body' => $this->request->getPost('body'),

]);

 

echo view('news/success');

 

}

else

{

echo view('templates/header', ['title' => 'Create a news item']);

echo view('news/create');

echo view('templates/footer');

}

}

Pekerjaan pertama yang dilakukan kode di atas adalah memuat model NewsModel. Kemudian melakukan dua pemeriksaan pertama apakah menggunakan metode GET dan kedua apakah datanya valid. Yang pertama diperlukan karena menggunakan metode request->getPost(). Yang kedua diperlukan untuk memastikan datanya sesuai kebutuhan.

Lanjut ke bawah, jika pemeriksaan tadi gagal, metode ini menampilkan kembali form. Akan tetapi jika pemeriksaan tadi lolos, maka metode ini mengirim data ke model dengan memanggil metode save() yang diwarisi dari kelas Model CI. Parameter untuk slug diberi nilai $title dengan fungsi url_title() yang bertugas membubuhi strip pada string judul: mengganti spasi dengan tanda dash (-) dan menganti huruf ke huruf kecil (lowercase). Setelah berhasil menyompan data, selanjutnya metode menampilkan pesan sukses melalui view success.php yang isinya hanya pesan sukses:

News item created successfully.

Memperbaharui Model

Satu hal yang masih tersisa adalah memastikan bahwa model yng dibuat disiapkan untuk memungkinkan data disimpan dengan benar. Metode save() yang digunakan sudah bisa menentukan apakah data disisipkan atau untuk mengubah yang sudah ada. Jika id disertakan, maka data untuk perubahan nilai dan jika tanpa id, data disisipkan di akhir tabel. Akan tetapi, secara default, metode insert dan update tidak menyimpan suatu data karena tidak tahu isian mana yang aman untuk diupdate. Untuk menentukan isian yang bisa diupdate, gunakan properti $allowedFields di dalam model. Properti ini menentukan isian yang diperbolehkan untuk disimpan (save) dalam basis data:

<?php namespace App\Models;

use CodeIgniter\Model;

 

class NewsModel extends Model

{

protected $table = 'news';

 

protected $allowedFields = ['title', 'slug', 'body'];

}

Perhatikan bahwa dalam properti $allowedFields tidak mengandung id, karena memang tidak perlu dan id merupakan isian yang nambah secara otomatis (auto-increment). Ini melindungi MAS (Mass Assignment Vulnerabikities). Jika modelnya menangani stempel waktu, id juga harus tidak disertakan.

Routing

Sekarang, untuk dapat memasikkan data ke basis data, dibutuhkan pemetaan routing baru. Buka file Routes.php. Sertakan routing berikut untuk memastikan CI memperlakukan create sebagai metode, bukan sebagai slug:

$routes->match(['get', 'post'], 'news/create', 'News::create');

$routes->get('news/(:segment)', 'News::view/$1');

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

$routes->get('(:any)', 'Pages::view/$1');

Sekarang, ketiklah localhost:8080/news/create dan lihat bagaimana hasilnya. Tambahkan berita bari dan periksa apakah bisa tampil di layar.

Latihan

Eksplorasi CI 4

Tambahkan beberapa halaman lain di direktori app/Views/pages.

Akses web dengan halaman yang baru.

Implementasikan materi di atas untuk membuat halaman web dinamik.

Tugas Akhir

  • Membuat aplikasi CRUD (create, read, update, delete) basisdata dengan CI 4:

Pada praktikum sebelum ini (Modul 8), anda ditugaskan untuk membuat aplikasi CRUD dengan PHP.

Buatkan aplikasi yang sama dengan menggunakan CI 4.


Last modified: Monday, 30 November 2020, 6:16 AM