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

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

ทส215 การเขียนโปรแกรมบนเว็บ 1 อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ HTML FORM.

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


งานนำเสนอเรื่อง: "ทส215 การเขียนโปรแกรมบนเว็บ 1 อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ HTML FORM."— ใบสำเนางานนำเสนอ:

1 ทส215 การเขียนโปรแกรมบนเว็บ 1 อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ HTML FORM

2 2 Form  ฟอร์มใช้ในการรับข้อมูลจากผู้ใช้ ก่อนที่จะส่งข้อมูลนี้ไปประมวลผลบนเว็บเซิร์ฟเวอร์ ประกอบด้วย Tag เบื้องต้น 3 ประเภทดังนี้ 

3 3 First Name: Middle Name: Last Name: Form Elements Example

4 4  ใช้ในการรับข้อมูล ข้อความ ตัวเลือก ปุ่มสำหรับยืนยันและยกเลิกรายการ ประกอบด้วยรายละเอียดดังนี้ คุณสมบัติความหมาย Type = “text”เป็น Textbox สำหรับรับข้อความ Type = “password”เป็นช่องสำหรับใส่ password Type = “radio”เป็นตัวเลือก (เลือกได้ 1 รายการ) Type = “checkbox”เป็นตัวเลือก (มากกว่า 1 รายการ) Type = “button”ปุ่มสำหรับการเขียน script ในการทำงานอื่นๆ Type = “file”สำหรับเลือก File ที่อยู่ในเครื่อง Type = “image”สำหรับกรณีที่ใช้รูปภาพแทนปุ่มปกติ Type = “hidden”สำหรับใช้ในการซ้อนค่าตัวแปรในการเขียนโปรแกรม Type = “submit”ปุ่มส่งข้อมูลไปยัง server Type = “reset”ปุ่มเคลียร์ข้อมูลในฟอร์ม

5 5 คุณสมบัติความหมาย Id= ชื่อชื่อที่กำหนดให้แต่ละอินพุต Name=ชื่อชื่อที่กำหนดให้แต่ละอินพุต Value=xxค่าที่กำหนดให้อินพุตนั้น ๆ Size=xxกำหนดขนาดของ Textbox MaxLength=xxจำนวนตัวอักษรสูงสุดที่สามารถใส่ลงใน textbox ได้ Checkedใช้กำหนดว่าจะเลือก radio หรือ checkbox ตัวนั้นไว้ ล่วงหน้าหรือไม่ Etc.

6 6 Submitting Form for Processing  เมื่อต้องการโปรเซสข้อมูลใน form จำเป็นจะต้อง submit form ไปยังเซิร์ฟเวอร์ และจากนั้นจะเป็นการรับและโปรเซสข้อมูลที่เซิร์ฟเวอร์  ในการ submit form เมธอด submit() ภายใน form จะต้องถูกเรียกใช้ดังนี้  ใช้ Submit button  ถูกเรียกใช้จากเมธอด submit() ภายใน form

7 7  รูปแบบของ submit จะมีดังนี้  เมื่อ submit ถูก pressed คอมโพเนนท์ทางด้าน server mกำหนดไว้ใน action attribute ของ จะถูกเรียกใช้  ส่วน reset จะใช้สำหรับการเคลียร์ค่าภายใน form โดยมีรูปแบบดังนี้ Submit + Reset

8 8 Using Submit Button First Name: Middle Name: Last Name:

9 9 Radio buttons  ใช้ในกรณีที่มีทางเลือกหลายทางแต่สามารถเลือกได้เพียงทางเดียว  การใช้งานสามารถทำได้โดยการคลิกเมาส์ที่ตำแหน่งของ radio ที่ต้องการ  Name จะต้องใช้ชื่อเดียวกันทั้ง group

10 10 Radio Button Do you wish to hear from us again. Yes No Radio Button

11 11  ใช้ในกรณีที่ต้องการเลือกรายการที่กำหนดมากกว่าหนึ่งรายการ  Name จะต้องใช้ชื่อเดียวกันทั้ง group Checkbox

12 12 CHECKBOXES List your preferences Tick all that apply) HTML JAVA MySql JDBC Check Box

13 13  Used for drop down lists Dublin South Dublin North Co. Dublin Culchie Select

14 14 First Name: Middle Name: Last Name: Address : Text Area

15 การรับส่งและแสดงผลข้อมูล Request & Response

16 16 Client Web Server HTTP Request HTTP Response Client-Server Technology

17 17  Name เป็นชื่อที่ใช้ในการอ้างอิงถึงฟอร์มนี้  Action = URL เป็นตำแหน่งที่เก็บไฟล์  Method = “Post” หรือ “Get” หมายถึงรูปแบบการส่งข้อมูลจากฟอร์มไปยังเว็บเซิร์ฟเวอร์  Post จะใช้ในกรณีที่ข้อมูลที่เราต้องการส่งนั้นมีขนาดใหญ่กว่า 256 ไบต์ และต้องการ ความปลอดภัยในการส่งเพราะจะมองไม่เห็นข้อมูลที่ส่งไป  Get มักใช้กับข้อมูลขนาดเล็กไม่เกิน 256 ไบต์และไม่ต้องการปกปิดข้อมูลที่จะส่ง ………………………. การกำหนดคุณสมบัติให้กับ Tag Form

