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