Tutorial CRUD Codeigniter 4 Dan Modal Bootstrap 4 Terbaru

Daftar Isi [Tampil]

Tutorial CRUD (Create Read Update Delete) Codeigniter 4 Dan Modal Bootstrap 4 sangat cocok untuk kita pelajari karena sudah menjadi framework modern.

Codeigniter 4 adalah versi terbaru dari codeigniter, dan codeigniter sendiri adalah salah satu framework PHP yang banyak digunakan pada saat ini.

Dulu kita sudah belajar CRUD dengan codeigniter 3 yaitu versi sebelumnya dari codeigniter 4, nah sekarang kita akan belajar dengan versi terbaru.

Selain menggunakan modal bootstrap pada tutorial CRUD Codeigniter 4 ini kita juga akan belajar joint tabel antara dua database yang saling terhubung satu sama lain.

Dan pada codeigniter 4 ini banyak sekali perubahan baru dibanding dengan codeigniter 3, sekarang codeigniter 4 ini sudah menjadi framework php yang modern.

Lalu apa saja perubahan yang terjadi dan kelebihan dari codeigniter 4 tersebut?, simak beberapa kelebihannya dibawah ini.

Kelebihan Codeigniter 4

1. Instalasi Framework Codeigniter 4

Framework Codeigniter 4 ini sudah support instalasi melalui composer sama hal nya seperti framework PHP modern lainnya.

Dan perintah composer untuk instalasi Codeiginiter 4 seperti berikut ini:

composer create-project codeigniter4/appstarter namaproject

Selain dapat di install dengan composer codeigniter 4 ini juga masih bisa di install manual dengan mendownload file projectnya pada website resmi codeigniter.

2. Local Development Server

Jadi dengan adanya local development server ini kita dapat menjalankan server pada komputer kita dengan menggunakan perintah pada terminal atau CMD kita.

Perintah untuk menjalankan local development server pada codeigniter 4 adalah php spark serve.

Ketika local development server kita sudah aktif maka kita dapat membuka codeigniter 4 pada browser dengan url http://localhost:8080.

3. Minimal Menggunakan PHP 7.2

Jadi untuk codeigniter 4 ini kita harus menggunakan PHP versi terbaru atau minimal versi PHP 7.2 dan jika tidak menggunakan PHP terbaru maka codeigniter 4 nya tidak akan support.

Oleh sebab itu sebelum instalasi codeigniter 4 pastikan terlebih dahulu versi PHP yang digunakan dan cek juga versi xampp atau wamp yang digunakan apakah support PHP 7.2 atau tidak.

Keunggulan PHP versi terbaru ini adalah performanya yang lebih baik dibanding versi lama, jadi project kita akan lebih baik lagi performanya.

4. Perubahan Struktur Direktori

Struktur direktori codeigniter 4 ini sudah mengikuti perkembangan zaman dimana penamaan setiap folder didalam app sudah menggunakan huruf kapital pada huruf pertamanya.

Kemudian pada codeigniter 4 ini sudah mempunyai folder public, jadi isi file pada folder app tidak akan diketahui pengunjung web kita.

Untuk lebih jelasnya lihat gambar perbedaan direktori codeigniter 3 dan codeigniter 4 dibawah ini.

5. Menggunakan Namespace

Dengan menggunakan namespace pada codeigniter ini akan memudahkan kita ketika menggunakan library atau script pihak ketiga.

Karena akan menghindari ambiguitas, meskipun kita mempunyai nama yang sama karena namespacenya berbeda itu tidak akan masalah.

6. Autoloading Yang Lebih Baik

Karena codeigniter 4 ini sudah menggunakan psr4, maka autoload-nya menjadi otomatis tidak seperti codeigniter 3 yang masih manual.

7. Mempunyai File .env

File .env ini akan memudahkan kita dalam membuat websitenya ketika pada saat development, testing, dan pada saat production.

8. Mempunyai CLI (Command Line Interface)

Dengan CLI ini kita dapat melakukan banyak hal seperti otomatisasi taks-taks yang akan dilakukan, dan perintah command line nya juga dapat kita custom, agar mempermudah kita untuk mengintegrasikan antar project kita.

9. Mempunyai Fitur Rest

Jadi kita dapat membuat Rest API hanya dengan menggunakan codeigniter 4 nya saja.

Karena didalamnya sudah ada resource round yang berfungsi untuk melakukan rooting tidak hanya dengan metode yang konvensional saja seperti get dan post, kita juga dapat menggunakan rest full yang lain seperti path, delete, dan put.

10. Dokumentasi Codeigniter 4

Dokumentasi codeigniter 4 sudah lebih ke teknisnya maksudnya dokumentasi codeigniter 4 ini akan sedikit sulit untuk dipahami oleh pemula.

