May 28

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন ভূমিকা (JSON – Introduction)

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

 

জেএসওএন(JSON) জাভাস্ক্রিপ্ট অবজেক্টের মূল্যায়ন করে

জেএসওএন ফরম্যাট সিনট্যাক্সভাবে জাভাস্ক্রিপ্ট অবজেক্টের কোডের অনুরূপ। সাদৃশ্য থাকায় জেএসওএন ডাটাকে নেটিভ জাভাস্ক্রিপ্ট অবজেক্টে রূপ দিতে জাভাস্ক্রিপ্ট পারসার(এক্সএমএলের মত) ব্যবহার না করে আদর্শ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে থাকে।

 

নিচের কোডগুলো ব্যবহার করে এই উদাহরণটি পরীক্ষা করে দেখা যেতে পারে

জেএসওএন উদাহরণ, 

 <!DOCTYPE html>
 <html>
 <body>
 
 <h2>JSON Object Creation in JavaScript</h2>
 
 <p id="demo"></p>
 
 <script>
 var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
 
 var obj = JSON.parse(text);
 
 document.getElementById("demo").innerHTML =
 obj.name + "<br>" +
 obj.street + "<br>" +
 obj.phone;
 </script>
 
 </body>
 </html>

 

 

এটি অনেকটাই এক্সএমএলের মত কারণ

  • এক্সএমএল ও জেএসওএন উভয়ই আত্মবিবৃতি মূলক অর্থাৎ মানুষের দ্বারা পঠনযোগ্য।
  • এক্সএমএল ও জেএসওএন উভয়ই স্তরবিন্যাসগত (মানের ভেতর মান)।
  • এক্সএমএল ও জেএসওএন উভয়ের ক্ষেত্রেই পারসার ব্যবহার করা যায় এবং বিভিন্ন প্রোগ্রামিং ভাষায় ব্যবহৃত হতে পারে।
  • এক্সএমএল ও জেএসওএন উভয়ের ক্ষেত্রেই XMLHttpRequest প্রয়োগযোগ্য হতে পারে।

 

এটি অনেকক্ষেত্রে এক্সএমএলের মত নয় কারণ

 

  • জেএসওএন এন্ড ট্যাগ ব্যবহার করে না।
  • জেএসওএন একটু খাটো।
  • জেএসওএন দ্রুত লিখা ও পড়া যায়।
  • জেএসওএন অ্যারি(arrays) ব্যবহার করতে পারে।

সবচেয়ে বড় পার্থক্য হল, এক্সএমএলকে এক্সএমএল পারসার দ্বারা খণ্ডিত করতে হয় কিন্তু জেএসওএনকে আদর্শ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে খণ্ডিত করতে হয়।

 

 

 

জেএসওএন কেন?

 

এজাক্স এপ্লিকেশনে জেএসওএন ব্যবহার এক্সএমএল এরচেয়ে দ্রুত ও সহজ।

 

এক্সএমএল ব্যবহার করে

 

  • এক্সএমএল ডকুমেন্ট আনতে হয়,
  • পুরো ডকুমেন্টের লুপে এক্সএমএল ডোম (XML DOM) ব্যবহার করতে হয়,
  • মান নির্ণয় ও চলকে সংরক্ষণ করতে হয়,

 

জেএসওএন ব্যবহার করে,

  • একটি জেএসওএন স্ট্রিং বের করতে হয়,
  • জেএসওএন ব্যবহার করে সেই স্ট্রিংকে খণ্ডিত করতে হয়।

 

 

 

May 28

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন কর্মপ্রণালীঃ JSON How To

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

জেএসওএন এর একটি গুরুত্বপূর্ণ ব্যবহার হল ওয়েব সার্ভার থেকে তথ্য বা ডাটা পড়া ও ওয়েব পেজে তা দেখানো। কাজ সহজ করার স্বার্থে ফাইলের পরিবর্তে কোন স্ট্রিংকে ইনপুট হিসেবে ব্যবহার করেও এটি করা যায়।

জেএসওএন উদাহরণঃ অবজেক্ট থেকে স্ট্রিং

জাভাস্ক্রিপ্ট স্ট্রিং তৈরি করা যাক যেটিতে জেএসওএন সিনট্যাক্স আছে,

var text = '{ "employees" : [' +
 '{ "firstName":"John" , "lastName":"Doe" },' +
 '{ "firstName":"Anna" , "lastName":"Smith" },' +
 '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

 

 

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্ট সিনট্যাক্সের একটি সাবসেট। JSON.parse(text) নামক জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করা যায়।

