angularjs การแสดงข้อมูล และแก้ไขข้อมูล กับฐานข้อมูล mysql ตอนที่ 12

<table class="table" ng-repeat="data in friends">
    <tr class="active">
        <th colspan="2">Friend Detail</th>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Name: </td>
        <td>{{data.name}}</td>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Tel: </td>
        <td>{{data.tel}}</td>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Address: </td>
        <td>{{data.address}}</td>
    </tr>
</table>
<br>
<a href="#/" class="btn btn-default">Back</a>

// เมื่อมาที่หน้า แสดงข้อมูล จะมีการสร้าง ViewCtrl controller จากค่าการ config ด้านบน
// เมื่อมีการคลิก เข้ามาหน้าแสดงข้อมูล จะมีการส่งค่า Id ของข้อมูลเข้ามาด้วย
// inject หรือเรียกใช้ $scope $location $routeParams และก็ myFriend service ที่เราสร้าง
.controller("ViewCtrl",["$scope","$location","$routeParams","myFriend",
function($scope,$location,$routeParams,myFriend){ // กำหนดตรงนี้ด้วย แต่ไม่ต้องมี ""
    // กำหนดตัวแปร object สำหรับไว้ส่งค่าไปแสดงในหน้า view.html
    $scope.friends = {};
    // เรียกใช้งาน ฟังก์ชั่น viewFriend โดยส่งค่า Id ของข้อมูลไปด้วย
    // ฟังก์ชั่นนี้ เราไม่ต้องสร้างเพิ่ม ใช้ตัวเดียวกันกับ ตอนลิสรายการ แต่กรณีนี้มีการส่ง Id ไปด้วย
    myFriend.viewFriend($routeParams.Id).success(function(result){
        $scope.friends = result;  // เมื่อมีกาาคืนค่า ก็ให้เขาข้อมูลที่ได้มาไว้ในตัวแปร object
    });
}])

<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>

