Kết nối

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

8.574 lượt xem 
 Cập nhật lần cuối: 23/09/2023 lúc 15:59:27
Thể loại: AngularJS, Thiết kế Web 

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 6: Ràng buộc dữ liệu 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.

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-10-09}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x