AppML .NET
If you have access to a .NET server, follow the instructions below to create an AppML server application.
If you don't have access to a server, follow the WebMatrix instructions.
Create a Test Page
Create a test page and save on your PHP server as customers.htm (or anything you like):
customers.htm
<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div class="subhodaya-container" appml-data="customers">
<h1>Customers</h1>
<table class="subhodaya-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>
<script>
var customers = {
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]};
</script>
</body>
</html>
Try It Yourself »
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div class="subhodaya-container" appml-data="customers">
<h1>Customers</h1>
<table class="subhodaya-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>
<script>
var customers = {
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]};
</script>
</body>
</html>
Test the web page in your browser.
Create a Database Connection
If you have access to an SQL Server database, or any other OLEDB databases (like MS Acess) define the database connections, and save it on the server as appml-config.aspx:
appml-config.aspx (SQL Server Example)
<%
Response.write("Access Forbidden")
Response.end
%>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [{
"connection" : "mydatabase",
"provider" : "SQLOLEDB",
"host" : "myserver",
"dbname" : "DemoDB",
"username" : "DemoDBUkbn5",
"password" : "l6|U6=V(*T+P"
}]
}
Response.write("Access Forbidden")
Response.end
%>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [{
"connection" : "mydatabase",
"provider" : "SQLOLEDB",
"host" : "myserver",
"dbname" : "DemoDB",
"username" : "DemoDBUkbn5",
"password" : "l6|U6=V(*T+P"
}]
}
appml-config.aspx (MS Access Example)
<%
Response.write("Access Forbidden")
Response.end
%>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [
{
"connection" : "mydatabase",
"connectionstring" :
"Provider=Microsoft.Jet.OLEDB.4.0;data source=C:\\database\\Northwind.mdb"
}
}
Response.write("Access Forbidden")
Response.end
%>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [
{
"connection" : "mydatabase",
"connectionstring" :
"Provider=Microsoft.Jet.OLEDB.4.0;data source=C:\\database\\Northwind.mdb"
}
}
The connection above is not real. Names and passwords are examples.
Configuration File Explained:
| Property | Description |
|---|---|
| dateformat | The date format you will use in your models |
| connection | The connection name you will use in your models |
| connectionstring | Typically used in for OLEDB drivers like MS Access |
| provider | The driver/provider of db software |
| host | The IP or hostname for the database |
| dbname | The database name |
| username | The database user name |
| password | The database password |
Copy AppML
Download the file: http://tutorials/appml/2.0.3/appml.aspx.txt.
Copy the file to your web site. Rename it to appml.aspx.
Create a Database Table
Create a model for creating a Customers table in the database.
create_customers.js
{
"database" : {
"connection" : "mydatabase",
"execute" : [
"DROP TABLE IF EXISTS Customers",
"CREATE TABLE IF NOT EXISTS Customers (CustomerID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,(CustomerID),CustomerName NVARCHAR(255),ContactName NVARCHAR(255),Address NVARCHAR(255),City NVARCHAR(255),PostalCode NVARCHAR(255),Country NVARCHAR(255))",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Alfreds Futterkiste\",\"Maria Anders\",\"Obere Str. 57\",\"Berlin\",\"12209\",\"Germany\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Around the Horn\",\"Thomas Hardy\",\"120 Hanover Sq.\",\"London\",\"WA1 1DP\",\"UK\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Blauer See Delikatessen\",\"Hanna Moos\",\"Forsterstr. 57\",\"Mannheim\",\"68306\",\"Germany\")"
]
}}
"database" : {
"connection" : "mydatabase",
"execute" : [
"DROP TABLE IF EXISTS Customers",
"CREATE TABLE IF NOT EXISTS Customers (CustomerID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,(CustomerID),CustomerName NVARCHAR(255),ContactName NVARCHAR(255),Address NVARCHAR(255),City NVARCHAR(255),PostalCode NVARCHAR(255),Country NVARCHAR(255))",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Alfreds Futterkiste\",\"Maria Anders\",\"Obere Str. 57\",\"Berlin\",\"12209\",\"Germany\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Around the Horn\",\"Thomas Hardy\",\"120 Hanover Sq.\",\"London\",\"WA1 1DP\",\"UK\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Blauer See Delikatessen\",\"Hanna Moos\",\"Forsterstr. 57\",\"Mannheim\",\"68306\",\"Germany\")"
]
}}
Create an HTML page for running the create_customers.js model:
create_customers.htm
<!DOCTYPE html>
<html>
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div appml-data="appml.aspx?model=create_customers"></div>
</body>
</html>
<html>
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div appml-data="appml.aspx?model=create_customers"></div>
</body>
</html>
Run the HTML page in your browser.
Create an Application
Create a model for the customers application. Save it as customers.js:
customers.js
{
"rowsperpage" : 10,
"database" : {
"connection" : "mydatabase",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
}
}
"rowsperpage" : 10,
"database" : {
"connection" : "mydatabase",
"sql" : "SELECT * FROM Customers",
"orderby" : "CustomerName"
}
}
Create an HTML page for running the customers application:
customers.htm
<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div class="subhodaya-container" appml-data="appml.aspx?model=model_customers">
<h1>Customers</h1>
<table class="subhodaya-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>
Try It Yourself »
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://tutorials/appml/2.0.3/appml.js"></script>
<body>
<div class="subhodaya-container" appml-data="appml.aspx?model=model_customers">
<h1>Customers</h1>
<table class="subhodaya-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>
Run the HTML in your browser.