// สร้าง 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 ตัวนี้เป็นฟังก์ชั่น
    // สำหรับการอัพเดทข้อมูล มีการส่งค่าข้อมูลในฟอร์ม และ Id ของข้อมูลที่จะแก้ไขเข้ามาด้วย
    factory.updateFriend = function(objFriend,Id){
    // ใช้ http service ส่งค่าข้อมูลไปทำการแก้ไข และมีการส่งค่า get updateFriend กับ Id ที่เป็นตัวแปรไปด้วย
      return $http.post(urlData+"?updateFriend&Id="+Id,objFriend);
    };        
    
    // สร้างฟังก์ั่น ใน 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/list.html' // โดยดึงจากไฟล์ templage ชื่อ list.html
    })
    .when('/view/:Id', { // เหมือนด้านบน แค่เปลี่ยนคำ
      controller:'ViewCtrl',
      templateUrl:'tpl/view.html'
    })  
    .when('/edit/:Id', {
      controller:'EditCtrl',
      templateUrl:'tpl/detail.html'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'tpl/detail.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 เป็นค่าว่าง รอรับข้อมูลใหม่
            });
        }
    };
    
}])
// เมื่อมาที่หน้า แสดงข้อมูล จะมีการสร้าง ViewCtrl controller จากค่าการ config ด้านบน
// เมื่อมีการคลิก เข้ามาหน้าแสดงข้อมูล จะมีการส่งค่า Id ของข้อมูลเข้ามาด้วย
// inject หรือเรียกใช้ $scope $location $routeParams และก็ myFriend service ที่เราสร้าง
.controller("ViewCtrl",["$scope","$location","$routeParams","myFriend",
function($scope,$location,$routeParams,myFriend){ // กำหนดตรงนี้ด้วย แต่ไม่ต้องมี ""
    // กำหนดตัวแปร object สำหรับไว้ส่งค่าไปแสดงในหน้า view.html
    $scope.friends = {};
    // เรียกใช้งาน ฟังก์ชั่น viewFriend โดยส่งค่า Id ของข้อมูลไปด้วย
    // ฟังก์ชั่นนี้ เราไม่ต้องสร้างเพิ่ม ใช้ตัวเดียวกันกับ ตอนลิสรายการ แต่กรณีนี้มีการส่ง Id ไปด้วย
    myFriend.viewFriend($routeParams.Id).success(function(result){
        $scope.friends = result;  // เมื่อมีกาาคืนค่า ก็ให้เขาข้อมูลที่ได้มาไว้ในตัวแปร object
    });
}])
// เมื่อมาที่หน้า แก้ไข จะมีการสร้าง EditCtrl controller จากค่าการ config ด้านบน
// เมื่อมีการคลิก เข้ามาหน้าแก้ไขข้อมูล จะมีการส่งค่า Id ของข้อมูลเข้ามาด้วย
// หรือเรียกใช้ $scope $location $routeParams และก็ myFriend service ที่เราสร้าง
.controller("EditCtrl",["$scope","$location","$routeParams","myFriend",
function($scope,$location,$routeParams,myFriend){ // กำหนดตรงนี้ด้วย แต่ไม่ต้องมี ""
    // กำหนดตัวแปร object เพื่อใช้งานในหน้าแก้ไข ชื่อต้องเหมือนกับชื่อ instance อ้างอิงที่เราใช้งาน
    $scope.data = {};
   // เรียกใช้งาน ฟังก์ชั่น viewFriend โดยส่งค่า Id ของข้อมูลไปด้วย
    // ฟังก์ชั่นนี้ เราไม่ต้องสร้างเพิ่ม ใช้ตัวเดียวกันกับ ตอนลิสรายการ แต่กรณีนี้มีการส่ง Id ไปด้วย    
    myFriend.viewFriend($routeParams.Id).success(function(result){
        // เนื่องจากหน้า แก้ไขเราใช้ไฟล์ เดียวกับตอนเพิ่มข้อมูล
        // ดังนั้นการส่งค่ากลับไปแบบ ใน ViewCtrl จะทำไม่ได้ เราจะใช้วิธี
        // ส่งค่าแบบกำหนดค่า object แต่ละตัวแทนเอา โดยผลลัพธ์ของข้อมูล
        // ที่ส่งกลับมาจะมี index id = 0 การเรียกใช้จึงเป็น result[0].id แบบนี้เป็นต้น
        $scope.data.id = result[0].id;
        $scope.data.name = result[0].name;
        $scope.data.tel = result[0].tel;
        $scope.data.address = result[0].address;
        // เมื่อรับค่าจากการไปดึงข้อมูลส่วนที่ต้องการมาแก้ไข แล้ว ตัวแปรเหล่านี้
        // ก็จะไปแสดงในหน้าแก้ไข
        
    });

//    สร้างฟังก์ชั่น รับค่าการบันทึกข้อมูล
//    เมื่อคลิกที่ปุ่ม save โดยใช้ฟังก์ชั่น submitForm โดยส่งค่า object instance ข้อมูลฟอร์มเข้ามาด้วย
    $scope.submitForm = function(objFriend){
        if($scope.myForm.$valid){  // ตรวจสอบข้อมูลฟอร์ม ถูกต้องหรือไม่
            // เรียกใช้งานฟังก์ชั่น updateFriend ใน myFriend service เพื่ออัพเดทข้อมูล
            // โดยจะมีการส่งค่า object ข้อมูล และ  Id ของข้อมูล เพื่ออ้างอิง ไปทำการแก้ไข ด้วย
            myFriend.updateFriend(objFriend,$routeParams.Id).success(function(){
                // เมื่อแก้ไขข้อมูลสำหรับ ล้างค่าตัวแปร object ที่เราสร้าง
                $scope.data = null;
//                ลิ้งค์ไปหน้า รายการที่เราแก้ไข เพื่อดูข้อมูลว่า แก้ไขเรียบร้อยถูกต้องไหม
               $location.path("/view/"+$routeParams.Id);                  
            });
        }
    };    

    // ในหน้าแก้ไขข้อมูล จะพบว่า เรามีปุ่มลบ ปุ่มนี้จะแสดงเมื่อมีการแก้ไขข้อมูล หรือมีการส่งค่า
    // Id ข้อมูลที่ต้องการแก้ไข เข้าไปด้วย การลบข้อมูลไม่มีอะไร เหมือนกับ การลข้อมูลในหน้า
    // ลิสรายการ ตามโค้ดด้านบน ที่เคยอธิบายแล้ว บรรทัดส่วนนี้ขอไม่่อธิบายเพิ่ม
    $scope.deleteData = function(Id){
        if(confirm("Confirm delete?")){
            myFriend.deleteFriend(Id).success(function(){
                $scope.data = null;
               $location.path("#/");
            });     
        }
    };    

    
}])
// controller หน้า index.html หลัก
.controller("appController",["$scope",
function($scope){

}]);

<?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;
}
// สำหรับการแก้ไขข้อมูล
if(isset($_GET['updateFriend'])){ // ทำงานในส่วนนี้เมื่อมีค่าค่า get updateFriend และ Id เข้ามา
    // อ่านค่าไฟล์ที่ถูกเขียนไว้ด้วย php แล้วนำค่าที่ได้มาเก็บในตัวแปร php object ชื่อ $data
    $data = json_decode(file_get_contents("php://input"));
    $name=$mysqli->real_escape_string($data->name); // เอาค่ามาเก็บในตัวแปรอีกทีหนึ่ง
    $tel=$mysqli->real_escape_string($data->tel);
    $address=$mysqli->real_escape_string($data->address);
    $data=array(
        "name"=>$name,
        "tel"=>$tel,
        "address"=>$address,
    );
    update("tbl_myfriend",$data," id='".$_GET['Id']."' "); // ฟังก์ชั่นแก้ไขข้อมูล
    exit;
}
?>