PHP - OOP CRUD Operation using Angular.js

Submitted by: 
Language: 
Visitors have accessed this post 2693 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_angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

  1. CREATE TABLE `member` (
  2. `memberid` INT(11) NOT NULL AUTO_INCREMENT,
  3. `firstname` VARCHAR(50) NOT NULL,
  4. `lastname` VARCHAR(50) NOT NULL,
  5. PRIMARY KEY(`memberid`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

crudangular

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_angular");
  4.  
  5. if ($conn->connect_error) {
  6. die("Connection failed: " . $conn->connect_error);
  7. }
  8.  
  9. ?>

index.php

This is our index which contains our form and our table.

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>PHP - OOP CRUD Operation using angular.js</title>
  4. <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">
  5. <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>
  6. </head>
  7. <div class="container">
  8. <h1 class="page-header">PHP - OOP CRUD Operation using angular.js</h1>
  9. <div class="row">
  10. <div ng-app="mem_app" ng-controller="controller" ng-init="showdata()">
  11. <div class="col-md-4">
  12. <form ng-submit="myFunc()">
  13. <h3>Member Form</h3>
  14. <hr>
  15. <div class="form-group">
  16. <label for="firstname">Firstname</label>
  17. <input type="text" class="form-control" id="firstname" name="firstname" ng-model="firstname" placeholder="Enter Firstname">
  18. </div>
  19. <div class="form-group">
  20. <label for="lastname">Lastname</label>
  21. <input type="text" class="form-control" id="lastname" name="lastname" ng-model="lastname" placeholder="Enter Lastname">
  22. </div>
  23. <hr>
  24. <button type="submit" class="{{btnClass}}" ng-click="insert()"><span class="{{icon}}"></span> {{btnName}}</button>
  25. </form>
  26. </div>
  27. <div class="col-md-8">
  28. <h3>Member List</h3>
  29. <table class="table table-bordered table-striped">
  30. <th>Firstname</th>
  31. <th>Lastname</th>
  32. <th>Action</th>
  33. </thead>
  34. <tr ng-repeat="mem in member">
  35. <input type="hidden" value="{{mem.memberid}}">
  36. <td>{{mem.firstname}}</td>
  37. <td>{{mem.lastname}}</td>
  38. <td>
  39. <button class="btn btn-success" ng-click="update(mem.memberid, mem.firstname, mem.lastname)"><span class="glyphicon glyphicon-pencil"></span> Edit</button> || <button class="btn btn-danger" ng-click="delete(mem.memberid)"><span class="glyphicon glyphicon-trash"></span> Delete</button>
  40. </td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <script src="myangular.js"></script>
  49. </body>
  50. </html>

myangular.js

This contains our angular js codes.

  1. var app = angular.module("mem_app", []);
  2. app.controller("controller", function($scope, $http) {
  3. $scope.btnName = "Save";
  4. $scope.icon = "glyphicon glyphicon-floppy-disk";
  5. $scope.btnClass = "btn btn-primary";
  6. $scope.insert = function() {
  7. if ($scope.firstname == null) {
  8. alert("Please input Firstname");
  9. }
  10. else if ($scope.lastname == null) {
  11. alert("Please input Lastname");
  12. }
  13. else {
  14. $http.post(
  15. "action.php", {
  16. 'firstname': $scope.firstname,
  17. 'lastname': $scope.lastname,
  18. 'btnName': $scope.btnName,
  19. 'memberid': $scope.memberid,
  20. }
  21. ).success(function(data) {
  22. alert(data);
  23. $scope.firstname = null;
  24. $scope.lastname = null;
  25. $scope.btnName = "Save";
  26. $scope.icon = "glyphicon glyphicon-floppy-disk";
  27. $scope.btnClass = "btn btn-primary";
  28. $scope.showdata();
  29. });
  30. }
  31. }
  32. $scope.showdata = function() {
  33. $http.get("fetch.php")
  34. .success(function(data) {
  35. $scope.member = data;
  36. });
  37. }
  38. $scope.update = function(memberid, firstname, lastname) {
  39. $scope.memberid = memberid;
  40. $scope.firstname = firstname;
  41. $scope.lastname = lastname;
  42. $scope.icon = "glyphicon glyphicon-check";
  43. $scope.btnClass = "btn btn-success";
  44. $scope.btnName = "Update";
  45. }
  46. $scope.delete= function(memberid) {
  47. if (confirm("Are you sure you want to delete member?")) {
  48. $http.post("delete.php", {
  49. 'memberid': memberid
  50. })
  51. .success(function(data) {
  52. alert(data);
  53. $scope.showdata();
  54. });
  55. } else {
  56. return false;
  57. }
  58. }
  59. });

fetch.php

This is our PHP code in fetching data from our database to show in our table.

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

action.php

This contains our insert and update PHP code.

  1. <?php
  2. include('conn.php');
  3. $info = json_decode(file_get_contents("php://input"));
  4. if (count($info) > 0) {
  5. $firstname = mysqli_real_escape_string($conn, $info->firstname);
  6. $lastname = mysqli_real_escape_string($conn, $info->lastname);
  7. $btn_name = $info->btnName;
  8. if ($btn_name == "Save") {
  9. if ($conn->query("insert into member (firstname, lastname) values ('$firstname', '$lastname')")) {
  10. echo "Member Added Successfully";
  11. } else {
  12. echo 'Failed';
  13. }
  14. }
  15. if ($btn_name == "Update") {
  16. $id = $info->memberid;
  17. if ($conn->query("update member set firstname='$firstname', lastname='$lastname' where memberid='$id'")) {
  18. echo 'Member Updated Successfully';
  19. } else {
  20. echo 'Failed';
  21. }
  22. }
  23. }
  24. ?>

delete.php

Lastly, this is our PHP delete code.

  1. <?php
  2. include('conn.php');
  3. $data = json_decode(file_get_contents("php://input"));
  4. if (count($data) > 0) {
  5. $id = $data->memberid;
  6. if ($conn->query("delete from member where memberid='$id'")) {
  7. echo 'Member Deleted Successfully';
  8. } else {
  9. echo 'Failed';
  10. }
  11. }
  12. ?>

That ends this tutorial. If you have any question, comment or suggestion, feel free to write it below or message me. Happy Coding :)


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

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.