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

AppMLแบบเดิม

❮ก่อนหน้า ถัดไปบท❯

ในบทนี้เราจะสร้างต้นแบบสำหรับการใช้งานเว็บ

สร้าง HTML ต้นแบบ

ขั้นแรกให้สร้างต้นแบบ HTML ดีใช้ CSS ที่คุณชื่นชอบ

เราได้ใช้บูตในตัวอย่างนี้:

ตัวอย่าง

<!DOCTYPE html>
<html lang="en-US">

<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<body>

<div class="container">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>

</body>
</html>
ลองตัวเอง»

{{ ... }} เป็นตัวยึดสำหรับข้อมูลในอนาคต

เพิ่ม AppML

หลังจากที่คุณได้สร้างต้นแบบ HTML คุณสามารถเพิ่ม AppML:

ตัวอย่าง

<!DOCTYPE html>
<html lang="en-US">

<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>
<script src="http://www.w3ii.com/appml/2.0.3/appml_sql.js"></script>
<body>

<div class="container" appml-data="customers.js" >
<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>
ลองตัวเอง»

เพิ่ม AppML:

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

เพิ่มฐานข้อมูล WebSQL ท้องถิ่น:

<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">

กำหนดแหล่งที่มาของข้อมูล:

appml ข้อมูล = "customers.js"

กำหนดองค์ประกอบ HTML ที่จะทำซ้ำสำหรับแต่ละระเบียนในบันทึก:

appml_repeat = "บันทึก"

ที่จะทำให้มันง่ายเริ่มต้นด้วยข้อมูลท้องถิ่นเช่น customers.js ก่อนการเชื่อมต่อกับฐานข้อมูล

สร้างรุ่น AppML

เพื่อให้สามารถใช้ฐานข้อมูลที่คุณจะต้องมีรูปแบบฐานข้อมูล AppML:

proto_customers.js

{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "Select * from Customers",
"orderby" : "CustomerName",
}

หากคุณไม่ได้มีฐานข้อมูลท้องถิ่นคุณสามารถใช้รูปแบบ AppML การสร้างฐานข้อมูล SQL บนเว็บ

การสร้างตารางที่มีการบันทึกเดียวใช้รูปแบบเช่นนี้: proto_customers_single.js

การสร้างฐานข้อมูลในท้องถิ่นไม่ทำงานใน IE หรือ Firefox ใช้ Chrome หรือ Safari

ใช้รูปแบบในการประยุกต์ใช้ของคุณ เปลี่ยนแหล่งข้อมูลไปยังท้องถิ่นรูปแบบ = proto_customers_single:

ตัวอย่าง

<div appml-data=" local?model=proto_customers_single ">
<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>
ลองตัวเอง»

สร้างฐานข้อมูลท้องถิ่นที่มีประวัติหลาย

เพื่อสร้างตารางที่มีหลายระเบียนให้ใช้รูปแบบเช่นนี้ proto_customers_all.js

เปลี่ยนแหล่งข้อมูลไปยังท้องถิ่นรูปแบบ = proto_customers_all

ตัวอย่าง

<div appml-data=" local?model=proto_customers_all ">
<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>
ลองตัวเอง»

เพิ่มแม่แบบนำร่อง

สมมติว่าคุณต้องการทุกการใช้งานของคุณให้มีแถบเครื่องมือนำทางที่พบบ่อย:

สร้าง HTML แม่แบบสำหรับมัน

inc_listcommands.htm

<div class="btn-group" role="toolbar" style="margin-bottom:10px;">

  <button id='appmlbtn_first' type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-fast-backward"></span></button>

  <button id='appmlbtn_previous' type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-backward"></span></button>

  <button id='appmlbtn_text' type="button" class="btn btn-default disabled"></button>

  <button id='appmlbtn_next' type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-forward"></span></button>
 
  <button id='appmlbtn_last' type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-fast-forward"></span></button>

  <button id='appmlbtn_query' type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-search"></span> Filter</button>

</div>

<div id="appmlmessage"></div>

บันทึกแม่แบบในแฟ้มที่มีชื่อที่เหมาะสมเช่น "inc_listcommands.htm"

รวมถึงแม่แบบในต้นแบบของคุณด้วยแอตทริบิวต์ appml- ได้แก่ -html ที่:

ตัวอย่าง

<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm" ></div>

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

❮ก่อนหน้า ถัดไปบท❯