Electronic Commerce เว็บฟอร์ม (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>
ปุ่มกด 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 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
Querystring คืออะไร ? Querystring คือข้อมูลที่ Browser ส่งต่อท้าย URL ของ Page ที่ต้องการใช้ไปยัง Web Server โดยข้อมูลจะประกอบไปด้วยชื่อของข้อมูลและค่าของข้อมูล รูปแบบ http://127.0.0.1/file-name.php?var-name=value หากต้องการส่งค่ามากกว่าหนึ่งค่า ให้ใช้เครื่องหมาย & ขั้นระหว่างตัวแปร รูปแบบ http://127.0.0.1/file-name.php?var-name1=value&var-name2=value การอ่านข้อมูลจาก Querystring สามารถอ่านได้จากค่า var-name ที่เราตั้งขึ้นมาได้เลย เช่น $var-name echo $var-name;
การสร้างข้อมูลให้อยู่ในรูป Querystring สามารถ สร้างได้ 3 รูปแบบคือ 1. สร้างจาก Tag <a>... </a> กำหนดในส่วนคุณสมบัติของ HREF ของ TAG <a> </a> ตัวอย่าง Php2-5.php <html> <body> <a href=“php2-6.php?name=werachai numkitram&old=21">Test Querystring </a> </body> </html> Out Put
การส่งข้อมูลด้วย Html Form รูปแบบ $var-name หากต้องการพิมพ์ข้อความออกมา echo $var-name;
ต่อ Php2-2.php <html> <body> ชื่อ <? echo $name; ?> <br> นามสกุล <?echo $surname; ?> </body> </html> Out Put
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>
ตัวอย่าง
แบบฝึกหัด 1 page1.php page2.php ชื่อ ชื่อ xxxxx นามสกุล นามสกุล xxxxx Name ชื่อ xxxxx นามสกุล Surname นามสกุล xxxxx ที่อยู่ Address ที่อยู่ Xxxxxxxxxx Submit Cancel
รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ 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>
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 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 HTML ส่งค่าแบบ POST ไปยัง show.php form.php ชื่อ-สกุล :: อายุ :: น้อยกว่า 15,16-25,26-40,มากว่า 41 เพศ :: ชาย หญิง ที่อยู่ :: E-mail :: สาขาวิชา :: วิทยาการคอมพิวเตอร์ , เทคโนโลยีสารสนเทศ program :: PHP C JAVA VB ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก
ตัวอย่างหน้าจอการแสดงผลข้อมูล show.php ชื่อ-สกุล :: xxxxxxxxxxx อายุ :: xxxxx ปี เพศ :: xxx ที่อยู่ :: xxxxxxxxxxx xxxxxxxxx xxxxxxx E-mail :: xxxxxxx สาขาวิชา :: xxxxxxxxxxxxxx program :: xxxxxx xxxxxxx xxxxxx ชื่อผู้ใช้ :: xxxxxxx รหัสผ่าน:: xxxxxxx
แบบฝึกหัด ทำฟอร์มที่ใช้ในการอัพโหลดไฟล์ และแสดงผลข้อมูลของไฟล์ที่อัพโหลด โดยให้แสดงผลดังนี้คือ ชื่อไฟล์ ชนิดไฟล์ ขนาดไฟล์ แหล่งเก็บไฟล์