রিদওয়ান বিন শামীম
এই অধ্যায়ে আমরা একটি ডাটাবেস থেকে রেকর্ড লিস্ট করব।
নতুন মডেল তৈরি করা
পূর্ববর্তী অধ্যায়ে ডাটাবেস তৈরি করতে মডেল ব্যবহার করা হয়েছে। এখন ফিলটার ও সংক্ষিপ্ত বর্ণনাসহ নতুন মডেল তৈরি করব,
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>×</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"><></option> <option value="2"><</option> <option value="3">></option> <option value="4"><=</option> <option value="5">>=</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>