অ্যাঙ্গুলার জেএস (AngularJS) টেবিল (Tables)
Article By : Protap Chandra

আজকের টিউটরিয়ালে আমরা শিখব AngularJS এর মাধ্যমে কিভাবে টেবিল তৈরী করতে হয়। টেবিল তৈরীর জন্য ng-repeat ডিরেক্টিভ (directive) ব্যবহার করা যায়। AngularJS ব্যহার করে খুব সহজে ডাটাকে টেবিলে প্রদর্শন করা যায়। একটি উদাহরণের সাহায্যে বিষয়টি পরিস্কার করা যাক।

<div ng-app="" ng-controller="customersController">

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

</div>

<script>
function customersController($scope,$http) {
$http.get("http://www.justetc.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>

উপরের উদাহরণটি একটি ডাটাবেজ থেকে আনা কোম্পানির নাম ও দেশের নাম একটি টেবিলের দুটি কলামে প্রদর্শন করবে। কিন্তু কোনো ভিজ্যুয়াল টেবিল তৈরী হবে না।

ভিজ্যুয়াল টেবিল তৈরী করতে গেলে ওই পেজে CSS ব্যবহার করতে হবে। যেমন-

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

টেবিলের ডাটা সাজানোর জন্য orderBy ফিল্টার (Filter) ব্যবহার করা যায়: যেমন-

<table>
orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

এবার ডাটাগুলোর Country কলাম ধরে (a-z) order এ সাজাবে।

আপার কেস (uppercase)ফিল্টার
AngularJS এ uppercase ফিল্টার ব্যবহার করে ডাটাকে capital letter এ লেখা যায়।
যেমন-
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase}}</td>
</tr>
</table>
এবার Country কলামের ডাটাগুলো সব capital letter বা বড় হাতের অক্ষরে লেখা হবে।

অ্যাঙ্গুলার জেএস (AngularJS) ফরম (Forms)
Article By : Protap Chandra
--------
আজকের টিউটরিয়ালে আমরা AngularJS ফরম সম্পর্কে জানব। AngularJS ফরম হচ্ছে HTML ইনপুট element সমূহের সেট, যা HTML controls নামে পরিচিত। যেমন -
• input elements
• select elements
• button elements
• textarea elements
AngularJS ফরম ব্যবহারের উদাহরণ:
formController">
<form novalidate>
First Name:<br>
firstName">

Last Name:<br>
lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = </p>
<p>master = </p>
</div>

<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>

উদাহরণের AngularJS কোডের এই অংশটুকু রান করলে পরপর দুটি ইনপুট টেক্সবক্স আসবে। একটি বক্সের লেবেল “First Name” এবং অন্যটির “Last Name”। “First Name” টেক্সবক্সের ডিফল্ট value হিসেবে থাকবে “John” এবং “Last Name” টেক্সবক্সে ডিফল্ট value হিসেবে থাকবে Doe.

এর নিচে আরেক প্যারাতে থাকবে: form = {"firstName":"John","lastName":"Doe"}
firstName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা firstName এর পর synchronize হবে।
lastName লেবেলযুক্ত ইনপুট বক্সে যা-ই লেখা হবে সাথে সাথে তা lastName এর পর synchronize হবে।
এর নিচে আরেক প্যারাতে লেখা থাকবে: master = {"firstName":"John","lastName":"Doe"} অর্থাত এটাই ডিফল্ট ভ্যালু। Reset বাটনে ক্লিক করলে এই ভ্যালুতে ফিরে যাবে।

* উপরের উদাহরণে ব্যবহার করা novalidate attribute টি HTML5 এ নতুন সংযোজন. এটি default browser validation অকার্যকর করার জন্য ব্যবহার করা হয়।
উদাহরণটির বিশ্লেষণ:
ng-app directive এখানে AngularJS অ্যাপ্লিকেশন define করেছে।
ng-controller directive এখানে application controller define করেছে।
ng-model directive এখানে input element যুক্ত করেছে।
formController() ফাংশন master object এ প্রাথমিক ভ্যালূ যুক্ত করেছে এবং reset() method আহ্বান করেছে।
reset() method পরিবর্তন করা কোনো ডাটাকে master object এর প্রাথমিক ডাটায় ফিরিয়ে নেয়।
ng-click directive এখানে reset() method কে ঠিক তখনই আহ্বান করবে কেবল যখন এটিতে ক্লিক করা হবে।

