Struktur Folder CodeIgniter - PENGENALAN FRAMEWORK CODEIGNITER 4

BAB I PENGENALAN FRAMEWORK CODEIGNITER 4

E. Struktur Folder CodeIgniter

Pada CodeIgniter 4 terdapat 4 folder yaitu app, public, system dan writable. Masing-masing folder memiliki fungsi dan peran tersendiri

g. Folder app

Folder app merupakan tempat semua aplikasi kita berada h. Folder system

Folder system merupakan tempat inti dari framework codeigniter. File- file yang berada pada folder ini tidak boleh diubah.

7 i. Folder public

Folder public merupakan bagian yang dapat diakses browser dari aplikasi web yang sekaligus mencegah akses langsung ke kode sumber. Pada folder ini berisi file .htaccess, index.php dan file-file tambahan lainnya seperti css, javascript ataupun gambar-gambar.

j. Folder writable

Folder writable berfungsi sebagai media penyimpanan file, seperti cache, log dan unggahan-unggahan yang ada pada aplikasi yang dikembangkan.

BAB II

MODEL, VIEW, CONTROLLER

Pada pertemuan ini diharapkan mahasiswa dapat memahami cara kerja pola desain Model-View-Controller yang merupakan dasar dari penggunaan framework CodeIgniter.

A. Pengertian MVC

MVC merupakan pola desain arsitektur yang membagi menjadi tiga bagian yaitu Model, View dan Controller.

- Model, merupakan bagian yang mengelola dan berhubungan langsung dengan database seperti mengambil data, menginput data, menghapus dan sebagainya. Pada CodeIgniter 4 file model diletakkan pada folder app\Models

- View, merupakan bagian yang akan menyajikan tampilan kepada pengguna, pada codeigniter 4, file view dibuat pada folder app\Views

- Controller, merupakan bagian yang menghubungkan Model dan View dalam setiap proses permintaan dari pengguna.

B. Cara kerja CodeIgniter

Buka file Home.php yang berada pada folder app\Controllers

<?php

namespace App\Controllers;

class Home extends BaseController {

public function index() {

return view('welcome_message');

}

Tentunya pada baris pertama terdapat tag pembuka php agar baris berikutnya terbaca sebagai script php.

Pada baris selanjutnya terdapat namespace. Namespace digunakan untuk menghindari konflik dari penamaan Class yang sama, selain itu namespace juga digunakan untuk pemanggilan sebuah file Class, maka penulisan namespace berdasarkan lokasi file tersebut berada, misalkan file controller terletak pada folder app\controller, maka untuk namespacenya adalah App\Controllers,

Untuk controller pada codeigniter 4 merupakan turunan dari BaseController (Class Home extends BaseController) yang juga berada pada folder app\Controllers

Kemudian didalam class controller terdapat fungsi index yang merupakan fungsi pertama yang akan ditampilkan di browser saat class controller tersebut dipanggil.

}

9 1. Seting URL dasar (Base URL)

Buka file App.php pada folder app\Config, cari perintah

public $baseURL = 'http://localhost:8080/';

ubah http://localhost:8080/ menjadi http://localhost/belajarci/public/

public $baseURL = 'http://localhost/belajarci/public/';

2. Membuat Controller

Dalam membuat Class Controller pada CodeIgniter 4 diawali dengan huruf kapital. Sebagai contoh buat sebuah file dengan nama Latihanpertama pada folder app\Controllers kemudian ketikkan perintah berikut

<?php

namespace App\Controllers;

class Latihanpertama extends BaseController {

public function index() {

echo "Selamat Datang di CodeIgniter 4";

} }

Pada browser ketikkan alamat

http://localhost/belajarci/public/latihanpertama

3. Membuat, memanggil View

Buat sebuah file dengan nama latihan_pertama.php pada folder app\Views kemudian ketikkan kode berikut

<h4>Selamat Datang</h4>

di Framework CodeIgniter 4

<?php

Kemudian buka kembali file controller Latihanpertama.php pada app\Controllers, dan ubah kodenya menjadi

namespace App\Controllers;

class Latihanpertama extends BaseController {

public function index() {

echo "Selamat Datang di CodeIgniter 4";

}

10 public function lihat()

{

return view('latihan_pertama');

} }

Ketikkan alamat http://localhost/belajarci/public/latihanpertama/lihat pada browser

a. File view didalam folder

Jika file view berada dalam subfolder maka disertakan pula nama folder tersebut

Contoh :

