JQuery Ajax CRUD App with PHP MySQL

 JQuery Ajax CRUD App  with PHP MySQL

 

coding-zon-ajax-crud-PHP-Mysql

In this tutorial I would like to show you how to develop a Ajax CRUD App using JQuery  ajax and PHP MySQL. Here I give step by step instructions. Just follow them.For more info,leave the comment below. Give me your feedback or any suggestions, to improve this article.

Overview:

Basically this project implements 4 operations such as..

  1. Inserting Record 
  2. Viewing All Records
  3. Updating Record
  4. Deleting Record

 Getting Started

  • Create your project folder with the name. ajaxapp
  • Download the style and jQuery files from the given link.
  • Unzip it and copy in project folder(ajaxapp
  • DownlodLink

 File Structure of ajaxapp:


 

Create a database in PhpMyAdmin with name usersdb. 

Run the sql query given below in sql window of database

 

SQL Query:

 
CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(25) NOT NULL,
  `password` varchar(25) NOT NULL,
  `email` varchar(25) NOT NULL,
  `mobile` varchar(12) NOT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


Create and empty php file with name dbconfig.php and copy the given code and save in project folder ajaxapp.

dbconfig.php

<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "usersdb";
$con = mysqli_connect($host,$user,$password,$database);
?>
 
 
Next, create an index.html file and copy the following code and save to the project folder.

index.html


<!DOCTYPE>
<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css" /> 
<script src="jquery-1.11.1.js"></script> 


</head>

<body>
<center>

<div id="header">
<div id="content">
<label>User Details Management Application</label>
</div>
</div>
<div id="body">
<div id="content">
<form method="post">

<table align="center">


<tr>
    <td  align="center"><a href="insert_form.html">User Registration</a></td>
</tr>
<tr>
	<td  align="center"><a href="update_form.html">Change Password</a></td>
</tr>
<tr>
	<td  align="center"><a href="view_users.html">View All Users </a> </td>
</tr>

</table>
</form>
</div>
</div>

</center>
</body>
</html> 
 

Result: 




JQuery Ajax CRUD App with PHP MySQL

 

 

1. Inserting Record

 

  

We can add a new user with the help of this form. There are 2 files for inserting  user. One is frontend form, and the second one is PHP file.

  1. insert_form.html

  2. db_insert.php



 

insert_form.html

 
 
<!DOCTYPE>
<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css" /> 
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#enterUser").click(function(){
	
	
$.get("db_insert.php", {username:$('#username').val(), password:$('#password').val(),
		
		email:$('#email').val(),
		
		mobile:$('#mobile').val(),
		
	},
	
	function(result){
		
		$("#div1").html(result);
		
	});
	
});

});


</script>
</head>

<body>
<center>

<div id="header">
<div id="content">
	<label>User Details Management Application</label>
</div>
</div>
<div id="body">
<div id="content">
<form>
<div id="div1"></div>
<table align="center">
	<tr>
		<td align="center"> <label>User Registration Form</label></td>
	</tr>
			
	<tr> 
		<td><input type="text" id="username"  placeholder="User Name" required /></td>
	</tr>
	<tr>
		<td><input type="password" id="password" placeholder="Password" required /></td>
	</tr>
	<tr>
		<td><input type="text" id="email"  placeholder="Email" required /></td>
	</tr>
	<tr>
		<td><input type="text"   id="mobile"  placeholder="Mobile" required /></td>
	</tr>
	<tr>
		<td align="center"><button type="submit" id="enterUser" ><strong>SAVE</strong></button></td>
	</tr>
	<tr>
		<td align="center"><a href="index.html">Back to MainPpge</a></td>
	</tr>
</table>	
</form>
</div>
</div>


</body>
</html>	 

 

Result:


etrainings-jquery-crud-app-insert_form



db_insert.php


<?php
	
	include('dbconfig.php');
	
	// variables for input data
	
	$user = $_GET['username'];
	$pwd = $_GET['password'];
	$email = $_GET['email'];
	$mobile = $_GET['mobile'];
	
	
	$sql_command = "INSERT INTO users(username,password,email,mobile) VALUES('$user','$pwd','$email','$mobile')";
	if (mysqli_query($con,$sql_command))
	
	echo "success";
	
	else
	
	echo "<p>Failed to insert</p>";
	
	
