[AngularJS] Phần 14: AngularJS và SQL

Cập nhật lần cuối: 23/09/2023 lúc 15:59:27

Angular rất thích hợp để hiển thị dữ liệu từ database. Điều bạn cần làm là xuất dữ liệu ra với định dạng JSON.

Lấy dữ liệu từ 1 server PHP chạy SQL
Ví dụ sau mô tả cách lấy dữ liệu từ 1 server PHP chạy MySQL.

<!DOCTYPE html>
<html >
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 

<div ng-app="myApp" ng-controller="dammioCtrl">
 

<table>
  
<tr ng-repeat="x in names">
    
<td>{{ x.Name }}</td>

    
<td>{{ x.Country }}</td>

  </tr>
</table>

 
</div>

 
<script>
var app = angular.module('myApp', []);
app.controller('dammioCtrl', function($scope, $http) {
   $http.get("dammio_mysql.php")
   .then(function (response) {$scope.names = response.data.records;});
});
</script>
 
</body>
</html>

Trong ví dụ trên, có thể thấy dữ liệu được lấy từ trang dammio_mysql.php, sau đó sẽ hiển thị lên giao diện thông qua controller dammioCtrl. Nội dung tập tin dammio_mysql.php bạn có thể viết tùy ý, miễn sao lấy được kết quả dữ liệu dưới dạng JSON, ví dụ cách viết như sau:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

// tạo kết nối database
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

// tạo câu truy vấn
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";

//dùng vòng while để lấy dữ liệu và xuất dưới dạng JSON
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}';
}
$outp ='{"records":['.$outp.']}';

// đóng kết nối
$conn->close();

echo($outp);
?>

Lấy dữ liệu từ 1 server ASP.NET chạy SQL

Bạn cũng có thể chạy AngularJS với dữ liệu từ server ASP.NET như ví dụ dưới đây. Tương tự phần trên, dữ liệu được lấy từ trang dammio_sql.aspx và xuất kết quả thông qua controller dammioController.

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="dammioCtrl">
<table>
  
<tr ng-repeat="x in names">
    
<td>{{ x.Name }}</td>

    
<td>{{ x.Country }}</td>

  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('dammioCtrl', function($scope, $http) {
    $http.get("dammio_sql.aspx")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>

Nội dung tập tin dammio_sql.aspx bạn có thể viết tùy ý, miễn sao xuất ra kết quả JSON, ví dụ điển hình như sau:

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query){
if (outp != "") {outp = outp + ","}
outp = outp + "{" + c + "Name"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "City"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "Country" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp

Một số ví dụ code khác
Phần sau liệt kê danh sách các mã server dùng để lấy dữ liệu SQL.

Dùng PHP và MySQL, trả về JSON
Dùng PHP và MS Access, trả về JSON
Dùng ASP.NET, VB, và MS Access, trả về JSON
Dùng ASP.NET, Razor, và SQL Lite, trả về JSON

Liên quan: [AngularJS] Phần 17: Form trong AngularJS

Kết luận: Như vậy bài này hướng dẫn bạn cách hiển thị dữ liệu từ database lên giao diện dùng AngularJS, lưu ý định dạng dữ liệu phải là kiểu JSON.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [AngularJS] Phần 14: AngularJS và SQL. https://www.dammio.com/2017/05/08/angularjs-phan-14-angularjs-va-sql.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[AngularJS] Phần 14: AngularJS và SQL}, year = {2017}, url = {https://www.dammio.com/2017/05/08/angularjs-phan-14-angularjs-va-sql}, urldate = {2024-07-23} }

Kết nối