HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
In this chapter, we will build a prototype for a web application
First, create a decent HTML prototype, using your favorite CSS.
We have used W3.CSS in this example:
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
{{ ... }} Are placeholders for future data.
After you have created an HTML prototype, you can add AppML:
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="/w3css/4/w3.css">
<script src="/appml/2.0.3/appml.js"></script>
<script src="/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Add AppML:
Add a local WebSQL database:
Define a data source:
Define the HTML element to be repeated for each record in records:
To make it simple, start with local data like customers.js before connecting to a database.
To be able to use a database, you will need an AppML database model:
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}
If you don't have a local database, you can use the AppML model to create a Web SQL database.
To create a table with a single record, use a model like this: proto_customers_single.js.
Creating a local database does not work in IE or Firefox. Use Chrome or Safari.
Use the model in your application. Change the data source to local?model=proto_customers_single:
<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
To create a table with multiple records, use a model like this: proto_customers_all.js.
Change the data source to local?model=proto_customers_all
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Suppose you want all your applications to have a common navigation toolbar:
Create an HTML template for it:
<div class="w3-bar w3-border w3-section">
<button class="w3-button" id='appmlbtn_first'>❮❮</button>
<button class="w3-button" id='appmlbtn_previous'>❮</button>
<button class="w3-button w3-hover-none" id='appmlbtn_text'></button>
<button class="w3-button" id='appmlbtn_next'>❯</button>
<button class="w3-button" id='appmlbtn_last'>❯❯</button>
<button class="w3-btn ws-green" id='appmlbtn_query'>Filter</button>
</div>
<div id="appmlmessage"></div>
Save the template in a file with a proper name like "inc_listcommands.htm".
Include the template in your prototype with the attribute appml-include-html:
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>