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.