কৌণিক বা Angular জাভা স্ক্রিপ্ট SQL
Riaz-ul-haque Mian (CSE)
PHP সার্ভার এর Running MySQL ডাটা ফেচ করানো :
কৌণিক বা Angular জাভা স্ক্রিপ্ট SQL এর উদাহরণ :
<div ng-app="" ng-controller="customersController">

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

</div>

<script>
function customersController($scope,$http) {
var site = "http://www.justetc.com";
var page = "/website/Customers_MySQL.php";
$http.get(site + page)
.success(function(response) {$scope.names = response;});
}
</script>

ASP.NET সার্ভার এর Running SQL ডাটা ফেচ করানো :

উদাহরণ :
<div ng-app="" ng-controller="customersController">

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

</div>

<script>
function customersController($scope,$http) {
var site = "http://www.justetc.com";
var page = "/website/Customers_SQL.aspx";
$http.get(site + page)
.success(function(response) {$scope.names = response;});
}
</script>
এতক্ষণ আমরা জাভা স্ক্রিপ্ট এর উধারণ দেখেছি এবার দেখব সার্ভার code এর উধারণ
SQL ডাটা Fatch করানোর server code এর উধারণ - নিচে চারটি উধারণ দেয়া হলো
1. PHP এবং MYSQL ব্যবহার করে (উধারণ টি লক্ষ করুন)
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 .="]";

$conn->close();

echo($outp);
?>
2. PHP এবং মাইক্রোসফট এক্সেস ডাটাবেস ব্যবহার করে (উধারণ টি লক্ষ করুন)
<?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 .= "]";

$conn->close();

echo ($outp);
?>
3. ASP.NET , ভিজ্যুয়াল বেসিক এবং মাইক্রোসফট এক্সেস ডাটাবেস ব্যবহার করে (উধারণ টি লক্ষ করুন)
<%@ 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 = outp & "]"
response.write(outp)
conn.close
%>

4. ASP.NET , ভিজ্যুয়াল বেসিক Razor এবং 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 ="["
}
@foreach(var row in query)
{
if outp <> "[" then 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 = outp + "]"
@outp

AngularJS Filters
মৃত্যুঞ্জয় বিশ্বাস

pipe character দ্বারা ফিল্টারের Expressions ও নির্দেশ যুক্ত করা হয় ।
AngularJS Filters
AngularJS filters ব্যবহৃত হয় data transfers করতে ।

ফিল্টার বর্ণনা
Currency একটি number কে currency format এ বিন্যাস করে ।
Filter একটি array থেকে আইটেম এর একটি উপসেট নির্বাচন করে ।
Lowercase একটি string কে lower case এ বিন্যাস করে ।
orderBy expression দ্বারা একটি array কে order করা হয় ।
uppercase একটি string কে uppercase এ বিন্যাস করে

Expressions এ Filters যোগ করার পদ্ধতি
pipe character (|) এবং filter দ্বারা একটি Expressions যোগ করা যাবে ।
পরবর্তী দুটি উদাহরণের জন্য আমরা আগের অধ্যায়ের person controller ব্যবহার
করব ।
uppercase filter format string করে upper case:

AngularJS উদাহরনঃ
<div ng-app="" ng-controller="personController">

The name is {{ lastName | uppercase }}

</div>
» এটা নিজে চেষ্টা করুন ।

lowercase filter format string করে lower case:

AngularJS উদাহরনঃ
<div ng-app="" ng-controller="personController">

The name is {{ lastName | lowercase }}

</div>
» এটা নিজে চেষ্টা করুন ।
currency Filter
currency filter একটি number কে currency format এ বিন্যাস করে ।
AngularJS উদাহরনঃ
<div ng-app="" ng-controller="costController">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
» এটা নিজে চেষ্টা করুন ।

Directive এ Filter যোগ করা
pipe character (|) দ্বারা ফিল্টারে directive যোগ করা যায় ।
orderBy filter একটি array কে নির্দেশ করে expression দ্বারাঃ
AngularJS উদাহরনঃ

<div ng-app="" ng-controller="namesController">

<ul>
orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

<div>
» এটা নিজে চেষ্টা করুন ।

Filtering Input (Input কে ফিল্টার করা )
একটি input filter একটি directive এ যুক্ত হতে পারে pipe character (|) এবং filter এর সাথে , একটি colon একটি model name এর পরে ।
AngularJS উদাহরনঃ

<div ng-app="" ng-controller="namesController">

<p><input type="text" ng-model="test"></p>

<ul>
orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div>
» এটা নিজে চেষ্টা করুন ।