Tagged: insert delete update data using ajax in php

PHP – MySQLi Insert Update Delete CRUD Operation using AngularJS 0

PHP - MySQLi Insert Update Delete CRUD Operation using AngularJS

PHP – MySQLi Insert Update Delete CRUD Operation using AngularJS

In this Post We Will Explain About is PHP – MySQLi Insert Update Delete CRUD Operation using AngularJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS – Insert Update Delete using PHP and MySQL Example

In this post we will show you Best way to implement PHP – OOP CRUD Operation using Angular.js, hear for AngularJS PHP CRUD (Create, Read, Update, Delete) Operations with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS CRUD Operation With PHP/MySQLi

In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Creating simple Database

CREATE TABLE `student` (
  `studentId` INT(11) NOT NULL AUTO_INCREMENT,
  `studentfname` VARCHAR(50) NOT NULL,
  `studentlname` VARCHAR(50) NOT NULL,
PRIMARY KEY(`studentId`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Creating simple Database Connection

<?php
$db_con = new mysqli("localhost", "username", "Your_Database_Password", "livedbname");
 
if ($db_con->connect_error) {
    die("Connection failed: " . $db_con->connect_error);
}
?>

index.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"> 
<title>PHP Insert Update Delete CRUD Operation using AngularJS</title>
<link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div class="container">
	<h1 class="page-header">PHP Insert Update Delete CRUD Operation using AngularJS</h1>
	<div class="row">
		<div ng-app="liveApp" ng-controller="controller" ng-init="displayData()">
			<div class="col-xl-4">
				<form ng-submit="myFunc()">
					<h3>Student Form</h3>
					<hr>
					<div class="live24u form-group">
				    	<label for="studentfname">Firstname</label>
				    	<input type="text" class="live24u form-control" id="studentfname" name="studentfname" ng-model="studentfname" placeholder="Enter Firstname">
				  	</div>
				  	<div class="live24u form-group">
				    	<label for="studentlname">Lastname</label>
				    	<input type="text" class="live24u form-control" id="studentlname" name="studentlname" ng-model="studentlname" placeholder="Enter Lastname">
				  	</div>
				  	<hr>
				  	<button type="submit" class="live24u {{buttonClass}}" ng-click="insert()"><span class="live24u {{mainico}}"></span> {{buttonName}}</button>
				</form>
			</div>
			<div class="col-xl-8">
				<h3>Student List</h3>
				<table class="live table table-bordered dbn table-striped">
					<thead>
						<th>student Firstname</th>
						<th>student Lastname</th>
						<th>Action</th>
					</thead>
					<tbody>
						<tr ng-repeat="stud in student">
							<input type="hidden" value="{{stud.studentId}}">
							<td>{{stud.studentfname}}</td>
							<td>{{stud.studentlname}}</td>
							<td>
								<button class="live btn btn-success" ng-click="update(stud.studentId, stud.studentfname, stud.studentlname)"><span class="live glyphicon glyphicon-pencil"></span> Edit</button> || <button class="live btn btn-danger" ng-click="delete(stud.studentId)"><span class="live glyphicon glyphicon-trash"></span> Delete</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

main.js

var app = angular.module("liveApp", []);
app.controller("controller", function($scope, $http) {
    $scope.buttonName = "Save";
    $scope.mainico = "glyphicon glyphicon-floppy-disk";
    $scope.buttonClass = "btn btn-success";
    $scope.insert = function() {
        if ($scope.studentfname == null) {
            alert("Please input Student Firstname");
        } 
        else if ($scope.studentlname == null) {
            alert("Please input Student Lastname");
        }  
        else {
            $http.post(
                "action.php", {
                    'studentfname': $scope.studentfname,
                    'studentlname': $scope.studentlname,
                    'buttonName': $scope.buttonName,
                    'studentId': $scope.studentId,
                }
            ).success(function(data) {
                alert(data);
                $scope.studentfname = null;
                $scope.studentlname = null;
                $scope.buttonName = "Save";
                $scope.mainico = "glyphicon glyphicon-floppy-disk";
                $scope.buttonClass = "btn btn-success";
                $scope.displayData();
            });
        }
    }
    $scope.displayData = function() {
        $http.get("fetch.php")
            .success(function(data) {
                $scope.student = data;
            });
    }
    $scope.update = function(studentId, studentfname, studentlname) {
        $scope.studentId = studentId;
        $scope.studentfname = studentfname;
        $scope.studentlname = studentlname;
        $scope.mainico = "glyphicon glyphicon-check";
        $scope.buttonClass = "btn btn-success";
        $scope.buttonName = "Update";
    }
    $scope.delete= function(studentId) {
        if (confirm("you want to really delete student?")) {
            $http.post("delete.php", {
                    'studentId': studentId
                })
                .success(function(data) {
                    alert(data);
                    $scope.displayData();
                });
        } else {
            return false;
        }
    }
});

fetch.php

<?php
	include('db_con.php');
	$result = array();
	$query = $db_con->query("select * from student"); 
	if ($query->num_rows > 0) {
	    while ($datarow = $query->fetch_array()) {
	        $result[] = $datarow;
	    }
	    echo json_encode($result);
	}
?>

action.php

<?php
    include('db_con.php');
    $get_data = json_decode(file_get_contents("php://input"));
    if (count($get_data) > 0) {
        $studentfname = mysqli_real_escape_string($db_con, $get_data->studentfname);
        $studentlname = mysqli_real_escape_string($db_con, $get_data->studentlname);
        $actBtnName = $get_data->buttonName;
        if ($actBtnName == "Save") {
            if ($db_con->query("insert into student (studentfname, studentlname) values ('$studentfname', '$studentlname')")) {
                echo "Student Added Successfully";
            } else {
                echo 'Failed';
            }
        }
        if ($actBtnName == "Update") {
            $id    = $get_data->studentId;
            if ($db_con->query("update student set studentfname='$studentfname', studentlname='$studentlname' where studentId='$id'")) {
                echo 'Student Updated Successfully';
            } else {
                echo 'Sorry Failed';
            }
        }
    }
?>

delete.php

<?php
	include('db_con.php');
	$data = json_decode(file_get_contents("php://input"));
	if (count($data) > 0) {
	    $id = $data->studentId;
	    if ($db_con->query("delete from student where studentId='$id'")) {
	        echo 'Student Deleted Successfully';
	    } else {
	        echo 'Failed';
	    }
	}
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is AngularJS CRUD Operations with PHP and MySQL And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Simple PHP jQuery Ajax Insert Update Delete using MySQLi 0

Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Today, We want to share with you Simple PHP jQuery Ajax Insert Update Delete using MySQLi.
In this post we will show you PHP – Simple CRUD With Ajax/MySQLi, hear for live table add edit delete using ajax jquery in php mysql we will give you demo and example for implement.
In this post, we will learn about Ajax Add & Delete MySQL records using jQuery & PHP with an example.

Making the database connection

first of all simple database connection using PHP simple copy and paste this source code db_connect.php

<?php
	$db_connect = new mysqli('localhost', 'root', 'YOUR_PASSWORD', 'pakainfo_db');
 
	if(!$db_connect){
		die("Error: Sorry Cannot connect to the your database");
	}
?>

Making The Interface

main file All the HTML and PHP Form Interface Like name as a index.php.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="pakainfo/css/bootstrap.css"/>
	</head>
<body>
	<nav class="pakainfo navbar navbar-default">
		<div class="pakainfo container-fluid gst">
			<a class="navbar-brand" href="https://pakainfo.com">pakainfo.com</a>
</a>		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-success">PHP - Simple CRUD With Ajax/MySQLi</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<form method="POST">
			<div class="gst form-inline">
				<label>Client Name</label>
				<input type="text" id="clientfname" class="pakainfo form-control"/>
				<label>Lastname</label>
				<input type="text" id="clientlname" class="pakainfo form-control"/>
			</div>
			<br />
			<div class="gst form-inline">
				<label>location</label>
				<input type="text" id="location" class="pakainfo form-control"/>
			</div>
			<br />
			<center><button type="button" id="save" class="btn btn-success"><span class="paka glyphicon glyphicon-save"></span> Save</button><button type="button" id="update" class="paka btn btn-warning"><span class="paka glyphicon glyphicon-edit"></span> Update</button></center>
		</form>
		<br />
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Client Name</th>
					<th>Location</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody id="data"></tbody>
		</table>
	</div>
</body>
<script src="pakainfo/js/jquery-3.2.1.min.js"></script>
<script src="pakainfo/js/script.js"></script>
</html>

save_query.php

This source code will save all the record the data input form to the mysql database PHP server side.

<?php
	require_once 'db_connect.php';
 
	$clientfname = $_POST['clientfname'];
	$clientlname = $_POST['clientlname'];
	$location = $_POST['location'];
 
	$db_connect->query("INSERT INTO `client_mst` VALUES('', '$clientfname', '$clientlname', '$location')");
?>

data_query.php

This source code will client_row and displaying the data from the get all the record in database.

<?php
	require_once 'db_connect.php';
	if(ISSET($_POST['res'])){
		$query = $db_connect->query("SELECT * FROM `client_mst`");
		while($client_row = $query->fetch_array()){
			echo
				"
					<tr>
						<td>".$client_row['clientfname']." ".$client_row['clientlname']."</td>
						<td>".$client_row['location']."</td>
						<td><center><button class='btn btn-warning edit' name='".$client_row['client_id']."'><span class='glyphicon glyphicon-edit'></span> Edit</button> | <button class='btn btn-danger delete' name='".$client_row['client_id']."'><span class='glyphicon glyphicon-trash'></span> Delete</button></center></td>
					</tr>
				";
 
		}
	}
 
?> 

delete_query,php

This source code will delete particuler record the data from the sql database.

<?php
	require_once 'db_connect.php';
 
	$id = $_POST['id'];
 
	$db_connect->query("DELETE FROM `client_mst` WHERE `client_id` = '$id'");
?>

client_edit.php

first of all each person edit this record via users id to get and select query using PHP in MySQLi

<?php
	require_once 'db_connect.php';
 
	if(ISSET($_POST['id'])){
		$id = $_POST['id'];
 
		$query = $db_connect->query("SELECT * FROM `client_mst` WHERE `client_id` ='$id'");
		$client_row = $query->fetch_array();
 
		$array = array(
			'client_id' => $client_row['client_id'],
			'clientfname' => $client_row['clientfname'],
			'clientlname' => $client_row['clientlname'],
			'location' => $client_row['location']
		);
 
		echo json_encode($array);
	}
?>

client_update.php

Server side source code for All the Data update queryin Mysql using PHP

<?php
	require_once 'db_connect.php';
 
	if(ISSET($_POST['id'])){
		$id = $_POST['id'];
		$clientfname = $_POST['clientfname'];
		$clientlname = $_POST['clientlname'];
		$location = $_POST['location'];
 
		$db_connect->query("UPDATE `client_mst` set `clientfname` = '$clientfname', `clientlname` = '$clientlname', `location` = '$location' WHERE `client_id` = '$id'");
	}
 
?>

Making The Ajax Funcition

Save the Custom Javscript File Like name as a script.js inside the all the libs in js folder.

$(document).ready(function(){
	var client_id;
 
	RetriveClientData();
 
	$('#update').hide();
 
	$('#save').on('click', function(){
		if($('#clientfname').val() == "" || $('#clientlname').val() == "" || $('#location').val() == ""){
			alert("Hello World");
		}else{
			var clientfname = $('#clientfname').val();
			var clientlname = $('#clientlname').val();
			var location = $('#location').val();
 
			$.ajax({
				url: 'save_query.php',
				type: 'POST',
				data: {
					clientfname: clientfname,
					clientlname: clientlname,
					location: location
				},
				success: function(data){
					 $('#clientfname').val('');
					 $('#clientlname').val('');
					 $('#location').val('');
					 RetriveClientData();
				}
			});
		}
 
	});
 
	function RetriveClientData(){
		$.ajax({
			url: 'data_query.php',
			type: 'POST',
			data: {
				res: 1
			},
			success: function(response){
				$('#data').html(response);
			}
		})
	}
 
	$(document).on('click', '.delete', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'delete_query.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(data){
				RetriveClientData();
				$('#update').hide();
				$('#save').show();	
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
			}
		});
	})
 
	$(document).on('click', '.edit', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'client_edit.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(response){
				var fetchArr = jQuery.parseJSON(response);
 
				client_id = fetchArr.client_id;
 
				$('#clientfname').val(fetchArr.clientfname);
				$('#clientlname').val(fetchArr.clientlname);
				$('#location').val(fetchArr.location);
 
				$('#update').show();
				$('#save').hide();	
			}
		})
	});
 
	$('#update').on('click', function(){
		var clientfname = $('#clientfname').val();
		var clientlname = $('#clientlname').val();
		var location = $('#location').val();
 
 
		$.ajax({
			url: 'client_update.php',
			type: 'POST',
			data: {
				id: client_id,
				clientfname: clientfname,
				clientlname: clientlname,
				location: location
			},
			success: function(){
				RetriveClientData();
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
 
				alert("Client Details Successfully Updated!");
 
				$('#update').hide();
				$('#save').show();	
 
				client_id = "";
			}
		});
	});
});

There you have step by step done it we successfully made a Simple webapplication Like as a insert update and delete CRUD With Ajax/MySQLi using PHP Example.

We hope you get an idea about PHP – Simple CRUD With Ajax/MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.