var obj = JSON.parse(text);

 

 

পেজে নতুন জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করা যাক,

<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML =
 obj.employees[1].firstName + " " + obj.employees[1].lastName;
 </script>

 

eval() এর ব্যবহার

পূর্ববর্তী ব্রাউজার যাদের JSON.parse ব্যবহারের সুযোগ নেই তাদের জন্য জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করতে eval() ব্যবহার করা একটি উপায়।
উদাহরণ,

var obj = eval (“(” + text + “)”);

 

এখানে বলা উচিৎ, eval() ফাংশন যেকোনো জাভাস্ক্রিপ্টকে কম্পাইল ও সম্পাদন করতে পারে, যেটি অনেক নিরাপত্তাজনিত সমস্যা সৃষ্টি করে, তাই একে এড়িয়ে চলাই ভাল।
জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করতে জেএসওএন পারসার ব্যবহার করা উচিৎ, জেএসওএন পারসার কেবল জেএসওএন টেক্সটকে বুঝতে পারে, স্ক্রিপ্টকে কম্পাইল করে না, ব্রাউজারে যা নেটিভ জেএসওএন সাপোর্ট দেয়, জেএসওএন পারসার অনেকটা দ্রুতও। প্রধান প্রধান যেসব ব্রাউজারে নেটিভ জেএসওএন সাপোর্ট সংযুক্ত, এবং সর্বাধুনিক ECMAScript (JavaScript) সম্পন্ন, সেগুলো হল,

Web Browsers Support

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4

পূর্ববর্তী ব্রাউজারগুলোর জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরী এখানে আছে, https://github.com/douglascrockford/JSON-js

Douglas Crockford জেএসওএন ফরম্যাটকে গড়ে তুলেছেন।

May 28

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন উদাহরণ (JSON Example)

এই উদাহরণটি পিএইচপি এবং মাইএসকউএল দ্বারা চালিত ওয়েব সার্ভার থেকে জেএসওএন ডাটা পড়ে।

<!DOCTYPE html>
 <html>
 <body>
 
 <h1>Customers</h1>
 <div id="id01"></div>
 
 <script>
 var xmlhttp = new XMLHttpRequest();
 var url = "http://www.w3schools.com/website/customers_mysql.php";
 
 xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         myFunction(xmlhttp.responseText);
     }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 
 function myFunction(response) {
     var arr = JSON.parse(response);
     var i;
     var out = "<table>";
 
     for(i = 0; i < arr.length; i++) {
         out += "<tr><td>" +
         arr[i].Name +
         "</td><td>" +
         arr[i].City +
         "</td><td>" +
         arr[i].Country +
         "</td></tr>";
     }
     out += "</table>"
     document.getElementById("id01").innerHTML = out;
 }
 </script>
 
 </body>
 </html>

সার্ভার এ পিএইচপি কোড

সার্ভারে এই পিএইচপি কোড চালিত  হয়

<?php
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json; charset=UTF-8");
 
 $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
 
 $result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
 
 $outp = "[";
 while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
     if ($outp != "[") {$outp .= ",";}
     $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
     $outp .= '"City":"'   . $rs["City"]        . '",';
     $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
 }
 $outp .="]";
 
 $conn->close();
 
 echo($outp);
 ?>

 

স্টাইল ভার্সন

Customers.html

<!DOCTYPE html>
 <html>
 
 <head>
 <style>
 h1 {
     border-bottom: 3px solid #cc9900;
     color: #996600;
     font-size: 30px;
 }
 table, th , td {
     border: 1px solid grey;
     border-collapse: collapse;
     padding: 5px;
 }
 table tr:nth-child(odd) {
     background-color: #f1f1f1;
 }
 table tr:nth-child(even) {
     background-color: #ffffff;
 }
 </style>
 </head>
 
 <body>
 
 <h1>Customers</h1>
 <div id="id01"></div>
 
 <script>
 var xmlhttp = new XMLHttpRequest();
 var url = "http://www.w3schools.com/website/customers_mysql.php";
 
 xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         myFunction(xmlhttp.responseText);
     }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 
 function myFunction(response) {
     var arr = JSON.parse(response);
     var i;
     var out = "<table>";
 
     for(i = 0; i < arr.length; i++) {
         out += "<tr><td>" +
         arr[i].Name +
         "</td><td>" +
         arr[i].City +
         "</td><td>" +
         arr[i].Country +
         "</td></tr>";
     }
     out += "</table>"
     document.getElementById("id01").innerHTML = out;
 }
 </script>
 
 </body>
 </html>

 

 

