angularjs การเพิ่ม และ ลบ ข้อมูล กับฐานข้อมูล mysql ตอนที่ 11

<form role="form" name="myForm">
  <div class="control-group" ng-class="{'has-error': myForm.name.$invalid && !myForm.name.$pristine}">
    <label class="control-label">Name</label>
    <input type="text" class="form-control" name="name" ng-model="data.name" required>
    <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="text-danger"> 
    Required 
    </span> 
  </div>
  <div class="control-group" ng-class="{'has-error': myForm.tel.$invalid && !myForm.tel.$pristine}">
    <label class="control-label">Tel</label>
    <input type="text" class="form-control" name="tel" ng-model="data.tel" number required>
    <span ng-show="myForm.tel.$error.required && !myForm.tel.$pristine" class="text-danger"> 
    Required 
    </span> 
  </div>  
  <div class="control-group">
  <label>Address</label>
  <textarea name="address" class="form-control" rows="3" 
  		ng-model="data.address"></textarea>
 </div>
  <br>
  <a href="#/" class="btn btn-default">Back</a>
  <button ng-disabled="myForm.$invalid" ng-click="submitForm(data)" class="btn btn-primary">Save</button>
  <button ng-show="data.id" class="btn btn-danger" ng-click="deleteData(data.id)">Delete</button>
</form>

<?php
include("../db/db_connect.php"); // เรียกใช้ไฟล์ ตั้งค่า และฟังก์ชั่น เกี่ยวกับฐานข้อมูล
$mysqli = connect(); // สร้าง ตัวแปร mysql instance สำหรับเรียกใช้งานฐานข้อมูล
// ส่วนแรก คือสำหรับแสดงผลข้อมูล
if(isset($_GET['viewFriend'])){  // ส่งตัวแปร GET ชื่อ viewFriend มากำหนดให้ทำงานในส่วนนี้
header("Content-type:application/json; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);   
$more_sql="";
if(isset($_GET['Id']) && $_GET['Id']!=""){ // รับค่า กรณี แสดงรายการเดียวที่เลือก ตาม Id
    $more_sql=" AND id='".$_GET['Id']."' ";
}
// เนื้อหาส่วนล่างถัดจากนี้ เป็นการเรียกใช้งาน คำสั่ง php ดึงข้อมูล
// มาเก็บในตัวแปร array แล้วนำไปสร้างเป็นรูปแบบ json object 
// เนื้อหาก่อนหน้ามีรายละเอียด ในที่นี้ไม่ขออธิบายเพิ่ม
$sql="SELECT * FROM tbl_myfriend WHERE 1 $more_sql ";
$result = $mysqli->query($sql);
while($rs=$result->fetch_object()){
	$json_data[]=array(
        "id"=>$rs->id,
		"name"=>$rs->name,
        "tel"=>$rs->tel,
		"address"=>$rs->address
	);	
}    
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";    
}else{
echo $json;
}    
    exit;
}
// ส่วนสำหรับการเพิ่มข้อมูล
if(isset($_GET['addFriend'])){ // ส่งตัวแปร GET ชื่อ addFriend มากำหนดให้ทำงานในส่วนนี้
    // จะเห็นว่า การส่งค่าแบบ post มา จะไม่ได้รับค่าแบบตรงอ้างอิง $_POST['xxx'] ได้เลย
    // แต่เป็นการไปอ่านค่าจากไฟล์ ที่ถูกเขียน ไว้ด้วย php อีกทีหนึ่ง
    $data = json_decode(file_get_contents("php://input")); // ดึงข้อมูลจากไฟล์ มาใส่ตัวแปร object ชื่อ $data
    $name=$mysqli->real_escape_string($data->name); // เอาค่ามาเก็บในตัวแปรอีกทีหนึ่ง
    $tel=$mysqli->real_escape_string($data->tel);
    $address=$mysqli->real_escape_string($data->address);
    // ชุดข้อมูลและฟิลด์ที่จะบันทึก อันนี้เป็นฟังก์ชั่นเฉพาะที่่เราใช้งาน
    // ใครจะเขียนแบบ mysqli ปกติก็ได้
    $data=array(
        "name"=>$name,
        "tel"=>$tel,
        "address"=>$address,
    );
    insert("tbl_myfriend",$data); // ฟังชั่นบันทึกข้อมูล ง่ายๆ ไม่กี่บรรทัด
    exit;
}
// สำหรับการลบข้อมูล
if(isset($_GET['deleteFriend'])){
    delete("tbl_myfriend"," id='".$_GET['Id']."' "); // ลบข้อมูลตามตัวแปร Id ที่ส่งเข้ามา
    exit;
}
?>

