เรียนรู้โค็ด AppML เวปเซอร์วิส เจ๋งๆ

หาเวลาว่างทำ บทความนี้ ก็ใช้เวลาช่วงกลางคืนเพื่อทดสอบการใช้ appml มา 3 วัน จนทำบทความมาพรีวิวได้ 

ที่มา:
http://www.w3schools.com/appml/default.asp
http://faculty.kfupm.edu.sa/ics/sukairi/swe423(021)/W3Schools/appml/default.asp.htm (ผมว่าลิงค์ข้อมุลนี้ ใช้ appml framework คนละตัวกัน tag บางอย่างใช้งานไม่ได้  แต่ที่เอามาให้ดูเพราะ มันช่วยผมได้เยอะเรื่อง ในการทดสอบ appml กรณีรันไม่ได้ เช่น ทำให้ผมรู้ว่าแกะหรือเดาค่าอื่นๆได้เช่น tableEmpID.displayType = "form";ไม่ได้มีแค่ form แต่มี report ด้วย โดยการสุ่มจาก resource ในบทความ)

ข้อดีที่เห้นได้ชัดคือ
0.ผู้ทดสอบควรมีพื้นฐาน นิดหน่อยก็พอ  html css javascript xml
1.เชื่อมต่อ ฐานข้อมูลโดยใช้ แค่ text editor ธรรมดาก็ได้แล้วคับ
2.ทำงานได้เร็วอีกด้วย
3.โค็ดไม่ยุ่งยาก เวลาที่ใช้ในการพัฒนาเพื่อเชื่อมต่อเชื่อมต่อฐานข้อมูล ค่อนข้างน้อย (หลังจากได้เรียนรู้มันไปแล้วนะคับ )
4 รูปลักษณ์ หรือ output ก็ออกมาดูดี ไม่ขี้เหร่
5.สามารถแสดงผล  สร้าง ลบ แก้ไขข้อมูล และคิวรี่เจาะจง  ได้โดยง่ายดาย
5.เขียนครั้งเดียว ก็รันได้ทุกที่ ทั้ง os  ที่ต่างกัน หรือ hardware ต่างกัน
6.อื่นๆ ลองไปอ่านในเวปเรื่องข้อดีของมัน นะคับ บนลิงคด้านบน

***ส่วนถ้า ท่านใดที่ได้ลองทดสอบแล้วติดปัญหาไม่สามารถทำตามอย่างในเวปได้ ก็อ่านด้านล่างได้เลยคับ ผมได้รวบรวมไว้ให้แล้วคับ

ผมทดสอบโดยใช้ ภาษา asp.net  (appml รองรับ php ด้วย)(แต่หลักๆผมจะใช้ asp ทำมันก้ไม่ต่างกันเท่าไร)

สภาพแวดล้อมที่ใช้ทดสอบ

1.ทำงานบน win7 64bit

2.ใช้ webmatrix3 เขียนโค็ด + แถม iis8 มาให้ด้วยนะคับ

3.database ของผม เป็น access 2000 โอนมาจาก xp 32bit

4.โหลด AppML มันจะ มีให้เลือกว่าจะใช้ ภาษาใดเขียน จะมี 2 ลิงค์ให้โหลด คือ php และ asp.net  ดูในลิงค์เลยคับ  http://www.w3schools.com/appml/appml_download.asp โหลดเสร็จแตกไฟล์เอาใส่ใน web folder ของเรา 

1.เริ่มจาก ไฟล์ appml_config.aspx รุปล่าง เลือก provider ให้ตรงกับ ประเภทของฐานข้อมูล ของผมเป็น access ก็ใช้ตามด้านล่าง

2.สร้าง model ที่เชื่อมต่อกับ แต่ละ table ที่ต้องการดู รูปล่าง

                                             รูปลางไฟล์  tblemployee.xml

รูปลางไฟล์  tbllogin.xml

รูปลางไฟล์  tbltime.xml

การสร้าง Model นี้สำคัญคับเพราะจะเป็นตัวบอกว่า app เกี่ยวกับอะไรเช่น โค้ดลางจะบอกว่า ต้องการใช้ตาราง tblemployee โดยให้สามารถ

