งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ"— ใบสำเนางานนำเสนอ:

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

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]; ?>

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”; ?>

32 GET <?php $namestudent=$_GET[name]; $idstudent=$_GET[id];
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 แบบฝึกหัด ทำฟอร์มที่ใช้ในการอัพโหลดไฟล์ และแสดงผลข้อมูลของไฟล์ที่อัพโหลด โดยให้แสดงผลดังนี้คือ ชื่อไฟล์ ชนิดไฟล์ ขนาดไฟล์ แหล่งเก็บไฟล์


ดาวน์โหลด ppt อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ

งานนำเสนอที่คล้ายกัน


Ads by Google