May 27

অ্যাপ এম এল ফর্ম (AppML Forms)

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

 

এই অধ্যায়ে দেখানো হবে কীভাবে ডাটাবেসের বিপরীতে ইনপুট ফর্ম তৈরি করা যায়।

 

ফর্ম মডেল তৈরি করা

model_customersform.js

{
 "database" : {
     "connection" : "localmysql",
     "maintable" : "Customers",
     "keyfield" : "CustomerID",
     "sql" : "SELECT * FROM Customers"},
 "updateItems" : [
     {"item" : "CustomerName"},
     {"item" : "Address"},
     {"item" : "PostalCode"},
     {"item" : "City"},
     {"item" : "Country"}]
 }

 

 

এইচটিএমএল ফর্ম তৈরি করা

পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়। এখানে ওয়েব পেজে একটি ফর্ম এপ্লিকেশন যোগ করতে হবে,

HTML Form

<div id="Form01" appml-data="local?model=model_customersform"
 class="jumbotron">
 
 <div class="form-group">
   <label for="customername">Customer:</label>
   <input id="customername" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="address">Address:</label>
   <input id="address" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="city">City:</label>
   <input id="city" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="postalcode">Postal Code:</label>
   <input id="postalcode" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="country">Country:</label>
   <input id="country" class="form-control">
 </div>
 
 </div>

 

 

এইচটিএমএল ফর্মের ব্যাখ্যা

appml-data=”local?model=model_customersform” দ্বারা ফরমের জন্য অ্যাপ এম এল এপ্লিকেশন বোঝায়।

 

এইচটিএমএল ফর্ম কমান্ড তৈরি করা

পছন্দসই স্টাইলশিট ব্যবহার করে(এখানে bootstrap ব্যবহার করা হয়েছে) কাঙ্খিত ফর্ম কমান্ড তৈরি করা হয়,

inc_formcommands.htm

<button type="button" class="close" onclick="document.getElementById('Form01').style.display='none';">X</button>
 
 <button type="button" class="close">X</button>
 
 <div class="btn-toolbar" style="margin-bottom:20px;">
 <div class="btn-group">
 
 <button type="button" class="btn btn-default" onclick="appml('Form01').newRecord();">
 <span class="glyphicon glyphicon-new-window"></span> New</button>
 
 <button type="button" class="btn btn-primary" onclick="appml('Form01').saveRecord();">
 <span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
 
 <button type="button" class="btn btn-default" onclick="appml('Form01').deleteRecord();">
 <span class="glyphicon glyphicon-trash"></span> Delete</button>
 
 </div>
 </div>
 
 <div id="appmlmessage" class="alert alert-warning" style="display:none;">
 <button type="button" class="close"
 onclick="this.parentNode.style.display='none';">X</button>
 <div id="message"></div>
 
</div>

 

 

ফর্ম কমান্ড অন্তর্ভুক্তি

ফরমে ফর্ম কমান্ড অন্তর্ভুক্ত করা হয়,

HTML Form

<div id="Form01" appml-data="local?model=model_customersform"
 class="jumbotron">
 
 <div appml-include-html="inc_formcommands.htm"></div>
 
 <div class="form-group">
 <label for="customername">Customer:</label>
 <input id="customername" class="form-control">
 </div>
 
 <label for="address">Address:</label>
 <input id="address" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="city">City:</label>
 <input id="city" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="postalcode">Postal Code:</label>
 <input id="postalcode" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="country">Country:</label>
 <input id="country" class="form-control">
 </div>
 
 </div>

 

 

 

 

ডাটা টেবিলে ক্লিকেবল কলাম যোগ করা

পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়।এখানে আমরা টেবিলে নতুন কলাম যোগ করব।

 

HTML Source

<div appml-data="local?model=model_customerslist">
 
 <h1>Customers</h1>
 <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>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer;width:34px;"
         onclick="appml('Form01').run({{CustomerID}})">
         <span class="glyphicon glyphicon-edit"></span></td>
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
 </table>
 
</div>

 

 

নতুন কলামের অনক্লিক ইভেন্ট অ্যাপ এম এল এর একটি এপ্লিকেশন রান করায়, যা এইচটিএমএল উপাদানের মধ্যে id=”Form01″ পরিচিতি নিয়ে অবস্থান করে।

 

  • appml(‘Form01’) অ্যাপ এম এল এর এপ্লিকেশন পুনরাবৃত্তি করায়,
  • run({{CustomerID}}) প্যারামিটাররূপে কাস্টমার আইডির সাথে এপ্লিকেশন রান করায়।

 

