ล่าสุดการพัฒนาเว็บบทเรียน
 

AppMLข้อมูล


วัตถุประสงค์หลักของการ appML คือการให้ข้อมูลไปยังหน้าเว็บ HTML


เชื่อมต่อไปยัง appML ข้อมูล

  • appML สามารถแสดงข้อมูลจากตัวแปร
  • appML สามารถแสดงข้อมูลจากไฟล์
  • appML สามารถแสดงข้อมูลจากฐานข้อมูล

appML โดยใช้วัตถุ JavaScript

วิธีการทั่วไปที่จะแยก HTML และข้อมูลคือการเก็บข้อมูลในวัตถุ JavaScript

ตัวอย่าง

<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>
ลองตัวเอง»

appML ใช้ไฟล์ JSON

อีกวิธีหนึ่งที่พบบ่อยในการแยก HTML และข้อมูลคือการจัดเก็บข้อมูลในไฟล์ 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"}
]
}

ด้วย appML คุณสามารถระบุไฟล์ JSON เป็นแหล่งข้อมูลใน appml-data แอตทริบิวต์:

ตัวอย่าง

<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>
ลองตัวเอง»

appML โดยใช้ฐานข้อมูล

ด้วยความช่วยเหลือเล็ก ๆ น้อย ๆ จากเว็บเซิร์ฟเวอร์ที่คุณสามารถกินใบสมัครของคุณกับข้อมูล SQL

ตัวอย่างนี้ใช้ PHP ในการอ่านข้อมูลจากฐานข้อมูล MySQL:

ตัวอย่าง

<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>
ลองตัวเอง»

ตัวอย่างนี้ใช้ NET เพื่ออ่านข้อมูลจากฐานข้อมูล SQL Server:

ตัวอย่าง

<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>
ลองตัวเอง»

พลังของ appML

คุณกำลังจะค้นพบพลังของ appML

appML สามารถให้คุณมีข้อมูลควบคุมและรูปแบบ:

  • Super-ง่ายการพัฒนาแอพลิเคชัน HTML
  • การสร้างแบบจำลอง Super-ง่ายการสร้างต้นแบบและการทดสอบ

คุณสามารถใส่การใช้งาน appML มากเท่าที่คุณต้องการภายในหน้าเว็บ HTML

appML ไม่ยุ่งเกี่ยวกับส่วนอื่น ๆ ของหน้า

คุณมี HTML, CSS และ JavaScript เสรีภาพเต็มรูปแบบ

appML สามารถนำมาใช้ในการพัฒนาเต็มรูปแบบการใช้งานเว็บ CRUD

CRUD: C Reate วิจัยอี๊ด, U pdate, D หนึ่งคำ

การค้นพบพลังของ appML นี้: ดู appML สาธิต