Print View,Thaimisc.Com : เรียน PHP จากโปรเจ็คเว็บแอปพลิเคชั่น :: หน้าจอล็อกอิน ตอนที่ 2 เรียน PHP จากโปรเจ็คเว็บแอปพลิเคชั่น :: หน้าจอล็อกอิน ตอนที่ 2
Php Developer
เดอะกาฝากไดอารี่ (channelv_on_mobile@hotmail.com) , Date 21-12-2004
พยายามจะอัพเดตให้ได้อย่างน้อย 1 ตอนทุกๆ สัปดาห์ แต่เอาเข้าจริงๆ นับวันผิด เลยกลายมาเป็น 9 วันเฉย เหอๆ ขออภัยครับๆ

ในตอนที่แล้วผมพูดถึงการทำหน้าจอล็อกอินแบบง่ายๆ โดยอาศัยคุณสมบัติของ header ของโปรโตคอล HTTP ไปแล้ว วิธีนี้ค่อนข้างเหมาะกับกรณีของระบบแอปพลิเคชั่นที่ไม่เน้นเรื่องความสวยงามมากนัก หรือไม่มีความจำเป็นต้องมีหน้าจอหน้าแรก... แต่ในหลายกรณี ส่วนมากแล้วเรานิยมที่จะให้มีหน้าแรก ซึ่งเป็นหน้าล็อกอินซะมากกว่า ดังนั้น เราจึงต้องมาพูดถึงวิธีที่ 2 ในการทำหน้าจอล็อกอิน นั่นก็คือการออกแบบเองนั่นเองครับ

ขอทำความเข้าใจนิดนึงก่อน
ก่อนอื่นขอให้เข้าใจตรงกันก่อนนะครับว่า บทความนี้ผมมีเจตนาเพื่อสอนพื้นฐานการพัฒนาเว็บแอปพลิเคชั่นด้วย PHP แม้ผมจะชอบผสมน้ำลงในเนื้อเยอะๆ แต่ไอ้ครั้นที่จะให้ผมสอน HTML ด้วยก็เห็นท่าจะไม่ไหวนะครับ อีกอย่างหนึ่งก็คือ ปัจจุบันมีโปรแกรมที่ช่วยในการออกแบบ และพัฒนาเว็บไซต์อยู่เยอะแยะแล้ว ดังนั้นผมจึงขอถือเอาว่า ท่านผู้อ่านมีพื้นฐานด้าน HTML มาพอสมควรนะครับ

ในการออกแบบหน้าจอล็อกอินเอง หลักๆ เลยก็เป็นเรื่องของ HTML ครับ คือต้องออกแบบหน้าตาเว็บแอปพลิเคชั่นในส่วนของการล็อกอิน จากนั้นก็สร้างฟอร์มในการกรอกข้อมูล... ตรงนี้ผมขอข้ามในส่วนของ HTML ทั่วไป แล้วมาพูดถึงในส่วนของโค้ดสำหรับการล็อกอินเพียวๆ ละกันนะครับ

ในส่วนของ HTML ที่เกี่ยวข้องกับการล็อกอิน ก็มีดังนี้ครับ

<form name="login" action="login.php" method="post">
ชื่อ : <input name="username" type="text" maxlength="10"><br>
รหัสผ่าน : <input name="password" type="password" maxlength="32"><br>
<input name="submit" type="submit" value="ล็อกอิน">
</form>

โค้ดง่ายๆ ก็คงประมาณนี้... อธิบายโค้ดก็คงได้ใจความว่า

  • ฟอร์มกรอกข้อมูลมีชื่อว่า login โดยจะรันโค้ด PHP คือ login.php เมื่อมีการคลิกที่ปุ่ม "ล็อกอิน"
  • มีช่องสำหรับกรอกข้อมูลด้วยกัน 2 ช่อง คือ ชื่อ และ รหัสผ่าน โดยชื่อของ text input field สำหรับกรอกข้อมูลคือ username และ password ซึ่งชื่อนี้เราจะอ้างอิงถึงเวลาเขียนโค้ด PHP ในฐานะของตัวแปรครับ
  • มีปุ่มสำหรับคลิกเพื่อส่งข้อมูล ชื่อ submit และแสดงข้อความว่า "ล็อกอิน" เอาไว้บนปุ่ม

ตรงนี้มีข้อสังเกตอยู่ 2 จุดหลักๆ นะครับ ที่เราควรจะรู้เอาไว้ก็คือ

method="post"
แอตทริบิวต์ method ของแท็ก <form></form> นั้น มีให้ใช้ได้ 2 แบบคือ post และ get ซึ่งมีความแตกต่างกันโดยหลักๆ แล้วก็คือเรื่องของความปลอดภัยในการส่งข้อมูลจากฟอร์ม HTML ไปยังโค้ด... โดย

แบบ get นั้นจะเป็นการส่งข้อมูลจากฟอร์มผ่านทาง URL ของเว็บเพจครับ วิธีนี้ไม่ปลอดภัยเพราะว่าเราจะไม่สามารถป้องกันการกรอกข้อมูลอะไรได้มากนัก เนื่องจากว่าสามารถที่จะกำหนดข้อมูลที่ใส่ในตัวแปรได้จากทาง URL โดยตรงเลย เช่น http://localhost/test/login.php?username=kafaak&password=123456 เป็นต้น

สรุปก็คือ ข้อมูลที่จะถูกส่งผ่านไปยังหน้าสคริปต์น่ะ จะถูกแสดงออกมาในรูปแบบของ plain text หรือข้อความธรรมดาๆ เลย ใน URL ของเว็บ จึงทำให้แบบ get นั้นไม่เหมาะกับการทำหน้าจอล็อกอินครับ

แบบ post นั้นจะเป็นการส่งข้อมูลจากฟอร์มไปยังสคริปต์โดยตรง โดยไม่ผ่าน URL ทำให้เราไม่สามารถมองเห็นข้อมูลดังกล่าวได้ด้วยวิธีปกติ แบบนี้จึงเหมาะกับการทำหน้าจอล็อกอินครับ

maxlength="10"
แอตทริบิวต์นี้ใช้กับแท็ก <input type="text"> เพื่อเป็นการกำหนดให้ชัดแจ้งว่า text input field นี้ จะรับข้อความได้สูงสุดกี่ตัวอักษร... ถามว่าทำไมต้องกำหนดเอาไว้?!? คำตอบก็คือ ป้องกันไว้เผื่อใครอุตริอยากจะถล่มเซิร์ฟเวอร์ของเรา ด้วยการกรอกข้อมูลที่มีจำนวนตัวอักษรยาวๆๆๆๆๆๆๆๆ ไงครับ... ซอฟต์แวร์เว็บเซิร์ฟเวอร์บางยี่ห้อในสมัยก่อน เคยมีข้อบกพร่องในเรื่องของการจัดการหน่วยความจำ เพื่อรองรับการกรอกข้อมูลใน text input field ทำให้เมื่อเจอกับกรณีที่กรอกข้อมูลยาวมากๆๆๆๆๆ มา จะทำให้โปรแกรมค้าง หรือเลวร้ายสุดๆ ก็ถูกแฮกเข้ามาได้ครับ

(ติดตามตอนต่อไป)

ช่วงนี้ใครมีปัญหาเกี่ยวกับ PHP จะสอบถามผม รบกวนเป็นอีเมล์นะครับ เนื่องจากผมไม่ค่อยสะดวกในการคุยทาง MSN Messenger เท่าไหร่นัก ผมจะพยายามตอบกลับให้เร็วที่สุดครับ