Scribd
Unggah
123 tayangan

Modul CI 4

Modul ini membahas pengembangan aplikasi web menggunakan CodeIgniter 4. Teknologi yang dibahas meliputi HTML, CSS, JavaScript, PHP, MySQL, dan fitur-fitur utama CodeIgniter seperti MVC, routing, autentikasi, dan CRUD."

Diunggah oleh

eko.priyantoo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
123 tayangan

Modul CI 4

Modul ini membahas pengembangan aplikasi web menggunakan CodeIgniter 4. Teknologi yang dibahas meliputi HTML, CSS, JavaScript, PHP, MySQL, dan fitur-fitur utama CodeIgniter seperti MVC, routing, autentikasi, dan CRUD."

Diunggah oleh

eko.priyantoo
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Modul Pengembangan Aplikasi Web

dengan
CodeIgniter 4
HTML
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang
dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti
Cascading Style Sheets (CSS) dan bahasa skrip lainnya seperti JavaScript, VBScript, dan PHP.

Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal dan
membuat dokumen menjadi halaman web multimedia. HTML menggambarkan struktur halaman
web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen.

Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung siku. Tag seperti <img
/> dan <input /> langsung perkenalkan konten ke dalam halaman. Tag lain seperti <p>
mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin menyertakan tag
lain sebagai sub-elemen. Peramban tidak menampilkan tag HTML, tetapi menggunakannya
untuk menafsirkan konten halaman.

HTML dapat menyematkan program yang ditulis dalam bahasa skrip seperti JavaScript, yang
mempengaruhi perilaku dan konten halaman web. Dimasukkannya CSS mendefinisikan
tampilan dan tata letak konten. World Wide Web Consortium (W3C), mantan pengelola HTML
dan pemelihara standar CSS saat ini, telah mendorong penggunaan CSS pada HTML
presentasi eksplisit sejak 1997.

Struktur paling sederhana HTML adalah sebagai berikut


<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Elemen HTML
Elemen HTML ditentukan oleh tag awal, konten, dan tag akhir.
Contoh elemen:
<h1>My First Heading</h1>

Atribut HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML.
<a href="https://www.google.com">Link to google</a>
<img src="image.jpg">

CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemrograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya
untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS
dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan
XHTML.[1]

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran
border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar
teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet
yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita
untuk menampilkan halaman yang sama dengan format yang berbeda.

CSS menjelaskan bagaimana elemen HTML harus ditampilkan.

Sintaksnya memiliki struktur berikut:

<style>
p{
color: red;
text-align: center;
}
</style>

Javascript
JavaScript, sering disingkat JS, adalah bahasa pemrograman yang merupakan salah satu
teknologi inti dari World Wide Web, di samping HTML dan CSS. Pada tahun 2022, 98% situs
web menggunakan JavaScript di sisi klien untuk perilaku halaman web, sering kali
menggabungkan library pihak ketiga.
Contoh sintaks:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>

PHP
Hypertext Preprocessor atau PHP adalah bahasa penulisan skrip open-source yang
banyak digunakan dalam pemrograman atau pengembangan website (web
development). Bahasa ini umumnya dijalankan dalam komunikasi sisi server, dan saat
ini didukung oleh hampir semua sistem.
PHP menyediakan web server terintegrasi untuk development. Yaitu dengan
menjalankan perintah: php -S localhost:8000

MySQL
<?php
$servername = "localhost";
$username = "root";
$password = "";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
Code Igniter
CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan
model MVC (Model, View, Controller) untuk membangun situs web dinamis dengan
menggunakan PHP. CodeIgniter memudahkan pengembang web untuk membuat aplikasi web
dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis
pertama kali pada 28 Februari 2006.

