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

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.

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.

 

Ehtesham Mehmood

Ehtesham Mehmood is a Software Engineer from Pakistan.He's deeply involved in Web Development and Internet Marketing, He loves to code in PHP, jQuery, HTML5, CSS3, JavaScript, Ajax,CodeIgniter,Laravel and some other tools. He is a passionate web developer who creates web applications and websites from absolutely scratch.

  • 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