บทความนี้จะสอนเรื่องการทำงานของ 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); ?>
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 เลยทำยังไงครับ
ผมลองทำแหละก็ไม่ได้อ่ะครับ
แบบนี้หรือป่าวครับ >> สอนทำ Autocomplete และ Autofill แสดงข้อมูลจากฐานข้อมูล
ลบลองดูตามนี้ครับ
ลบhttp://php-for-ecommerce.blogspot.com/2014/09/angularjs.html?showComment=1410878427907#c207548528859903126
สวัสดีครับพี่ PHPWIN
ตอบลบผมติดตามบทความพี่มานาน แต่สนใจอยากได้ไฟล์ exshop.rar มาศึกษา
ไม่ทราบว่าพี่พอมีเหลือไหมครับ ผมขอหน่อยครับ majicthai@gmail.com
typically the crafted statement. https://imgur.com/a/pF18d8j http://6h68v894gd.dip.jp https://imgur.com/a/emvHdb7 http://mwejzrn4dv.dip.jp https://imgur.com/a/vucZN61 https://imgur.com/a/r7V5b2d https://imgur.com/a/Ufsm8ra
ตอบลบ