Tutorial CRUD Codeigniter 4 Bahasa Indonesia – Menampilkan Data

Initekno.com – Pada artikel kali ini kita akan membahas tentang CRUD yaitu menampilkan data, ini adalah hal wajib yang harus kamu kuasai jika belajar framework backend baru. untuk menguasai artikel ini kamu diharuskan membaca artikel tentang koneksi dan instalasi codeigniter4. Silahkan baca pada link berikut ini:

Tutorial Codeigniter 4 Bahasa Indonesia – Koneksi Database dan Tampil Data

Daftar Isi

Buat Tabel Member

Untuk komponen tabel member seperti berikut ini, tabel ini hanya contoh sederhana saja. silahkan kamu sesuaikan dengan artibut tabel yang kamu inginkan.

CREATE TABLE `tbl_members` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(120) DEFAULT NULL,
 `email` varchar(120) DEFAULT NULL,
 `mobile` varchar(45) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tbl_members` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(120) DEFAULT NULL,

`email` varchar(120) DEFAULT NULL,

`mobile` varchar(45) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Membuat Controller

Buat controller member dengan menggunakan php spark, perintahnya seperti berikut ini, ketikkan pada command prompt pada root project web kamu.

php spark make:controller Member

1	php spark make:controller Member

maka akan tercipta file pada direktori app/controllers/Member.php ubah kodenya menjadi seperti berikut ini, tepatnya pada method listMember()

<?php

namespace App\Controllers;

use App\Models\MemberModel;

class Member extends BaseController
{
public function listMember()
    {
        $memberModel = new MemberModel();

        $members = $memberModel->findAll();

        return view('list-members', [
            "members" => $members,
        ]);
    }
}

<?php

namespace App\Controllers;

use App\Models\MemberModel;

class Member extends BaseController

{

public function listMember()

{

$memberModel = new MemberModel();

$members = $memberModel->findAll();

return view('list-members', [

"members" => $members,

]);

}

Membuat Model

Sekarang masuk kedalam bagian model. Disini kamu akan membuat model dengan perintah berikut :

php spark make:model Member --suffix

1	php spark make:model Member --suffix

sehingga telah tercipta file membermodel.php otomatis. tepatnya berada pada direktori app/models/MemberModel.php kemudian anda ubah menjadi seperti berikut ini:

MemberModel.php

<?php

namespace App\Models;

use CodeIgniter\Model;

class MemberModel extends Model
{
	protected $DBGroup              = 'default';
	protected $table                = 'tbl_members';
	protected $primaryKey           = 'id';
	protected $useAutoIncrement     = true;
	protected $insertID             = 0;
	protected $returnType           = 'array';
	protected $useSoftDelete        = false;
	protected $protectFields        = true;
	protected $allowedFields        = [
      'name',
      'email',
      'mobile'
    ];

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

<?php

namespace App\Models;

use CodeIgniter\Model;

class MemberModel extends Model

{

protected $DBGroup = 'default';

protected $table = 'tbl_members';

protected $primaryKey = 'id';

protected $useAutoIncrement = true;

protected $insertID = 0;

protected $returnType = 'array';

protected $useSoftDelete = false;

protected $protectFields = true;

protected $allowedFields = [

'name',

'email',

'mobile'

];

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

}

Membuat View

Buat file baru bernama app.php dan simpan pada views, app.php ini adalah bagian dari sistem templating codeigniter4 yaitu renderSection akan memanggil body yang ada pada list-members.php

app.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CodeIgniter 4 CRUD Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

   <?= $this->renderSection("body") ?>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CodeIgniter 4 CRUD Tutorial</title>

</head>

<body>

<?= $this->renderSection("body") ?>

</body>

</html>

Sekarang buat file baru dan beri nama dengan list-members.php extendkan file app.php sehingga file akan menjadi kerangka satu keutuhan.

list-members.php

<?= $this->extend("app") ?>

<?= $this->section("body") ?>

<div class="container" style="margin-top:20px;">
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Data Member
                <a href="<?= base_url('add-member') ?>" style="margin-top: -7px;" class="btn btn-sm btn-default pull-right">+</a>
            </div>
            <div class="panel-body">

                <?php
                    if(session()->has("success")){
                        ?>
                            <div class="alert alert-success">
                                <?= session("success") ?>
                            </div>
                        <?php
                    }
                ?>

                <table class="table">
                    <thead>
                        <th>ID</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Nohp</th>
                        <th>Aksi</th>
                    </thead>
                    <tbody>
                        <?php
                        foreach ($members as $value) {
                        ?>
                            <tr>
                                <td><?php echo $value['id']; ?></td>
                                <td><?php echo $value['name']; ?></td>
                                <td><?php echo $value['email']; ?></td>
                                <td><?php echo $value['mobile']; ?></td>
                                <td>
                                    <a href="<?= base_url('edit-member/' . $value['id']); ?>" class="btn btn-primary btn-sm">E</a>
                                    <a href="<?= base_url('delete-member/' . $value['id']); ?>" class="btn btn-danger btn-sm" onclick="return confirm('apa kamu yakin akan hapus data?')">X</a>
                                </td>
                            </tr>
                        <?php
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

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

<?= $this->extend("app") ?>

<?= $this->section("body") ?>

Data Member

<a href="<?= base_url('add-member') ?>" style="margin-top: -7px;" class="btn btn-sm btn-default pull-right">+</a>

</div>

<?php

if(session()->has("success")){

<?= session("success") ?>

</div>

<?php

}

<thead>

<th>Email</th>

</thead>

<tbody>

<?php

foreach ($members as $value) {

<tr>

<td>

<a href="<?= base_url('edit-member/' . $value['id']); ?>" class="btn btn-primary btn-sm">E</a>

<a href="<?= base_url('delete-member/' . $value['id']); ?>" class="btn btn-danger btn-sm" onclick="return confirm('apa kamu yakin akan hapus data?')">X</a>

</td>

</tr>

<?php

}

</tbody>

</table>

</div>

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

Routes

app/config/Routes.php

$routes->get("list-members", "Member::listMember");

1	$routes->get("list-members", "Member::listMember");

Setelah selesai, sekarang jalankan server lokal codeigniter 4 dengan cara ketikkan perintah berikut ada command prompt.

php spark serve

1	php spark serve

setelah itu akses url berikut ini :

http://localhost:8080/list-members

Silahkan jalankan xampp kamu dan insert data secara manual melalui phpmyadmin, dan jalankan codeigniternya. Hasilnya kamu akan mendapati tampilan seperti berikut ini :

Kesimpulan

Sekian tutorial singkat dari saya, simak terus artikel selanjutnya masih tentang CRUD, yaitu insert data. Semoga artikel ini bermanfaat buat kalian.

Tutorial CRUD Codeigniter 4 Bahasa Indonesia – Insert Data

Buat Tabel Member

Membuat Controller

Membuat Model

Membuat View

Routes

Kesimpulan

Tinggalkan Balasan Batalkan balasan