How to Create CURD Operation in Codeigniter with AJAX and Bootstrap

Dear Reader, let us we know that “How to Create CURD Operation in Codeigniter with AJAX and Bootstrap, Model and MYSQL“  Using Datatable So in this Tutorial We Learn Step By Step  How to Create CURD Operation in Codeigniter with AJAX, Bootstrap, Model and MYSQL Process.

CRUD means four basic operations Create, Read, Update and Delete performed on the database.In SQL(Structured) CRUD represents as INSERT (Create), SELECT (Read), UPDATE (Update) and DELETE (Delete) commands.

In this tutorial, we Create CURD Operation using Header and Footer, if you did not create Header/Footer yet and want to create Header/Footer then don’t worry you need to read this post first.

How to Create Header/Footer and Navigation in Codeigniter

First, we see some Snapshots(Forms) for our CURD Operation

For view All Mobiles we used bellow snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-1

For add Mobile we used bellow snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-2

For edit Mobile we used bellow snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-3

> For delete Mobile we used bellow snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-4

Step 1:- First of all, you need to create the database for our project.

Step 2:- Now create a table mobiles using the below SQL code

Step:3 Now dump some data for table “mobiles” using bellow SQL code

 

Step:- 4 First we will see our controller, so create a Mobiles Controller in your CI application.

First, create a constructor in__construct() this we will load our necessary libraries.

Step 5:- In Mobiles Controller first we need to create Index method in this function we will retrieve data from our database(models) and will pass this data to the respective view.

 

Step 6:- Now we need to create a methodMobile_add() in this function we will insert a new mobile into the MySQL database.
Step 7:- Now we need to create methodAjax_edit(), in this function we will get the data of the mobile with respect to its id into the Bootstrap model box.
Step 8:- Now we need to create a modelMobile_update(), In this function, we will update the values of the mobile, which we edited.
Step 9:- Now we need to create,Mobile_delete This method is used to delete the mobile.
Step 10:- Now here is a Complete code of Mobiles Controller, create your Controller file and paste bellow code

 

Step 11:- Now we see our Model, we need to first create a get_all_mobiles()method in a model

Step 12:- Now we need to create get_by_id($id).method for fetching a single a mobile record we have to retrieve the mobile by its id
Step 13:- Create methodmobile_add($data) in a mobile model for insert a mobile into the database.
 

Step 14:-  Create a mobile_update($where, $data)method for update a mobile record in the database, which takes 2 parameters one is $where and the second is $data
Step 15:- Now create a delete_by_id($id)method for delete a mobile from the database
Step 16:- Now here is the complete Mobile Model code copy and paste below code into your model file.
Step 17:- Now here our view of AJAX code.Create your mobiles.php(view) file and paste the below code into your view file.

Step 18:-  In mobiles.php(view) we add some CSS and JS, so download assets folder here 

extract zip file and copy assets folder and paste in your project’s root directory as we can see in below snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-5

Step 19:-  Now for run your project open browser and type in URL like localhost/your_project_name/mobiles

like

localhost/ci_demo/mobiles

you can see the result as we can see in below snapshot

how-to-create-CURD-operation-in-codeIgniter-with-AJAX-and-Bootstrap-step-1

Congratulations you have successfully created CURD operation in Codeigniter using Ajax, Bootstrap, MySQL, and Datatables if this post was helpful for you then please share this post on social media and if you have any query then please contact us or comment below, Thanks

Related Articles
«
»

Leave a comment:

Your email address will not be published. Required fields are marked *