Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: live

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: live
Showing posts with label live. Show all posts
Showing posts with label live. Show all posts

PHP Live Edit Table Example

PHP Live Edit Table Example

Today We See How To Make Live Editable Using PHP+JS+Mysql+Ajax

Let's Start.

For Updating Data Live in Our Database.

1. Let's First Going TO Start My Server.

2.Opening PHPMyadmin and Creating a Database Named "live"

and also a table name "live_data".


live.php (code )  //Our View Page
 
<?php
include 'connect.php';
//==========Checked Connection Establish or Not.==============
if(!$con1){

	echo "Failed TO Establish Database Connection";
	die();
	//===========Stop Execution if connection failed============

}
else{
	//===========Fetching Result from table live_data==================
	$qr=mysql_query("select * from live_data");

	//=========adding border so it look good===============
	echo "<table style='border-collapse:collapse;' border='1'>";

	//============adding heading for each column=========================
	echo "<tr><th>ID</th><th>NAME</th><th>DOB</th><th>Qualification</th></tr>";
	while ($row=mysql_fetch_assoc($qr)) {

		//============Printing All Data in Table Row========

		//============data is html5 attribute for adding exta information on html page===
		echo "<tr>";
		echo "<td class='id' data-id='".$row['id']."' >".$row['id']."</td>";
		echo "<td class='item' data-name='name'>".$row['name']."</td>";
		echo "<td class='item' data-name='dob'>".$row['dob']."</td>";
		echo "<td class='item' data-name='qualification'>".$row['qualification']."</td>";
		echo "</tr>";
	}
	echo "</tr>";
}
?>
<script  src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	//===========Events Call When Our Page is Ready======
	$(document).ready(function() {
		

		//=============adding double click event on each table cell==========
		$(document).on("dblclick",".item",function(){

			//=======get The Value Of Current Selected TD using this keyword======
			var values=$(this).text();
			$(this).html("<input value='"+values+"' class='input'>");

		});

		$(document).on("blur",".input",function(){

			var vales=$(this).val();

sendToServer($(this).val(),$(this).parent("td").parent("tr").children(".id").data("id"),$(this).parent("td").data("name"));
									$(this).parent("td").text(vales);
			                      $(this).remove();
		})




function sendToServer(value,id,key){



			$.ajax({
				url: 'api.php',
				type: 'POST',
				data: {key:key,id:id,value:value},
			})
			.done(function(data) {
				alert(data);
			})
			.fail(function() {
				alert("Network error");
			});

			}

	})
</script> 

connect.php (Database Connection file)
 
<?php
//================+Connecting Database================
$con=mysql_connect("localhost","root","");

//=============Selecting Database======================
$con1=mysql_select_db("live",$con);

api.php (Our Api Which Update Our Date When We Post Through Ajax)
 
<?php
include 'connect.php';
if($_REQUEST['key']=="name"){
$qr=mysql_query("UPDATE live_data set name='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else if($_REQUEST['key']=="dob"){
$qr=mysql_query("UPDATE live_data set dob='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";	
}
else if($_REQUEST['key']=="qualification"){
	$qr=mysql_query("UPDATE live_data set qualification='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else{
	echo "Key Not Found";
}

Video Tutorial
0