এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html> <html lang="en-US"> <title>Suppliers</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <div class="container"> <h1>Suppliers</h1> <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_suppliersform"
appml-controller="myFormController"> <div appml-include-html="inc_formcommands.htm"></div> <div class="form-group"> <label>SupplierID:</label> <input id="SupplierID" class="form-control"> </div> <div class="form-group"> <label>SupplierName:</label> <input id="SupplierName" class="form-control"> </div> <div class="form-group"> <label>ContactName:</label> <input id="ContactName" class="form-control"> </div> <div class="form-group"> <label>Address:</label> <input id="Address" class="form-control"> </div> <div class="form-group"> <label>PostalCode:</label> <input id="PostalCode" class="form-control"> </div> <div class="form-group"> <label>City:</label> <input id="City" class="form-control"> </div> <div class="form-group"> <label>Country:</label> <input id="Country" class="form-control"> </div> <div class="form-group"> <label>Adress:</label> <input id="Phone" class="form-control"> </div> </div> <div appml-data="local?model=model_supplierslist"> <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>Supplier</th> <th>City</th> <th>Country</th> <th></th> </tr> <tr appml-repeat="records"> <td style="cursor:pointer" onclick="appml('Form01').run({{SupplierID}})"> <span class="glyphicon glyphicon-edit"></span> </td> <td>{{SupplierName}}</td> <td>{{City}}</td> <td>{{Country}}</td> <td><a href='' onclick="openProducts({{SupplierID}});return false;">Products</a></td> </tr> </table> </div> <div id="ProductsSection" class="jumbotron" style="display:none" appml-data="local?model=model_productslist" appml-controller="myProductsController"> <button onclick="document.getElementById('ProductsSection').style.display='none';" type="button" class="close"><span>×</span></button> <h2>{{records[0]['SupplierName']}}</h2> <table class="table table-striped table-bordered"> <tr> <th>Product</th> <th>Category</th> <th>Supplier</th> </tr> <tr appml-repeat="records"> <td>{{ProductName}}</td> <td>{{CategoryName}}</td> <td>{{SupplierName}}</td> </tr> </table> </div> </div> <script> function openProducts(id) { appml("ProductsSection").clearQuery(); appml("ProductsSection").setQuery("Products.SupplierID", id); appml("ProductsSection").run(); } function myFormController($appml) { if ($appml.message == "ready") {return -1;} if ($appml.message == "loaded") { document.getElementById("Form01").style.display = ""; } } function myProductsController($appml) { if ($appml.message == "ready") {return -1;} if ($appml.message == "loaded") { document.getElementById("ProductsSection").style.display = ""; } } </script> </body> </html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{ "database" : { "connection" : "localmysql", "sql" : "SELECT * FROM Suppliers", "orderby" : "SupplierName" }, "filteritems" : [ {"item" : "SupplierName"}, {"item" : "City"}, {"item" : "Country"} ], "sortitems" : [ {"item" : "SupplierName"}, {"item" : "City"}, {"item" : "Country"} ], "rowsperpage" : 10 }
ফরম মডেল
{ "database" : { "connection" : "localmysql", "maintable" : "Customers", "keyfield" : "CustomerID", "sql" : "SELECT * FROM Customers" }, "updateItems" : [ {"item" : "CustomerName"}, {"item" : "Address"}, {"item" : "PostalCode"}, {"item" : "City"}, {"item" : "Country"} ] }