Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap

Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap

Download or Install Codeigniter 4

https://www.youtube.com/watch?v=YezQaWHZbis

Database table

CREATE TABLE `users` (

`id` int(11) NOT NULL COMMENT 'Primary Key',

`name` varchar(100) NOT NULL COMMENT 'Name',

`email` varchar(255) NOT NULL COMMENT 'Email Address'

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table';

INSERT INTO `users` (`id`, `name`, `email`) VALUES

(1, 'Airi Satou', 'AiriSatou@gmail.com'),

(2, 'Angelica Ramos', 'AngelicaRamos@gmail.com'),

(3, 'Ashton Cox', 'AshtonCox@gmail.com'),

(4, 'Bradley Greer', 'BradleyGreer@gmail.com'),

(5, 'Brielle Williamson', 'BrielleWilliamson@gmail.com'),

(6, 'Bruno Nash', 'BrunoNash@gmail.com'),

(7, 'Caesar Vance', 'CaesaVance@gmail.com'),

(8, 'cairocoders', 'cairocoders@gmail.com'),

(9, 'Cara Stevens', 'CaraStevens@gmail.com'),

(11, 'caity', 'caity@gmail.com'),

(12, 'Cedric Kelly', 'CedricKelly@gmail.com');

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

ALTER TABLE `users`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key', AUTO_INCREMENT=13;

https://datatables.net/

DataTables is a table enhancing plug-in for the jQuery Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal effort.

Bootstrap 5

https://getbootstrap.com/docs/5.0/getting-started/introduction/

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery

https://jquery.com/download/

CDN : jsDelivr CDN

https://www.jsdelivr.com/package/npm/jquery

https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

setup database
app/config/database.php

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

Create New Model
app/Models/UserModel.php

//app/Models/UserModel.php
<?php 
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
    protected $table = 'users';
    protected $primaryKey = 'id';
     
    protected $allowedFields = ['name', 'email'];
}

Create CRUD Controller
app/Controllers/UserCrud.php

//app/Controllers/UserCrud.php
<?php 
namespace App\Controllers;
use App\Models\UserModel;
use CodeIgniter\Controller;
 
class UserCrud extends Controller
{
    // users list
    public function index(){
        $userModel = new UserModel();
        $data['users'] = $userModel->orderBy('id', 'DESC')->findAll();
        return view('user_view', $data);
    }
 
    // user form
    public function create(){
        return view('add_user');
    }
  
    // insert data into database
    public function store() {
        $userModel = new UserModel();
        $data = [
            'name' => $this->request->getVar('name'),
            'email'  => $this->request->getVar('email'),
        ];
        $userModel->insert($data);
        return $this->response->redirect(site_url('/users-list'));
    }
 
    // view single user
    public function singleUser($id = null){
        $userModel = new UserModel();
        $data['user_obj'] = $userModel->where('id', $id)->first();
        return view('edit_user', $data);
    }
 
    // update user data
    public function update(){
        $userModel = new UserModel();
        $id = $this->request->getVar('id');
        $data = [
            'name' => $this->request->getVar('name'),
            'email'  => $this->request->getVar('email'),
        ];
        $userModel->update($id, $data);
        return $this->response->redirect(site_url('/users-list'));
    }
  
    // delete user
    public function delete($id = null){
        $userModel = new UserModel();
        $data['user'] = $userModel->where('id', $id)->delete($id);
        return $this->response->redirect(site_url('/users-list'));
    }    
}

Create Routes
app/Config/Routes.php
official documents here https://codeigniter4.github.io/userguide/incoming/restful.html#presenter-controller-comparison

//app/Config/Routes.php
$routes->get('/', 'Home::index');
 
// CRUD Routes
$routes->get('users-list', 'UserCrud::index');
$routes->get('user-form', 'UserCrud::create');
$routes->post('submit-form', 'UserCrud::store');
$routes->get('edit-view/(:num)', 'UserCrud::singleUser/$1');
$routes->post('update', 'UserCrud::update');
$routes->get('delete/(:num)', 'UserCrud::delete/$1');

