AngularJS SQL

AngularJS দিয়ে SQL ডেটা শিখুন

AngularJS SQL

AngularJS একটি ডাটাবেস থেকে ডেটা প্রদর্শনের জন্য দুর্দান্ত।

নিশ্চিত করুন যে ডেটা JSON ফর্ম্যাটে আছে।

টিপ:

AngularJS এর ​​সাথে SQL ডেটা প্রদর্শন করতে, ডেটা অবশ্যই JSON ফর্ম্যাটে হতে হবে।

MySQL চলমান একটি PHP সার্ভার থেকে ডেটা পুনরুদ্ধার করা হচ্ছে

AngularJS Example

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

<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('customersCtrl', function($scope, $http) {
  $http.get("customers_mysql.php")
  .then(function (response) {$scope.names = response.data.records;});
});
</script>

SQL চলমান একটি ASP.NET সার্ভার থেকে ডেটা পুনরুদ্ধার করা হচ্ছে

AngularJS Example

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

<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('customersCtrl', function($scope, $http) {
  $http.get("customers_sql.aspx")
  .then(function (response) {$scope.names = response.data.records;});
});
</script>

সার্ভার কোডের উদাহরণ

নিম্নলিখিত বিভাগটি SQL ডেটা পুনরুদ্ধার করতে ব্যবহৃত সার্ভার কোডের একটি তালিকা।

প্রযুক্তি ব্যাখ্যা আউটপুট বিন্যাস
পিএইচপি এবং মাইএসকিউএল একটি মাইএসকিউএল ডাটাবেসের সাথে পিএইচপি ব্যবহার করা JSON
পিএইচপি এবং এমএস অ্যাক্সেস MS Access ডাটাবেসের সাথে PHP ব্যবহার করা JSON
ASP.NET, VB MS Access MS Access ডাটাবেসের সাথে ASP.NET এবং VB ব্যবহার করা JSON
ASP.NET, Razor SQL Lite একটি SQL লাইট ডাটাবেসের সাথে ASP.NET রেজার ব্যবহার করা JSON

ক্রস-সাইট HTTP অনুরোধ

একটি ভিন্ন সার্ভার থেকে ডেটার জন্য একটি অনুরোধ (অনুরোধের পৃষ্ঠা ছাড়া) ক্রস-সাইট HTTP অনুরোধ বলা হয়।

ক্রস-সাইট অনুরোধ ওয়েবে সাধারণ। অনেক পেজ বিভিন্ন সার্ভার থেকে CSS, ছবি এবং স্ক্রিপ্ট লোড করে।

আধুনিক ব্রাউজারে, নিরাপত্তার কারণে স্ক্রিপ্ট থেকে ক্রস-সাইট HTTP অনুরোধগুলি একটি একক সাইটে সীমাবদ্ধ।

নিরাপত্তা নোট:

ক্রস-সাইট অ্যাক্সেসের অনুমতি দেওয়ার জন্য, আমাদের পিএইচপি উদাহরণগুলিতে নিম্নলিখিত লাইনটি যুক্ত করা হয়েছে:

header("Access-Control-Allow-Origin: *");

সার্ভার কোড বিবরণ

1. সার্ভার কোড পিএইচপি এবং মাইএসকিউএল

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

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
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.']}';
$conn->close();

echo($outp);
?>

2. সার্ভার কোড পিএইচপি এবং এমএস অ্যাক্সেস

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

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");

$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while (!$rs->EOF) {
  if ($outp != "") {$outp .= ",";}
  $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
  $outp .= '"City":"'   . $rs["City"]        . '",';
  $outp .= '"Country":"'. $rs["Country"]     . '"}';
  $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';

$conn->close();

echo ($outp);
?>

3. সার্ভার কোড ASP.NET, VB এবং MS অ্যাক্সেস

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name"    & c & ":" & c & x("CompanyName") & c & ","
outp = outp &       c & "City"    & c & ":" & c & x("City")        & c & ","
outp = outp &       c & "Country" & c & ":" & c & x("Country")     & c & "}"
next

outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. সার্ভার কোড ASP.NET, রেজার C# এবং SQL Lite

@{
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

ব্যায়ামের মাধ্যমে শেখা

ক্রস-সাইট অনুরোধের অনুমতি দিতে পিএইচপি-তে কোন স্ক্রিপ্ট ব্যবহার করা হয়?

header("Access-Control-Allow-Origin: *")
✓ ঠিক আছে! This script allows cross-site requests from all domains.
allow-cross-site: true
✗ ভুল! এটি সঠিক পিএইচপি সিনট্যাক্স নয়।
enableCORS()
✗ ভুল! এটি পিএইচপি-তে একটি আদর্শ ফাংশন নয়।
set_cross_domain_access()
✗ ভুল! এটি পিএইচপি-তে একটি আদর্শ ফাংশন নয়।

প্রশিক্ষণ শুরু করুন:

উপরের ব্যায়াম চেষ্টা করুন. প্রতিটি অপশনে ক্লিক করুন এবং সঠিক উত্তর চেক করুন।

অ্যাঙ্গুলারজেএস-এর সাথে এসকিউএল ব্যবহার করে আয়ত্ত করার জন্য এই ধারণাগুলি গুরুত্বপূর্ণ।

সর্বোত্তম অনুশীলন

JSON বিন্যাস ব্যবহার করুন:JSON ফর্ম্যাটে AngularJS-এ SQL ডেটা প্রদান করুন।
CORS হ্যান্ডেল:ক্রস-সাইট অনুরোধের জন্য সঠিক CORS লেখা যোগ করুন।
নিরাপত্তা ত্যাগ করবেন না:উৎপাদন পরিবেশে "অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন: *" ব্যবহার করা এড়িয়ে চলুন।
ডেটা ক্লিনিং:SQL অনুরোধের আগে সর্বদা ব্যবহারকারীর ইনপুট স্যানিটাইজ করুন।