Delete Data in PHP & MySQL Using Ajax

Webslesson

PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Sunday, 14 February 2016

Live Table Add Edit Delete using Ajax Jquery in PHP Mysql

Latest Post — Live Add Edit Delete Datatables Records using PHP Ajax

Hello Friends, In this tutorial we are going to learn how to live table Insert, Update, Delete and Fetch data from mysql database using Ajax Jquery in PHP programming language. For this feature I am using html5 contenteditable attribute. With the help of this contenteditable attribute table column will be editable and user can change live table data on single click. I am using Ajax call function for Insert data, update data, delete data and Select data from database. This all things are done on user end without page refresh. Ajax get request from user on front-end and send request to database using php language and done operation at back end and send back request to user without page refresh. This feature is very helpful. I hope this tutorial will help to all.

Читайте также:  Php code sql query

This is main page on which we have load data, so on this page first we have define one div tag with attribute «id=live_data», we will load data under this tag by using Ajax Jquery code and it will use attribute id as selector in Jquery code.

function fetch_data() < $.ajax(< url:"select.php", method:"POST", success:function(data)< $('#live_data').html(data); > >); >

Then after make this jquery function, which fetch data from table and converted in table format and then after display under div tag with attribute «id=live_data», under this function, it use Ajax method for fetch data from server and display on web page. This function send request to this select.php page.

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $output = ''; $sql = "SELECT * FROM tbl_sample ORDER BY id DESC"; $result = mysqli_query($connect, $sql); $output .= '    Id  First Name  Last Name  Delete  '; if(mysqli_num_rows($result) > 0) < while($row = mysqli_fetch_array($result)) < $output .= '  '. $row["id"].'  .$row["id"].'" contenteditable>'.$row["first_name"].'  .$row["id"].'" contenteditable>'.$row["last_name"].'     '; > $output .= '     '; > else < $output .= ' Data not Found  '; > $output .= '  '; echo $output; ?> 

This php code write on select.php page, because fetch_data() jquery function send request to this page, on this page it will fetch data from table and then convert that data into HTML Table format and send back to fetch_data() function.

Then after in both tag we have also add data attribute tag with two different name. In this tag we have store id of data, value of this data attribute we will use in jquery code while live updating of data.

So In backend our code is ready for fetching data and we have already make jquery function for load data on we page, so we have called this function, so when page load, this function will be called and it will load data on web page in HTML Table format.

$(document).on('click', '#btn_add', function() < var first_name = $('#first_name').text(); var last_name = $('#last_name').text(); if(first_name == '') < alert("Enter First Name"); return false; >if(last_name == '') < alert("Enter Last Name"); return false; >$.ajax(< url:"insert.php", method:"POST", data:, dataType:"text", success:function(data) < alert(data); fetch_data(); >>) >);
 $connect = mysqli_connect("localhost", "root", "", "test_db"); $sql = "INSERT INTO tbl_sample(first_name, last_name) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')"; if(mysqli_query($connect, $sql)) < echo 'Data Inserted'; > ?> 

This is php code written on insert.php page, This page will received data from Ajax request and on this page it will make Insert Query for Inserting or Adding data into Mysql Table and it will send respond to Ajax request by write echo statement.

function edit_data(id, text, column_name) < $.ajax(< url:"edit.php", method:"POST", data:, dataType:"text", success:function(data) < alert(data); >>); >

After Successfully Live Insert or Add data, now we want to edit data, so in Jquery code we have make this edit_data(id, text, column_name) function with three argument. Value of All argument data has been send to edit.php page.

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $id = $_POST["id"]; $text = $_POST["text"]; $column_name = $_POST["column_name"]; $sql = "UPDATE tbl_sample SET ".$column_name."='".$text."' WHERE "; if(mysqli_query($connect, $sql)) < echo 'Data Updated'; > ?> 

Above code is written under edit.php page, and this page will received data from Ajax request and then after it will make Update query and execute query and update particular id of data in Mysql Table.

