If you are looking to learn how to create CRUD application in PHP then you are in the right place. In a web application, 4 operations are mainly performed, Create, Read, Update and Delete. These are called CRUD operations in short.
Create – This is to save the data to the database.
Read – This is the operation to read or display the saved data from the database.
Update – This is to update the existing records in a database.
Delete – Last but not least, this is used to perform delete operation in the database.
Each operation has its own query syntax to perform its task. Let’s take a look at each query and we will understand its concepts.
Ultimately we perform CRUD operation in any complex web application or website by different techniques and methods.
Today, I am very happy to share with you CRUD application in PHP using jQuery AJAX from scratch. But today I will show you a very simple way to CRUD using a bootstrap popup model.
How to do that?
In this tutorial, I will use a bootstrap popup model in which I will place a registration form asking to fill name, email, and contact.
After that, I will fetch the records from the database and display them without page refresh that’s why we are using AJAX.
Resources to perform CRUD operations
It is mandatory to use jQuery library to use AJAX functionality.
Here I will use a popup model on the click of the add button so that we can do this without a page refresh, That’s why we need bootstrap also. This will be good for styling purposes too.
That’s enough!
Lets first see the files and folder structure we are going to create for CRUD application in PHP using jQuery AJAX.
Let’s understand the task of these files. Each file has its own task.
config.php is the connection file to the database.
crud-app.js is a javaScript file responsible to make AJAX call to accomplish not to page refresh.
crud-script.php has the logics of CRUD means to create, read, delete and update.
CrudOprations.php is a PHP class that has user-defined functions. Since we are going to use the OOPs methodology.
custom.css is CSS file to just to style something nothing else.
finally, index.php is the main file on which everything is to be performed.
crud_applications.sql is just an SQL file which is a database table. The table has this structure and you to create this in your database.
Don’t worry, I will provide the SQL file, Source code link is at the end of this post. Please include these CDN in the head tag of your index.php file.
die("Error in connection".$connection->connect_error);
}
<?php
$connection = new mysqli("localhost","root","","codingbirds");
if (! $connection){
die("Error in connection".$connection->connect_error);
}
CrudOperations.php file
<?php
class CrudOperations
{
public function saveData($connection,$name,$email,$contact,$editId)
{
if ($editId == "") {
$query = "INSERT INTO crud_application SET name='$name',email='$email',contact='$contact'";
}else{
$query = "UPDATE crud_application SET name='$name',email='$email',contact='$contact' WHERE id='$editId'";
}
$result = $connection->query($query) or die("Error in saving data".$connection->error);
return $result;
}
public function getAllData($connection)
{
$query = "SELECT * FROM crud_application";
$result = $connection->query($query) or die("Error in getting data".$connection->error);
return $result;
}
public function deleteData($connection,$deleteId){
$query = "DELETE FROM crud_application WHERE id='$deleteId'";
$result = $connection->query($query) or die("Error in deleting data".$connection->error);
return $result;
}
}
$query="INSERT INTO crud_application SET name='$name',email='$email',contact='$contact'";
}else{
$query="UPDATE crud_application SET name='$name',email='$email',contact='$contact' WHERE id='$editId'";
}
$result=$connection->query($query)ordie("Error in saving data".$connection->error);
return$result;
}
publicfunctiongetAllData($connection)
{
$query="SELECT * FROM crud_application";
$result=$connection->query($query)ordie("Error in getting data".$connection->error);
return$result;
}
publicfunctiondeleteData($connection,$deleteId){
$query="DELETE FROM crud_application WHERE id='$deleteId'";
$result=$connection->query($query)ordie("Error in deleting data".$connection->error);
return$result;
}
}
<?php
class CrudOperations
{
public function saveData($connection,$name,$email,$contact,$editId)
{
if ($editId == "") {
$query = "INSERT INTO crud_application SET name='$name',email='$email',contact='$contact'";
}else{
$query = "UPDATE crud_application SET name='$name',email='$email',contact='$contact' WHERE id='$editId'";
}
$result = $connection->query($query) or die("Error in saving data".$connection->error);
return $result;
}
public function getAllData($connection)
{
$query = "SELECT * FROM crud_application";
$result = $connection->query($query) or die("Error in getting data".$connection->error);
return $result;
}
public function deleteData($connection,$deleteId){
$query = "DELETE FROM crud_application WHERE id='$deleteId'";
$result = $connection->query($query) or die("Error in deleting data".$connection->error);
return $result;
}
}
Now if you run the code, if there are not any errors you will get something like this.
When you will submit this form you will the complete final output like this. And if you click on the Add New+ button this popup form will have appeared.
If you submit this form filling the asked values then the record will be displayed. And to inform you, everything will be on the same page without any reload. Again if you click on the edit button then the same bootstrap popup will appear with the values which you filled previously.
If you update the values then it will call ajax request, update them to the database and display again to the table.
So if you want to delete you can do it also. It will ask you “Are you sure to delete this ?”. If you confirm this then it will be deleted.
I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.
Ok, Thanks for reading this article, see you in the next post.
I am a professional Web / Software developer, B.Tech CSE, who has been working in PHP & CodeIgniter and WordPress for more than 2+ years and know it inside and out, including the creation of Web Apps, WordPress websites from scratch and their customization.
I do agree with all the ideas you’ve presented in your post. They’re very convincing and will certainly work. Still, the posts are very short for newbies. Could you please extend them a bit from next time? Thanks for the post.
There is a bit of a problem with the code; if you edit a line, then try to add something new, the add will replace the last edit instead of adding. The editID doesn’t seem to be getting reset.
6 Comments
Highly useful article. Looking forward to more similar guiding content from here.
Thank you. Keep coming!
I do agree with all the ideas you’ve presented in your post. They’re very convincing and will certainly work. Still, the posts are very short for newbies. Could you please extend them a bit from next time? Thanks for the post.
There is a bit of a problem with the code; if you edit a line, then try to add something new, the add will replace the last edit instead of adding. The editID doesn’t seem to be getting reset.
Because it’s a hidden field, reset doesn’t work. Instead can use style=”display: none” in order for the reset to work.
Excellent tutoial. It is working nicely.