Buat sebuah folder dengan nama detail pada folder app\Views, kemudian pada folder detail tersebut, buat sebuah file dengan nama sub_latihan_pertama.php

isi file sub_latihan_pertama.php tersebut dengan kode berikut

<h4>Framework CodeIgniter 4</h4>

Ini view dari folder detail Views

<?php

Kemudian pada controller Latihanpertama.php tambahkan kode menjadi

namespace App\Controllers;

class Latihanpertama extends BaseController {

public function index() {

echo "Selamat Datang di CodeIgniter 4";

}

public function lihat() {

return view('latihan_pertama');

}

public function subdetail() {

return view('detail/sub_latihan_pertama');

}

12 }

Jika kita mengakses alamat

http://localhost/belajarci/public/latihanpertama/subdetail pada browser akan tampil seperti berikut

b. View menggunakan template

Buat sebuah file dengan nama template.php pada folder app\Views kemudian ketikkan kode berikut

<h1>Ini adalah halaman template</h1>

<?= $this->renderSection('content') ?>

<hr />

<h4>Terima kasih telah menggunakan template</h4>

Kemudian buka file latihan_pertama.php pada folder app\Views dan ubah menjadi

<?= $this->extend('template') ?>

<?= $this->section('content') ?>

<h4>Selamat Datang</h4>

di Framework CodeIgniter 4

<?= $this->endSection() ?>

Pada bagian $this->extend('template') menunjukkan kita menggunakan file template.php sebagai template, kita dapat menggunakan template dengan nama lain, misalnya untuk halaman login kita membuat template login.php maka untuk menggunakan template tersebut dengan menuliskan kode $this->extend('login')

Sedangkan untuk kode $this->renderSection('content') merupakan tempat

berada diantara $this->section('content') dan ditutup dengan $this-

>endSection()

Jika kita mengakses alamat

http://localhost/belajarci/public/latihanpertama/lihat pada browser akan tampil seperti berikut

view akan dimunculkan, penamaan content dapat diubah sesuai kebutuhan, untuk area dalam memunculkan view pada template

13 4. Membuat dan menggunakan Model

Buat sebuah file controller dengan nama Persegipanjang.php pada folder app\Controllers, ketikkan kode berikut

<?php

namespace App\Controllers;

class Persegipanjang extends BaseController {

public function index() {

return view('PersegiPanjang/form_persegi_panjang');

} }

Sebagaimana yang tampak pada kode, untuk view form_persegi_panjang.php berada pada folder PersegiPanjang

Pada form_persegi_panjang.php ketikkan kode berikut

<h4>Menghitung Keliling Persegi Panjang</h4>

<form action="<?= site_url('persegipanjang/hasil') ?>" method="POST">

<button type="submit">Hitung</button>

</form>

Buat sebuah file dengan nama MPersegiPanjang.php pada folder app\Models, kemudian isi dengan kode berikut

<?php

namespace App\Models;

use CodeIgniter\Model;

class MPersegiPanjang extends Model {

public $panjang;

public $lebar;

public function hitungKeliling() {

return 2 * ($this->panjang + $this->lebar);

} }

Tambahkan kode pada controller Persegipanjang.php menjadi

<?php

namespace App\Controllers;

use App\Models\MPersegiPanjang;

class Persegipanjang extends BaseController {

public function index() {

return view('PersegiPanjang/form_persegi_panjang');

}

public function hasil() {

$model = new MPersegiPanjang();

$model->lebar = $this->request->getPost('txt_lebar');

$model->panjang = $this->request->getPost('txt_panjang');

return view(

'PersegiPanjang/hasil',

[ 'persegiPanjang' => $model ]

);

} }

Perhatikan pada perintah

use App\Models\MPersegiPanjang;

Pada perintah bagian ini, kita memanggil kelas model MPersegiPanjang.php dimana jika kita lihat namespace dari kelas tersebut adalah

namespace App\Models;

Jadi untuk memanggil kelas lain pada CodeIgniter 4 dengan cara use [alamat namespace]\[nama class]

Pada fungsi hasil terdapat kode return view(

'PersegiPanjang/hasil',

[ 'persegiPanjang' => $model ]

);

Kita akan membuat sebuah file view dengan nama hasil.php pada folder app\Views\PersegiPanjang kemudian memasukkan kode berikut

<table>

<tr>

<th colspan="2">KELILING PERSEGI PANJANG</th>

</tr>

<tr>

<td>Panjang</td>

<td><?= $persegiPanjang->panjang ?></td>

</tr>

16 <tr>

<td>Lebar</td>

