Hey Guys, Hope you all fine, recently I’ve developed the simple project namely Insert Update Delete in Php Using Ajax. Basically, you can say that crud operation in PHP using Ajax. The insert update deletes the main part of any applications, you must learn that. Any Application you will create or you want to create you need to add those things such as Insert Update Delete in Php.
But, I’ve used Ajax tactics that help you to perform the operations Insert Update Delete in PHP Using Ajax without refreshing a page. So, the first thing you need to know the project files we will use such as Bootstrap to design the form, jQuery to perform the Ajax request, and finally we will use Php and MySQLi.
First of All, we need to download Bootstrap CSS File and Also jQuery File, once we download those files. Then we need to add them on our project. Once you add that then you will able to design the forms.
If need a Source code, you can download it to click on the above-mentioned button Now. Guys, above mentioned have one video inside one video, you will learn everything from scratch How to Insert Update Delete in PHP Using Ajax. You If need the source, I will mentioned step by step each file with the name, but you need to make your own database with the same table. So, Let’s start to understand each file code.
You May Also Like:
- Insert Update Delete in Php With Source Code
- Crud Operations in Php Using OOP
- Fetch Data from Database in PHP
First of All, you need to make database and also table inside the table you need to make three columns, you can write any column names you as like, but you need to use same database column names inside the code.
Ajax Project with Php
Add New User
Registration Form
Register Now
Close
Above mentioned all about design the form and also display the Modal, but you must be download and include the Bootstrap CSS File and jQuery File, below I’ve mentioned jQuery Code you need to use that.
// Insert Record in the Database
function Insert_record[]
{
$[document].on['click','#btn_register',function[]
{
var User = $['#UserName'].val[];
var Email = $['#UserEmail'].val[];
if[User == "" || Email==""]
{
$['#message'].html['Please Fill in the Blanks '];
}
else
{
$.ajax[
{
url : 'insert.php',
method: 'post',
data:{UName:User,UEmail:Email},
success: function[data]
{
$['#message'].html[data];
$['#Registration'].modal['show'];
$['form'].trigger['reset'];
view_record[];
}
}]
}
}]
$[document].on['click','#btn_close',function[]
{
$['form'].trigger['reset'];
$['#message'].html[''];
}]
}Above mentioned code is a jQuery code, you need to use that to passing data with Php Page, I’ve mentioned also Php code that help you to insert the record in the database.
// Insert Record Function
function InsertRecord[]
{
global $con;
$UserName = $_POST['UName'];
$UserEmail = $_POST['UEmail'];
$query = " insert into user_record [UserName,UserEmail] values['$UserName','$UserEmail']";
$result= mysqli_query[$con,$query];
if[$result]
{
echo ' Your Record Has Been Saved in the Database';
}
else
{
echo ' Please Check Your Query ';
}
}Above mentioned all code represent design form and insert record in the database with the help of Bootstrap, jQuery and Also Php MyAdmin. You should arrange them as you like, if you face any problem to arrange it, you need watch above video tutorial that help you to understand everything as want.
When You finished the insert process, then you need to display the data on web page, inside the index.php, I’ve mentioned table div and asign the ID namely table, So, I will use this ID to display the Database Record inside the HTML Table. You need to follow on below steps.
First of All, we need to work on jQuery File to passing the data with Php Page, below, I’ve mentioned jQuery simple code that are help us to sending the request with Php page using Ajax.
// Display Record
function view_record[]
{
$.ajax[
{
url: 'view.php',
method: 'post',
success: function[data]
{
data = $.parseJSON[data];
if[data.status=='success']
{
$['#table'].html[data.html];
}
}
}]
}I’ve mentioned jQuery code, you need to use the same code to send the request on Php Page, inside the jQuery Code have View.php page. I’ve used this page, if you want to change that you can do that, but you need to make the same page in Php which entered inside the jQuery File.
// Display Data Function
function display_record[]
{
global $con;
$value = "";
$value = '
User ID
User User
User Email
Edit
Delete
';
$query = "select * from user_record ";
$result = mysqli_query[$con,$query];
while[$row=mysqli_fetch_assoc[$result]]
{
$value.= '
'.$row['ID'].'
'.$row['UserName'].'
'.$row['UserEmail'].'
';
}
$value.='
';
echo json_encode[['status'=>'success','html'=>$value]];
}Once you follow the above-mentioned codes, then you can insert the record in the database and also you can display the database record on the web page. The next step you need to get the particular record from HTML Table, inside the HTML Table I’ve included the Button Tags inside the Button tag, I’ve mentioned attribute namely data-id inside the data-id I’ve assigned database column value namely ID.
The ID is very important to get a particular record. So, you need to use the same thing to get the record from the table. I’ve mentioned below the jQuery Code that helps you to get the particular record inside the HTML Page but, you need to make Modal.
So, The First thing you need to include below mentioned code inside index.php page, the below code help us to display the Modal, once the modal has been appeared, then we will able to get the Table record inside the Modal.
Update Form
Update Now
Close
You need to paste the code inside the index.php page, once you add that, then you need to include the below-mentioned jQuery Code. The jQuery Code helps us to display the Modal and also get a particular record inside the Modal.
//Get Particular Record
function get_record[]
{
$[document].on['click','#btn_edit',function[]
{
var ID = $[this].attr['data-id'];
$.ajax[
{
url: 'get_data.php',
method: 'post',
data:{UserID:ID},
dataType: 'JSON',
success: function[data]
{
$['#Up_User_ID'].val[data[0]];
$['#Up_UserName'].val[data[1]];
$['#Up_UserEmail'].val[data[2]];
$['#update'].modal['show'];
}
}]
}]
}Finally, you need to use Php to get the particular record inside Modal, So, you need to use below mentioned code. That help us to display the particular record inside Modal.
// Get Particular Record
function get_record[]
{
global $con;
$UserID = $_POST['UserID'];
$query = "select * from user_record where ID='$UserID'";
$result = mysqli_query[$con,$query];
while[$row=mysqli_fetch_assoc[$result]]
{
$User_data = "";
$User_data[0]=$row['ID'];
$User_data[1]=$row['UserName'];
$User_data[2]=$row['UserEmail'];
}
echo json_encode[$User_data];
}
Once you display the particular record inside the Modal, then you will able to perform the operation namely Update the Record. So, First thing you need to get the value from Modal Inside the Modal have input text fields, you need to use below mentioned jQuery code to get the record and send Ajax request in Php Page.
// Update Record
function update_record[]
{
$[document].on['click','#btn_update',function[]
{
var UpdateID = $['#Up_User_ID'].val[];
var UpdateUser = $['#Up_UserName'].val[];
var UpdateEmail = $['#Up_UserEmail'].val[];
if[UpdateUser=="" || UpdateEmail==""]
{
$['#up-message'].html['please Fill in the Blanks'];
$['#update'].modal['show'];
}
else
{
$.ajax[
{
url: 'update.php',
method: 'post',
data:{U_ID:UpdateID,U_User:UpdateUser,U_Email:UpdateEmail},
success: function[data]
{
$['#up-message'].html[data];
$['#update'].modal['show'];
view_record[];
}
}]
}
}]
}
Then you need to use Php to perform the operation such as Update record, below, I’ve mentioned the code that help us to update record without refreshing a page.
// Update Function
function update_value[]
{
global $con;
$Update_ID = $_POST['U_ID'];
$Update_User =$_POST['U_User'];
$Update_Email = $_POST['U_Email'];
$query = "update user_record set UserName='$Update_User', UserEmail='$Update_Email' where ID='$Update_ID '";
$result = mysqli_query[$con,$query];
if[$result]
{
echo ' Your Record Has Been Updated ';
}
else
{
echo ' Please Check Your Query ';
}
}Finally, we need to perform the last operation such as Delete the record, So, we need to work that. First of All, you need to include below mention HTML based code in Index.php that help us to display the Modal. You need
Delete Record
Do You Want to Delete the Record ?
Delete Now
Close
Then we need to use jQuery to send the request in Php Page and we need to get Id, I’ve mentioned ID inside view.php page. You can checkout Now, We need to target the data-id1 attribute to get the particular record ID. Once we got the particular record ID, then we will able to perform the operation.
// Delete Function
function delete_record[]
{
$[document].on['click','#btn_delete',function[]
{
var Delete_ID = $[this].attr['data-id1'];
$['#delete'].modal['show'];
$[document].on['click','#btn_delete_record',function[]
{
$.ajax[
{
url: 'delete.php',
method: 'post',
data:{Del_ID:Delete_ID},
success: function[data]
{
$['#delete-message'].html[data].hide[5000];
view_record[];
}
}]
}]
}]
}Finally, We need to use Php to Delete record, I’ve mentioned Php code, you need to paste it with your php file. Then you can easily delete the record from database using jQuery Ajax.
function delete_record[]
{
global $con;
$Del_Id = $_POST['Del_ID'];
$query = "delete from user_record where ID='$Del_Id' ";
$result = mysqli_query[$con,$query];
if[$result]
{
echo ' Your Record Has Been Delete ';
}
else
{
echo ' Please Check Your Query ';
}
}Insert Update Delete in PHP Using Ajax
[sociallocker id=”4383″]
[/sociallocker]
So, I’ve included each file and also each code that helps you to perform the operations Insert Update Delete in PHP Using Ajax. If you face any problem understanding that, you need to watch my video tutorial that helps you to understand everything from scratch partially.
Guys, I’ve made a tutorial on Insert Update Delete in PHP Using Ajax jQuery Ajax, I hope you have learned something new. So, If you like that please share the tutorial on Social Sharing websites and Subscribe My YouTube Channel for Getting Updates on My YouTube Channel. Have a Nice Day :].