Latest web development tutorials
 

AppML WebMatrix


If you don't have a web server, you can create one, using WebMatrix.


WebMatrix

WebMatrix is a free web development tool that provides an easy way to build websites.

WebMatrix contains:

  • Web examples and templates
  • Support for different web languages (PHP, ASP.NET, Node.js)
  • A web server
  • Database servers (mySQL and SQL Server Compact)

With WebMatrix you can start with an empty web site, or build on existing templates using PHP, ASP, Umbraco, DotNetNuke, Drupal, Joomla, WordPress and more.

WebMatrix also has built-in tools for databases, security, search engine optimization, and web publishing.

To install WebMatrix, follow this link: http://www.microsoft.com/web/webmatrix


Create an Empty PHP Site

In WebMatrix, select Template Gallery. Select PHP. Select Empty Site.

Change Site name to DemoAppml (or anything you like), and click Next.

Create Website

As you can see from the illustration, WebMatrix will let you create many different types of websites.


Create an HTML Test Page

In the WebMatrix window, select New. Select New File. Select file type HTML.

Change the file name to customers.htm (or anything you like). Click OK.

Create HTML File

Replace the HTML in the new file with this:

customers.htm

<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div class="container" appml-data="customers">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
<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":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taqueria","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkop","City":"Lulea","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pere et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bolido 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":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comercio Mineiro","City":"Sao Paulo","Country":"Brazil"}
]};
</script>

</body>
</html>
Try It Yourself »

To run the test page: Right-click the page in WebMatrix, and select Launch in browser.


Create a Database

In the WebMatrix window select Databases. Select New Database. Select MySQL Database.

Change the Database name to DemoDB (or anything you like), and click OK.

Create database

In WebMatrix, select Files, and open the web.config file.

( If you cannot see the web.config file, refresh WebMatrix)

Web Configuration


Configure AppML

Use the information, from the connection string in web.config, to create a configuration file for AppML.

Name the file appml_config.php:

appml_config.php

<?php echo("Access Forbidden");exit();?>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [{
    "connection" : "mydatabase",
    "host" : "localhost",
    "dbname" : "DemoDB",
    "username" : "DemoDBUkbn5",
    "password" : "l6|U6=V(*T+P"
}]
}

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
host The IP or hostname found in server=
dbname The database name found in Database=
username The user name found in uid=
password The password found in pwd=

Copy AppML

Download the file: http://www.w3ii.com/appml/2.0.3/appml.php.txt.

Copy the file to your web site. Rename it to appml.php:

Copy appml.php


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 INT NOT NULL AUTO_INCREMENT,PRIMARY KEY (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 model:

Create_Customers.htm

<!DOCTYPE html>
<html lang="en-US">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div appml-data="appml.php?model=Create_Customers"></div>

</body>
</html>

To run the HTML page: Right-click the page in WebMatrix, and select Launch in 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"
}
}

Create an HTML page for running the customers application:

customers.htm

<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div class="container" appml-data="appml.php?model=customers">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
  <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 »

To run the HTML page: Right-click the page in WebMatrix, and select Launch in browser.