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)

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

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

  • 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? https://uploads.disquscdn.com/images/f0b7c5f2f63cecffbbbaab00bf63a7b953a830349db6ba18ce24c8f8f2f087ee.png

  • 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 http://www.phpcodify.com/codeigniter-crud-using-ajax-bootstrap-models-and-mysql/

    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 () {
        $(‘#table_id’).DataTable();
        } );
        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
        $.ajax({
        url : “” + id,
        type: “GET”,
        dataType: “JSON”,
        success: function(data)
        {

        $(‘[name=”artikelId”]’).val(data.artikelId);
        $(‘[name=”judul”]’).val(data.judul);
        $(‘[name=”isi”]’).val(data.isi);
        $(‘[name=”kategori”]’).val(data.kategori);
        $(‘[name=”createby”]’).val(data.createby);

        $(‘#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)
        http://prntscr.com/ed802n

  • 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 () {
      $(‘#table_id’).DataTable();
      } );

      And here this plugin is included.
      <script src="”>
      <script src="”>
      For more info you can visit https://datatables.net/ 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 https://github.com/GongchuangSu/SSH-Admin/commit/fc580249da6c17e38e7b001e64099c23e18b05e5

  • 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

  • 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

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

    Thanks.

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

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...

Close