?>
 
 

2. Viewing All Records

 Once the user record is inserted you can view by clicking view users link in index.html.


view_users.html

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css" /> 
<script src="jquery-1.11.1.js"></script>

<script>

$(document).ready(function(){

$(window).load(function() {
	
	$.ajax({url: "db_select.php", success: function(result){		
		
		$("#tableBody").html(result); 
		
	}});
	
});
$(document).on("click", ".delete", function() { 

var $ele = $(this).parent().parent();

$.ajax({
	url: "db_delete.php",
	type: "GET",
	cache: false,
	data:{
		id: $(this).attr("id")
	},
	success: function(dataResult){
		ans = confirm("Are you Sure?");
		if(ans){
			var dataResult = JSON.parse(dataResult);
			
			if(dataResult.statusCode==200){
				$ele.fadeOut().remove();
			}
		}
	}
});
});
	
	
	
	
});



</script>

</head>
<body>
<center>
<div id="header">
	<div id="content">
		<label>User Details Management Application</label>
	</div>
</div>
<div id="body">
<div id="content">

<table id="tblUsers" align="center">

<THEAD>
	<tr>
		<th colspan="5"><a href="index.html">Back to MainPpge</a></th>
	</tr>
	<tr>
		<td>User ID</td>
		<td>User Name</td>
		<td>Passowrd</td>
		<td>Email</td>
		<td>Mobile</td>
		<td></td>
	</tr>
</THEAD>

<TBODY ID="tableBody"></TBODy>

</table><br>

</div>
</div>
</body>
</html>


db_select.php


<?php
	
include('dbconfig.php');
	
	$returnValue = "";
	
	$query="select * from users" ;
	
	$result =mysqli_query($con,$query);
	
	while($row = mysqli_fetch_assoc($result))
	{
		
	$returnValue .= "<TR>";
		
	$returnValue .= "<TD>" . $row['user_id'] . "</TD>" ;
		
	$returnValue .= "<TD>" . $row['username'] . "</TD>" ;
		
	$returnValue .= "<TD>" . $row['password'] . "</TD>" ;
		
	$returnValue .= "<TD>" . $row['email'] . "</TD>" ;
		
	$returnValue .= "<TD>" . $row['mobile'] . "</TD>" ;
		
	$link = '<button   id="'. $row['user_id'] . '" class="delete"> X</button>';
		
	$returnValue .= "<TD align='center'>".$link."</TD>" ;
		
	$returnValue .= "</TR>";
		
	}
	
	
echo   $returnValue ;	
	
		
?>

Result:


etrainings-jquery-crud-app-view_all



3. Updating Record

update_form.html

 

<!DOCTYPE>
<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css" />  
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#updateUser").click(function(){
 
var newpwd = $("#newpwd").val();
var oldpwd = $("#oldpwd").val();
var email = $("#email").val();



if(newpwd==''||oldpwd==''||email=='')
{
alert("Please Fill All Fields");
}
else
{
 
       $.get("db_update.php", {newpwd:newpwd, oldpwd:oldpwd,

                          email:email },

            function(result){

                  $("#div1").html(result);

            });
 
 
}
return false;
});
});

</script>
</head>

  <body>
<center>

<div id="header">
 <div id="content">
    <label>User Details Management Application</label>
    </div>
</div>
<div id="body">
 <div id="content">
 <div id="div1"></div>
    <form>
    <table align="center">
     <tr>
    <td align="center"> <label>Update Password Form</label></td>
    </tr>

    <tr>
    <td><input type="password" id="oldpwd" placeholder="Old Password" required /></td>
    </tr>
    <tr>
    <td><input type="password" id="newpwd"  placeholder="New Password" required /></td>
    </tr>
    <tr>
    <td><input type="text" id="email"  placeholder="Email" required /></td>
    </tr>
        
    <tr>
    <td>
    <button type="submit" id="updateUser" ><strong>Update</strong></button>
     <button type="reset" name="cancel"><strong>Cancel</strong></button>
    
    
    </td>
    </tr>
    <tr>
    <td align="center"><a href="index.html">Back to MainPpge</a></td>
    </tr>
    </table>
    </form>
    </div>
