[AngularJS] CRUD[1] - INSERT 기능 구현하기

AngularJS - INSERT CODE

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

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

먼저 CRUD의 INSERT 부분이다.

Model - form_insert.php

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

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


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

$sql="INSERT INTO tblApplicantForms VALUES ('$formID', '$formName', '$formText')";

$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

input으로 받은 formName과 formText를 button에서 insertFroms 함수를 호출함과 동시에 넘겨줌을 코드에서 볼 수 있다.

<form class="add_wrap">
            <table class="table table-striped  tb4">
                <tr>
                    <th>
                        <label class="lb" for="formName">Name </label>
                    </th>
                    <th>
                        <label class="lb" for="formText">Text</label>
                    </th>
                </tr>
                <tr>
                    <td>
                        <input name="formName" type="text" ng-model="formName" required/>
                    </td>
                    <td>
                        <textarea rows="2" cols='80' name="formText" type="text" ng-model="formText" required></textarea>
                    </td>
                    <td>
                        <button type="submit" class="btn btn-primary" ng-click="insertForms(formName,formText)">ADD</button>
                    </td>
                </tr>

                <table>
        </form> 

Controller - forms.controller.js

 view에서 넘겨받은 formName과 formText를 다시 post에 저장시킨 후 form_insert.php에 넘겨 줌을 볼 수 있다. 또한 php에서 쿼리를 호출 한 결과가 result에 저장됨을 알 수 있다.

 //===============Insert Form=================================
     $scope.insertForms = function insertForms(formName,formText) {

        var post = {};

        console.log(formName);
        post.formName = formName;
        post.formText = formText;

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

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