Creating a CRUD Operation using PHP/PDO and Ajax with Bootstrap/Modal Tutorial

This tutorial tackles how to Ajax CRUD(create, read, update, delete) Operation using PDO with Bootstrap/Modal. We use ajax so that the page won't reload after the successful action and in this tutorial, I've performed ajax using jQuery to our PHP API that uses PDO as an extension.

Getting Started

I've used Bootstrap and jQuery in this tutorial to enable bootstrap modals. These files are included in the downloadable of this tutorial but, if you want, you may download them using the links below:

• Bootstrap
• jQuery

Also, please Download and Install a local web server such as XAMPP to run a PHP Script.

Before we continue in coding, please make sure that your Apache and MySQL is already started. To do this for XAMPP/WAMP, open the XAMPP/WAMp's Control Panel and start the mentioned web and database server.

Creating our Database

Next, we create our MySQL database. Open the PHPMyAdmin in a brwoser i.e. http://localhost/phpmyadmin. Then, create a new database naming mydatabase.

I've included a .sql file in the downloadable of this tutorial which is a MySQL database file. All you have to do is import the said file. If you have no idea on how to do this, please refer to my tutorial, How import .sql file to restore MySQL database.

Or you can also create the table and columns programmatically. To do that, navigate to the SQL Tab of the PHPMyAdmin and make sure that the newly created database was selected. Then, copy/paste the script below and click the Go Button.

Creating our Connection

Next, we are going to create our connection to our database by creating a Class named Connection. We can do this by creating a new file and name/save it as connection.php and paste the code below.

Creating our Main Page Interface

Next, we are going to create our main page where we show our table data and we are going to name this file as index.php.

Creating our Modal

Next, we create our modal that holds our add, edit and delete form. We do this by creating a new file, name it as modal.html and paste the code below.

Creating our Ajax Script

Next, we are going to create the file where we put all our ajax scripts and request. We name this file as app.js.

Fetching our Table Data

Next, we fetch the table data that we will be going to display. This file is accessed via ajax request. We name this as fetch.php

Creating our Add Script/Query

Next, we are going to create our add script which is also accessed via ajax request. We name this file as add.php.

Fetching Single Row

Next, we fetch a single row of data from our database also via an Ajax request which will be used in our edit and delete form. Create a new file and name it as fetch_row.php.

Creating our Edit Script/Query

Next, we are going to create our edit script and also access it via Ajax request by creating a new file, name it as edit.php and paste the code below.

Creating our Delete Script/Query

Lastly, we create our delete script which is also accessed via ajax request. Create a new file and name it as delete.php.

DEMO

That's it! You can now test your work by browsing the web application in a browser i.e. http://localhost/[source_code_folder_name]. If you encountered an error on your end, please review the codes or download the working source code that I created for this tutorial. The Download Button is located below.

That ends this tutorial. I hope this tutorial will help you with what you are looking for. Explore more on this website for more Free Source Code and Tutorials.