[slickquiz id=7]
May 27
AppML প্রোটোটাইপ (AppML Prototype)
আদনান নাহিদ
এই অধ্যায়ে আমরা একটি ওয়েব অ্যাপ্লিকেশনের জন্য একটি প্রোটোটাইপ তৈরি করবো ।
একটি HTML প্রোটোটাইপ তৈরি
প্রথমত, আপনার প্রিয় সিএসএস ব্যবহার করে একটি শালীন এইচটিএমএল প্রোটোটাইপ তৈরি করুন ।
আমরা এই উদাহরণে বুটস্ট্র্যাপ ব্যবহার করেছি :
উদাহরণ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
<div class="container">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
{{…}} এই চিহ্নগুলো হলো ভবিষ্যতের তথ্য স্থানধারক ।
AppML যোগ
একটি HTML প্রোটোটাইপ তৈরী করার পর আপনি AppML যোগ করতে পারবেন।
উদাহরণ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script src="http://www.w3schools.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="container" appml-data="customers.js" >
<h1>Customers</h1>
<table class="table table-striped table-bordered">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records" >
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
AppML যোগ:
<script src=”http://www.w3schools.com/appml/2.0.3/appml.js”>
একটি local WebSQL ডাটাবেস যোগ করুন:
<script src=”http://www.w3schools.com/appml/2.0.3/appml_sql.js”>
একটি তথ্য উৎস নির্ধারণ করুন ;
appml-data=”customers.js”
রেকর্ডের মধ্যে প্রত্যেকটি রেকর্ডের জন্য পুনরাবৃত্তি করার এইচটিএমএল উপাদান নির্ধারণ করুন ;
appml_repeat = “রেকর্ড“
এটা সহজে করার জন্য একটি ডাটাবেসর সাথে সংযোগ করার পূর্বে customers.js মত লোকাল ডাটা দিয়ে শুরু করুন ।
একটি AppML মডেল তৈরি করুন
একটি ডাটাবেস ব্যবহারের উপযোগী করা জন্যে আপনা একটি AppML ডাটাবেস মডেল লাগবে ।
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "Select * from Customers",
"orderby" : "CustomerName",
}
যদি আপনার লোকাল ডাটাবেস না থাকে, তাহলে আপনি একটি ওয়েব SQL ডাটাবেস তৈরি করতে AppML মডেল ব্যবহার করতে পারেন ।
একটি একক রেকর্ডের সঙ্গে একটি টেবিল তৈরি করতে, এই রকম একটি মডেল ব্যবহার করতে পারেন proto_customers_single.js .
নোটঃ একটি তৈরিকৃত লোকাল ডাটাবেস IE বা Firefox মধ্যে কাজ না করলে ক্রোম বা সাফারি ব্যবহার করুন ।
আপনার অ্যাপ্লিকেশনে মডেল ব্যবহার করুন । ডাটার উৎসকে পরিবর্তন করে local?model=proto_customers_single করুন।
উদাহরণ
<div appml-data=” local?model=proto_customers_single “>
<h1>Customers</h1>
<table class=”table table-striped table-bordered”>
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat=”records”>
<td>{{CustomerName}}</td>
<td>{{City}} </td>
<td>{{Country}} </td>
</tr>
</table>
</div>
একাধিক রেকর্ডস দ্বারা একটি লোকাল ডাটাবেস তৈরি করুন
একাধিক রেকর্ডের দিয়ে একটি টেবিল তৈরি করতে, এই রকম একটি মডেল ব্যবহার করুন proto_customers_all.js
ডাটার উৎস পরিবর্তন করে local?model=proto_customers_all করুন।
উদাহরণ
<div appml-data=" local?model=proto_customers_all ">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}} </td>
<td>{{Country}} </td>
</tr>
</table>
</div>
ন্যাভিগেশন টেমপ্লেট যোগ করা
আপনি আপনার সমস্ত অ্যাপ্লিকেশন এই সাধারণ একটি ন্যাভিগেশন টুলবার রাখতে চাইছেন।
এটার জন্য একটি এইচটিএমএল টেমপ্লেট তৈরি করুন।
inc_listcommands.htm
<div class="btn-group" role="toolbar" style="margin-bottom:10px;"> <button id='appmlbtn_first' type="button" class="btn btn-default"> <span class="glyphicon glyphicon-fast-backward"></span></button> <button id='appmlbtn_previous' type="button" class="btn btn-default"> <span class="glyphicon glyphicon-backward"></span></button> <button id='appmlbtn_text' type="button" class="btn btn-default disabled"></button> <button id='appmlbtn_next' type="button" class="btn btn-default"> <span class="glyphicon glyphicon-forward"></span></button> <button id='appmlbtn_last' type="button" class="btn btn-default"> <span class="glyphicon glyphicon-fast-forward"></span></button> <button id='appmlbtn_query' type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> Filter</button> </div> <div id="appmlmessage"></div>
“Inc_listcommands.htm” এই নামে টেমপ্লেট ফাইল সেভ করুন ।
আপনার প্রোটোটাইপের মধ্যে এই টেম্পলেট অন্তর্ভুক্ত করুন appml-include-html:
উদাহরণ
<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm" ></div>
<table class="table table-striped table-bordered">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}} </td>
<td>{{Country}} </td>
</tr>
</table>
</div>
May 27
অ্যাপ এম এল ক্লায়েন্ট (The AppML Client)
রিদওয়ান বিন শামীম
পরবর্তী অধ্যায়গুলোতে আমরা ওয়েব ব্রাউজারে ওয়েব এপ্লিকেশন তৈরি করব।
অ্যাপ এম এল ক্লায়েন্ট
অ্যাপ এম এল ক্লায়েন্ট হল একধরনের জাভাস্ক্রিপ্ট যা যেকোনো ওয়েব ব্রাউজারে চলতে পারে।
এটি এক লাইনের কোডের মাধ্যমেই যেকোনো এইচটিএমএল পেজে যোগ করা যায়,
<scriptsrc=”http://www.w3schools.com/appml/2.0.3/appml.js”></script>
অ্যাপ এম এল ক্লায়েন্ট এইচটিএমএল এট্রিবিউট ব্যবহার করে যেকোনো এইচটিএমএল উপাদানে এক্সটারনাল ডাটা যোগ করার সুবিধা দেয়।
<tableappml-data=”customers.js”>
এটির বিল্ট ইন একটি সুবিধা হল, এটি এইচটিএমএলের যেকোনো জায়গায় ডাটা প্রদর্শন করতে পারে।
<td>{{CustomerName}}</td>
{{ … }} হল অ্যাপ এম এল ডাটার সংস্থাপন চিহ্ন।
এটির বিল্ট ইন আর একটি সুবিধা হল ডাটার ভেতর থাকা কোনও অ্যারি ব্যবহার করে এইচটিএমএলের উপাদানকে পুনরাবৃত্তি করা যায় ।
<tr appml-repeat="records"> .. . </tr>
অ্যাপ এম এল ক্লায়েন্ট সিএসএস বা এইচটিএমএলের সাথে কোনও সমস্যা করে না, এটি সিএসএসের সাথে ভাল সমন্বয় করতে পারে, আমরা উদাহরণে বুটস্ট্রেপ ব্যবহার করেছি।
অ্যাপ এম এল ওয়েব এপ্লিকেশন
অ্যাপ এম এল ওয়েব এপ্লিকেশন বানানোর জন্য খুবই উপযোগী, এর সবচেয়ে বড় গুন হল ব্রাউজারে ডাটাবেস সিআরইউডি এপ্লিকেশনসহ প্রোটোটাইপ বানানোর ক্ষমতা, এবং কোনও ওয়েব সার্ভারেরও দরকার হয় না।
সিআরইউডি বা CRUD: Create, Read, Update, Delete.
অ্যাপ এম এল সার্ভার
অ্যাপ এম এল দুটি সার্ভার টাইপ ব্যবহার করে, পিএইচপি ও ডটনেট।
অ্যাপ এম এল সার্ভার স্ক্রিপ্ট ব্যবহার করে এসকিউএল ডাটাবেসে যেমন মাইএসকিউএল ও এসকিউএল ডাটাবেসে প্রবেশ করা যায়। এই সার্ভার স্ক্রিপ্ট অত্যন্ত শক্তিশালী, যেকোনো পিএইচপি ও ডটনেট সার্ভারে ইন্সটল করা যায়।
অ্যাপ এম এল ওয়েব এসকিউএল
দ্রুত ওয়েব এপ্লিকেশন ডেভলাপমেন্ট ও প্রোটোটাইপিঙের জন্য অ্যাপ এম এল ওয়েব এসকিউএল ব্যবহার করে ব্রাউজারে ওয়েব সার্ভারকে নকল করতে পারে। ওয়েব এসকিউএল হল একধরণের ওয়েবপেজ এপিআই যা এসকিউএল ব্যবহার করে ব্রাউজারে ডাটা সংরক্ষণের কাজ করে। এই এপিআই গুগল ক্রোম, অপেরা, সাফারি ও এনড্রয়েড ব্রাউজারে সমর্থিত। শুধু ব্রাউজারে নিচের স্ক্রিপ্ট সংযোজন করতে হবে,
<scriptsrc=”http://www.w3schools.com/appml/2.0.3/appml_sql.js”></script>
May 26
AppML কেস স্টাডি – কর্মকর্তা-কর্মচারী (AppML Case Study – Employees)
এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html>
<html lang="en-US">
<title>Employees</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<div class="container">
<h1>Employees</h1>
<div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_employeesform"
appml-controller="myFormController">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label>Last Name:</label>
<input id="LastName" class="form-control">
</div>
<div class="form-group">
<label>First Name:</label>
<input id="FirstName" class="form-control">
</div>
<div class="form-group">
<label>Date of Birth:</label>
<input id="BirthDate" class="form-control">
</div>
<div class="form-group">
<label>Photo:</label>
<input id="Photo" class="form-control">
</div>
<div class="form-group">
<label>Notes:</label>
<input id="Notes" class="form-control">
</div>
</div>
<div appml-data="local?model=model_employeeslist">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th></th>
<th>Last Name</th>
<th>First Name</th>
<th>Date of Birth</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer"
onclick="appml('Form01').run({{EmployeeID}})">
<span class="glyphicon glyphicon-edit"></span>
</td>
<td>{{LastName}}</td>
<td>{{FirstName}}</td>
<td>{{BirthDate}}</td>
</tr>
</table>
</div>
</div>
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display = "";
}
}
</script>
</body>
</html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Employees",
"orderby" : "LastName"
},
"filteritems" : [
{"item" : "LastName"},
{"item" : "FirstName"}
],
"sortitems" : [
{"item" : "LastName"},
{"item" : "FirstName"}
]
}
ফরম মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Employees",
"maintable" : "Employees",
"keyfield" : "EmployeeID"
},
"updateItems" : [
{"item" : "LastName"},
{"item" : "FirstName"},
{"item" : "BirthDate"},
{"item" : "Photo"},
{"item" : "Notes"}
]
}
May 26
AppML কেস স্টাডি – শ্রেণীবিভাগ সমূহ (AppML Case Study – Categories)
এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html>
<html lang="en-US">
<title>Categories</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<div class="container">
<h1>Categories</h1>
<div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_categoriesform"
appml-controller="myFormController">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label>CategoryName:</label>
<input id="CategoryName" class="form-control">
</div>
<div class="form-group">
<label>Description:</label>
<input id="Description" class="form-control">
</div>
</div>
<div appml-data="local?model=model_categorieslist">
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th></th>
<th>Category</th>
<th>Description</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer"
onclick="appml('Form01').run({{CategoryID}})">
<span class="glyphicon glyphicon-edit"></span>
</td>
<td>{{CategoryName}}</td>
<td>{{Description}}</td>
</tr>
</table>
</div>
</div>
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display = "";
}
}
</script>
</body>
</html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Categories"
}
}
ফরম মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Categories",
"maintable" : "Categories",
"keyfield" : "CategoryID"
},
"updateItems" : [
{"item" : "CategoryName"},
{"item" : "Description"}
]
}
May 26
AppML কেস স্টাডি – কোনো পরিবহনে মাল লেনদেনকারী (AppML Case Study – Shippers)
এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html>
<html lang="en-US">
<title>Shippers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<div class="container">
<h1>Shippers</h1>
<div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_shippersform"
appml-controller="myFormController">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label>ShipperName:</label>
<input id="ShipperName" class="form-control">
</div>
<div class="form-group">
<label>Phone:</label>
<input id="Phone" class="form-control">
</div>
</div>
<div appml-data="local?model=model_shipperslist">
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th></th>
<th>Shipper</th>
<th>Phone</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer"
onclick="appml('Form01').run({{ShipperID}})">
<span class="glyphicon glyphicon-edit"></span>
</td>
<td>{{ShipperName}}</td>
<td>{{Phone}}</td>
</tr>
</table>
</div>
</div>
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display = "";
}
}
</script>
</body>
</html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Shippers"
}
}
ফরম মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Shippers",
"maintable" : "Shippers",
"keyfield" : "ShipperID"
},
"updateItems" : [
{"item" : "ShipperName"},
{"item" : "Phone"}
]
}
May 26
AppML কেস স্টাডি – সরবরাহকারী পাইকার পরিবেশক (AppML Case Study – Suppliers)
এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html> <html lang="en-US"> <title>Suppliers</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <div class="container"> <h1>Suppliers</h1> <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_suppliersform"
appml-controller="myFormController">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label>SupplierID:</label>
<input id="SupplierID" class="form-control">
</div>
<div class="form-group">
<label>SupplierName:</label>
<input id="SupplierName" class="form-control">
</div>
<div class="form-group">
<label>ContactName:</label>
<input id="ContactName" class="form-control">
</div>
<div class="form-group">
<label>Address:</label>
<input id="Address" class="form-control">
</div>
<div class="form-group">
<label>PostalCode:</label>
<input id="PostalCode" class="form-control">
</div>
<div class="form-group">
<label>City:</label>
<input id="City" class="form-control">
</div>
<div class="form-group">
<label>Country:</label>
<input id="Country" class="form-control">
</div>
<div class="form-group">
<label>Adress:</label>
<input id="Phone" class="form-control">
</div>
</div>
<div appml-data="local?model=model_supplierslist">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th></th>
<th>Supplier</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer"
onclick="appml('Form01').run({{SupplierID}})">
<span class="glyphicon glyphicon-edit"></span>
</td>
<td>{{SupplierName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
<td><a href='' onclick="openProducts({{SupplierID}});return false;">Products</a></td>
</tr>
</table>
</div>
<div id="ProductsSection" class="jumbotron" style="display:none" appml-data="local?model=model_productslist" appml-controller="myProductsController">
<button onclick="document.getElementById('ProductsSection').style.display='none';" type="button" class="close"><span>×</span></button>
<h2>{{records[0]['SupplierName']}}</h2>
<table class="table table-striped table-bordered">
<tr>
<th>Product</th>
<th>Category</th>
<th>Supplier</th>
</tr>
<tr appml-repeat="records">
<td>{{ProductName}}</td>
<td>{{CategoryName}}</td>
<td>{{SupplierName}}</td>
</tr>
</table>
</div>
</div>
<script>
function openProducts(id) {
appml("ProductsSection").clearQuery();
appml("ProductsSection").setQuery("Products.SupplierID", id);
appml("ProductsSection").run();
}
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display = "";
}
}
function myProductsController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("ProductsSection").style.display = "";
}
}
</script>
</body>
</html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Suppliers",
"orderby" : "SupplierName"
},
"filteritems" : [
{"item" : "SupplierName"},
{"item" : "City"},
{"item" : "Country"}
],
"sortitems" : [
{"item" : "SupplierName"},
{"item" : "City"},
{"item" : "Country"}
],
"rowsperpage" : 10
}
ফরম মডেল
{
"database" : {
"connection" : "localmysql",
"maintable" : "Customers",
"keyfield" : "CustomerID",
"sql" : "SELECT * FROM Customers"
},
"updateItems" : [
{"item" : "CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}
]
}
May 26
AppML কেস স্টাডি – পণ্য (AppML Case Study – Products)
এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html>
<html lang="en-US">
<title>Products</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<div class="container">
<h1>Products</h1>
<div id="Form01" class="jumbotron" style="display:none" appml-controller="myFormController">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label>ProductName:</label>
<input id="ProductName" class="form-control">
</div>
<div class="form-group">
<label>Supplier:</label>
<div appml-data="local?model=model_dropdown_suppliers">
<select id="SupplierID" class="form-control">
<option appml-repeat="records" value="{{SupplierID}}">{{SupplierName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label>Category:</label>
<div appml-data="local?model=model_dropdown_categories">
<select id="CategoryID" class="form-control">
<option appml-repeat="records" value="{{CategoryID}}">{{CategoryName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label>Unit:</label>
<input id="Unit" class="form-control">
</div>
<div class="form-group">
<label>Price:</label>
<input id="Price" onchange="myValidator(this)" class="form-control">
</div>
</div>
<div appml-data="local?model=model_productslist" appml-controller="myListController">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_productsquery_local.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th></th>
<th>Product Name</th>
<th>Category</th>
<th>Supplier</th>
<th>Price</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer"
onclick="appml('Form01').run({{ProductID}})">
<span class="glyphicon glyphicon-edit"></span>
</td>
<td>{{ProductName}}</td>
<td>{{CategoryName}}</td>
<td>{{SupplierName}}</td>
<td>{{Price}}</td>
</tr>
</table>
</div>
<h3 id="sumprice"></h3>
</div>
<script>
function myValidator(item) {
var obj = appml("Form01");
obj.message = "validate";
obj.validate = {};
obj.validate.item = item.id;
obj.validate.value = item.value;
myFormController(obj);
}
function myListController($appml) {
if ($appml.message == "done") {
var i, x, tot = 0;
x = $appml.data.records;
for (i = 0; i < x.length; i++) {
tot += Number(x[i].Price);
}
document.getElementById("sumprice").innerHTML =
x.length + " products. Total price " + tot;
}
if ($appml.message == "display") {
if ($appml.display.name == "ProductName") {
$appml.display.value = $appml.display.value.toUpperCase();
}
}
}
function myFormController($appml) {
if ($appml.message == "ready") {
$appml.dataSource = "local?model=model_productsform";
return -1;
}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display = "";
}
if ($appml.message == "validate") {
if ($appml.validate.item == "Price") {
if (isNaN($appml.validate.value)) {
$appml.setError(15, "Price must be a number");
return;
}
}
}
}
</script>
</body>
</html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT ProductID,ProductName,CategoryName,SupplierName,Price FROM ((Products LEFT JOIN Suppliers ON Products.SupplierID=Suppliers.SupplierID) LEFT JOIN Categories ON Products.CategoryID=Categories.CategoryID)",
"orderby" : "ProductName"
},
"filteritems" : [
{"item" : "ProductName", "label" : "Name"},
{"item" : "Products.SupplierID", "type" : "number", "hidden" : "true"},
{"item" : "Suppliers.SupplierID", "label" : "Supplier"},
{"item" : "Categories.CategoryID", "label" : "Category"}
],
"sortitems" : [
{"item" : "ProductName"}
]
ফরম মডেল
{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Products",
"maintable" : "Products",
"keyfield" : "ProductID"
},
"updateItems" : [
{"item" : "ProductName"},
{"item" : "SupplierID"},
{"item" : "CategoryID"},
{"item" : "Unit"},
{"item" : "Price"}
]
}
May 26
এসএসসি Quiz 04: কম্পিউটার শিক্ষা : অধ্যায় ০৪ (সংখ্যা পদ্ধতি ও কম্পিউটার লজিক)
[slickquiz id=6]
May 25
এসএসসি Quiz 03: কম্পিউটার শিক্ষা : অধ্যায় ০৩ (কম্পিউটার সফটওয়্যার ও অপারেটিং সিস্টেম)
[slickquiz id=5]
