[AngularJS] CRUD[2] - DELETE 기능 구현하기

AngularJS - DELETE CODE

GCSU 교환학생 활동을 하면서 SOFTWARE ENGINEERING 수업을 듣게 되었는데, 그 수업에서 Front-end로 AngularJS를 사용한다고 하여 AngularJS 공부를 하게되었다. CRUD기능을 사용해보기 위해 FORM LETTER를 만들어보았다.

모든 웹에서는 MVC pattern(Model, View, Controller)을 가장 중요시하기 때문에 차례대로 이 패턴의 해당하는 코드들을 보여드리도록 하겠습니다.

 CRUD의 DELETE 부분이다.

 

Model - form_delete.php

database에서 DELETE 쿼리문을 호출해준다.

<?php
require_once './dbcontroller.php';
$conn = new DBController();

$formID = $_POST['formID'];
$formName = $_POST['formName'];

echo("$formName");
$sql="DELETE FROM tblApplicantForms WHERE FormID='$formID'";

$result = $conn->runSelectQuery($sql);
$data = array();

   if ($result->num_rows > 0) {

        while ($row = $result->fetch_assoc()) {

            $data[] = $row;
        }
    }

echo json_encode($data);
?>

 

 

View - newletter.view.html

button에 ng-click기능을 통해 controller에 있는 deleteForms함수에 form을 매개변수로 호출함을 볼 수 있다.

 <div ng-app="myApp" ng-controller="cntrl">

        <div class="col-10" style="float:left">
            <input type="button" value="Load" class="btn btn-success" ng-click="loadForms()">


            <table class="tb1_1 table table-bordered table-striped">

                <tr>
                    <th>FormId</th>
                    <th>FormName</th>
                    <th>FormText</th>
                    <th>Function</th>
                </tr>

                <tr ng-repeat="form in list">

                    <td class="td1">{{form.FormID}}</td>
                    <td>
                        <input class="td2" name="formName" type="text" ng-model="form.FormName" required/>
                    </td>
                    <td>
                        <input class="td3" name="formText" type="text" ng-model="form.FormText" required/>
                    </td>
                    <td>
                        <button type="submit" class="btn btn-success" ng-click="deleteForms(form)">Delete </button>
                        <button type="submit" class="btn btn-success" ng-click="updateForms(form)">Edit</button>
                    </td>
                </tr>

            </table>
        </div>

 

 

Controller - forms.controller.js

view에서 가져온 form에서 formID만 꺼내 post에 저장시킨 후 php로 전달함을 볼 수 있다. 또한 php에서 쿼리를 호출 한 결과가 result에 저장됨을 알 수 있다.

//================Delete Form=================================
    $scope.deleteForms = function deleteForms(form) {
   
        var post = {};

        post.formID = form.FormID;
       
    
        $http({
            method: "POST",
            url:"form_delete.php",
            data: Object.toparams(post),
            headers:{"Content-Type":"application/x-www-form-urlencoded"}
        }).then(function(result){
            $scope.loadForms();
        },
        function(){
            alert("Error deleting records");
        });
    };

 

전체코드를 보고 싶다거나 dbcontroller.php 코드를 확인하고 싶으신 분은 프로젝트 카데고리의 AgualrJS formletter 글을 들어가셔서 확인해주시기 바랄께요.