Tagged: angularjs insert data to database

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.