ทส215 การเขียนโปรแกรมบนเว็บ 1

งานนำเสนอเรื่อง: "ทส215 การเขียนโปรแกรมบนเว็บ 1"— ใบสำเนางานนำเสนอ:

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

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

3 Form Elements Example <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"> </FORM>

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

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

7 Submit + Reset รูปแบบของ submit จะมีดังนี้
<input type=“submit” value=“Let’s go”> เมื่อ submit ถูก pressed คอมโพเนนท์ทางด้าน server mกำหนดไว้ใน action attribute ของ <form> จะถูกเรียกใช้ ส่วน reset จะใช้สำหรับการเคลียร์ค่าภายใน form โดยมีรูปแบบดังนี้ <input type=“reset” value=“Clear Form”>

8 Using Submit Button <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Clear"> </FORM>

9 Radio buttons ใช้ในกรณีที่มีทางเลือกหลายทางแต่สามารถเลือกได้เพียงทางเดียว การใช้งานสามารถทำได้โดยการคลิกเมาส์ที่ตำแหน่งของ radio ที่ต้องการ <input type=“radio” name=“card” value=“visa”> Name จะต้องใช้ชื่อเดียวกันทั้ง group

10 Radio Button <FORM NAME=“frmName”>
<b>Radio Button</b> <BR> Do you wish to hear from us again. <BR> <b>Yes</b><input type=“radio" name=“items” value=“0” > <b>No</b><input type=“radio” name=“items” value=“1” > </FORM>

11 Checkbox ใช้ในกรณีที่ต้องการเลือกรายการที่กำหนดมากกว่าหนึ่งรายการ
Name จะต้องใช้ชื่อเดียวกันทั้ง group <input type=“checkbox” value=“html” name=“pre”>

12 Check Box <FORM NAME=“frmName” METHOD=“GET”>
<b>CHECKBOXES</b> <BR> List your preferences<BR> Tick all that apply)<BR><BR> HTML <input type=“checkBox” name=“items” value=“0”> <BR> JAVA <input type=“checkBox” name=“items” value=“1”> <BR> MySql <input type=“checkBox” name=“items” value=“2”><BR> JDBC <input type=“checkBox” name=“items” value=“3”> </FORM>

13 Select Used for drop down lists <select name=“s1”>
<option value=“1”>Dublin South</option> <option value=“2”>Dublin North</option> <option value=“3”>Co. Dublin</option> <option value=“4”>Culchie</option> </select>

14 Text Area <FORM NAME="frmName> First Name:<INPUT TYPE="TEXT" NAME="fName"> <br> Middle Name:<INPUT TYPE="TEXT" NAME="mName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address : <TEXTAREA COLS=“80” ROWS=“5” NAME=“Addr”> </TEXTAREA><br> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="Clear"> </FORM>

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

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

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

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

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

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

21 index.aspx <HTML><BODY>
<FORM NAME="frmName" Method="Get" Action=“page2.aspx"> First Name:<INPUT TYPE="TEXT" NAME="fName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address:<textarea name="addr" cols="50" rows="5"></textarea> <br> Do you like computer ?.<BR> <input type="radio" name="radio1" value="0"><b>Yes</b><BR> <input type="radio" name="radio1" value="1" ><b>No</b><BR> You can program : <BR> <input type="checkBox" name="items" value="HTML">HTML<BR> <input type="checkBox" name="items" value="JAVA">JAVA<BR> <input type="checkBox" name="items" value="ASP">ASP<BR> <input type="checkBox" name="items" value="VB">VB<BR> City : <select name="select1"> <option value="USA">America</option> <option value="ENG">England</option> <option value="THA">Thailand</option> </select><BR><BR> <INPUT TYPE=SUBMIT VALUE=" OK "> <INPUT TYPE=RESET VALUE=" Clear "> </FORM></BODY></HTML>

22 index.aspx

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

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

25 example3.aspx <HTML><BODY>
<FORM NAME="frmName" Method=“Post" Action="example4.aspx"> First Name:<INPUT TYPE="TEXT" NAME="fName"><br> Last Name:<INPUT TYPE="TEXT" NAME="lName"><br> Address:<TEXTAREA COLS="30" ROWS="5" NAME="Addr"> </TEXTAREA><br> Do you like computer ?.<BR> <input type="radio" name="radio1" value="0"><b>Yes</b><BR> <input type="radio" name="radio1" value="1" ><b>No</b><BR> You can program : <BR> <input type="checkBox" name="items" value="HTML">HTML<BR> <input type="checkBox" name="items" value="JAVA">JAVA<BR> <input type="checkBox" name="items" value="ASP">ASP<BR> <input type="checkBox" name="items" value="VB">VB<BR> City : <select name="select1"> <option value="USA">America</option> <option value="ENG">England</option> <option value="THA">Thailand</option> </select><BR><BR> <INPUT TYPE=SUBMIT VALUE=" OK "> <INPUT TYPE=RESET VALUE=" Clear "> </FORM></BODY></HTML>

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

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

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

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

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

31 Q&A