Table of Contents
Membuat Scaffold
php spark make:scaffold post
Perintah di atas akan menghasilkan beberapa file Class berikut :
- App\Controllers\Post.php
- App\Models\Post.php
- App\Database\Migrations\<somedate>_Post.php
- App\Database\Seeds\Post.php
Migrate Table
Buka file app/Database/Migrations/xxxxx_Post.php lalu sesuaikan seperti di bawah ini :
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
use CodeIgniter\Database\RawSql;
class Post extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'TINYINT',
'unsigned' => true,
'auto_increment' => true,
],
'title' => [
'type' => 'VARCHAR',
'constraint' => '50',
],
'content' => [
'type' => 'VARCHAR',
'constraint' => '200',
],
'created_at' => [
'type' => 'TIMESTAMP',
'default' => new RawSql('CURRENT_TIMESTAMP'),
],
'updated_at' => [
'type' => 'TIMESTAMP',
'default' => new RawSql('CURRENT_TIMESTAMP'),
],
]);
$this->forge->addKey('id', true);
$this->forge->createTable('posts');
}
public function down()
{
$this->forge->dropTable('posts');
}
}
Lalu jalankan perintah berikut :
php spark migrate
Membuat Model
Buka file app/Models/Role.php sesuaikan baris seperti berikut :
<?php
namespace App\Models;
use CodeIgniter\Model;
class Post extends Model
{
protected $DBGroup = 'default';
protected $table = 'posts';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'array';
protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = ['title','content'];
// 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 = [];
}
protected $allowedFields = [‘title’,’content’]; digunakan sebagai pendataan column yang boleh diinsertkan data ke dalam database.
Menyiapkan Route
Tambahkan baris berikut pada app/Config/Routes.php :
$routes->resource('post');
Baris di atas sama dengan baris kode beikut :
- $routes->get(‘post’, ‘Post::index’);
- $routes->get(‘post/new’, ‘Post::new’);
- $routes->post(‘post’, ‘Post::create’);
- $routes->get(‘post/(:segment)’, ‘Post::show/$1’);
- $routes->get(‘post/(:segment)/edit’, ‘Post::edit/$1’);
- $routes->put(‘post/(:segment)’, ‘Post::update/$1’);
- $routes->patch(‘post/(:segment)’, ‘Post::update/$1’);
- $routes->delete(‘post/(:segment)’, ‘Post::delete/$1’);
Menampilkan Data
Controller
Controller::index akan digunakan untuk menampilkan data dimana terdapat Pager di dalamnya.
Buka file app/Controllers/Post.php lalu sesuaikan kode seperti berikut ini :
<?php
namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
use App\Models\Post as PostModel;
class Post extends ResourceController{
protected $model;
public function __construct(){
$this->model = new PostModel();
$this->pager = \Config\Services::pager();
}
public function index(){
$pager = \Config\Services::pager();
$data = array(
'data' => $this->model->paginate(10, 'number'),
'pager' => $this->model->pager
);
return view('post/post_view', $data);
}
Pager
Buat folder baru dengan nama Pagers di dalam folder app/Views/ dan di dalam folder Pagers tersebut, silahkan teman-teman buat file baru dengan nama app/Views/Pagers/bootstrap_pagination.php dan masukkan kode berikut ini :
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
<ul class="pagination">
<?php if ($pager->hasPrevious()) : ?>
<li class="page-item">
<a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="<?= lang('Pager.previous') ?>">
<span>«</span>
</a>
</li>
<?php endif ?>
<?php foreach ($pager->links() as $link) : ?>
<li <?= $link['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
<a href="<?= $link['uri'] ?>" class="page-link">
<?= $link['title'] ?>
</a>
</li>
<?php endforeach ?>
<?php if ($pager->hasNext()) : ?>
<li class="page-item">
<a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>
<?php endif ?>
</ul>
</nav>
Langkah terakhir, silahkan teman-teman registerkan style yang sudah kita buat tadi di dalam config. Sekarang teman-teman buka file app/Config/Pager.php sesuaikan baris berikut :
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
'default_head' => 'CodeIgniter\Pager\Views\default_head',
'bootstrap_pagination' => 'App\Views\Pagers\bootstrap_pagination',
];
View
Langkah selanjutnya kita akan membuat sebuah file dengan nama app/Views/post_view.php dan silahkan teman-teman masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Data Post - ombagoes.com</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<?php if(!empty(session()->getFlashdata('message'))) : ?>
<div class="alert alert-success">
<?php echo session()->getFlashdata('message');?>
</div>
<?php endif ?>
<a href="<?php echo base_url('post/create') ?>" class="btn btn-md btn-success mb-3">TAMBAH DATA</a>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>TITLE</th>
<th>CONTENT</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
<?php foreach($posts as $key => $post) : ?>
<tr>
<td><?php echo $post['title'] ?></td>
<td><?php echo $post['content'] ?></td>
<td class="text-center" width="140px">
<a href="<?php echo base_url('post/'.$list['id'].'/edit') ?>" class="btn btn-sm btn-primary" style="float:left;">EDIT</a>
<form action="<?php echo base_url('post/'.$list['id']) ?>" method="POST">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">DELETE</button>
</form>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?php echo $pager->links('post', 'bootstrap_pagination') ?>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Jalankan
Buka browser jalankan http://yourdomain.com/post
Create Data
Membuat Fungsi New & Create di Controller
Kali ini kita akan menambah 2 function baru di dalam controller Post, yaitu function new & function post.
- function new – fungsi ini akan kita gunakan untuk menampilkan sebuah form.
- function create – fungsi ini akan kita gunakan untuk memproses data inputan dari form yang akan disimpan ke dalam database.
Buka file app/Controllers/Post.php dan tambahkan 2 function berikut ini dibawah function index :
public function new()
{
return view('post/post_new');
}
/**
* Create a new resource object, from "posted" parameters
*
* @return mixed
*/
public function create()
{
//load helper form and URL
helper(['form', 'url']);
//define validation
$validation = $this->validate([
'title' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan Judul Post.'
]
],
'content' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan konten Post.'
]
],
]);
if(!$validation) {
//render view with error validation message
return view('post/post_new', [
'validation' => $this->validator
]);
} else {
//insert data into database
$this->model->insert([
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content'),
]);
//flash message
session()->setFlashdata('message', 'Post Berhasil Disimpan');
return redirect()->to(base_url('post'));
}
}
View
Selanjutnya, tambahkan file baru app/Views/post/post_new.php dan masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Tambah Data - ombagoes.com</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<?php if(isset($validation)) { ?>
<div class="alert alert-danger" role="alert">
<?php echo $validation->listErrors() ?>
</div>
<?php } ?>
<div class="card">
<div class="card-body">
<form action="<?php echo base_url('post/store') ?>" method="POST">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" name="title" placeholder="Masukkan Title">
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten"></textarea>
</div>
<button type="submit" class="btn btn-primary">SIMPAN</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Jalankan
http://yourdomain.com/post/new
Update Data
Membuat Fungsi Edit & Update di Controller
Kali ini kita akan menambah 2 function baru di dalam controller Post, yaitu function edit & function update.
- function edit – fungsi ini akan kita gunakan untuk menampilkan sebuah data di dalam form sesuai dengan ID.
- function update – fungsi ini akan kita gunakan untuk memproses data inputan dari form yang akan diupdate ke dalam database.
Sekarang silahkan teman-teman buka file app/Controllers/Post.php dan tambahkan 2 function berikut ini dibawah function create:
/**
* Return the editable properties of a resource object
*
* @return mixed
*/
public function edit($id = null)
{
$data = array(
'edit' => $this->model->find($id)
);
return view('post/post_edit', $data);
}
/**
* Add or update a model resource, from "posted" properties
*
* @return mixed
*/
public function update($id = null)
{
$validation = $this->validate([
'title' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan Judul Post.'
]
],
'content' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan konten Post.'
]
],
]);
if(!$validation) {
return view('post-edit', [
'edit' => $this->model->find($id),
'validation' => $this->validator
]);
} else {
$this->model->update($id, [
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content'),
]);
session()->setFlashdata('message', 'Post Berhasil Diupdate');
return redirect()->to(base_url('post'));
}
}
View
Selanjutnya, buat file baru app/Views/post/post_edit.php dan masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Edit Data - ombagoes.com</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<?php if(isset($validation)) { ?>
<div class="alert alert-danger" role="alert">
<?php echo $validation->listErrors() ?>
</div>
<?php } ?>
<div class="card">
<div class="card-body">
<form action="<?php echo base_url('post/'.$edit['id']) ?>" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" name="title" value="<?php echo $edit['title'] ?>" placeholder="Masukkan Title">
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten"><?php echo $edit['content'] ?></textarea>
</div>
<button type="submit" class="btn btn-primary">UPDATE</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Jalankan
buka http://yourdomain.com/post
lalu klik salah satu tombol EDIT
Delete Data
Membuat Fungsi Delete di Controller
Langsung saja kita mulai, silahkan teman-teman buka file app/Controllers/Post.php dan silahkan teman-teman tambahkan kode / function dibawah ini setelah function update :
/**
* Delete the designated resource object from the model
*
* @return mixed
*/
public function delete($id = null)
{
$row = $this->model->find($id);
if($row) {
$this->model->delete($id);
session()->setFlashdata('message', 'Data Berhasil Dihapus');
return redirect()->to(base_url('post'));
}
}
View
Form DELETE sudah ada pada file app/Views/post/post_view.php. Perhatikan baris berikut :
<td class="text-center" width="140px">
<a href="<?php echo base_url('post/'.$list['id'].'/edit') ?>" class="btn btn-sm btn-primary" style="float:left;">EDIT</a>
<form action="<?php echo base_url('post/'.$list['id']) ?>" method="POST">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">DELETE</button>
</form>
</td>
Jalankan
buka http://yourdomain.com/post
lalu klik salah satu tombol DELETE