ข้ามไปที่เนื้อหาหลัก

การใช้งาน AngularJS ร่วมกับ PHP เพื่อนำข้อมูลไปแสดงแบบวนลูปใน tr

ส่วนของโค๊ด PHP จะทำหน้าที่เชื่อมต่อฐานข้อมูล และแสดงรายการทั้งหมดจากตาราง hotel ออกมาเก็บไว้ที่ตัวแปร $list_array ซึ่งจัดให้อยู่ในรูปแบบ JSON ด้วยฟังก์ชั่น json_encode()
วิดีโอ

<?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 = '';
    $condition = '';
    $where = '';
      $list_array = '';

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

        if($stmt) {

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

            if($result) {
                $list_array = 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();
    }

?>


ส่วนของ HTML จะใช้สร้างตารางที่มี tr แค่แถวที่เป็นหัวข้อ และรายการที่เป็นตัวแปรสำหรับวนลูปและนำข้อมูลจาก PHP ไปแสดงด้วย AngularJS
  <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>

ส่วนสุดท้าย โค๊ด JavaScript ที่เขียนด้วยโค๊ด AngularJS เพื่อควบคุมการแสดงผลข้อมูลที่ได้จาก PHP ส่งไปยัง Template ส่วนที่เป็น HTML
  <script type="text/javascript">
  var phonecatApp = angular.module('phonecatApp', []);

  phonecatApp.controller('PhoneListCtrl', function ($scope) {
    $scope.phones = <?php echo $list_array;?>
  });
  </script>

โค๊ดส่วนสุดท้ายนี้เมื่อโหลดหน้าเว็บขึ้นมาก็จะเริ่มทำงานทันที ก็จะมีข้อมูลจากฐานข้อมูล MySQL แสดงในตาราง HTML ที่เราได้สร้างไว้



โค๊ดทั้งหมด

<?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 = '';
    $condition = '';
    $where = '';
      $list_array = '';

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

        if($stmt) {

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

            if($result) {
                $list_array = 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();
    }

?>
<html ng-app="phonecatApp">
<head>
  <meta charset="utf-8"/>
  <script src="../js/angular.min.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <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>
  <script type="text/javascript">
  var phonecatApp = angular.module('phonecatApp', []);

  phonecatApp.controller('PhoneListCtrl', function ($scope) {
    $scope.phones = <?php echo $list_array;?>
  });
  </script>
</body>
</html>


ฐานข้อมูล


--
-- Database: `crdev_db`
--

-- --------------------------------------------------------

--
-- Table structure for table `hotel`
--

CREATE TABLE IF NOT EXISTS `hotel` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `place` varchar(50) NOT NULL,
  `option1` int(11) NOT NULL,
  `option2` int(11) NOT NULL,
  `option3` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

--
-- Dumping data for table `hotel`
--

INSERT INTO `hotel` (`id`, `name`, `place`, `option1`, `option2`, `option3`) VALUES
(1, 'โรงแรมแห่งที่ 1', 'แม่จัน', 1, 1, 0),
(2, 'โรงแรมแห่งที่ 2', 'เชียงแสน', 1, 0, 1),
(3, 'โรงแรมแห่งที่ 3', 'รอบเวียง', 0, 1, 0),
(4, 'โรงแรมแห่งที่ 4', 'เวียงชัย', 0, 0, 1),
(5, 'โรงแรมแห่งที่ 5', 'ริมกก', 1, 0, 0),
(6, 'โรงแรมแห่งที่ 6', 'บ้านดู่', 0, 1, 1),
(7, 'โรงแรมแห่งที่ 7', 'เชียงของ', 1, 1, 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `hotel`
--
ALTER TABLE `hotel`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `hotel`
--
ALTER TABLE `hotel`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=8;




ป้ายกำกับ:

ความคิดเห็น

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

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ
แสดงความคิดเห็น
Read more »

สร้างแบบฟอร์มล็อกอิน HTML + PHP

       ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้ http://localhost/teacher_assistant หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ
2 ความคิดเห็น
Read more »

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) {     echo "Error: Unable to connect to MySQL." . PHP_EOL;     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;     exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) {     /* fetch object array */     while ($obj = $result->fetch_object()) {        $data[] = array(                 ...
แสดงความคิดเห็น
Read more »