สอนทำเว็บขั้นพื้นฐานJavaScript
นำไปใช้ทำฟอร์มเลือกจังหวัดและแสดงอำเภอโดยไม่ต้องรีโหลดหน้าเว็บเพจ
ผลลัพธ์ของสคริปต์นี้ คือ มีช่อง DropDown Box จำนวน 2 ช่องแสดงในหน้าเว็บเพจ โดยช่องที่ 1 แสดงหมวดหมู่หลัก เมื่อผู้ใช้เลือกรายการในช่องที่ 1 ปุ๊ป ข้อมูลรายการใน ช่องที่ 2 จะผันแปรตามค่าของช่องที่ 1 โดยอัตโนมัติ และ ไม่ต้องรีโหลดหน้าเว็บเพจ
โดยสคริปต์นี้จะใช้ร่วมกันระหว่าง JavaSript + PHP + mySQL ซึ่งเป็น 3 สหายพื้นฐานวิธีหนึ่งของการใช้เทคนิค Ajax ครับ
ไฟล์ที่จะสร้างขึ้นมีจำนวน 2 ไฟล์ ดังนี้
1) ไฟล์ main-category.php
2) ไฟล์ sub-category.php
#########################################################
## โค้ดในไฟล์ main-category.php ##
#########################################################
<? ## ส่วนที่ 1 ติดต่อฐานข้อมูลแบบ TIS620
$host="ชื่อโฮสต์";
$user="ชื่อผู้ใช้ฐานข้อมูล mySQL";
$password="รหัสผ่านของผู้ใช้ฐานข้อมูล mySQL";
$databasename = "ชื่อของฐานข้อมูล mySQL";
$connect=mysql_connect($host,$user,$password) or die ("ติดต่อฐานข้อมูลไม่สำเร็จ");
mysql_select_db($databasename, $connect);
mysql_query("SET NAMES TIS620");
?>
<? ## ส่วนที่ 2 สร้างการเชื่อมต่อด้วยเทคนิค Ajax ?>
<script type="text/javascript">
// ส่วนที่ 2.1 เปิดการเชื่อมต่อและร้องขอกับโฮสต์และบราวเซอร์
var http = false;
if(navigator.appName == "Microsoft Internet Explorer"){
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
// ส่วนที่ 2.2 ฟังก์ชั่นสำหรับการแสดงผลช่อง DropDown ช่องที่ 2
function DisplaySubCategory(maincategory) {
http.abort();
http.open("GET", "sub-category.php?maincategory=" + maincategory, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('subcategory').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
<? ## ส่วนที่ 3 ดึงข้อมูลจากตารางในฐานข้อมูล mySQL นำมาใส่ในช่อง DropDown ช่องที่ 1 ?>
<select name="maincategory" id="maincategory" style="width:200px;" onChange="DisplaySubCategory(maincategory.value)">
<option value="">--- เลือกหมวดหลัก ---</option>
<?
$Result=mysql_query("select * from table ");
while($MainCategoryArray=mysql_fetch_array($Result)){ echo "<option value=$MainCategoryArray[0]>$MainCategoryArray[1]</option>";}
?>
</select>
<? ## ส่วนที่ 4 แสดงข้อมูลจากตารางในฐานข้อมูล mySQL ในช่อง DropDown ช่องที่ 2 ?>
<select name="subcategory" size="1" id="subcategory" style="width:200px;" >
</select>
** สามารถเปลี่ยนชื่อหรือข้อมูลในจุดที่เป็นตัวอักษรสีแดงได้ แต่้ต้องระมัดระวังให้ถูกต้องทั้งหมดนะครับ โดยเฉพาะ Query ของ mySQL ต้องให้ถูกต้องตามชื่อฟิลด์และลำดับ Array ในฐานข้อมูลนะครับ, ในโค้ดนี้เป็นเพียงตัวอย่างเท่าันั้น คือ select * from table อย่างนี้ไม่ถูกต้องนะครับ เขียนให้ดูเป็นตัวอย่างเฉย ๆ**
#########################################################
## โค้ดในไฟล์ sub-category.php ##
#########################################################
<? ## ส่วนที่ 1 ติดต่อฐานข้อมูลแบบ TIS620
$host="ชื่อโฮสต์";
$user="ชื่อผู้ใช้ฐานข้อมูล mySQL";
$password="รหัสผ่านของผู้ใช้ฐานข้อมูล mySQL";
$databasename = "ชื่อของฐานข้อมูล mySQL";
$connect=mysql_connect($host,$user,$password) or die ("ติดต่อฐานข้อมูลไม่สำเร็จ");
mysql_select_db($databasename, $connect);
mysql_query("SET NAMES UTF8"); # ต้องแปลงเป็น UTF-8 เพราะฐานข้อมูลใช้ UTF-8 แม้จะใส่ Encode เป็น windows-874 แล้วก็ตาม
## ส่วนที่ 5 ดึงข้อมูลจากตารางในฐานข้อมูล mySQL เพื่อนำไปแสดงในช่อง DropDown ช่องที่ 2
$Result=mysql_query("select * from table where maincategory='$maincategory' ");
while($SubCategoryArray=mysql_fetch_array($Result)){
echo "<option value=$SubCategoryArray[1]>$SubCategoryArray[2]<option>";
}
mysql_query("SET NAMES TIS620");
?>
** สามารถเปลี่ยนชื่อหรือข้อมูลในจุดที่เป็นตัวอักษรสีแดงได้ แต่้ต้องระมัดระวังให้ถูกต้องทั้งหมดนะครับ โดยเฉพาะ Query ของ mySQL ต้องให้ถูกต้องตามชื่อฟิลด์และลำดับ Array ในฐานข้อมูลนะครับ, ในโค้ดนี้เป็นเพียงตัวอย่างเท่าันั้น คือ select * from table อย่างนี้ไม่ถูกต้องนะครับ เขียนให้ดูเป็นตัวอย่างเฉย ๆ**
#########################################################
## อธิบายวิธีการทำงานของทั้งหมด ##
#########################################################
1) ไฟล์ main-category.php จะเริ่มติดต่อกับฐานข้อมูล mySQL ก่อน (ส่วนที่ 1)
2) เมื่อติดต่อฐานข้อมูลสำเร็จ จะสร้างการเชื่อมต่อระหว่างบราวเซอร์กับโฮสต์ด้วย JavaScript (ส่วนที่ 2.1)
3) เมื่อสร้างการเชื่อมต่อสำเร็จแล้ว ก็จะกระโดดมาสร้างรายการใน DropDown ช่องที่ 1 ด้วยคำสั่ง mySQL ปกติ (ส่วนที่3)
4) ใช้ฟังก์ชั่น onChange="DisplaySubCategory(maincategory.value)" (ในส่วนที่3) เพื่อบอกกับบราวเซอร์ว่า ถ้ามีการคลิ๊กเปลี่ยนรายการใน DropDown ช่องที่ 1 เมื่อไหร่ละก็, ให้ทำการส่งค่า (maincategory.value ของ maincategory DropDown ช่องที่ 1) ไปให้ ฟังก์ชั่น DisplaySubCategory(maincategory) ที่รอรับอยู่ก่อนหน้า (ในส่วนที่ 2.2) โดยจะประมวลผลและส่งต่อไปที่ ไฟล์ sub-category.php (ส่วนที่ 5) อีกครั้งหนึ่ง
ค่าที่ส่งออกจากส่วนที่ 2.2 จะอยู่ในรูปสตริง URL ในที่นี้คือ sub-category.php?maincategory=ค่าของ maincategory ( ผ่านบรรทัดนี้ http.open("GET", "sub-category.php?category=" + category, true); )
5) เมื่อส่วนที่ 2.2 ส่งมาให้ ไฟล์ sub-category.php (ในส่วนที่ 5) , ส่วนที่ 5 ก็จะประมวลจากฐานข้อมูล mySQL แล้วส่งต่อไปให้ส่วนที่ 4 (ไฟล์ main-category.php)
6) ส่วนที่ 4 (ไฟล์ main-category.php) ก็แสดงผลรายการใน DropDown ช่องที่ 2 โดยทันที
#########################################################
## การประยุกต์ใช้งาน ##
#########################################################
ก็เพียงแต่กำหนดให้ DropDown ข่องที่ 1 เป็นจังหวัด แล้วดึงค่า ID ของจังหวัดออกมาผ่านตัวแปร maincategory แล้วก็ส่งต่อใ้ห้กับ JavaScript ติดต่อกับโฮสต์ในพื้นหลัง แล้วไปค้นหาเรคคอร์ดอำเภอออกมา แล้วก็แสดงผลออกที่บราวเซอร์ทันที โดยผ่าน JavaScript เหมือนเคย
#########################################################
## ข้อแนะนำ ##
#########################################################
สคริปต์นี้ทำงานได้กับบราวเซอร์ FireFox 3.x , Chrome 9.x , Opera 11.x และเช่นเคย IE6,7,8,9 ยังไม่สามารถใช้สคริปต์นี้ทำงานได้ ยังไงก็ทิ้งโจทย์ไว้ให้ลองไปพัฒนาปรับปรุงให้ใช้ได้กับ IE นะคับ
สรุป, หากปราศจากส่วนที่ 2.1 แล้ว บราวเซอร์จะต้องรีโหลดหน้าเพจ main-category.php ไปยังหน้าเพจ sub-category.php และต้องรีโหลดกลับมาที่หน้าเพจ main-category.php อีกครั้ง, แต่เพราะมีสคริปต์ในส่วนที่ 2.1 เ้ข้ามาแทรกกลางเป็นส่วนที่ทำงานเชื่อมต่อระหว่างบราวเซอร์กับโฮสต์ให้ โดยไม่ต้องมีการรีโหลดหน้าเว็บเพจอีกเลย
มันจึงแจ่มเช่นนี้แหละคับ !!
แนะนำโซเชียลของนักเขียน
