Codeigniter 3 CRUD Operation with Bootstrap and MySQL Example

In this post, you will learn how to build a simple Codeigniter 3 CRUD Operation with MySQL Example functionality with Bootstrap and MySQL. CRUD is an acronym for Create, Read, Update, and Delete. CRUD operations are basic data manipulation for database. For knowing better way to any framwork we need to build basic crud generator.

This post contains Codeigniter crud application which will perform all these operations on a MySQL database table at one place. Here will demonstrate simple First Codeigniter Basic CRUD tutorial example with mysql from scratch and step by step including record listing, record inserting, record updating and record deleting.

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

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.

See Also: Codeigniter 4 CRUD Operation with Mysql

Step 1: Download Codeigniter App

First we need to download the Codeigniter 3 project just go the Codeigniter website and Download. After downloading extract the folder and add it in your local system xampp/htdocs/.

Step 2: Basic Configurations

Now we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and add the base url something like below. If can use the project with folder and using virtual host. If you don’t know how to create virtual host in ubuntu or window’s read below.

If you are using vertual host then add 

$config['base_url'] = 'http://codeigniter-crud.co';

Or if you run the project with folder name 
 
$config['base_url'] = 'http://localhost/codeigniter-crud'; 

Step 3: Setup Database Credential

Now in this step we need to create database name codeigniter_crud, So open your phpmyadmin and create the database with the name codeigniter_crud. Then add the basic credentials in database.php file.

application/config/database.php

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => 'admin',
    'database' => 'codeigniter_crud',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

Step 3: Create Database Table

Now run following SQL Query with selecting the database in phpmyadmin and create “tasks” table.

CREATE TABLE `test` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255),
 `description` text,
 PRIMARY KEY (`id`)
)  

Step 4: Create Routes

Now add some routes for basic crud operation with codeigniter.

application\config\routes.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['task'] = "Task/index";
$route['task/create'] = "Task/create";
$route['task/edit'] = "Task/edit/$1";
$route['task/store'] = "Task/store";
$route['task/show'] = "Task/show/$1";
$route['task/update/(:any)'] = "Task/update/$1";
$route['task/delete'] = "Task/delete";

Step 5: Create Controller

In this step we create a controller and add the following methods for creating the crud tutorial in codeigniter. let’s go to application/controllers/ and create a controller name Task.php. Now we add some methods/functions name index, add, edit, show, delete, update for performing a crud operation.

application\controllers\Task.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Task extends CI_Controller {

    function __construct(){
      parent::__construct();
      $this->load->helper('url');
      $this->load->library('session');
      $this->load->database();
    }

  public function index()
  {
    $tasks = $this->db->get('tasks')->result();
    $this->load->view('task/index', ['tasks' => $tasks]);
  }

  public function create()
  {

    $this->load->view('task/create');
  }

  public function edit($id)
  {
    $task = $this->db->where(['id' => $id])->get('tasks')->row();
    $this->load->view('task/edit', ['task' => $task]);
  }

  public function store()
  {
      $this->load->library('form_validation');
      $this->form_validation->set_rules('title', 'Title', 'required');
      $this->form_validation->set_rules('description', 'Description','required');

      if ($this->form_validation->run()) {
        $task = array (
          'title' => $this->input->post('title'),
          'description' => $this->input->post('description'),
        );

        $this->db->insert('tasks', $task);
      } else {
        $errors = $this->form_validation->error_array();
        $this->session->set_flashdata('errors', $errors);
        redirect(base_url('task/create'));
      }

      redirect('/task');
  }

  public function update($id)
  {
    $this->load->library('form_validation');
    $this->form_validation->set_rules('title', 'Title', 'required');
    $this->form_validation->set_rules('description', 'Description', 'required');

    if ($this->form_validation->run()) {
      $task = array (
        'title' => $this->input->post('title'),
        'description' => $this->input->post('description'),
      );

       $this->db->where(['id' => $id])->update('tasks', $task);
    } else {
      $errors = $this->form_validation->error_array();
      $this->session->set_flashdata('errors', $errors);
      redirect(base_url('task/edit/'. $id));
    }

     redirect('/task');
  }

  public function show($id) {
     $task = $this->db->where(['id' => $id])->get('tasks')->row();
     $this->load->view('task/show',['task' => $task]);
  }

  public function delete($id)
  {
     $this->db->where(['id' => $id])->delete('tasks');

     redirect('/task');
  }

}

