Huge Sell on Popular Electronics
রিদওয়ান বিন শামীম
এই অধ্যায়ে দেখানো হবে কীভাবে ডাটাবেসের বিপরীতে ইনপুট ফর্ম তৈরি করা যায়।
ফর্ম মডেল তৈরি করা
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"}]
}
এইচটিএমএল ফর্ম তৈরি করা
পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়। এখানে ওয়েব পেজে একটি ফর্ম এপ্লিকেশন যোগ করতে হবে,
HTML Form
<div id="Form01" appml-data="local?model=model_customersform" class="jumbotron"> <div class="form-group"> <label for="customername">Customer:</label> <input id="customername" class="form-control"> </div> <div class="form-group"> <label for="address">Address:</label> <input id="address" class="form-control"> </div> <div class="form-group"> <label for="city">City:</label> <input id="city" class="form-control"> </div> <div class="form-group"> <label for="postalcode">Postal Code:</label> <input id="postalcode" class="form-control"> </div> <div class="form-group"> <label for="country">Country:</label> <input id="country" class="form-control"> </div> </div>
এইচটিএমএল ফর্মের ব্যাখ্যা
appml-data="local?model=model_customersform" দ্বারা ফরমের জন্য অ্যাপ এম এল এপ্লিকেশন বোঝায়।
এইচটিএমএল ফর্ম কমান্ড তৈরি করা
পছন্দসই স্টাইলশিট ব্যবহার করে(এখানে bootstrap ব্যবহার করা হয়েছে) কাঙ্খিত ফর্ম কমান্ড তৈরি করা হয়,
inc_formcommands.htm
<button type="button" class="close" onclick="document.getElementById('Form01').style.display='none';">X</button>
<button type="button" class="close">X</button>
<div class="btn-toolbar" style="margin-bottom:20px;">
<div class="btn-group">
<button type="button" class="btn btn-default" onclick="appml('Form01').newRecord();">
<span class="glyphicon glyphicon-new-window"></span> New</button>
<button type="button" class="btn btn-primary" onclick="appml('Form01').saveRecord();">
<span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
<button type="button" class="btn btn-default" onclick="appml('Form01').deleteRecord();">
<span class="glyphicon glyphicon-trash"></span> Delete</button>
</div>
</div>
<div id="appmlmessage" class="alert alert-warning" style="display:none;">
<button type="button" class="close"
onclick="this.parentNode.style.display='none';">X</button>
<div id="message"></div>
</div>
ফর্ম কমান্ড অন্তর্ভুক্তি
ফরমে ফর্ম কমান্ড অন্তর্ভুক্ত করা হয়,
HTML Form
<div id="Form01" appml-data="local?model=model_customersform" class="jumbotron"> <div appml-include-html="inc_formcommands.htm"></div> <div class="form-group"> <label for="customername">Customer:</label> <input id="customername" class="form-control"> </div> <label for="address">Address:</label> <input id="address" class="form-control"> </div> <div class="form-group"> <label for="city">City:</label> <input id="city" class="form-control"> </div> <div class="form-group"> <label for="postalcode">Postal Code:</label> <input id="postalcode" class="form-control"> </div> <div class="form-group"> <label for="country">Country:</label> <input id="country" class="form-control"> </div> </div>
ডাটা টেবিলে ক্লিকেবল কলাম যোগ করা
পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়।এখানে আমরা টেবিলে নতুন কলাম যোগ করব।
HTML Source
<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></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}})">
<span class="glyphicon glyphicon-edit"></span></td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
নতুন কলামের অনক্লিক ইভেন্ট অ্যাপ এম এল এর একটি এপ্লিকেশন রান করায়, যা এইচটিএমএল উপাদানের মধ্যে id="Form01" পরিচিতি নিয়ে অবস্থান করে।
- appml('Form01') অ্যাপ এম এল এর এপ্লিকেশন পুনরাবৃত্তি করায়,
- run({{CustomerID}}) প্যারামিটাররূপে কাস্টমার আইডির সাথে এপ্লিকেশন রান করায়।
চূড়ান্ত পর্যায়ে, ফর্মকে লুকিয়ে রাখা
ফর্মকে লুকিয়ে রাখতে একধরনের স্টাইল ব্যবহার করা হয়,
HTML
<div id="Form01" appml-data="local?model=model_customersform" appml-controller="myFormController" class="jumbotron" style="display:none">
ফর্মে একটি কন্ট্রোলার ব্যবহার করা হয় যেন এটি কেবল তখনই দৃশ্যমান হবে যখন এটি লোডেড ও ডাটা প্রদর্শনের জন্য প্রস্তুত।
Controller
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>
