Ajax Bootstrap 3 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.

avatar
15 Comment threads
17 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
17 Comment authors
Yogesh KolieltonYogesh KoliStevenDaniel Namanya Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
elton
Guest
elton

Uncaught ReferenceError: $ is not defined

$(document).ready(function () {
// READ records on page load
readRecords(); // calling function
});

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

Yogesh Koli
Guest

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.

Daniel Namanya
Guest
Daniel Namanya

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

Yogesh Koli
Guest

Awesome.. Your feedback is valuable!

Sinisa Miskovic
Guest
Sinisa Miskovic

awesome !!! respect man !!

Yogesh Koli
Guest

Great! happy to hear your feedback Thank you!

iqbal azmi
Guest
iqbal azmi

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

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

Yogesh Koli
Guest

Awesome! happy to hear your feedback Thank you!

shawn
Guest
shawn

hi sir can i get a source code im newbie

Thiago
Guest
Thiago

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

Rodrigo Linkweb
Guest
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?

Raffaele Scarcella
Guest
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 🙂

Cris Abella
Guest
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.

Khomaini kh
Guest
Khomaini kh

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

Yogesh Koli
Guest

It is used to check ajax request status.

copier
Guest
copier

working

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

Yogesh Koli
Guest

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

Yogesh Koli
Guest

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

Yogesh Koli
Guest

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

TeHeBuK
Guest
TeHeBuK

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

Yogesh Koli
Guest

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

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

kundji sept
Guest
kundji sept

source code

Yogesh Koli
Guest

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

Kobe Bryant Ballega
Guest
Kobe Bryant Ballega

I suggest you should put pagination and search too.

Yogesh Koli
Guest

Thank you!