PHP CRUD Operation using angular.js V2

Submitted by nurhodelta_17 on Wednesday, November 15, 2017 - 16:05.

Getting Started

Please take note that CSS and angular.js used in this tutorial are hosted so you need internet connection for them to work.

Creating our Database

1. Open phpMyAdmin. 2. Click databases, create a database and name it as crud. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction. 
  1. CREATE TABLE `members` (
  2.   `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  3.   `firstname` VARCHAR(50) COLLATE utf8mb4_unicode_ci NOT NULL,
  4.   `lastname` VARCHAR(50) COLLATE utf8mb4_unicode_ci NOT NULL,
  5. PRIMARY KEY(`id`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
howtosql

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php. 
  1. <?php
  2.  
  3. $conn = new mysqli("localhost", "root", "", "crud");
  4.  
  5. if ($conn->connect_error) {
  6.     die("Connection failed: " . $conn->connect_error);
  7. }
  8.  
  9. ?>

index.php

This is our Read which contains our Member Table. 
  1. <!DOCTYPE html>
  2. <html ng-app="mem_app" ng-controller="controller" ng-init="showdata()">
  3. <head>
  4. 	<meta charset="UTF-8"> 
  5. 	<title>PHP CRUD Operation using angular.js V2</title>
  6. 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7. 	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  9. 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. 	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  11. </head>
  12. <body>
  13. <div class="container">
  14. 	<h1 class="page-header text-center">PHP CRUD using angular.js V2</h1>
  15. 	<div class="row">
  16. 		<div class="col-md-10 col-md-offset-1">
  17. 			<h2>Member List
  18. 				<a href="#addnew" data-toggle="modal" class="btn btn-primary pull-right" ng-click="insert()"><i class="fa fa-plus"></i> Member</a>
  19. 			</h2>
  20. 			<table class="table table-bordered table-striped">
  21. 				<thead>
  22. 					<th>Firstname</th>
  23. 					<th>Lastname</th>
  24. 					<th>Action</th>
  25. 				</thead>
  26. 				<tbody>
  27. 					<tr ng-repeat="mem in member">
  28. 						<input type="hidden" value="{{mem.id}}">
  29. 						<td>{{mem.firstname}}</td>
  30. 						<td>{{mem.lastname}}</td>
  31. 						<td>
  32. 							<a href="#addnew" data-toggle="modal" class="btn btn-success" ng-click="update(mem.id, mem.firstname, mem.lastname)"><i class="fa fa-edit"></i> Edit</a> || <a href="#delete" data-toggle="modal" class="btn btn-danger" ng-click="delmem(mem.id)"><i class="fa fa-trash"></i> Delete</a>
  33. 						</td>
  34. 					</tr>
  35. 				</tbody>
  36. 			</table>
  37. 		</div>
  38. 	</div>
  39. </div>
  40. <script src="myangular.js"></script>
  41. <?php include('modal.php'); ?>
  42. </body>
  43. </html>

myangular.js

This is our angular script which contains all our angular functions. 
  1. var app = angular.module("mem_app", []);
  2. app.controller("controller", function($scope, $http) {
  3.     $scope.action = function() {
  4.         if ($scope.firstname == null) {
  5.             alert("Please input Firstname");
  6.         } 
  7.         else if ($scope.lastname == null) {
  8.             alert("Please input Lastname");
  9.         }  
  10.         else {
  11.             $http.post(
  12.                 "action.php", {
  13.                     'firstname': $scope.firstname,
  14.                     'lastname': $scope.lastname,
  15.                     'btnName': $scope.btnName,
  16.                     'memberid': $scope.memberid,
  17.                 }
  18.             ).success(function() {
  19.                 $scope.firstname = null;
  20.                 $scope.lastname = null;
  21.                 $scope.btnName = "Save";
  22.                 $scope.icon = "fa fa-save";
  23.                 $scope.btnClass = "btn btn-primary";
  24.                 $scope.showdata();
  25.             });
  26.         }
  27.     }
  28.     $scope.showdata = function() {
  29.         $http.get("fetch.php")
  30.             .success(function(data) {
  31.                 $scope.member = data;
  32.             });
  33.     }
  34.     $scope.insert = function() {
  35.         $scope.firstname = null;
  36.         $scope.lastname = null;
  37.         $scope.title = "Add New Member";
  38.         $scope.btnName = "Save";
  39.         $scope.icon = "fa fa-save";
  40.         $scope.btnClass = "btn btn-primary";
  41.     }
  42.     $scope.update = function(memberid, firstname, lastname) {
  43.         $scope.memberid = memberid;
  44.         $scope.firstname = firstname;
  45.         $scope.lastname = lastname;
  46.         $scope.title = "Edit Member";
  47.         $scope.icon = "fa fa-check-square-o";
  48.         $scope.btnClass = "btn btn-success";
  49.         $scope.btnName = "Update";
  50.     }
  51.     $scope.delmem = function(memberid) {
  52.         $scope.delmember = memberid;
  53.     }
  54.     $scope.delete = function() {
  55.         $http.post("delete.php", {
  56.             'memberid': $scope.delmember,
  57.         }
  58.         ).success(function(data) {
  59.             $scope.showdata();
  60.         });
  61.     } 
  62.     $scope.enter = function(keyEvent) {
  63.         if (keyEvent.which === 13){
  64.             action();
  65.         }
  66.     }
  67. });

fetch.php

This is our PHP code in fetching our table data. 
  1. <?php
  2. 	include('conn.php');
  3. 	$output = array();
  4. 	$query = $conn->query("select * from members"); 
  5. 	if ($query->num_rows > 0) {
  6. 	    while ($row = $query->fetch_array()) {
  7. 	        $output[] = $row;
  8. 	    }
  9. 	    echo json_encode($output);
  10. 	}
  11. ?>

modal.php

This contains our 3 modals which are add modal, edit modal and delete modal. 
  1. <!-- Add/Edit Modal -->
  2. <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  3. 	<div class="modal-dialog" role="document">
  4. 		<div class="modal-content">
  5. 			<div class="modal-header">
  6. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  7. 				<h4 class="modal-title text-center" id="myModalLabel">{{ title }}</h4>
  8. 			</div>
  9. 			<div class="modal-body">
  10. 				<form ng-submit="myFunc()">
  11. 			    	<div class="form-group">
  12. 						<div class="row">
  13. 				    		<div class="col-md-2" style="margin-top:7px;">
  14. 				    			<label for="firstname">Firstname</label>
  15. 				    		</div>
  16. 				    		<div class="col-md-10">
  17. 				    			<input type="text" class="form-control" ng-model="firstname" placeholder="Enter Firstname">
  18. 				    		</div>
  19. 				    	</div>
  20. 			    	</div>
  21. 			    	<div class="form-group">
  22. 			    		<div class="row">
  23. 				    		<div class="col-md-2" style="margin-top:7px;">
  24. 				    			<label for="lastname">Lastname</label>
  25. 				    		</div>
  26. 				    		<div class="col-md-10">
  27. 				    			<input type="text" class="form-control" ng-model="lastname" placeholder="Enter Lastname">
  28. 				    		</div>
  29. 				    	</div>
  30. 			    	</div>
  31. 			</div>
  32. 			<div class="modal-footer">
  33. 				<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
  34. 				<button type="submit" class="{{ btnClass }}" ng-click="action()" data-dismiss="modal"><i class="{{ icon }}"></i> {{ btnName }}</button>
  35. 				</form>
  36. 			</div>
  37. 		</div>
  38. 	</div>
  39. </div>
  40.  
  41. <!-- Delete Modal -->
  42. <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  43. 	<div class="modal-dialog" role="document">
  44. 		<div class="modal-content">
  45. 			<div class="modal-header">
  46. 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  47. 				<h4 class="modal-title text-center" id="myModalLabel">Delete Member</h4>
  48. 			</div>
  49. 			<div class="modal-body">
  50. 				<h4 class="text-center">Are you sure you want to delete Member?</h4>
  51. 				<input type="hidden">
  52. 			</div>
  53. 			<div class="modal-footer">
  54. 				<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
  55. 				<button type="button" class="btn btn-danger" ng-click="delete()" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
  56. 			</div>
  57. 		</div>
  58. 	</div>
  59. </div>

action.php

This is our PHP code in adding and editing. 
  1. <?php
  2.     include('conn.php');
  3.     $data = json_decode(file_get_contents("php://input"));
  4.     if (count($data) > 0) {
  5.         $firstname = mysqli_real_escape_string($conn, $data->firstname);
  6.         $lastname = mysqli_real_escape_string($conn, $data->lastname);
  7.         $btn_name = $data->btnName;
  8.         if ($btn_name == "Save") {
  9.             $conn->query("insert into members (firstname, lastname) values ('$firstname', '$lastname')");
  10.         }
  11.         if ($btn_name == "Update") {
  12.             $memberid = $data->memberid;
  13.             $conn->query("update members set firstname='$firstname', lastname='$lastname' where id='$memberid'");
  14.         }
  15.     }
  16. ?>

delete.php

Lastly, this is PHP delete code. 
  1. <?php
  2. 	include('conn.php');
  3. 	$data = json_decode(file_get_contents("php://input"));
  4.  
  5. 	$id = $data->memberid;
  6.  
  7. 	$conn->query("delete from members where id='$id'");
  8.  
  9. ?>
That ends this tutorial. If you have any comment, suggestion or question, feel free to write it below or message me. Happy Coding :)

Tags

Add new comment

About text formats
  • 306 views