রিদওয়ান বিন শামীম
এই অধ্যায়ে দেখানো হবে কীভাবে ডাটাবেসের বিপরীতে ইনপুট ফর্ম তৈরি করা যায়।
ফর্ম মডেল তৈরি করা
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>