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

01 September 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

แก้ไข mysql ฐานข้อมูล angularjs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ แก้ไข mysql ฐานข้อมูล angularjs

ดูแล้ว 13,797 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

เนื้อหาตอนนี้ น่าจะเป็นตอนสุดท้าย ของชุดการศึกษาเกี่ยบกับการ

เพิ่ม ลบ แก้ไข ลิสรายการ จัดเรียงรายการ และการแสดงข้อมูลกับฐาน

ข้อมูล mysql

เนื้อหาต่อเนื่องจากตอนที่แล้ว

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

https://www.ninenik.com/content.php?arti_id=534 via @ninenik

ไฟล์ที่เราจะมาดูในตอนนี้มี

tpl\view.html ไฟล์ template สำหรับ แสดงข้อมูลตามรายการที่เลือก

tpl\detail.html ไฟล์ template สำหรับ เพิ่มและแก้ไขข้อมูล

data\model.php สำหรับ ดึงข้อมูลมาแสดง และการอัดเดทข้อมูล

app.js สำหรับกำหนดคำสั่ง เพิ่มเติม

1.ไฟล์ view.html

มาดูโครงสร้างของไฟล์

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

ng-repeat="data in friends"

สำหรับ กำหนดการแสดงข้อมูล ถ้ามีหลายรายการก็จะวนลูป แสดง

แต่ถ้าหากมีรายการเดียวก็วนลูปครั้งเดียว

โดย data คือ ชื่อ instance อ้างอิง ที่เรากำหนดไว้รับค่าจากตัวแปร object ชื่อ friends

ที่อยู่ใน ViewCtrl controller

การแสดงข้อมูล โดยใช้ ชื่อ instance ที่เรากำหนดเป็น object เรียกข้อมูลมาแสดง

ตามชื่อ อันนี้น่าจะพอเข้าใจแล้ว

หน้าแสดงข้อมูลตามรายการที่เลือก ไม่ค่อยมีอะไร เป็นเพียงการรับค่ามาแสงด

ไปดูต่อตรงไฟล์ app.js ที่ใช้ในการรับค่ามาแสดง

2. ไฟล์ app.js บางส่วน

ส่วนที่มีการเพิ่ม ViewCtrl controller เข้ามา

คำอธิบายแสดงในโค้ด

ขอเอาโค้ดเฉพาะส่วนที่เป็นการกำหนดการใช้งาน ใน ViewCtrl มาแสดง เดี๋ยวส่วนเต็ม

ทั้งหมดจะแสดงอังครั้งด้านล่าง ตอนอัพเดทข้อมูล

// เมื่อมาที่หน้า แสดงข้อมูล จะมีการสร้าง 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
    });
}])

3. ไฟล์ detail.html

ที่จร้งไฟล์นี้เป็นตัวเดียวกับกับที่ใช้ในการเพิ่มช้อมูล หรือใครจะใช้ไฟล์เป็นชื่ออื่นแทน

ก็ได้จะได้ไม่สับสน แต่ที่นี้จะใช้ไฟล์เดียวกัน โค้ดขอยกมาแลยจากบทความเก่า

ไม่ต้องแก้ไขอะไร

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

4. ไฟล์ app.js

ยกโค้ดมาเต็มๆ รวมโค้ดที่แสดงรายการด้านบนด้วย

ในโค้ดนี้ จะมีการสร้าง ฟังก์ชั่น ใน myFriend service ชื่อ updateFriend

โดยจะมีการ ส่งค่าข้อมูลจากฟอร์ม และ Id ของเข้อมูลที่ต้องการแก้ไข

เข้ามาด้วย

ส่วนใน EditCtrl controller จะมีการใช้งาน ฟังก์ชั่น

การแสดงข้อมูลเก่าที่จะแก้ไข

การส่งข้อมลไปแก้ไข

และฟังก์ชั่นการลบข้อมูล

รายละเอียดอธิบายในโค้ด

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

// สร้าง 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){
 
}]);

5. ไฟล์ model.php

ไฟล์ส่วนนี้จะเป็นส่วนสุดท้าย คือการแก้ไขข้อมูล รูปแบบจะเหมือนกับ

ในตอนการบันทึกข้อมูล คือ รับค่าโดยการไปอ่านค่าจากไฟล์ php ที่บันทึก

ไว้ มาเก็บในตัวแปร php object แล้ว ค่อยนำค่านี้ไปบันทึก แก้ไขข้อมูลอีกที

คำอธิบายแสดงในโค้ด ดูใน่ส่วนของ การแก้ไขข้อมูล

<?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;
}
?>

ตัวอย่าง ทดสอบเพิ่ม ลบ แก้ไข แสดงข้อมูล ค้าหาข้อมูลตามโค้ดด้านล่างดูได้

เป็นอันจบเนื้อหาในส่วนนี้ มีเนื้อหา หรือรายละเอียดตอนหน้ายังไง

จะทยอยมาอัพเดทบทความ แบ่งปันกัน รอติดตาม

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