Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

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

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

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

 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>