চূড়ান্ত পর্যায়ে, ফর্মকে লুকিয়ে রাখা

ফর্মকে লুকিয়ে রাখতে একধরনের স্টাইল ব্যবহার করা হয়,

 

HTML

<div id="Form01" appml-data="local?model=model_customersform"
 appml-controller="myFormController"
 class="jumbotron" style="display:none">

 

ফর্মে একটি কন্ট্রোলার ব্যবহার করা হয় যেন এটি কেবল তখনই দৃশ্যমান হবে যখন এটি লোডেড ও ডাটা প্রদর্শনের জন্য প্রস্তুত।

Controller

<script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display="";
     }
 }
 </script>

 

 

 

May 27

অ্যাপ এম এল লিস্ট (AppML Lists)

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

 

এই অধ্যায়ে আমরা একটি ডাটাবেস থেকে রেকর্ড লিস্ট করব।

 

নতুন মডেল তৈরি করা

পূর্ববর্তী অধ্যায়ে ডাটাবেস তৈরি করতে মডেল ব্যবহার করা হয়েছে। এখন ফিলটার ও সংক্ষিপ্ত বর্ণনাসহ নতুন মডেল তৈরি করব,

 model_customerslist.js

{
 "rowsperpage" : 10,
 "database" : {
     "connection" : "localmysql",
     "sql" : "SELECT * Customers",
     "orderby" : "CustomerName"
 },
 "filteritems" : [
     {"item" : "CustomerName", "label" : "Customer"},
     {"item" : "City"},
     {"item" : "Country"}
 ],
 "sortitems" : [
     {"item" : "CustomerName", "label" : "Customer"},
     {"item" : "City"},
     {"item" : "Country"}
 ]
 }

 

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

<div appml-data="local?model=model_customerslist">
 <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>

 

আই ই বা ফায়ারফক্স ব্রাউজারে লোকাল ডাটাবেস ব্যবহার কাজে আসবে না। ক্রোম বা সাফারি ব্যবহার করতে হবে।

 

এইচটিএমএল ফিলটার টেম্পলেট তৈরি

ফিলটারের জন্য এইচটিএমএল টেম্পলেট তৈরি করতে হয়,

inc_filter.htm

<div id="appml_filtercontainer" class="jumbotron" style="display:none;">
   <button id="appmlbtn_queryClose" type="button" class="close"><span>&times;</span></button>
   <h2>Filter</h2>
   <div id="appml_filter">
     <div appml-repeat="filteritems">
       <div class="row">
         <div class="col-sm-3">
           <label>{{label||item}}:</label>
         </div>
         <div class="col-sm-2">
           <input id="appml_datatype_{{item}}" type='hidden'>
           <select id="appml_operator_{{item}}" class="form-control">
             <option value="0">=</option>
             <option value="1">&lt;&gt;</option>
             <option value="2">&lt;</option>
             <option value="3">&gt;</option>
             <option value="4">&lt;=</option>
             <option value="5">&gt;=</option>
             <option value="6">%</option>
           </select>
         </div>
         <div class="col-sm-7">
           <input id="appml_query_{{item}}" class="form-control">
         </div>
       </div>
     </div>
   </div>
   <div id="appml_orderby">
     <h2>Order By</h2>
     <div class="row">
       <div class="col-sm-5">
         <select id='appml_orderselect' class="form-control">
           <option value=''></option>
           <option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
         </select>
       </div>
       <div class="col-sm-7">
         ASC <input type='radio' id="appml_orderdirection_asc"
         name='appml_orderdirection' value='asc'>
         DESC <input type='radio' id="appml_orderdirection_desc"
         name='appml_orderdirection' value='desc'>
       </div>
     </div>
   </div>
   <br>
   <button id="appmlbtn_queryOK" type="button" class="btn btn-primary">OK</button>
 </div>

 

 

ফিলটার এইচটিএমএলকে “inc_filter.htm” জাতীয় নামের সঠিক ফাইলে সংরক্ষণ করতে হয়, appml-include-html এর সাথে প্রোটোটাইপে ফিলটার এইচটিএমএলকে অন্তর্ভুক্ত করতে হয়,

<div appml-data="local?model=model_customerslist">
 
 <h1>Customers</h1>
 <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>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

এসএসসি Quiz 05: কম্পিউটার শিক্ষা : অধ্যায় ০৫ (ওয়ার্ড প্রসেসিং)

[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"}
 ]
 }