Ajax Bootstrap jQuery MySql PHP

CRUD Operations in PHP with PDO using Bootstrap

PDO CRUD Operations in PHP using Bootstrap, Ajax and jQuery
Written by Yogesh Koli

I have been getting requested to post crud tutorial with PDO connection, so finally it’s here.

Get Complete Source Code

Tutorial Features:

  • Create, Read, Update and Delete Records
  • Bootstrap – for design and modal popup
  • jQuery – Used to handle ajax request

Tutorial Focus:

At the end of this tutorial you should be able to learn how to use php data object to perform crud operations. also you will learn how to use bootstrap modal popups with ajax request, I also created php library file with Object Oriented Programming, so overall there are many good practiced to learn from this tutorial.

Let’s get started

Step 1: Database Setup

So as always our first step is to setup database, go ahead and create database and add following table that we are going to need to perform our crud operations.

users table:

IMAGE : Users Table Structure

Users Table Structure

Step 2: Database connection file:

Go ahead and create new folder for your crud demo project and add ajax/db_connection.php file and use following code.

ajax/db_connection.php:

Make sure to change connection variable, in my case I have itech_crud database ready to use with no password set to the root user.

So in the above code we have DB() function which has global scope in the script, keep in mind if we include this file in other php file we can easily call DB() function to connect with your database.

Step 3: Create Library file with CRUD Functions:

In this tutorial I following little different flow for coding, from backend to front end, okay so library file is the core php file which is going to have class and function to perform operations.

Create new file called – ajax/lib.php and add following code:

ajax/lib.php:

Quick description on library file structure:

Database – At the very top of the file we are using our database connection file that we are going to need through the library.

CRUD: Class name which is having our methods collection.

__construct() and destruct() method to initiate our database connection variable.

Create(): To add new record in the database, it requires three basic parameters.

Read() : To read all the records from the database

Delete() : To delete record from the database table for particular User ID.

Update() : As name says it used to update the record

Details() : Use to get details for particular User ID.

For each and every method we are going to have call, let’s create request files to include library file and call method as needed.

Step 4: Ajax Request files:

create.php:  – Create new Record

read.php: – Read all Records

update.php: – Update Reocrd

delete.php: – Delete Record

details.php: – Record Details

If you have a look on above files you will see, we have really good way to call methods from lib file, we are easily including lib.php file, then we are creating Object of CRUD class to call methods.

Real easy right ?

So overall our backend work is done, now we just needs create front part. front part is going to have Bootstrap Design and jQuery Script to for ajax requests.



Step 5: Bootstrap Design:

Create index.php and add following code.

– Download latest bootstrap file and add to the project from getbootstrap.com

– Download later jQuery file

– Create  js/script.js file

Make sure wit the paths for your newly added files in src as well as href.

Content Section:

Add following content section html code in the index.php file after <body> tag.

 

Content Section

Add New Record Bootstrap modal popup:

Add New Record Modal

Update Details bootstrap modal popup:

 

Update Record Modal

Step 6: jQuery Script:

Please note: script needs to be there in js/script.js file.

Add record function:

Read Records:

Get details:

Update Record:

Delete Record:

Read records on page load:

Finally if you run your code, you should be able perform crud operations.

Final Design:

Records List

Get Complete Source Code

If you have any issues using tutorial, do let me know in the comment section below.

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He’s driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.

  • Kobe Bryant Ballega

    I suggest you should put pagination and search too.

  • kundji sept

    source code

    • Did you tried to build demo from steps provided are you getting any difficulty?

  • TeHeBuK

    Hello!Thanks a lot for your work. I have a few question for you.
    1. How to provide AJAX when i have MVC structure, not pages?I mean, how to connect to “actions” (methods) in controllers?
    2. And how, in this case, get AJAX data from DB?
    Thank you!

    UPD. It’s not a framework, ofc, i have a simple MVC structure.

    • You can just create a simple api and call it using Ajax, just like I have readRecords(); JS function which handling Ajax request using jQuery.

      • TeHeBuK

        I’m beginner, i can operate with OOP, jQuery a little bit, but api is still beyond my understanding =) Can i provide all the things without api? Thanks.

        • yes you can, create a page where you can store or read the data from database and access that page with the Ajax you are done.

          • TeHeBuK

            Is it means that I can’t address directly to controller, where I get data from model?My controller just get data from model and then include view and return true. I thought I can get array from model via JSON, you know, encode and then decode…But I don’t understand how write it correct in AJAX…
            Sorry, maybe I ask too much that you can give me, but I googled it so many times and still didn’t find any answer…

          • try to send me a basic code with email or using git. will take a look.

          • TeHeBuK

            http://pastebin.com/EZz6E5FE
            It’s not a commercial code, so it’s ok for sharing.

          • I can’t see your JS file, from where your handling the Ajax requests?

          • TeHeBuK

            As I said, I can’t imagine how that code should be written in my case. Sorry for that. I still try to find smth in google.

  • copier

    working

  • Khomaini kh

    Hi everyone.. help me please.. what the purpose of “status” ? thanks

  • Cris Abella

    I am using your demo and it works (Product Master list and Category List) now my problem is I want to add a dropdown list-databound based in category List and also to add a checkbox to determine whether this product(item) is active or inactive.

  • Raffaele Scarcella

    This code working but you need to correct the directory of delete.php, details.php, read.php and update.php. The first time i read this article i don’t understand they need to stay in ajax directory.
    Good joob 🙂

  • Rodrigo Linkweb

    I’m getting the following message on Firebug when clicking create a new record or editing one: TypeError: ativa is undefined.
    Does someone could help me on this?

  • Thiago

    I need to input “data mask” with jquery, how can i do this?

  • bobwolmer

    Yogesh Koli Sir i am migrating from procedural to oops and after going through many a PDO CRUD tutorials on net i stumbled upon this jewel of a s tutorial …..this has set me on right track and ajax facility is just pixie dust to top all the good stuff ……thank you very much …lots of love and respect from Valley of Kashmir

    • Awesome! happy to hear your feedback Thank you!

      • shawn

        hi sir can i get a source code im newbie

  • iqbal azmi

    Hi..sorry.. can i get a source code please.

  • Sinisa Miskovic

    awesome !!! respect man !!

    • Great! happy to hear your feedback Thank you!

  • Daniel Namanya

    Great work, i have been trying to call PDO functions using Jqeury but it has been a hustle for me. thanks man

  • Steven

    @iyogeshkoli:disqus Hi, i followed all but altered all variables to match with my database. And when i try updating or creating the modal wont hide and I cant update / create data. What seems to be the problem.. Btw, this tutorial is awesome..

    • Hey @disqus_hfAhcM6i5S:disqus, Thanks for following up iTech Empires. You must be missing something into your JS code kindly checkout the console or checkout the PHP backend script to make sure it is correct according to the given instructions.