[jQuery] … for MySQL Data Manipulation in PHP

<< อ่านบทที่แล้ว (jQuery for Beginners)

ก็กลับมาอีกครั้งกับหัวข้อ jQuery นะครับ วันนี้ผมจะมาเสนอเรื่องการใช้ jQuery ติดต่อกับฐานข้อมูลผ่าน PHP แบบง่ายๆ (ง่ายมากๆ) กัน

ก่อนที่เราจะทำอะไร เราต้องโหลด starter code กันก่อนครับ ถ้าโหลดแล้วก็ทำตามคำแนะนำที่ให้ไป จากนั้นก็เริ่มกันเลย

การอ่านค่าจากฟอร์ม

การอ่านค่าจาก form field ต่างๆ สามารถทำได้โดยใช้ .val() ยกตัวอย่างเช่น จากไฟล์ HTML ต่อไปนี้

 <form>
  <input type="text" id="name" name="name">
  <input type="button" id="btname" name="btname">
</form>

เราสามารถเอาค่าออกมาจาก field “name” ได้โดยใช้คำสั่ง jQuery (บรรทัดบน) หรือ JS ธรรมดา (บรรทัดล่าง) ได้ดังนี้

 $("#name").val()
document.getElementById("name").value

โจทย์: จาก starter code ที่ให้ไป ให้เปิดไฟล์ user.html ขึ้นมา ลองพิมพ์อะไรก็ได้ลงไปในช่องทั้งสอง ยังไม่ต้องทำอะไร จากนั้นให้ใช้คำสั่ง val ในการดึงค่าออกมา

การเรียกหน้า PHP จาก jQuery

เรามีไฟล์สองไฟล์ คือ signup.php กับ login.php ซึ่งเป็นไฟล์ที่สร้างผู้ใช้ใหม่กับทำการ login (แบบปลอมๆ) โดยไฟล์ทั้งสองนี้เป็นตัวแทนการ insert และการ select ตามลำดับ ให้ศึกษาไฟล์ให้เข้าใจก่อนที่จะอ่านต่อ …………………… หากอ่านจนพอเข้าใจ จะเห็นว่า ไฟล์ทั้งสองรับตัวแปรชื่อ user กับ pass แล้วเอาไปทำอะไรบางอย่างกับฐานข้อมูล จากนั้นมันจะ print ค่าออกมาหนึ่งในสองค่าคือ “OK” หรือ “FAILED” ขึ้นกับผลการทำงานที่ได้

เมื่อคราวที่แล้วผมสอนให้ผู้อ่านใช้คำสั่ง $.get ไป คราวนี้จะเปลี่ยนมาใช้คำสั่ง $.post บ้าง สำหรับ $.post ไม่ต่างอะไรจาก $.get เลยในแง่ของการใช้งาน ต่างกันแค่ความหมายนิดหน่อยเท่านั้น (สั้นๆ: GET ใช้ในการดึงข้อมูลออกมา โดยใส่ตัวแปรต่อจาก URL ในขณะที่ POST ใช้ในการส่งข้อมูลขึ้นระบบ โดยส่งตัวแปรด้วย HTTP Protocol ในส่วนที่ไม่ใช่ URL)

เช่น หากผมต้องการให้ส่งตัวแปร ‘ticket’ มีค่าเท่ากับ 814418 ไปยังหน้า ‘lottery.php’ โดยเมื่อ PHP ตอบกลับมาแล้วให้แสดงว่าได้รางวัลอะไร ก็จะมีโค้ดสองส่วน คือส่วนของ PHP ก่อน

 //LOTTERY PRIZE LOOKUP
function prize($ticket){
  if($ticket==814418){
    return "First Prize!!"
  } else if (in_array($ticket%1000,Array(504,309,902,101)){
    return "..."
  } // ... (whatever)
}

print prize($_POST ['ticket'] );

สังเกตว่าเมื่อเราเรียกไฟล์จริงๆ ไฟล์ lottery จะ print ไม่ใช่ return ซึ่งถูกต้องแล้ว เพราะการเรียก jQuery หรือ ajax มันจะไม่รู้ว่า return อะไรออกมา มันจะเอาแต่สิ่งที่ print ออกมาเท่านั้น

จากนั้นเราไปดู jQuery กันต่อ

 //LOTTERY CHECKER
function checkPrize(ticket){
  $.post(
         'lottery.php',
         {'ticket': ticket},
         function(output){alert(output);}
        );
}

checkPrize(814418);

อธิบาย: โค้ดนี้จะเรียก lottery.php โดยใช้วิธี POST ส่งตัวแปร ticket ไปหนึ่งตัวมีค่า 814418 ส่วนฟังก์ชันที่รับ output เราเรียกว่า “ฟังก์ชันนิรนาม” (anonymous function) ซึ่งถูกกำหนดขึ้นมาเฉพาะกิจ ใช้งานแค่ใน scope เท่านั้น เช่น ในกรณีนี้ ฟังก์ชันจะเอา output แสดงออกมาผ่าน alert เป็นต้น หากอธิบายคร่าวๆ (มากๆ) ก็จะได้อะไรที่คล้ายๆ กับรูปข้างล่าง

เอาเป็นว่าเราเอาไว้เท่านี้ก่อน สำหรับโจทย์ในวันนี้คือ “พยายาม hack ตัว login ของผมด้วย SQL Injection ให้ได้” สำหรับคราวหน้าหากผมมีแรงเหลือจะมาอธิบายว่าทำไม SQL Injection จะใช้ได้หรือไม่ได้กับชุดคำสั่ง JQ2 ของผมนะครับ :)

LunaticNeko