অ্যাপ এম এল ফর্ম (AppML Forms)

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

এই অধ্যায়ে দেখানো হবে কীভাবে ডাটাবেসের বিপরীতে ইনপুট ফর্ম তৈরি করা যায়।

ফর্ম মডেল তৈরি করা

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>