article

Saturday, November 13, 2021

AngularJS CRUD (Create, Read, Update and Delete) with PHP Mysql

AngularJS CRUD (Create, Read, Update and Delete) with PHP Mysql

This tutorial used CDN for Bootstrap, Angular JS

index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
//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
?
1
2
3
4
//db.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
?>
list.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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;
?>

Posted by ednalan at 11:43 PM . Under .

Related Post