$(document).on('blur', '.first_name', function()< var var first_name = $(this).text(); edit_data(id, first_name, "first_name"); >);
$(document).on('blur', '.last_name', function()< var var last_name = $(this).text(); edit_data(id,last_name, "last_name"); >);
$(document).on('click', '.btn_delete', function()< var if(confirm("Are you sure you want to delete this?")) < $.ajax(< url:"delete.php", method:"POST", data:, dataType:"text", success:function(data) < alert(data); fetch_data(); >>); > >);

Above JQuery code is write for Live Delete or Remove Mysql table data. We have write JQuery code on button with , we have use this class as selector in this Jquery code, so When we have click on delete button then this code will execute. Under this first we have get id from button attribute data-id3. In which we have store unique id. Then after it has send Ajax request to delete.php page. With Ajax request it has been send value of id variable to delete.php page. In Ajax request it will received respond from server and then after it has called fetch_data() functio for refresh table table on web page.

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $sql = "DELETE FROM tbl_sample WHERE "; if(mysqli_query($connect, $sql)) < echo 'Data Deleted'; > ?> 

Above PHP Code is written on delete.php page. This page has been received data from Ajax request and then after it will delete query and remove or delete data from Mysql Table and send respond to Ajax method.

So this is my sample code for making system like Live table Insert Update Delete and Fetch of Mysql Table data by using PHP Script with Ajax JQuery method. This is a single page web application. You can perform all operation on single page without going to another page. If you have any query or inputs, just comment your query or inputs in comment box. We will help you.

Complete Source Code

index.php

   Live Table Data Edit  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">   class="container">  />  />  />  class="table-responsive">  align="center">Live Table Add Edit Delete using Ajax Jquery in PHP Mysql />  id="live_data">
$(document).ready(function()< function fetch_data() < $.ajax(< url:"select.php", method:"POST", success:function(data)< $('#live_data').html(data); > >); > fetch_data(); $(document).on('click', '#btn_add', function()< var first_name = $('#first_name').text(); var last_name = $('#last_name').text(); if(first_name == '') < alert("Enter First Name"); return false; > if(last_name == '') < alert("Enter Last Name"); return false; > $.ajax(< url:"insert.php", method:"POST", data::first_name, last_name:last_name>, dataType:"text", success:function(data) < alert(data); fetch_data(); >>) >); function edit_data(id, text, column_name) < $.ajax(< url:"edit.php", method:"POST", data::id, text:text, column_name:column_name>, dataType:"text", success:function(data) < alert(data); >>); > $(document).on('blur', '.first_name', function()< var id = $(this).data("id1"); var first_name = $(this).text(); edit_data(id, first_name, "first_name"); >); $(document).on('blur', '.last_name', function()< var id = $(this).data("id2"); var last_name = $(this).text(); edit_data(id,last_name, "last_name"); >); $(document).on('click', '.btn_delete', function()< var id=$(this).data("id3"); if(confirm("Are you sure you want to delete this?")) < $.ajax(< url:"delete.php", method:"POST", data::id>, dataType:"text", success:function(data) < alert(data); fetch_data(); >>); > >); >);

select.php

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $output = ''; $sql = "SELECT * FROM tbl_sample ORDER BY id DESC"; $result = mysqli_query($connect, $sql); $output .= '    Id  First Name  Last Name  Delete  '; if(mysqli_num_rows($result) > 0) < while($row = mysqli_fetch_array($result)) < $output .= '  '.$row["id"].'  .$row["id"].'" contenteditable>'.$row["first_name"].'  .$row["id"].'" contenteditable>'.$row["last_name"].'     '; > $output .= '     '; > else < $output .= ' Data not Found  '; > $output .= '  '; echo $output; ?> 

insert.php

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $sql = "INSERT INTO tbl_sample(first_name, last_name) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')"; if(mysqli_query($connect, $sql)) < echo 'Data Inserted'; > ?> 

