CodeIgniter 4 CRUD with MySQL

codeigniter 4 crud example

CRUD stands for Create, Read, Update, and Delete. CRUD operations are basic data manipulation for the database. INSERT query is used to insert data in the database .  SELECT Query is used to select a data from the database. UPDATE Query is used to update a data in the database and Delete Query is used to delete a data from the database. In this example we will learn how we can create crud application in CodeIgniter 4.

Download & Configure CodeIgniter 4 Application.

Download the fresh version of CodeIgniter from https://codeigniter.com/download and unzip this in your working directory and configure the base url in app/Config/App.php.

    public $baseURL = 'http://localhost:8080'; 
    To
    public $baseURL = 'http://localhost/crud/public';
Configure Database And Create Table.

In this step we will create database crud and table products in the crud database.

CREATE TABLE `products` (
 `product_id` int(11) NOT NULL AUTO_INCREMENT,
 `product` varchar(250) NOT NULL,
 `category` varchar(250) NOT NULL
 `price`bigint,
 `sku` varchar(150),
`model` varchar(150),
 PRIMARY KEY (`product_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Now update the database credential in app/Config/Database.php. 

public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'crud',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];
Create Model.

The model is used to communicate with the products table. So create model ProductModel in the app/Models/  directory and put the below code.

<?php 
namespace App\Models;
use CodeIgniter\Model;

class ProductModel extends Model
{
        protected $table = 'products';
        protected $primaryKey = 'product_id';    
        protected $allowedFields = ['product', 'category','price','sku','model'];
}
Create Controller.

In this step we will create a controller named as ProductController. So create controller in the app/Controllers directory and put the below code .

<?php 
namespace App\Controllers;
use App\Models\ProductModel;
use CodeIgniter\Controller;

class ProductController extends Controller
{
    private $product = '' ;
    public function __construct(){
      
        $this->product = new ProductModel();       
    }
    
    // show product list
    public function index()
	{
        $session = session(); 
        $data['products'] = $this->product->orderBy('product_id', 'DESC')->findAll();       
		return view('products',$data);
    }
    
    // insert data
    public function store() {
       
        $data = [
            'product' => $this->request->getVar('product'),
            'category'  => $this->request->getVar('category'),
            'price'  => $this->request->getVar('price'),
            'sku'  => $this->request->getVar('sku'),          
            'model'  => $this->request->getVar('model'),
        ];
        
        $this->product->insert($data);    
        $session = session(); 
        $session->setFlashdata('msg', 'Product Successfully Added');   
        return $this->response->redirect(site_url('/list'));
    }

    // show product by id
    public function edit($product_id){
          
        $data['product'] = $this->product->where('product_id', $product_id)->first();
        echo json_encode($data['product']); 
    }

    // update product data
    public function update(){
        
         $id = $this->request->getVar('id');
        $data = [
            'product' => $this->request->getVar('product'),
            'category'  => $this->request->getVar('category'),
            'price'  => $this->request->getVar('price'),
            'sku'  => $this->request->getVar('sku'),          
            'model'  => $this->request->getVar('model'),
        ];
        $this->product->update($id, $data);        
        return $this->response->redirect(site_url('/list'));
    }

     // delete product
     public function delete(){
      
        $id = $this->request->getVar('delete_id');
        $data['product'] = $this->product->where('product_id', $id)->delete($id);
        return $this->response->redirect(site_url('/list'));
    }   

}
Add below code in route inside the app/Config/Routes.php.
$routes->get('/', 'ProductController::index');
$routes->get('/list', 'ProductController::index');
$routes->post('add-product', 'ProductController::store');
$routes->get('edit-product/(:num)', 'ProductController::edit/$1');
$routes->post('update-product', 'ProductController::update');
$routes->post('delete-product', 'ProductController::delete');
Create View.

In this step post we will create a view inside the and app\Views directory named as products.php. So create a view file in the same directory and put the below code.

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.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>
</head>
<body>
<div class="container">
	<div class="table-responsive">
		<div class="table-wrapper">
			<div class="table-title">
				<div class="row">
					<div class="col-sm-6">
						<h2>Manage<b> Products</b></h2>
					</div>
					<div class="col-sm-6">
						<a href="#addProductModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add Product</span></a>
						
					</div>
				</div>
			</div>
             
			<table class="table table-striped table-hover">
				<thead>
					<tr>
						 
						<th>Product</th>
						<th>Categroy</th>
						<th>Price</th>
						<th>SKU</th>
						<th>Model</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
                <?php foreach($products as $product) { ?>
					<tr>
					 
						<td><?=$product['product']?></td>
                        <td><?=$product['category']?></td>
                        <td><?=$product['price']?></td>
                        <td><?=$product['sku']?></td>
                        <td><?=$product['model']?></td>
						<td>
							<a href="#editProductModal"   data-id="<?=$product['product_id']?>"class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
							<a href="#deleteProductModal" data-delete_id="<?=$product['product_id']?>"  class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
						</td>
					</tr>
                <?php } ?>  
				</tbody>
			</table>
			 
		</div>
	</div>        
</div>
<!-- Add Modal HTML -->
<div id="addProductModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
        
			<form method ="post" action="<?= site_url('/add-product') ?>">
				<div class="modal-header">						
					<h4 class="modal-title">Add Product</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<div class="modal-body">					
					<div class="form-group">
						<label>Product</label>
						<input type="text" name ="product" id = "product" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Categroy</label>
						<input type="text"  name ="category" id = "category" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Price</label>
						<input type="number" name ="price" id ="price" class="form-control" required>
					</div>
					<div class="form-group">
						<label>SKU</label>
						<input type="text"  name ="sku"  id = "sku" class="form-control" required>
					</div>	
					<div class="form-group">
						<label>Model</label>
						<input type="text"  name ="model" name = "model" class="form-control" required>
					</div>					
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
					<input type="submit" class="btn btn-info" value="Save">
				</div>
			</form>
		</div>
	</div>
</div>

<!-- Edit Modal HTML -->
<div id="editProductModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
        
			<form method ="post" action="<?= site_url('/update-product') ?>">
				<div class="modal-header">						
					<h4 class="modal-title">Update Product</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<div class="modal-body">					
					<div class="form-group">
						<label>Product</label>
						<input type="text" name ="product" id = "edit_product" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Categroy</label>
						<input type="text"  name ="category" id = "edit_category" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Price</label>
						<input type="number" name ="price" id ="edit_price" class="form-control" required>
					</div>
					<div class="form-group">
						<label>SKU</label>
						<input type="text"  name ="sku"  id = "edit_sku" class="form-control" required>
					</div>	
					<div class="form-group">
						<label>Model</label>
						<input type="text"  name ="model" id = "edit_model" class="form-control" required>
						<input type="hidden"  name ="id" id = "edit_id" required>
					</div>					
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
					<input type="submit" class="btn btn-info" value="Update">
				</div>
			</form>
		</div>
	</div>
</div>
 
<!-- Delete Modal HTML -->
<div id="deleteProductModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
		<form method ="post" action="<?= site_url('/delete-product') ?>">
				<div class="modal-header">						
					<h4 class="modal-title">Delete Product</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<div class="modal-body">					
					<p>Are you sure you want to delete these Records?</p>
					<p class="text-warning"><small>This action cannot be undone.</small></p>
					<input type="hidden" id="delete_id" name="delete_id">
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
					<input type="submit" class="btn btn-danger" value="Delete">
				</div>
			</form>
		</div>
	</div>
</div>
</body>
</html>
Add some css in the above view file.

body {
	color: #566787;
	background: #f5f5f5;
	font-family: 'Varela Round', sans-serif;
	font-size: 13px;
	max-width:1540px
}
.table-responsive {
    margin: 30px 0;
}
.table-wrapper {
	background: #fff;
	padding: 20px 25px;
	border-radius: 3px;
	min-width: 1000px;
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.table-title {        
	padding-bottom: 15px;
	background: #0397d6;
	color: #fff;
	padding: 16px 30px;
	min-width: 100%;
	margin: -20px -25px 10px;
	border-radius: 3px 3px 0 0;
}
.table-title h2 {
	margin: 5px 0 0;
	font-size: 24px;
}
.table-title .btn-group {
	float: right;
}
.table-title .btn {
	color: #fff;
	float: right;
	font-size: 13px;
	border: none;
	min-width: 50px;
	border-radius: 2px;
	border: none;
	outline: none !important;
	margin-left: 10px;
}
.table-title .btn i {
	float: left;
	font-size: 21px;
	margin-right: 5px;
}
.table-title .btn span {
	float: left;
	margin-top: 2px;
}
table.table tr th, table.table tr td {
	border-color: #e9e9e9;
	padding: 12px 15px;
	vertical-align: middle;
}
table.table tr th:first-child {
	width: 60px;
}
table.table tr th:last-child {
	width: 100px;
}
table.table-striped tbody tr:nth-of-type(odd) {
	background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
	background: #f5f5f5;
}
table.table th i {
	font-size: 13px;
	margin: 0 5px;
	cursor: pointer;
}	
table.table td:last-child i {
	opacity: 0.9;
	font-size: 22px;
	margin: 0 5px;
}
table.table td a {
	font-weight: bold;
	color: #566787;
	display: inline-block;
	text-decoration: none;
	outline: none !important;
}
table.table td a:hover {
	color: #2196F3;
}
table.table td a.edit {
	color: #FFC107;
}
table.table td a.delete {
	color: #F44336;
}
table.table td i {
	font-size: 19px;
}
table.table .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 10px;
}

/* Modal styles */
.modal .modal-dialog {
	max-width: 400px;
}
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
	padding: 20px 30px;
}
.modal .modal-content {
	border-radius: 3px;
	font-size: 14px;
}
.modal .modal-footer {
	background: #ecf0f1;
	border-radius: 0 0 3px 3px;
}
.modal .modal-title {
	display: inline-block;
}
.modal .form-control {
	border-radius: 2px;
	box-shadow: none;
	border-color: #dddddd;
}
.modal textarea.form-control {
	resize: vertical;
}
.modal .btn {
	border-radius: 2px;
	min-width: 100px;
}	
.modal form label {
	font-weight: normal;
}

This is how our CodeIgniter crud application looks like.

↑
Exit mobile version