-tag <appml security=""> เป้นการบอกว่า เข้ามาใช้งานได้เลยไม่ต้องป้องกัน ถ้าระบุก็จะใช้ชื่อผุ้ใช้ในระบบหรือกลุ่ม

-เราสามารถระบุ table ได้ 2 แบบ คือ sql และ tag <maintable> แต่ต้องใช้ร่วมกัน tag <keyfield>

-อัพเดทได้ด้วย ตามฟิลดที่ระบุ ในส่วน tag <update> ถ้าไม่ระบุ จะอัพเดทไม่ได้เมื่อเรียกฟอร์มขึ้นมา
-การระบุ tag <filter> จะสร้างปุ่มเรียก หน้าจอค้นหาขึ้นมา

-จะให้เรียกข้อมุลโดยใช้ field อะไร ในหน้าจอ ขณะ runtime   ระบุใน tag <query> รวมทั้งให้เรียงลำดับการแสดงผล ด้วย tag <order>  (***ผมได้ลองทดสอบใช้ orderselect ใน
ลิงค์ http://faculty.kfupm.edu.sa/ics/sukairi/swe423(021)/W3Schools/appml/default.asp.htm ไม่เกิดผล คิดว่าเนื่องจาก ตัว framework appml ที่ใช้ไม่รู้จัก )

โค้ดไฟล์ tblemployee.xml อยุ่ใน โฟลเดอร์ prototyeps

<?xml version="1.0" encoding="tis-620" ?>
<appml security="">
 
<datasource>
  <database>
  <connection>appmldemo</connection>
  <maintable>tblemployee</maintable>
  <!--<sql>SELECT * FROM tblemployee</sql>-->
  <keyfield>emp_id</keyfield>
  </database>
</datasource>
 
<filters>
<query>
     <field>emp_id</field>
     <field label="name">emp_name</field>
     <field>empid</field>
</query>
<order>
    <field>emp_id</field>
    <field>emp_name</field>
</order>
</filters>
 
<update security="">
  <item><name>emp_name</name></item>
  <item><name>emp_surname</name></item>
</update>
 
</appml>
 

3.สร้าง html template
ข้างล่างคือโค้ดในไฟล์ demo_prototype.html
ในโค้ดด้านล่าง มีจุดทีน่าสนใจ
คือ ส่วนนี้เพระาผมคิดว่าผุ้ทดสอบส่วนใหญ่จะติดปัญหากันตรงนี้ เนื่องจาก ผุ้ทดสอบได้ลองใช้โค้ดจาก w3school แล้วรันไม่ออก แต่ทาง w3shcool กับรันได้ผลออกมา

            function openTimeEachId(id)
            {
                var tableEmpID = new AppML("appml.aspx", "prototypes/tblemployee.xml");
                tableEmpID.commands = false;
                // tableEmpID.setQuery("tblemployee.empid", id);  // setQuery unusable and throw a error is "illegal query error"
                //  tableEmpID.displayType = "report";  //display value have "report" or "form"
                // tableEmpID.run("List02", "", id);  // default display is report
                 tableEmpID.run("List02","",id);
            }

เราสามารถเปิด query โดยระบุ id ได้โดย ใช้   tableEmpID.run("List02","",id);   
โดยรุปแบบการแสดงผลจะ เป็นแบบ html table คือค่าdefault ของมัน แต่ถ้าระบุในโคด้   tableEmpID.displayType = "form"; จะไ้ดรุปแบบฟอร์มขึ้นมา


ข้างล่างคือโค้ดในไฟล์ demo_prototype.html
<!DOCTYPE html>

 
<html lang="en">
    <head>
        <meta charset="tis-620" />
        <title></title>
        <link rel="stylesheet" href="appml.css" />
    </head>
    <body>
        <button onclick='myOpen("tbltime.xml")'>tbltime</button>
        <button onclick='myOpen("tblemployee.xml")'>tblemployee</button>
        <button onclick='myOpen("tbllogin.xml")'>tbllogin</button>
        <br><br>
 
 
        <h3>แสดงตาราง <span id="h"></span> ในฐานข้อมูล GrandAttendance.mdb </h3>
        <div id="Form01"></div>
        <div id="List01"></div>
        <br><br>
        <div id="List02"></div>
 
 
            <table id="Template01" class="appmltable" style="width:100%;display:none">
            <tr>
              <th></th>
              <th>emp_id</th>
              <th>emp_name</th>
              <th>emp_surname</th>
              <!--<th></th>-->
            </tr>
            <tr id="appml_row">
              <td style="cursor:pointer" onclick="openForm('#emp_id#')"><img src="images/appmlPlus.png" ></td>
              <td>#emp_id#</td>
              <td>#emp_name#</td>
              <td>#emp_surname#</td>
              <!--<td><a href='' onclick='openTimeEachId("#empid#");return false;'>timeinfo</a></td>-->
            </tr>
            </table> 
 
            <table id="Template02" class="appmltable" style="width:100%;display:none">
           <tr>
               <th></th>
                <th>time_id</th>
                <th>EmpId</th>
                <th>time_Date</th>
                <th>time_IN</th>
                <th>time_OUT</th>
                <th></th>
            </tr>
            <tr id="appml_row">
                <td style="cursor:pointer" onclick="openForm('#time_id#')"><img src="images/appmlPlus.png" ></td>
                <td>#time_id#</td>
                <td>#EmpId#</td>
                <td>#time_Date#</td>
                <td>#time_IN#</td>
                <td>#time_OUT#</td>
                <td><a href='' onclick='openTimeEachId("#EmpId#");return false;'>Empinfo</a></td>
            </tr>
            </table> 
 
            <table id="Template03" class="appmltable" style="width:100%;display:none">
           <tr>
               <th></th>
                <th>login_id</th>
                <th>login_name</th>
                <th>login_pwd</th>
                <th>login_level</th>
                <!--<th></th>-->
            </tr>
            <tr id="appml_row">
                <td style="cursor:pointer" onclick="openForm('#login_id#')"><img src="images/appmlPlus.png" ></td>
                <td>#login_id#</td>
                <td>#login_name#</td>
                <td>#login_pwd#</td>
                <td>#login_level#</td>
                 <!--<td><a href='' onclick='openEmpEachId("#EmpID#");return false;'>Empinfo</a></td>-->
            </tr>
            </table> 
 
        <script src="appml.js"></script>
        <script>
            var Modelname
            function myOpen(pname)
            {
                Modelname = pname;
                document.getElementById("h").innerHTML = pname;
                var mytable = new AppML("appml.aspx", "prototypes/" + pname);
 
                switch (pname)
                {
                    case "tblemployee.xml":
                        mytable.run("List01", "Template01");
                        break;
                    case "tbltime.xml":
                        mytable.run("List01", "Template02");
                        break;
                    case "tbllogin.xml":
                        mytable.run("List01", "Template03");
                        break;
                    default:
                        alert("ไม่ชื่อ Model ที่ต้องการ");
                        break;
                }
                //  alert(pname);
            }
 
            function openForm(id)  // เรียกหน้าจอฟอร์ม เพื่อ ทำาการ สร้าง ลบ แก้ไข
            {
                // alert(id);
                var myform = new AppML("appml.aspx", "prototypes/" + Modelname);
                myform.displayType = "form";
                myform.run("Form01", "", id);
 
            }
 
            function openTimeEachId(id)  //เพื่อเปิด ดูว่าพนักงานใดเป้นเจ้าของ เวลาเข้าออกในวันที่นั้นๆ
            {
                var tableEmpID = new AppML("appml.aspx", "prototypes/tblemployee.xml");
                tableEmpID.commands = false;
                // tableEmpID.setQuery("tblemployee.empid", id);  // setQuery unusable and throw a error is "illegal query error"
                //  tableEmpID.displayType = "report";  //display value have "report" or "form"
                // tableEmpID.run("List02", "", id);  // default display is report
                 tableEmpID.run("List02","",id);
            }
 
 
        </script>        
    </body>
</html>



.....จบคับ....ลองทำดูนะคับ....