18 18 QueryString  เป็นการแนบข้อมูลในฟอร์มต่อท้าย URL ของไฟล์ ASP ที่เราต้องการส่งข้อมูลนี้ไป ประมวลผล โดยการส่งข้อมูลนี้จะใช้สัญลักษณ์พิเศษบางอย่างเข้าร่วมด้วย ? ใช้คั่นระหว่างส่วนของ URL กับส่วนของข้อมูล & ใช้คั่นระหว่างตัวแปรหรือ input แต่ละตัว = ใช้คั่นระหว่าง Input และค่าของมัน + ใช้แทนช่องว่าง % ใช้แทนอักขระพิเศษที่ไม่ใช่ตัวอักษรหรือตัวเลข

19 19 Request  เป็น Object ที่ใช้ในการจัดการเกี่ยวกับไคลเอนต์ ที่ส่งข้อมูลเข้ามายังเซิร์ฟเวอร์ เช่น การเรียกใช้ข้อมูลที่ส่งมา การตรวจสอบที่อยู่ของไคลเอนต์  QueryString ใช้ในการอ่านข้อมูลด้วยเมธอด Get  Form ใช้ในการอ่านข้อมูลด้วยเมธอด Post  ServerVariables ใช้อ่านค่าตัวแปรบางอย่างของ เซิร์ฟเวอร์ เช่น Request_Method เมธอดที่ส่งข้อมูลเข้ามา Query_String ข้อมูลที่ส่งด้วยเมธอด get Server_Name ชื่อเว็บเซิร์ฟเวอร์ Server_Port พอร์ตที่ใช้เชื่อมต่ออินเทอร์เน็ต Remote_Addr หมายเลข IP ของเครื่องที่ส่งข้อมูลมา

20 20 QueryString ด้วยเมธอด Get  จะทำงานผ่าน Object Request Request.QueryString[“ชื่อของ Input”]  เช่น Request.QueryString[“text1”]

21 21 index.aspx First Name: Last Name: Address: Do you like computer ?. Yes No You can program : HTML JAVA ASP VB City : America England Thailand

22 22 index.aspx

23 23 page2.aspx <%Response.Write("name:" + Request.QueryString["fName"]); Response.Write(" "); Response.Write("lname:" + Request.QueryString["lName"]); Response.Write(" "); Response.Write("addr:" + Request.QueryString["addr"]); Response.Write(" "); if (Request.QueryString["radio1"].Equals("0")) Response.Write("I like computer"); else Response.Write("I dislike computer"); Response.Write(" "); Response.Write("prog:" + Request.QueryString["items"]); Response.Write(" "); Response.Write("city:" + Request.QueryString["select1"]); %>

24 24 page2.aspx &addr=IT+MJU.&radio1=0&items=HTML&items=JAVA&select1=THA

25 25 example3.aspx First Name: Last Name: Address: Do you like computer ?. Yes No You can program : HTML JAVA ASP VB City : America England Thailand

26 26 การเรียกข้อมูลออกจาก Form ด้วยเมธอด Post  จะทำงานผ่าน Object Request เช่นเดียวกับเมธอด Get Request.Form[“ชื่อของ Input”]  เช่น Request.Form[“text1”]

27 27 example4.aspx <%Response.Write("name:" + Request.Form["fName"]); Response.Write(" "); Response.Write("lname:" + Request.Form["lName"]); Response.Write(" "); Response.Write("addr:" + Request.Form["addr"]); Response.Write(" "); if (Request.Form["radio1"].Equals("0")) Response.Write("I like computer"); else Response.Write("I dislike computer"); Response.Write(" "); Response.Write("prog:" + Request.Form["items"]); Response.Write(" "); Response.Write("city:" + Request.Form["select1"]); %>

28 28 การแยกข้อมูลจาก Input Checkbox string[] strItems = Request.Form["items"].Split(','); for (int counter = 0; counter < strItems.Length; counter++) { Response.Write(strItems[counter]); }

29 29 การแทรกบล็อก การแทรกบล็อก  เป็นการแทรกโค้ด บางส่วนลงในหน้าจอ HTML ซึ่งแบ่งได้ 2 ประเภทคือ เป็นการแทรกคำสั่งโดยทั่วไป เป็นการแทรกเพื่อแสดงค่าตัวแปรนั้น ๆ

30 30 การแทรกบล็อก การแทรกบล็อก  เช่น <% int i,sum; sum = 0; for (i = 1 ; i < 11 ; i++) { Response.Write(i + " : " + " ") ; sum += i; } %> Total =

31 31


ดาวน์โหลด ppt ทส215 การเขียนโปรแกรมบนเว็บ 1 อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ HTML FORM.

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


Ads by Google