AppML Case Study - Products


The HTML Page

This is the HTML source:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Products</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.1/appml.js"></script>
</head>
<body>
<div class="container">
<h1>Products</h1>

<div id="Form01" class="jumbotron" style="display:none" appml-controller="myFormController">
  <div appml-include-html="inc_formcommands.htm"></div>
  <div class="form-group">
    <label>ProductName:</label>
    <input id="ProductName" class="form-control">
  </div>
  <div class="form-group">
    <label>Supplier:</label>
    <div appml-data="local?model=model_dropdown_suppliers">
      <select id="SupplierID" class="form-control">
      <option appml-repeat="records" value="{{SupplierID}}">{{SupplierName}}</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label>Category:</label>
    <div appml-data="local?model=model_dropdown_categories">
      <select id="CategoryID" class="form-control">
      <option appml-repeat="records" value="{{CategoryID}}">{{CategoryName}}</option>
    </select>
  </div>
  </div>
  <div class="form-group">
    <label>Unit:</label>
    <input id="Unit" class="form-control">
  </div>
  <div class="form-group">
    <label>Price:</label>
    <input id="Price" onchange="myValidator(this)" class="form-control">
  </div>
</div>
 
<div appml-data="local?model=model_productslist" appml-controller="myListController">
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_productsquery_local.htm"></div>
<table class="table table-striped table-bordered">
<tr>
  <th></th>
  <th>Product Name</th>
  <th>Category</th>
  <th>Supplier</th>
  <th>Price</th>
</tr>
<tr appml-repeat="records">
  <td style="cursor:pointer"
    onclick="appml('Form01').run({{ProductID}})">
    <span class="glyphicon glyphicon-edit"></span>
  </td>
  <td>{{ProductName}}</td>
  <td>{{CategoryName}}</td>
  <td>{{SupplierName}}</td>
  <td>{{Price}}</td>
</tr>
</table>
</div>
<h3 id="sumprice"></h3>

</div>

<script>
function myValidator(item) {
    var obj = appml("Form01");
    obj.message = "validate";
    obj.validate = {};
    obj.validate.item = item.id;
    obj.validate.value = item.value;
    myFormController(obj);
}
function myListController($appml) {
    if ($appml.message == "ready") {
        $appml.rowsperpage = 8;
    }
    if ($appml.message == "done") {
        var i, x, tot = 0;
        x = $appml.data.records;
        for (i = 0; i < x.length; i++) {
            tot += Number(x[i].Price);
        }
        document.getElementById("sumprice").innerHTML =
        x.length + " products. Total price " + tot;
    }
    if ($appml.message == "display") {
        if ($appml.display.name == "ProductName") {
            $appml.display.value = $appml.display.value.toUpperCase();
        }
    }
}
function myFormController($appml) {
    if ($appml.message == "ready") {
        $appml.dataSource = "local?model=model_productsform";
        return -1;
    }
    if ($appml.message == "loaded") {
        document.getElementById("Form01").style.display = "";
    }
    if ($appml.message == "validate") {
        if ($appml.validate.item == "Price") {
            if (isNaN($appml.validate.value)) {
                $appml.setError(15, "Price must be a number");
                return;
            }
        }
    }
}
</script>

</body>
</html>

PHP »   .NET »   Local »  
Note The local database is only available after you have created it.
If you are running Chrome, create your local database from the WebSQL page.

PHP and .NET

To run against a PHP server, change appml-data="local to appml-data=appml.php.

To run against a NET server, change appml-data="local to appml-data=appml.aspx.


Models

These are the models used in the application:

List Model

{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT ProductID,ProductName,CategoryName,SupplierName,Price FROM ((Products LEFT JOIN Suppliers ON Products.SupplierID=Suppliers.SupplierID) LEFT JOIN Categories ON Products.CategoryID=Categories.CategoryID)",
"orderby" : "ProductName"
},
"filteritems" : [
{"item" : "ProductName", "label" : "Name"},
{"item" : "Products.SupplierID", "type" : "number", "hidden" : "true"},
{"item" : "Suppliers.SupplierID", "label" : "Supplier"},
{"item" : "Categories.CategoryID", "label" : "Category"}
],
"sortitems" : [
{"item" : "ProductName"}
]

Form Model

{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Products",
"maintable" : "Products",
"keyfield" : "ProductID"
},
"updateItems" : [
{"item" : "ProductName"},
{"item" : "SupplierID"},
{"item" : "CategoryID"},
{"item" : "Unit"},
{"item" : "Price"}
]
}

SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: