วันอาทิตย์ที่ 14 กันยายน พ.ศ. 2557

AngularJs ใช้งามร่วมกับ PHP + MySQL : การค้นหาและแสดงข้อมูลจากฐานข้อมูล



     บทความนี้จะสอนเรื่องการทำงานของ AnularJs ร่วมกับภาษา PHP และฐานข้อมูล MySQL โดยจะทำงานแบบ AJAX กันครับ โดยผลลัพธุ์ที่เราต้องการคือ เมื่อเพจถูกโหลดขึ้นมา ให้ AngularJs ไปดึงข้อมูลจากไฟล์ php แบบ AJAX แล้วไฟล์ PHP มีหน้าที่ดึงรายการสินค้าจากฐานข้อมูล MySQL ทั้งหมดไปแสดงหน้าแสดงรายการสินค้า
     ส่วนการค้นหาสินค้า เราจะใช้ Filter ของ AnularJs ซึ่งคือ คอมโพเน้นท์ตัวนึง ที่มีหน้าที่กรองข้อมูลก่อนนำมาแสดงผล โดย Filter Component จะต้องผูกกับ ng-model ของช่องค้นหา และผมใช้ Theme จาก Bootstrap นะครับ เพื่อให้แสดงผลได้ทุกอุปกรณ์เช่น PC,มือถือ,แท็บเลต

มาดูโค๊ดกันครับ

1.ไฟล์ showpd.html หน้าหลักสำหรับแสดงรายการสินค้า โดยเราจะให้ AnglarJs ทำงานจากหน้านี้ โดยการไปร้องขอไปยังไฟล์ showpd.php เพื่อนำข้อมูลจากไฟล์มาแสดงจากหน้านี้ เราจะใช้คำสั่งดังนี้
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://bootswatch.com/yeti/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="dbcontroller.js"></script>
<title>แสดงข้อมูลจากฐานข้อมูล MySQL ด้วย Angular Js + PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8  col-md-offset-2">
<div ng-controller="showdatacontroller ">
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">AngularJs + PHP + MySQL</a>
    </div>
    <div class="collapse navbar-collapse">
  
      <ul class="nav navbar-nav navbar-right">
        <li>
      <form class="navbar-form" role="search">
        <div class="form-group">
                <input ng-model="sData"  class="form-control"  placeholder="ค้นหา"/> 
        </div>
      </form>
      </li>
      <li><a href="#"><span class="glyphicon glyphicon-plus"></span> เพิ่ม</a></li>
</ul>
    </div>
    </div>
</nav>
<table class="table table-striped">
<thead><tr><th>ชื่อสินค้า</th><th  style="width:10%;text-align:center">จัดการ</th></tr></thead>
<tbody><tr ng-repeat="c in showData| filter : sData"><td >{{c.name_pd}}</td>
<td>
<a href="#edit{{c.id_pd}}">แก้ไข</a> | <a href="#del{{c.id_pd}}"> ลบ</a>
</table>
</div>
</div>
</div>
</div>
</body>
</html>


2.dbcontroller.js เป็นไฟล์ controller ของ AngularJs ไฟล์นี้จะถูกเรียกจากไฟล์ showpd.htm
 var myapp=angular.module('myapp', []);//ทำงานในส่วนของกรอบของ app ที่เรากำหนด
 myapp.controller('showdatacontroller', function($scope,$http) {//แสดงข้อมูลสินค้าใน controller ชื่อ showdatacontroller
 getData(); //ทำงานเมื่อเพจโหลด เรียกใช้ฟังก์ชั่น getData
 $scope.sData='';
  function getData(){//สร้างฟังก์ชั่น getData เพื่อแสดงรายการสินค้า
 $http.get("showpd.php").success(function(data){
 $scope.showData = data;
 });
 }
  });

3.showpd.php เป็นไฟล์ที่เขียนด้วยภาษา PHP ทำหน้าที่ดึงข้อมูลจากฐานข้อมูล MySQL มาแสดง แล้วส่งค่าแบบ JSON กลับไปแสดงผลที่ไฟล์ showpd.html ตามที่ AngularJs ร้องขอ
<?php
$hostname = "localhost";//ชื่อHost
$database = "db_pjshop";//ชื่อฐานข้อมูล
$username = "root";//username ของฐานข้อมูลของท่าน
$password = "";//รหัสผ่านของฐานข้อมูลของท่าน
$connectdb = mysql_connect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_select_db($database);
mysql_query('SET NAMES utf8');
    $rs_product=mysql_query('SELECT id_pd,name_pd FROM product ORDER BY id_pd DESC') or die(mysql_error());
    $arr = array();
 while($show = mysql_fetch_assoc($rs_product)) {
 $arr[] = $show;
}
echo $json_response = json_encode($arr);
?>


    ข้อดีของการใช้ Filter ของ AngularJs คือ ช่วยลดภาระการร้องขอจากเซิร์ฟเวอร์ตลอดเวลาที่ค้นหาข้อมูล โดยที่ไม่ต้องส่งคำสั่งไปดึงข้อมูลจากไฟล์ showpd.php ทุกครั้งเมื่อพิมพ์ข้อความค้นห ในระหว่างที่เพจถูกโหลดขึ้นมา เราจะให้ไปดึงข้อมูลที่ต้องการมาแค่ครั้งเดียวเท่านั้น แล้วเราจะให้ Filter ค้นหาข้อมูลที่ดึงมาอีกทีครับ จะไม่ไปดึงข้อมูลมาอีกแล้วครับ

5 ความคิดเห็น :

  1. ไม่ระบุชื่อ15 กันยายน 2557 เวลา 09:32

    function getDataFromDb()
    {
    $.ajax({
    url: "getdata.php" ,
    type: "POST",
    data: ''
    })
    .success(function(result) {


    select:function( event, ui ) {
    $('#name').val(ui.item.name);
    }
    });
    });
    }

    });

    }setInterval(getDataFromDb, 500);




    พี่ครับผมจะดึงข้อมูลที่ดึงได้จาก ฐานข้อมูล และให้มันเติมลงใน Field แบบ Auto เลยทำยังไงครับ
    ผมลองทำแหละก็ไม่ได้อ่ะครับ

    ตอบลบ
    คำตอบ
    1. ลองดูตามนี้ครับ
      http://php-for-ecommerce.blogspot.com/2014/09/angularjs.html?showComment=1410878427907#c207548528859903126

      ลบ
  2. ไม่ระบุชื่อ10 ตุลาคม 2557 เวลา 10:55

    สวัสดีครับพี่ PHPWIN
    ผมติดตามบทความพี่มานาน แต่สนใจอยากได้ไฟล์ exshop.rar มาศึกษา
    ไม่ทราบว่าพี่พอมีเหลือไหมครับ ผมขอหน่อยครับ majicthai@gmail.com

    ตอบลบ