Creating View
app/Views/add_user.php

//app/Views/add_user.php
<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap and Datatables</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  <style>
    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>
<body>
<div class="container">
    <p><h1>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap</h1></p>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <form method="post" id="add_create" name="add_create" action="<?= site_url('/submit-form') ?>">
              <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" class="form-control">
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" class="form-control">
              </div>
              <div class="form-group"><br/>
                <button type="submit" class="btn btn-primary btn-block">Submit Data</button>
              </div>
            </form>
        </div>
        <div class="col-2"></div>
    </div>
</div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
  <script>
    if ($("#add_create").length > 0) {
      $("#add_create").validate({
        rules: {
          name: {
            required: true,
          },
          email: {
            required: true,
            maxlength: 60,
            email: true,
          },
        },
        messages: {
          name: {
            required: "Name is required.",
          },
          email: {
            required: "Email is required.",
            email: "It does not seem to be a valid email.",
            maxlength: "The email should be or equal to 60 chars.",
          },
        },
      })
    }
  </script>
</body>
</html>

app/Views/user_view.php

//app/Views/user_view.php
<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap and Datatables</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <p><h1>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap</h1></p>
    <div class="d-flex justify-content-end">
        <a href="<?php echo site_url('/user-form') ?>" class="btn btn-success mb-2">Add User</a>
    </div>
    <?php
     if(isset($_SESSION['msg'])){
        echo $_SESSION['msg'];
      }
     ?>
    <table class="table table-bordered table-striped" id="users-list">
       <thead>
          <tr>
             <th>User Id</th>
             <th>Name</th>
             <th>Email</th>
             <th>Action</th>
          </tr>
       </thead>
       <tbody>
          <?php if($users): ?>
          <?php foreach($users as $user): ?>
          <tr>
             <td><?php echo $user['id']; ?></td>
             <td><?php echo $user['name']; ?></td>
             <td><?php echo $user['email']; ?></td>
             <td>
              <a href="<?php echo base_url('edit-view/'.$user['id']);?>" class="btn btn-primary btn-sm">Edit</a>
              <a href="<?php echo base_url('delete/'.$user['id']);?>" class="btn btn-danger btn-sm">Delete</a>
              </td>
          </tr>
         <?php endforeach; ?>
         <?php endif; ?>
       </tbody>
    </table>
</div>
  
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready( function () {
      $('#users-list').DataTable();
  } );
</script>
</body>
</html>

app/Views/edit_user.php

//app/Views/edit_user.php
<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap and Datatables</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  <style>
    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>
<body>
<div class="container">
    <p><h1>Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap</h1></p>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <form method="post" id="update_user" name="update_user" action="<?= site_url('/update') ?>">
              <input type="hidden" name="id" id="id" value="<?php echo $user_obj['id']; ?>">
              <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" class="form-control" value="<?php echo $user_obj['name']; ?>">
              </div>
 
              <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" class="form-control" value="<?php echo $user_obj['email']; ?>">
              </div>
 
              <div class="form-group"> <br/>
                <button type="submit" class="btn btn-info btn-block">Save Data</button>
              </div>
            </form>
        </div>
        <div class="col-2"></div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<script>
    if ($("#update_user").length > 0) {
      $("#update_user").validate({
        rules: {
          name: {
            required: true,
          },
          email: {
            required: true,
            maxlength: 60,
            email: true,
          },
        },
        messages: {
          name: {
            required: "Name is required.",
          },
          email: {
            required: "Email is required.",
            email: "It does not seem to be a valid email.",
            maxlength: "The email should be or equal to 60 chars.",
          },
        },
      })
    }
  </script>
</body>
</html>

Base Site URL
app/Config/App.php
public $baseURL = 'http://localhost:8080/';

Run
C:\xampp\htdocs\codeigniter4>php spark serve

http://localhost:8080/index.php/users-list

Tutorial101

article

Tuesday, July 5, 2022

Codeigniter 4 CRUD (Create, Read, Update and Delete) with Bootstrap

Related Post

Search This Blog

HOME

Category

Popular Posts