Formulir AppML
Bab ini mendemonstrasikan cara membuat formulir input terhadap 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 Formulir
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"}]
}
Buat Formulir HTML
Pada bab sebelumnya, Anda telah membuat aplikasi untuk membuat daftar record dari database.
Sekarang tambahkan aplikasi formulir ke halaman:
Formulir HTML
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<p>
<label for="customername">Customer:</label>
<input id="customername"
class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
Formulir HTML Dijelaskan
appml-data="local?model=model_customersform" mendefinisikan aplikasi AppML untuk formulir.
Buat Perintah Formulir HTML
Gunakan style sheet favorit Anda (kami menggunakan bootstrap), dan buat perintah formulir yang Anda inginkan:
inc_formcommands.htm
<span onclick="document.getElementById('Form01').style.display='none'"
class="w3-button w3-xlarge w3-right">×</span>
<div
class="w3-bar w3-border w3-white">
<button
onclick="appml('Form01').newRecord();" class="w3-btn">New</button>
<button onclick="appml('Form01').saveRecord();" class="w3-btn
w3-green">Save</button>
<button onclick="appml('Form01').deleteRecord();"
class="w3-btn">Delete</button>
</div>
<div id="appmlmessage"
class="w3-container w3-pale-yellow w3-padding" style="display:none;">
<span onclick="this.parentNode.style.display='none';" class="w3-button
w3-xlarge w3-right">×</span>
<div id="message"></div>
</div>
Sertakan Perintah Formulir
Sertakan perintah formulir di formulir Anda:
Formulir HTML
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<div appml-include-html="inc_formcommands.htm"></div>
<p>
<label for="customername">Customer:</label>
<input
id="customername" class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
Tambahkan Kolom yang Dapat Diklik ke Tabel
Pada bab sebelumnya, Anda telah membuat aplikasi untuk membuat daftar record dari database.
Sekarang tambahkan kolom baru ke tabel:
Sumber 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="w3-table-all">
<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}})">✎</td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Peristiwa onclick (di kolom baru) memicu panggilan untuk menjalankan aplikasi AppML yang terletak di elemen HTML dengan id="Form01":
- appml('Form01') mengembalikan aplikasi AppML
- run({{CustomerID}}) menjalankan aplikasi dengan CustomerID sebagai parameter.
Akhirnya, Sembunyikan Formulir
Tambahkan gaya ke formulir untuk membuatnya tidak terlihat:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Tambahkan pengontrol ke formulir, untuk menampilkan formulir hanya ketika sudah dimuat dan siap untuk menampilkan data:
Pengontrol
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>