Manage Table Add Edit Delete jquery ajax mysqli
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Table Add Edit Delete jquery ajax mysqli</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
function deleteuser(id){
if (confirm('Are you sure want to delete?')) {
$.post('manage_functions.php', {id: +id, action: 'delete_user'},
function(response){
$("#row_"+id).fadeOut("slow");
$(".info_message").html(response);
$(".info_message").animate({opacity : '0.9'}).fadeIn().delay(3000).fadeOut(1000);
});
}
}
function edituser(id){
$.post('manage_functions.php', {id: +id, action: 'edit_user'},
function(response){
$(".edit_user").html(response);
});
}
$(document).ready( function () {
$('tr').hover( function () {
$(this).toggleClass('tr-hover');
});
$('#Register').click(function () {
var str = $('#register_form').serialize();
$.ajax({
type: "POST",
url: "register.php",
data: str,
success: function (msg) {
if (msg.length == "") {
$('.registration_error').html("You Have Successfully Registered.")
.fadeIn()
.delay(3000)
.slideUp();
$('.registration_box_wrap,.registration_box').delay(1500).fadeOut();
} else {
$('.registration_error').html(msg)
.fadeIn()
.delay(3000)
.slideUp();
}
}
});
return false;
});
$('.register').click(function () {
$('.registration_box_wrap').fadeIn(500);
$('.registration_box').fadeIn(200);
return false;
});
$('.cancel').click(function () {
$('.registration_box_wrap').fadeOut(500);
$('.registration_box').fadeOut(200);
return false;
});
});
</script>
</head>
<body>
<div class="main">
<a class='register' href="" id="button">Add New User</a>
<div class="edit_user"></div>
<table width="587" border="0" align="center" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th width="35">ID</th>
<th>User Name</th>
<th>Email</th>
<th>Registration Date</th>
<th width="130">Actions</th>
</tr>
</thead>
<tbody>
<?php
include("dbcon.php");
$sql = $conn->query("SELECT * from users");
while($row = $sql->fetch_assoc()) {
?>
<tr id="row_<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['username']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['reg_date']; ?></td>
<td><a href="#" id="button" onclick="edituser(<?php echo $row['id']; ?>)">Edit</a>
<a href="#" id="button" onclick="deleteuser(<?php echo $row['id']; ?>)"> Delete</a>
</td>
</tr>
<?php } ?>
</tbody></table>
</div>
<div class="registration_box" style="display:none;">
<h2>Register</h2>
<div class="registration_error" style="display:none;"></div>
<form id="register_form" name="form1" method="post" action="">
Username<br />
<input type="text" name="username" id="username" />
<br />
Password<br />
<input type="password" name="password" id="textfield2" />
<br />
Email<br />
<input type="text" name="email" id="email" />
<br />
<br />
<input type="submit" name="Register" id="Register" value="Register" />
or <a class="cancel" href="#">cancel</a>
</form>
</div>
<div class="registration_box_wrap" style="display:none;"></div>
<div class="info_message" style="display:none;"></div>
<style type="text/css">
table thead tr th {
background-color: #FFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
padding: 4px;
color: #000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCC;
font-size: 12px;
}
table {
background-color: #FFF;
color: #333;
float: left;
position: absolute;
top: 100px;
width: 652px;
}
td a {
color: #333;
display: block;
float: left;
padding: 4px;
text-decoration: none;
font-size: 18px;
}
td {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCC;
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
}
.tr-hover {
background-color: #eeeeee;
}
.main {
width: 700px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
body {
background-color: #efefef;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#button {
padding: 5px;
display: block;
float: left;
background-color: #ffffff;
border: 1px solid #CCC;
color: #666;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}
.registration_box {
background-color: #EEE;
height: auto;
width: 250px;
margin-top: 75px;
margin-right: auto;
margin-left: auto;
border: 5px solid #CCC;
z-index: 999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
position: relative;
padding: 20px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.registration_box_wrap {
z-index: 888;
height: 100%;
width: 100%;
background-color: #333;
position: absolute;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
top: 0px;
}
.edit_user {
text-align: center;
padding: 10px;
}
.info_message {
text-align: center;
margin: 10px;
background-color: #EEE;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
font-size: 18px;
float: left;
position: absolute;
left: 5px;
top: 5px;
}
.registration_error {
font-size: 14px;
padding: 5px;
border: thin solid #09F;
margin: 5px;
text-align: center;
}
</style>
</body>
</html>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
//register.php
<?php
include("dbcon.php");
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
#Create a unique code which will be used to confirm user accounts.
$confirm_code = md5(rand(0,99999).rand(0,999999));
#Check if data is of required lenght.
if (strlen($username) < 3 || strlen($password) < 3 || strlen($email) < 3)
{
die("All Fields Must Be At Least 3 Characters");
}
if (!preg_match('/^[a-zA-Z0-9&\'\.\-_\+]+\@[a-zA-Z0-9.-]+\.+[a-zA-Z]{2,6}$/', $email)) {
die("Email Address Not Vaild.");
}
#Check if username or email is already in use.
$password = md5($password);
$sqlc="SELECT * FROM users WHERE username = '$username' OR email = '$email'";
if ($rsdc=mysqli_query($conn,$sqlc)){
$total=mysqli_num_rows($rsdc);
if ($total >= '1') {
die("Username Or Email Already In Use");
}
}
$sql = "INSERT INTO users (username,password,email,confirm_code,reg_date)
VALUES ('$username', '$password', '$email', '$confirm_code', now())";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
?>
//manage_functions.php
<?php
include("dbcon.php");
if ($_POST['action'] == 'delete_user') {
$id = $_POST['id'];
$sql = "DELETE FROM users WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}
}else if ($_POST['action'] == 'edit_user') {
$id = $_POST['id'];
$sql = "SELECT * FROM users WHERE id = $id";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
?><script>
$(document).ready(function(){
$("#edit_user_button").click(function(){
var str = $('#edit_user_form').serialize();
$.ajax({
type: "POST",
url: "manage_functions.php",
data: str,
success: function (msg) {
$('.info_message').html(msg).fadeIn().delay(3000).fadeOut();
$('.edit_user').hide(500);
}
});
return false;
});
});
</script>
<form id="edit_user_form" name="edit_user_form" method="post" action="">
Uname:
<input name="username" type="text" id="username" value="<?php echo $row["username"]; ?>" />
Email:
<input name="email" type="text" id="email" value="<?php echo $row["email"]; ?>" />
<input name="id" type="hidden" id="id" value="<?php echo $row["id"]; ?>">
<input name="action" type="hidden" id="id" value="save_user_info">
<input type="button" name="button" id="edit_user_button" value="Edit User" />
</form>
<?php
}else if ($_POST['action'] == 'save_user_info') {
$id = $_POST['id'];
$username = $_POST['username'];
$email = $_POST['email'];
$sql = "UPDATE users SET username = '$username', email= '$email' WHERE id = '$id' ";
if ($conn->query($sql) === TRUE) {
echo "User Successfully Edited";
} else {
echo "Error updating record: " . $conn->error;
}
}
?>
VIDEO
