วันอังคารที่ 6 มกราคม พ.ศ. 2558

AngularJS HttpRequest

AngularJS HttpRequest เป็นการนำข้อมูลจาก Server มาแสดง โดยจะต้องมี Service ของ AngularJS นั่นคือ $http เพื่ออ่านข้อมูลที่ได้รับมาจาก Server ข้อมูลที่อ่านจะต้องถูก encode ด้วย JSON 

 เริ่มต้น

  1. สร้าง Database ที่ชื่อ mobile และสร้าง Table ชื่อ Customer ประกอบด้วย field 2 ตัว คือ first_name และ last_name
  2. สร้างไฟล์เพื่อเชื่อมต่อกับฐานข้อมูลแยกต่างหากเพื่อความสะดวกในการใช้งาน
  3. สร้างไฟล์ ชื่อ customer.php เพื่อ Query ข้อมูลจาก Database 
  4. สร้างไฟล์ ชื่อ index.php เพื่อนำข้อมูลที่ได้จาก Database มาแสดงผล
dbcon.php


 <?php

 date_default_timezone_set("Asia/Bangkok");
error_reporting(E_ALL ^ E_NOTICE);
$objConnect = mysql_connect("localhost","root","")or  die("Database ERROR".mysql_error());
$str_dbname = "mobile";

 mysql_select_db($str_dbname);

 $cs1 = "SET character_set_results=utf8";
mysql_query($cs1) or die('Error query: ' . mysql_error());

 $cs2 = "SET character_set_client = utf8";
mysql_query($cs2) or die('Error query: ' . mysql_error());

 $cs3 = "SET character_set_connection = utf8";
mysql_query($cs3) or die('Error query: ' . mysql_error());

 ?>
customer.php

 <?php

 include('dbcon.php');

 $sql1="SELECT first_name,last_name FROM customer";
$query1=mysql_query($sql1);

 while($rs1=mysql_fetch_assoc($query1)){
$result[]=$rs1;
}

 print(json_encode($result));

 ?>

 ผลลัพธ์

 [{"first_name":"Somchai","last_name":"Jaidee"},{"first_name":"Mana","last_name":"Mawai"}]

อธิบายในส่วน customer.php

   ทำการ Select ข้อมูล จากตาราง customer โดย mysql_fetch_assoc จะทำการดึงข้อมูลแต่ละ record มาเก็บไว้ใน array ซึ่งข้อมูลจะถูกดึงมาในรูปแบบของ key และ value จากนั้นทำการ encode ให้เห็น JSON ด้วย json_endode
index.php

 <!DOCTYPE html>
<html>

 <head>
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
</head>

 <body>

 <div ng-app="" ng-controller="customersController" > 
  <p ng-repeat="x in person">
    Your name is  {{ x.first_name + ' ' + x.last_name }}
  </p>
</div>
<script>
function customersController($scope,$http) {
  $http.get("http://127.0.0.1/angular/customer.php")
  .success(function(response) {$scope.person = response;});
}
</script>

 </body>
</html>

 อธิบายในส่วนของ index.php 
  • มีการสร้าง controller ที่ชื่อ customersController ขึ้นมาเรียกใช้งาน function
  • ภายในฟังก์ชั่นจะใช้งาน $scope เพื่อเก็บข้อมูล เป็น application object และ $http ที่เป็น service หลักสำหรับอ่านข้อมูลจาก server เป็น XMLHttpRequest object
  • $http.get() ทำการอ่านข้อมูลจากไฟล์ที่อยู่ตาม URL ที่กำหนด
  • ถ้าอ่านไฟล์สำเร็จ controller จะสร้าง property ที่ชื่อ person ไว้ใน $scope
  • มีการเรียกใช้โดยสร้างตัวแปร x ขึ้นมาเพื่อวนลูปดึงข้อมูลจาก property ใน $scope ที่ชื่อ person มาแสดง ซึ่งการแสดงผลจะใช้วิธีระบุชื่อ key ของ object เนื่องจากผลลัพธ์จากการใช้ json encode ทำให้ได้ข้อมูลในรูปแบบ Array Object

 ผลลัพธ์ที่ได้



เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)