A CodeIgniter CRUD application is one that uses forms to get data into and out of a database. In this tutorial, we’ll build a complete CRUD application using CodeIgniter 4 and Mysql.
CRUD is an acronym for the four basic operations: Create, Read, Update, Delete. Most applications have some kind of CRUD functionality, and we can assume that every programmer had to deal with CRUD at some point.
Here’s the demo of our app
prerequisites
- We have a text editor
- Composer running on your computer
- Have basic knowledge of CodeIgniter
Setting up CodeIgniter
We first need to set up CodeIgniter. For that, we will create a project named CodeIgniter-crud
. From the terminal execute the following command:
this command downloads a copy of a starter CodeIgniter application in a folder called CodeIgniter-crud
on your desktop folder. If you’re running the command for the first time, it might take a while to complete depending on your internet download speed.
Next, open up the XAMPP application and start your Apache and MySQL server as shown below:
Once Apache and MySQL are running, open up your favorite browser (eg Chrome) and type in localhost/phpmyadmin
to open up PHPMyAdmin. PHPMyAdmin is going to be used to create the database used for our application.
Once PHPMyAdmin boots up, click on the ‘new’ button on the left sidebar to create a new database.
On the page that loads, type in your preferred database name here we are using Codeigniter-crud
as the database name and click on the create button. now we will execute SQL query in PHpmyadmin to create our tables.
Once that is done, head over to your terminal and cd (change directory) into the CodeIgniter-crud
folder.
now, run cd CodeIgniter-crud && code
to move into the folder and open up the project folder in VSCode.
Next, open up the CodeIgniter-crud\app\Config\Database.php
file in VSCode and modify the database credentials as such:
Creating and Setting Up the NamesCrud Controller
Next, we’re going to create a controller to handle CRUD operations in our CodeIgniter Application. Create a file called NamesCrud.php
inside CodeIgniter-crud\app\Controllers
with the following code:
In the code snippet above the NamesCrud
controller class has the following methods to perform CRUD operations (view, add, edit, and delete). The flow of NamesCrud controller works like this:
- show the names list
- add a function to add a name
- add function to store data
- Add a function to show single name
- add a function to update name data
- Finally a function to delete the name
Creating and Setting Up the NameModel Model
The model class provides methods to handle the database related operations, open up CodeIgniter-crud\app\Models\NameModel.php
and add the following code:
Creating Routes for our application
Now we will create Routes for our application to handle Crud operations, for that you need to add some rules in CodeIgniter-crud\app\Config\Routes.php
file.
Creating Views
Now that our application structure is done, let’s bring our application to live by displaying it visually. To begin, in the CodeIgniter-crud\app\Views
, create the following files.
addname.php
namelist.php
editnames.php
Open up the namelist.php
and put the code below in it.
Here we are fetching data from our database, we are also making use of bootstrap and Jquery datatable to show data.
Next, open up the CodeIgniter-crud\app\Views\addname.php
file and add the following code to it.
Here we have added a form to store data in our database. Once, we have saved our addname.php
view, we need to allow users to edit names. To do that, open up the editnames.php
file and type in the following code:
Once that is done run the php spark serve
command in your terminal, then head over to http://localhost:8080/index.php/namelist
in your browser to see something similar to this.
Conclusion
I hope you learned a few things about CodeIgniter. Every article can be made better, so please leave your suggestions and contributions in the comments below. If you have questions about any of the steps, please do ask also in the comments section below.
You can access CodeSource from here.