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

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ AngularJS

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

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

การใช้งาน 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 { ...

เรียนเขียนโปรแกรม PHP : ตอน angular js beginning เริ่มต้นเรียนรู้การใช้งาน

       มาเรียนรู้การใช้งาน AngularJS โดยเปรียบเทียบความแตกต่าง ระหว่างการแสดงข้อมูลในส่วนที่ต้องการแบบ AngularJS กับการใช้ jQuery       นอกจากนำเฟรมเวิร์กมาใช้งานแค่อย่างใดอย่างหนึ่ง แล้ว เรายังสามารถใช้ร่วมกันได้ทั้ง jQuery และ AngularJS พร้อมกันได้อย่างไม่มีปัญหา       ถ้าจะให้พูดถึงข้อดีในเบื้องต้นที่ผมสนใจใน AngularJS ก็คือความสามารถเรียกใช้งานเทมเพลต html ได้โดยไม่ต้องผ่าน PHP หรือ Server แต่อย่างใดเลย (นี่คือสิ่งที่ผมเรียนรู้ ณ ตอนนี้) จนบางครั้งก็ทำให้ผมสับสนกับ C -> V ของ CodeIgniter ที่ผมใช้อยู่ไปด้วย       ต่อไป PHP ไม่ต้องทำงานหนัก MySQL คิวรี่ข้อมูลออกมา ก็ส่งไปยัง AngularJS แบบ JSON แล้วจัดการด้วย Controller ของมันเพื่อแสดงตามเทมเพลต (View) ของตัว AngularJS ได้เลย       เลิกแล้วล่ะ ผมเลิก echo '<tr><td>.......</td>...........</tr>'; อย่างเด็ดขาดแล้วล่ะ เพราะต่อไปนี้ AngularJS จะจัดการข้อมูลที่ส่งจาก ...