PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … ·...
Transcript of PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … ·...
![Page 1: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/1.jpg)
www . i t s c i .m ju . ac . t h / sayan
PROCESSING THE CLIENT REQUEST
SAYAN UNANKARD1/2562
2
![Page 2: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/2.jpg)
FORM ATTRIBUTES
ถกออกแบบมาพอใหสามารถสง input จาก client ไปยง server
ประกอบไปดวยสอง attributes หลก
• Action: เปนคอมโพเนนททางดาน server side ทเกยวของเมอ form ถก submit
• Method: เปนเมธอดทใชเกยวกบ form โดยปกตจะใช GET หรอ POST
GET & POST: สงขอมลใน URL
<input> tag ใชส าหรบการรบขอมล
2
![Page 3: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/3.jpg)
COLLECTING INFORMATION
form ท าหนาทใหบรการในรปของ container ทเกบ controls ตาง ๆ เชน text fields, labels, buttons, และ images
Form tags:
<FORM NAME="frmName" ACTION="Filename" METHOD="GET">
<!--form elements go inside of form tags -->
</FORM>
3
![Page 4: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/4.jpg)
CONTROL ELEMENTS’ ATTRIBUTES
TYPE: ใชส าหรบการระบ input type
NAME: แตละ control ภายใน form จะตองม NAME ขอมลทถกน าเขาโดยผใชจะถกรบเขามาโดยการอางถงชอของ control field แตหากไมม name ขอมลจะไมสามารถรบไดโดย control field
VALUE: คา default value อาจถกก าหนดใหแก control element
ACTION: ใชส าหรบระบปลายทางของ Web page หรอ agent ท form ถกโปรเซส
METHOD: ระบวธการสง form ไปยง Web server ไมวาจะเปน POST หรอ GET
4
![Page 5: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/5.jpg)
A TEXT INPUT WITH DEFAULT VALUE
• input fields ทอยภายใน form จะถกเรยกวา controls และบอยครงจะถกใชรวมกบ<INPUT> tag
<FORM><INPUT TYPE ="TEXT" NAME="txtField" VALUE="This is the default text">
</FORM>
5
![Page 6: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/6.jpg)
TEXT
สองเมธอดหลกทใชในการรบขอมลแบบ text<input type=“text” name=“t1”>
• โดยปกตจะเปนขอความเพยงหนงบรรทด
• สามารถก าหนด size attribute เพอควบคมความยาวของ textbox
<textarea name=“t2”></textarea>
• ใชในกรณทตองการแสดงขอความมากกวาหนงบรรทด
• สามารถก าหนด cols attribute ภายใน textarea
• สามารถก าหนด rows attribute ภายใน textarea
6
![Page 7: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/7.jpg)
ความแตกตางระหวาง GET & POST
ในทางเทคนคแลว HTML specifications ไดก าหนดความแตกตางระหวาง "GET" และ "POST" ไว โดยเมธอด GET จะหมายถงขอมลจาก form จะถก encoded (โดย browser) ภายใน URLในขณะทเมธอด POST จะหมายถงขอมลภายใน form จะปรากฏภายใน message body
แต specifications ไดแนะน าการใชงานของเมธอด "GET" ไวใหใชส าหรบการรบคาขอมลของ form ในขณะท POST จะใชงานไดทกประเภท ไมวาจะเปนการจดเกบขอมล การ update ขอมล หรอการสง E-mail ได
หากขอมลอยในรปของ non-ascii การใชเมธอด GET อาจกอใหเกดปญหาทเกยวกบความถกตองของขอมลในการสงไปยง Server ได
7
![Page 8: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/8.jpg)
<FORM NAME="frmName" ACTION="Hello.jsp" METHOD="POST">
Your First Name:<INPUT TYPE ="TEXT" NAME="firstName"><br>
Your Middle Name:<INPUT TYPE ="TEXT" NAME="middleName"><br>
Your Last Name:<INPUT TYPE ="TEXT" NAME="lastName">
</FORM>
FORM ELEMENTS EXAMPLE
8
![Page 9: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/9.jpg)
SUBMITTING FORM FOR PROCESSING
เมอตองการโปรเซสขอมลใน form จ าเปนจะตอง submit form ไปยงเซรฟเวอร และจากนนจะเปนการรบและโปรเซสขอมลทเซรฟเวอร
ในการ submit form เมธอด submit() ภายใน form จะตองถกเรยกใชดงน
• ใช Submit button
• ถกเรยกใชจากเมธอด submit() ภายใน form
9
![Page 10: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/10.jpg)
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”>
10
![Page 11: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/11.jpg)
USING SUBMIT BUTTON
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">Your First Name:<INPUT TYPE ="TEXT" NAME="firstName"><br>
Your Middle Name:<INPUT TYPE ="TEXT" NAME="middleName"><br>
Your Last Name:<INPUT TYPE ="TEXT" NAME="lastName"><br>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
11
![Page 12: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/12.jpg)
SUBMIT BUTTON
12
![Page 13: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/13.jpg)
RADIO BUTTONS
ใชในกรณทมทางเลอกหลายทางแตสามารถเลอกไดเพยงทางเดยว
การใชงานสามารถท าไดโดยการคลกเมาสทต าแหนงของ radio ทตองการ
<input type=“radio” name=“card” value=“visa”>
Name จะตองใชชอเดยวกนทง group
13
![Page 14: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/14.jpg)
RADIO BUTTON
<FORM NAME="frmName" METHOD="GET"><b>Radio Button</b> <BR>
Do you wish to hear from us again. <BR><BR>
<b>Yes</b> <input type="radio" name=items value=“0” ><BR>
<b>No</b> <input type="radio" name=items value=“1” ><BR>
</FORM>
14
![Page 15: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/15.jpg)
CHECKBOX
ใชในกรณทตองการเลอกรายการทก าหนดมากกวาหนงรายการ โดยมรปแบบดงน
<input type=“checkbox” value=“html” name=“pre”>
Name จะตองใชชอเดยวกนทง group
15
![Page 16: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/16.jpg)
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>
16
![Page 17: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/17.jpg)
SELECTION
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>
17
![Page 18: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/18.jpg)
EXPLICITLY CALL THE SUBMIT METHOD
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="POST">
Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>
Your Mid Name:<INPUT TYPE = "TEXT" NAME="midName"><br>
Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>
<INPUT TYPE=BUTTON VALUE="Submit" onclick=“validateForm()”>
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
หมายเหต การใช TYPE=BUTTON จะยอมใหมการเรยกใชเมธอด validateForm() ซงใชส าหรบ
การ validates ขอมลจากผใช หากขอมลถกตองจะเรยกใชเมธอด
document.frmName.submit() หรอท าการแสดงผลซ าเพอใหผใชแกไข18
![Page 19: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/19.jpg)
GET METHOD
Form data ทถกระบตอทาย URL ทตองการหลงเครองหมาย ? (question mark)
URL เปนเพยงคาเดยวทถกระบในรปคาของ ACTION ภายในฟอรม
หากไมไดมการก าหนด explicitly METHOD attribute ไวส าหรบ form โดย default แลว form จะถกสงไปโดยใชเมธอด GET
19
![Page 20: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/20.jpg)
GET METHOD
<FORM NAME="frmName" ACTION="getUserName.jsp" METHOD="GET">
Your First Name:<INPUT TYPE = "TEXT" NAME="firstName"><br>
Your Mid Name:<INPUT TYPE = "TEXT" NAME= "midName"><br>
Your Last Name:<INPUT TYPE = "TEXT" NAME="lastName"><br>
<INPUT TYPE=SUBMIT VALUE="Submit">
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
20
![Page 21: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/21.jpg)
SUBMIT A FORM WITH THE GET METHOD
21
![Page 22: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/22.jpg)
การสงคาจะตอจากเครองหมาย ? โดยระบชอตวแปร=คาทตองการ ตวแปรถดไปคนดวยเครองหมาย &
GET USER INFORMATION
22
![Page 23: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/23.jpg)
POST METHOD
• เมอใชเมธอด POST ขอมลใน form element จะถกสงไปยงเซรฟเวอรในรปของ transaction message body
• เมธอด POST จะแตกตางจากเมธอด GET ตรงทไมมการ append ขอมลใน form element ไปยง URL
• หมายเหต เมอใชเมธอด POST ในกรณทจ าเปนอาจสราง query string โดยแนบไปกบ URL ของ ACTION attribute ไดโดยตรง
<Form name="frmName" Action="getText.jsp?action=update">
23
![Page 24: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/24.jpg)
หลงจาก submit form ขอมลจะสงผาน URL แสดง query string
POST METHOD
24
![Page 25: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/25.jpg)
THE IMPLICIT OBJECTS
ในการโปรเซส client request Web server จะตองประมวลผลตามขนตอนดงตอไปน : 1. รบคาขอมลทเกยวของกบ request
2. โปรเซสขอมล
3. สง output ไปยง client
เมอใช scripting elements ใน JSP page จะมจ านวน objects ทถกเตรยมพรอมไวโดย JSP container ซงออปเจคเหลานนจะถกเรยกวา implicit objects ทงนเนองจากผใชสามารถน าไปใชโดยไมตองมการประกาศตวแปรออปเจคไวใน page
25
![Page 26: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/26.jpg)
THE IMPLICIT OBJECTS
implicit objects ถกก าหนดไวใชส าหรบการท างานโดย JSP container
โดยสามารถน าไปใชไดทนทโดยไมตองมการประกาศ
เปน instances ของคลาสทถกก าหนดไวโดย servlet และ JSP specifications
น าไปใชไดเฉพาะภายใน scriptlets หรอ expressions ไมสามารถใชไดในสวนของ declarations
Implicit objects ไมสามารถใชไดกบ directives เชน “page” directive.
เนองจาก JSP pages ใชเทคโนโลยของ servlet ดงนน implicit objects จะถกสบทอดมาจากคลาสซงเปนสวนหนงของ servlet packages
26
![Page 27: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/27.jpg)
SERVLET CLASS HIERARCHY
27
![Page 28: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/28.jpg)
IMPLICIT OBJECTS
Object Class
application javax.servlet.ServletContextconfig javax.servlet.ServletConfigexception java.lang.Throwableout javax.servlet.jsp.JspWriterpage java.lang.Objectrequest javax.servlet.ServletRequestresponse javax.servlet.ServletResponsesession javax.servlet.http.HttpSession
28
![Page 29: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/29.jpg)
STORING FORM INFORMATION
ใช request ออปเจคในการรบขอมลจาก form
JSP ใชตวแปรในการจดเกบคาทตองการจาก form
ในการใชตวแปรจะตองท าการประกาศกอนเสมอ
ชอของตวแปรจะตองเปนไปตามทก าหนดไวในเงอนไขการตงชอของจาวา
• โดยสามารถเปนตวอกษร ตวเลข และเครองหมาย underscores
• ไมสามารถเรมตนดวยตวเลข
• โดยปกตจะเรมจากอกษรตวเลก และอกษรตวใหญตนค าถดไป
• เปนแบบ case sensitive
29
![Page 30: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/30.jpg)
REQUEST OBJECT
แตละครงทมการ request ไปยง JSPpage JSP container จะท าการสราง instance ใหมของrequest ออปเจค
• JSP container จะท าการสราง new instance จากคลาสjavax.servlet.http.HttpServletRequest
• โดยใชชอวา request และพรอมใชงานทนท
30
![Page 31: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/31.jpg)
REQUEST OBJECT
ออปเจคนจะประกอบไปดวยขอมลของการ request และ page ทเกยวของ
• headers
• client and server information
• request URL
• input data
• cookies
• session
31
![Page 32: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/32.jpg)
READING FORM DATA
ออปเจค request จะประกอบไปดวยสามเมธอดส าหรบการ extracting form ขอมล :
• getParameter() : ใชในการ retrieve คา form พารามเตอรเดยว
• getParameterValues() : ใชส าหรบ retrieve รายการคาของ form เชน รายการของcheckboxes ทถกเลอก
• getParameterNames() : ใชส าหรบการ retrieve รายละเอยดทสมบรณของพารามเตอรทกตวทถก submitted โดยผใช
32
![Page 33: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/33.jpg)
GETPARAMETER() METHOD
ใชส าหรบการอานคาพารามเตอรเดยวจาก form เมธอดจะคนคาทเปนไปไดดงน:
• String: เปนพารามเตอรของ form
• Empty String: มพารามเตอรแตไมมคา
• null: ไมมพารามเตอร
พงระลกไวเสมอวา form elements จะเปนแบบ case sensitive
request.getParameter(“elementName”)
elementName หมายถงชอของ textbox หรอ radio เปนตน
เชน request.getParameter(“fname”);
request.getParameter(“lname”);
33
![Page 34: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/34.jpg)
USING BASIC JSP TECHNIQUES
34
![Page 35: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/35.jpg)
<HTML><HEAD><TITLE>Sign-in sheet</TITLE></HEAD><BODY>
<table border=0><tr> <td colspan=2 align=center> <font color=blue size=6>
Sign-in Sheet Template for my Basic JSP Techniques Seminar </font><br><br> </td></tr>
<tr> <td align=right>Your Name:</td><td align=left><input name="name" size=25></td>
</tr><tr> <td align=right>Your Major:</td>
<td align=left><input name="major" size=25> </td>
</tr>
<tr>
<td align=right>Preferred Seminar Date:</td>
<td align=left><input name="date" size=25></td>
</tr>
EXAMPLE
35
![Page 36: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/36.jpg)
<tr>
<td colspan=2 align=center><input type="submit" value="Submit">
<input type= "reset">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
EXAMPLE (CONT)
36
![Page 37: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/37.jpg)
USING BASIC JSP TECHNIQUES
37
![Page 38: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/38.jpg)
<HTML><HEAD><TITLE>Sign-in sheet</TITLE></HEAD> <BODY>
<% String yourName = request.getParameter("name");
String yourMajor = request.getParameter("major");
String date = request.getParameter("date");
%>
Name: <%= yourName %><br>
Major: <%= yourMajor %><br>
Preferred Seminar Date: <%= date %><br><br>
Hello, <%= yourName %> : <br><br>
<font color=blue size = 5>Welcome to <font color=red>'JSP Basics'</font> Seminar</font> <br>
Please sign this sheet and bring it with you when you attend the seminar on <%= date %>. <br>
Your Signature: ______________
</BODY></HTML>
TEST1.JSP
38
![Page 39: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/39.jpg)
GETPARAMETERVALUES() METHOD
ใชส าหรบอานคาพารามเตอรหลาย ๆ ตวจาก form โดยใชชอเดยวกน
ตวอยางเชน รายการของ checkboxes ทมชอเดยวกน และตองการระบวาอนไหนทถกเลอก
เมธอดจะคนคาในรปของ Array ของ Strings
• หาก array ทประกอบไปดวย empty string หนงคาจะเปนการระบวามพารามเตอรแตไมมคา
• Null : เปนการระบวาไมมพารามเตอร
39
![Page 40: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/40.jpg)
GETPARAMETERVALUES() METHOD
ตวอยางหนาจอ
เลอกความถนด <BR>(เลอกไดมากกวา 1 รายการ) :
<input type="checkBox" name="citems" value="HTML">HTML<BR>
<input type="checkBox" name="citems" value="JAVA">JAVA<BR>
<input type="checkBox" name="citems" value="MySQL">MySql<BR>
<input type="checkBox" name="citems" value="JDBC">JDBC <BR>
การรบคา
String[] chkitems = request.getParameterValues("citems");
การแสดงผล
ความถนด : <% for(int i=0;i< chkitems.length;i++) { %>
<%= chkitems[i] %>,
<% } %>
40
![Page 41: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/41.jpg)
GETPARAMETERNAMES() METHOD
คนคาในรปของ Enumeration ออปเจค
โดยการอานคาของ enumeration ออปเจคจะสามารถอานชอของพารามเตอรทกตวทอยใน form แลวถกสงไปยง servlet ได
หมายเหต Servlet API จะไมไดท าการระบล าดบชอของพารามเตอรทปรากฏ
41
![Page 42: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/42.jpg)
JSP PAGE
42
![Page 43: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/43.jpg)
<HTML><HEAD><TITLE>Dynamic Form</TITLE></HEAD><BODY>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR> <TD> FirstName: </TD><TD><INPUT TYPE=TEXT NAME=FirstName></TD> </TR>
<TR> <TD> LastName: </TD><TD> <INPUT TYPE=TEXT NAME=LastName></TD> </TR>
<TR> <TD> Address: </TD><TD><INPUT TYPE=TEXT NAME=Address></TD> </TR>
<TR> <TD> City: </TD><TD> <INPUT TYPE=TEXT NAME=City> </TD> </TR>
<TR> <TD> Zip: </TD><TD> <INPUT TYPE=TEXT NAME=Zip> </TD> </TR>
<TR> <TD> </TD><TD> <INPUT TYPE=SUBMIT VALUE="SUBMIT"> </TD> </TR>
</TABLE></BODY>
</HTML>
CONVERSION TO CODE : TEST2.JSP
43
![Page 44: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/44.jpg)
CONVERSION TO CODE USING ARRAY : TEST2_1.JSP
<HTML><HTML><HEAD><TITLE>Dynamic Form</TITLE></HEAD><BODY><FORM ACTION="Test3.jsp" METHOD="GET"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><% String[] textFields = {"FirstName","LastName","Address","City","Zip”};
for(int j=0; j<textFields.length; j++){ %><TR><TD> <%=textFields[j]%> : </TD>
<TD><INPUT TYPE=TEXT NAME=<%=textFields[j]%>> </TD></TR>
<%}%>
</TABLE><INPUT TYPE=SUBMIT VALUE=SUBMIT></FORM></BODY></HTML>
44
![Page 45: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/45.jpg)
JSP PAGE
45
![Page 46: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/46.jpg)
EXAMPLE JSP PAGE : TEST3.JSP
<HTML><BODY><B>Form Content</B><BR><TABLE BORDER = 1 CELLSPACING=0 CELLPADDING=0>
<% java.util.Enumeration param = request.getParameterNames();while(param.hasMoreElements()){
String paramName =(String) param.nextElement();String paramValue = request.getParameter(paramName);
%><TR>
<TD><%=paramName%></TD><TD><%=paramValue%></TD>
</TR>
<% } %>
</TABLE>
</BODY>
</HTML>
46
![Page 47: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/47.jpg)
JSP PAGE
47
![Page 48: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/48.jpg)
HEADER INFORMATION
HTTP requests สามารถมจ านวน HTTP headers ทเกยวของ
headers เหลานไดจดเตรยมขอมลพเศษทเกยวของกบ request ไว
ผใชสามารถใชขอมลเกยวกบ header ในการ customize คา content ทสงไปยง client
48
![Page 49: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/49.jpg)
GETTING HEADER INFORMATION
ประกอบไปดวยสองเมธอด :request.getHeader(“header name”);
• คนคา string ทมคาของ header name
• ท างานเชนเดยวกบ request.getParameter()
• ยกเวน header names จะไมไดเปน case sensitive
• ตวอยางเชน: request.getHeader(“accept-language”) เปนการระบภาษาทเปนdefault ทตดตงอยบน client machine
request.getHeaderNames();
• คนคา Enumeration ออปเจคทประกอบดวยขอมลเกยวกบ header ทงหมด
• ท างานเชนเดยวกบ request.getParameterNames()
49
![Page 50: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/50.jpg)
GETTING HEADER INFO : TEST4.JSP
<%@ page import="java.util.*" %><HTML><HEAD><TITLE>Header information</TITLE></HEAD><BODY><%
String action = request.getParameter("action");if (action !=null && action.equals("getHeader")) {
%><% Enumeration enu = request.getHeaderNames(); %><table border=1>
<tr>
<td align=center colspan=2>Get header information using the request object</td>
</tr>
<tr>
<td align=center>Header Name</td>
<td align=center>Header Value</td>
</tr>
50
![Page 51: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/51.jpg)
GETTING HEADER INFO – TEST4.JSP
<% while(enu.hasMoreElements()){
String headerName = (String) enu.nextElement();
%>
<tr>
<td> <%= headerName %> </td>
<td> <%= request.getHeader(headerName)%></td>
</tr>
<%}%>
</table>
<%} else{ %>
<a href="Test4.jsp?action=getHeader"> Request a page and display headers</a>
<% } %>
</BODY>
</HTML>
51
![Page 52: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/52.jpg)
HEADER INFORMATION
52
![Page 53: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/53.jpg)
GET CLIENT AND SERVER INFORMATION
เมธอดอนๆ ของ request ออปเจคจะใชส าหรบการหาคา• ชอของคอมพวเตอรของ Client:
<%= request.getRemoteHost() %>
• Client IP address:
<%= request.getRemoteAddr() %>
• ชอของ Web server:
<%= request.getServerName() %>
• หมายเลข port ของ Web server:
<%= request.getServerPort() %>
53
![Page 54: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/54.jpg)
GET CLIENT AND SERVER INFORMATION : TEST5.JSP
<HTML>
<HEAD><TITLE>Client/server information</TITLE></HEAD>
<BODY>
Client Information:<br><font face="Arial" size=1>
Your computer name: <%= request.getRemoteHost()%><br>
Your IP address: <%= request.getRemoteAddr() %></font><br>
The Web server information:<br><font face="Arial" size=1>
The web server name:<%= request.getServerName()%><br>
The running port number of the Web server:
<%= request.getServerPort()%></font>
</BODY>
</HTML>
54
![Page 55: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/55.jpg)
GET CLIENT AND SERVER INFORMATION : TEST5.JSP
55
![Page 56: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/56.jpg)
RESPONSE OBJECT
• ใชควบคม output ท server สงไปยง client
• เปน Instance จากคลาส javax.servlet.http.ServletResponse
• ถก import เขามาโดยอตโนมตเมอ JSP page ถกแปลงใหอยในรปของ servlet
• จดเตรยมเมธอดทสามารถใชไดใน JSP script เพอ set headers, add cookies, และควบคมวธการทขอมลถกสงกลบไปยง client
56
![Page 57: PROCESSING THE CLIENT SAYAN UNANKARD REQUEST 1/2562 … · การใช้งานสามารถท าได้โดยการคลิกเมาส์ที่ต าแหน่งของ](https://reader030.fdocuments.net/reader030/viewer/2022040308/5f0264377e708231d4040b8b/html5/thumbnails/57.jpg)
OUT OBJECT
การแสดงผลสามารถท าไดสองวธ ไดแก
<%= “message” %>
<% out.println(“message”); %>
out เปน implicit object
• เปน instance ของ javax.servlet.jsp.JspWriter
• เมธอดทส าคญสวนใหญจะไดแก print และ println
• หมายเหต: ออปเจค out จะถก close แบบอตโนมตเมอการโปรเซสเพจเสรจสมบรณ
57