Daftar AppML
Dalam bab ini, kita akan membuat daftar record dari database.
Contoh di halaman ini menggunakan database SQL lokal.
Basis data SQL lokal tidak berfungsi di IE atau Firefox. Gunakan Chrome atau Safari.
Buat Model Baru
Pada bab sebelumnya, Anda menggunakan model untuk membuat database.
Sekarang buat model baru, termasuk definisi filter dan sortir:
model_customerslist.js
{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
},
"filteritems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
],
"sortitems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
]
}
Gunakan model dalam aplikasi Anda:
Contoh
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<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>
Buat Template Filter HTML
Buat HTML untuk filter Anda:
inc_filter.htm
<div id="appml_filtercontainer" class="w3-container w3-light-grey w3-section
w3-padding-large" style="display:none;">
<span id="appmlbtn_queryClose"
onclick="this.parentNode.style.display='none';" class="w3-button w3-large
w3-right">×</span>
<h2>Filter</h2>
<div id="appml_filter">
<div appml-repeat="filteritems">
<div class="w3-row">
<div class="w3-col m4">
<label>{{label||item}}:</label>
</div>
<div class="w3-col m2">
<input id="appml_datatype_{{item}}" type='hidden'>
<select id="appml_operator_{{item}}" class="w3-select w3-border">
<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="w3-col m6">
<input id="appml_query_{{item}}" class="w3-input w3-border">
</div>
</div>
</div>
</div>
<div id="appml_orderby">
<h2>Order By</h2>
<div class="w3-row">
<div class="w3-col m5">
<select id='appml_orderselect' class="w3-select w3-border">
<option value=''></option>
<option appml-repeat="sortitems" value="{{item}}">{{label ||
item}}</option>
</select>
</div>
<div class="w3-col m7">
ASC <input type='radio' id="appml_orderdirection_asc"
name='appml_orderdirection' value='asc' class="w3-radio">
DESC <input type='radio' id="appml_orderdirection_desc"
name='appml_orderdirection' value='desc' class="w3-radio">
</div>
</div>
</div>
<br>
<button id="appmlbtn_queryOK" type="button" class="w3-btn
w3-green">OK</button>
</div>
Simpan HTML filter dalam file dengan nama yang tepat seperti "inc_filter.htm".
Sertakan HTML filter dalam prototipe Anda dengan appml-include-html :
Contoh
<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="w3-table-all">
<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>