สอนเขียนโปรแกรม PHP : การดึงข้อมูลจากฐานข้อมูลมาแสดงผ่าน AJAX ด้วย AngularJS $http

หลักการทำงานก็คือ AngularJS จะส่งข้อมูลในรูปแบบ AJAX ไปยังหน้าเป้าหมายก็คือ hotel.php เพื่อนำข้อมูลจากฐานข้อมูล MySQL ในตาราง hotel ทั้งหมดส่งออกมาเป็น json ด้วยคำสั่ง echo json_encode( Array ) จากนั้นเมื่อส่งกลับมา AngularJS ก็จะทำการสร้างแถว TR ขึ้นมาใหม่ตามจำนวนอาร์เรย์ที่ PHP สร้างไว้ด้วยฟังก์ชั่น ng-repeat

ไฟล์ template จะสร้างตาราง HTML เปล่าขึ้นมารอรับค่าเมื่อกดปุ่ม Load ข้อมูล

index.php

<html ng-app="phonecatApp">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FB : facebook.com/ToBeDeveloper </title>
    
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="../../js/jquery.min.js"></script>
    <script src="../js/angular.min.js"></script>
    
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

    <div role="main" class="container theme-showcase">
        <input type="button" value="Load" ng-click="loadData()" />
    <table border="1">
        <tr><th>ชื่อ</th><th>สถานที่</th></tr>
        <tr ng-repeat="phone in phones">
          <td><span>{{phone.name}}</span></td>
          <td><p>{{phone.place}}</p></td>
        </tr>
    </table>
    </div>


<script type="text/javascript">
var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
    $scope.loadData = function() {
        $http.get('hotel.php').success(function(data) {
                $scope.phones = data;
        });
    };
});
</script>
</body>
</html>

ไฟล์ PHP สำหรับแสดงข้อมูลจากฐานข้อมูล แล้วส่งกลับไปในรูปแบบ JSON Format

hotel.php

<?php
    /**
    * Database Connection
    */
    try {
        $db_conn = new PDO('mysql:host=localhost;dbname=crdev_db', 'crdev', 'cr2015');
        $db_conn -> exec("SET CHARACTER SET utf8");
    } catch (PDOException $e) {
        echo "Could not connect to database";
        exit;
    }

    // Clear
    $error_message = '';
    $list_array = '';

    $sql = 'SELECT name, place FROM hotel ';
    try {
    $stmt = $db_conn->prepare($sql);

        if($stmt) {

            // perform query
            $result = $stmt->execute();

            if($result) {
                echo json_encode($stmt->fetchAll());

            } else {
                $error = $stmt->errorInfo();
                $error_message = "Query failed with message: " . $error[2];
            }

        }else{
            $error_message = "SQL problem has occurred: " . $e->getMessage();
        }
    } catch (PDOException $e) {
        $error_message = "A database problem has occurred: " . $e->getMessage();
    }

?>

ข้อแตกต่างเกี่ยวกับการรับส่งค่าในรูปแบบ JSON กับการรับส่งค่าแบบธรรมดาทั่วไปที่เรามักจะ echo ข้อมูลออกมาเป็น HTML เพื่อแสดงผลในหน้าเพจที่ส่งค่า Ajax ไปนั้นก็คือความยืดหยุ่นเมื่อเป็น JSON เราสามารถใช้ JavaScript ควบคุมการทำงานได้หลังจากที่รับค่ามาแล้ว




       "PHP ไม่ได้สร้างสุดยอดโปรแกรม 
                 แต่ PHP ช่วยให้งานคุณง่ายขึ้นต่างหาก"


PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 4,500 บาท
http://fastcoding.phpcodemania.com/







สนับสนุนค่ากาแฟผู้เขียนได้ที่

PHP สร้างเว็บไซต์ให้เป็นเรื่องง่ายๆ

ค้นหาบล็อกนี้