Nah sekarang kamu sudah mengetahui beberapa kelebihan dari codeigniter 4 dibanding codeigniter 3, namun jika kamu sudah pernah mencoba framework lain seperti laravel mungkin kamu sudah tidak asing lagi dengan beberapa kelebihan codeigniter 4 tersebut.

Sekarang kita mulai saja ke tutorial membuat CRUD (Create, Read, Update, dan Delete) pada codeigniter 4.

Tutorial CRUD (Create Read Update Delete) Codeigniter 4

Ada beberapa tahapan dalam tutorial CRUD (Create Read Update Delete) Codeigniter 4 ini, mulai dari tahap persiapan, tahap instalasi, sampai ke tahap pembuatan CRUDnya.

1. Tahap Persiapan

Pada tahap persiapan ini kamu perlu mendownload terlebih dahulu file-file yang diperlukan, berikut ini daftar file yang harus kamu download.

1. Download Codeigniter 4

Kamu dapat download codeigniter 4 langsung dari situs resminya atau kamu juga bisa menggunakan composer untuk mendownload codeigniter 4.

Untuk mendownload codeigniter 4 melalui composer gunakan perintah composer create-project codeigniter4/appstarter namaproject.

2. Download Bootstrap 4

Download bootstrap 4 karena akan digunakan untuk membuat tampilan CRUD agar menjadi lebih menarik dan elegan.

3. Download Jquery

Download Jquery 3.5.1 compressed, ketika sudah mengklik link Download the compressed, production jQuery 3.5.1 kamu akan dialihkan kehalaman script jquery 3.5.1

Untuk mendownloadnya kamu copy semua script jquery 3.5.1 kemudian paste di notepad dan save dengan nama jquery.min.js

2. Tahap Instalasi Codeigniter 4

Ekstrak file zip codeigniter 4 yang sudah kamu download dan simpan didalam folder htdocs, kemudian rename folder codeigniter 4 tersebut menjadi Codeigniter4 untuk memudahkan saja, kamu juga boleh rename menjadi nama project sesuai dengan keinginan kamu.

Kemudian ekstrak file zip bootstrap 4 kedalam folder public pada codeigniter 4, untuk lebih jelasnya lihat gambar dibawah ini.

Jika sudah sekarang pindahkan file jquery.min.js yang kamu download tadi kedalam folder js yang berada didalam folder public, untuk lebih jelasnya lihat gambar dibawah ini.

Sekarang kamu buka project Codeigniter 4 tersebut dikode editor yang kamu gunakan, Panduan Code pada tutorial ini menggunakan Visual Studio Code karena terdapat fitur terminal didalamnya.

Jadi akan lebih memudahkan saja, jika kamu menggunakan sublime text atau php storm juga bisa.

Jika sudah dibuka project codeigniter 4 nya kemudian kamu buka terminal dan ketik perintah php spark serve untuk menjalankan local development servernya.

Kemudian coba akses url local development servernya yaitu http://localhost:8080, maka kamu akan melihat tampilan default dari codeigniter 4 dan tahap instalasi codeigniter 4, bootstarp 4 dan jquery sudah berhasil.

3. Tahap Konfigurasi Database Dan .env

Pertama kita buat dulu database baru dengan nama codeigniter, kemudian untuk mempercepat proses pembuatan tabel databasenya kamu dapat import file codeigniter.sql

Caranya kamu copy terlebih dahulu script sql dibawah ini untuk pembuatan tabel dan isi databasenya kemudian save dengan nama codeigniter.sql

-- phpMyAdmin SQL Dump

-- version 5.0.1

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Waktu pembuatan: 23 Bulan Mei 2020 pada 05.51

-- Versi server: 10.4.11-MariaDB

-- Versi PHP: 7.4.3

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Database: `codeigniter`

-- --------------------------------------------------------

-- Struktur dari tabel `category`