Step 6: Create Views

Go to application/views/ and create a one folder name ‘task‘, inside the task folder we will create three views name index.php, create.php, edit.php, list.php and show.php files.

First create index.php file and put the below code inside the file. This file show all tasks lists.

application\views\task\index.php

<!DOCTYPE html>
<html>
<head>
    <title>Basic Crud operation in Codeigniter 3</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12 margin-tb">
          <div class="pull-left">
              <h2>Codeigniter 3 CRUD Example from scratch with <a href="https://codingdriver.com/">Coding Driver</a></h2>
          </div>
          <div class="pull-right">
              <a class="btn btn-success" href="/task/create"> Create New Item</a>
          </div>
      </div>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th width="220px">Action</th>
            </tr>
        </thead>
        <tbody>
          <?php foreach ($tasks as $task) { ?>
            <tr>
                <td><?php echo $task->title; ?></td>
                <td><?php echo $task->description; ?></td>
            <td>
              <form method="DELETE" action="<?php echo base_url('task/delete/'.$task->id);?>">
                <a class="btn btn-info" href="<?php echo base_url('task/show/'.$task->id) ?>"> show</a>
               <a class="btn btn-primary" href="<?php echo base_url('task/edit/'.$task->id) ?>"> Edit</a>
                <button type="submit" class="btn btn-danger"> Delete</button>
              </form>
            </td>
            </tr>
          <?php } ?>
        </tbody>
    </table>
  </div>
</body>
</html>

For creating new task we need to show the form using the create.php file, create and put the below code inside the file.

application\views\task\create.php

<!DOCTYPE html>
<html>
<head>
    <title>Basic Crud operation in Codeigniter 3</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Create Task</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="<?php echo base_url('task')?>"> Back</a>
            </div>
        </div>
    </div>
    <form method="post" action="<?php echo base_url('task/store')?>">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" class="form-control">
                    <?php
                      if (isset($this->session->flashdata('errors')['title'])){
                          echo '<div class="alert alert-danger mt-2">';
                          echo $this->session->flashdata('errors')['title'];
                          echo "</div>";
                      }
                    ?>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Description:</strong>
                    <textarea name="description" class="form-control"></textarea>
                    <?php
                      if (isset($this->session->flashdata('errors')['description'])){
                          echo '<div class="alert alert-danger mt-2">';
                          echo $this->session->flashdata('errors')['description'];
                          echo "</div>";
                      }
                    ?>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>

  </div>
</body>
</html>

Now edit the task using the edit.php file.

application\views\task\edit.php

<!DOCTYPE html>
<html>
<head>
    <title>Basic Crud operation in Codeigniter 3</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Update Task</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="<?php echo base_url('task')?>"> Back</a>
            </div>
        </div>
    </div>
    <form method="post" action="<?php echo base_url('task/update/'.$task->id)?>">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" class="form-control" value="<?php echo $task->title; ?>">
                    <?php
                      if (isset($this->session->flashdata('errors')['title'])){
                          echo '<div class="alert alert-danger mt-2">';
                          echo $this->session->flashdata('errors')['title'];
                          echo "</div>";
                      }
                    ?>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Description:</strong>
                    <textarea name="description" class="form-control"><?php  echo $task->description; ?></textarea>
                    <?php
                      if (isset($this->session->flashdata('errors')['description'])){
                          echo '<div class="alert alert-danger mt-2">';
                          echo $this->session->flashdata('errors')['description'];
                          echo "</div>";
                      }
                    ?>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>

  </div>
</body>
</html>

Showing the task we need to create a show.php file.

application\views\task\show.php

<!DOCTYPE html>
<html>
<head>
    <title>Basic Crud operation in Codeigniter 3</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12 margin-tb">
          <div class="pull-left">
              <h2>Codeigniter 3 CRUD Example from scratch with <a href="https://codingdriver.com/">Coding Driver</a></h2>
          </div>
          <div class="pull-right">
              <a class="btn btn-success" href="/task"> Back</a>
          </div>
      </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                <?php echo $task->title; ?>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Description:</strong>
                <?php echo $task->description; ?>
            </div>
        </div>
    </div>

  </div>
</body>
</html>

Read: PHP MySQL CRUD Operation Step by Step for Beginners

In this codeigniter basic crud tutorial – We have successfully created first basic crud (create, update, read, delete) project using mysql database.

Clone codeigniter crud operation from https://github.com/codingdriver15/codeigniter-crud github repository.