Docstoc

Web Application Development with PHP & Ajax, MySQL

Document Sample
Web Application Development with PHP & Ajax, MySQL Powered By Docstoc
					1    Web Application Development with PHP & Ajax, MySQL




    Objective


       1. Running PHP, MySQL and Apache locally for development purposes.
       2. Understanding PHP syntax.
       3. Understanding important PHP configuration settings.
       4. Writing basic HTML.
       5. Using Cascading Style Sheets (CSS).
       6. Using HTML forms to allow website users to submit data.
       7. The difference between GET and POST requests and when to use each.
       8. The usage and purpose of JavaScript and AJAX.
       9. Using basic JavaScript.
       10. Working with AJAX Framework (jQuery).
       11. Working with sessions
       12. Writing basic SQL queries to add, manipulate and retrieve data from a database.
       13. Using PHPMyAdmin for managing a MySQL database.
       14. Deploying websites.
       15. XML Document




    1 | Prasertsak U.( Computer Science Department – FLAS)
2    Web Application Development with PHP & Ajax, MySQL



    Agenda

    Topic 1:
          เตรียมสภาพแวดลอมสําหรับการพัฒนาระบบงานบนเว็บโดยใช XAMPP Portable
          ทําความรูจักกับภาษา PHP และการติดตั้งคาตางๆ ที่จําเปน
          ทําความรูจักกับภาษา JavaScript
          ทําความรูจักกับแนวคิด AJAX

    Topic 2:
          เรียนรูการใชงาน CSS
          เรียนรูการสราง Form เพื่อใชในการกรอกขอมูล
          การใชงาน GET และ POST
          การสงขอมูลโดยการใช AJAX ไปยัง Web Server
          การเขียนโปรแกรมดวยภาษา PHP เพื่อรับขอมูลจาก Web Browser

    Topic 3:
          การใชงานฐานขอมูล MySQL
          การจัดการฐานขอมูลโดยใชโปรแกรม PHPMyAdmin
          การเชื่อมตอฐานขอมูลดวยภาษา PHP
          เรียนรูการใชงาน SQL พื้นฐาน

    Topic 4:
          แนะนําการเขียนโปรแกรมดวยภาษา PHP เพิ่มเติม
          การใชงาน Session เพื่อการจัดการดานความปลอดภัย

    Topic 5:
          ทําความรูจักกับ XML

    Topic 6:
          เรียนรูการใชงาน   jQuery และ plugin ตางๆ

          Workshop ทบทวนเนื้อหา




    2 | Prasertsak U.( Computer Science Department – FLAS)
3    Web Application Development with PHP & Ajax, MySQL



    Web Application Development with PHP

    เตรียมสภาพแวดลอมเพื่อใชในการพัฒนา web application
         ติดตั้งโปรแกรม XAMPP
         ติดตั้งโปรแกรม PSPad Freeware Editor

    ทําความรูจักกับ PHP
                PHP เปนภาษาจําพวก Scripting Language คําสั่งตางๆจะเก็บอยูในไฟลชนิดขอความ เวลาใช
    งานตองอาศัยตัวแปลชุดคําสั่งทําการแปลความหมายกอน แลวจึงเริ่มทํางานและสงผลลัพธคืนกลับมายัง
    ผูเรียกซึ่ง ผูเรียกใชนั้นอาจเปนภาษาสคริปตดวยกันเอง หรือเรียกจาก Browser ก็ได ตัวอยางของภาษา
    สคริปต เชน JavaScript, Perl เปนตน ลักษณะของ PHP ที่แตกตางจากภาษาสคริปตแบบอื่นๆ คือ PHP
    ไดรับการพัฒนาและออกแบบมา เพื่อใชงานเกี่ยวกับการสรางเอกสาร HTML โดยสามารถสอดแทรกหรือ
    แกไขเนื้อหาไดโดยอัตโนมัติ ซึ่ง PHP เปนภาษาที่ทํางานอยูในฝงของเครื่องใหบริการหรือ Server จึงเปน
    ภาษาที่อยูในกลุมของ Server Side Script เปนเครื่องมือที่สําคัญตัวหนึ่งที่ชวยใหเราสามารถสรางเอกสาร
    แบบ Dynamic HTML ไดอยางมีประสิทธิภาพและมีลูกเลนมากขึ้น

      Server Side Script คือ สคริปตที่ทํางานในฝงเซิรฟเวอร ถูกประมวลผลโดยโปรแกรมที่อยูบนเว็บเซิรฟเวอร
      เพื่อแปลงเปนเอกสารในรูปแบบ HTML แลวสงผลลัพธที่ไดใหกับเว็บบราวเซอร บนฝงไคลเอนต จุดเดนคือ ไมตอง
      คํานึงวาผูใชจะใชงานบราวเซอรชนิดใด เพราะการประมวลผลเกิดขึ้นที่ฝงเซิรฟเวอร แตตองคํานึงถึงเว็บเซิรฟเวอรวา
      สามารถรองรับการทํางานภาษาสคริปตนั้นๆ ไดหรือไม ดังนั้นจึงควรเลือกใชเว็บเซิรฟเวอรที่รองรับการทํางานภาษา
      สคริปตตัวที่เราตองการดวย เชน หากตองการใชงาน ASP ก็ตองเลือกเว็บเซิรฟเวอรที่เปน IIS ซึ่งทํางานบน
      ระบบปฏิบัติการ Windows แตถาหากตองการใชงาน PHP เราสามารถเลือกใชเว็บเซิรฟเวอรไดหลากหลายทั้ง
      Apache และ IIS สามารถรองรับการทํางานของ PHP ไดทําใหเลือกระบบปฏิบัติการที่ตองการไดมาก ทั้งที่เปน
      UNIX, Linux หรือ Windows เปนตน แตขอเสียของ Server Side Script คือ หากมีการสงขอมูลมาให
      เซิรฟเวอรประมวลผลมากเกินไป จะเปนภาระใหเซิรฟเวอรทํางานหนัก และสรางความหนาแนนในเสนทางของระบบ
      เครือขายมากขึ้น อาจทําใหการทํางานชาลง

    ตัวอยางโปรแกรมที่เขียนดวยภาษา PHP
      <?php                                                         <?php
      // this line for comment                                      // this line for comment
      $menu = array(‘item1′,‘item2′, ‘item3′);                      $menu = array(‘item1′, ‘item2′, ‘item3′);
      foreach($menu as $index => $item)                             foreach($menu as $index => $item)
      {                                                             { ?>
         echo ‘<li>’;                                               <li><?php echo $item; ?></li><?php
         echo $item;                                                }
         echo ‘</li>’;                                              ?>
      }
      ?>



    3 | Prasertsak U.( Computer Science Department – FLAS)
4    Web Application Development with PHP & Ajax, MySQL



    จากที่มีการพูดถึง Server Side Script และ Client Side Script เราจะมาดูกันตอไปวาทั้ง 2
    แบบที่พูดถึงนั้นเมื่อทําการเขียนโปรแกรมจะเปนอยางไร แผนภาพดานลางแสดงใหเห็นถึงการทํางานใน
    สวนของ Server Side Script โดยขั้นตอนที่ 2,3,4 นั้นเกิดขึ้นบน Server และขั้นตอนที่ 3 และ
    4 เปนขั้นตอนการทํางานที่เกี่ยวของกับ Server Side Script




                   รูป 1ภาพแสดงการทํางานของ server side script จาก www.awsinternet.com



    ทําความรูจักกับ Client Side Script
    ในการพัฒนาโปรแกรมเพื่อทํางานบนเว็บ เราจําเปนตองใชการผสมผสานระหวาง Client Side
    Script และ Server Side Script อยางหลีกเลี่ยงไมได ซึ่งโปรแกรมที่ทํางานในฝงของเว็บเบรา
    เซอร หรือที่ฝงเครื่องผูใชนั้นเรามักเรียกวา Client Side Script สามารถเขียนขึ้นไดจากหลายภาษา
    เชน JavaScript, VBScript เปนตน แตตัวที่เปนที่นิยมคือ JavaScript เนื่องมาจากสามารถ
    ทํางานบนเว็บเบราเซอรไดหลายตัว โดยที่ไมตองลงโปรแกรมเพิ่ม ดังนั้นจึงทําใหสะดวกตอการนําไปใชงาน
    รูปแบบการเขียน จะแทรกตัวอยูในแฟมประเภท HTML โดยมี Tag ครอบกลุมของคําสั่งที่เปน
    JavaScript เชน
    <script type=”text/javascript”>

      //   คําสั่งที่เปนภาษา   JavaScript

    </script>




    4 | Pr asertsak U.( Computer Science Departm ent – FLAS)
