การโปรแกรมเว็บเบื้องต้น

หน่วยที่ 5 การพัฒนาเว็บไซต์แบบ Dynamic

• 5.1 การเขียนโปรแกรมเพื่อติดต่อฐานข้อมูลด้วยภาษา SQL เบื้องต้น
• 5.2 การเขียนโปรแกรมตรวจสอบเงื่อนขและประมวลผลการทำงานด้วยภาษา PHP
• 5.3 การเขียนโปรแกรมควบคุมส่วนติดต่อประสานงานกับผู้ใช้งานด้วยภาษา JavaScript

5.1 การเขียนโปรแกรมเพื่อติดต่อฐานข้อมูลด้วยภาษา SQL เบื้องต้น
    จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้ คือ การเพิ่มข้อมูลลงในตาราง user.t1 ซึ่งเป็นการเพิ่มข้อมูลลงในคอลัมน์ Userame โดยกำหนดค่าให้เป็น User1 และเพิ่มข้อมูลลงในคอลัมน์ Password โดยกำหนดค่าให้เป็น User1

      5.1.1 คำสั่ง Update คือ คำสั่งภาษา SQL ที่ใช้ในการแก้ไขข้อมูล โดยมีรูปแบบดังนี้
UPDATE user_tb
SET Username= 'userSC', Password= 'PassUsersC
WHERE id_user=2;

