AngularJS CRUD Operation With PHP/MySQLi - Part 2

Submitted by razormist on Thursday, March 30, 2017 - 18:21.

In this tutorial we will try to do the AngularJS CRUD (Delete, Update) Operation with PHP/MySQLi. In my previous tutorial we already tackle the (create and update) on AngularJS, this time will continue on and try to finish the project. We already created the database and the database connection, we will just add some method to the AngularJS directives and PHP script to make our project more interactive. Before we proceed make sure you already read the previous tutorial and already have the resources for this tutorial, if you don't have try visiting it here AngularJS CRUD Operation With PHP/MySQLi - Part 1 . Recapping the Mark Up In my last tutorial we already created the mark up, we will just add some new script to make the update and delete function worked. So feel free to copy/paste the code below or you can just simply add the new script into your existing index.php.

<!DOCTYPE html>
<html lang = "en">
        <head>
                <script src = "js/angular.js"></script>
                <script src = "js/app.js"></script>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
                <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
        </head>
<body ng-app = "myModule" ng-controller = "myController">
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://sourcecodester.com" >Sourcecodester</a>
                </div>
        </nav>
        <div class = "col-md-3"></div>
        <div class = "col-md-6 well">
                <h3 class = "text-primary">AngularJS CRUD OPERATION WITH PHP/MySQLI - Part 2</h3>
                <hr style = "border-top:1px dotted #ccc;">
                <form>
                        <div class = "form-inline">
                                <label>Firstname</label>
                                <input type = "text" class = "form-control" ng-model = "firstname" id = "firstname"/>
                                <label>Lastname</label>
                                <input type = "text" class = "form-control" ng-model = "lastname" id = "lastname"/>
                                <button type = "button" class = "btn btn-primary form-control" ng-show = "btnInsert" ng-click = "insertData()"><span class = "glyphicon glyphicon-save"></span> Submit</button>
                                <button type = "button" class = "btn btn-warning form-control" ng-show = "btnUpdate" ng-click = "updateData()"><span class = "glyphicon glyphicon-edit"></span> Update</button>
                                <br /><br />
                                <div ng-model = "message" ng-show = "msgBox" class = "{{messageStatus}}">{{message}}</div>
                        </div>
                </form>
                <br />
                <table class = "table table-responsive table-bordered alert-warning">
                        <thead>
                                <tr>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th></th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr ng-repeat = "member in members">
                                        <td>{{member.firstname}}</td>
                                        <td>{{member.lastname}}</td>
                                        <td><center><button type = "button" ng-click = "updateBtn(member.mem_id, member.firstname, member.lastname)" class = "btn btn-warning"><span class = "glyphicon glyphicon-edit"></span></button> <button type = "button" ng-click = "deleteData(member.mem_id);" class = "btn btn-danger"><span class = "glyphicon glyphicon-remove"></span></button></center></td>
                                </tr>
                        </tbody>
                </table>
        </div>
</body> 
</html>

Adding New AngularJS Directives In this section we will add some new directives that will make the delete and update works with the mark up language. To do that just copy the code below and paste inside the controller method.

$scope.btnInsert = true;
                                        
                                        $scope.updateData = function(mem_id){
                                                $scope.btnUpdate = false;
                                                $scope.btnInsert = true;
                                                $http.post("update.php", {mem_id: $scope.mem_id, firstname: $scope.firstname, lastname: $scope.lastname})
                                                .then(function(response){       
                                                        $scope.firstname = "";
                                                        $scope.lastname = "";
                                                        $scope.message = "Successfully Updated";
                                                        $scope.messageStatus = "alert alert-success";
                                                        $scope.msgBox = true;
                                                        $timeout(function(){
                                                                $scope.msgBox = false;
                                                        }, 1000);
                                                        $scope.selectData();
                                                });
                                        }
                                        
                                        $scope.updateBtn = function(mem_id, firstname, lastname){
                                                $scope.btnInsert = false;
                                                $scope.btnUpdate = true;
                                                $scope.firstname = firstname;
                                                $scope.lastname = lastname;
                                                $scope.mem_id = mem_id;
                                        }

Coding the Delete Function This code will delete the data when the user clicked the button within the row. Just copy/paste the code below then save it as 'delete.php'.

<?php
        require_once 'connect.php';
        $data = json_decode(file_get_contents("php://input"));
        $mem_id = $data->mem_id;
        $query = $conn->query("DELETE FROM `member` WHERE `mem_id` = $mem_id") or die(mysqli_error());
?>

Coding the Update Function This code will update the chosen data within the table row when clicked, and simultaneously display the data in the input text box. To make this function works, just simply copy/paste the code below then save it as "update.php"

<?php
        require_once 'connect.php';
        $data = json_decode(file_get_contents("php://input"));
        $mem_id = $data->mem_id;
        $firstname = $data->firstname;
        $lastname = $data->lastname;
        $conn->query("UPDATE `member` SET `firstname` = '$firstname', `lastname` = '$lastname' WHERE `mem_id` = $mem_id") or die(mysqli_error());
?>

There you have it we successfully completed the project. I hope you learn a lot from this tutorial, and also you can apply this to your on working project. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Comments

can u please give deleteData

can u please give deleteData(member.mem_id); function. Its is missing from source code.

Add new comment

Add new comment
154 views