Embed Size (px)
Citation preview
บทท 6
การใชงานฟอรมกบ PHP
ฟอรมทาหนาทในการตดตอสอสารหรอโตตอบกบผใชเวบไซตในลกษณะการรบสงขอมล เมอ ผใชกรอกขอมลในฟอรมและคลกปมสงขอมล ขอมลเหลานนกจะถกสงไปประมวลผลทเซรฟเวอร ฟอรมจะประกอบไปดวยออบเจคตตางๆ ซงแตละออบเจคตกมลกษณะการโตตอบกบผใชแตกตางกนไป รายละเอยดการทางานแตละออบเจคตจะกลาวถงในลาดบตอไป นอกจากนนภายในแทกฟอรมยงมพารามเตอรทเราสามารถกาหนดคาเปนการระบใหสงคาไปยงไฟลสครปตบนเซรฟเวอรหรอโปรแกรมอนๆ เพอทาหนาทประมวลผลขอมลทถกสงมากบฟอรมไดอกดวย
รปแสดงการทางานของฟอรม
วธการทางานของฟอรม จากรปดานบน แสดงวธการทางานของฟอรมดงน
เรมตนเมอผใชกรอกแบบฟอรมบนเวบเพจและคลกปมสงขอมลมาทเวบเซรฟเวอร 1)
ขอมลจากฟอรมจะถกประมวลผลทไฟล PHP, ASP หรอไฟล CGI อนๆบนเวบเซรฟเวอร 2)
เมอประมวลผลเสรจแลว ผลลพธจะถกสงกลบไปใหผใชในรปแบบเอกสาร HTML เพอใหเวบเบราเซอรแสดงผล 3)
การสรางและใชงานฟอรมกบ PHP
ขนตอนการสรางฟอรม:
1. เปดโปรแกรม Dreamweaver MX คลกเมน File > New จะปรากฏไดอะลอก New Document ขนมา ใหคลกแทบ General เลอก Dynamic Page > PHP หลงจากนนคลกปม Create บนทกเปนไฟล form.php
2. ทหนาจอของเวบเพจ ใหคลกเพอวางเคอรเซอรในตาแหนงทตองการสรางฟอรม หลงจากนนคลกทเมน Insert > Form > Form ฟอรมจะถกแทรกลงในเวบเพจ หากอยใน Design View จะเหนขอบเขตของฟอรมแสดงเปนเสนประสแดง (หากไมมเสนประสแสดงขนมา ใหคลกทเมน View > Visual Aids > Invisible Elements)
รปแสดงเวบเพจทแทรกฟอรม
3. คลกวางตาแหนงเคอรเซอรลงภายในขอบเขตของฟอรม หลงจากนนใหคลกเลอกแทก <form> จาก Tag Selector บรเวณขอบลางซายของเวบเพจ เมอปรากฏไดอะลอก Properties ชอง Form Name ใหกาหนดชอของฟอรม เทากบ fmProcess ชอของฟอรมนจะถกใชเพออางองในสครปต PHP
รปแสดง Property ของฟอรม
4. ไดอะลอก Properties ชอง Action ใหกาหนดชอไฟล หรอ URL ของสครปตทจะใชในการประมวลผลฟอรม เทากบ formprocess.php (หากตองการระบเปน URL ใหพมพเปน http://localhost/phpweb/formprocess.php)
5. ไดอะลอก Properties ชอง Method ใหเลอกรปแบบการสงขอมลจากฟอรมไปทเวบเซรฟเวอร ซงมใหเลอก 3 รปแบบ คอ
การทางานของ METHOD:
สงขอมลโดยสงขอมลสงไปกบ HTTP Request • POST
• GET สงขอมลโดยการแปะคาเปน URL Parameter (Query String) ไปกบ URL (ขอมลทสงจะแสดงอยบน URL ของเวบเบราเซอร)
สงขอมลโดยขนอยกบคา default ของเวบเบราเซอร โดยปกตจะเปนแบบ GET • DEFAULT
NOTE: วธการสงขอมลแบบ GET ไมควรใชกบฟอรมทมการสงขอมลจานวนมาก รวมทงไมควรใชในการสงขอมลทเปนความลบ เชน username, password หรอเลขทบตรเครดต เปนตน เนองจากวธการสงแบบ GET น ขอมลทเราสงจะถกแสดงบน URL เชน http://localhost/phpweb/detail.php?empid=01020489
6. ไดอะลอก Properties ชอง Enctype ใหระบชนดของการเขารหสขอมล โดยคา default ของ Enctype จะเปน application/x-www-form-urlencode ซงจะถกใชรวมกบ method แบบ POST หากใชฟอรมในการอปโหลดไฟล ใหเลอก Enctype เปนแบบ multipart/form-data
7. ไดอะลอก Properties ชอง Target ใหพมพชอหนาจอของเวบเบราเซอรทตองการแสดงผลลพธของฟอรมหรอเลอกจากรายการทกาหนดไวให หากเวบเบราเซอรยงไมมชอหนาจอทระบ เวบเบราเซอรจะสรางหนาจอชอทระบขนมาใหม ตวเลอกทกาหนดไวใหในชอง Target
การทางานของ TARGET:
• _blank ผลลพธของฟอรมจะแสดงทหนาจอเวบเบราเซอรทสรางขนมาใหม
• _parent ผลลพธของฟอรมจะแสดงทหนาจอหลก (parent) ของหนาจอเวบเบราเซอรขณะนน
• _self ผลลพธจะแสดงทหนาจอเวบเบราเซอรเดยวกบฟอรม
• _top ผลลพธของฟอรมจะแสดงทหนาจอหลก ในกรณทหนาจอเวบเบราเซอรแบงเปนหลายเฟรม
คลกปม Code View เพอเขยนโคด HTML ดงรปดานลาง หลงจากนนบนทกไฟล form.php 8.
<html> <body> <form action="formprocess.php" method="POST" name="fmProcess"> ชอ: <input name="firstname" type="text" size="32" maxlength="30"> <br> นามสกล: <input name="lastname" type="text" size="32" maxlength="30"> <br> <input name="btnSubmit" type="submit" value="บนทก"> <input name="btnReset" type="reset" value="ยกเลก"> </form> </body> </html>
รปแสดงโคดไฟล form.php
9. เปดโปรแกรม Dreamweaver MX คลกเมน File > New จะปรากฏไดอะลอก New Document ขนมา ใหคลกแทบ General เลอก Dynamic Page > PHP คลกปม Create หลงจากนนใหเพอเขยนโคด PHP ดงรปดานลาง บนทกเปนไฟล formprocess.php <html> <body> <?php echo "ชอ: " . $_POST['firstname'] . "<br>"; echo "นามสกล: " . $_POST['lastname'] . "<br>"; ?> </body> </html>
รปแสดงโคดไฟล formprocess.php
10. ทดสอบการทางานของฟอรม โดยเปด Dreamweaver MX ไปทหนาจอไฟล form.php หลงจากนนกดปม F12 จะปรากฏหนาจอ Internet Explorer เปนแบบฟอรมกรอกขอมล ใหกรอกขอมล แลวคลกปม "บนทก" ใหสงเกตผลลพธการทางานของเวบเพจ
รปแสดงการทางานของไฟล form.php
รปแสดงการทางานของไฟล formprocess.php
เปลยน METHOD ของฟอรมในไฟล form.php จาก METHOD="POST" เปน METHOD="GET" 11.
12. เปลยนชอตวแปรในไฟล formprocess.php จาก $_POST['firstname’] เปน $_GET['firstname'] และ $_POST['lastname'] เปน $_GET['lastname']
ทดสอบการทางานของฟอรมใหมอกครง ใหสงเกตผลลพธการทางานของเวบเพจ 13.
ออบเจคต คอสวนของฟอรมทใชในการรบขอมลจากผใช กอนทจะแทรกออบเจคตลงบนเวบเพจ ตองมการสรางหรอแทรกฟอรมลงในเวบเพจกอนเสมอ หากมการแทรกออบเจคตลงในสวนทไมมฟอรม Dreamweaver จะถามโดยปรากฏไดอะลอก “Add form tags?” ใหเลอก Yes เพอให Dreamweaver สรางแทกฟอรมสาหรบออบเจคตนน
การใชงานออบเจคตของฟอรมชนดตางๆ
รปแสดงฟอรมและออบเจคตบน Insert Bar
การใชงานออบเจคต Text Field
ออบเจคตชนด Text Field จะมหนาทในการรบคาขอมล เพอใชในการจดเกบขอมลหรอสงคาบางอยางทตองการคนหา เชน ใชในการคนหาขอมล (Search Engine) เปนตน
วธการสราง Text Field ทาไดโดยการคลกเมน Insert > Form > Text Field เสรจแลวใหกาหนดคณสมบตของ Text Field โดยใหคลกเลอกท Text Field ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Text Field แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต Text Field แบบ Single line
คณสมบตของออบเจคต Text Field:
• TextField กาหนดชอของออบเจคต Text Field
กาหนดความกวางของ Text Field • Char Width
กาหนดจานวนตวอกษรสงสดทกรอกขอมลไดของ Text Field • Max Chars
กาหนดชนดของ Text Field ม 3 ลกษณะ คอ • Type
กาหนดใหแสดงเปนแบบบรรทด (Textarea) o Single Line
o Multi Line กาหนดใหแสดงเปนแบบหลายบรรทด
กาหนดใหแสดงแบบรหสผาน o Password
กาหนดคาเรมตน • Init Val
รปแสดงการใชงานออบเจคต Text Field
การใชงานออบเจคต Textarea
ออบเจคตชนด Textarea จะมหนาทในการรบคาขอมลทมขนาดใหญ เชน ทอย เปนตน
วธการสราง Text Field ทาไดโดยการคลกเมน Insert > Form > Textarea เสรจแลวใหกาหนดคณสมบตของ Textarea โดยใหคลกเลอกท Textarea ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Textarea แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต Textarea
คณสมบตของออบเจคต Textarea:
• TextField กาหนดชอของออบเจคต Textarea
กาหนดความกวางของ Textarea • Char Width
กาหนดจานวนตวอกษรสงสดทกรอกขอมลไดของ Textarea • Max Chars
กาหนดชนดของ Textarea คอ Multi Line • Type
กาหนดคาเรมตน • Init Val
รปแสดงการใชงานออบเจคต Textarea
การใชงานออบเจคต Button
ออบเจคตชนด Button มกถกนามาใชเพอทาหนาทในการยนยนการเพมขอมล แกไขขอมล การลบขอมล หรอยกเลกการใชงาน
วธการสราง Button ทาไดโดยการคลกเมน Insert > Form > Button เสรจแลวใหกาหนดคณสมบตของ Button โดยใหคลกเลอกท Button ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Button แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต Button
คณสมบตของออบเจคต Button:
กาหนดชอของออบเจคต Button • Button name
กาหนดขอความทจะแสดงบนปม Button • Label
กาหนดชนดของ Action ม 3 ลกษณะ คอ • Action
กาหนดใหใชสาหรบสงฟอรมไปประมวลผล o Submit Form
กาหนดใหใชสาหรบยกเลกการกรอกขอมลในฟอรม o Reset Form
กาหนดใหเปนปมทคลกแลวไมทางานใดๆ o None
รปแสดงการใชงานออบเจคต Button
การใชงานออบเจคต Check Box
ออบเจคตชนด Check Box ทาหนาทเพอแสดงตวเลอกใหผใชไดเลอกตวเลอกทกาหนดให ซงสามารถเลอกไดมากกวา 1 ตวเลอก
วธการสราง Check Box ทาไดโดยการคลกเมน Insert > Form > Check Box เสรจแลวใหกาหนดคณสมบตของ Check Box โดยใหคลกเลอกท Check Box ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Check Box แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต Check Box
คณสมบตของออบเจคต Check Box:
กาหนดชอของออบเจคต Check Box • CheckBox
กาหนดคาให Check Box • Checked Value
กาหนดสถานะเรมตนเมอแสดงบนเวบเพจ ม 2 ลกษณะ คอ • Initial State
กาหนดใหเรมตนโดยใหสถานะเปนถกเลอกไว o Checked
กาหนดใหเรมตนโดยสถานะไมใหถกเลอก o Unchecked
รปแสดงการใชงานออบเจคต Check Box
การใชงานออบเจคต Radio Button
ออบเจคตชนด Radio Button ทาหนาทเพอแสดงตวเลอกใหผใชไดเลอกตวเลอกทกาหนดให ซงสามารถเลอกไดเพยง 1 ตวเลอกเทานน เชน การเลอกระบเพศ ชาย หรอ หญง จะเปนการเลอกเพศใดเพศหนงเพยงเพศเดยวเทานน
วธการสราง Radio Button ทาไดโดยการคลกเมน Insert > Form > Radio Button เสรจแลวใหกาหนดคณสมบตของ Radio Button โดยใหคลกเลอกท Radio Button ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Radio Button แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต Radio button
คณสมบตของออบเจคต Radio Button:
• RadioButton กาหนดชอของออบเจคต Radio Button หากเปนการเลอกอยางใดอยางหนง จากตวเลอกตงแต 2 ตวขนไป จะตองกาหนดชอของ Radio Button ทกตวใหชอเหมอนกน มฉะนน การทางานของ Radio Button จะไมถกตอง
กาหนดคาให Radio Button • Checked Value
กาหนดสถานะเรมตนเมอแสดงบนเวบเพจ ม 2 ลกษณะ คอ • Initial State
กาหนดใหเรมตนโดยใหสถานะเปนถกเลอกไว o Checked
o Unchecked กาหนดใหเรมตนโดยสถานะไมใหถกเลอก
รปแสดงการใชงานออบเจคต Radio Button
การใชงานออบเจคต List/Menu
ออบเจคตชนด List/Menu ทาหนาทเพอกาหนดคาโดยทใชไมตองพมพตวเลอกทตองการลงไป เพยงแคคลกเลอกรายการตางๆ ทไดกาหนดไวใหแลวเทานน สามารถเลอกไดเพยง 1 ตวเทานน
วธการสราง List/Menu ทาไดโดยการคลกเมน Insert > Form > List/Menu เสรจแลวใหกาหนดคณสมบตของ List/Menu โดยใหคลกเลอกท List/Menu ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ List/Menu แสดงในไดอะลอก Properties
รปแสดงการกาหนด Property ของออบเจคต List/Menu
คณสมบตของออบเจคต List/Menu:
• List/Menu กาหนดชอของออบเจคต List/Menu
• Type เลอกการทางานเปนแบบ Menu หรอ List
แสดงคาตวเลอกทกาหนดมาจาก List Values • Initially Selected
รปแสดงการใชงานออบเจคต List/Menu
การใชงานออบเจคต File Field
ออบเจคตชนด File Field น ทาหนาทในการแสดงรายชอไฟลตางๆ เพอใหผใชเวบไซตสามารถเลอกไฟลเหลานนขนมาใชงาน เชน การอปโหลดไฟล เปนตน
วธการสราง File Field ทาไดโดยการคลกเมน Insert > Form > File Field เสรจแลวใหกาหนดคณสมบตของ File Field โดยใหคลกเลอกท File Field ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ File Field แสดงในไดอะลอก Properties
รปแสดง Property ของออบเจคต File Field
คณสมบตของออบเจคต File Field:
กาหนดชอของออบเจคต File Field • FileField
กาหนดความกวางของ File Field • Char Width
กาหนดจานวนตวอกษรสงสด • Max Chars
รปแสดงการใชงานออบเจคต File Field
การใชงานออบเจคต Hidden Field
ออบเจคตชนด Hidden Field น จะทางานในลกษณะลองหน กลาวคอ มจดประสงคเพอใชในการประมวลผลขอมล ทไดรบจากการใชงานฟอรมตางๆ ซงฟลดแบบ Hidden Field น จะไมมการตดตอสอสารกบผใชงานฟอรม แตอยางใด รวมทงไมมการแสดงผลบนหนาเวบเพจดวย
วธการสราง Hidden Field ทาไดโดยการคลกเมน Insert > Form > Hidden Field เสรจแลวใหกาหนดคณสมบตของ Hidden Field โดยใหคลกเลอกท Hidden Field ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Hidden Field แสดงในไดอะลอก Hidden Field
รปแสดง Property ของออบเจคต Hidden Field
คณสมบตของออบเจคต Hidden Field:
• HiddenField กาหนดชอของออบเจคต Hidden Field
• Value กาหนดคาเรมตนสาหรบ Hidden Field
รปแสดงการใชงานออบเจคต Hidden Field
การใชงานออบเจคต Image Field
ออบเจคตชนด Image Field น เราสามารถใสรปลงในฟอรมเพอทาใหเวบเพจนนดมสสนดสวยงามขนยงขน หรออาจใชประโยชนในการใชแทนปม Button กได
วธการสราง Image Field ทาไดโดยการคลกเมน Insert > Form > Image Field เสรจแลวใหกาหนดคณสมบตของ List/Menu โดยใหคลกเลอกท Image Field ในเวบเพจ หลงจากนนใหไปทเมน Window > Properties จะปรากฏคณสมบตของ Image Field แสดงในไดอะลอก Image Field
รปแสดง Property ของออบเจคต Image Field
คณสมบตของออบเจคต Image Field:
• ImageField กาหนดชอของออบเจคต Image Field
กาหนดคาความกวางของ Image Field ทแสดง • W
กาหนดคาความสงของ Image Field ทแสดง • H
ชอไฟลรปภาพของ Image Field ทแสดง • Src
กาหนดขอควาทจะใชแสดงแทน ในกรณทไมพบไฟลรปภาพ • Alt
• Align กาหนดตาแหนงการแสดง Image Field
รปแสดงการใชงานออบเจคต Image Field
Exercise:
สรางฟอรมสาหรบกรอกขอมลพนกงาน บนทกเปนไฟล htmlform.htm ดงรปดานลาง 1. Hint:
ประยกตการใชงานแทก <TABLE> <IMG> <A> และ <FORM> -
ใชไฟล PHPWEB\images\bkg.gif - Backgroung Image
- Title ใชไฟล PHPWEB\images\title_insert.gif
