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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
angularjs ฐานข้อมูล mysql เพิ่ม ลบ แก้ไข

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

ดูแล้ว 14,469 ครั้ง




ในเนื้อหาตอนนี้ จะมาดูเรื่องของการเพิ่มข้อมูล และการลบข้อมูล 
กับฐานข้อมูล mysql ด้วย angularjs
 
อ่านเนื้อหาก่อนหน้าได้ที่
angularjs ลิสรายการ ค้นหา และเรียงข้อมูล กับฐานข้อมูล mysql ตอนที่ 10 
 
ไฟล์ที่เราจะมาดูในตอนนี้มี
 
tpl\detail.html ไฟล์ template สำหรับ เพิ่มและแก้ไขข้อมูล
data\model.php สำหรับ เพิ่มข้อมูลในฐานข้อมูล
app.js สำหรับกำหนดคำสั่ง เพิ่มเติม
 
1.ไฟล์ detail.html 
มาดูโครงสร้างของไฟล์ 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
 
name="myForm"
form สำหรับบันทึกข้อมูล ที่เราต้องการใช้งาน ต้องมีชื่อ form สำหรับอ้างอิง
ในที่นี้ชื่อ myForm
 
ng-model="data.name"
กำหนดค่าให้กับ input textarea ตามข้อมูลให้ตรงกัน data คือชื่อสำหรับอ้างอิงตัวแปร object
 
สำหรับการกำหนด css ต่างๆ ในการตรวจสอบ form ไม่ขออธิบาย มีเนื้อหาก่อนหน้าแล้ว
สามารถกลับไปอ่านเพิ่มเติมได้
 
ตรวจสอบ form ด้วย property formcontroller  ใน angularjs ตอนที่ 8 
 
ng-click="submitForm(data)" 
เมื่อคลิก ส่งข้อมูลในฟอร์ม  ไปในฟังก์ชั่น submitForm(data)  data คือข้อมูลแบบ object
ที่จะถูกส่งเข้าไปบันทึก
 
ng-show="data.id"
ปุ่มลบนี้ จะแสดงถ้ามีการส่งค่า id รายการที่ต้องการ มาด้วย
 
 ng-click="deleteData(data.id)"
ปุ่มลบนี้ ถ้าคลิก จะส่ง id ค่ารายการที่ต้องการลบ ไปในฟังก์ชั่น deleteData()
 
2. ไฟล์ model.php
ไฟล์นี้จะมีเพิ่มเข้ามาสองส่วน คือ การเพิ่มข้อมูล และการ ลบข้อมูล
คำอธิบายแสดงในโค้ด เนื้อหาในโค้ด เป็นภาคต่อ จะมีโค้ดเก่าจากตอนก่อนหน้า
แสดงอยู่ก่อนแล้ว
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?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;
}
?>
 
3. ไฟล์ app.js
ไฟล์คำสั่งการทำงาน จะมีเพิ่มเติมจากโค้ดเดิมคือ
ใน myFriend service จะมีการสร้างฟังก์ชั่น การเพิมข้อมูล และการลบข้อมูล
ใน CreateCtrl controller จะมีการสร้างฟังก์ชั่น ส่งค่าการเพิ่มข้อมูล
ใน ListCtrl controller จะมีการสร้างฟังก์ชั่น ส่งค่าการลบข้อมูล
คำอธิบายแสดงในโค้ด
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// สร้าง 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){
 
}]);
 
ดูผลลัพธ์ 
ตัวอย่างนี้ จะเป็นการจำลองการทำงาน ให้ทดสอบเพิ่มและลบช้อมูลดูได้
 
 
 
ติดตามเนื้อหาตอนหน้า ตอนสุดท้ายเกี่ยวกับการจัดการฐานข้อมูลได้ 


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







เนื้อหาที่เกี่ยวข้อง



Tags:: mysql ฐานข้อมูล angularjs เพิ่ม ลบ แก้ไข







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