ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
Internet for Education อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ เว็บฟอร์ม (Web Form)
2
Outline การส่งข้อมูลด้วย Html Form การส่งข้อมูลด้วย Querystring
3
การทำงานของระบบ FORM HTML & PHP Script
ทำการร้องขอข้อมูล ส่งข้อมูล FORM HTML CLIENT เครื่องลูกข่าย SERVER เครื่องแม่ข่าย ทำการประมวลผล PHP ส่งข้อมูลผ่าน FORM ส่งข้อมูล HTML
4
Web Form อินพุทที่อยู่ในแบบฟอร์มแบ่งออกเป็น 4 กลุ่ม
ตัวอักษร ได้แก่ text box, list box , กล่องรับรหัส (password) ตัวเลือก ได้แก่ check box,radio button,drop down list,list ปุ่ม ได้แก่ submit,reset,button อื่นๆ ได้แก่ hidden field และ file upload
5
รับ-ส่งค่าระหว่างหน้า
กล่องรับข้อความและส่วนที่รับอินพุทอื่นๆ อยู่ภายในฟอร์ม ฟอร์มมีไว้สำหรับรวมกลุ่มอินพุทต่างๆ ที่ส่งไปพร้อมกัน การสร้างฟอร์มใช้แท็ก <form> โดยใส่แอทริบิวส์ action เพื่อบอกว่าจะส่งค่าในฟอร์มไปที่เพจใด <form action=“page2.php”> <input type=“text” name=“user”> </form>
6
รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password
TEXT FORM รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password รับข้อมูลหลายบรรทัด
7
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>
8
ปุ่มกด bottom ปุ่ม submit ปุ่ม reset ปุ่ม ธรรมดา ปุ่ม รูปภาพ
9
รูปแบบ 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’>
10
รูปแบบ HTML ปุ่ม ปุ่ม รูปภาพ <button name=‘bname’ type=‘button’>
<img src=‘image.gif’ title=‘preview’> </button>
11
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>
12
ตัวอย่าง
13
วิธีการส่งข้อมูลผ่าน FORM HTML
GET ข้อมูลในฟอร์มจะถูกส่งโดยพ่วงท้ายไปกับ URL ซึ่งจะเห็นใน Address bar POST ข้อมูลในฟอร์มจะถูกส่งไปโดยไม่แสดงให้เห็นใน Address ไว้สำหรับส่งข้อมูลที่เป็นความลับ
14
วิธีการส่งข้อมูลผ่าน FORM HTML
ข้อดีของ GET แสดงพารามิเตอร์ที่ URL ผู้เขียนโปรแกรมสามารถตรวจสอบพารามิเตอร์ได้ง่าย โดยดูที่แถบ address ส่งค่าโดยไม่ต้องใช้ฟอร์ม เช่น สามารถใส่ค่าพารามิเตอร์ของแท็ก <a> ได้เช่น <a href=“search.php?author=thosapon”>
15
วิธีการส่งข้อมูลผ่าน FORM HTML
ข้อดีของ POST ไม่แสดงพารามิเตอร์ที่ URL เหมาะสำหรับกรณีที่ต้องการซ่อนข้อมูลที่ถูก submit ส่งข้อมูลขนาดใหญ่กว่าแบบ get ส่งข้อมูลแบบไฟล์ได้
16
// ข้อมูลที่ต้องการส่ง
รูปแบบ FORM <html> <form name=‘formname’ method=‘post’ action=‘script.php’> // ข้อมูลที่ต้องการส่ง </form> </html>
17
รายละเอียดของ FORM HTML
Name ชื่อฟอร์ม Method วิธีการส่งข้อมูลของฟอร์ม post หรือ get Action ระบบปลายทางที่จะส่งข้อมูลเมื่อฟอร์มถูก summit
18
การแสดงข้อมูลจาก Html Form
รูปแบบ $var-name หากต้องการพิมพ์ข้อความออกมา echo $var-name;
19
การส่งข้อมูลด้วย Html Form
Php2-2.php <html> <body> ชื่อ <? echo $name; ?> <br> นามสกุล <?echo $surname; ?> </body> </html> Out Put
20
แบบฝึกหัด 1 page1.php page2.php ชื่อ ชื่อ xxxxx นามสกุล นามสกุล xxxxx
Name ชื่อ xxxxx นามสกุล Surname นามสกุล xxxxx ที่อยู่ Address ที่อยู่ Xxxxxxxxxx Submit Cancel
21
RADIO FORM การเลือก โดยเลือกอย่างได้อย่างหนึ่ง จากหลาย ๆ ตัวเลือก
22
RADIO FORM <input type='radio' name=‘rname' value='1'> One
<input type='radio' name='rname' value='2'> Two
23
Drop down list หรือ Combo box
selected=‘selected’ ช่วยในการกำหนดค่าเริ่มต้น
24
SELECT FORM <select name=‘sname’>
<option value=‘1’> One </option> <option value=‘2’ selected=‘selected’> Two </option> <option value=‘3’> Three </option> </select>
25
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>
26
CHECK BOX FORM การเลือกหลาย ๆ ตัวเลือกจากตัวเลือกทั้งหมด
ข้อมูลที่ได้รับเป็น array
27
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
![CHECKBOX FORM <input type= checkbox name= number[0] value= 1 > ONE. <input type= checkbox name= number[1] value= 2 > TWO.](http://slideplayer.in.th/slide/3150918/11/images/27/CHECKBOX+FORM+%3Cinput+type%3D+checkbox+name%3D+number%5B0%5D+value%3D+1+%3E+ONE.+%3Cinput+type%3D+checkbox+name%3D+number%5B1%5D+value%3D+2+%3E+TWO..jpg "<input type= checkbox name= number[2] value= 3 > THREE.")
28
การรับค่าจาก FORM HTML
การที่จะส่งค่าตัวแปรไปแสดงผลได้หลายๆ หน้าเพจ จะต้องกำหนดตัวแปรแบบโกลบอล(Global) PHP config php.ini กำหนดการรับข้อมูลค่า register_globals จะส่งผ่านข้อมูลผ่าน ตัวแปลซูเปอร์โกลบอล $_POST[name] หรือ $_GET[name] รับได้ทั้ง Post และ Get
29
การรับข้อมูลผ่าน GET <?php $username=$_GET[username];
$password=$_GET[password]; ?>
![การรับข้อมูลผ่าน GET < php $username=$_GET[username];](http://slideplayer.in.th/slide/3150918/11/images/29/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%9C%E0%B9%88%E0%B8%B2%E0%B8%99+GET+%3C+php+%24username%3D%24_GET%5Busername%5D%3B.jpg "$password=$_GET[password]; >")
30
การรับข้อมูลผ่าน POST
<?php $username=$_POST[username]; $password=$_POST[password]; ?>
31
POST <?php $namestudent=$_POST[name]; $idstudent=$_POST[id];
echo “ NAME $namestudent”; echo “ STUDENT ID $idstudent”; ?>
![POST < php $namestudent=$_POST[name]; $idstudent=$_POST[id];](http://slideplayer.in.th/slide/3150918/11/images/31/POST+%3C+php+%24namestudent%3D%24_POST%5Bname%5D%3B+%24idstudent%3D%24_POST%5Bid%5D%3B.jpg "echo NAME $namestudent ; echo STUDENT ID $idstudent ; >")
32
GET <?php $namestudent=$_GET[name]; $idstudent=$_GET[id];
echo “ NAME $namestudent”; echo “ STUDENT ID $idstudent”; ?>
![GET < php $namestudent=$_GET[name]; $idstudent=$_GET[id];](http://slideplayer.in.th/slide/3150918/11/images/32/GET+%3C+php+%24namestudent%3D%24_GET%5Bname%5D%3B+%24idstudent%3D%24_GET%5Bid%5D%3B.jpg "echo NAME $namestudent ; echo STUDENT ID $idstudent ; >")
33
แบบฝึกหัด 2 จงเขียนโปรแกรม PHP รับข้อมูลชื่อและรหัสผ่าน โดยใช้ POST
username password ตรวจสอบ username กับ password ว่าเป็น username คือ textmode password คือ ถ้า ถูกต้องให้แสดงว่า “Username and Password OK” ถ้า ไม่ถูกต้องให้แสดง “ ERROR”
34
แบบฝึกหัด 3 ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก
จงเขียน FORM ที่กำหนดให้ต่อไปนี้ -ให้นักศึกษาสร้างเพจทั้งหมด 3 เพจ คือ login.php , form.php และ show.php - กำหนดให้หน้าแรกเป็นหน้า login เข้าสู่ระบบ โดยหากกรอกชื่อผู้ใช้และรหัสผ่านถูกต้อง ที่เพจ form.php จะแสดงข้อความแจ้งให้ผู้ใช้ทราบว่ารหัสผ่านถูกต้อง และแสดงแบบ ฟอร์มให้กรอกข้อมูล หากไม่ถูกต้องจะแสดงข้อความแจ้งให้ผู้ใช้ทราบว่ารหัสผ่านผิด และจะไม่สามารถแสดงแบบฟอร์มให้กรอกข้อมูลได้ ส่วนหน้า show.php เป็นหน้าที่ใช้ แสดงข้อมูลที่รับมาจาก form.php login.php ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก
35
แบบฝึกหัด 3 form.php ชื่อ-สกุล :: อายุ ::
น้อยกว่า 15,16-25,26-40,มากว่า 41 เพศ :: ชาย หญิง ที่อยู่ :: : คณะ :: ครุศาสตร์ , วิทยาศาสตร์และเทคโนโลยี ฯลฯ ภาษาคอมพิวเตอร์ :: PHP C JAVA VB ยืนยันชื่อผู้ใช้ :: ยืนยันรหัสผ่าน:: ยืนยัน ยกเลิก
36
แบบฝึกหัด 3 ตัวอย่างหน้าจอการแสดงผลข้อมูล show.php
ชื่อ-สกุล :: xxxxxxxxxxx อายุ :: xxxxx ปี เพศ :: xxx ที่อยู่ :: xxxxxxxxxxx xxxxxxxxx xxxxxxx : xxxxxxx คณะ:: xxxxxxxxxxxxxx ภาษาคอมพิวเตอร์ :: xxxxxx xxxxxxx xxxxxx ชื่อผู้ใช้ :: xxxxxxx รหัสผ่าน:: xxxxxxx
37
แบบฝึกหัด ทำฟอร์มที่ใช้ในการอัพโหลดไฟล์ และแสดงผลข้อมูลของไฟล์ที่อัพโหลด โดยให้แสดงผลดังนี้คือ ชื่อไฟล์ ชนิดไฟล์ ขนาดไฟล์ แหล่งเก็บไฟล์
งานนำเสนอที่คล้ายกัน