CREATE TABLE `category` (

`category_id` int(11) NOT NULL,

`category_name` varchar(50) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `category`

INSERT INTO `category` (`category_id`, `category_name`) VALUES

(1, 'Books'),

(2, 'Electronics'),

(3, 'Fashions');

-- --------------------------------------------------------

-- Struktur dari tabel `product`

CREATE TABLE `product` (

`product_id` int(11) NOT NULL,

`product_name` varchar(100) DEFAULT NULL,

`product_price` int(11) DEFAULT NULL,

`product_category_id` int(11) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `product`

INSERT INTO `product` (`product_id`, `product_name`, `product_price`, `product_category_id`) VALUES

(1, 'Codeigniter Basic', 100000, 1),

(2, 'CSS Basic', 50000, 1),

(4, 'JavaScript Basic', 100000, 1);

-- Indexes for dumped tables

-- Indeks untuk tabel `category`

ALTER TABLE `category`

ADD PRIMARY KEY (`category_id`);

-- Indeks untuk tabel `product`

ALTER TABLE `product`

ADD PRIMARY KEY (`product_id`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `category`

ALTER TABLE `category`

MODIFY `category_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

-- AUTO_INCREMENT untuk tabel `product`

ALTER TABLE `product`

MODIFY `product_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Lalu kamu buka menu / fitur import pada phpmyadmin kemudian choose file codeigniter.sql tadi klik tombol go / kirim yang terletak dibagian paling bawah.

Jika sudah sukses proses import database codeigniter.sql tersebut maka selanjutnya kita buka project Codeigniter4 dan buka folder app, lalu buka folder Config dan buka file Database.php

Pada bagian username isi dengan root, lalu pada bagian password kosongkan jangan diisi jika kamu tidak menggunakan password dalam phpmyadmin, lalu pada bagian database ini dengan codeigniter.

Seperti yang terlihat pada gambar dibawah ini.

Selanjutnya untuk file env yang ada kamu rename menjadi .env dan buka file tersebut.

Lalu ubah bagian # CI_ENVIRONMENT = production menjadi # CI_ENVIRONMENT = development , tujuanya untuk mempermudah kita dalam menemukan bug pada projectnya jika ada.

Kemudian pada bagian database didalam file .env samakan seperti pada file database.php saja, lebih tepatnya kamu samakan seperti gambar dibawah ini.

4. Tahap Coding CRUD Codeigniter 4

1. Buat File Model Baru

Pertama kita buat file model baru didalam folder app\Model dengan nama Product_model.php.

Dan script file Product_model.php dapat lihat dibawah ini.

<?php namespace App\Models;

use CodeIgniter\Model;

class Product_model extends Model

{

public function getCategory()

{

$builder = $this->db->table('category');

return $builder->get();

}

public function getProduct()

{

$builder = $this->db->table('product');

$builder->select('*');

$builder->join('category', 'category_id = product_category_id','left');

return $builder->get();

}

public function saveProduct($data){

$query = $this->db->table('product')->insert($data);

return $query;

}

public function updateProduct($data, $id)

{

$query = $this->db->table('product')->update($data, array('product_id' => $id));

return $query;

}

public function deleteProduct($id)

{

$query = $this->db->table('product')->delete(array('product_id' => $id));

return $query;

}

Copy script diatas dan paste di file Product_model.php kemudian save.

2. Buat File Controller Baru

Kedua kita buat sebuah file controller baru didalam folder app\Controller dengan nama Product.php, dan berikut ini scriptnya.

<?php namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\Product_model;

class Product extends Controller

{

public function index()

{

$model = new Product_model();

$data['product'] = $model->getProduct()->getResult();

$data['category'] = $model->getCategory()->getResult();

echo view('product_view', $data);

}

public function save()

{

$model = new Product_model();

$data = array(

'product_name' => $this->request->getPost('product_name'),

'product_price' => $this->request->getPost('product_price'),

'product_category_id' => $this->request->getPost('product_category'),

);

$model->saveProduct($data);

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

}

public function update()

{

$model = new Product_model();

$id = $this->request->getPost('product_id');

$data = array(

'product_name' => $this->request->getPost('product_name'),

'product_price' => $this->request->getPost('product_price'),

'product_category_id' => $this->request->getPost('product_category'),

);

$model->updateProduct($data, $id);

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

}

public function delete()

{

$model = new Product_model();

$id = $this->request->getPost('product_id');

$model->deleteProduct($id);

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

}

Kemudian copy script contoller diatas dan paste pada file Product.php lalu save.

3. Buat File View Baru

Ketiga buat file view baru didalam folder app\Views dengan nama product_view.php, dan berikut ini scriptnya.

<!DOCTYPE html>

<head>

<title>Product Lists</title>

</head>

<body>

<h3>Product Lists</h3>

<thead>

<tr>

<th>Product Name</th>

<th>Price</th>

<th>Category</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<?php foreach($product as $row):?>

<tr>

<td><?= $row->product_name;?></td>

<td><?= $row->product_price;?></td>

<td><?= $row->category_name;?></td>

<td>

<a href="#" class="btn btn-primary btn-sm btn-edit" data-id="<?= $row->product_id;?>" data-name="<?= $row->product_name;?>" data-price="<?= $row->product_price;?>" data-category_id="<?= $row->product_category_id;?>">Edit</a>

<a href="#" class="btn btn-danger btn-sm btn-delete" data-id="<?= $row->product_id;?>">Delete</a>

</td>

</tr>

<?php endforeach;?>

</tbody>

</table>

</div>

<h5 class="modal-title" id="exampleModalLabel">Add New Product</h5>

</button>

</div>

<label>Product Name</label>

</div>

<label>Price</label>

</div>

<label>Category</label>

<option value="">-Select-</option>

<?php foreach($category as $row):?>

<option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>

<?php endforeach;?>

</select>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</form>

<h5 class="modal-title" id="exampleModalLabel">Edit Product</h5>

</button>

</div>

<label>Product Name</label>

</div>

<label>Price</label>

</div>

<label>Category</label>

<option value="">-Select-</option>

<?php foreach($category as $row):?>

<option value="<?= $row->category_id;?>"><?= $row->category_name;?></option>

<?php endforeach;?>

</select>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" class="btn btn-primary">Update</button>

</div>

</form>

<h5 class="modal-title" id="exampleModalLabel">Delete Product</h5>

</button>

</div>

<h4>Are you sure want to delete this product?</h4>

</div>

</div>

</form>

$(document).ready(function(){

// get Edit Product

$('.btn-edit').on('click',function(){

// get data from button edit

const id = $(this).data('id');

const name = $(this).data('name');

const price = $(this).data('price');

const category = $(this).data('category_id');

// Set data to Form Edit

$('.product_id').val(id);

$('.product_name').val(name);

$('.product_price').val(price);

$('.product_category').val(category).trigger('change');

// Call Modal Edit

$('#editModal').modal('show');

});

// get Delete Product

$('.btn-delete').on('click',function(){

// get data from button edit

const id = $(this).data('id');

// Set data to Form Edit

$('.productID').val(id);

// Call Modal Edit

$('#deleteModal').modal('show');

});

</script>

</body>

</html>

Kemudian copy script diatas dan paste di file product_view.php lalu save scriptnya.

Pada script view diatas juga sudah dilengkapi dengan script Modal Bootstrap 4, yang tentunya akan membuat project CRUD Codeigniter 4 ini tambah elegan tampilannya.

Sekarang kamu sudah selesai membuat CRUD Codeigniter 4 sederhana tahap selanjutnya adalah tahap testing.

5. Tahap Testing CRUD Codeigniter 4

Pastikan terlebih dahulu xampp dan php spark serve sudah diaktifkan, kemudian coba akses url berikut ini http://localhost:8080/product.

Jika sudah dibuka url tersebut dan berhasil maka akan terlihat seperti pada gambar dibawah ini.

Sekarang coba CRUD (Create Read Update Delete)nya berfungsi atau tidak, berikut ini hasil testingnya.

1. Create Data

Untuk create data baru klik tombol Add New yang berwarna hijau kemudian akan muncul form popup untuk membuat atau menambah data baru.

Lalu klik tombol Save yang berwarna biru.

2. Read Data

Jika data baru berhasil ditambahkan maka akan terlihat seperti gambar dibawah ini.

3. Update Data

Untuk mengupdate data klik tombol edit yang berwarna biru, maka akan muncul form edit yang popup kemudian edit data yang tampil tersebut dan klik tombol Update yang berwarna biru.

4. Delete Data

Untuk delete data cukup klik tombol delete yang berwarna merah, setelah itu akan muncul form konfirmasi popup untuk menghapus data, lalu klik Yes untuk menyetujui penghapusan data.

Setelah itu data akan langsung dihapus dari database.

Jika semua Fitur Create Read Update Dan Delete atau disingkat CRUD berhasil semua maka kamu sudah selesai mengikuti tutorial kali ini dengan baik.

Untuk dokumentasi source code CRUD Codeigniter 4 dan Modal Bootstrap ini juga dapat kamu download atau clone diGithub.

Sekian yang dapat Panduan Code sampaikan pada tutorial kali ini semoga bermanfaat Aamiin.

Akhir kata dari Panduan Code jangan lupa titik koma.

Coba cari lagi apa yang ada inginkan pada kolom berikut:

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.

Tutorial CRUD Codeigniter 4 Dan Modal Bootstrap 4 Terbaru

Kelebihan Codeigniter 4

1. Instalasi Framework Codeigniter 4

2. Local Development Server

3. Minimal Menggunakan PHP 7.2

4. Perubahan Struktur Direktori

5. Menggunakan Namespace

6. Autoloading Yang Lebih Baik

7. Mempunyai File .env

8. Mempunyai CLI (Command Line Interface)

9. Mempunyai Fitur Rest

10. Dokumentasi Codeigniter 4

Tutorial CRUD (Create Read Update Delete) Codeigniter 4

1. Tahap Persiapan

1. Download Codeigniter 4

2. Download Bootstrap 4

3. Download Jquery

2. Tahap Instalasi Codeigniter 4

3. Tahap Konfigurasi Database Dan .env

4. Tahap Coding CRUD Codeigniter 4

1. Buat File Model Baru

2. Buat File Controller Baru

3. Buat File View Baru

5. Tahap Testing CRUD Codeigniter 4

1. Create Data

2. Read Data

3. Update Data

4. Delete Data

Dapatkan Update Terbaru Gratis: