Scribd
Upload
149 views

Ajax

The document describes how to insert, view, and update data in a MySQL database using PHP and Ajax. It includes code for: 1. An index.php page with a form to collect user data and submit via Ajax to save.php. 2. A save.php file that inserts the data into the database and returns a status. 3. A view.php page that makes an Ajax call to view_ajax.php to retrieve and display data from the database in a table. 4. Supporting files like database.php to connect to the database. The process allows entering and viewing data without page refreshes by using Ajax to asynchronously submit and retrieve

Uploaded by

Ashadur Rahaman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
149 views

Ajax

The document describes how to insert, view, and update data in a MySQL database using PHP and Ajax. It includes code for: 1. An index.php page with a form to collect user data and submit via Ajax to save.php. 2. A save.php file that inserts the data into the database and returns a status. 3. A view.php page that makes an Ajax call to view_ajax.php to retrieve and display data from the database in a table. 4. Supporting files like database.php to connect to the database. The process allows entering and viewing data without page refreshes by using Ajax to asynchronously submit and retrieve

Uploaded by

Ashadur Rahaman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

How to Insert Data using PHP Ajax

❮ PreviousNext ❯

Here we using 3 file for Insert data in MySql database using Ajax.

1. database.php
2. index.php
3. save.php

Table user_data
CREATE TABLE `user_data` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(50) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
$conn = mysqli_connect($servername, $username, $password,$db);
?>

index.php
<!DOCTYPE html>
<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success"
style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
</div>
1
<form id="fupForm" name="form1" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Name" name="name">
</div>
<div class="form-group">
<label for="pwd">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="pwd">Phone:</label>
<input type="text" class="form-control" id="phone"
placeholder="Phone" name="phone">
</div>
<div class="form-group" >
<label for="pwd">City:</label>
<select name="city" id="city" class="form-control">
<option value="">Select</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
</select>
</div>
<input type="button" name="save" class="btn btn-primary"
value="Save to database" id="butsave">
</form>
</div>

<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var city = $('#city').val();
if(name!="" && email!="" && phone!="" && city!=""){
$.ajax({
url: "save.php",
type: "POST",
data: {
name: name,
email: email,
phone: phone,
city: city
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){

2
$("#butsave").removeAttr("disabled");

$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added
successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}

}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
</body>
</html>

save.php
<?php
include 'database.php';
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql = "INSERT INTO `crud`( `name`, `email`, `phone`, `city`)
VALUES ('$name','$email','$phone','$city')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>

3
How to Insert Multiple Data using PHP Ajax
❮ PreviousNext ❯

Here we using 2 file for Insert data from MySql database using Ajax.

1. index.php
2. insert-ajax.php

Table user_data
CREATE TABLE `user_data` (
`id` int(11) NOT NULL,
`Name` varchar(100) NOT NULL,
`email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<form id="form1" name="form1" method="post">
<div class="form-group">
<label for="email">Student Name:</label>
<input type="text" name="sname" class="form-control" id="name">
</div>
<div class="form-group">
<label for="pwd">Student email:</label>
<input type="text" name="email" class="form-control" id="email">
</div>
<input type="button" name="send" class="btn btn-primary" value="add
data" id="butsend">
<input type="button" name="save" class="btn btn-primary" value="Save to
database" id="butsave">
</form>
<table id="table1" name="table1" class="table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
4
<th>email</th>
<th>Action</th>
<tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
var id = 1;
/*Assigning id and class for tr and td tags for separation.*/
$("#butsend").click(function() {
var newid = id++;
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name'+newid+'">' + $("#name").val() + '</td>\n\
<td width="100px" class="email'+newid+'">' + $("#email").val() +
'</td>\n\
<td width="100px"><a href="javascript:void(0);"
class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
/*crating new click event for save button*/
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last
row inside table*/
var name = new Array();
var email = new Array();
for ( var i = 1; i <= lastRowId; i++) {
name.push($("#"+i+" .name"+i).html()); /*pushing all the names listed in
the table*/
email.push($("#"+i+" .email"+i).html()); /*pushing all the emails listed
in the table*/
}
var sendName = JSON.stringify(name);
var sendEmail = JSON.stringify(email);
$.ajax({
url: "save.php",
type: "post",
data: {name : sendName , email : sendEmail},
success : function(data){
alert(data); /* alerts the response from php.*/
}
});
});
});
</script>
</body>
</html>

insert-ajax.php
<?php
5
$nameArr = json_decode($_POST["name"]);
$emailArr = json_decode($_POST["email"]);
$con=mysqli_connect("localhost","root","","php_ajax");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
for ($i = 0; $i < count($nameArr); $i++) {
if(($nameArr[$i] != "")){ /*not allowing empty values and the row which
has been removed.*/
$sql="INSERT INTO user_data (Name, email)
VALUES
('$nameArr[$i]','$emailArr[$i]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
}
}
Print "Data added Successfully !";
mysqli_close($con);
?>

6
How to View Data using PHP Ajax
❮ PreviousNext ❯

Here we using 3 file for view data from MySql database using Ajax.

1. database.php
2. view_ajax.php
3. view.php

Table user_data
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
?>

view_ajax.php
<?php
include 'database.php';
$sql = "SELECT * FROM crud";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?=$row['name'];?></td>
<td><?=$row['email'];?></td>
<td><?=$row['phone'];?></td>
<td><?=$row['city'];?></td>
</tr>
<?php
}
}
else {

7
echo "0 results";
}
mysqli_close($conn);
?>

view.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
</tr>
</thead>
<tbody id="table">

</tbody>
</table>
</div>
<script>
$.ajax({
url: "View_ajax.php",
type: "POST",
cache: false,
success: function(data){
alert(data);
$('#table').html(data);
}
});
8
</script>
</body>
</html>

9
How to edit or update Data using PHP Ajax
❮ PreviousNext ❯

Here we using 4 file for update data from MySql database using Ajax.

1. database.php
2. update_ajax.php
3. view_ajax.php
4. view.php

Table user_data
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
?>

update_ajax.php
<?php
include 'database.php';
$id=$_POST['id'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql = "UPDATE `crud`
SET `name`='$name',
`email`='$email',
`phone`='$phone',
`city`='$city' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
10
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>

view_ajax.php
<?php
include 'database.php';
$sql = "SELECT * FROM crud";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?=$row['name'];?></td>
<td><?=$row['email'];?></td>
<td><?=$row['phone'];?></td>
<td><?=$row['city'];?></td>
<td><button type="button" class="btn btn-success btn-
sm update" data-toggle="modal" data-keyboard="false" data-
backdrop="static" data-target="#update_country"
data-id="<?=$row['id'];?>"
data-name="<?=$row['name'];?>"
data-email="<?=$row['email'];?>"
data-phone="<?=$row['phone'];?>"
data-city="<?=$row['city'];?>"
">Edit</button></td>
</tr>
<?php
}
}
else {
echo "<tr >
<td colspan='5'>No Result found !</td>
</tr>";
}
mysqli_close($conn);
?>

view.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.
css">

11
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<div class="alert alert-success alert-dismissible" id="success"
style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
</div>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">

</tbody>
</table>
</div>
<!-- Modal Update-->
<div class="modal fade" id="update_country" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"
style="color:#fff;background-color: #e35f14;padding:6px;">
<h5 class="modal-title"><i class="fa fa-edit"></i>
Update</h5>

</div>
<div class="modal-body">

<!--1-->
<div class="row">
<div class="col-md-3">
<label>Name</label>
</div>
<div class="col-md-9">
<input type="text"
name="name_modal" id="name_modal" class="form-control-sm" required>
12
</div>
</div>
<!--2-->
<div class="row">
<div class="col-md-3">
<label>Email</label>
</div>
<div class="col-md-9">
<input type="text"
name="email_modal" id="email_modal" class="form-control-sm" required>
</div>
</div>
<!--3-->
<div class="row">
<div class="col-md-3">
<label>Phone</label>
</div>
<div class="col-md-9">
<input type="text"
name="phone_modal" id="phone_modal" class="form-control-sm" required>
</div>
</div>
<!--4-->
<div class="row">
<div class="col-md-3">
<label>City</label>
</div>
<div class="col-md-9">
<input type="text"
name="city_modal" id="city_modal" class="form-control-sm" required>
</div>
</div>
<input type="hidden" name="id_modal"
id="id_modal" class="form-control-sm">
</div>
<div class="modal-footer" style="padding-bottom:0px
!important;text-align:center !important;">
<p style="text-align:center;float:center;"><button
type="submit" id="update_data" class="btn btn-default btn-sm"
style="background-color: #e35f14;color:#fff;">Save</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal" style="background-color:
#e35f14;color:#fff;">Close</button></p>

</div>
</div>
</div>
</div>
<!-- Modal End-->
<script>
$(document).ready(function() {
$.ajax({
url: "View_ajax.php",
13
type: "POST",
cache: false,
success: function(dataResult){
$('#table').html(dataResult);
}
});
$(function () {
$('#update_country').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); /*Button that
triggered the modal*/
var id = button.data('id');
var name = button.data('name');
var email = button.data('email');
var phone = button.data('phone');
var city = button.data('city');
var modal = $(this);
modal.find('#name_modal').val(name);
modal.find('#email_modal').val(email);
modal.find('#phone_modal').val(phone);
modal.find('#city_modal').val(city);
modal.find('#id_modal').val(id);
});
});
$(document).on("click", "#update_data", function() {
$.ajax({
url: "update_ajax.php",
type: "POST",
cache: false,
data:{
id: $('#id_modal').val(),
name: $('#name_modal').val(),
email: $('#email_modal').val(),
phone: $('#phone_modal').val(),
city: $('#city_modal').val(),
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#update_country').modal().hide();
alert('Data updated successfully !');
location.reload();

}
}
});
});
});
</script>
</body>
</html>

14
How to Delete Data using PHP Ajax
❮ PreviousNext ❯

Here we using 3 file for delete data from MySql database using Ajax.

1. database.php
2. delete_ajax.php
3. view.php

Table user_data
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
?>

delete_ajax.php
<?php
include 'database.php';
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>

view.php
<!DOCTYPE html>
<html lang="en">
15
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">

</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$.ajax({
url: "View_ajax.php",
type: "POST",
cache: false,
success: function(dataResult){
$('#table').html(dataResult);
}
});
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
$.ajax({
url: "delete_ajax.php",
type: "POST",
cache: false,
data:{
id: $(this).attr("data-id")
16
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$ele.fadeOut().remove();
}
}
});
});
});
</script>
</body>
</html>

17
How to Delete Data using PHP Ajax
❮ PreviousNext ❯

Here we using 3 file for delete data from MySql database using Ajax.

1. database.php
2. delete_ajax.php
3. view.php

Table user_data
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
?>

delete_ajax.php
<?php
include 'database.php';
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>

view.php
<!DOCTYPE html>
<html lang="en">
18
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">

</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$.ajax({
url: "View_ajax.php",
type: "POST",
cache: false,
success: function(dataResult){
$('#table').html(dataResult);
}
});
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
$.ajax({
url: "delete_ajax.php",
type: "POST",
cache: false,
data:{
id: $(this).attr("data-id")
19
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$ele.fadeOut().remove();
}
}
});
});
});
</script>
</body>
</html>

20
AJAX PHP Crud Example
❮ PreviousNext ❯

index.php
<?php
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>User Data</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css">
<link rel="stylesheet" href="css/style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
"></script>
<script src="ajax/ajax.js"></script>
</head>
<body>
<div class="container">
<p id="success"></p>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Users</b></h2>
</div>
<div class="col-sm-6">
<a href="#addEmployeeModal"
class="btn btn-success" data-toggle="modal"><i class="material-
icons"> </i> <span>Add New User</span></a>

21
<a href="JavaScript:void(0);"
class="btn btn-danger" id="delete_multiple"><i class="material-
icons"> </i> <span>Delete</span></a>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-
checkbox">
<input
type="checkbox" id="selectAll">
<label
for="selectAll"></label>
</span>
</th>
<th>SL NO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>PHONE</th>
<th>CITY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>

<?php
$result = mysqli_query($conn,"SELECT * FROM
crud");
$i=1;
while($row =
mysqli_fetch_array($result)) {
?>
<tr id="<?php echo $row["id"]; ?>">
<td>
<span class="custom-
checkbox">
<input
type="checkbox" class="user_checkbox" data-user-id="<?php echo
$row["id"]; ?>">
<label
for="checkbox2"></label>
</span>
</td>
<td><?php echo $i; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["city"]; ?></td>
<td>

22
<a href="#editEmployeeModal"
class="edit" data-toggle="modal">
<i class="material-icons
update" data-toggle="tooltip"
data-id="<?php echo
$row["id"]; ?>"
data-name="<?php echo
$row["name"]; ?>"
data-email="<?php echo
$row["email"]; ?>"
data-phone="<?php echo
$row["phone"]; ?>"
data-city="<?php echo
$row["city"]; ?>"
title="Edit"> </i>
</a>
<a href="#deleteEmployeeModal"
class="delete" data-id="<?php echo $row["id"]; ?>" data-
toggle="modal"><i class="material-icons" data-toggle="tooltip"
title="Delete"> </i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>

</div>
</div>
<!-- Add Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="user_form">
<div class="modal-
header">
<h4 class="modal-title">Add
User</h4>
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-
body">
<div class="form-group">
<label>NAME</label>
<input type="text" id="name"
name="name" class="form-control" required>
</div>
<div class="form-group">
<label>EMAIL</label>

23
<input type="email"
id="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
<input type="phone"
id="phone" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>CITY</label>
<input type="city" id="city"
name="city" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1"
name="type">
<input type="button" class="btn
btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn
btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form">
<div class="modal-
header">
<h4 class="modal-title">Edit
User</h4>
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u"
name="id" class="form-control" required>
<div class="form-group">
<label>Name</label>
<input type="text"
id="name_u" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email"
id="email_u" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
24
<input type="phone"
id="phone_u" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>City</label>
<input type="city"
id="city_u" name="city" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2"
name="type">
<input type="button" class="btn
btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn
btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>

<div class="modal-
header">
<h4 class="modal-title">Delete
User</h4>
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_d"
name="id" class="form-control">
<p>Are you sure you want to delete
these Records?</p>
<p class="text-
warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn
btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn
btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>

25
</body>
</html>

backend/database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>

backend/save.php
<?php
include 'database.php';
if(count($_POST)>0){
if($_POST['type']==1){
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql = "INSERT INTO `crud`( `name`, `email`,`phone`,`city`)
VALUES ('$name','$email','$phone','$city')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==2){
$id=$_POST['id'];
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql = "UPDATE `crud` SET
`name`='$name',`email`='$email',`phone`='$phone',`city`='$city' WHERE
id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
26
}
}
if(count($_POST)>0){
if($_POST['type']==3){
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id ";
if (mysqli_query($conn, $sql)) {
echo $id;
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==4){
$id=$_POST['id'];
$sql = "DELETE FROM crud WHERE id in ($id)";
if (mysqli_query($conn, $sql)) {
echo $id;
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}

?>

27

You might also like