</div>



</body>
</html>


db_update.php

 

<?php
	
include('dbconfig.php');

// variables for input data

$email = $_GET['email'];
$newpassword = $_GET['newpwd'];
$oldpassword = $_GET['oldpwd'];

$sql_query = "UPDATE users SET password = '$newpassword' WHERE  email = '$email' and password = '$oldpassword'";

$res = mysql_query($sql_query);

$n = mysql_affected_rows($con);

if($n > 0){
	echo "success";
}

else

echo "<p>Failed to Update</p>";

	
?>
 
 

4. Deleting a Record

 
 
db_delete.php
 
 
<?php

include('dbconfig.php');

$id=$_GET['id']; 
$sql_query = "DELETE FROM `users` WHERE user_id = " .$id;

if (mysqli_query($con,$sql_query)) {
	echo json_encode(array("statusCode"=>200));
} 
else {
	echo json_encode(array("statusCode"=>201));
}
	
	
?>
 
 
 
 
Demo Video 















































Comments











Post a Comment




















Popular posts from this blog









Recently viewed list in PHP Mysql














Image







 Recently viewed list in PHP MySQL        Learn How to show recently viewed products list in a PHP website using MySQL Database . In the previous tutorial, you learn how to get the last five product IDs in an array. In this tutorial, we use MySQL to get the details of each product from recently viewed, and display them in the bottom of the product details page. Here we're using two files, one is bookdetails.php  and another is recentlyviewed.php.  In Bookdetails.php bookid is added to a session array 'lastviewed' every time when user clicks on some book. bookdetails.php <?php   @ session_start ();  include  "connect.php" ; //check if  //A) a bookid has been submitted  //B) the submitted value is numeric  $auth = "" ; if ( isset ( $_GET [ 'bid' ])){ //clean it up  if (! is_numeric ( $_GET [ 'bid' ])){ //Non numeric value entered. Someone tampered with the catid  $error = true ; $errormsg = " Security, Serious error. Contact webmast...








Read more










Import CSV File Into MySQL Using PHP 














Image







   Learn How to Import CSV File into MySQL Database Using PHP      This article shows you how to import an uploaded CSV file into MySQL using PHP. index.php file having a form code to upload a CSV file. Once the file uploaded successfully, PHP opens it and reads the line from CSV. Each line of data separated into php variables and then inserted into MySQL table. This process continues until the last line of the CSV. Once it is finished inserting, It displays a message – " Data Inserted in database" And finally closes CSV file. In case any error in uploading, it shows "the file type not allowed" message. PHP Version 5.5.11 1. Create a table with given code in a Database. Query: CREATE  TABLE  IF  NOT  EXISTS  `items`  (   `id`  int ( 11 ) NOT  NULL  AUTO_INCREMENT ,   `title`  varchar ( 100 ) DEFAULT  NULL ,   `description`  varchar ( 100 ) DEFAULT  NULL ,   PRIMARY  KEY  ( `id` ) ) ;   2. Create a following file with you database details and include it in a index.ph...








Read more










Shoppingcart using PHP Sessions - Miniproject














Image







 Shopping cart using PHP Sessions, MySQL In this tutorial, you are going to learn how to build a simple shopping cart project using PHP and MySQL. It is a basic project aimed for beginners . This project uses PHP Session to implement shopping cart. Within the session, a cart is created. Sessions allows you managing the products in the cart. Such as… adding product to the cart,  modifying the product quantity,  deleting the product finding the total number of products in the cart. etc.   Download source code from the given link: Note: Scan the code with antivirus and use it. Download Here are steps to accomplish the project. Just follow them. STEP-1   Create a project in a server. Create an image's folder inside the project folder. As given in the picture. Copy some sample products images in that. GO TOP↑   STEP-2: Start server. Open PhpMyAdmin tool in a browser, Create a database, with name shoppingcartdb. Create Table. And insert Data using the given queri...








Read more