MODUL Web Programming II

(1)

MODUL

Web Programming II

Oleh : Eva Meilinda, M.Kom

Program Studi Sistem Informasi Kampus Pontianak Fakultas Teknik dan Informatika

Universitas Bina Sarana Informatika

2021

(2)

1 DAFTAR ISI

BAB I PENGENALAN FRAMEWORK CODEIGNITER 4 ... 3

A. Framework ... 3

B. CodeIgniter 4 ... 3

C. Installasi Perangkat Lunak ... 3

D. Installasi CodeIgniter 4 ... 3

E. Struktur Folder CodeIgniter ... 7

BAB II MODEL, VIEW, CONTROLLER ... 9

A. Pengertian MVC ... 9

B. Cara kerja CodeIgniter ... 9

BAB III MEMBUAT PROJEK DAN DATABASE ... 21

A. Membuat projek SEKOLAH ... 21

B. Membuat database sekolah ... 21

BAB IV MEMBUAT TEMPLATE ... 32

BAB V MEMBUAT CRUD TAHUN AJARAN ... 40

A. Menampilkan data Tahun Ajaran ... 40

B. Membuat Form Tambah Tahun Ajaran ... 42

C. Membuat fungsi Create Tahun Ajaran ... 42

D. Membuat fungsi menampilkan form ubah data ... 43

E. Membuat fungsi perbaharui (update) data ... 43

F. Membuat fungsi untuk menghapus data ... 44

G. Membuat fungsi aktivasi Tahun Ajaran ... 44

(3)

2

BAB I

PENGENALAN FRAMEWORK CODEIGNITER 4

Pada bagian ini para mahasiswa diharapkan dapat memahami materi-materi fundamental yang diperlukan dalam mempelajari framework CodeIgniter 4 serta apa saja alat (tools) yang diperlukan dan bagaimana cara melakukan installasi perangkat lunak yang diperlukan.

A. Framework

Framework (Kerangka Kerja) merupakan istilah yang sering kali muncul dalam pengembangan perangkat lunak baik itu website maupun desktop. Dengan framework akan membantu pengembang perangkat lunak agar lebih cepat, selain itu dengan framework juga akan membuat penyusunan kode menjadi lebih terstruktur dan konsisten.

B. CodeIgniter 4

CodeIgniter merupakan salah satu Framework untuk membuat Web yang menggunakan bahasa pemrograman PHP, saat ini CodeIgniter telah merelease versi 4 (CodeIgniter 4). Codeigniter menggunakan pola desain Model-View-Controller yang juga banyak digunakan oleh framework- framework lainnya. Untuk lebih jelas mengenai codeigniter dapat langsung ke situs resmi codeigniter yaitu https://codeigniter.com/

C. Installasi Perangkat Lunak

Perangkat lunak yang dibutuhkan dalam pembelajaran ini yaitu:

1. Web Server

Untuk web server kita menggunakan XAMPP yang dapat di unduh di https://www.apachefriends.org/index.html

2. Text Editor

Text editor merupakan media untuk melakukan pengkodean program.

Terdapat banya text editor yang dapat digunakan seperti notepad, notepad++, sublime text, atom, VS Code dan lain-lain. Agar lebih mempermudah, kita akan menggunakan Text Editor VS Code yang dapat di unduh di https://code.visualstudio.com/download

3. Web Browser

Web browser digunakan untuk melihat hasil dari aplikasi yang dibuat, web browser yang digunakan juga bebas seperti Mozilla, Chrome dan lain-lain.

4. CodeIgniter

Merupakan framework PHP yang akan digunakan dalam pembuatan website

D. Installasi CodeIgniter 4

a. Framework CodeIgniter 4 dapat di unduh di https://codeigniter.com/download

(4)

3

b. Setelah di unduh ekstrak file CodeIgniter pada folder C:\xampp\htdocs

(5)

4

c. Kemudian ubah nama folder menjadi belajarci

d. Aktifkan XAMPP, kemudian buka browser dan ketikkan localhost/belajarci

(6)

5

e. Kemudian klik public/ jika berhasil, maka akan muncul halaman beranda dari codeigniter