<td><?= $persegiPanjang->lebar ?></td>

</tr>

<tr>

<td>Keliling</td>

<td><?= $persegiPanjang->hitungKeliling() ?></td>

</tr>

<tr>

<td colspan="2"><a href="<?= site_url('persegipanjang/index') ?>">Kembali</a></td>

</tr>

</table>

Pada perintah

return view(

'PersegiPanjang/hasil',

[ 'persegiPanjang' => $model ]

);

Kita juga mengirimkan variabel $model yang merupakan instansiasi dari class model MPersegiPanjang yang diwakili dengan variable $persegiPanjang pada view ( hasil.php ).

Adapun hasilnya sebagai berikut :

Jika kita isi, misalnya dengan panjang = 4 dan lebar = 2 kemudian tombol Hitung diklik, maka akan mengarah ke halaman berikut

17 5. Menggunakan CLI untuk membuat file

Pada Codeigniter 4 kita juga dimudahkan dalam membuat file baik itu Model ataupun Controller, dengan cara buka command prompt kemudian masuk ke folder projek dengan cara mengetik

cd C:\xampp\htdocs\belajarci\

kemudian tekan enter, maka akan masuk ke folder projek belajarci

Ketikkan php spark maka kita akan melihat berbagai macam perintah yang dapat kita gunakan

Adapun dokumentasi pemakaian dapat kita lihat pada dokumentasi CI di laman https://codeigniter.com/user_guide/cli/cli_generators.html

Untuk latihan kita akan membuat sebuah controller dengan nama Persegitiga.php dan model dengan nama MPersegitiga.php

Untuk membuat controller menggunakan CLI dengan mengetikkan perintah php spark make:controller [nama controller] pada command prompt dalam hal ini adalah

php spark make:controller Persegitiga

Jika kita lihat pada folder app\Controllers akan terdapat file Persegitiga.php dengan isi kode seperti berikut

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class Persegitiga extends BaseController {

public function index() {

} }

Untuk membuat model menggunakan CLI dengan mengetikkan perintah php spark make:model [nama model] pada command prompt dalam hal ini adalah

php spark make:model Mpersegitiga

Jika kita lihat pada folder app\Models akan terdapat file MPersegitiga.php dengan isi kode seperti berikut

<?php

namespace App\Models;

use CodeIgniter\Model;