edit.php

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $id = $_POST["id"]; $text = $_POST["text"]; $column_name = $_POST["column_name"]; $sql = "UPDATE tbl_sample SET ".$column_name."='".$text."' WHERE "; if(mysqli_query($connect, $sql)) < echo 'Data Updated'; > ?> 

delete.php

 $connect = mysqli_connect("localhost", "root", "", "test_db"); $sql = "DELETE FROM tbl_sample WHERE "; if(mysqli_query($connect, $sql)) < echo 'Data Deleted'; > ?> 

Источник

Delete Data with jQuery in PHP & MySQL Using Ajax

In this tutorial, you will learn how to delete data in PHP & MySQL using ajax we know that this is a common function when creating software. So I hope that you will learn from this simple method and use it in your future project.

Delete Record in PHP & MySQL Using Ajax

With the help of ajax we are enabled to request the server to delete a specific record without reloading our page and automatically remove our record in the lists. So for you to understand we use a Simple Employee Database to delete a record.

Creating Database

So first create your database name for anything you want. After creating your database then you will need to create our «employees» table. Kindly check the code below for the SQL example.

CREATE TABLE `employees` ( `id` int(10) NOT NULL, `email` varchar(100) NOT NULL, `first_name` varchar(100) NOT NULL, `last_name` varchar(100) NOT NULL, `address` varchar(250) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ALTER TABLE `employees` ADD PRIMARY KEY (`id`); ALTER TABLE `employees` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1; COMMIT;

Take note that you can add your table either from the MySQL Command line or in PHPMyAdmin for a better experience. It depends on you.

Creating Index HTML

In this section, we will create our index.html and put this code below.

         


Delete Data in PHP & MySQL Using Ajax



Add New Employee

List of Employees

Edit Employee

Delete PHP Function

Here we will create a file delete.php and use it for deleting an employee record.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the DELETE SQL data $sql = "DELETE FROM employees WHERE "; // Process the query so that we will save the date of birth if ($mysqli->query($sql)) < echo "Employee has been successfully deleted."; >else < echo "Error: " . $sql . "
" . $mysqli->error; > // Close the connection after using it $mysqli->close(); ?>

Ajax Delete Function

In this function, we will create an ajax delete that will use to communicate with the server. You will found this function under scripts.js you will see it when you download the complete source code.

function del() < $(document).delegate(".btn-delete-employee", "click", function() < if (confirm("Are you sure you want to delete this record?")) < var employeeId = $(this).attr('data-id'); //get the employee ID // Ajax config $.ajax(< type: "GET", //we are using GET method to get data from server side url: 'delete.php', // get the route value data: , //set data beforeSend: function () , success: function (response) >); > >); >

Then we will call the del function above.

So after you follow the above code you will learn how I usually code a delete function on PHP & MySQL using Ajax. I hope you learn from it. To see it in action just click the download button below.

NOTE: Kindly don’t use this code example as is, do some research also about how to secure your PHP code like SQL Injection and CSRF attacks. And before deleting the record you need to sanitize the submitted ID so that it will safe when querying it to your database. You must also check the ID if existing in your database before deleting the record.

Источник

Laravel Livewire Crud with Bootstrap Modal Example

Hello Friends, In this blog, I would like to share with you how perform crud opeartion with bootstrap modal livewire in laravel application.I will.

How to Delete Record using Ajax in PHP?

I am going to explain you How to Delete Data From Database Using Ajax in PHP. You will learn how to delete row with ajax function and php — jquery. In side this article we will see how to Delete Record from MySQL Table with AJAX.

This article will give you simple example of Delete Data with jQuery in PHP & MySQL Using Ajax. We will use get simple Delete data using AJAX with PHP and MySQL.

I will give you simple Example how to Delete a table-row using JQuery Ajax without page reload.

So, let’s see bellow solution:

         

How to Delete Record using Ajax in PHP? - Mywebtuts.com

?>
ID Name Email Action

✌️ Like this article? Follow me on Twitter and Facebook. You can also subscribe to RSS Feed.

You might also like.

Источник

Оцените статью