অ্যাপ এম এল লিস্ট (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>