5    Web Application Development with PHP & Ajax, MySQL



    ตัวอยางภาษา javaScript
     <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”

     “http://www.w3.org/TR/html4/strict.dtd”>

     <html>

     <head>

     <script type=”text/javascript”>

     // begin here

     document.write(”<p>Browser: “);

     document.write(navigator.appName + “</p>”);

     document.write(”<p>Browserversion: “);

     document.write(navigator.appVersion + “</p>”);


     document.write(”<p>Code: “);

     document.write(navigator.appCodeName + “</p>”);

     document.write(”<p>Platform: “);

     document.write(navigator.platform + “</p>”);


     document.write(”<p>Cookies enabled: “);

     document.write(navigator.cookieEnabled + “</p>”);

     document.write(”<p>Browser’s user agent header: “);

     document.write(navigator.userAgent + “</p>”);

     </script>

     </head>

     <body>

     <h1> Your browser information </h1>

     </body>

     </html>


    โปรแกรมตัวอยางจาก W3C Schools (http://www.w3schools.com) เปนโปรแกรม
    เล็กๆ ที่ทําใหเราทราบรายละเอียดของเว็บเบราเซอรที่เรากําลังเปดใชงานอยู วิธีทดสอบคือใหพิมพ code
    ทั้งหมดเก็บลงไฟลชนิดขอความโดยใหใชชื่ออะไรก็ได และใหกําหนดชนิดของไฟลเปน HTML (ในที่นี้จะ
    ขอใหใชชื่อวา mybrowser.html) จากนั้นใหบันทึกไวที่ desktop แลวลอง เปดแฟมดังกลาว
    ขึ้นมาโดยใชเว็บเบราเซอร (หรือโดยการ dblclick ที่ไฟลก็ได)




    5 | Prasertsak U.( Computer Science Department – FLAS)
6    Web Application Development with PHP & Ajax, MySQL




    Note
    สังเกตวาเราสามารถเปดแฟมได และทํางานไดอยางถูกตอง โดยไมตองอาศัย Web Server เนื่องจากคําสั่งที่เราเขียน
    นั้นเปน Client Side Script ที่ไมไดเรียกใชโปรแกรมใดๆ บนฝง Server จึงทํางานบนเว็บเบราเซอรเทานั้น โดย
    ไมตองอาศัย Web Server

    ทําความรูจักกับ Server Side Script
    โปรแกรมที่ทํางานในฝงเครื่อง Server นั้นโดยมากเราจะเรียกวา Server Side Script ซึ่งสามารถ
    เขียนขึ้นไดจากหลายภาษาขึ้นอยูกับการเลือกใชงาน เชน PHP, ASP.NET, Python, Ruby เปน
    ตน โดยเมื่อมีการเรียกใช โปรแกรมแปลภาษาที่ทําหนาที่ในการแปลแตละภาษาที่เราใชงานใหอยูใน
    รูปแบบที่สามารถนําไปใชงานได จะถูกเรียกขึ้นมาเพื่อทํางาน จากนั้นโปรแกรมที่ไดซึ่งอยูในสภาพพรอมใช
    ก็จะทํางานและสงผลลัพธที่ได ซึ่งมักอยูในรูปแบบของภาษาที่เบราเซอรสามารถเขาใจได เชน
    HTML+CSS+JavaScript, XML เปนตน กลับไปยังเบราเซอรเพื่อแสดงผลตอไป




    6 | Pr asertsak U.( Computer Science Departm ent – FLAS)
7    Web Application Development with PHP & Ajax, MySQL



    ตัวอยางภาษา PHP ซึ่งจัดอยูในกลุมของ Server Side Script
     <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
     “http://www.w3.org/TR/html4/strict.dtd”>
     <html>
     <head>
     <title> A Server Side Application </title>
     </head>
     <body>
     <ul>
     <?php
     // This line for Comment
     $menu = array(‘item1′, ‘item2′, ‘item3′);
     foreach($menu as $index => $item)
     {
       echo ‘<li>’;
       echo $item;
       echo ‘</li>’;
     }
     ?>
     </ul>
     </body>
     </html>




    โปรแกรมตัวอยางจาก W3C Schools (http://www.w3schools.com) เปนโปรแกรมที่
    ใชในการแสดงผลในลักษณะ List Item ดังนี้

          item1
          item2
          item3

    ใหทดลองพิมพ code ภาษา PHP ตามตัวอยางแลวบัทึกไวที่ desktop โดยใชชื่อแฟมเปนอะไรก็ได
    แตใหใชนามสกุลเปน .php (ในที่นี้จะใชชื่อวา sscript.php) จากนั้นใหลองเปดแฟมดังกลาวดูดวย
    Web Browser จะสังเกตเห็นวาผลลัพธที่ไดไมถูกตองตามที่เราตองการ




                                                                                       เกิดอะไรขึ้น?




    7 | Pr asertsak U.( Computer Science Departm ent – FLAS)
8    Web Application Development with PHP & Ajax, MySQL



    คําตอบ
    เนื่องจากโปรแกรมที่เราเขียนนั้นเปน Server Side Script ดังนั้นการทํางานจึงตองอาศัย Web
    Server และตัวแปรภาษา (ในที่นี้คือตัวแปลภาษา PHP) ที่จะตองแปลงสภาพ code ที่เราเขียนให
    อยูในสภาพพรอมใช จากนั้นจึงทํางานตามที่เราสั่งไว พรอมกับแปลงผลลัพธที่ไดใหอยูในรูปแบบของภาษา
    ที่เบราเซอรเขาใจ ซึ่งในที่นี้คือ HTML และสงกลับมายังเบราเซอรเพื่อแสดงผล แตในขั้นตอนที่เราทําไป
    ตอนแรกนั้น เรานําแฟม sscript.php ไปวางไวที่ desktop และเปดดวย browser ตรงๆ ทําให
    การประมวลผลไมผาน web server จึงไมเกิดการแปลภาษา และโปรแกรมไมไดทํางาน ผลลัพธที่ได
    จึงเกิดจาก browser พยายามแปลความหมายและแสดงผลตามที่พอจะเขาใจ ซึ่งแฟม
    sscript.php ไมไดเขียนดวย HTML ทั้งหมด โดยมี code ภาษา PHP ปนอยูดวย ซึ่ง
    browser ไมเขาใจภาษา PHP ดังนั้นจึงทําใหผลลัพธไมถูกตอง

    วิธีการที่ถูกตอง ควรทําอยางไร
    ใหยายแฟม sscript.php ไปไวภายใต Document Root ของ Web Server จากนั้นให
    เรียกจาก Web Browser โดยใส url ใหถูกตอง เชน http://localhost/sscript.php เปน
    ตน (กรณีนี้ทดสอบโดยเรียกจากเครื่องที่ทํางานอยูจึงสามารถใชคําวา localhost ได ซึ่งในความเปนจริงคําวา
    localhost อาจเปลี่ยนเปน domain name อื่นได เชน www.mydomain.com เปนตน)




    เมื่อแสดง code ของหนาเว็บที่กําลังแสดงอยูจะเห็นวา เปนภาษา HTML ซึ่งเกิดจากการที่ภาษา
    PHP ที่เขียนนั้นสรางขึ้น แลวสงกลับมาแสดงผลนั่นเอง ฉะนั้นบนฝง web browser จะมองไมเห็น
    โปรแกรมเปนภาษา PHP แตจะเห็นเพียงผลลัพธที่ไดจากการทํางานของโปรแกรม PHP ซึ่งทํางานบน
    ฝง Server เทานั้น



    8 | Pr asertsak U.( Computer Science Departm ent – FLAS)
9    Web Application Development with PHP & Ajax, MySQL




    ภาพแสดง code ภาษา HTML ที่แสดงหลังจากเรียกใช sscript.php ซึ่งจะเห็นวาเปนภาษา
    HTML ลวนๆ ไมปรากฏ code ของภาษา PHP ใหเห็นเนื่องจากถูกแปลความหมาย และประมวลผล
    เรียบรอยแลวในฝงของ Server

    ทําความรูจักกับ AJAX
    เอแจ็กซ (AJAX - Asynchronous JavaScript And XML) เปนกลุมของเทคนิคในการพัฒนาเว็บแอป
    พลิเคชันเพื่อใหความสามารถโตตอบกับผูใชไดดีขึ้น โดยการรับสงขอมูลเบื้องหลัง ทําใหทั้งหนาเว็บเพจไม
    จําเปนตองโหลดใหมทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งชวยทําใหเพิ่มการตอบสนอง ความรวดเร็ว และการใช
    งานโดยรวมใหเร็วขึ้น และชวยลดปริมาณขอมูลที่วิ่งในเครือขายใหนอยลง
    AJAX ใชเทคโนโลยีหลายอยางที่มีอยูรวมกันดังนี้

         XHTML (หรือ HTML) และ CSS ใชในการแสดงผลและจัดรูปแบบขอมูล
         JavaScript เพื่อการเขาถึงสวนตางๆ ของ Document ภายใตมุมมองแบบ Document Object
            Model (DOM) เพื่อใชในการเปลี่ยนแปลงหรือโตตอบกับผูใช
         XMLHttpRequest ใชในการแลกเปลี่ยนขอมูลแบบ asynchronous กับเว็บเซิรฟเวอร
         XML รูปแบบขอมูลเพื่อการแลกเปลี่ยน โดยรูปแบบอื่นก็สามารถใชไดเชนกัน เชน HTML, JSON,
            หรือ Plain Text เปนตน




    9 | Pr asertsak U.( Computer Science Departm ent – FLAS)
10    Web Application Development with PHP & Ajax, MySQL




     ภาพและขอมูลจาก http://th.wikipedia.org

     หลักการทํางาน
     วิธีการทํางานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแลวเมื่อผูใชทําการรองขอขอมูลจากเซิรฟเวอร
     ตัวเว็บเบราวเซอรจะทําการสงขอมูลการรองขอโดยใชโพรโทคอล HTTP เพื่อติดตอกับเว็บเซิรฟเวอร และที่
     เว็บเซิรฟเวอรจะทําการประมวลผลจากการรองขอที่ไดรับ และสงผลลัพธกลับไปใหผูใช ซึ่งวิธีการขางตน
     เปนวิธีการแบบการรองขอและการตอบรับ (Request and Response) ซึ่งผูใชจะตองรอระหวางที่
     เซิรฟเวอรประมวลผลอยู ซึ่งเปนหลักการทํางานแบบ Synchronous แตการทํางานของเว็บแอปพลิเคชันที่
     ใชเทคนิคเอแจ็กซ (AJAX) จะเปนการทํางานแบบ Asynchronous หรือการติดตอสื่อสารแบบไมตอเนื่อง
     โดยฝงเบราเซอรมีตัวชวยในการสื่อสารกับเว็บเซิรฟเวอรแทน ทําใหเบราเซอรสามารถทํางานอื่นไดในขณะ
     รอการตอบกลับจากเซรฟเวอร เมื่อมีการตอบกลับจึงคอยนําผลลัพธที่ไดไปใชงาน จึงไมจําเปนตองรอ


     10 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
11    Web Application Development with PHP & Ajax, MySQL



     ตลอดเวลา




     11 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
12    Web Application Development with PHP & Ajax, MySQL



     ทําความรูจักกับ XMLHttpRequest
     เปน Object ที่ทําหนาที่แลกเปลี่ยนขอมูลระหวาง Web Browser กับ Web Server โดยการ
     สราง object นี้จะขึ้นอยูกับ browser ที่ใช โดยสวนใหญการเขียนโคดในสวนนี้จะตองทําการ
     ตรวจสอบใหครอบคลุมทุก browser ลักษณะของ code ในขั้นตอนการสราง
     XMLHttpRequest object เปนดังนี้

      var reqobj;
      if (window.XMLHttpRequest) {
        reqobj = new XMLHttpRequest(); // for Netscape, FireFox
      }
      else if (window.ActiveXObject) {
        reqobj = new ActiveXObject(“Microsoft.XMLHTTP”); // for IE
      }
      else {
        alert(“Your browser is not support AJAX!”);
        return false;
      }



     หลังจากเราได XMLHttpRequest Object เรียบรอยแลว (ในตัวอยาง object ที่ไดคือ reqobj ) เราจะตอง
     สงขอมูลใหกับ object ดังกลาวทําการสงให ซึ่งวิธีการจะกลาวถึงในตัวอยางถัดไป แตเมื่อสงไปยัง web
     server และมีขอมูลตอบกลับมา เราจะสามารถตรวจสอบไดอยางไร ในเมื่อหลังจากสงไปแลว เราสามารถ
     หันไปทํางานอื่นได โดยไมตองรอ คําตอบคือ เราจะตองบอก Request Object ทุกครั้งกอนสงวาเมื่อมี
     ขอมูลตอบกลับมาและเมื่อไดรับขอมูลครบแลว จะใหเรียกใชโปรแกรมชื่อวาอะไร (โปรแกรมในที่นี้หมายถึง
     function ของ Javascript) ลักษณะการบอกเปนดังนี้

       reqobj.onreadystatechange = Processresponse;

       function Processresponse() {
         // detail
       }

     หรือสามารถเขียนรายละเอียดของฟงกชั่นไปพรอมกับการบอก request object ไดเลยดังนี้

       reqobj.onreadystatechange = function()
       {
         // detail
       }




     12 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
13    Web Application Development with PHP & Ajax, MySQL



     เมื่อขอมูลเริ่มสงจนกระทั่งรับขอมูลกลับมาเรียบรอยแลว หากเราตองการตรวจสอบสถานะการสงขอมูล
     ในชวงตางๆ จะทําไดหรือไม? คําตอบคือทําไดโดยตรวจสอบจาก คา readyState ของ Request Object
     ซึ่งคาสถานะมีอยูดวยกัน 5 ระดับคือ

     คาของ reqobj.readyState

       0       เกิดปญหา ไมสามารถเริ่มตนการสงได
       1       เริ่มตนการเชื่อมตอ
       2       ขอมูลถูกสงเรียบรอยแลว
       3       กําลังประมวลผลขอมูล
       4       ผลลัพธตอบกลับมาเรียบรอยแลว สามารถนําไปใชไดทันที

     โดยขอมูลที่ตอบกลับมานั้นจะอยูใน reqobj เราสามารถนําไปใชไดทันที ตัวอยางการนําไปใชเชน
       reqobj.onreadystatechange = Processresponse;

       function Processresponse() {
         if (reqobj.readyState == 4) {
           var resultarea = document.getElementById(‘result’);
           resultarea.innerHTML = reqobj.responseText;
         }
       }

     หรือเขียนไดอีกแบบคือ
       reqobj.onreadystatechange = function () {
         if (reqobj.readyState == 4) {
           var resultarea = document.getElementById(‘result’);
           resultarea.innerHTML = reqobj.responseText;
         }
       }



     หลังจากเราไดสราง Request Object และบอกชื่อฟงกชั่นและรายละเอียดการทํางานหหลังจากไดรับ
     ขอมูลตอบกลับเรียบรอยแลว ตอไปเปนขั้นตอนของการสงขอมูลเพื่อให request object ทําการสง
     ลักษณะ code เปนดังนี้
       reqobj.open(“GET”, “target.php”, true);
       reqobj.send(null);




     13 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
14    Web Application Development with PHP & Ajax, MySQL



     สรุปขั้นตอนการใชงาน XMLHttpRequest Object

           สราง   Request         กําหนดฟงกชั่นเพื่อทํางาน
           Object                  หลังมีขอมูลตอบกลับ



                                            สงขอมูล




                                    ตรวจสอบสถานะการตอบ                          ประมวลผลขอมูล หรือนําเสนอ
                                    กลับของขอมูล                               ขอมูลในรูปแบบตางๆ



     โปรแกรมตัวอยางการทํางาน
     ทดสอบการทํางานของ AJAX โดยแยกเปนการทํางานในสวนของ Browser และสวนที่อยูบน Web Server
     ซึ่งภาพดานลางแสดงผลของการทํางาน กอนสงขอมูล และหลังสงขอมูลตามลําดับ




     พื้นที่แสดงขอมูลที่ Server                                แสดงขอมูลที่ Server
     ตอบกลับมา                                                  ตอบกลับมา โดยแทรกขอมูล
                                                                ทับขอมูลเดิมโดยไมตองเปด
                                                                หนาหใม




     14 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
15    Web Application Development with PHP & Ajax, MySQL



     ตัวอยางโปรแกรมสวนแรก
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html;
      charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>AJAX Concept</title>
      <script type="text/javascript">

        var reqobj;

        function createRequestObject()
        {
            if (window.XMLHttpRequest)
           {
              reqobj = new XMLHttpRequest(); // for Netscape, FireFox
           }
           else if (window.ActiveXObject)
           {
             reqobj = new ActiveXObject('Microsoft.XMLHTTP'); // for IE
           }
           else
           {
             alert('Your browser is not support AJAX!');
             return false;
           }
         }

        function doAjax() {

            createRequestObject();
            if (reqobj != null)
            {
              reqobj.onreadystatechange =           function () {

                  if (reqobj.readyState == 4)
                  {
                    var resultarea = document.getElementById('result');
                    resultarea.innerHTML = reqobj.responseText;
                  }
                }
                reqobj.open("GET", "sscript.php", true);
                reqobj.send(null);
            }
        }

        </script>
        </head>




                                                                    ตอหนาถัดไป…

     15 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
16    Web Application Development with PHP & Ajax, MySQL



        <body>
          <p>
          <h3>Test AJAX Result: </h3> <hr />
          <div id='result'>
          result will display here...
          </div>
          </p> <hr />
          <form>
          <input type="button" value="Press me" onclick="doAjax();" />
          </form>
        </body>
        </html>




     ตัวอยางโปรแกรมในสวนที่ AJAX เรียกใชนั้นคือ sscript.php เปนตัวอยางเดียวกับ php code ที่กลาวถึง
     กอนหนานี้ (หนา 8)

     สรุปภาพการทํางาน




     16 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
17    Web Application Development with PHP & Ajax, MySQL



     บรรยายเพิ่มเติมเกี่ยวกับ CSS
          (รายละเอียดแสดงไวใน Slide)

     เรียนรูเพิ่มเติมจากตัวอยาง
     ขอมูลอางอิงจาก http://www.javapassion.com/

     ขั้นที่ 1
     เราจะเริ่มดวยการสรางเว็บเพ็จโดยใชภาษา HTML พื้นฐานทั่วไปดังนี้

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html>
        <head>
          <title>My first styled page</title>
        </head>

         <body>

            <!-- Site navigation menu -->
            <ul class="navbar">
              <li><a href="page1.html">Home page</a>
              <li><a href="page2.html">Second Page</a>
              <li><a href="page3.html">Third Page</a>
              <li><a href="page4.html">Forth Page</a>
            </ul>

            <!-- Main content -->
            <h1>My first styled page</h1>

            <p>Welcome to my styled page!

            <p>It lacks images, but at least it has style.
            And it has links, even if they don't go
            anywhere…

            <p>There should be more here, but I don't know
            what yet.

            <!-- Sign and date the page, it's only polite! -->
            <address>Made 5 April 2004<br>
            by someone.</address>

        </body>
      </html>




     จากตัวอยาง code ดานบนใหเราบันทึกลงในแฟมขอมูลชื่อวา testcss.html จากนั้นใหเรียกหนาเว็บนี้
     ขึ้นมาโดยอาศัย web browser แลวสังเกตผล



     17 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
18    Web Application Development with PHP & Ajax, MySQL



     ตัวอยางผลลัพธที่ไดจากเว็บเพ็จที่บันทึกไว (testcss.html)




     ขั้นที่ 2
     เราจะเพิ่มรูปแบบบางอยางเขาไป โดยใหมีผลกับสีพื้นหลัง และสีตัวอักษร ซึ่งจะไมเปลี่ยนแปลงขอมูลใดๆ
     กับเนื้อหาหลักของเว็บเพ็จ แตจะใชการทํางานของ CSS เปลี่ยนแปลงลักษณะการนําเสนอเทานั้น ให
     เพิ่มเติม code ในสวนนี้บริเวณ <head> ของเอกสารเพื่ออางอิงรูปแบบภายนอกเขามาใชงาน ซึ่งหลังจาก
     ขั้นตอนนี้เราจะตองดําเนินการสรางแฟมเอกสารชื่อวา mystyle.css และใสคําสั่งที่เกี่ยวของกับการ
     จัดรูปแบบลงไป (จะกลาวถึงในขั้นตอนตอไป)

          <head>
            <title>My first styled page</title>
            <link rel="stylesheet" href="mystyle.css">
          </head>



     ขั้นที่ 3
     สรางแฟมขอมูลชื่อวา mystyle.css และเขียน code เพิ่มเติมลงไปดังนี้

      body {
                  color: purple;
                  background-color: #66CCCC
      }




     18 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
19    Web Application Development with PHP & Ajax, MySQL



     จากนั้นใหลองเรียกดูเว็บเดิมดวย web browser อีกครั้ง ซึ่งเราจะเห็นถึงการเปลี่ยนแปลงที่เกิดขึ้น โดยการ
     จัดรูปแบบสามารถกระทําไดโดยไมจําเปนตองแกไขขอมูลเดิม สามารถทําที่แฟมจัดรูปแบบไดทันที

     ตัวอยางผลลัพธที่ไดจากเว็บเพ็จที่บันทึกไว (testcss.html+mystyle.css)




     ขั้นที่ 4
     เราจะจัดขอมูลสวนของ class ที่ชื่อวา navbar ใหอยูบริเวณดานซายของตัวอักษรเปรียบเสมือนเปน เมนู
     ยอยโดยใหเราเพิ่มเติม code ตอไปนี้เขาไปในแฟม mystyle.css
       ul.navbar {
                position: absolute;
                top: 2em;
                left: 1em;
                width: 9em
       }

     และเพิ่มเติม code ใหกับรูปแบบของ body ดังนี้
       body {
                   color: purple;
                   background-color: #66CCCC;
                   padding-left: 11em
       }



     โดย code ที่เพิ่มใหกับ body นั้นจะเปนการปรับขนาดของจุดเริ่มตน ใหดานซายมีชองวางมากพอสําหรับ
     แสดงสวนของเมนูยอย



     19 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
20    Web Application Development with PHP & Ajax, MySQL



     จากนั้นใหลองเรียกดูเว็บเดิมดวย web browser อีกครั้ง ซึ่งเราจะเห็นถึงการเปลี่ยนแปลงที่เกิดขึ้น ดังนี้




     ขั้นที่ 5
     สุดทายเราจะเพิ่มเติมลูกเลนและสีสรรใหกับเมนูยอย โดยเพิ่ม code เขาไปยังแฟมรูปแบบ mystyle.css
     ดังนี้ (ตัวอักษัตัวเอียงคือสวนที่เพิ่มเขาไปใหม)
                ul.navbar {
                   list-style-type: none;
                   padding: 0;
                   margin: 0;
                   position: absolute;
                   top: 2em;
                   left: 1em;
                   width: 9em }

                ul.navbar li {
                   background: white;
                   margin: 0.5em 0;
                   padding: 0.3em;
                   border-right: 1em solid black }
                ul.navbar a {
                   text-decoration: none }
                a:link {
                   color: blue }
                a:visited {
                   color: purple }




     จากนั้นใหลองเรียกดูดวย web browser อีกครั้งครับ




     20 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
21    Web Application Development with PHP & Ajax, MySQL



     ผลลัพธที่ไดเปนดังนี้




     จะสังเกตเห็นวาการใชงาน Cascading Style Sheet (CSS) นั้นมีประโยชนอยางมาก เราสามารถเปลี่ยน
     รูปแบบการแสดงผลใหแตกตางออกไปได โดยไมกระทบกับขอมูลหลัก จึงทําใหการนําเสนอสามารถแยก
     เปนสวนงานที่มีความเชี่ยวชาญเฉพาะได เปนการสนับสนุนแนวคิด การทําเว็บแบบ Personalization ไดดี

     การรับสงขอมูลระหวางฟอรมกับ PHP Script
     เราจะเรียนรูการเขียนฟอรมเพื่อรับขอมูลจากผูใชและสงใหกับ Web Server โดยใช PHP Script รอรับ
     ขอมูล จากนั้นจะนําขอมูลที่รับมานั้นไปประมวลผล และสงผลลัพธกลับไปยัง Web Browser เพื่อแสดงผล
     ตอไป

        Form Demo


         Input   Enter Text          Submit

                 result
         MD5
                                       แสดงคา
         SHA1    result                MD5, SHA1                                                      คํานวณคา
                                                                                                      MD5, SHA1
                                                             t ex   t                               PHP Script
                                                      I nput


                                                                        lt
                                      Internet               R esu
                                        Internet                                    Web Server

                                                               MD5, SHA1
     แผนภาพแสดงสิ่งที่เรากําลังจะลงมือทําตอจากนี้ เพื่อใหเห็นภาพการทํางานในแตละสวนเมื่อมีการสงขอมูลจาก Web
     Browser มายัง Web Server พรอมกับแสดงผลหลังจากไดรับผลลัพธกลับมา




     21 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
22    Web Application Development with PHP & Ajax, MySQL



     การสรางฟอรมเพื่อรับขอมูล

     ขั้นที่ 1
     เราจะใช tag ชื่อวา <form> ประกอบกัน 2 สวน คือสวนที่ใชในการสงขอมูล และสวนที่ใชในการแสดงผล
     ลัพธ โดยสวนที่ใชสงขอมูล จะใหชื่อวา frminput สวนที่ใชแสดงผลลัพธจะใหชื่อวา result

     สวนที่ใชในการสงขอมูล จะประกอบดวย textbox และปุม ซึ่งเมื่อกดจะเรียกใช ฟงกชั่นของ javascript ชื่อ
     วา doAjax พรอมกับสง parameter 2 ตัวคือ รูปแบบการสง และคาของขอมูลที่จะสง

       <body>
       <form name='frminput'>
         <p>
         Input String: <input type='text' name='inputstr' value='' />
         <input type='button' name='submit' value='submit'
                onclick='doAjax("get", inputstr.value);' />
         </p>
       </form>

       <form name='result'>
         <p>
         MD5:<input type='text' name='md5str' value='' size='50' />
         </p>
         <p>
         SHA1:<input type='text' name='sha1str' value='' size='50' />
         </p>
       </form>
       </body>                                           ajaxhash.html




     รูปแบบการสงขอมูลแบบ GET และ POST
     อธิบาย




     22 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
23    Web Application Development with PHP & Ajax, MySQL



     ขั้นที่ 2
     สรางสวนของ JavaScript โดยประกอบดวย

         Function สําหรับสราง XMLHttpRequest Object เพื่อใชในการรับสงขอมูล
         Function ชื่อวา doAjax เพื่อใชในการสงขอมูลแบบ GET และ POST

      var reqobj;

         function createRequestObject()
         {
           if (window.XMLHttpRequest)
           {
             reqobj = new XMLHttpRequest(); // for Netscape, FireFox
           }
           else if (window.ActiveXObject)
           {
             reqobj = new ActiveXObject('Microsoft.XMLHTTP'); // for IE
           }
           else
           {
             alert('Your browser is not support AJAX!');
             return false;
           }
         }



      function doAjax(type, valuestr)
      {
          createRequestObject();
          if (reqobj != null)
          {
            reqobj.onreadystatechange =               function () {

                     if (reqobj.readyState == 4)
                     {
                       rs = reqobj.responseText;
                       // process result here ... not complete
                     }
                 }

                 switch (type.toUpperCase())
                 {
                   case 'GET': // process GET here ...not finished
                           break;
                   case 'POST': // process POST here ...not finished
                           break;
                 }
             }
         }



     23 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
24    Web Application Development with PHP & Ajax, MySQL



     แสดงโปรแกรมสวนของ JavaScriot แบบเต็ม ดังนี้
        function doAjax(type, valuestr)
        {

            createRequestObject();

            if (reqobj != null)
            {
              reqobj.onreadystatechange =           function () {

                    if (reqobj.readyState == 4)
                    {
                      rs = reqobj.responseText;
                      md5 = rs.split('|',2)[0];
                      sha1 = rs.split('|',2)[1];
                      document.result.md5str.value = md5;                นําผลลัพธแสดงในกลอง
                      document.result.sha1str.value = sha1;
                    }                                                    ขอความที่ไดเตรียมไว
                }

                switch (type.toUpperCase())
                {

                    case 'GET':
                            param = 'inputstr=' + valuestr;
                            reqobj.open("GET", "hashing.php" + "?" + param, true);
                            reqobj.send(null);
                            break;

                    case 'POST':

                            param = 'inputstr=' + valuestr;
                            reqobj.open("POST", "hashing.php", true);

                          //Send the proper header information along with the
      request
                            reqobj.setRequestHeader("Content-type",
                                       "application/x-www-form-urlencoded");

                            reqobj.setRequestHeader("Content-length",
                                         param.length);
                            reqobj.setRequestHeader("Connection", "close");
                            reqobj.send(param);
                            break;
                }
            }                                                       ajaxhash.html
        }




     24 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
25    Web Application Development with PHP & Ajax, MySQL



     ขั้นที่ 3
     เขียนโปรแกรมสวนที่ทํางานบน Web Server ดวยภาษา PHP เพื่อรับขอมูลจาก Browser จากนั้นจึงนํามา
     ประมวลผล โดยจะคํานวณคา MD5 และ SHA1 จากนั้นจะนําผลลัพธที่ไดรวมกัน โดยคั่นดวยเครื่องหมาย
     “|” แลวสงกลับ เพื่อให Browser นําไปแสดงผล ตัวอยาง code ในสวนนี้เปนดังนี้

      <?php

         $text      = $_REQUEST['inputstr'];                            รับคาที่สงมาจาก web
         if (strlen($text) > 0)                                         browser
         {

            $_sha1 = sha1($text);
            $_md5 = md5($text);
            echo $_md5 . '|' . $_sha1;

         }
         else
         {                                                               hashing.php
           echo "Invalid input string!";
         }

      ?>

     จากตัวอยางโปรแกรม เราสามารถรับคาที่สงมาจาก Browser ไดดวยการใช คําสั่ง $_GET, $_POST และ
     $_REQUEST โดยมีความแตกตางกันคือ

          $_GET[‘ชื่อตัวแปรที่สงมา’] วิธีการนี้ผูสงจะตองสงดวย method=’GET’
          $_POST[‘ชื่อตัวแปรที่สงมา’] วิธีการนี้ผูสงจะตองสงดวย method=’POST’
          $_REQUEST[‘ชื่อตัวแปรที่สงมา’] วิธีการนี้ผูสงจะสงดวย method ใดก็ไดสามารถรับไดทั้งสิ้น

     จากนั้นจะสงคาที่ไดรับเก็บไวในตัวแปรชื่อวา $text พรอมนําไปคํานวณคา MD5 และ SHA1ดวยฟงกชั่น
     มาตรฐานของภาษา PHP และนําผลลัพธที่ไดมาตอกัน คั่นดวยเครื่องหมาย “|” แสดงออกทางจอภาพ ผาน
     คําสั่ง echo นั่นเอง ซึ่งจากโปรแกรมนี้ หากผูเรียกไมไดใชการเรียกผาน AJAX เราจะไดผลลัพธแสดงเปน
     หนาใหมเปดขึ้นมาใน Browser

     ขั้นที่ 4
     นําแฟมทั้งหมดวางไวใน Web Server จากนั้นใหเรียกใชผาน Browser แลวสังเกตผลลัพธที่ได

     http://localhost/train/ajaxhash.html



     25 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
26    Web Application Development with PHP & Ajax, MySQL



     ภาพตัวอยางผลลัพธที่ได




     จากตัวอยางจะเห็นวาเมื่อเราสง คําวา hello ไปยัง web server และมีโปรแกรม hashing.php มารับ เมื่อ
     ทําการคํานวณคา MD5 และ SHA1 ของคําวา hello แลวตอบกลับ ผลลัพธจะถูกนํามาแสดงไวใน textbox
     ที่เตรียมไว โดยไมมีการเปดหนาเว็บใหมแตอยางใด

     การทดสอบ
     ผลที่ไดจะเปนอยางไร เมื่อเราสรางแฟม HTML ที่มีลักษณะ code ดังนี้ และเรียกใช

      <html>
      <body>
        <form name='frminput' method='post' action='hashing.php'>
        <p>
        Input String: <input type='text' name='inputstr' value='' />
        <input type='submit' name='submit' value='submit' />
        </p>
        </form>
        <form>
        <p>
        MD5:<input type='text' name='md5str' value='' size='50' />
        </p>
        <p>
        SHA1:<input type='text' name='sha1str' value='' size='50' />
        </p>
        </form>
        </body>
      </html>


     อธิบายผล




     26 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
27    Web Application Development with PHP & Ajax, MySQL



     การใชงานฐานขอมูล MySQL
     จากที่ผานมาเราไดรูจักการใชงาน AJAX กันบางแลว ตามสมควร ซึ่งพื้นฐานที่ไดทดลองทํากันนั้น เรา
     สามารถนําไปประยุกตใชในระดับที่สูงขึ้นได เนื่องจากเขาใจแนวคิดเปนอยางดีแลว (หวังวาคงเปนเชนนั้น ?)
     ตอไปนี้จะไดพูดถึงการใชงาน AJAX เพื่อเก็บขอมูลโดยใชฐานขอมูลที่ชื่อวา MySQL ซึ่งเปนฐานขอมูลแบบ
     FreeWare สามารถใชไดโดยไมตองเสียคาใชจาย และเปนตัวที่มีประสิทธิภาพตัวหนึ่ง กอนอื่นตองทดสอบ
     กันกอนวา PHP ที่เราจะใชนั้น รองรับ MySQL แลวหรือยัง ทําตามนี้ครับ

     ตรวจสอบการรองรับ MySQL
     ใหสรางแฟม PHP ขึ้นมาชื่อใดก็ได และใหพิมพฟงกชั่น ชื่อวา phpinfo()
         1. <?php
         2.    phpinfo();
         3. ?>


     จากนั้นใหเรียกโดยผาน Web Browser และใหสังเกตผลลัพธที่ได หากพบขอมูลในลักษณะนี้ แสดงวา
     PHP Configuration ถูกกําหนดใหรองรับ MySQL เรียบรอยแลว




     แตหากไมพบ Section นี้หรือ Section ที่ใกลเคียงเชน MySQLi ก็อาจตองติดตั้ง Config กันใหมกอนครับ




     27 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
28    Web Application Development with PHP & Ajax, MySQL



     ขั้นตอนตอไป เมื่อตรวจสอบแลวพบวาทุกอยางพรอม เราจะเริ่มสรางฐานขอมูลกัน โดยวิธีการสรางมีหลาย
     แนวทางดวยกัน เชน

              ใช SQL Console โดยการพิมพคําสั่งที่ใชในการจัดการฐานขอมูลลงไป
              ใชเครื่องมือชวยจัดการฐานขอมูลแบบ GUI เชน phpMyAdmin หรือตัวอื่นๆ ที่มี
                 ความสามารถแบบเดียวกัน




     ภาพดานบน แสดงถึงการทํางานผานโปรแกรม phpMyAdmin ซึ่งจะชวยอํานวยความสะดวกใหกับเราเปน
     อยางมาก จะสังเกตวาทุกขั้นตอนที่เราทํา จะปรากฏคําสั่ง SQL ใหเราเห็นตลอด เราสามารถใชคําสั่งที่
     ปรากฏ ผาน SQL Console ไดเชนกัน




     ตอไปใหเราสรางฐานขอมูลชื่อวา training และใหสรางตารางชื่อวา subjects ประกอบดวยฟลดทั้งสิ้น 4
     ฟลดตามรูปดานบน โดยใชโปรแกรม phpMyAdmin หลังจากสรางเรียบรอยแลวใหเราใสขอมูลลงไปเพื่อ
     เปนการทดสอบโดยใชโปรแกรม phpMyAdmin เชนกัน




     28 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
29    Web Application Development with PHP & Ajax, MySQL




     ตัวอยางจอภาพเมื่อทําการเพิ่มเติมขอมูลผานโปรแกรม phpMyAdmin ซึ่งหลังจากขั้นตอนนี้ เราจะเริ่ม
     เขียนโปรแกรมเพื่อจัดการกับฐานขอมูล MySQL

     ขั้นตอนที่ 1 การเชื่อมตอฐานขอมูล
     การเชื่อมตอกับฐานขอมูลโดยใชภาษา PHP นั้นจะตองประกอบดวยขอมูลที่จําเปนดังนี้คือ

         1. Hostname
         2. Database Name
         3. Username
         4. Password

     โดยมีตัวอยางพื้นฐานในการเชื่อมตอดังนี้

       Code:


          1. <?php
          2.    mysql_connect("localhost", "username", "password") or die(mysql_error());
          3.    echo "Connection to the server was successful!<br/>";
          4.
          5.    mysql_select_db("test") or die(mysql_error());
          6.    echo "Database was selected!<br/>";
          7. ?>
          8.

     จากตัวอยางโปรแกรมมีจุดสําคัญที่ตองกลาวถึงคือ ฟงกชั่นชื่อวา mysql_connect() และ
     mysql_select_db()




     29 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
30    Web Application Development with PHP & Ajax, MySQL



     mysql_connect()          ใชในการเชื่อมตอฐานขอมูลโดยตองระบุ เครื่องที่มีฐานขอมูลทํางานอยู รหัสผูใช
     และรหัสผาน เพื่อเขาใชฐานขอมูล หากเชื่อมตอไมไดโปรแกรมจะแสดงขอความแสดงความผิดพลาดผาน
     ฟงกชั่น die() และหยุดการทํางาน

     mysql_select_db() ใชในการระบุฐานขอมูลที่จะเขาใช ซึ่งระบบจัดการฐานขอมูลใดก็ตามสามารถที่
     จะสรางฐานขอมูลไดมากกวา 1 ตัว ดังนั้นเราจึงจําเปนตองเลือกที่จัเขาถึง วาตองการฐานขอมูลตัวใด

     โดยปกติหลังจากเราใชงานฐานขอมูลเสร็จเรียบรอยแลว เราควรปดฐานขอมูลทุกครั้ง ดวยคําสั่ง
     mysql_close() แตเนื่องจากตั้งแต PHP version 4 เปนตนมา การปดฐานขอมูลจะทําโดยอัตโนมัติ ในชวง
     การทํา garbage collector ดังนั้นเราจะปดหรือไมก็ได

     ลองเปลี่ยน code จากตัวอยางเพื่อเชื่อมตอกับฐานขอมูลที่เราสราง ดังนี้ครับ
      <?php
        mysql_connect("localhost", "root", "") or die(mysql_error());
        echo "Connection to the server was successful!<br/>";
        mysql_select_db("training") or die(mysql_error());
        echo "Database was selected!<br/>";
        mysql_close();
      ?>
                                                        Phpmysql.php

     ทดลองเรียกใชจาก web browser ผลลัพธที่ได เปนดังนี้ครับ ซึ่งหมายถึงสามารถเชื่อมตอได




     ตัวอยางที่แสดงใหเห็นกรณีเชื่อมตอไมได เนื่องจากระบุรหัสผานไมถูกตอง ผลลัพธจะเปนดังนี้ครับ




                                                                  ตัวอยางการเชื่อมตอไดแตระบุชื่อฐานขอมูล
                                                                  ที่ไมมีอยูในระบบ

     สุดทายคือการระบุ Host ที่ไมมีระบบฐานขอมูล MySQL ทํางานอยู จะไดคําตอบอยางที่เห็นดานลางนี้




     30 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
31    Web Application Development with PHP & Ajax, MySQL




     ขั้นตอนที่ 2 การอานขอมูลจากตารางตางๆในฐานขอมูล
     การอานขอมูลจากฐานขอมูล จะใชภาษาที่เรียกวา SQL (Simple Query Language) โดยลักษณะของ
     ภาษา SQL ถือวาเปนภาษาในยุคที่ 4 หรือเรียกวา 4th Generation Language โครงสรางของภาษามี
     ลักษณะคลายประโยคทั่วไป เชน หากตองการขอมูลทุกฟลดที่อยูในตารางชื่อวา subjects เราจะเขียนเปน
     ภาษา SQL ไดดังนี้
       SELECT * FROM subjects


     ซึ่งจะสังเกตเห็นวา เปนภาษาที่มีโครงสรางคลายกับภาษามนุษยที่ใชกันแบบปกติทั่วไปมาก และเมื่อ
     ตองการเลือกเพียงบางตัว เราก็สามารถใสเงื่อนไขเพิ่มเขาไปได เชนหากตองการเฉพาะขอมูลวิชาที่มีรหัส
     02418233 เราสามารถเขียนเปนภาษา SQL ไดดังนี้
       SELECT * FROM subjects
       WHERE code = ‘02418233’

     คราวนี้เรามาลองเขียนโปรแกรมเพื่อติดตอ และอานขอมูลจากตารางที่ชื่อวา subjects กันครับ โดยให
     เพิ่มเติมจากตัวอยางโปรแกรมกอนหนานี้ที่ชื่อวา phpmysql.php ตามนี้ครับ

     <?php
       mysql_connect("localhost", "root", "") or die(mysql_error());
       mysql_select_db("training") or die(mysql_error());

          $querystr = ‘select * from subjects’;

          $result = mysql_query($querystr);

          echo $result;

          mysql_close();
     ?>
                                                                                            Phpmysql.php


     จากนั้นลองเรียกดวย web browser ดูครับและสังเกตผลลัพธที่ได



     เมื่อทราบผลลัพธแลว รูสึกเหมือนกันใชมั๊ยครับ วานั่นไมใชสิ่งที่เราตองการ ซึ่งสิ่งที่เราตองการกันก็คือ
     ขอมูลที่เราอานมาไดตางหาก ดังนั้นเพื่อใหไดสิ่งที่เราตองการ จึงตองทําอะไรบางอยางเพิ่มเติมอีกเล็กนอย
     ครับ

     31 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
32    Web Application Development with PHP & Ajax, MySQL



     การอานขอมูลจาก $result ที่ไดนั้นจะตองใชฟงกชั่นของ PHP เขาไปอานโดยตรงจาก Result Set ที่ได
     กลับมาจาก mysql_query() โดยเราสามารถเลือกใชได 3 ฟงกชั่นดวยกันคือ

              mysql_fetch_assoc() - Fetch a result row as an associative
               array
              mysql_fetch_row() - Fetch a result row as an enumerated array
              mysql_fetch_array() - Fetch a result row as an associative
               array, a numeric array, or both

     ทั้ง 3 ฟงกชั่นจะทําการ convert ผลลัพธที่ไดใหอยูในรูปแบบของ อาเรย (Array) จากนั้นเราจึงนําคาที่อยู
     ในตัวแปร Array มาใชแสดงอีกตอหนึ่ง ซึ่งตอไปนี้จะขอใชฟงกชั่นที่ชื่อวา mysql_fetch_array() มาเปน
     ตัวอยางนะครับ(เราสามารถเลือกฟงกชั่นอื่นก็ไดครับ) ดังนี้
     <?php
       mysql_connect("localhost", "root", "") or die(mysql_error());
       mysql_select_db("training") or die(mysql_error());

        $querystr = ‘select * from subjects’;

        $result = mysql_query($querystr);

        $row = mysql_fetch_array($result);

        echo $row[‘code’] . “—“ . $row[‘name’];

        mysql_close();
     ?>

     การอานคาขอมูล นอกจากจะอางอิงโดยใชชื่อฟลดแลว เรายังสามารถใชหมายเลขได เชน $row[1] หรือ
     $row[0] เปนตน แตเราจะไมทราบวาตําแหนง 0, 1 เปนคาของฟลดชื่ออะไร ขึ้นอยูกับ SQL ที่เขียนเขาไป
     ขอขอมูลครับ สําหรับแนวทางที่เหมาะสมที่สุด นาจะเปนการอางอิงดวยชื่อฟลด นาจะสะดวกกวา ตัวอยาง
     โปรแกรมขางบนจะไดผลลัพธเปนขอมูลชุดเดียว หากเราตองการแสดงขอมูลทุกตัวที่ดึงมาได จะตองใชการ
     วนลูปเขามาชวย ตัวอยางตามนี้ครับ
     <?php
       mysql_connect("localhost", "root", "") or die(mysql_error());
       mysql_select_db("training") or die(mysql_error());

        $querystr = ‘select * from subjects’;

        $result = mysql_query($querystr);

        while ($row = mysql_fetch_array($result)) {

              echo $row[‘code’] . “—“ . $row[‘name’] . “<br />”;
        }
     ?>



     32 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
33    Web Application Development with PHP & Ajax, MySQL



     จะทราบไดอยางไรวาขอมูลที่ดึงมาได มีจํานวนเทาไร?

     เราสามารถตรวจสอบจํานวนระเบียน (record) ที่อานมาได จากฟงกชั่นชื่อวา mysql_num_rows() ซึ่งหาก
     พบวาขอมูลที่ไดมาวางเปลา เราอาจทําการอยางใดอยางหนึ่ง จึงจําเปนตองทราบกอนวามีขอมูลหรือไม
     เปนตน ตัวอยางการนําไปใช เชน
        $result = mysql_query(‘select * from subjects’);
        $numrow = mysql_num_rows($result);

        if ($numrow > 0)
        {
          // show detail records
        }
        else
        {
          // do somthing
        }



     ขั้นตอนที่ 3 การเพิ่มเติม แกไข และลบขอมูล

     การเพิ่มขอมูล
     การเพิ่มเติมขอมูลเขาสูตารางเราสามารถทําไดโดยใชคําสั่ง INSERT ซึ่งเปนคําสั่งในภาษา SQL เชนหาก
     ตองการเพิ่มขอมูลเขาไปยังตาราง subjects ที่เราสรางขึ้นประกอบดวย 4 ฟลดเราสามารถเขียนเปนภาษา
     SQL ไดดังนี้
     INSERT INTO subjects (code, name, description, credit)
     VALUES (“02729498”, “Special Problem”, “Master Project in special problem”, “3”)


     เมื่อตองการใชงานรวมกับภาษา PHP เราสามารถเรียกใชฟงกชั่นชื่อวา mysql_query() ไดเชนเดียวกันกับ
     การอานขอมูล

         1. $sql = "INSERT INTO subjects (code,name,description,credit) VALUES
            ('02729498','Special Problem',Master project in special problem',’3’)";
         2. $result = mysql_query($sql);
         3. if ($result)
         4. {
         5.    // operation INSERT is complete
         6. }
         7. else
         8. {
         9.    // INSERT Fail!
         10.}




     33 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
34    Web Application Development with PHP & Ajax, MySQL



     การแกไขขอมูล
     การแกไขขอมูลสามารถทําไดโดยใชคําสั่ง UPDATE ซึ่งเปนคําสั่งในภาษา SQL เชน หากเราตองการ แกไข
     ขอมูลที่ไดจากการ Insert ในสวนที่เปนฟลด CREDIT ใหมีคาเปน 6 โครงสรางตามหลักของภาษา SQL จะ
     เปนดังนี้คือ
     UPDATE subjects SET credit = “6”
     WHERE code = “02729498”

     ในสวนของ WHERE หากเราไมใสจะหมายถึงใหแกไขคา ในฟลด credit ใหมีคาเปน 6 ในทุกๆ ระเบียน
     (records) ที่อยูในตาราง subjects แตเมื่อระบุ WHERE code = “02729498” จึงหมายถึงใหแกไขเฉพาะ
     ระเบียนที่ฟลด code มีคาเทากับ “02729498” เทานั้น ตัวอยางโปรแกรมเมื่อใชงานรวมกับ PHP คือ

         1. $sql = ‘UPDATE subjects SET credit = “6” WHERE code =”02729498”';
         2. $result = mysql_query($sql);
         3. if ($result)
         4. {
         5.    // operation UPDATE is complete
         6. }
         7. else
         8. {
         9.    // UPDATE Fail!
         10.}



     การลบขอมูล
     การลบขอมูลสามารถทําไดโดยใชคําสั่ง DELETE ซึ่งเปนคําสั่งในภาษา SQL เชนกัน ตัวอยางเชนหากเรา
     ตองการลบขอมูลในตาราง subjects ออกทั้งหมด ตัวอยางคําสั่งที่ใชคือ
     DELETE FROM subjects

     แตหากตองการลบขอมูลเพียงบางสวน โดยใชเงื่อนไขเปนตัวกรอง เชนเราตองการลบขอมูลวิชาที่มีรหัส
     02729498 ออกเทานั้น เราจะตองใช WHERE เขามาชวย ซึ่งคพสั่งที่ใชจะมีลักษณะดังนี้คือ
     DELETE FROM subjects WHERE code=”02729498”

     ตัวอยางโปรแกรมเมื่อใชงานรวมกับ PHP จะมีลักษณะคลายกับการเพิ่ม และการแกไข คือ

         1. $sql = ‘DELETE FROM subjects WHERE code =”02729498”';
         2. $result = mysql_query($sql);



     โดยหลังจากลบเราสามารถนําคาตัวแปร $result มาตรวจสอบการทํางานไดเชนเดียวกับตัวอยางที่ผานมา

     34 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
35    Web Application Development with PHP & Ajax, MySQL



     ตัวอยางการทํางานรวมกันระหวาง PHP, AJAX และ MySQL
     เราจะทดลองสรางระบบการบันทึกขอมูล ที่ทํางานภายใต Web Technology กันดูโดยใชพื้นฐานความรูที่
     พูดกันมาทั้งหมด โดยใหระบบประกอบดวย
         1.   หนาเว็บเพจสําหรับรับคาเพื่อนํามาบันทึก ประกอบดวยสวนยอยเพื่อการแสดงผล เมื่อตองการอานขอมูลจาก
              ฐานขอมูล
         2.   โปรแกรม PHP หลังบาน (บน Web Server) ที่คอยรับคําสั่ง เพิ่มเติม แกไข และลบ รวมทั้งอานขอมูล
         3.   สวนของ JavaScript ที่ใชดูแลการสื่อสารระหวาง Web Browser กับ Web Server โดยใช AJAX Engine

     ขั้นตอนที่ 1
     สรางหนาเว็บใหไดตามตองการ




     ตัวอยาง code ทั้งหมดสามารถดูไดในภาคผนวกดานหลัง

     ขั้นตอนที่ 2

     ขั้นตอนที่ 3
     ดูไดในภาคผนวก




     35 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
36    Web Application Development with PHP & Ajax, MySQL



     การใชงาน Session
     จะทําอยางไรกับ…เหตุการณนี้ ?
     หากเรามีระบบที่ทํางานบน Web เริ่มตนดวยการ Login จากนั้น จึงเขาสูหนาเว็บภายในที่ไดเตรียมไว แต
                                                                                 ซึ
     ถาหากผูใชใส URL ที่เปนหนาเว็บภายในโดยตรง โดยไมไดเริ่มจากการ Login (ซึ่งสามารถทําไดอยาง
     งายดาย) เราจะปองกันอยางไร และเราจะทราบไดอยางไรวาผูที่เรียกใชนั้นผานการ Login มาแลวหรือยัง




     แผนผังแสดงขั้นตอนการตรวจสอบ




     จากแผนภาพหากผูใชเขาสู page1.html หรือ page2.html โดยการพิมพเขาตรงๆ ระบบควรสงหนา login
     ใหกับผูใชเพื่อทําการ login ใหเรียบรอยกอน จึงจะถือวาถูกตอง



                      U.(Computer Scie
     36 | Prase rtsak U.(C om puter S cie nce Department – FLAS)
37    Web Application Development with PHP & Ajax, MySQL



     เริ่มใช Session
     ขอมูลจะถูกสรางไวที่ Server ดังนั้นไมตองกังวลเกี่ยวกับ Security ในฝง Client คําถามคือ

          เราจะเริ่มใชอยางไร?

          จะเก็บขอมูลอยางไร?

          จะนําขอมูลที่เก็บมาใชไดอยางไร?
                                         งไร

          จะยกเลิกการใชงานไดหรือไม?




     การยกเลิกการใชงาน Session
     การยกเลิกสามารถเลือกได 2 แนวทางคือยกเลิกบางตัว และยกเลิกทั้งหมด

          session_destroy()           // ทั้งหมด

          unset($_SESSION[‘varname’]) เฉพาะ varname เทานั้น
           unset($_SESSION[‘varname’])//




                      U.(Computer Scie
     37 | Prase rtsak U.(C om puter S cie nce Department – FLAS)
38    Web Application Development with PHP & Ajax, MySQL



     ยกเลิกการใช Session ทั้งหมด หมายถึงตัวแปร Session ที่ไดประกาศใชไว จะถูกลบทิ้งทั้งหมดในคราว
     เดียว หลังจากใชคําสั่ง session_destroy();
                                       stroy();




     เมื่อตองการยกเลิก หรือลบตัวแปร session เปนบางตัวเทานั้น เราสามารถระบุไดโดยใชคําสั่ง unset และ
     ใสชื่อตัวแปร session ที่ตองการลบลงไป




                      U.(Computer Scie
     38 | Prase rtsak U.(C om puter S cie nce Department – FLAS)
39    Web Application Development with PHP & Ajax, MySQL



     ตัวอยางการใชงาน session กับการ login
     จากเนื้อหาเกี่ยวกับ session ที่ไดกลาวไปแลวนั้น ตอไปเราจะมาทดสอบแนวคิด และทดลองการใชงานกัน
     โดยเราจะสรางระบบการ login ขึ้นมาตรวจสอบ หากไมผานการ login อยางถูกตอง จะไมสามารถเรียกดู
     หนา web page ภายในได แฟมขอมูลทั้งหมดจะประกอบดวย

         1. Login.html        ใชแสดงหนาเว็บเพื่อใสขอมูลการ login
         2. Login.php         ใชรับขอมูลจากหนา login.html เพื่อตรวจสอบรหัสผาน (มีการสรางตัวแปร
             session เพื่อใชในการตรวจสอบสถานะ)
         3. Page1.php         ตัวอยางหนาเว็บภายใน ที่แสดงหลังการ login สําเร็จ (มีการตรวจสอบ
             สถานะการ login จากตัวแปร session)
         4. Logout.php        ใชในการ logout ออกจากระบบ (ลบคาตัวแปร session ทั้งหมด)

     ตัวอยางโปรแกรม login.html
      <html>

      <body>

      <form name="login" action="login.php" method="post">

      Account: <input type="text" value="" name="account" /> <br />

      Password: <input type="password" value="" name="passwd" /><br />

      <input type="submit" value="Login" name="submit" />

      </form>

      </body>

      </html>


     ลักษณะจอภาพที่ไดจะเปนดังภาพ




     เมื่อกดปุม login ขอมูลจะถูกสงใหกับ Server โดยมี PHP Script ชื่อวา login.php รอรับขอมูลอยูเพื่อนําไป
     ประมวลผลตอ


     39 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
40    Web Application Development with PHP & Ajax, MySQL



     ตัวอยางโปรแกรม login.php
      1: <?php

      2: session_start();
      3: $account = $_REQUEST["account"];
      4: $passwd = $_REQUEST["passwd"];

      5: // check password is correct?

      6: if (($passwd == '1234') && $account == 'user1')
      7: {
      8:     // store session for using later

      9:            $digest = md5($_SERVER['REMOTE_ADDR']);

      10:           if (!isset($_SESSION['authorizedUser']))
      11:           {
      12:                $_SESSION['authorizedUser'] = $digest;
      13:           }

      14:           // redirect to internal page

      15:           header('location: page1.php');

      16:} else {

      17: echo "Your password is not correct!";
      18:}

      ?>

     บรรทัดที่ 2:     เปนการบอกระบบวาจะเริ่มเปดใชงาน session

     บรรทัดที่ 3-4: เปนการรับคาจากตัวแปรที่ browser สงมาให

     บรรทัดที่ 6: เปนการตรวจสอบรหัสผาน ซึ่งในตัวอยางเปนการกําหนดไวตายตัว เพื่อทําการทดสอบ
     เทานั้น ในความเปนจริงควรตองมีการตรวจสอบรหัสผานที่บันทึกไวอยางเปนระบบมากกวานี้ แตจะขอขาม
     ขั้นตอนนั้นไปเพื่อมุงไปที่การใชงาน session เทานั้น

     บรรทัดที่ 9: นําคา IP Address ของเครื่องที่สงขอมูลมา ทําการ Hashing แลวเก็บไวในตัวแปร digest
     เพื่อไวใชอางอิง ซึ่งขั้นตอนนี้สามารถเปลี่ยนแปลงเปนอยางอื่นได ขึ้นอยูกับผูใชวาตองการจะเก็บคาอะไรไว
     เพื่ออางอิงบาง

     บรรทัดที่ 12: เปนการนําคา IP Address ของผูสงที่ผานการ Hashing ดวย MD5 เก็บไวในตัวแปร
     session ชื่อวา 'authorizedUser'

     บรรทัดที่ 15: เปนการ redirect ไปยังหนาเว็บที่ชื่อวา page1.php ซึ่งหาก login สําเร็จผูใชจะไดเห็นเว็บ
     เพจที่ชื่อวา page1.php
     40 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
41    Web Application Development with PHP & Ajax, MySQL



     บรรทัดที่ 17: เปนการสงขอความแสดงใหผูใชทราบวา การ login ไมสําเร็จ เนื่องมาจากขอมูลการ login
     ไมถูกตอง




     ตัวอยางโปรแกรม page1.php
      1: <?php

      2: session_start();

      3: $digest = md5($_SERVER['REMOTE_ADDR']);

      4: if    ($_SESSION['authorizedUser'] != $digest)
      5: {
      6:       echo "<h2>Please Login first!</h2>";
      7:       echo "<br />";
      8:       echo "<a href='login.html'>login</a>";
      9:       exit;
      10:}

      11:?>

      12:<html>
      13:<head></head>

      14:<body>
      15:<h1>Welcome to internal webpage</h1><br />
      16:<h2>This page will be shown after login success!</h2><br />
      17:<a href='logout.php'>logout</a>
      18:</body>
      19:</html>




     ตัวอยางโปรแกรมมีสวนสําคัญที่ตองกลาวถึงคือ สวนที่เปน PHP code ซึ่งอยูสวนตนของตัวอยาง เปนชวง
     ที่เพิ่มขึ้นมาเพื่อตรวจสอบตัวแปรประเภท session ที่เก็บไว ซึ่งหากสามารถอานคาจากตัวแปร session ได
     ตามที่เรากําหนดไว ก็แสดงวาไดผานการ login มาแลวอยางถูกตอง แตถาอานไมไดแสดงวายังไมผานการ
     login เราจะแสดงขอความใหผูใชทําการ login กอนและไมยอมใหผานไปได

     41 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
42    Web Application Development with PHP & Ajax, MySQL




     บรรทัดที่ 2:    เปนการบอกระบบวาจะเริ่มเปดใชงาน session

     บรรทัดที่ 3:    นําคา IP Address ของเครื่องที่สงขอมูลมา ทําการ Hashing แลวเก็บไวในตัวแปร digest

     บรรทัดที่ 4: นําคา digest ที่คํานวณได เปรียบเทียบกับคาที่เก็บไวในตัวแปร session หากไมเทากัน
     อาจจะเกิดจากไมมีการเก็บคาใน session นั้นมากอนหรือคาที่เก็บไวไมตรงกับที่ตองการ ซึ่งเราจะแสดง
     ขอความเตือนใหผูใชกลับไป login กอน ในการทํางานจริงอาจกระทําการอยางใดอยางหนึ่ง ขึ้นอยูกับ
     ความตองการของเจาของระบบ โดยอาจนําผูใชที่ไมได login เขาสูหนาเว็บหนาอื่นที่เตรียมไวเฉพาะก็ได
                                                                 ่
     หรือไมก็แบงการบริการสําหรับลูกคาที่เปนสมาชิก กับลูกคาทีไมไดเปนสมาชิก โดยใหลูกคาระบุตัวตนกอน
     เขาใชงาน จากนั้นจึงทําการตรวจสอบโดยใชแนวทาง session นี้ก็ได เปนตน




     42 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
43    Web Application Development with PHP & Ajax, MySQL



     ทําความรูจักกับ XML
     เอกซเอ็มแอล (XML) ยอมาจาก Extensible Markup Language ซึ่งเปนภาษามารกอัปสําหรับการใชงานทั่วไป พัฒนา
     โดยW3C โดยมีจุดประสงคเพื่อเปน สิ่งที่เอาไวติดตอกันในระบบที่มีความแตกตางกัน(เชนใชคอมพิวเตอรมี่มี
     ระบบปฏิบัติการคนละตัว หรืออาจจะเปนคนละโปรแกรมประยุกตที่มีความตองการสื่อสารขอมูลถึงกัน)นอก จากนี้ยังเพื่อ
     เปนพื้นฐานในการสรางภาษามารกอัปเฉพาะทางอีกขั้นหนึ่ง XML พัฒนามาจาก SGML โดยดัดแปลงใหมีความซับซอน
     ลดนอยลง XML ใชในแลกเปลี่ยนขอมูลระหวางเครื่องคอมพิวเตอรที่แตกตางกัน และเนนการแลกเปลี่ยนขอมูลผาน
     อินเทอรเน็ต
     XML ยังเปนภาษาพื้นฐานใหกับภาษาอื่นๆ อีกดวย (ยกตัวอยางเชน Geography Markup
     Language (GML), RDF/XML, RSS, MathML, Physical Markup
     Language (PML),XHTML, SVG, MusicXML และ cXML) ซึ่งอนุญาตใหโปรแกรมแกไขและทํางานกับเอกสารโดยไม
     จําเปนตองมีความรูในภาษานั้นมากอน
     ที่มา : http://th.wikipedia.org

     ประโยชนของ XML
        1. ใชสําหรับควบคุมการทํางานของ Web Application
        2. ใชสําหรับแลกเปลี่ยนขอมูลระหวาง Platform หรือ System หนึ่งไปยังที่อื่นๆ
        3. ใชเก็บขอมูลและอธิบายขอมูล

     สวนประกอบตางๆ ของเอกสาร XML

     สวนบนสุด
     จะตองมีการประกาศใชงาน XML เพื่อกําหนดคาตางๆ ของเอกสาร เชน
     <?xml version=”1.0″ encoding=”UTF-8“?>
     การ Comment เปนขอความที่อธิบายการทํางานของ XML ใชเหมือน HTML
     <!–   ขอความ Comment –>

     สวนของ Element
     อีลีเมนตจะประกอบไปดวย แท็กเปด, ขอมูล และแท็กปด โดยจะมี root element ไดเพียงตัวเดียวเทานั้น
     แตจะมี element ลูกกี่ตัวก็ได เชน
     <root>
     <child>
     <subchild_1>Element</subchild_1>
     <subchild_2>Element</subchild_2>
     </child>
     </root>


     43 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
44    Web Application Development with PHP & Ajax, MySQL



     สวนของ Attributes
     แอททริบิวต เปนสวนขยายของ element โดย element แตละตัวจะมีกี่ Attribute ก็ได
     <root>
     <child id=.”1″>
     <subchild_1> Element</subchild_1>
     <subchild_2> Element</subchild_2>
     </child>
     </root>

     ตัวอยางเอกสาร XML
     <?xml version=”1.0″ encoding=”UTF-8″?> <!–Declare XML–>
     <gaslist> <!– root–>
       <gas type=”E10″> <!–element1–>
         <price>17.89</price> <!–SubElement1–>
       </gas> <!–Close Tag element1–>
       <gas type=”E85″> <!–element2–>
         <price>18.29</price> <!–SubElement2–>
       </gas> <!–Close Tag element2–>
     </gaslist> <!–Close Tag Root–>


     ตัวอยางเอกสาร XML




     ที่มา http://www.w3schools.com




     44 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
45    Web Application Development with PHP & Ajax, MySQL



     โครงสรางเอกสาร




     ตัวอยางการอานเอกสารดวย JavaScript
      <html>
      <body>
      <h1>Books</h1>
      <p><b>Title:</b> <span id="title"></span><br />
      <b>Author:</b> <span id="author"></span><br />
      <b>Price:</b> <span id="price"></span>

      <script type="text/javascript">

      if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest()
      }
      else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP")
      }
                         ooks.xml",false);
      xhttp.open("GET","books.xml",false);
      xhttp.send("");
      xmlDoc=xhttp.responseXML;

      var b=xmlDoc.getElementsByTagName("book");

      document.getElementById("title").innerHTML=
      b[0].getElementsByTagName("title")[0].childNodes[0].nodeValue;

      document.getElementById("author").innerHTML=
       [0].getElementsByTagName("author")[0].childNodes[0].nodeValue;
      b[0].getElementsByTagName("author")[0].childNodes[0].nodeValue;

      document.getElementById("price").innerHTML=
      b[0].getElementsByTagName("price")[0].childNodes[0].nodeValue;

      </script>
      </body>
      </html>


                      U.(Computer Scie
     45 | Prase rtsak U.(C om puter S cie nce Department – FLAS)
46    Web Application Development with PHP & Ajax, MySQL



     การใชงาน AJAX Library
     เนื่องจากการใชงาน AJAX นั้นจะตองเกี่ยวของกับ JavaScript และการใชงาน Document Object Model
     (DOM) คอนขางมาก ดังนั้นจึงมีผูเขียน function เพื่ออํานวยความสะดวก และเพิ่มความสวยงามใหกับ
     สวนติดตอกับผูใช (User Interface) ไวมากมาย เชน Prototype, jQuery, YUI, Mootool เปนตน ซึ่งตอไปนี้
     จะขอยกตัวอยางการใชงาน AJAX Library ตัวที่ชื่อวา jQuery ซึ่งเปนตัวหนึ่งที่ไดรับความนิยม และใชกัน
     มาก ทําใหเกิดการตอยอดเปน Library ประกอบเพิ่มเติม (Plugin) จํานวนมาก

     เริ่ม Download และติดตั้ง
     เขาไป download ไดที่ http://jquery.com




     เวอรชั่นสําหรับการ download มี 2 แบบคือ

          Production
          Development

     ให Download มาทั้ง 2 แบบและเลือกติดตั้งเพื่อใชงานตามลักษณะการทํางาน โดย Production Version
     ไวสําหรับนําไปใชงานจริง เมื่อเราเขียนงานเสร็จเรียบรอย ใหนํา Production version ไปติดตั้งไวบน Web
     Server จริง จะสามารถทํางานไดเร็วกวา และมีขนาดเล็กกวา สวนแบบ Development Version นั้น มีไว
     สําหรับนําไปติดตั้ง ณ เครื่องสําหรับพัฒนาระบบ เนื่องจากมีการติดตั้ง Debug ตางๆ ไวมากมาย ซึ่งจะ
     สะดวกมากกวาในระหวางการพัฒนา เนื่องจากจะทําใหเราหาขอผิดพลาดไดงาย




     46 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
47    Web Application Development with PHP & Ajax, MySQL



     การใชงาน jQuery Plugin
     การ Zoom ภาพ
         โดยการใช FancyZoom

     การแสดง Tool Tips
         โดยการใช jTip

     การทํา Input Mask
         โดยการใช jquery.maskedinput




     47 | Prase rtsak U.(C omputer S cie nce Department – FLAS)
48     Web Application Development with PHP & Ajax, MySQL



     ระบบการคนหาขอมูลภายใน Knowledge Base
     ขั้นที่ 1
     เริ่มดวยการสรางตาราง (Table) เพื่อเก็บขอมูล Knowledge Base ที่ตองการ (จําลองเพียงนิดหนอยนะ
     ครับ) โดยใหตารางชื่อวา KNTAB มีขนาด 2 ฟลดดังนี้




     หรือสามารถสรางไดจาก SQL Command ดังนี้




     ขั้นที่ 2
     เพิ่มเติมขอมูลเขาไปในตาราง kntab พอประมาณเพื่อไวใชในการทดสอบ

     ขั้นที่ 3
     สรางหนาเว็บสําหรับแสดงกลองขอความเพื่อใหผูใชใสคําที่ตองการคนหา โดยเมื่อกดปุมคนหา ใหเรียกใช
     โปรแกรม PHP บนฝง Web Server โดยใช AJAX พรอมกับนําคําคนที่ผูใชใสในกลองขอความไปคนหาใน
     ตารางที่สรางขึ้น เมื่อไดผลลัพธใหแสดงผลที่ไดในบริเวณที่กําหนด ดานลางของกลองขอความ


                                                                                    Name=”keyword”




     48 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)
49     Web Application Development with PHP & Ajax, MySQL



     ขั้นที่ 4
     เขียนโปรแกรม PHP เพื่อรับ keyword และนําไปคนหา เมื่อไดผลลัพธใหแสดงขอมูลในรูปแบบ
     HTML กลับไปยัง Browser เพื่อแสดงผลในบริเวณที่ตองการโดยใช AJAX

     (รายละเอียดโปรแกรมทั้งหมดใหดูไดในภาคผนวกทายเอกสาร)

     ตัวอยางผลลัพธ




                               อางอิง: เทคนิค PHP เพื่อการตอยอด 3 นิรุธ อํานวยศิลป




     49 | Prase rtsak U.(C omputer S cience Depart ment – FLAS)

				
DOCUMENT INFO
Shared By:
Stats:
views:38
posted:11/13/2012
language:English
pages:49
Description: Web Application Development with PHP & Ajax, MySQL, Understanding PHP syntax, basic JavaScript.