[AngularJS] CRUD[4] - SELECT 기능 구현하기

AngularJS - SELECT CODE

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

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

 

CRUD의 SELECT 부분이다.

 

Model - select_insert.php

 select에서는 따로 query를 호출 할때 넘겨줄 변수가 없기 때문에 따로 controller에서 넘겨받은 변수는 없으며, 그냥 select 쿼리 호출만 하는 것을 볼 수 있다.

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

$sql="SELECT * FROM tblApplicantForms";

$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

controller에서 list 배열에 모델에서 불러온 데이터가 저장이 되어있는데, 이 list를 controller로부터 ng-repeat 기능을 이용하여 form 변수에 저장시켜주어 {{form.FormID}}와 같은 형태로 클라이언트에게 보일 수 있도록 해준다.

 <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

 form_select.php로부터 나온 데이터를 result에 넘겨준후 다시 list에 저장시켜준다.

    $scope.list=[];


//================Load Form=================================
    $scope.loadForms = function loadForms() {
        $http({
            method: "POST",
            url:"form_select.php",
            headers:{"Content-Type":"application/x-www-form-urlencoded"}
        }).then(function(result){
            $scope.list=result.data;
        },
        function(){
            alert("Error getting records");
        });
    };

 

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