AppML Case Study - Employees


The HTML Page

This is the HTML source:

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

<div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_employeesform" appml-controller="myFormController">
  <div appml-include-html="inc_formcommands.htm"></div>
  <div class="form-group">
    <label>Last Name:</label>
    <input id="LastName" class="form-control">
  </div>
  <div class="form-group">
    <label>First Name:</label>
    <input id="FirstName" class="form-control">
  </div>
  <div class="form-group">
    <label>Date of Birth:</label>
    <input id="BirthDate" class="form-control">
  </div>
  <div class="form-group">
    <label>Photo:</label>
    <input id="Photo" class="form-control">
  </div>
  <div class="form-group">
    <label>Notes:</label>
    <input id="Notes" class="form-control">
  </div>
</div>

<div appml-data="local?model=model_employeeslist">
  <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>Last Name</th>
    <th>First Name</th>
    <th>Date of Birth</th>
  </tr>
  <tr appml-repeat="records">
    <td style="cursor:pointer"
    onclick="appml('Form01').run({{EmployeeID}})">
    <span class="glyphicon glyphicon-edit"></span>
    </td>
    <td>{{LastName}}</td>
    <td>{{FirstName}}</td>
    <td>{{BirthDate}}</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

{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Employees",
"orderby" : "LastName"
},
"filteritems" : [
{"item" : "LastName"},
{"item" : "FirstName"}
],
"sortitems" : [
{"item" : "LastName"},
{"item" : "FirstName"}
]
}

Form Model

{
"database" : {
"connection" : "localmysql",
"sql" : "SELECT * FROM Employees",
"maintable" : "Employees",
"keyfield" : "EmployeeID"
},
"updateItems" : [
{"item" : "LastName"},
{"item" : "FirstName"},
{"item" : "BirthDate"},
{"item" : "Photo"},
{"item" : "Notes"}
]
}

SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: