บทความนี้จะ
สอนเรื่องการทำงานของ
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>