class MPersegitiga extends Model {

19 protected $DBGroup = 'default';

protected $table = 'mpersegitigas';

protected $primaryKey = 'id';

protected $useAutoIncrement = true;

protected $insertID = 0;

protected $returnType = 'array';

protected $useSoftDeletes = false;

protected $protectFields = true;

protected $allowedFields = [];

// Dates

protected $useTimestamps = false;

protected $dateFormat = 'datetime';

protected $createdField = 'created_at';

protected $updatedField = 'updated_at';

protected $deletedField = 'deleted_at';

// Validation

protected $validationRules = [];

protected $validationMessages = [];

protected $skipValidation = false;

protected $cleanValidationRules = true;

// Callbacks

protected $allowCallbacks = true;

protected $beforeInsert = [];

protected $afterInsert = [];

protected $beforeUpdate = [];

Sebagai latihan silahkan buat sebuah halaman dari persegitiga dengan inputan Panjang Alas dan Tinggi kemudian akan mengeluarkan hasil Keliling dan Luas Segitiga

BAB III

MEMBUAT PROJEK DAN DATABASE

Pada pertemuan ini dan dipertemuan selanjutnya, kita akan membuat sebuah projek kasus menggunakan framework CodeIgniter 4

A. Membuat projek SEKOLAH

1. Buat sebuah projek Framework CodeIgniter dengan nama sekolah 2. Atur base url, sehingga mengarah kepada projek sekolah

B. Membuat database sekolah

1. Merancang dan membuat database

Pada bagian ini kita akan merancang sebuah database seperti berikut

Setelah mengaktifkan apache dan mysql pada xampp, buka phpmyadmin pada browser (localhost/phpmyadmin)

Kemudian klik Databases (Basis Data) kemudian masukkan nama databasenya yaitu sekolah dan klik tombol create

2. Menghubungkan database dengan projek

Pada projek buka file Database.php yang terletak pada folder app\config, kemudian cari kode berikut

public $default = [ 'DSN' => '',

'hostname' => 'localhost', 'username' => '',

'password' => '', 'database' => '', 'DBDriver' => 'MySQLi', 'DBPrefix' => '',

22 ];

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'), 'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci', 'swapPre' => '',

'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];

Untuk menghubungkan projek dengan database kita akan mengisikan hostname, username, password dan database menjadi

public $default = [ 'DSN' => '',

'hostname' => 'localhost', 'username' => 'root', 'password' => '',

'database' => 'sekolah', 'DBDriver' => 'MySQLi', 'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'), 'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci', 'swapPre' => '',

'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306,

Pengisian pengaturan ini bergantung pada database, dari sisi alamat (hostname) karena projek berada dalam satu lokal yang sama dengan database, maka untuk hostname dapat diisi dengan localhost, namun jika tidak, maka menggunakan alamat IP yang tentunya antara komputer projek dan server database harus saling terkoneksi, begitu pula dengan username dan password juga tergantung pada setingan database

3. Database Migration pada Codeigniter 4

Pada bagian ini kita akan mempelajari bagaimana membuat tabel dari sebuah database menggunakan database migration, yaitu menyimpan Data Definition Language (DDL) dan Data Manipulation Language (DML) kedalam sebuah kode. Ini digunakan agar ketika projek ini diberikan ke lingkungan lain ataupun jika projek ini dikerjakan secara tim, tidak sulit untuk mendapatkan struktur databasenya.

Dalam membuat database migration ini kita akan menggunakan CLI sebagaimana halnya pada pertemuan sebelumnya yaitu membuat Controller dan Model menggunakan CLI.

Silahkan buka command prompt kemudian arahkan ke folder projeknya yaitu C:\xampp\htdocs\sekolah\

a. Membuat tabel Admin

Pada command prompt ketikkan perintah

php spark make:migration Admin

Setelah perintah diatas dijalankan, maka akan muncul sebuah file pada folder app\Database\Migration

<?php

Angka-angka yang muncul untuk penamaan file akan berbeda- beda dan ini tidak masalah, karena sudah diatur oleh CodeIgniter.

Jika kita buka file tersebut terdapat kode seperti berikut

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Admin extends Migration {

public function up() {

}

public function down() { //

} }

Kemudian kita akan menambahkan beberapa kode pada file tersebut sehingga menjadi

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

24 class Admin extends Migration

{

public function up() { 'auto_increment' => true ], 'constraint' => '255', ],

'role' => [

'type' => 'ENUM',

'constraint' => ['ROOT','ADMIN'], ],

]);

$this->forge->addPrimaryKey('id');

$this->forge->createTable('admin');

}

public function down() {

$this->forge->dropTable('admin');

} }

Kemudian pada command prompt jalankan perintah php spark migrate

Jika kita lihat pada database sekolah akan muncul tabel admin dan migration

25 Dengan struktur tabel seperti berikut

<?php

b. Membuat tabel Tahun Ajaran

Buat migration TahunAjaran dengan perintah php spark make:migration

TahunAjaran kemudian ketikkan kode berikut

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class TahunAjaran extends Migration {

public function up() {

$this->forge->addField([

'id' => [

'type' => 'INT', 'constrait' => 11, 'unsigned' => true, 'auto_increment' => true ],

'nama_tahun_ajaran' => [ 'type' => 'VARCHAR', 'constraint' => '20', ],

'semester' => [

'type' => 'ENUM',

'constraint' => ['GASAL','GENAP'], ],

'status_aktif' => [

public function down() {

$this->forge->dropTable('tahun_ajaran');

} }

Kemudian pada command prompt jalankan perintah php spark migrate

c. Membuat tabel Guru

Buat migration Guru dengan perintah php spark make:migration Guru

kemudian ketikkan kode berikut

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Guru extends Migration {

public function up() { 'auto_increment' => true ],

'tanggal_lahir' => [ 'type' => 'DATE', ],

27 'constraint' => '255', 'null' => true, ],

'password' => [

'type' => 'VARCHAR', 'constraint' => '255', ],

]);

$this->forge->addPrimaryKey('id');

$this->forge->createTable('guru');

}

public function down() {

$this->forge->dropTable('guru');

} }

<?php

Kemudian pada command prompt jalankan perintah php spark migrate

d. Membuat tabel Kelas

Buat migration Kelas dengan perintah php spark make:migration Kelas

kemudian ketikkan kode berikut

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Kelas extends Migration {

public function up() { 'auto_increment' => true ],

$this->forge->addForeignKey('tahun_ajaran_id', 'tahun_ajaran', 'id', 'RESTRICT', 'CASCADE');

$this->forge->addForeignKey('guru_id', 'guru', 'id', 'RESTRICT', 'CASCADE');

$this->forge->createTable('kelas');

}

