[AngularJS] CRUD[3] - UPDATE 기능 구현하기

AngularJS - UPDATE CODE

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

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

 

CRUD의 UPDATE 부분이다.

 

Model - form_update.php

 먼저 controller에서 가져온 formID, formName과 formText를 php변수에 저장시킨 후, database에 update 쿼리를 호출함을 알 수 있다.

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

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

$sql="UPDATE tblApplicantForms
     SET FormName='$formName', FormText='$formText' 
     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에서 controller에 있는 updateForms() 함수에 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, FormName과 FormText를 model에 넘겨주기 위해 다시 post에 저장시켜주고 post를 form_update.php에 넘겨준다. 또한 php에서 쿼리를 호출 한 결과가 result에 저장됨을 알 수 있다.

//===============Update Form=================================
     $scope.updateForms = function updateForms(form) {
   
        var post = {};

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

 

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