อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ Internet for Education อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ เว็บฟอร์ม (Web Form)
Outline การส่งข้อมูลด้วย Html Form การส่งข้อมูลด้วย Querystring
การทำงานของระบบ FORM HTML & PHP Script ทำการร้องขอข้อมูล ส่งข้อมูล FORM HTML CLIENT เครื่องลูกข่าย SERVER เครื่องแม่ข่าย ทำการประมวลผล PHP ส่งข้อมูลผ่าน FORM ส่งข้อมูล HTML
Web Form อินพุทที่อยู่ในแบบฟอร์มแบ่งออกเป็น 4 กลุ่ม ตัวอักษร ได้แก่ text box, list box , กล่องรับรหัส (password) ตัวเลือก ได้แก่ check box,radio button,drop down list,list ปุ่ม ได้แก่ submit,reset,button อื่นๆ ได้แก่ hidden field และ file upload
รับ-ส่งค่าระหว่างหน้า กล่องรับข้อความและส่วนที่รับอินพุทอื่นๆ อยู่ภายในฟอร์ม ฟอร์มมีไว้สำหรับรวมกลุ่มอินพุทต่างๆ ที่ส่งไปพร้อมกัน การสร้างฟอร์มใช้แท็ก <form> โดยใส่แอทริบิวส์ action เพื่อบอกว่าจะส่งค่าในฟอร์มไปที่เพจใด <form action=“page2.php”> <input type=“text” name=“user”> </form>
รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password TEXT FORM รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password รับข้อมูลหลายบรรทัด
TEXT FORM แท็กรับข้อมูลบรรทัดเดียว <input type=‘text’ name=‘tname’ size=‘20’ maxlength=‘30’ value=‘hello’ > แท็กรับข้อมูลบรรทัดเดียวเป็นความลับ password <input type=‘password’ name=‘pwd’ size=‘20’ maxlength=‘30’> แท็กรับข้อมูลหลายบรรทัด <textarea name=‘tname’ cols=’30’ rows=‘5’> Hello </textarea>
ปุ่มกด bottom ปุ่ม submit ปุ่ม reset ปุ่ม ธรรมดา ปุ่ม รูปภาพ
รูปแบบ HTML ปุ่ม ปุ่ม summit ปุ่ม reset ปุ่ม ธรรมดา <input type=‘submit’ name=‘bname’ value=‘ok’> ปุ่ม reset <input type=‘reset’ name=‘bname’ value=‘reset’> ปุ่ม ธรรมดา <input type=‘button’ name=‘bname’ value=‘reset’>
รูปแบบ HTML ปุ่ม ปุ่ม รูปภาพ <button name=‘bname’ type=‘button’> <img src=‘image.gif’ title=‘preview’> </button>
FORM & BUTTON <html> <form name=‘fname’ method=‘post’ action=‘script.php’> <input type=‘submit’ name=‘bsubmit’ value=‘ok’> <input type=‘reset’ name=‘breset’ value=‘reset’> </form> </html>
ตัวอย่าง
วิธีการส่งข้อมูลผ่าน FORM HTML GET ข้อมูลในฟอร์มจะถูกส่งโดยพ่วงท้ายไปกับ URL ซึ่งจะเห็นใน Address bar POST ข้อมูลในฟอร์มจะถูกส่งไปโดยไม่แสดงให้เห็นใน Address ไว้สำหรับส่งข้อมูลที่เป็นความลับ
วิธีการส่งข้อมูลผ่าน FORM HTML ข้อดีของ GET แสดงพารามิเตอร์ที่ URL ผู้เขียนโปรแกรมสามารถตรวจสอบพารามิเตอร์ได้ง่าย โดยดูที่แถบ address ส่งค่าโดยไม่ต้องใช้ฟอร์ม เช่น สามารถใส่ค่าพารามิเตอร์ของแท็ก <a> ได้เช่น <a href=“search.php?author=thosapon”>
วิธีการส่งข้อมูลผ่าน FORM HTML ข้อดีของ POST ไม่แสดงพารามิเตอร์ที่ URL เหมาะสำหรับกรณีที่ต้องการซ่อนข้อมูลที่ถูก submit ส่งข้อมูลขนาดใหญ่กว่าแบบ get ส่งข้อมูลแบบไฟล์ได้
// ข้อมูลที่ต้องการส่ง รูปแบบ FORM <html> <form name=‘formname’ method=‘post’ action=‘script.php’> // ข้อมูลที่ต้องการส่ง </form> </html>
รายละเอียดของ FORM HTML Name ชื่อฟอร์ม Method วิธีการส่งข้อมูลของฟอร์ม post หรือ get Action ระบบปลายทางที่จะส่งข้อมูลเมื่อฟอร์มถูก summit
การแสดงข้อมูลจาก Html Form รูปแบบ $var-name หากต้องการพิมพ์ข้อความออกมา echo $var-name;
การส่งข้อมูลด้วย Html Form Php2-2.php <html> <body> ชื่อ <? echo $name; ?> <br> นามสกุล <?echo $surname; ?> </body> </html> Out Put
แบบฝึกหัด 1 page1.php page2.php ชื่อ ชื่อ xxxxx นามสกุล นามสกุล xxxxx Name ชื่อ xxxxx นามสกุล Surname นามสกุล xxxxx ที่อยู่ Address ที่อยู่ Xxxxxxxxxx Submit Cancel
RADIO FORM การเลือก โดยเลือกอย่างได้อย่างหนึ่ง จากหลาย ๆ ตัวเลือก
RADIO FORM <input type='radio' name=‘rname' value='1'> One <input type='radio' name='rname' value='2'> Two
Drop down list หรือ Combo box selected=‘selected’ ช่วยในการกำหนดค่าเริ่มต้น
SELECT FORM <select name=‘sname’> <option value=‘1’> One </option> <option value=‘2’ selected=‘selected’> Two </option> <option value=‘3’> Three </option> </select>
SELECT FORM <html> <form name=‘fname’ method=‘post’ action=‘script.php’> <select name=‘id’> <option value=‘48’> 48xxxxxx </option> <option value=‘49’ selected=‘selected’> 49xxxxxx </option> <option value=‘50’> 50xxxxxx </option> </select> <input type=‘submit’ name=‘bsubmit’ value=‘ok’> <input type=‘reset’ name=‘breset’ value=‘reset’> </form> </html>
CHECK BOX FORM การเลือกหลาย ๆ ตัวเลือกจากตัวเลือกทั้งหมด ข้อมูลที่ได้รับเป็น array
CHECKBOX FORM <input type='checkbox' name='number[0]' value='1'> ONE <input type='checkbox' name='number[1]' value='2' > TWO <input type='checkbox' name='number[2]' value='3'> THREE
การรับค่าจาก FORM HTML การที่จะส่งค่าตัวแปรไปแสดงผลได้หลายๆ หน้าเพจ จะต้องกำหนดตัวแปรแบบโกลบอล(Global) PHP config php.ini กำหนดการรับข้อมูลค่า register_globals จะส่งผ่านข้อมูลผ่าน ตัวแปลซูเปอร์โกลบอล $_POST[name] หรือ $_GET[name] รับได้ทั้ง Post และ Get
การรับข้อมูลผ่าน GET <?php $username=$_GET[username]; $password=$_GET[password]; ?>
การรับข้อมูลผ่าน POST <?php $username=$_POST[username]; $password=$_POST[password]; ?>
POST <?php $namestudent=$_POST[name]; $idstudent=$_POST[id]; echo “ NAME $namestudent”; echo “ STUDENT ID $idstudent”; ?>
GET <?php $namestudent=$_GET[name]; $idstudent=$_GET[id]; echo “ NAME $namestudent”; echo “ STUDENT ID $idstudent”; ?>
แบบฝึกหัด 2 จงเขียนโปรแกรม PHP รับข้อมูลชื่อและรหัสผ่าน โดยใช้ POST username password ตรวจสอบ username กับ password ว่าเป็น username คือ textmode password คือ 123456 ถ้า ถูกต้องให้แสดงว่า “Username and Password OK” ถ้า ไม่ถูกต้องให้แสดง “ ERROR”
แบบฝึกหัด 3 ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก จงเขียน FORM ที่กำหนดให้ต่อไปนี้ -ให้นักศึกษาสร้างเพจทั้งหมด 3 เพจ คือ login.php , form.php และ show.php - กำหนดให้หน้าแรกเป็นหน้า login เข้าสู่ระบบ โดยหากกรอกชื่อผู้ใช้และรหัสผ่านถูกต้อง ที่เพจ form.php จะแสดงข้อความแจ้งให้ผู้ใช้ทราบว่ารหัสผ่านถูกต้อง และแสดงแบบ ฟอร์มให้กรอกข้อมูล หากไม่ถูกต้องจะแสดงข้อความแจ้งให้ผู้ใช้ทราบว่ารหัสผ่านผิด และจะไม่สามารถแสดงแบบฟอร์มให้กรอกข้อมูลได้ ส่วนหน้า show.php เป็นหน้าที่ใช้ แสดงข้อมูลที่รับมาจาก form.php login.php ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก
แบบฝึกหัด 3 form.php ชื่อ-สกุล :: อายุ :: น้อยกว่า 15,16-25,26-40,มากว่า 41 เพศ :: ชาย หญิง ที่อยู่ :: E-mail :: คณะ :: ครุศาสตร์ , วิทยาศาสตร์และเทคโนโลยี ฯลฯ ภาษาคอมพิวเตอร์ :: PHP C JAVA VB ยืนยันชื่อผู้ใช้ :: ยืนยันรหัสผ่าน:: ยืนยัน ยกเลิก
แบบฝึกหัด 3 ตัวอย่างหน้าจอการแสดงผลข้อมูล show.php ชื่อ-สกุล :: xxxxxxxxxxx อายุ :: xxxxx ปี เพศ :: xxx ที่อยู่ :: xxxxxxxxxxx xxxxxxxxx xxxxxxx E-mail :: xxxxxxx คณะ:: xxxxxxxxxxxxxx ภาษาคอมพิวเตอร์ :: xxxxxx xxxxxxx xxxxxx ชื่อผู้ใช้ :: xxxxxxx รหัสผ่าน:: xxxxxxx
แบบฝึกหัด ทำฟอร์มที่ใช้ในการอัพโหลดไฟล์ และแสดงผลข้อมูลของไฟล์ที่อัพโหลด โดยให้แสดงผลดังนี้คือ ชื่อไฟล์ ชนิดไฟล์ ขนาดไฟล์ แหล่งเก็บไฟล์