เนื้อหา angularjs กับ ฐานข้อมูล mysql จากที่ลองศึกษาดูเบื้องต้น
เนื้อหาค่อนข้างยาก และไม่เหมือนรูปแบบการใช้งาน ajax ของ jquery
ที่ใช้งานร่วมแบบ php
การส่งค่าและรับค่า ใน angularjs ส่วนใหญ่ จะเป็นไปในแบบ json object
การส่งข้อมูลแบบ form ด้วย วิธีส่งค่า แบบ post จะไม่เหมือนกับการใช้
งาน ajax ปกติ ที่ php สามารถรับค่าได้ด้วย ตัวแปร เช่น $_POST['xxx']
ดังนั้น จะขออธิบายแต่ละส่วนแบบแยก เนื้อหาจึงเป็นแบบต่อเนื่อง
ใครที่สนใจ ให้ศึกษาไปตามลำดับของเนื้อหา เพราะบางส่วนของโค้ด จะไม่ขอ
แนะนำที่มาที่ไป แต่สามารถย้อนดู บทความก่อนหน้าแทนได้ สำหรับใครที่คิดว่า
ยังไงต้อง รู้วิธีการให้ได้ เชิญติดตามต่อกันได้เลย ^_^
ต่อจากเกริ่มนำเบื้องต้น
angularjs เพิ่ม ลบ แก้ไข แสดง รายการ กับฐานข้อมูล mysql
https://www.ninenik.com/content.php?arti_id=532 via @ninenik
จากเนื้อหาก่อนหน้าตามลิ้งค์ด้านบน เราได้รู้จักโครงสร้างไฟล์ ที่จะใช้งาน และข้อมูล
ที่จำเป็นไปแล้ว เช่น เรามีฐานข้อมูล และตารางชื่อ tbl_myfriend
ในเนื้อหาตอนนี้ เราจะแสดงวิธีการ ลิสรายการ ค้นหา และเรียงข้อมูล โดยเบื้องต้น
ให้เพิ่มข้อมูลทดสอบลงในฐานข้อมูล tbl_myfriend ก่อน ซัก 5 รายการ
สามารถเพิ่มในหน้า phpmyadmin โดยใช้โค้ดคำสั่งนี้ได้
-- -- Table structure for table `tbl_myfriend` -- DROP TABLE IF EXISTS `tbl_myfriend`; CREATE TABLE IF NOT EXISTS `tbl_myfriend` ( `id` int(11) NOT NULL auto_increment, `name` varchar(100) collate utf8_unicode_ci NOT NULL, `tel` varchar(10) collate utf8_unicode_ci NOT NULL, `address` varchar(255) collate utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ; -- -- Dumping data for table `tbl_myfriend` -- INSERT INTO `tbl_myfriend` VALUES (1, 'demo1', '080000001', 'address1'); INSERT INTO `tbl_myfriend` VALUES (2, 'demo2', '080000002', 'address2'); INSERT INTO `tbl_myfriend` VALUES (3, 'demo3', '080000003', 'address3'); INSERT INTO `tbl_myfriend` VALUES (4, 'demo4', '080000004', 'address4'); INSERT INTO `tbl_myfriend` VALUES (5, 'demo5', '080000005', 'address5');
ไฟล์ที่เกี่ยวข้องกับเนื้อหาตอนนี้
มี
index.html
app.css ไฟล์นี้เพิ่มเข้ามา สำหรับ เพิ่ม css กำหนดเพิ่มเติมของเราเอง
tpl\list.html
data\model.php
db\db_connect.php ไฟล์น้ให้ไปตั้งค่าสำหรับเชื่อมต่อกับฐานข้อมูลเท่านั้น วิธีดูในตอนก่อนหน้านี้
1.ไฟล์ index.html
เหมือนเดิม ไม่มีอะไรเปลี่ยน เพิ่มเค่ app.css ตรงการใช้งาน css
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="app.css" />
<script src="app3.js"></script>
<title>My Learn AngularJs 7</title>
<style type="text/css">
</style>
</head>
<body ng-controller="appController">
<br>
<div class="container">
<h4>My Friends</h4>
<div ng-view></div>
</div>
</body>
</html>
2. ไฟล์ app.css
สำหรับกำหนด css ที่ต้องการใช้งานเพิ่มเติม
/*สัญลักษณ์การเรียง แบบกลับหัว*/
.caret-reversed{
border-top-width: 0;
border-bottom: 4px solid #000000;
}
/*เปลี่ยนเมาส์เป้นรูปมือ เมื่อใช้ css ตัวนี้*/
.css-order{
cursor: pointer;
}
3. ไฟล์ list.html
ไฟล์นี้อยู่ใน โฟลเดอร์ tpl สำหรับ
<input type="text" class="form-control " ng-model="search" placeholder="Search">
<br>
<table class="table table-striped">
<thead>
<tr class="active">
<th width="50" class="css-order text-center" ng-click="predicate = 'id'; reverse=!reverse">#
<span class="caret" ng-show="predicate=='id'" ng-class="{'caret-reversed':predicate=='id' && !reverse}"></span>
</th>
<th width="40%" class="css-order" ng-click="predicate = 'name'; reverse=!reverse">Name
<span class="caret" ng-show="predicate=='name'" ng-class="{'caret-reversed':(predicate=='name' && !reverse)}"></span>
</th>
<th class="css-order" ng-click="predicate = 'tel'; reverse=!reverse">Tel
<span class="caret" ng-show="predicate=='tel'" ng-class="{'caret-reversed':predicate=='tel' && !reverse}"></span>
</th>
<th width="50" >
</th>
<th width="50" class="text-center">
<a href="#/new"><i class="glyphicon glyphicon-plus"></i></a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in friends | filter:search | orderBy:predicate:reverse ">
<td class="text-center">{{$index+1}}</td>
<td><a href="#/view/{{data.id}}">{{data.name}}</a></td>
<td>{{data.tel}}</td>
<td class="text-center">
<a href="#/edit/{{data.id}}"><i class="glyphicon glyphicon-pencil"></i></a>
</td>
<td class="text-center">
<a ng-href="#/" ng-click="deleteData(data.id)"><i class="glyphicon glyphicon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
ไฟล์นี้ จะขออธิบาย เฉพาะที่ส่วนที่เป็น angularjs directive มีอะไรบ้างที่เราต้องรู้
ให้ไล่ดูจากโค้ดในไฟล์
ng-model="search"
ค่าที่เรากรอกใน input text สำหรับการค้นหา จะถูกกำหนดค่าไว้ในตัวแปร search
ng-repeat="data in friends | filter:search | orderBy:predicate:reverse "
แยกพิจารณา
ng-repeat="data in friends
วนลูป อ้างอิงใช้ชื่อ data เรียกใช้ค่าจาก object friends
filter:search
ข้อมูลที่แสดงในตาราง ให้สามารถค้นหาจากค่าของตัวแปร search
orderBy:predicate:reverse
ให้เรียงข้อมูลในตาราง ตาม ตัวแปร predicate คือ id,name,tel แล้วแต่กำหนด โดย
เรียงจากมากไปน้อย หรือน้อยไปมาก ขึ้นกับค่า reverse ว่า true หรือ false
ตัวอย่างการกำหนดแบบตายตัว
orderBy:'id' เรียงจากตัวแปร id น้อยไปมาก
orderBy:'id':true เรียงจากตัวแปร id มากไปน้อย (เพราะ reverse เป็น true)
orderBy:'id':true สามารถใช้ orderBy:'-id' แทนได้มีค่าเท่ากัน แค่ใช้เครื่องหมายลบ นำหน้า
ng-click="predicate = 'id'; reverse=!reverse"
ถ้าคลิกที่หัวข้อ คอลัมน์นี้ กำหนดค่า ตัวแปร
predicate = 'id' สำหรับการเรียงข้อมูลให้เรียงตาม id
reverse=!reverse หมายถึง ถ้าคลิก แล้วจากค่า true ก็เป็น false จากค่า false ก็เป็น true
ถ้าค่า reverse เป็น true แสดงว่า เรียงจากมากไปน้อย
ng-show="predicate=='id'"
แสดง สัญลักษณ์ การเรียงข้อมูล ตามค่าตัวแปร predicate ถ้าเป็น id ก็ให้แสดงสัญลักษณ์นี้
ng-class="{'caret-reversed':predicate=='id' && !reverse}"
แสดง สัญลักษณ์ การเรียงข้อมูล แบบน้อยไปมากหรือมากไปน้อย ด้วย การกำหนด css class
ตามเงื่อนไข เช่น
'caret-reversed':predicate=='id' && !reverse
คือ ใช้ css class ชื่อ caret-reversed ถ้ามีการเรียงข้อมูลจาก id (predicate=='id') และ ค่า
การเรียงจากมากไปน้อยเป็น false มีค่าตรงช้ามเป็น true
อธิบายไปมา น่าจะงง กันพอสมควร
ขอเพิ่มเติม แบบง่าย
caret จะเป็น ลูกศรชี้ลง เรียงจากมากไปน้อย
caret-reversed จะเป็นลูกศรชี้ขึ้น เรียงจากน้อยไปมาก
!reverse ตรงข้ามค่า false เป็น true
ดังนั้น
{'caret-reversed':predicate=='id' && !reverse}
{จะใช้ 'caret-reversed น้อยไปมาก ':เมื่อ predicate=='id' และ !reverse เท่ากับ true}
เงื่อนไขพวกนี้ ค่อนข้างจะสลับซับซ้อน หากไม่อยากปวดหัว ว่างๆ ค่อยกลับมาอ่านฝึกสมองได้
หรือ ลองปรับใช้แล้วดูการเปลี่ยนแปลง เพื่อเป็นแนวทางการศึกษา ก็ได้เหมือนกัน
{{data.tel}}
อันนี้การแสดงข้อมูล นี้จะพอเข้าใจแล้ว รูปแบบส่วนอื่นๆ ที่คล้ายๆ ขอข้าม ไม่อธิบาย
href="#/view/{{data.id}}"
กำหนดรุปแบบการลิ้งค์ไปมาระหว่าง template
ng-click="deleteData(data.id)"
คลิกแล้ว เรียกใช้งานฟังก์ชั่น deleteData (ที่เราจะสร้างขึ้นทีหลัง)
โดยส่งข้อมูล data.id เข้าไปในฟังก์ชั่น
อันนี้ให้เข้าใจรูปแบบการใช้งาน คร่าว ๆ
4. มาที่ไฟล์ app.js
ไฟล์นี้เราจะมาทำการ ไปดึงข้อมูลจากฐานข้อมูลมาแสดง แล้วส่งค่าไป
ที่ไฟล์ list.html ด้านบน
คำอธิบายเขียนไว้ในโค้ด
// สร้าง 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); // คืนค่าข้อมูลกลับ
};
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
}])
// controller หน้า index.html หลัก
.controller("appController",["$scope",
function($scope){
}]);
5. ไฟล์ model.php
ส่วนนี้จะเป็นการไปดึงข้อมูลจากฐานข้อมูล ตามคำสั่งในไฟล์ app.js
คำอธิบายแสดงในโค้ด
<?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;
}
?>
มาดูตัวอย่างผลลัพธ์ (ในที่นี้สมมติให้เห็นภาพ)
ในตัวอย่าง เราสามารถ ค้นข้อมูล เรียงข้อมูล แสดงลิสรายการ เป็นต้น
ลองทดสอบกดดูได้ แต่ยังไม่สมบูรณ์ รอต่อในตอนต่อไป
ยากหน่อย ลองศึกษาไปพร้อมกัน สำหรับคนที่สนใจจริงๆ
ตอนหน้า รอติดตาม
เนื้อหาที่เกี่ยวข้อง