Hear we show a basic
CRUD operation with database with ajax function.
Points :
- Connection with database
- HTML form page
- Ajax function
- JavaScript
- Insert data
- Update data
- Delete data
- View data
First create one PHP file call connect.php
in this file contain a connection of database and this file call in other file for connecting with database.
<?php
$con=mysqli_connect("server name","username","password","databasename") or die(''.mysql_error());
?>
Now we create second file that include HTML of form and javascript. Create file name index.php
<html>
<head>
<meta charset="UTF-8">
<title>test form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return false" method="post">
<table style="width: 100%">
<tr>
<td style="width: 30%;vertical-align: top;">
<table style="">
<tr>
<td>ID</td>
<td><input type="text" id="TxtID" name="TxtID" > </td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" id="TxtName" name="TxtName" > </td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" id="TxtAge" name="TxtAge" ></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="text" id="TxtGender" name="TxtGender" ></td>
</tr>
<tr>
<td>Dob</td>
<td><input type="text" id="TxtDob" name="TxtDob" ></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" id="TxtMobile" id="TxtMobile" ></td>
</tr>
<tr>
<td><input type="submit" id="btnSave" name="btnSave" value="Save"> </td>
<td><input type="submit" id="btnUpdate" name="btnUpdate" value="Update"> </td>
</tr>
</table>
</td>
<td style="width: 70%">
<div id="Display"></div>
</td>
</tr>
</table>
<script>
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
$( document ).ready(function() {
//alert();
ViewData()
});
function ViewData()
{
//alert('dasdas');
$.ajax({
url: "crud.php",
type: "POST",
data: {"Mode":'View'},
success: function (data, textStatus, jqXHR) {
//alert(data);
$('#Display').html('');
$('#Display').html(data);
}
});
}
$("#btnSave").click(function () {
var ID = $('#TxtID').val();
var Name = $('#TxtName').val();
var Age = $('#TxtAge').val();
var Gender = $('#TxtGender').val();
var Dob = $('#TxtDob').val();
var Mobile = $('#TxtMobile').val();
var Data = {"ID": ID, "Name": Name, "Age": Age, "Gender": Gender, "Dob": Dob, "Mobile": Mobile, "Mode": 'Insert'};
var theResponse = null;
$.ajax({
url: "crud.php",
type: "POST",
data: Data,
success: function (data, textStatus, jqXHR) {
theResponse=$.parseJSON(data);
if(theResponse.Result=='Success')
{
ViewData();
alert('Insert success!');
}
$('#TxtName').val('');
$('#TxtAge').val('');
$('#TxtGender').val('');
$('#TxtDob').val('');
$('#TxtMobile').val('');
}
});
});
$("#btnUpdate").click(function () {
var ID = $('#TxtID').val();
var Name = $('#TxtName').val();
var Age = $('#TxtAge').val();
var Gender = $('#TxtGender').val();
var Dob = $('#TxtDob').val();
var Mobile = $('#TxtMobile').val();
var Data = {"ID": ID, "Name": Name, "Age": Age, "Gender": Gender, "Dob": Dob, "Mobile": Mobile, "Mode": 'Update'};
// alert(Data);
$.ajax({
url: "crud.php",
type: "POST",
data: Data,
success: function (data, textStatus, jqXHR) {
theResponse=$.parseJSON(data);
if(theResponse.Result=='Success')
{
ViewData();
alert('Update success!');
}
$('#TxtName').val('');
$('#TxtAge').val('');
$('#TxtGender').val('');
$('#TxtDob').val('');
$('#TxtMobile').val('');
}
});
});
function EditData(id)
{
$('#TxtID').val(id);
$.ajax({
url: "crud.php",
type: "POST",
data: {"Mode":'Get',"ID":id},
success: function (data, textStatus, jqXHR) {
var ArrData=JSON.parse(data);
$('#TxtName').val(ArrData['Name']);
$('#TxtAge').val(ArrData['Age']);
$('#TxtGender').val(ArrData['Gender']);
$('#TxtDob').val(ArrData['Dob']);
$('#TxtMobile').val(ArrData['Mobile']);
}
});
}
function DeleteData(ID)
{
var result=confirm('Wnat to delete '+ID+' data!');
if(result)
{
$.ajax({
url: "crud.php",
type: "POST",
data: {"Mode":'Delete',"ID": ID},
success: function (data, textStatus, jqXHR) {
theResponse=$.parseJSON(data);
if(theResponse.Result=='Success')
{
ViewData();
alert('Delete success!');
}
$('#TxtName').val('');
$('#TxtAge').val('');
$('#TxtGender').val('');
$('#TxtDob').val('');
$('#TxtMobile').val('');
}
});
}
ViewData();
}
</script>
</form>
</body>
</html>
Now create third file crud.php that contain php code for crud operation
<?php
global $con;
include_once('connect.php');
$Mode = $_POST['Mode'];
if ($Mode == 'View') {
$strsql = "select * from form";
if ($result = mysqli_query($con, $strsql)) {
echo "<table border='1' >
<tr>
<td align=center> <b>id</b></td>
<td align=center><b>Name</b></td>
<td align=center><b>Age</b></td>
<td align=center><b>DOB</b></td></td>
<td align=center><b>Mobile</b></td></td>
<td align=center><b>Gender</b></td>
<td align=center>Action</td>";
while($data = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td align=center>$data[0]</td>";
echo "<td align=center>$data[1]</td>";
echo "<td align=center>$data[2]</td>";
echo "<td align=center>$data[4]</td>";
echo "<td align=center>$data[5]</td>";
echo "<td align=center>$data[3]</td>";
echo " <td ><a style=\"cursor: pointer;\" onclick=\"EditData($data[0]);\">Edit</a> ";
echo "<a style=\"cursor: pointer;\" onclick=\"DeleteData($data[0]);\">Delete</a> </td>";
echo "</tr>";
}
echo "</table>";
}
}
else if ($Mode == 'Get') {
$ID = $_POST['ID'];
$strsql = "select * from form Where Id=$ID";
if ($result = mysqli_query($con, $strsql)) {
$count = mysqli_num_rows($result);
if ($count > 0) {
echo json_encode(mysqli_fetch_array($result));
}
}
}
else if ($Mode == 'Delete') {
$ID = $_POST['ID'];
$query = "Delete from `form` Where Id=$ID";
$query_run = mysqli_query($con, $query);
if ($query_run) {
$arr = array("Result"=>"Success");
echo json_encode($arr);
}
}
else {
$ID = $_POST['ID'];
$Name = $_POST['Name'];
$Age = $_POST['Age'];
$Gender = $_POST['Gender'];
$Dob = $_POST['Dob'];
$Mobile = $_POST['Mobile'];
if ($Mode == 'Insert') {
$query = "INSERT INTO `form`
(`Name`,`Age`,`Gender`,`Dob`,`Mobile`)
VALUES
('$Name','$Age','$Gender','$Dob','$Mobile')";
$query_run = mysqli_query($con, $query);
$last_id = mysqli_insert_id($con);
// $retval=mysql_query($query,$conn);
if ($query_run) {
$arr = array("Result"=>"Success");
echo json_encode($arr);
}
} else if ($Mode == "Update") {
$query = "Update `form` Set `Name`='$Name',
`Age`='$Age',
`Gender`='$Gender',
`Dob`='$Dob',
`Mobile`='$Mobile' Where Id=$ID";
$query_run = mysqli_query($con, $query);
// $retval=mysql_query($query,$conn);
if ($query_run) {
$arr = array("Result"=>"Success");
echo json_encode($arr);
}
}
}
mysqli_close($con);
?>
Hear you can see 3 files
connect.php-connection with database
index.php - html and javascript with ajax function
crud.php - php code for crud operation
Good information sir,
ReplyDeleteI have knowledge in Seo and Blogging for last 4 years,
my website is myxtips
Actually I read it yesterday but I had some thoughts about it and today I wanted to read it again because it is very well written. Anti captcha key
ReplyDelete