CodeIgniter CRUD using Ajax,Bootstrap,Models and MySQL

Are you Interested in creating your own CRUD Application in CodeIgniter?Well, Today in this tutorial I’m going to teach you how to create CodeIgniter CRUD using Ajax,Bootstrap,Models and MySQL application. CRUD is one of the primary functions of a any Database.CRUD means four basic operations Create, Read, Update and Delete performed on the database.In SQL(Structured Query Language) CRUD represents as INSERT (Create), SELECT (Read), UPDATE (Update) and DELETE (Delete) commands. To Learn the CRUD operations is an essential in application development especially when you are going to work with the databases.So for this CodeIgniter CRUD app we will take an example of Book store in which user can Add,Search,Update and Delete the book using CodeIgniter.

Project Screeshot

learn php codeiginter framework with ajax bootstrap mysql

Insert/Add Data

add-record-to-mysql-database-phpcodify

Update Data

edit record in mysql database phpcodify

Delete Data

delete-record-in-mysql-database-phpcodify

Pre-requisites

  • HTML,CSS
  • Basic JavaScript
  • Basic PHP OOP
  • Text Editor, I will suggest Atom,Brackets
  • Xampp,Wamp,Mamp

1-First of all we will create the database for our project.

2-Now create a table books using this SQL code.

3-Now dump some data for table “books”.

First we will see our controller, so create a Book Controller in your CI application.

4.First create a constructor __construct() in this we will load our necessary libraries.

5.Index method in this function we will retrieve data from our database(models) and will pass this data to the respective view.

6.Book_add() method in this function we will insert a new book into the MySQL database.

7.Ajax_edit() , in this function we will get the data of the book with respect to its id into the Bootstrap model box.

8.Book_update(), In this function we will update the values of the book, which we edited.

9.Book_delete, This method is used to delete the book.

10.Controller Complete Code

Here is the complete Book controller code.

Now we see our Model.

11.Here is the first function which is get_all_books().

12.To fetch a single a book record we have to retrieve the book by its id so we will make a method get_by_id($id).

13.To insert a book a in to the database we will make a method name called book_add($data) in our book model.

14.To update a book record in the database, we will make a function called book_update($where, $data) which takes 2 parameter one is $where and second is $data.

15.To delete a book from the database we will create a method called delete_by_id($id).

16.Now here is the complete Book Model code copy and paste it into your file.

17.Complete View

Now we will see our view with AJAX code.Create your book_view.php file and paste the below code into your view file.

Now save your code and run it in your browser it will work fine.

download-phpcodify

Conclusion

So today we learned the basic codeiginter application , in which we made CodeIgniter CRUD using Ajax,Bootstrap,Models and MySQL.I hope you guys learned alot from it.If you guys have any problem regarding codeigniter crud using ajax let us know by commenting here.

 

  • Dedi Rohman

    Nice tutorial…
    thanks for the lesson

  • Zhulfikar

    Hey nice tutorial but i want to ask whether the data that we input in bootstrap modal could be deleted automatically when we close the modal?
    Thanks

  • Gautam Sharma

    Hello Ehtesham,
    How can I download the code, please provide download url…

    Thanks

  • Chixka 2015

    i am receiving a data error get from ajax

    • EhteshamMehmood

      Please share your code so then I can guide you.

  • Wahyu Artadianto

    Hi Ehtesham,
    this is great tutorial can i ask some question?
    if i using query inner joint the search, filter and and limit cannot be execute

    and one more do u have tutorial to add button display its mean if we click they will display detail of data on modals thanks a lot for ur help before

  • Alejandro Lopez

    I have develop framework for this project:

    1.- Select your database
    2.- Choose the tables
    3.- Select fields for view-edit option
    4.- Mouse click for create complete code for every table just one second

    Somebody want explore? its something like php-Maker

    • EhteshamMehmood

      Yes @disqus_CGVfJlVLvU:disqus Share with us. We would love to see it.

    • Mohammed Arshad

      i like to use it

      • Alejandro Lopez

        Thank you…..

  • Nuno Cardoso

    How can i make the fields in the modal required?

    • EhteshamMehmood

      you can make a function in javascript and validate it there on the pressing button. here is an example

      Login

      ×

      Login

      Username

      Password

      Login
      Cancel

      $(document).ready(function() {
      $(‘#loginForm’).formValidation({
      framework: ‘bootstrap’,
      excluded: ‘:disabled’,
      icon: {
      valid: ‘glyphicon glyphicon-ok’,
      invalid: ‘glyphicon glyphicon-remove’,
      validating: ‘glyphicon glyphicon-refresh’
      },
      fields: {
      username: {
      validators: {
      notEmpty: {
      message: ‘The username is required’
      }
      }
      },
      password: {
      validators: {
      notEmpty: {
      message: ‘The password is required’
      }
      }
      }
      }
      });
      });

  • Mohammed Arshad

    ehtesham mehmood can i have ur mail id