AppML Case Study - Customers


The HTML Page

This is the HTML source:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Customers</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>Customers</h1>

<div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_customersform" appml-controller="myFormController">
  <div appml-include-html="inc_formcommands.htm"></div>
  <div class="form-group">
    <label for="customername">CustomerName:</label>
    <input id="customername" class="form-control">
  </div>
  <div class="form-group">
    <label for="contactname">ContactName:</label>
    <input id="contactname" 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">PostalCode:</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>

<div appml-data="local?model=model_customerslist">
  <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>

</div>

<script>
function myFormController($appml) {
    if ($appml.message == "ready") {return -1; }
    if ($appml.message == "loaded") {
        document.getElementById("Form01").style.display = "";
    }
}
</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

{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
},
"filteritems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
],
"sortitems" : [
{"item" : "CustomerName", "label" : "Customer"},
{"item" : "City"},
{"item" : "Country"}
]
}

Form Model

{
"database" : {
"connection" : "localmysql",
"maintable" : "Customers",
"keyfield" : "CustomerID",
"sql" : "SELECT * FROM Customers"
},
"updateItems" : [
{"item" : "CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}
]
}

SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: