May 21

অ্যাপ এম এলঃ কীভাবে তৈরি করবেন? (AppML How To)

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

 

অ্যাপ এম এল এপ্লিকেশন তৈরির দুটি সহজ ধাপ নিচে দেখানো হল,

1. HTML ও CSS ব্যবহার করে পেজ তৈরি করা

HTML

 <!DOCTYPE html>
 <html lang="en-US">
 <link rel="stylesheet" href="style.css">
 <title>Customers</title>
 <body>
 <h1>Customers</h1>
 <table>
   <tr>
   <th>Customer</th>
   <th>City</th>
   <th>Country</th>
   </tr>
   <tr>
   <td>{{CustomerName}}</td>
   <td>{{City}}</td>
   <td>{{Country}}</td>
   </tr>
 </table>
 </body>
 </html>

 

{{ }} চিহ্ন অ্যাপ এম এল ডাটার ধারকস্বরূপ।

 

CSS

body {
    font: 14px Verdana, sans-serif;
}
h1 {
    color: #996600;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid grey;
    padding: 5px;
    text-align: left;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}

নোটঃ আমাদের ফেভারিট স্টাইলসিটের পরিবর্তে সিএসএস ব্যবহার করতে পারি।

 

2. অ্যাপ এম এল যোগ করা

নিজের ওয়েবপেজে অ্যাপ এম এল যোগ করার জন্য এই কোড ব্যবহার করা যায়,

<!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>
</body>
</html>

 

 

অ্যাপ এম এল এর ব্যাখ্যাঃ <script src=”http://www.w3schools.com/appml/2.0.3/appml.js”>এর মাধ্যমে অ্যাপ এম এল কে পেজে সংযুক্ত করা যায়।

appml-data=“customers.js” এর দ্বারা অ্যাপ এম এল ডাটাকে এইচটিএমএল এলিমেন্টের সাথ সংযুক্ত করা যায়। আমাদের উদাহরণে আমরা জেএসওএন ফাইল customers.js ব্যবহার করেছি।

appml-repeat=”records” দ্বারা প্রতিটি আইটেমের জন্য এইচটিএমএল এলিমেন্ট রিপিট করা সম্ভব হয়েছে।

{{ }} চিহ্ন অ্যাপ এম এল উপাদান বোঝাতে ব্যবহৃত হয়েছে।