(7)

6

f. Untuk melihat struktur kode dari codeigniter, kita akan menggunakan VS Code. Silahkan jalankan VS Code, kemudian pilih menu File -> Open Folder kemudian pilih folder projek yang telah dibuat yaitu C:\xampp\htdocs\belajarci

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.

(8)

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.

(9)

8

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.

}

(10)

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

class Latihanpertama extends BaseController {

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

}

(11)

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

(12)

11

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

}

public function lihat() {

return view('latihan_pertama');

}

public function subdetail() {

return view('detail/sub_latihan_pertama');

}

(13)

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

(14)

13 4. Membuat dan menggunakan Model

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

<?php

class Persegipanjang extends BaseController {

return view('PersegiPanjang/form_persegi_panjang');

} }

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

(15)

14

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);

} }

(16)

15

Tambahkan kode pada controller Persegipanjang.php menjadi

<?php

use App\Models\MPersegiPanjang;

class Persegipanjang extends BaseController {

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

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

Pada fungsi hasil terdapat kode return view(

);

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>

(17)

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(

);

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

(18)

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

(19)

18

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

use App\Controllers\BaseController;

class Persegitiga extends BaseController {

//

} }

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

class MPersegitiga extends Model {

(20)

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 = [];

protected $afterUpdate = [];

protected $beforeFind = [];

protected $afterFind = [];

protected $beforeDelete = [];

protected $afterDelete = [];

}

LATIHAN

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

(21)

20

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)

(22)

21

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' => '',

(23)

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.

(24)

23

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

(25)

24 class Admin extends Migration

