ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Electronic Commerce เว็บฟอร์ม (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
ปุ่มกด bottom ปุ่ม submit ปุ่ม reset ปุ่ม ธรรมดา ปุ่ม รูปภาพ
7
รูปแบบ 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’>
8
รูปแบบ HTML ปุ่ม ปุ่ม รูปภาพ <button name=‘bname’ type=‘button’>
<img src=‘image.gif’ title=‘preview’> </button>
9
วิธีการส่งข้อมูลผ่าน FORM HTML
GET ข้อมูลในฟอร์มจะถูกส่งโดยพ่วงท้ายไปกับ URL ซึ่งจะเห็นใน Address bar POST ข้อมูลในฟอร์มจะถูกส่งไปโดยไม่แสดงให้เห็นใน Address ไว้สำหรับส่งข้อมูลที่เป็นความลับ
10
วิธีการส่งข้อมูลผ่าน FORM HTML
ข้อดีของ GET แสดงพารามิเตอร์ที่ URL ผู้เขียนโปรแกรมสามารถตรวจสอบพารามิเตอร์ได้ง่าย โดยดูที่แถบ address ส่งค่าโดยไม่ต้องใช้ฟอร์ม เช่น สามารถใส่ค่าพารามิเตอร์ของแท็ก <a> ได้เช่น <a href=“search.php?author=thosapon”>
11
วิธีการส่งข้อมูลผ่าน FORM HTML
ข้อดีของ POST ไม่แสดงพารามิเตอร์ที่ URL เหมาะสำหรับกรณีที่ต้องการซ่อนข้อมูลที่ถูก submit ส่งข้อมูลขนาดใหญ่กว่าแบบ get ส่งข้อมูลแบบไฟล์ได้
12
// ข้อมูลที่ต้องการส่ง
รูปแบบ FORM <html> <form name=‘formname’ method=‘post’ action=‘script.php’> // ข้อมูลที่ต้องการส่ง </form> </html>
13
รายละเอียดของ FORM HTML
Name ชื่อฟอร์ม Method วิธีการส่งข้อมูลของฟอร์ม post หรือ get Action ระบบปลายทางที่จะส่งข้อมูลเมื่อฟอร์มถูก summit
14
Querystring คืออะไร ? Querystring คือข้อมูลที่ Browser ส่งต่อท้าย URL ของ Page ที่ต้องการใช้ไปยัง Web Server โดยข้อมูลจะประกอบไปด้วยชื่อของข้อมูลและค่าของข้อมูล รูปแบบ หากต้องการส่งค่ามากกว่าหนึ่งค่า ให้ใช้เครื่องหมาย & ขั้นระหว่างตัวแปร รูปแบบ การอ่านข้อมูลจาก Querystring สามารถอ่านได้จากค่า var-name ที่เราตั้งขึ้นมาได้เลย เช่น $var-name echo $var-name;
15
การสร้างข้อมูลให้อยู่ในรูป 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
16
การส่งข้อมูลด้วย Html Form
รูปแบบ $var-name หากต้องการพิมพ์ข้อความออกมา echo $var-name;
17
ต่อ Php2-2.php <html> <body> ชื่อ <? echo $name; ?> <br> นามสกุล <?echo $surname; ?> </body> </html> Out Put
18
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>
19
ตัวอย่าง
20
แบบฝึกหัด 1 page1.php page2.php ชื่อ ชื่อ xxxxx นามสกุล นามสกุล xxxxx
Name ชื่อ xxxxx นามสกุล Surname นามสกุล xxxxx ที่อยู่ Address ที่อยู่ Xxxxxxxxxx Submit Cancel
21
รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password
TEXT FORM รับข้อมูลบรรทัดเดียว รับข้อมูลบรรทัดเดียวเป็นความลับ password รับข้อมูลหลายบรรทัด
22
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>
23
RADIO FORM การเลือก โดยเลือกอย่างได้อย่างหนึ่ง จากหลาย ๆ ตัวเลือก
24
RADIO FORM <input type='radio' name=‘rname' value='1'> One
<input type='radio' name='rname' value='2'> Two
25
Drop down list หรือ Combo box
selected=‘selected’ ช่วยในการกำหนดค่าเริ่มต้น
26
SELECT FORM <select name=‘sname’>
<option value=‘1’> One </option> <option value=‘2’ selected=‘selected’> Two </option> <option value=‘3’> Three </option> </select>
27
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>
28
CHECK BOX FORM การเลือกหลาย ๆ ตัวเลือกจากตัวเลือกทั้งหมด
ข้อมูลที่ได้รับเป็น array
29
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/2130400/8/images/29/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.")
30
การรับค่าจาก FORM HTML
PHP config php.ini กำหนดการรับข้อมูลค่า register_globals จะส่งผ่านข้อมูลผ่าน ตัวแปลซูเปอร์โกลบอล $_POST[name] หรือ $_GET[name] รับได้ทั้ง Post และ Get
31
การรับข้อมูลผ่าน GET <?php $username=$_GET[username];
$password=$_GET[password]; ?>
![การรับข้อมูลผ่าน GET < php $username=$_GET[username];](http://slideplayer.in.th/slide/2130400/8/images/31/%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]; >")
32
การรับข้อมูลผ่าน POST
<?php $username=$_POST[username]; $password=$_POST[password]; ?>
33
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/2130400/8/images/33/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 ; >")
34
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/2130400/8/images/34/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 ; >")
35
แบบฝึกหัด 2 จงเขียนโปรแกรม PHP รับข้อมูลผ่าน POST ชื่อข้อมูล username
password ตรวจสอบ username กับ password ว่าเป็น username คือ textmode password คือ ถ้า ถูกต้องให้แสดงว่า “Username and Password OK” ถ้า ไม่ถูกต้องให้แสดง “ ERROR”
36
แบบฝึกหัด 3 จงเขียน FORM HTML ส่งค่าแบบ POST ไปยัง show.php form.php
ชื่อ-สกุล :: อายุ :: น้อยกว่า 15,16-25,26-40,มากว่า 41 เพศ :: ชาย หญิง ที่อยู่ :: : สาขาวิชา :: วิทยาการคอมพิวเตอร์ , เทคโนโลยีสารสนเทศ program :: PHP C JAVA VB ชื่อผู้ใช้ :: รหัสผ่าน:: ยืนยัน ยกเลิก
37
ตัวอย่างหน้าจอการแสดงผลข้อมูล
show.php ชื่อ-สกุล :: xxxxxxxxxxx อายุ :: xxxxx ปี เพศ :: xxx ที่อยู่ :: xxxxxxxxxxx xxxxxxxxx xxxxxxx : xxxxxxx สาขาวิชา :: xxxxxxxxxxxxxx program :: xxxxxx xxxxxxx xxxxxx ชื่อผู้ใช้ :: xxxxxxx รหัสผ่าน:: xxxxxxx
38
แบบฝึกหัด ทำฟอร์มที่ใช้ในการอัพโหลดไฟล์ และแสดงผลข้อมูลของไฟล์ที่อัพโหลด โดยให้แสดงผลดังนี้คือ ชื่อไฟล์ ชนิดไฟล์ ขนาดไฟล์ แหล่งเก็บไฟล์
งานนำเสนอที่คล้ายกัน
