আদনান নাহিদ
এই অধ্যায়ে আমরা একটি ওয়েব অ্যাপ্লিকেশনের জন্য একটি প্রোটোটাইপ তৈরি করবো ।
একটি 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>