{

$this->forge->addField([

'id' => [

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

'username' => [

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

'password' => [

'type' => 'VARCHAR', '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

(26)

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

class TahunAjaran extends Migration {

'id' => [

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

'semester' => [

'type' => 'ENUM',

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

'status_aktif' => [

(27)

26 'type' => 'BOOLEAN',

'default' => 0,

]);

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

}

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

} }

c. Membuat tabel Guru

Buat migration Guru dengan perintah php spark make:migration Guru

kemudian ketikkan kode berikut

<?php

class Guru extends Migration {

'id' => [

'nik' => [

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

'nama' => [

'tempat_lahir' => [

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

],

(28)

27 'no_hp' => [

'type' => 'VARCHAR', 'constraint' => '20', 'null' => true, ],

'alamat' => [

'password' => [

]);

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

}

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

} }

<?php

d. Membuat tabel Kelas

Buat migration Kelas dengan perintah php spark make:migration Kelas

class Kelas extends Migration {

'id' => [

'tahun_ajaran_id' => [ 'type' => 'INT', 'constrait' => 11, 'unsigned' => true, ],

'nama_kelas' => [

'type' => 'VARCHAR', 'constraint' => '20',

(29)

28 ],

'guru_id' => [ 'type' => 'INT', 'constrait' => 11, 'unsigned' => 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');

}

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

} }

<?php

Pada kode diatas terdapat tambahan foreign key yang akan 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

e. Membuat tabel Siswa

Buat migration Siswa dengan perintah php spark make:migration Siswa

class Siswa extends Migration {

'id' => [

'nisn' => [

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

(30)

29 ],

'nama' => [

'tempat_lahir' => [

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

'no_hp' => [

'alamat' => [

'password' => [

]);

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

}

public function down()

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

} }

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

(31)

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

(32)

31

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

(33)

32

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

(34)

33

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

(35)

34

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

(36)

35

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>

(37)

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"

data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>

<ul class="dropdown-menu dropdown-menu-end" aria- labelledby="navbarDropdown">

<li><a class="dropdown-item" href="<?= base_url('admin/index')

?>">Administrator</a></li>

<li><a class="dropdown-item" href="<?= base_url('ubahpassword/index') ?>">Ubah

</a></li>

<li>

<hr class="dropdown-divider" />

</li>

<li><a class="dropdown-item" href="<?= base_url('logout/index')

?>">Logout</a></li>

ul>

</nav>

_js.php

<script src="<?= base_url('assets/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>

<script src="<?= base_url('assets/js/scripts.js') ?>"></script>

_sidebar.php

<div id="layoutSidenav_nav">

<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">

<div class="sb-sidenav-menu">

<div class="nav">

<a class="nav-link" href="<?= base_url('home/index') ?>">

<div class="sb-nav-link-icon">

</

</li>

</ul>

Password

(38)

37

<i class="fas fa-tachometer-alt"></i>

</div>

</a>

<a class="nav-link" href="<?= base_url('tahunajaran/index') ?>">

<i class="far fa-calendar-alt"></i>

</div>

</a>

<a class="nav-link" href="<?= base_url('guru/index') ?>">

<i class="fas fa-chalkboard-teacher"></i>

</div>

</a>

<a class="nav-link" href="<?= base_url('siswa/index') ?>">

<i class="fas fa-user-graduate"></i>

</div>

</a>

<a class="nav-link" href="<?= base_url('kelas/index') ?>">

<i class="fas fa-door-open"></i>

</div>

</a>

</div>

</nav>

</div>

main.php

<!DOCTYPE html>

<html lang="en">

<head>

<?php include_once('_head.php') ?>

</head>

<body class="sb-nav-fixed">

<?php include_once('_header.php') ?>

<div id="layoutSidenav">

<div id="layoutSidenav_content">

<?php include_once('_sidebar.php') ?>

<main>

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

<br/>

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

</div>

</main>

<?php include_once('_footer.php') ?>

Kelas Siswa Guru

Tahun Ajaran Beranda

(39)

38

</div>

<?php include_once('_js.php') ?>

</body>

</html>

Buka file welcome_message.php yang berada dalam folder app\Views kemudian ubah kodenya menjadi

<?= $this->extend('layout/main') ?>

<h4>Selamat datang di ruang admin Sistem Informasi Sekolah</h4>

Jika kita buka laman http://localhost/sekolah/public/ akan menjadi

(40)

39

BAB V

MEMBUAT CRUD TAHUN AJARAN

A. Menampilkan data Tahun Ajaran

Buat model Tahun Ajaran dengan nama MTahunAjaran.php pada app\Models ketikkan kode berikut

<?php

class MTahunAjaran extends Model {

protected $table = 'tahun_ajaran';

protected $primaryKey = 'id';

protected $allowedFields = ['nama_tahun_ajaran', 'semester', 'status_aktif'];

}

Beberapa settingan yang dilakukan pada model Tahun Ajaran adalah - $table dengan nilai tahun_ajaran karena akan berkomunikasi dengan

tabel tahun_ajaran

- $primaryKey merupakan kolom kunci utama (primary key) pada tabel tahun_ajaran

- $allowedFields merupakan kolom pada tabel tahun_ajaran yang boleh diinput

Langkah selanjutnya adalah membuat Controller Tahun Ajaran dengan nama TahunAjaran.php pada app\Controller

<?php

use App\Controllers\BaseController;

use App\Models\MTahunAjaran;

class Tahunajaran extends BaseController {

private $mtahunajaran;

public function construct() {

$this->mtahunajaran = new MTahunAjaran();

}

$data['tahunAjaran'] = $this->mtahunajaran->findAll();

return view('tahun-ajaran/index', $data);

} }

Kemudian kita buat file index.php sebagai tampilan pada folder app\Views\tahun-ajaran dan isi dengan kode

(41)

40

<a href="<?= base_url('/tahunajaran/create'); ?>" class="btn btn-primary"><i class="fas fa- plus"></i> Tambah</a>

<hr />

<table class="table table-bordered table-sm">

<tr>

<th>No</th>

<th>Nama Tahun Ajaran</th>

<th>Semester</th>

<th>Status Aktif</th>

</tr>

<?php

$no = 1;

foreach ($tahunAjaran as $row) {

?>

<tr>

<td><?= $no++; ?></td>

<td><?= $row['nama_tahun_ajaran']; ?></td>

<td><?= $row['semester']; ?></td>

<td><?= $row['status_aktif'] == 1 ? 'AKTIF' : 'TIDAK AKTIF'; ?></td>

<td>

<a title="Edit" href="<?= base_url("tahunajaran/edit/" . $row['id']) ?>" class="btn btn- outline-info btn-sm"><i class="far fa-edit"></i></a>

<a title="Aktivasi" href="<?= base_url("tahunajaran/aktivasi/" . $row['id']) ?>"

class="btn btn-outline-success btn-sm" onclick="return confirm('Apakah Anda yakin ingin mengaktifkan Tahun Ajaran ini ?')"><i class="far fa-check-square"></i></a>

<a title="Delete" href="<?= base_url("tahunajaran/delete/" . $row['id']) ?>" class="btn btn-outline-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus data ?')"><i class="far fa-trash-alt"></i></a>

</td>

</tr>

<?php }

?>

</table>

Jika kita membuka laman

http://localhost/sekolah/public/tahunajaran/index, maka akan tampil seperti berikut

(42)

41

B. Membuat Form Tambah Tahun Ajaran

Buka file Controller TahunAjaran.php kemudian tambahkan fungsi dengan nama create

public function create() {

return view('tahun-ajaran/create');

}

Buat sebuah file create.php pada folder app\Views\tahun-ajaran dan ketikkan kode berikut

<h4>Tambah Tahun Ajaran</h4>

<form method="post" action="<?= base_url('tahunajaran/store') ?>">

<div class="form-group">

<label for="nama">Nama Tahun Ajaran</label>

<input type="text" class="form-control" name="nama_tahun_ajaran">

</div>

<div class=" form-group">

<label for="nama">Semester</label>

<select name="semester" class="form-control">

<option>-- PILIH SEMESTER --</option>

<option value="GASAL">GASAL</option>

<option value="GENAP">GENAP</option>

</select>

</div>

<hr />

<button class="btn btn-primary" type="submit"><i class="far fa-save"></i> Simpan</button>

<a class="btn btn-danger" href="<?= base_url('/tahunajaran') ?>"><i class="fas fa-ban"></i>

Batal</a>

</form>

C. Membuat fungsi Create Tahun Ajaran

Pada kode file create.php terdapat form dengan action yang mengarah kepada tahunajaran/store (action="<?= base_url('tahunajaran/store') ?>") maka pada controller Tahunajaran.php kita akan menambahkan sebuah function dengan nama store yang akan berfungsi untuk menyimpan data Tahun Ajaran

public function store() {

$data = [

'nama_tahun_ajaran' => $this->request->getVar('nama_tahun_ajaran'), 'semester' => $this->request->getVar('semester')

];

$this->mtahunajaran->insert($data);

return redirect()->to('/tahunajaran');

(43)

42 }

D. Membuat fungsi menampilkan form ubah data

Buka file Controller TahunAjaran.php kemudian tambahkan fungsi dengan nama edit

public function edit($id) {

$data['tahunAjaran'] = $this->mtahunajaran->find($id);

return view('tahun-ajaran/edit', $data);

}

Buat sebuah file edit.php pada folder app\Views\tahun-ajaran dan ketikkan kode berikut

<h4>Ubah Tahun Ajaran</h4>

<form method="post" action="<?= base_url('tahunajaran/update/' . $tahunAjaran['id']) ?>">

<div class="form-group">

<label for="nama">Nama Tahun Ajaran</label>

<input type="text" class="form-control" name="nama_tahun_ajaran" value="<?=

$tahunAjaran['nama_tahun_ajaran'] ?>">

</div>

<div class=" form-group">

<label for="nama">Semester</label>

<select name="semester" class="form-control">

<option>-- PILIH SEMESTER --</option>

<option value="GASAL" <?= ($tahunAjaran['semester'] == "GASAL" ? "selected" : "");

?>>GASAL</option>

<option value="GENAP" <?= ($tahunAjaran['semester'] == "GENAP" ? "selected" : "");

?>>GENAP</option>

</select>

</div>

<hr />

<button class="btn btn-success" type="submit"><i class="far fa-edit"></i> Ubah</button>

<a class="btn btn-danger" href="<?= base_url('/tahunajaran') ?>"><i class="fas fa-ban"></i>

Batal</a>

</form>

E. Membuat fungsi perbaharui (update) data

Pada kode file edit.php terdapat form dengan action yang mengarah kepada tahunajaran/update (action="<?= base_url('tahunajaran/update/' .

$tahunAjaran['id']) ?>">) yang juga mengambil parameter dari nilai id tahun ajaran maka pada controller Tahunajaran.php kita akan menambahkan sebuah function dengan nama update dengan sebuah parameter yang akan menangkap id tahun ajaran yang akan berfungsi untuk mengubah data Tahun Ajaran

public function update($id) {

(44)

43 $data = [

'nama_tahun_ajaran' => $this->request->getVar('nama_tahun_ajaran'), 'semester' => $this->request->getVar('semester')

];

$this->mtahunajaran->update($id, $data);

}

F. Membuat fungsi untuk menghapus data

Buka file Controller TahunAjaran.php kemudian tambahkan fungsi dengan nama edit

public function delete($id) {

$this->mtahunajaran->delete($id);

}

G. Membuat fungsi aktivasi Tahun Ajaran

Pada bagian ini kita akan membuat sebuah fungsi dimana akan di set non aktif pada tahun ajaran yang statusnya aktif, kemudian mengaktifkan tahun ajaran yang dipilih. Buat sebuah fungsi dengan nama aktivasi pada controller Tahunajaran.php

public function aktivasi($id) {

// Mengubah data yang status aktif nya 1 (aktif) menjadi 0 (tidak aktif)

$this->mtahunajaran->where('status_aktif', 1)->set(['status_aktif' => 0])->update();

// Mengubah status aktif yang dipilih menjadi 1 (aktif) $this->mtahunajaran->update($id, ['status_aktif' => 1]);

}

berikut

<?php

use App\Models\MTahunAjaran;

class Tahunajaran extends BaseController {

private $mtahunajaran;

public function construct() {

$this->mtahunajaran = new MTahunAjaran();

}

$data['tahunAjaran'] = $this->mtahunajaran->findAll();

return view('tahun-ajaran/index', $data);

}

Pada bagian ini kita telah membuat CRUD untuk halaman Tahun Ajaran, adapun keseluruhan kode controller tahun ajaran (Tahunajaran.php) sebagai

(45)

44 }

$this->mtahunajaran->insert($data);

return redirect()->to('/tahunajaran');

]; 'semester' => $this->request->getVar('semester') 'nama_tahun_ajaran' => $this->request->getVar('nama_tahun_ajaran'),

$data = [ {

public function store()

} return view('tahun-ajaran/edit', $data);

$data['tahunAjaran'] = $this->mtahunajaran->find($id);

{

public function edit($id)

}

$this->mtahunajaran->update($id, $data); ];

'semester' => $this->request->getVar('semester')

'nama_tahun_ajaran' => $this->request->getVar('nama_tahun_ajaran'),

$data = [ {

public function update($id)

} return redirect()->to('/tahunajaran'); $this->mtahunajaran->delete($id);

{

public function delete($id)

}

$this->mtahunajaran->update($id, ['status_aktif' => 1]);

// Mengubah status aktif yang dipilih menjadi 1 (aktif)

$this->mtahunajaran->where('status_aktif', 1)->set(['status_aktif' => 0])->update();

// Mengubah data yang status aktif nya 1 (aktif) menjadi 0 (tidak aktif) {

public function aktivasi($id)

}

} return view('tahun-ajaran/create');

{

public function create()

(46)

45 DAFTAR PUSTAKA

Simanjuntak, Pastima; Kasnady Arwin. (2016). Analisis Model View Controller (MVC) pada Bahasa PHP (diakses 2 Januari 2021)

https://ejournal.medan.uph.edu/index.php/isd/article/download/80/10 https://ejournal.bsi.ac.id/ejurnal/index.php/paradigma/article/view/5092 https://journal.umy.ac.id/index.php/berdikari/article/download/6239/4010 https://www.dicoding.com/blog/apa-itu-mvc-pahami-konsepnya/