AppML WebMatrix

Web サーバを持ってない場合は、WebMatrix を使用すれば同じものを作成することができます。

WebMatrix

WebMatrix は、Web サイトを構築するための簡単な方法を提供する無料の web 開発ツールです。

WebMatrix には以下のものが含まれています：

WebMatrix を使用すれば、空の web サイトを開始したり、または PHP、ASP、Umbraco、DotNetNuke、 Drupal、Joomla、WordPress などを使用して、既存のテンプレートを構築することができます。

WebMatrix には、また、データベース、セキュリティ、検索エンジン最適化や Web パブリッシングのための組込みツールもあります。

WebMatrix をインストールするには、このリンク従ってください： http://www.microsoft.com/web/webmatrix

空の PHP サイトを作成

WebMatrix では、Template Gallery を選択します。PHP を選択します。 Empty Site を選択します。

サイト名 を DemoAppml (または、他の名前に) に変更し、Next をクリックします。

Create Website

Note イラストから見ることができるように、WebMatrix は、多くの種類の web サイトを作成できます。

HTML テストページの作成

WebMatrix のウィンドウで、New を選択して、New File を選択します。 ファイルタイプには、HTML を選択します。

ファイル名を customers.htm に変更し、OK をクリックします。

Create HTML File

次で新規ファイルの HTML を置き換えます：

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.w3schools.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":"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 »

テストページを実行するには：WebMatrix の中でページを右クリックし、 Launch in browser を選択します。

データベースの作成

WebMatrix のウィンドウで Databases を選択して、New Databaseを選択します。 MySQL Database を選択します。

データベース名を DemoDB に変更し、OK をクリックします。

Create database

WebMatrix で Files を選択し、web.config ファイルを開きます。

( web.config ファイルを見ることができない場合は、WebMatrix をリフレッシュします)

Web Configuration

AppML の設定

AppML 用の設定ファイルを作成するには、web.config ファイル内の接続文字列から情報を使用します。

ファイル名を 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"
}]
}

コンフィギュレーションファイルの説明：

プロパティ 説明
dateformat モデルで使用する日付形式
connection モデルで使用する接続名
host server= で見つかった IP またはホスト名
dbname Database= で見つかったデータベース名
username uid= で見つかったユーザー名
password pwd= で見つかったパスワード

AppML のコピー

次のファイルをダウンロードします： http://www.w3schools.com/appml/2.0.3/appml.php.txt。

ファイルを web サイトにコピーし、appml.php にリネームします：

Copy appml.php

データベースのテーブル作成

データベースに Customers テーブルを作成するためのモデルを作成します。

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_Customers モデルを実行するための HTML ページを作成します：

Create_Customers.htm

<!DOCTYPE html>
<html lang="ja">
<script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>

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

</body>
</html>

HTML ページの実行：WebMatrix のページを右クリックし、Launch in browser を選択します。

アプリケーションの作成

customers アプリケーション用のモデルを作成し、customers.js として保存します：

Customers.js

{
"rowsperpage" : 10,
"database" : {
    "connection" : "mydatabase",
    "sql" : "SELECT * FROM Customers",
    "orderby" : "CustomerName"
}
}

customers アプリケーションを実行するための HTMLページを作成します：

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.w3schools.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 »

HTML ページを実行するには：WebMatrix のページを右クリックし、Launch in browser を選択します。