This is a step by step Codeigniter 4 AJAX tutorial. In this tutorial, we will learn how to fetch user records in Codeigniter 4 application from MySQL database using AJAX web development technique.

Ajax means Asynchronous JavaScript And XML, and it is a popularly known web development technique. This web technology is used on the client-side to develop asynchronous web applications. This technology propels the web development process and allows you to send and get the data from a web server asynchronously without interfering with the display and behavior of the existing web page.

Read more: Build a CRUD Application in Codeigniter with Bootstrap.

Codeigniter AJAX Example

Let us understand what and how we are trying to achieve in this tutorial.

We will create a basic CRUD application using the Composer package. Thereafter, we will make the consensus between CI and MySQL. By following the MVC pattern, we ill create a Model. It’s an archetype of database values. Within which we define a simple function that gets all the records from the database.

We will gradually connect all the parts and maintain the concurrent impulse of AJAX web development techniques. Then, we will create two functions inside the Controller and load the view and fetch the records using Model simultaneously.

With gravitas, we will create views and load all the data inside the view and display on the user screen using AJAX in Codeigniter 4.

Table of Contents

1. Install Codeigniter 4
2. Facilitate Codeigniter Errors
3. Connect Database
4. Create Model
5. Create User Controller
6. Define Route
7. Fetch Records from Database with AJAX
8. Start the Application

Install Codeigniter 4

You must have a composer package installed on your device to install the Codeigniter application.

composer create-project codeigniter4/appstarter

BashCopy

After installing the app, change the name of the folder such as  codeigniter-ajax-crud.

Next, get inside the app folder:

cd codeigniter-ajax-crud

BashCopy

You can also manually download the Codeigniter application.

Facilitate Codeigniter Errors

We have to enable the the error reporting by setting display_errors to  1 instead of  0 in  app/Config/Boot/development.php and  app/Config/Boot/production.php files.

ini_set('display_errors', '1');

PHPCopy

Connect Database

To maintain the ongoing impulse, you can execute the SQL query from PHPMyAdmin to create the  users table.

CREATE TABLE users (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email Address',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;

INSERT INTO `users` (`id`, `name`, `email`) VALUES
(1, 'John Doe', 'john@gmail.com'),
(2, 'Vanya Hargreeves', 'vanya@gmail.com'),
(3, 'Luther Hargreeves', 'luther@gmail.com'),
(4, 'Diego Hargreeves', 'diego@gmail.com'),
(5, 'Klaus Hargreeves', 'klaus@gmail.com'),
(6, 'Ben Hargreeves', 'ben@gmail.com'),
(7, 'The Handler', 'handler@gmail.com');

SQLCopy

Add database name, username and password inside the  application/config/database.php.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'test',
        'password' => '4Mu99BhzK8dr4vF1',
        'database' => 'demo',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
	];

PHPCopy

CodeIgniter\Database\Exceptions\DatabaseException #8

Unable to connect database : Codeigniter

To fix  Codeigniter – cannot connect to MySQL database error, change the hostname based on your local development server e.g MAMPP or XAMPP.

## MAMPP
public $default = [
  ...
     'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
  ...
]

## XAMPP
public $default = [
  ...
     'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
  ...
]

#codeigniter #database