tutorial pengembangan web terbaru
 

AppML .BERSIH

❮ Sebelumnya Berikutnya Bab ❯

Jika Anda memiliki akses ke NET Server, ikuti petunjuk di bawah untuk membuat aplikasi server AppML.

Jika Anda tidak memiliki akses ke server, ikuti petunjuk WebMatrix .

Buat Test Page

Membuat halaman pengujian dan menyimpan di server PHP Anda sebagai customers.htm (atau apa pun yang Anda suka):

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>
Cobalah sendiri "

Menguji halaman web di browser Anda.

Buat Koneksi Database

Jika Anda memiliki akses ke database SQL Server, atau database OLEDB lain (like MS Acess) mendefinisikan koneksi database, dan simpan di server sebagai 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 "
}]
}

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"
}
}

Sambungan di atas adalah tidak nyata. Nama dan password adalah contoh.

File Konfigurasi Dijelaskan:

Milik Deskripsi
dateformat Format tanggal yang akan Anda gunakan dalam model Anda
connection Nama koneksi yang akan Anda gunakan dalam model Anda
connectionstring Biasanya digunakan dalam untuk driver OLEDB seperti MS Access
provider Sopir / penyedia perangkat lunak db
host IP atau nama host untuk database
dbname Nama database
username Database nama pengguna
password Password database

Copy AppML

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

Menyalin file ke situs web Anda. Mengganti nama ke appml.aspx.

Membuat Database Tabel

Buat model untuk menciptakan tabel pelanggan dalam 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\")"
]
}}

Membuat halaman HTML untuk menjalankan model create_customers.js:

create_customers.htm

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

<div appml-data="appml.aspx?model=create_customers"></div>

</body>
</html>

Jalankan halaman HTML di browser Anda.

Buat Aplikasi

Membuat model untuk aplikasi pelanggan. Simpan sebagai customers.js:

customers.js

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

Membuat halaman HTML untuk menjalankan aplikasi pelanggan:

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.aspx?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>
Cobalah sendiri "

Jalankan HTML di browser Anda.


❮ Sebelumnya Berikutnya Bab ❯