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.


CodeIgniter CRUD using Ajax Project Screen Shot

CodeIgniter CRUD using Ajax learn php codeiginter framework with ajax bootstrap mysql

Insert/Add Data

CodeIgniter CRUD using Ajax add record to-mysql-database-phpcodify

Update Data

edit record in mysql database phpcodify

Delete Data(CodeIgniter CRUD)



  • 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 for (CodeIgniter CRUD using Ajax)

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.

Related Keywords:

codeigniter crud example download,codeigniter 3 crud,codeigniter crud generator,codeigniter crud bootstrap,codeigniter crud library,codeigniter crud ajax,grocery crud tutorial,what is grocery crud,CodeIgniter CRUD using Ajax,CodeIgniter CRUD tutorial,CodeIgniter CRUD example tutorial


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.If you find this information useful, remember to share it on your social network.

Check also:

Connect Multiple Databases in CodeIgniter

CodeIgniter Login Registration System using MySQL Bootstrap

  • 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?

  • Gautam Sharma

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


  • 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







      $(document).ready(function() {
      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

  • Aditya Gunawan Saputra

    Hi ehtesham mehmood… I has been download the sources code, but all javascript not work, I using linux mint, what you know solution to this error?

  • Arjun Yadav

    I use a dropdown select in edit form, while editing it does not hold the value of the current id, please help me how to do it ? Thanks

  • Andri budianto

    Dear Mohammed,
    im reading on

    and i have trouble with my code, i dont know how i can fix it,
    i have error on add_book, edit_book, and delete_book.
    this is like my jquery not working and i have notice error get data from ajax.
    when i click add_book, this is not working. not showing anything.

    please help me.
    thank you.

    • EhteshamMehmood

      Please check you wrote the exact same code for the ajax section. Paste here your AJAX Code. So I can have a look and find the problem.

      • Andri budianto

        $(document).ready( function () {
        } );
        var save_method; //for save method string
        var table;

        function add_artikel()
        save_method = ‘add’;
        //$(‘#form’)[0].reset(); // reset form on modals
        $(‘#modal_form’).modal(‘show’); // show bootstrap modal
        $(‘.modal-title’).text(‘Add Artikel’); // Set Title to Bootstrap modal title

        function edit_artikel(id)
        save_method = ‘update’;
        $(‘#form’)[0].reset(); // reset form on modals

        //Ajax Load data from ajax
        url : “” + id,
        type: “GET”,
        dataType: “JSON”,
        success: function(data)


        $(‘#modal_form’).modal(‘show’); // show bootstrap modal when complete loaded
        $(‘.modal-title’).text(‘Edit Artikel’); // Set title to Bootstrap modal title

        error: function (jqXHR, textStatus, errorThrown)
        alert(‘Error get data from ajax’);

        this is same with your code.

        • EhteshamMehmood

          Dear Andri

          You missed the url .

          url : “/” + id,

          Check in your code.

          • Andri budianto

            im not using / after tag ?> bcos the “/” include on my url path.

          • Andri budianto

            this is my code

          • Andri budianto

            SOLVED, i have error on my model. but i still cant load my modal when i click add new

      • Andri budianto

        and i get respone from localserver 500 (internal server error)

  • Arba Sudiatmika

    i just copy-paste your code
    but it doesnt work
    nothing appear after i click add, edit or delete
    i try download the file but i cant download (no download link)
    can you help me sir? thank you

  • Mark

    I see the pagination but i can figure out where it is implemented could you help me with this. I also see where you can arrange by column and select how many to display on the page but i cant figure out where that is implemented either

    • EhteshamMehmood

      @disqus_YGJj2Aa2d1:disqus Pagination is done by the Datatables Javascript Plugin. using this code.
      $(document).ready( function () {
      } );

      And here this plugin is included.
      <script src="”>
      <script src="”>
      For more info you can visit official site.

      I did’nt get your second question. Can you elaborate.

      • Mark

        thanks that answered all my questions. on another note i was following your code and was having issues then i found that you misspelled assets with assests took me for ever to figure it out. thanks for the excellent tutorial. soon i will be attempting this same CI ajax jqurey crud to get and set in multiple mysql tables do you have any pointers on that ?

  • jairam swami

    How can I show validation error through ajax and use this method.

  • Suresh

    Hi, i have downloaded code, testing in wamp server
    when i open link “http://localhost/ci_crud/” it is saying 404 page not found
    i have created database and imported sql from your code
    what may be the problem ?

  • This is a great help to me. With the help of this tutorial, i have implemented CRUD using Java, Ajax, DataTables, jQuery and MySQL. This is the link

  • Vinu S. Khandare

    Hello, first of all thanks for providing this code.
    actually i hve used this code to my project but when am clicking and edit data, getting all data from database but could not update..can u please help me…

  • ulfi helfiani

    can you help me, why the function of edit and delete can’t show?
    and when i can’t add data too…
    thank you

    • if you try this code carefully, is working fine, EXCEPT edit data

  • Mukhlisa Anvarova

    hello, I have downloaded your source file, it is working however it doesn’t read jQuery and dataTables, do i need special configuration to fix it?

    • EhteshamMehmood

      You can check your Project URL…. is it correct ?

  • Sujash Joshi

    Hey man the code works but only had a problem with displaying the ajax function.

  • Junie Negentien

    Sir, your tutorial(code snippet) are nice & easy to understand but there’s annoying thing in the code. When you update/delete you need to reload. I think it needs a little improvements. The implementation of MVC is also better than the other tutorials out there. I still have some recommendations to become almost perfect.
    1. Remove the RELOAD functionality. Need to used AJAX.
    2. Include server side validation. Frontend validation is also optional.

    I like when developers write codes in a straight forward manner like this.

    • disqus_7nVxUoyUO5

      do you have a examples using mvc and ajax, Would you like to share the code?

  • ashwini bhalerao

    hello sir,
    mere code mai add,detete,edit perform nhi ho raha hai…ajax ki error hai…plz help me

  • McMahon81

    Excellent tutorial, thank you!

    How would I put the ajax code of the view into an external file?


  • Martin Setiawan

    many thanks for you

  • Hasnain Shaikh

    Hi @EhteshamMehmood:disqus such a nice crud i like it, is this crud available in laravel 5.4 ??

    • EhteshamMehmood

      Dear @disqus_A6XZkGHXiQ:disqus not yet. will make it soon Laravel CRUD tutorial for 5.4. stay tuned.

      • Hasnain Shaikh

        Thanks Dear @EhteshamMehmood:disqus

  • Hasnain Shaikh

    @EhteshamMehmood:disqus why is my modal not working? pls help

  • jack peter

    this is nice one and a great help to me.
    I want to further improve this by adding dynamic input fields with validation in ajax. Is there any easy method for doing that?

  • Wyless Yeidio

    how can i pass the value of json encoded data, for example i have a book, theres a field named category, how can i pass the default category to a dropdown option selected so i can edit it and at the same time i can display the default value?

  • Silverio Sasuman Jr. (Jhun)

    Hi @EhteshamMehmood:disqus it is the best crud tutorial. thank you.. Is this crud possible reflect the data without loading the page?

  • Silverio Sasuman Jr. (Jhun)

    Hi EhteshamMehmood This is the best crud tutorial. thank you.. Is this crud possible reflect the data without loading the page?

  • Dian Andria

    thank you

  • Ultra Furious Entertainment

    HI Ehtesham Mehmood,

    i have trouble with my code, i dont know how i can fix it,
    i have error on add_book, edit_book, and delete_book.
    this is like my jquery not working and i have notice error get data from ajax.
    when i click add_book, this is not working. not showing anything.

    please help me.
    thank you.

  • Admin Maximcode

    what version of crud you used for the generation for this example ?
    1. grocerycrud
    2. crudigniter.


  • Admin Maximcode

    Hi, I am Elio
    Hi, how to generate thes codes controller, model ? I try to generate code with crudigniter but it is not the same code that you generated. Thanks

  • Krishna Kanth

    I am getting Error get data from ajax. Everything working fine in local but coming to live I am getting that error

  • Francisco

    Hello, thank you very much just what I was looking for, just a question.
    How can I add the set_rules of codeigniter, so that it does not allow to save if the field for example isbn is unique, can not be duplicated?
    That shows that the information that is introduced in that field has to be unique.

  • pratika

    haii sir, its not working for me..nothing is dispalyed..have i left something to configure??

    • Ehtesham Mehmood

      @disqus_blgTzUJahG:disqus Please share your source code. so we can analyze it then someone can give you right direction.

  • Hi @ehteshammehmood:disqus i have the problem about the code, but when i’m post my code here, my comment is detected spam, so i can’t post my code here. can u give me your email? i will message you, pls help me

    • Ehtesham Mehmood

      @dafapramudya:disqus yeah sure my email:

      • Hi @ehteshammehmood:disqus i already send the message to your email

      • When i click the edit button i found this error in the console: Uncaught ReferenceError: AA001 is not defined at HTMLButtonElement.onclick, and the modal doesn’t appears.

        *AA001 is ID

        I already send my view code to your email, pls check it

        Thank you

        • It happens because AA001 is varchar not int, if i change AA001 to 1, it will work, but i need keep my id type is varchar(ex: AA001, AA002, etc). Can u help me pls?

Read previous post:
AngularJS Datatable Pagination, Sorting and Searching Using Ajax

AngularJS Datatable Pagination, Sorting and Searching Using Ajax AngularJS Datatable is an angular module for provides a datatable directive along with datatable...