Instalasi
1. Install PHP dan composer (Ganti ci4 dengan nama folder sesuai kehendak anda)
composer create-project codeigniter4/appstarter ci4
2. Buat database baru dengan nama latihan
3. Buka folder ci4 di Visual Studio Code
4. Untuk menjalankan aplikasi, bisa dengan mengeksekusi perintah ini di console:
php spark serve
5. Di Visual Studio Code bisa ditampilkan dengan shortcut Ctrl + `

6. Setelah itu aplikasi web dapat diakses ke halaman localhost:8080

7. Copy file env dengan nama .env kemudian aktifkan beberapa konfigurasi dengan
menghilangkan tanda komentar #. Berikut konfigurasi yang perlu diaktifkan pada saat
mengembangkan aplikasi:

CI_ENVIRONMENT = development
Environment ini diperlukan untuk memberitahukan secara detail ke user jika website
terjadi error. Konfigurasi ini idealnya diaktifkan hanya pada saat mengmbangkan
aplikasi. Pada saat launching, hendaknya dikembalikan ke production. Environment
production akan menyembunyikan informasi detail error yang terjadi dan akan
menampilkan halaman maintenance ke user.

app.baseURL = 'http://localhost:8080/'

Konfigurasi ini diisi dengan url yang dipakai oleh aplikasi

database.default.hostname = localhost
database.default.database = latihan
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi
database.default.DBPrefix =
database.default.port = 3306

Konfigurasi ini digunakan untuk melakukan koneksi ke database. Konfigurasi ini bisa
berbeda-beda tergantung dari database yang digunakan

8. Enable Auto Routing


Untuk menggunakannya, kita perlu mengubah opsi pengaturan setAutoRoute() menjadi
true di app/Config/Routes.php:
$routes->setAutoRoute(true);
Dan Anda perlu mengubah properti $autoRoutesImproved menjadi true di
app/Config/Feature.php:
public bool $autoRoutesImproved = true;

URI Segments
Code igniter memiliki aturan khusus pada URL nya untuk auto routing
example.com/class/method/parameter
example.com/class/method/parameter1/parameter2/parameter…dst
1. Segmen pertama mewakili nama class controller yang harus dipanggil.
2. Segmen kedua mewakili nama method class yang harus dipanggil. Khusus untuk
method index, tidak wajib dituliskan dalam URI
3. Segmen ketiga, dan segmen tambahan apa pun, mewakili ID atau parameter apa pun
yang akan diteruskan ke controller. Parameter dapat diisi lebih dari satu.

Untuk penulisan class dan method pada segmen URI wajib menggunakan lowercase
Autentikasi
CodeIgniter memiliki library official bawaan untuk keperluan autentikasi. Yaitu codeIgniter Shield
yang bisa diinstall dengan cara berikut:
1. Buka website di github
https://codeigniter4.github.io/shield
2. Install dengan menjalankan perintah berikut di terminal:
composer require codeigniter4/shield:dev-develop
php spark shield:setup
php spark migrate --all
3. Edit file app/Config/Email.php supaya sistem dapat mengirimkan email
public string $fromEmail = '[email protected]';
public string $fromName = 'Nama Anda';

Mempersiapkan UI
Buat folder dan file baru di app/Views/layouts/app.php
File app.php akan digunakan sebagai layout yang menampung banyak page yang ada pada
aplikasi website.

Buka https://getbootstrap.com/ dan klik menu Docs. Ketikkan kode dari dokumentasi dan beri
tambahan fungsi rendering page ke dalam file app.php sehingga menjadi seperti ini:
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstr
ap.min.css" rel="stylesheet"

integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7c
mDA6j6gD" crossorigin="anonymous">
<style>
<?= $this->renderSection('css') ?>
</style>
</head>

<body>
<h1>
<?= $this->renderSection('content') ?>
</h1>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap
.bundle.min.js"

integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTB
TkF7CXvN"
crossorigin="anonymous"></script>
<style>
<?= $this->renderSection('js') ?>
</style>
</body>

</html>

Buat folder dan file baru di app/Views/home/index.php


<?= $this->extend('layouts/app') ?>

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


<h1>Hello World!</h1>
<?= $this->endSection() ?>

Edit file di app/Controllers/Home.php


<?php

namespace App\Controllers;

class Home extends BaseController


{
public function index()
{
if (auth()->loggedIn()) {
return view('welcome_message');
} else {
return view('home/index');
}

}
}

Membuat Model, Controller, Migration, dan Seeder


Jalankan perintah berikut untuk membuat Model, Controller, Migration dan Seeder baru:
php spark make:scaffold todo
Secara otomatis akan membuatkan file-file yang dibutuhkan. Model digunakan untuk
pemodelan struktur data yang ada dalam database, Controller digunakan untuk pemrosesan
logika aplikasi. Migration digunakan untuk membuat struktur tabel pada database. Seeder
digunakan untuk mengisi sample data.
Membuat Fitur CRUD (Create, Read, Update, Delete)
Pada contoh ini kita akan menggunakan contoh kasus untuk membuat CRUD Todo dengan
langkah-langkah sebagai berikut:

Membuat Database Migration


Database migration digunakan untuk membuat database dan versioning pada saat
development tanpa harus melakukan eksekusi perintah DDL di databae.
https://codeigniter4.github.io/userguide/dbmgmt/migration.html
Buat tabel baru dengan edit file di
Database/Migrations/xxxxxxxxxx_Todo.php
<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Todo extends Migration


{
public function up()
{
$this->forge->addField([
'todo_id' => [
'type' => 'INT',
'auto_increment' => true,
],
'todo_title' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'todo_description' => [
'type' => 'TEXT',
'null' => true,
],
]);
$this->forge->addKey('todo_id', true);
$this->forge->createTable('todo');
}

public function down()


{
//
}
}

Membuat Model
Buka file app/Models/Todo.php kemudian edit beberapa propertinya sebagai berikut:

protected $table = 'todo';


protected $primaryKey = 'id';
protected $useAutoIncrement = true;

$table diisi dengan nama tabel yang terdapat di database. Defaultnya CI menggunakan huruf s
di setiap belakang nama tabel, namun penamaan ini bisa diganti sesuai kebutuhan.
$primaryKey diisi dengan nama kolom yang menjadi primary key di tabel.
$useAutoIncrement diisi jika kolom primary key pada tabel menggunakan tipe data integer
dengan fitur auto increment di databasenya.

protected $returnType = 'object';

$returnType dapat diisi array atau object sesuai dengan kebutuhan dan selera developer pada
saat menampilkan data. Jika return type array, maka penulisannya seperti ini: $row[‘judul’]. Jika
return type array, maka penulisannya seperti ini: $row->judul.

protected $allowedFields = ['judul', 'deskripsi'];

$allowedFields diisi dengan field atau kolom-kolom mana saja yang dapat diisi oleh user melalui
website. Kolom seperti id auto increment, tanggal created_at, updated_at atau kolom lain yang
terisi otomatis melalui database tidak perlu dimasukkan ke properti $allowedFields.

protected $useTimestamps = true;

$useTimestamps diset menjadi true untuk menggunakan fitur pengisian otomatis pada saat
data diinsert atau diupdate. Fitur ini memerlukan kolom created_at dan updated_at untuk dibuat
di tabel pada databasenya.

app/Models/Todo.php
<?php

namespace App\Models;

use CodeIgniter\Model;
class Todo extends Model
{
protected $DBGroup = 'default';
protected $table = 'todo';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'object';
protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = ['judul', 'deskripsi'];

// Dates
protected $useTimestamps = true;
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 = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}

Membuat View
Buat folder baru app/Views/todo kemudian buat file baru di app/Views/todo/index.php
app/Views/todo/index.php
<?= $this->extend('layouts/app') ?>

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


<h1>Todo</h1>
<a class="btn btn-success" href="<?= site_url('todo/new') ?>"
role="button">Tambah</a>
<table class="table">
<tr>
<th scope="col">Judul</th>
<th scope="col">Deskripsi</th>
<th scope="col">Tanggal Dibuat</th>
<th scope="col">Tanggal diupdate</th>
<th scope="col">Aksi</th>
</tr>
<?php foreach ($rows as $row): ?>
<tr>
<th>
<?= $row->judul; ?>
</th>
<td>
<?= $row->deskripsi; ?>
</td>
<td>
<?= $row->created_at; ?>
</td>
<td>
<?= $row->updated_at; ?>
</td>
<td>
<form method="post" action="<?= site_url('todo/delete/' .
$row->id); ?>">
<div class="btn-group btn-group-sm" role="group">
<a href="<?= site_url('todo/edit/' . $row->id); ?>"
class="btn btn-warning">edit</a>
<button type="submit" class="btn
btn-danger">delete</button>
</div>
</form>
</td>
</tr>
<?php endforeach; ?>
</table>
<?= $this->endSection() ?>

buat file baru di app/Views/todo/form.php


app/Views/todo/form.php
<?= $this->extend('layouts/app') ?>

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


<h2>Input Todo</h2>
<form method="post" action="<?= site_url('todo/' . $action . ($action ==
'update' ? '/' . $row->id : '')); ?>">
<div class="mb-3">
<label class="form-label">Judul</label>
<input type="text" class="form-control" name="judul" value="<?=
$row->judul; ?>">
</div>
<div class="mb-3">
<label class="form-label">Deskripsi</label>
<input type="text" class="form-control" name="deskripsi" value="<?=
$row->deskripsi; ?>">
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
<?= $this->endSection() ?>

Membuat Controller
Buat folder baru app/Views/todo kemudian buat file baru di app/Views/todo/index.php
app/Views/todo/index.php
<?php

namespace App\Controllers;

use App\Controllers\BaseController;
class Todo extends BaseController
{
public function getIndex()
{
$todoModel = new \App\Models\Todo();
$todos = $todoModel->findAll();
$data = [
'rows' => $todos,
];
return view('todo/index', $data);
}

public function getNew()


{
$todoModel = new \App\Models\Todo();
$data = [
'row' => $todoModel,
'action' => 'create',
];
return view('todo/form', $data);
}

public function postCreate()


{
$data = $this->request->getPost();
$todoModel = new \App\Models\Todo();
$todoModel->insert($data);
session()->setFlashdata('success', 'Data berhasil disimpan');
$this->response->redirect(site_url('todo'));
}

public function getEdit($id)


{
$todoModel = new \App\Models\Todo();
$data = [
'row' => $todoModel->find($id),
'action' => 'update',
];
return view('todo/form', $data);
}
public function postUpdate($id)
{
$data = $this->request->getPost();
$todoModel = new \App\Models\Todo();
$todoModel->update($id, $data);
session()->setFlashdata('success', 'Data berhasil disimpan');
$this->response->redirect(site_url('todo'));
}

public function postDelete($id)


{
$todoModel = new \App\Models\Todo();
$todoModel->delete($id);
session()->setFlashdata('success', 'Data berhasil dihapus');
$this->response->redirect(site_url('todo'));
}
}

Hasil output CRUD


Setelah membuat Model, View, dan Controllernya maka akan dihasilkan output berikut
Membuat Reporting PDF
Jalankan perintah berikut untuk menambahkan fitur reporting pdf
1. Install dompdf melalui composer
composer require dompdf/dompdf
2. Tambahkan method/function baru di app/Controllers/Todo.php
public function getPdf($id)
{
$todoModel = new \App\Models\Todo();
$data = [
'row' => $todoModel->find($id),
];
$filename = 'todo_' . date('y-m-d_H.i.s') . '.pdf';
$dompdf = new Dompdf();
$dompdf->getOptions()->setChroot(FCPATH);
$dompdf->loadHtml(view('todo/report', $data));
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream($filename, ['Attachment' => 0]);
}
3. Buat layout baru di app/Views/layouts/print.php
<!DOCTYPE html>
<html>

<head>
<title>Cetak</title>
<?= $this->renderSection('css') ?>
</head>

<style>
</style>

<body>
<div class="report">
<?= $this->renderSection('content') ?>
</div>
</body>

</html>
4. Buat view baru untuk tampilan pdf nya di app/Views/todo/report.php
<?= $this->extend('layouts/print') ?>

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


<h1>Todo</h1>
<table>
<tr>
<td>Judul</td>
<td>:</td>
<td>
<?= $row->judul; ?>
</td>
</tr>
<tr>
<td>Deskripsi</td>
<td>:</td>
<td>
<?= $row->deskripsi; ?>
</td>
</tr>
</table>
<?= $this->endSection() ?>
5. Akses url method pdf untuk melihat hasillaporan. Misalnya
http://localhost:8080/todo/pdf/1
Membuat Resource Controller
Jalankan perintah berikut untuk membuat Controller resource baru:
php spark make:controller api/todo --restful

<?php

namespace App\Controllers;

use CodeIgniter\RESTful\ResourceController;

class Todo extends ResourceController


{
protected $modelName = 'App\Models\Todo';
protected $format = 'json';

public function index() {}

public function show($id = null) {}

public function new() {}

public function create() {}

public function edit($id = null) {}

public function update($id = null) {}

public function delete($id = null) {}


}
Draft
composer create-project codeigniter4/appstarter project-root
.env
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------

CI_ENVIRONMENT = development

#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------

# app.baseURL = ''
# If you have trouble with `.`, you could also use `_`.
# app_baseURL = ''
# app.forceGlobalSecureRequests = false
# app.CSPEnabled = false

#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------

database.default.hostname = localhost
database.default.database = ci4
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi
database.default.DBPrefix =
database.default.port = 3306

php spark make:scaffold user --restful --suffix --return entity

Anda mungkin juga menyukai