AppML কেস স্টাডি – টেক্সট ফাইল (AppML Case Study – Text Files)

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <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" appml-data="appml.php?model=model_cd_from_txt">
 <h1>CD Collection</h1>
 <h3>Extracted from an XML file</h3>
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
 <table class="table table-striped table-bordered">
 <tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{Title}}</td>
    <td>{{Artist}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>
 </div>
</body>
 </html>

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল


{
 "rowsperpage" : 7,
 "data" : {
    "type" : "csvfile",
    "filename" : "cd_catalog.txt",
    "items" : [
       {"name" : "Title", "index" : 1},
       {"name" : "Artist", "index" : 2},
       {"name" : "Price", "index" : 5}
    ]
 }
}

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:


Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990

 

 

এসএসসি Quiz 02: কম্পিউটার শিক্ষা : অধ্যায় ০২ (কম্পিউটার সংগঠন)

[slickquiz id=4]

অ্যাপ এম এল কেস (AppML Cases)

রিদওয়ান বিন শামীম

 

এই কেস স্টাডিগুলোর মাধ্যমে বোঝানোর চেষ্টা করা হবে কীভাবে অ্যাপ এম এল ব্যবহার করে ইন্টারনেট এপ্লিকেশন তৈরি করা যায়।

 

১ম পার্টঃ ইন্টারনেট ফাইলে ঢুকা

  • টেক্সট ফাইলে ঢুকা
  • এক্সএমএল ফাইলে ঢুকা
  • জেএসওএন ফাইলে ঢুকা

 

২য় পার্টঃ ইন্টারনেট ডাটাবেসে ঢুকাঃ

  • ডাটাবেস ডাটা লিস্টিং করা,
  • ডাটাবেস ডাটা ফিল্টারিং করা,
  • ডাটাবেস ডাটা এডিট করা।

 

অ্যাপ এম এল ব্রাউজার ও অ্যাপ এম এল সার্ভার

এই কেস স্টাডিতে, ব্রাউজার (appml.js) ও সার্ভার (appml.php) দুটিতেই অ্যাপ এম এল চলতে পারে।

 

পরবর্তী অধ্যায়গুলোতে জানা যাবে কিভাবে কোনও সার্ভারকে ব্রাউজারে নকল করা যাবে।

 

টেক্সট ফাইলে ঢুকা

টেক্সট ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

d_catalog.txt


 Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
 Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
 Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
 Still got the blues,Gary Moore,UK,Virgin records,10.20,1990

 

এক্সএমএল ফাইলে ঢুকা

এক্সএমএল ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

cd_catalog.xml


<?xml version="1.0" encoding="ISO-8859-1"?>
 <CATALOG>
 <CD>
   <TITLE>Empire Burlesque</TITLE>
   <ARTIST>Bob Dylan</ARTIST>
   <COUNTRY>USA</COUNTRY>
   <COMPANY>Columbia</COMPANY>
   <PRICE>10.90</PRICE>
   <PUBLISHED>1985</PUBLISHED>
 </CD>
 <CD>
   <TITLE>Hide your heart</TITLE>
   <ARTIST>Bonnie Tyler</ARTIST>
   <COUNTRY>UK</COUNTRY>
   <COMPANY>CBS Records</COMPANY>
   <PRICE>9.90</PRICE>
   <PUBLISHED>1988</PUBLISHED>
 </CD>


জেএসওএন ফাইলে ঢুকা

জেএসওএন ফাইলে ঢুকার জন্য আমরা যে ধরণের ফাইল ব্যবহার করি,

cd_catalog.js


{
 "cd" : [
 { "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
 { "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
 { "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
 { "title" : "Still got the blues", "artist" : "Gary Moore", "price" : "10.20" },

ডাটাবেস

টেস্ট ডাটাবেস এধরনের অনেকগুলো টেবিল ব্যবহার করে,

কাস্টমার

গ্রাহক ঠিকানা শহর দেশ
Around the Horn 120 Hanover Sq. London UK
Berglunds snabbkjøp Berguvsvägen 8 Luleå Sweden
Blauer See Delikatessen Forsterstr. 57 Mannheim Germany
Blondel père et fils 24, place Kléber Strasbourg France
Bólido Comidas preparadas C/ Araquil, 67 Madrid Spain
Bottom-Dollar Markets 23 Tsawassen Blvd. Tsawassen Canada

 

সরবরাহকারী

সরবরাহকারী ঠিকানা শহর দেশ
Exotic Liquid 49 Gilbert St. London UK
New Orleans Cajun Delights P.O. Box 78934 New Orleans USA
Grandma Kelly’s Homestead 707 Oxford Rd. Ann Arbor USA
Tokyo Traders 9-8 SekimaiMusashino-shi Tokyo Japan
Cooperativa de Quesos ‘Las Cabras’ Calle del Rosal 4 Oviedo Spain
Mayumi’s 92 Setsuko Chuo-ku Osaka Japan
Pavlova, Ltd. 74 Rose St. Moonie Ponds Melbourne Australia
Specialty Biscuits, Ltd. 29 King’s Way Manchester UK
PB Kn ckebr d AB Kaloadagatan 13 G teborg Sweden
Refrescos Americanas LTDA Av. das Americanas 12.890 S o Paulo Brazil

 

পণ্য

পণ্য প্রতি এককের মাপ একক মূল্য স্টকে একক
Chai 10 boxes x 20 bags 18 39
Chang 24 – 12 oz bottles 19 17
Aniseed Syrup 12 – 550 ml bottles 10 13
Chai 10 boxes x 20 bags 18 39
Chef Anton’s Gumbo Mix 36 boxes 21 0
Grandma’s Boysenberry Spread 12 – 8 oz jars 25 120
Uncle Bob’s Organic Dried Pears 12 – 1 lb pkgs. 30 15
Northwoods Cranberry Sauce 12 – 12 oz jars 40 6
Mishi Kobe Niku 18 – 500 g pkgs. 97 29
Ikura 12 – 200 ml jars 31 31

 

 

SSC Quiz 01 : কম্পিউটার শিক্ষা অধ্যায় ০১ (কম্পিউটার ও কম্পিউটারের ইতিহাস)

[slickquiz id=3]

অ্যাপ এম এল এপিআই (AppML API)

রিদওয়ান বিন শামীম

 

অ্যাপ এম এল এপিআই অ্যাপ এম এল এর প্রক্রিয়া ও বৈশিষ্ট্য প্রকাশ করে থাকে।

 

প্রক্রিয়া ও বৈশিষ্ট্য দ্বারা কি কি সম্ভব?

প্রক্রিয়া ও বৈশিষ্ট্যের মাধ্যমে-

  • অ্যাপ এম এল এপ্লিকেশন তৈরি করা সম্ভব,
  • এপ্লিকেশনকে ডাটা দ্বারা সমৃদ্ধ করা সম্ভব,
  • ওয়েবপেজে ব্যবহারের জন্য এপ্লিকেশন ডাটা সন্ধান করা সম্ভব

 

উদাহরণঃ

new AppML() দ্বারা নতুন অ্যাপ এম এল অবজেক্ট তৈরি করা সম্ভব,

dataSource অ্যাপ এম এল অবজেক্টের ডাটা সোর্স নির্ণয় করে,

data.records ডাটা রেকর্ড সংরক্ষণ করে।

 

রেকর্ড সংরক্ষণ করে এইচটিএমএল উপাদানে অবজেক্ট দেখা সম্ভব।

উদাহরণ


// Create an AppML object and fetch the data
 obj = new AppML();
 obj.dataSource = "http://www.w3schools.com/appml/customers.php";
 obj.getData();
 
 // Locate the data records
 myArr = obj.data.records;
 len = myArr.length;
 
 // Display the records
 for (i = 0; i < myArr.length; i++) {
     txt += myArr[i].CustomerName + "<br>";
 }
 document.getElementById("demo").innerHTML = txt;

 

 

ফলাফলঃ


 Alfreds Futterkiste
 Berglunds snabbköp
 Centro comercial Moctezuma
 Ernst Handel
 FISSA Fabrica Inter. Salchichas S.A.
 Galería del gastrónomo
 Island Trading
 Königlich Essen
 Laughing Bacchus Wine Cellars
 Magazzini Alimentari Riuniti
 North/South
 Paris spécialités
 Rattlesnake Canyon Grocery
 Simons bistro
 The Big Cheese
 Vaffeljernet
 Wolski Zajazd

 

 

অ্যাপ এম এল এর কিছু প্রক্রিয়া

 

প্রক্রিয়া বর্ণনা
new AppML() নতুন AppML অবজেক্ট তৈরি করে
run() একটি এপ্লিকেশন অবজেক্ট রান করায়
appml(“name”) appml অবজেক্টকে নির্ধারিত নামসহ পুনরাবৃত্ত করে
displayMessage(text) নির্ধারিত ম্যাসেজ প্রদর্শন করে
setError(no, description) ভুল এবং ভুলের বিবরণ প্রদর্শন করে

 

অ্যাপ এম এল এর কিছু বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
appName আইডিসহ এপ্লিকেশনের নাম
container এপ্লিকেশনের কন্টেইনার উপাদান
controller এপ্লিকেশনের কন্ট্রোলার
data এপ্লিকেশনের ডাটা অবজেক্ট
dataSource এপ্লিকেশনের ডাটা সোর্স
message এপ্লিকেশন ম্যাসেজ

 

ডাটা অবজেক্টের কিছু বৈশিষ্ট্য

 

বৈশিষ্ট্য বর্ণনা
data.model এপ্লিকেশনের ডাটা মডেল
data.records এপ্লিকেশনের ডাটা রেকর্ড

 

অ্যাপ এম এল মডেল (AppML Models)

রিদওয়ান বিন শামীম

 

অ্যাপ এম এল মডেল কোনও এপ্লিকেশনকে বিবৃত করে।

 

অ্যাপ এম এল মডেল আসলে কী

অ্যাপ এম এল মডেল একধরনের জাভাস্ক্রিপ্ট অবজেক্ট বা জেএসওএন, যা কোনও এপ্লিকেশনকে বিবৃত করে। একটি ছোট মডেল ডাটাবেস থেকে প্রাপ্ত তথ্যের ভিত্তিতে সম্পূর্ণ এপ্লিকেশনকে বিবৃত করতে পারে।


{
 "database" : {অ্যাপ এম এল
     "connection" : "localmysql",
     "sql" : "SELECT * FROM Customers"}
 }

 

 

অ্যাপ এম এল মডেল যা যা করতে পারে

অ্যাপ এম এল মডেলের কর্মপরিধির মধ্যে আছে,

 

  • মাইএসকিউএল, এসকিউএল সার্ভার, এক্সেস ও ওরাকলের মত ডাটাবেসের কানেকশন সংজ্ঞায়িত করা,
  • জেএসওএন, এক্সএমএল ও অন্যান্য টেক্সট ফাইলের কানেকশন সংজ্ঞায়িত করা,
  • ডাটাবেস থেকে প্রাপ্ত তথ্যের ভিত্তিতে এসকিউএল বিবৃতিকে সংজ্ঞায়িত করা,
  • ফিল্টারকে সংজ্ঞায়িত ও সীমাবদ্ধতাকে চিহ্নিত করা,
  • ডাটা টাইপ, ডাটা ফরম্যাট সংজ্ঞায়িত করা এবং সীমাবদ্ধতাকে আপডেট করা,
  • এপ্লিকেশনের নিরাপত্তা, ইউজার গ্রুপ ও ইউজার এসব সংজ্ঞায়িত করা ।

 

উদাহরণঃ ইউজারকে ডাটা ফিল্টার করার(সার্চ, সর্ট ইত্যাদি ) সুবিধা দেয়ার জন্য মডেলে ফিল্টার ইনফরমেশন যোগ করা যায়,

 


“filteritems” : [

     {"item" : "CustomerName", "label" : "Customer"},
     {"item" : "City"},
     {"item" : "Country"}
 ]

 

 

 

 

ইউজারকে ডাটা আপডেট করার সুবিধা দেয়ার জন্য মডেলে আপডেট ইনফরমেশন যোগ করা যায়,

 

 


“updateItems” : [
{“item” : “CustomerName”},
{“item” : “Address”},
{“item” : “PostalCode”},
{“item” : “City”},
{“item” : “Country”}
]


 

 

 

মডেল ছাড়া এপ্লিকেশন

আমাদের টিউটোরিয়ালের প্রথম দিকে যেসব এপ্লিকেশন ব্যবহার করা হয়েছে সেগুলোতে কোনও মডেল ব্যবহার করা হয়নি।

 

 

নোটঃ পরবর্তী অধ্যায়গুলোতে আমরা ডাটাবেস, পঠন, ফিল্টার এবং আপডেট ডাটা যা মডেলে বিবৃত হয়েছে, তা নিয়ে আরও আলোচনা করব।

 

 

 

 

 

অ্যাপ এম এল ম্যাসেজ (AppML Messages)

রিদওয়ান বিন শামীম

 

অ্যাপ এম এল ম্যাসেজ এবং কার্যপ্রণালী

যখন অ্যাপ এম এল কোনও কাজ করতে যায় তখন এটি কন্ট্রোলারে একটি এপ্লিকেশন অবজেক্ট ($appml) পাঠায়। এপ্লিকেশন অবজেক্টের একটি বৈশিষ্ট্য হল ম্যাসেজ ($appml.message), যা এপ্লিকেশনের অবস্থা বর্ণনা করে। এই ম্যাসেজ পরীক্ষা করে কাজের ধরণ অনুযায়ী জাভাস্ক্রিপ্ট কোড ব্যবহার করা যায়।

উদাহরণ,


function myController($appml) {
     if ($appml.message == "ready") {alert ("Hello Application");}
 }

 

 

অ্যাপ এম এল এর ম্যাসেজ

অ্যাপ এম এল ম্যাসেজের তালিকাঃ

 

Message Description
“ready” অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত
“loaded” অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত
“display” অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে দেখায়।
“done” অ্যাপ এম এল সম্পন্ন হওয়ার পর দেখায়
“submit” অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়
“error” অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়

 

 

“ready” ম্যাসেজ

অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত। ইনিশিয়াল ডাটার জন্য (শুরুর মান) আদর্শ ক্ষেত্র,

 

উদাহরনঃ


<div appml-controller="myController" appml-data="customers.js">
 <h1>Customers</h1>
 <p>{{today}}</p>
 <table>
   <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>
 <p>Copyright {{copyright}}</p>
 </div>
 
 <script>
 function myController($appml) {
     if ($appml.message == "ready") {
         $appml.today = new Date();
         $appml.copyright = "W3Schools"
     }
 }
 </script>

 

উপরের উদাহরণে $appml.message হল “ready”, কন্ট্রোলার এপ্লিকেশনে দুটি বৈশিষ্ট্য যোগ করেছে, (today এবং copyright) । এপ্লিকেশন রান করলে নতুন দুটি বৈশিষ্ট্য কাজ করবে।

 

“loaded”ম্যাসেজঃ

অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত এমন ক্ষেত্রে “loaded” ম্যাসেজ দেখায়,কোনও পরিবর্তনের প্রয়োজন থাকলে এই ধাপে তা করা ভাল।

উদাহরনঃ

function myController($appml) {
    if ($appml.message == “loaded”) {
        // compute your values here before display
}
}

 

“display” ম্যাসেজ”

অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে এই ম্যাসেজ দেখায়।আউটপুট মডিফাইয়ের জন্য এই ধাপ খুব ভাল।

 

উদাহরণঃ <div appml_app=”myController” appml-data=”customers.js”>


<h1>Customers</h1>
 <table>
   <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>
 
 <script>
 function myController($appml) {
     if ($appml.message == "display") {
         if ($appml.display.name == "CustomerName") {
             $appml.display.value = $appml.display.value.substr(0,15); 
         }
         if ($appml.display.name == "Country") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 </script>

 

উপরের উদাহরণে “CustomerName” শব্দটিকে ১৫ অক্ষরে বিস্তারিত করা হয়েছে এবং “Country” শব্দটিকে বড় হাতের অক্ষরে পরিবর্তিত করা হয়েছে।

 

 

“done” ম্যাসেজ

অ্যাপ এম এল সম্পন্ন হওয়ার পর এই ম্যাসেজ দেখায়, এপ্লিকেশন ডাটা ক্লিন ও ক্যালকুলেট করার জন্য এই ধাপ খুব উপযোগী।

উদাহরণ,


<script>
 function myController($appml) {
     if ($appml.message == "done") {
         calculate data here
     }
 }
 </script>

 

 

 

 

“submit” ম্যাসেজ

অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়, এপ্লিকেশন ইনপুট শনাক্তকরণের জন্য উপযোগী।

উদাহরণ,


<script>
 function myController($appml) {
     if ($appml.message == "submit") {
         validate data here
     }
 }
 </script>

 

 

“error” ম্যাসেজ

অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়, এই ধাপ ভুল সংশোধনের জন্য উপযোগী।

 

উদাহরণ,


<script>
 function myController($appml) {
     if ($appml.message == "error") {
         alert ($appml.error.number + " " + $appml.error.description)
     }
 }
 </script>

 

 

 

অ্যাপ এম এল এর বৈশিষ্ট্য

অ্যাপ এম এল এর কমন কিছু বৈশিষ্ট্য নিচের ছকে দেয়া হল,

 

Property Description
$appml.message এপ্লিকেশনের বর্তমান অবস্থা
$appml.display.name প্রদর্শনকরা হবে এমন ডাটা ফিল্ডের নাম
$appml.display.value প্রদর্শনকরা হবে এমন ডাটা ফিল্ডের মান
$appml.error.number ভুলের সংখ্যা
$appml.error.description ভুলের বিবরণ

 

 

 

অ্যাপ এম এল কন্ট্রোলার (AppML Controllers)

রিদওয়ান বিন শামীম

 

অ্যাপ এম এল কন্ট্রোলারের উদ্দেশ্য হল এপ্লিকেশনকে নিয়ন্ত্রণ করা।

কন্ট্রোলার যা যা করতে পারেঃ

  • প্রারম্ভিক ডাটা সেট করা,
  • এপ্লিকেশন ডাটা পরিবর্তন করা,
  • ইনপুট এবং আউটপুট নিয়ন্ত্রণ করা,
  • ডাটা ভ্যালিডেট করা,
  • ডাটা সংক্ষেপ করা,
  • ভুলক্রুটি নিয়ন্ত্রণ,
  • এপ্লিকেশন শুরু ও শেষ করা,
  • আরও অনেক কিছু করা যায় এর দ্বারা।

 

 

কন্ট্রোলার ব্যতিত

অ্যাপ এম এল এপ্লিকেশন বাই ডিফল্ট কন্ট্রোলার ব্যতিত রান করে।

উদাহরণ,


<table appml-data="customers.js">
 <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>

 

 

 

কন্ট্রোলার সহ

জাভাস্ক্রিপ্টের সাহায্যে অ্যাপ এম এল এপ্লিকেশন কন্ট্রোলারসহ রান করানো যায়।

কন্ট্রোলার একটি জাভাস্ক্রিপ্ট ফাংশন যা আমরা প্রয়োগ করে থাকি।

appml-controller এট্রিবিউট দ্বারা প্রোগ্রামে কন্ট্রোলার ফাংশন বোঝানো হয়।

উদাহরণ,


<h1>Customers</h1>
 <table appml-data="customers.js" appml-controller="myController">
   <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>
 
 <script>
 function myController($appml) {
     if ($appml.message == "display") {
         if ($appml.display.name == "CustomerName") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 </script>

 

উপরের উদাহরণে কন্ট্রোলার (myControlller), “CustomerName” কে আপারকেস অক্ষরে পরিবর্তিত করে দেখিয়েছে।

 

কন্ট্রোলার থাকলে অ্যাপ এম এল কন্ট্রোলারে এপ্লিকেশন অবজেক্ট ($appml) পাঠায়, অত্যন্ত গুরুত্বপূর্ণ কার্যক্রম সম্পাদনের জন্য। এপ্লিকেশনের একটি বৈশিষ্ট্য হল ম্যাসেজ ($appml.message), যা এপ্লিকেশনের অবস্থা প্রকাশ করে।

 

 

Message Description
“ready” অ্যাপ এম এল শুরুর পরে দেখায়, লোড করতে প্রস্তুত
“loaded” অ্যাপ এম এল লোডেড, ডাটা দেখাতে প্রস্তুত
“display” অ্যাপ এম এল কোনও ডাটা আইটেম দেখানোর আগে দেখায়।
“done” অ্যাপ এম এল সম্পন্ন হওয়ার পর দেখায়
“submit” অ্যাপ এম এল ডাটা সাবমিটের আগে দেখায়
“error” অ্যাপ এম এল কোনও ভুলের সম্মুখীন হলে দেখায়

 

পরবর্তী অধ্যায়গুলোতে পর্যায়ক্রমে ম্যাসেজের বিস্তারিত ব্যাখ্যা দেয়া হবে।

 

HTML5 Quiz Test : 01

[slickquiz id=1]

অ্যাপ এম এলঃ এইচটিএমএল অন্তর্ভুক্ত করা (AppML HTML Includes)

রিদওয়ান বিন শামীম

 

এইচটিএমএলের ভেতর এইচটিএমএল অন্তর্ভুক্ত করা

এইচটিএমএল পেজের সর্বত্র একটি আদর্শ এইচটিএমএল ফুটার (HTML footer) অন্তর্ভুক্ত করা  হতে পারে এর আদর্শ উদাহরণ।

আদর্শ এইচটিএমএল ফুটারসমৃদ্ধ ফাইলের উদাহরণ নিচে দেয়া হল,

inc_footer.htm


 <hr style="margin-top:10px;">
 <p style="font-size:11px">2015&copy; W3Schools. All rights reserved.</p>
 <hr>

 

 

এখানে “inc_footer.htm” অন্তর্ভুক্তির জন্য appml-include-html এট্রিবিউট ব্যবহৃত হয়েছে।

উদাহরণঃ


<!DOCTYPE html>
 <html lang="en-US">
 
 <title>Customers</title>
 <link rel="stylesheet" href="style.css">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> 
 
 <body>
 
 <h1>Customers</h1>
 <table appml-data="customers.js">
 <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 appml-include-html="inc_footer.htm"></div>
 
 </body>
 </html>