Membuat database sekolah - MEMBUAT PROJEK DAN DATABASE

BAB III MEMBUAT PROJEK DAN DATABASE

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"

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

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

</div>

</a>

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

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

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

</div>

</a>

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

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

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

</div>

</a>

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

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

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

</div>

</a>

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

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

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

</div>

<!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

</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') ?>

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

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

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

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

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

namespace App\Models;

use CodeIgniter\Model;

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

namespace App\Controllers;

use App\Controllers\BaseController;

use App\Models\MTahunAjaran;

class Tahunajaran extends BaseController {

private $mtahunajaran;

public function construct() {

$this->mtahunajaran = new MTahunAjaran();

}

public function index() {

$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

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

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

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

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

Jika kita membuka laman

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

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

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

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

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

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

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

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

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

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

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

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

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

43 $data = [

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

];

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

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

}

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

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

}

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

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