index.
html
1 //index.html
<!DOCTYPE html>
2
<html>
3 <head>
4 <title>AngularJS CRUD with PHP Mysql</title>
5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boo
6 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"><
</head>
7 <body>
8 <br /><br />
9 <div class="container" style="width:600px;">
10 <h3 align="center">AngularJS CRUD (Create, Read, Update and Delete) with PHP Mys
11 <div ng-app="angularcrud" ng-controller="usercontroller" ng-init="displayData()"
<label>Name</label>
12 <input type="text" name="txtname" ng-model="txtname" class="form-control" />
13 <br />
14 <label>User Name</label>
15 <input type="text" name="txtusername" ng-model="txtusername" class="form-cont
<br />
16 <input type="hidden" name="txtid" ng-model="id" />
17 <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertDa
18 <br /><br />
19
20 <table class="table table-bordered">
<tr>
21 <th>Name</th>
22 <th>User Name</th>
23 <th>Update</th>
24 <th>Delete</th>
25 </tr>
<tr ng-repeat="x in names">
26 <td>{{x.fullname}}</td>
27 <td>{{x.username}}</td>
28 <td><button ng-click="updateData(x.userid, x.fullname, x.username)"
29 btn-xs">Update</button></td>
<td><button ng-click="deleteData(x.userid )"class="btn btn-danger b
30 </tr>
31 </table>
32 </div>
33 </div>
34 <script>
var app = angular.module("angularcrud",[]);
35 app.controller("usercontroller", function($scope, $http){
36 $scope.btnName = "ADD";
37 $scope.id = 0;
38 $scope.insertData = function(){
if($scope.txtname == null)
39
{
40 alert("Name is required");
41 }
42 else if($scope.txtusername == null)
43 {
alert("Username is required");
44 }
45 else
46 {
47 $http.post(
48 "insert_update.php",
{'txtname':$scope.txtname, 'txtusername':$scope.txtusername, '
49 $scope.btnName}
50
51
52
53
54
55
56
57 ).success(function(data){
58 alert(data);
59 $scope.txtname = null;
60 $scope.txtusername = null;
$scope.txtid = null;
61
$scope.btnName = "ADD";
62 $scope.displayData();
63 });
64 }
65 }
$scope.displayData = function(){
66 $http.get("list.php")
67 .success(function(data){
68 $scope.names = data;
69 });
70 }
$scope.updateData = function(id, fullname, username){
71 $scope.id = id;
72 $scope.txtname = fullname;
73 $scope.txtusername = username;
74 $scope.btnName = "Update";
}
75
$scope.deleteData = function(id){
76 if(confirm("Are you sure you want to delete this data?"))
77 {
78 $http.post("delete.php", {'id':id})
79 .success(function(data){
alert(data);
80 $scope.displayData();
81 });
82 }
83 else
84 {
return false;
85 }
86 }
87 });
88 </script>
</body>
89 </html>
90
91
92
93
94
95
96
97
98
db.php
1 //db.php
2 <?php
3 $connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
?>
4
list.php
1
2 //list.php
3 <?php
4 include('db.php');
5
$query = "SELECT * FROM tbl_user ORDER BY userid DESC";
6 $statement = $connect->prepare($query);
7 if($statement->execute())
8 {
9 while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
10
$data[] = $row;
11 }
12 echo json_encode($data);
13 }
14
15 ?>
16
insert_update.php
1 //insert_update.php
<?php
2
include('db.php');
3
4 $message = '';
5
6 $form_data = json_decode(file_get_contents("php://input"));
7
8 if ($form_data->txtid == '0') {
9
$data = array(
10
':txtname' => $form_data->txtname,
11
':txtusername' => $form_data->txtusername
12 );
13
14 $query = "
15 INSERT INTO tbl_user
16 (fullname, username) VALUES
(:txtname, :txtusername)
17 ";
18
19 $statement = $connect->prepare($query);
20
21 if($statement->execute($data))
22 {
$message = 'Data Inserted';
23 }else {
24 $message = 'Error';
25 }
26
27
28
29 }else {
30
31 $data = array(
32 ':txtname' => $form_data->txtname,
33 ':txtusername' => $form_data->txtusername,
34 ':txtid' => $form_data->txtid
35 );
36
$query = "
37 UPDATE tbl_user
38 SET fullname = :txtname, username = :txtusername
39 WHERE userid = :txtid
40 ";
41
42 $statement = $connect->prepare($query);
if($statement->execute($data))
43 {
44 $message = 'Data Edited';
45 }
46 }
echo $message;
47 ?>
48
49
50
51
delete.php
1
2 //delete.php
3 <?php
4 include('db.php');
5
6 $message = '';
7
$data = json_decode(file_get_contents("php://input"));
8 $id = $data->id;
9 $query = "DELETE FROM tbl_user WHERE userid='$id'";
10
11 $statement = $connect->prepare($query);
12 if($statement->execute())
{
13 $message = 'Data Deleted';
14 }else{
15 $message = 'Error';
16 }
17 echo $message;
?>
18
19