// สร้าง module ชื่อ app และ inject ngRoute เข้าไป หมายถึง เรียกใช้งาน ngRoute service
angular.module("app",["ngRoute"]) 
// กำหนดค่า url สำหรับเรียกไฟล์ php ด้านล่าง เป็นของ ที่ทดสอบ เปลี่ยนตามความเหมาะสม
// โดยเรียก path ให้ถูกต้อง
.value("urlData","http://localhost/ninenikc/demo/angularjs/ex7/data/model.php")
// กำหนด object service ชื่อ myFriend 
.factory("myFriend",["$http","urlData", // inject ค่า $http กับ urlData ไปใช้งาน
function($http,urlData){ // กำหนดตรงนี้ด้วย
    var factory = {}; // สร้างตัวแปร object

    // สร้างฟังก์ั่น ใน service myFriend ตัวนี้เป็น
    // ฟังก์ชั่น สำหรับแสดงข้อมูล มีการส่งค่า id ไปด้วย โดยจะเป็นค่าว่างก็ได้
    factory.viewFriend = function(Id){
        // ใช้ $http service ไปดึงข้อมูลมาแสด ส่งค่า get viewFriend กับ Id ที่เป็นตัวแปรไปด้วย
      return $http.get(urlData+"?viewFriend=&Id="+Id);  // คืนค่าข้อมูลกลับ
    };
 
    // สร้างฟังก์ั่น ใน service myFriend ตัวนี้เป็น
    // ฟังก์ชั่น บันทึกข้อมล ส่งค่าแบบ post ส่งค่า object ชุดข้อมูล objFriend
    factory.addFriend = function(objFriend){
         // ใช้ $http service ส่งค่าแบบ post 
         // และมีการส่งตัวแปรแบบ get ชื่อ addFriend ไปเป็นเงื่อนไขทำงานคำสั่ง เพิ่มข้อมูล
      return $http.post(urlData+"?addFriend",objFriend);
    };
    
     // สร้างฟังก์ั่น ใน service myFriend ตัวนี้เป็น
    // ฟังก์ชั่น ลบข้อมูล โดยส่งค่า Id เข้าไปทำการลบข้อมูล
    factory.deleteFriend = function(Id){
         // ใช้ $http service ส่งค่าแบบ get 
         // และมีการส่งตัวแปรแบบ get ชื่อ deleteFriend
        // กับ Id สำหรัลใย้ในการลบข้อมูล
      return $http.get(urlData+"?deleteFriend&Id="+Id);    
    };
    
    return factory; // คืนค่า object ไปให้ myFriend service
}])
// การ config ค่า provider service ในที่นี้เป็นการตั้งต่าการ
// ลิ้งค์ไปมาระหว่างไฟล์ ด้วย $routeProvider 
.config(function($routeProvider) {
  $routeProvider
    .when('/', {  // ถ้ามีค่าเท่ากับ  / 
      controller:'ListCtrl', // ให้กำหนด หรือสร้าง controller ชื่อ ListCtrl 
      templateUrl:'tpl/list1.html' // โดยดึงจากไฟล์ templage ชื่อ list.html
    })
    .when('/view/:Id', { // เหมือนด้านบน แค่เปลี่ยนคำ
      controller:'ViewCtrl',
      templateUrl:'tpl/view.html'
    })  
    .when('/edit/:Id', {
      controller:'EditCtrl',
      templateUrl:'tpl/detail1.html'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'tpl/detail1.html'
    })
    .otherwise({ // กรณีอื่นๆ ที่่ไม่เข้าเงื่อนไข
      redirectTo:'/' // ให้ไปที่ ค่า /
    });
})
// พอเราเปิดมาครั้งแรก $routeProvider จะเท่ากับ / ตาม config ด้านลน
// ทำให้มีการสร้าง ListCtrl controller ขึน เราจะมาใช้งานกันในส่วนหน้าแรกกัน ในส่วนนี้
// มีการ inject หรือใช้งาน $scope , $location (คล้าย window.location) และ myFriend service ที่เราสร้าง
.controller("ListCtrl",["$scope","$location","myFriend",
function($scope,$location,myFriend){ // กำหนดตรงนี้ด้วย แต่ไม่ต้องมี ""
    
    $scope.friends = {}; // กำหนด ตัวแปร object ที่เราจะไปเรียกใช้ ในหน้า list.html
    // พอแสดงหน้า list.html ให้ เรียกใช้งาน ฟังก์ชั่น ใน myFriend service ที่เราสร้าง
    myFriend.viewFriend('').success(function(result){ // ดึงข้อมูลสำเร็จ ส่งกลับมา
        $scope.friends = result;  // เอาค่าข้อมูลที่ได้ กำหนดให้กับ ตัวแปร object
    });

    
    $scope.predicate = "id";  // อันนี้กำหนดค่า สำหรับการเรียงข้อมูลเริ่มต้น ในตารางไฟล์ list.html
    // เรียงข้อมูลจาก id
 
    // กำหนดฟังก์ชัน ลบข้อมูล จากที่เรียกใช้ในหน้า template list.html
    $scope.deleteData = function(Id){ // ส่ง Id เข้ามา
        if(confirm("Confirm delete?")){ // ขึ้นแจ้งยืนยันการลบก่อน
            // ถ้ายืนยันการลบข้อมูลแล้ว ให้เรยกใช้งาน myFriend service ที่เราสร้าง เพื่อลบข้อมูล
            myFriend.deleteFriend(Id).success(function(){ // ถ้า ok ลบข้อมูล
               $location.path("#/"); // ลบแล้วให้รีเฟรส
            });     
        }
    };    
    
}])
// ทำให้มีการสร้าง CreateCtrl controller ขึ้น
// มีการ inject หรือใช้งาน $scope , $location (คล้าย window.location) และ myFriend service ที่เราสร้าง
.controller("CreateCtrl",["$scope","$location","myFriend",
function($scope,$location,myFriend){  // กำหนดตรงนี้ด้วย แต่ไม่ต้องมี ""
    // กำหนด ฟังก์ชั่น สำหรับรับค่า การ submit ฟอร์ม โดยส่ง object data เข้ามาด้วย
    $scope.submitForm = function(objFriend){
        if($scope.myForm.$valid){ // ตรวจสอบฟอร์ม หากพร้อมให้ทำงาน
            // เรียกใช้งาน ฟังก์ชั่น ใน myFriend service ที่เราสร้าง ชื่อ addFriend
            // โดยจะส่งข้อมูล object เข้าไป
            myFriend.addFriend(objFriend).success(function(){
                // หากทำการบันทึกข้อมูลสำเร็จ
                $scope.myForm.$setPristine(); // ล้างค่าข้อมูลในฟอร์ม พร้อมบันทึกใหม่
                $scope.data = null; // ให้ object ชื่อ data เป็นค่าว่าง รอรับข้อมูลใหม่
            });
        }
    };
    
}])
// controller หน้า index.html หลัก
.controller("appController",["$scope",
function($scope){

}]);