คำสั่ง Update คือ คำสั่งภาษา SQL ที่ใช้ในการแก้ไขข้อมูล
(ที่มา : http://getbootstrap.com)

จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้
   คือ การแก้ไขข้อมูลในตาราง user _tb โดยกำหนดให้คอลัมน์ Userame มีค่าเท่ากับ userSC และคอลัมน์ Password มีค่าเท่ากับ PassUserSC โดยอ้างอิงคีย์หลัก (Primary Key) ของคอลัมน์โดยเลือกแถวที่ต้องการแก้ไข คือ แถวที่

      5.1.2 คำสั่ง Delete คือ คำสั่งภาษา SQL ที่ใช้ในการลบข้อมูล โดยมีรูปแบบดังนี้
DELETE FROM user_tb
WHERE id_user=2;

คำสั่ง Delete คือ คำสั่งภาษา SQL ที่ใช้ในการลบข้อมูล
(ที่มา : http://getbootstrap.com)

จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้
   คือ การลบข้อมูลของตาราง user_tb ในลักษณะเป็นแนวแถว โดยอ้างอิงคีย์หลัก (Primary Key) ของคอลัมน์ id_user โดยเลือกแถวที่ต้องการลบ คือ แถวที่ 2

       5.1.3 คำสั่ง Select คือคำสั่งภาษา SQL ที่ใช้ในการแสดงข้อมูล โดยมีรูปแบบดังนี้
SELECT * FROM user_tb LIMIT 5;

คำสั่ง Select คือคำสั่งภาษา SQL ที่ใช้ในการแสดงข้อมูล
(ที่มา : http://getbootstrap.com)

จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้
   คือ การเลือกข้อมูลจากฐานข้อมูลทั้งหมดของตาราง user_tb แต่ไม่เกิน 5 แถว เพื่อนำมาแสดงผล
SELECT * FROM user_tb;

คำสั่ง Select คือคำสั่งภาษา SQL ที่ใช้ในการแสดงข้อมูล
(ที่มา : http://getbootstrap.com)

จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้
   คือ การเลือกข้อมูลจากฐานข้อมูลทั้งหมดของตาราง use_tb โดยไม่ระบุจำนวนแถวเพื่อนำมาแสดงผล

      5.1.4 คำสั่ง mysql_fetch_array

คำสั่ง mysql_fetch_array
(ที่มา : http://getbootstrap.com)

จากคำสั่งข้างต้น สามารถอธิบายได้ดังนี้
   คือ การเรียกใช้ข้อมูลจากฐานข้อมูลในรูปแบบ Ar:ay สามารถเรียกใช้ด้วยชื่อคอลัมน์หรือหมายเลขอินเด็กซ์เพื่อชี้ไปยังตำแหน่งของข้อมูลที่ต้องการนำมาแสดงผล ได้แก่ Sresult'Userame']; และ Sresult 1]: คำสั่ง mysa_fetch_array); นิยมประยุกต์ใช้กับคำสั่งอื่น ๆ เช่น คำสั่งวนลูป for, while, do while หรือคำสั่ง SQL อื่นๆ

ตัวอย่างการใช้งาน mysql_fetch_array();
   $str=mysql_query("SELECT * FROM user_tb WHERE id_user=1");
   $result=mysql_fetch_array($str) or die(mysql_error();
   echo $result['Username']: /*แสดงผลคำว่า Admin*/
   echo Sresult['Password']: /*แสดงผลคำว่า Admin*/

5.2 การเขียนโปรแกรมตรวจสอบเงื่อนไขและประมวลผลการทำงานด้วยภาษา PHP

      5.2.1 คำสั่ง isset()
คำสั่ง isset() คือ คำสั่งที่ใช้เพื่อตรวจสอบว่ ตัวแปรนั้น ๆ ได้ถูกกำหนดขึ้น และมีค่าที่ไม่ใช่ null หรือไม่

      5.2.2 คำสั่ง SESSION
คำสั่ง SESSION คือ ตัวแปรที่มีการทำงานเหมือนกับคุกกี้ (Cookie) ซึ่งมีการจดจำค่าต่าง ๆ เช่น ตัวเลข ตัวอักษร เป็นต้น ถึงแม้มีการเปลี่ยนหน้าเว็บเพจ ตัวแปรแบบ SESSION สามารถเก็บคำนั้น ๆ ไว้ได้จนกระทั่งปิดโปรแกรมท่องเว็บไซต์หรือมีการล้างตัวแปรแบบ SESSION

ตัวอย่างการใช้งาน คำสั่ง SESSION
   session_start(); /*การประกาศการเริ่มต้นใช้งานตัวแปรแบบ SESSION*/
   ESSION['facolor = "green /*การกำหนดคำาให้กับตัวแปรแบบ SESSION*/
   session_destroy(); /*การ Clear การทำงานของตัวแปรแบบ SESSION*/

      5.2.3 คำสั่ง if-else
คำสั่ง if/-else คือ คำสั่งที่ใช้ตรวจสอบเงื่อนไขของตัวแปรหรือค่าพารามิเตอร์ต่าง ๆ เช่น ถ้า x มากกว่า 5 ให้แสดงผลว่า Hello X แต่ถ้าน้อยกว่า 5 ให้แสดงผลว่า So Bad เป็นต้น

   if ($x>5) {    /*ถ้า x มากกว่า 5 ให้ทำ*/
   echo "Hello X";    /*แสดงผล Hello X1*/
   } else {          /*ถ้าไม่ใช่ให้ทำ*/
   echo "So Bad";    /*แสดงผล So Bad*/
   }

       5.2.4 คำสั่ง Array
Array คือ ตัวแปรชนิดหนึ่งที่สามารถเก็บค่ไว้หลายค่าภายในตัวแปรเดียวได้ โดยมีการเรียกใช้ค่านั้น ๆ ด้วยหมายเลขอินเด็กซ์ (Index)

ตัวอย่างการใช้คำสั่ง Array
   $cars = array("Honda", "BMW", "Toyota");
   จากคำสั่งข้างต้น สามารถอธิบายได้ว่า ตัวแปร cars เก็บข้อมูลยี่ห้อรถ 3 ยี่ห้อ ไว้ในตัวแปรเดียวเพื่อลดหน่วยความจำ แทนการเก็บข้อมูลแบบเดิม เช่น Scar1=Honda; Scar2=BMW; Scar3-=Toyota; การกำหนดค่าต่าง ๆ ให้กับตัวแปรแบบ Array จากตัวอย่างสามารถทำได้ดังนี้
   $cars[0] = "Honda";
   $cars[1] = "BMW";
   $cars[2] = "Toyota"; ตัวอย่างการเรียกใช้งานตัวแปรแบบ Array ด้วย Index

คำสั่ง Array
(ที่มา : http://getbootstrap.com)

      5.2.5 คำสั่งวนซ้ำ (Loop)
คำสั่งวนช้ำ คือ คำสั่งที่มีการวนซ้ำโดยมีเงื่อนไขกำหนด เช่น เพิ่มค่าไปเรื่อย ๆ จนกว่าจะถึง 10 เป็นต้น คำสั่งวนซ้ำแบ่งเป็น 3 รูปแบบ ได้แก่

1. คำสั่ง While มีการทำงานตามเงื่อนไขที่กำหนด เมื่อทำตามเงื่อนไขเรียบร้อยแล้ว คำสั่ง While หยุดการทำงานทันที

คำสั่ง While
(ที่มา : http://getbootstrap.com)

2. คำสั่ง for มีการทำงานตามเงื่อนไขที่กำหนด โดยเงื่อนไขในคำสั่ง for แบ่งเป็น 3 ส่วน คือการกำหนดค่าเริ่มต้น ร=0: เงื่อนไข S< 10; และการเพิ่ม-ลดค่า Si++; ทั้งนี้สามารถกำหนดเป็นค่า อื่น ๆ ได้ตามเงื่อนไขที่ต้องการ

คำสั่ง for
(ที่มา : http://getbootstrap.com)

3. คำสั่ง do while มีการทำงานอย่างน้อย 1 ครั้ง ก่อนทำการตรวจสอบเงื่อนไขเพื่อวนซ้ำซึ่งมีตัวอย่างการใช้คำสั่ง do while ดังนี้

คำสั่ง do while
(ที่มา : http://getbootstrap.com)

5.3 การเขียนโปรแกรมควบคุมส่วนติดต่อประสานงานกับผู้ใช้งานด้วยภาษา JavaScript

      5.3.1 การแสดง Alert
การแสดง Alert คือ การแสดง Popup แจ้งเตือนเพื่อแสดงข้อความที่กำหนดไว้ให้ผู้ใช้งานได้ ทราบ ซึ่งสามารถนำมาประยุกต์ใช้ในการเตือนหรือแจ้งข้อมูลกระบวนการทำงาน เป็นต้น

การแสดง Alert
(ที่มา : http://getbootstrap.com)

      5.3.2 การใช้งาน Confirm Alert
การใช้งาน Confirm Alert คือ การแสดง Popup เพื่อต้องการยืนยันข้อมูลก่อนประมวลผลในขั้นตอนถัดไป เช่น การยืนยันการลบ การยืนยันการออกระบบ เป็นต้น ซึ่ง Confirm Alert มีปุ่มให้เลือก 2 ปุ่ม ได้แก่ ปุ่มตกลงและยกเลิก โดยคำสั่งของ Confirm Alert มีดังนี้

การใช้งาน Confirm Alert
(ที่มา : http://getbootstrap.com)

      5.3.3 การรับค่าจากผู้ใช้งานด้วย Prompt
Prompt คือ การแสดง Popup พร้อมช่องที่มีไว้สำหรับป้อนข้อมูล เพื่อนำข้อมูลที่ป้อนนำไปประมวลผลในลำดับต่อไป

การรับค่าจากผู้ใช้งานด้วย Prompt
(ที่มา : http://getbootstrap.com)

      5.3.4 การใช้งาน Event
การใช้งาน Event คือ การกระทำต่อวัตถุด้วยเหตุการณ์ต่าง ๆ เช่น การคลิกปุ่ม หรือการนำเมาส์มาชี้ที่วัตถุเพื่อดูคำอธิบาย เป็นต้น Event ที่นำมาใช้งานมีดังนี้

การใช้งาน Event
(ที่มา : http://getbootstrap.com)

ตัวอย่างการใช้งาน Event Onclick ของภาษา JavaScript

การใช้งาน Event Onclick ของภาษา JavaScript
(ที่มา : http://getbootstrap.com)