রিদওয়ান বিন শামীম
অ্যাপ এম এল এপ্লিকেশন তৈরির দুটি সহজ ধাপ নিচে দেখানো হল,
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" দ্বারা প্রতিটি আইটেমের জন্য এইচটিএমএল এলিমেন্ট রিপিট করা সম্ভব হয়েছে।
{{ }} চিহ্ন অ্যাপ এম এল উপাদান বোঝাতে ব্যবহৃত হয়েছে।
