tutorial pengembangan web terbaru
 

AppML Data


Tujuan utama dari appML adalah untuk menyediakan data ke halaman HTML.


Menghubungkan appML Data

  • appML dapat menampilkan data dari variabel
  • appML dapat menampilkan data dari file
  • appML dapat menampilkan data dari database

appML Menggunakan Obyek JavaScript

cara yang umum untuk memisahkan HTML dan Data, adalah untuk menyimpan data dalam sebuah objek JavaScript.

Contoh

<table appml-data=" dataObj ">
<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>

<script>
var dataObj = {
"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>
Cobalah sendiri "

appML Menggunakan JSON Berkas

cara lain yang umum untuk memisahkan HTML dan Data, adalah untuk menyimpan data dalam file JSON:

customers.js

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

Dengan appML, Anda dapat menentukan file JSON sebagai sumber data dalam appml-data atribut:

Contoh

<table appml-data="customers.js ">
<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>
Cobalah sendiri "

appML Menggunakan Database

Dengan sedikit bantuan dari server web, Anda dapat memberi makan aplikasi Anda dengan data SQL.

Contoh ini menggunakan PHP untuk membaca data dari database MySQL:

Contoh

<table appml-data=" http://www.w3ii.com/appml/customers.php" >
<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>
Cobalah sendiri "

Contoh ini menggunakan NET untuk membaca data dari database SQL Server:

Contoh

<table appml-data=" http://www.w3ii.com/appml/customers.aspx" >
<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>
Cobalah sendiri "

Kekuatan appML

Anda akan menemukan kekuatan appML.

appML dapat menyediakan Anda dengan data, pengendali, dan model untuk:

  • Super-mudah Pengembangan aplikasi HTML
  • Super-mudah Modeling, Prototyping, dan Pengujian

Anda dapat menempatkan sebagai banyak aplikasi appML yang Anda inginkan di dalam halaman HTML.

appML tidak mengganggu bagian lain dari halaman.

Anda memiliki full HTML, CSS, dan kebebasan JavaScript.

appML dapat digunakan untuk mengembangkan aplikasi CRUD web skala penuh.

CRUD: C reate, R ead, U pdate, D apus.

Untuk menemukan kekuatan appML: Lihat sebuah appML Demo .