This tutorial used CDN for Bootstrap, Angular JS
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS CRUD with PHP Mysql</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h3 align="center">AngularJS CRUD (Create, Read, Update and Delete) with PHP Mysql</h3>
<div ng-app="angularcrud" ng-controller="usercontroller" ng-init="displayData()">
<label>Name</label>
<input type="text" name="txtname" ng-model="txtname" class="form-control" />
<br />
<label>User Name</label>
<input type="text" name="txtusername" ng-model="txtusername" class="form-control" />
<br />
<input type="hidden" name="txtid" ng-model="id" />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="{{btnName}}"/>
<br /><br />
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>User Name</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.fullname}}</td>
<td>{{x.username}}</td>
<td><button ng-click="updateData(x.userid, x.fullname, x.username)" class="btn btn-info btn-xs">Update</button></td>
<td><button ng-click="deleteData(x.userid )"class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module("angularcrud",[]);
app.controller("usercontroller", function($scope, $http){
$scope.btnName = "ADD";
$scope.id = 0;
$scope.insertData = function(){
if($scope.txtname == null)
{
alert("Name is required");
}
else if($scope.txtusername == null)
{
alert("Username is required");
}
else
{
$http.post(
"insert_update.php",
{'txtname':$scope.txtname, 'txtusername':$scope.txtusername, 'txtid':$scope.id, 'btnName':$scope.btnName}
).success(function(data){
alert(data);
$scope.txtname = null;
$scope.txtusername = null;
$scope.txtid = null;
$scope.btnName = "ADD";
$scope.displayData();
});
}
}
$scope.displayData = function(){
$http.get("list.php")
.success(function(data){
$scope.names = data;
});
}
$scope.updateData = function(id, fullname, username){
$scope.id = id;
$scope.txtname = fullname;
$scope.txtusername = username;
$scope.btnName = "Update";
}
$scope.deleteData = function(id){
if(confirm("Are you sure you want to delete this data?"))
{
$http.post("delete.php", {'id':id})
.success(function(data){
alert(data);
$scope.displayData();
});
}
else
{
return false;
}
}
});
</script>
</body>
</html>
db.php
//db.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
?>
list.php
//list.php
<?php
include('db.php');
$query = "SELECT * FROM tbl_user ORDER BY userid DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
insert_update.php
//insert_update.php
<?php
include('db.php');
$message = '';
$form_data = json_decode(file_get_contents("php://input"));
if ($form_data->txtid == '0') {
$data = array(
':txtname' => $form_data->txtname,
':txtusername' => $form_data->txtusername
);
$query = "
INSERT INTO tbl_user
(fullname, username) VALUES
(:txtname, :txtusername)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$message = 'Data Inserted';
}else {
$message = 'Error';
}
}else {
$data = array(
':txtname' => $form_data->txtname,
':txtusername' => $form_data->txtusername,
':txtid' => $form_data->txtid
);
$query = "
UPDATE tbl_user
SET fullname = :txtname, username = :txtusername
WHERE userid = :txtid
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$message = 'Data Edited';
}
}
echo $message;
?>
delete.php
//delete.php
<?php
include('db.php');
$message = '';
$data = json_decode(file_get_contents("php://input"));
$id = $data->id;
$query = "DELETE FROM tbl_user WHERE userid='$id'";
$statement = $connect->prepare($query);
if($statement->execute())
{
$message = 'Data Deleted';
}else{
$message = 'Error';
}
echo $message;
?>