public function down() { menghasilkan kode DDL

FOREIGN KEY(`tahun_ajaran_id`) REFERENCES `tahun_ajaran`(`id`) ON DELETE RESTRICT ON UPDATE CASCADE

dan

FOREIGN KEY(`guru_id`) REFERENCES `guru`(`id`) ON DELETE RESTRICT ON UPDATE CASCADE

Kemudian pada command prompt jalankan perintah php spark migrate

e. Membuat tabel Siswa

Buat migration Siswa dengan perintah php spark make:migration Siswa

kemudian ketikkan kode berikut

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Siswa extends Migration {

public function up() { 'auto_increment' => true ],

'nisn' => [

'type' => 'VARCHAR', 'constraint' => '12', 'unique' => true,

'tanggal_lahir' => [ 'type' => 'DATE', 'constraint' => '255', 'null' => true, ],

'password' => [

'type' => 'VARCHAR', 'constraint' => '255', ],

]);

$this->forge->addPrimaryKey('id');

$this->forge->createTable('siswa');

}

public function down()

{ $this->forge->dropTable('siswa');

} }

Kemudian pada command prompt jalankan perintah php spark migrate

B. Memasukkan data awal pada tabel

Dalam database migration, selain struktur tabel dapat juga mengisi data pada tabel yang disebut dengan istilah Seed. Untuk membuat Seed dengan menjalankan perintah

php spark make:seeder [nama seed]

Silahkan jalankan perintah berikut

php spark make:seeder RootAdmin

Pada folder app\Database\Seeds akan muncul sebuah file dengan nama RootAdmin.php yang beriisi kode seperti berikut

<?php

namespace App\Database\Seeds;

use CodeIgniter\Database\Seeder;

class RootAdmin extends Seeder

30 {

public function run() {

} }

tambah kode diatas pada bagian run() menjadi

<?php

namespace App\Database\Seeds;

use CodeIgniter\Database\Seeder;

class RootAdmin extends Seeder { public function run()

{

$data = [

'username' => 'adminroot', 'password' => md5('adminroot'), 'role' => 'ROOT'

];

$this->db->table('admin')->insert($data);

} }

Kemudian pada command prompt jalankan perintah

php spark db:seed RootAdmin

Jika kita lihat pada tabel admin akan terdapat data

BAB IV

MEMBUAT TEMPLATE

Pada pertemuan ini kita akan membuat template menggunakan framework CSS Bootstrap. Kita akan mempelajari bagaimana cara mengintegrasikan CSS pada Codeigniter.

Untuk template yang akan kita gunakan dapat diunduh pada laman https://startbootstrap.com/template/sb-admin

Klik Free Download untuk mengunduh template

Pada projek sekolah, buat sebuah folder dengan nama assets didalam folder public

Ekstrak file template sbadmin yang telah diunduh, kemudian copy folder js dan css ke dalam folder assets yang telah kita buat pada projek

Agar template dapat bekerja baik, perlu ditambahkan framework css

Bootstrap, dengan mengunduhnya dari laman

https://getbootstrap.com/docs/5.1/getting-started/download/ , kita akan mengunduh bootstrap yang bertipe Compiled CSS and JS

Ekstrak file bootstrap yang telah diunduh, kemudian copy folder bootstrap tersebut ke app\public\assets

Agar icon-icon pada template dapat bekerja secara offline, kita akan

mengunduh font awesome, buka laman

https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font- awesome-yourself kemudian klik tombol Download Font Awesome Free for the Web

Ekstrak file fontawesome yang telah diunduh, kemudian copy folder fontawesome ke folder app\public\assets

Kemudian buat folder dengan nama layout pada folder app\Views

Di dalam folder layout tersebut buat 4 buah file dengan nama _footer.php, _head.php, _header.php, _js.php, _sidebar.php dan main.php

_footer.php

<footer class="py-4 bg-light mt-auto">

<div class="container-fluid px-4">

<div class="d-flex align-items-center justify-content-between small">

</div>

</footer>

36 _head.php

<title>Sekolah</title>

_header.php

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">

<a class="navbar-brand ps-3" href="index.html">Sekolah</a>

<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle"

href="#!"><i class="fas fa-bars"></i></button>

<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">

<div class="input-group">

<input class="form-control" type="text" placeholder="Pencarian aria-label="Pencarian aria-describedby="btnNavbarSearch" />

<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa- search"></i></button>

</div>

</form>

<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button"

Dalam dokumen MODUL Web Programming II (Halaman 7-0)