PHP CRUD Operation using angular.js V2

Submitted by: 
Language: 
Visitors have accessed this post 904 times.

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. <meta charset="UTF-8">
  4. <title>PHP CRUD Operation using angular.js V2</title>
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  6. <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> rel="stylesheet">
  7. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  8. " rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9. " rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></s...</a> <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>" rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s...</a>
  10. </head>
  11. <div class="container">
  12. <h1 class="page-header text-center">PHP CRUD using angular.js V2</h1>
  13. <div class="row">
  14. <div class="col-md-10 col-md-offset-1">
  15. <h2>Member List
  16. <a href="#addnew" data-toggle="modal" class="btn btn-primary pull-right" ng-click="insert()"><i class="fa fa-plus"></i> Member</a>
  17. </h2>
  18. <table class="table table-bordered table-striped">
  19. <th>Firstname</th>
  20. <th>Lastname</th>
  21. <th>Action</th>
  22. </thead>
  23. <tr ng-repeat="mem in member">
  24. <input type="hidden" value="{{mem.id}}">
  25. <td>{{mem.firstname}}</td>
  26. <td>{{mem.lastname}}</td>
  27. <td>
  28. <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>
  29. </td>
  30. </tr>
  31. </tbody>
  32. </table>
  33. </div>
  34. </div>
  35. </div>
  36. <script src="myangular.js"></script>
  37. <?php include('modal.php'); ?>
  38. </body>
  39. </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 :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.