บทที่ 3 : ทบทวน HTML Form - wathinee . reru . ac . th
Download
Report
Transcript บทที่ 3 : ทบทวน HTML Form - wathinee . reru . ac . th
[email protected]
บทที่ 2
JSP ตอนที่ 2
ตรวจสอบความพร้อมก่อนเรี ยน
J2SE (Set Environment ให้เรี ยบร้อย)
Tomcat (Start Service ให้เรี ยบร้อย)
เปิ ด home ของ tomcat
C:\Program Files\Apache Software Foundation\Tomcat 6.0
รู้ จกั กับ Web Application
สร้าง Web application ขึ้นใช้งานเอง
จากชัว่ โมงก่อนเราสร้างไว้ท้ งั หมดไว้ที่ default web application
(Root) ซึ่งไม่ค่อยเหมาะสมนักเพราะถ้าเราพัฒนา web application ขึ้นมา
หลายตัว จะมีไฟล์จานวนมาก และเมื่อนามาวางรวมกันทาให้สบั สนว่าไฟล์
ไหนเป็ นของ Project ใด ดังนั้นเราจะสร้าง Web application ขึ้นมาใหม่
เฉพาะสาหรับ Project ที่เราจะพัฒนา ขั้นตอนดังนี้
โครงสร้างของ Tomcat
Bin:เป็ น binary file เราสามารถ start ,shutdown Tomcat
ผ่าน batch file ที่น้ ีได้
Conf: ประกอบด้วยไฟล์ XML ซึ่งตั้งค่า config ต่าง ๆ ไฟล์ที่
สาคัญคือ server.xml เป็ นไฟล์หลัก(เราสามารถเปลี่ยน port
ที่น้ ีได้)
lib: เก็บ jar file(รวม .class ต่าง ๆ เข้าไว้ดว้ ยกัน)ใช้สาหรับ
การทางานของ tomcat
logs: เก็บ text file เป็ นรายละเอียดการทางานต่าง ๆของ
tomcat (เราเรี ยกว่า log file)
Work : tomcat จะเก็บ .java .class ที่
web container สร้างขึ้นไว้ที่น้ ี
webapps: เราพัฒนา web application ที่น้ ี
สร้าง Web application ขึ้นใช้งานเอง (ต่อ)
1. ไปที่ C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps
แล้วสร้าง directory ชื่อ mywebapps
สร้าง Web application ขึ้นใช้งานเอง (ต่อ)
2. สร้าง Directory “WEB-INF” ขั้นใน C:\Program Files\Apache Software
Foundation\Tomcat 6.0\webapps\mywebapps
3. Copy ไฟล์ web.xml จาก C:\Program Files\Apache Software
Foundation\Tomcat 6.0\webapps\ROOT\WEB-INF\web.xml
มาไว้ที่ C:\Program Files\Apache Software Foundation\Tomcat
6.0\webapps\mywebapps\WEB-INF\
** web.xml : Deployment Descriptor หรื อ DD
ทดสอบ
4. สร้างไฟล์ TestTomcat.jsp ไว้ที่ C:\Program Files\Apache Software
Foundation\Tomcat 6.0\webapps\mywebapps
<html>
<body>
<%
out.println(“ Hi! My Web Application ”);
%>
</body>
</html>
ทดสอบ
เปิ ด browser แล้วพิมพ์
http://localhost:8080/mywebapps/TestTomcat.jsp
จะได้ผลดังภาพ
Servlet ของ Web Application ของเราถูกเก็บที่ ?
C:\Program Files\Apache Software Foundation\Tomcat 6.0\work\Catalina\localhost\mywebapps\org\apache\jsp
Work : tomcat จะเก็บ .java .class ที่
web container สร้างขึ้นไว้ที่น้ ี
ทาความรู้จกั กับ Context Path
หาก web application เป็ น directory อื่นที่ไม่ใช่ Root เราต้องระบุ
context path ลงใน URL ด้วย
แสดงตัวอย่าง URL สาหรับการเรี ยกrun ไฟล์ JSP ที่ถูก
เก็บอยูใ่ น directory ต่าง ๆของ Tomcat
Directoryของ Tomcat
Context path
C:\Program Files\Apache Software
Foundation\Tomcat
6.0\webapps\ROOT\Test.jsp
-
C:\Program Files\Apache Software
Foundation\Tomcat
6.0\webapps\jspSource\Test.jsp
C:\Program Files\Apache Software
Foundation\Tomcat
6.0\webapps\ROOT\Welcome.jsp
C:\Program Files\Apache Software
Foundation\Tomcat
6.0\webapps\myjsp\Test.jsp
/jspSource
URL
http://localhost/Test.jsp
http://localhost/jspSource/Test.jsp
-
http://localhost/Welcome.jsp
/myjsp
http://localhost/myjsp/Test.jsp
Note:
หากเก็บไฟล์ JSP ชื่อ Test.jsp ไว้ที่ web application Root จะต้องไม่เรี ยก
รัน JSP ด้วย http://localhost/ROOT/Test.jsp เด็ดขาด อย่าลืมว่าไม่มี context
path สาหรับ web application ROOT
JSP กับการรับข้ อมูลจาก HTML Form มาประมวลผล
รู้จกั กับ HTML Form
Html Form คือ แบบฟอร์ม ที่เราสามารถป้ อนข้อมูลต่าง ๆ ลงไปเพื่อส่ งข้อมูล
เหล่านี้ไปประมวลผลยัง JSP
Code การเขียน Html Form
สร้างไฟล์ Html ชื่อ Form1.html
หลากหลายวิธีการรับข้อมูล Input
การรับข้อมูลจากผูใ้ ช้จะต้องใช้สิ่งที่เรี ยกว่า input element ของภาษา html
ซึ่งมีอยูห่ ลายรู ปแบบ ตัวอย่างดังนี้
รับข้อมูลด้วย: Textbox
Textbox element คือ ช่องที่สามารถกรอกข้อมูลได้เพียง 1 บรรทัดเท่านั้น
รู ปแบบ <input type=“text” name=“ชื่อของช่อง textbox”
value=“ค่าเริ่ มต้นของช่อง textbox”
size=“ขนาดความยาวของช่อง textbox”
maxlength=“จานวนตัวอักษรมากสุ ดที่สามารถรับได้”>
ตัวอย่าง
<input type=“text” name=“username” value=“admin” size=“30”
maxlength=“6”>
** กาหนด input รหัส ให้กาหนด type เป็ น password
Code การเขียน textbox
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
** value,size และ maxlength ก็ได้ สามารถระบุเพียงแค่
<input type=“password” name=“passwd”> เท่านี้กไ็ ด้
แสดงผล
รับข้อมูลด้วย radio element
เป็ นช่องที่สามารถเลือกได้เพียง 1 รายการ โดยหากต้องการเลือกรายการใดให้
คลิกเมาส์ที่ช่องวงกลมด้านหน้ารายการนั้น
รู ปแบบ
<input type=“radio” name=“ชื่อของ radio”
value=“ค่าที่กาหนดให้ radio”
checked>
ตัวอย่าง
<input type=“radio” name=“myradio” value=“red”> red
<input type=“radio” name=“myradio” value=“green” checked> green
Code การเขียน radio
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
** เนื่องจาก radio เป็ นช่องที่สามารถเลือกได้เพียงรายการเดียวเท่านั้น ดังนั้น
ค่า ที่ checked จึงมีได้เพียงค่าเดียวในตอนเริ่ มต้น
แสดงผล
รับข้อมูลด้วย checkbox
checkbox เป็ นช่องที่สามารถเลือกได้มากกว่า 1 รายการ โดยหากต้องการเลือก
รายการใด ให้คลิกเมาส์ที่ช่องสี่ เหลี่ยมด้านหน้ารายการนั้น
รู ปแบบ
<input type=“checkbox” name=“ชื่อของ checkbox”
value=“ค่าที่จะกาหนดให้ checkbox”
checked>
Code การเขียน checkbox
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
แสดงผล
รับข้อมูลด้วย listbox element
เป็ นlist รายการในลักษณะเมนู
รู ปแบบ
<select name=“ชื่อของ list box” size=“จานวนแถว ของ listbox” multiple>
<option value=“ค่าของตัวเลือกที่ 1”> ข้อความแสดงตัวเลือกที่ 1
<option value=“ค่าของตัวเลือกที่ 2”> ข้อความแสดงตัวเลือกที่ 2
……
<option value=“ค่าของตัวเลือกที่ n”> ข้อความแสดงตัวเลือกที่ n>
</select>
**โดยปกติเลือกได้ 1 รายการแต่ถา้ ระบุ muliple จะทาให้เลือกได้มากกว่า1รายการ
รับข้อมูลด้วย listbox element
ถ้าไม่กาหนด size และ multiple จะทาให้ list box มีหน้าตาแบบนี้
ถ้าไม่กาหนด multiple จะทาให้ list box มีหน้าตาแบบนี้
Code การเขียน listbox element
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
แสดงผล
รับข้อมูลด้วย textarea element
เป็ นช่องที่สามารถกรอกข้อมูลได้หลายบรรทัด
รู ปแบบ
<textarea name=“ชื่อของ textarea”
rows=“จานวนแถวของ textarea”
cols=“จานวนคอลัมน์ของ textarea”>
</textarea>
Code การเขียน textarea element
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
แสดงผล
ส่ งข้อมูลด้วย submit element
เป็ นปุ่ มสาหรับส่ งข้อมูล เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่กรอกหรื อเลือกไป จะถู
ส่ งไปประมวลผลยังไฟล์ JSP ที่ระบุ (ระบุในส่ วน form)
รู ปแบบ
<input type=“submit” value=“ข้อความที่แสดงบนปุ่ ม submit”>
ตัวอย่าง
<input type="submit" value=“sent”>
เคลียร์ขอ้ มูลที่กรอกหรื อเลือกไป
reset element
เป็ นปุ่ มสาหรับเคลียร์ขอ้ มูลในฟอร์ม เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่ได้กรอกหรื อ
เลือกไปจะถูกเคลียร์ เหมือนไม่ได้กรอกหรื อเลือกค่าใดๆ มาก่อน
รู ปแบบ
<input type=“reset” value=“ข้อความที่แสดงบนปุ่ ม reset”>
ตัวอย่าง
<input type=“reset" value=“clear”>
Code การเขียน submit และ reset element
เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
ทดสอบ http://localhost:8080/mywebapps/Form1.html
เราสามารถจัดความสวยงามได้ดว้ ย table
<table border=“กาหนดขนาดขอบขอบตาราง”>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
</table
ทดสอบ
ส่ งข้อมูลจาก html form ไปประมวลผลที่ JSP
รู ปแบบ
<Form action=“ชื่อไฟล์ jsp ที่จะส่ งข้อมูลไปประมวลผล” method=“POST”>
กาหนดรายละเอียดต่าง ๆ
</Form>
ตัวอย่าง
<Form action=“RetrieveDataForm1.jsp” method=“POST”>
….
</Form>
**หมายถึง เมื่อคลิกปุ่ ม submit ข้อมูลจะส่ งไปยัง ไฟล์ที่ระบุใน action เพื่อไป
ประมวลผล
เพิม่ เติม code ที่ Form ไฟล์ Form1.html
สร้างไฟล์ JSP เพื่อรับค่าจาก Form
สร้างไฟล์ชื่อ RetrieveDataForm1.jsp
ข้อมูล name ของ element
JSP กับวิธีการรับข้อมูล จาก Input box
รู ปแบบ
request.getParameter(“ชื่อของ element”)
ตัวอย่าง
request.getParameter(“username”)
Code รับข้อมูลจาก input box
ทดสอบ ระบุขอ้ มูลที่ username แล้วคลิก Submit
เพิ่มเติม code รับข้อมูลทุก element
แสดงผล http://localhost:8080/mywebapps/Form1.html
** สังเกตว่า check box get ได้แค่ 1 ค่า
JSP กับวิธีการรับข้อมูล จาก checkbox element
การรับข้อมูลจาก textbox ,password,radio,textarea และ listbox นั้น
สามารถรับข้อมูลด้วย request.getParameter(“ชื่อ element”); ได้ตามปกติ
เพราะ element เหล้านี้มีได้เพียง 1 ค่าเท่านั้น แต่สาหรับ checkbox element
รวมทั้ง listbox ที่มีการระบุ multiple สามารถมีได้มากกว่า 1 ค่า
รู ปแบบ
request.getParameterValues(“ชื่อ element”)
ซึ่งจะได้ค่าออกมาเป็ น array ของ String
JSP กับวิธีการรับข้อมูล จาก checkbox element
รู ปแบบ
request.getParameterValues(“ชื่อ element”)
ซึ่งจะได้ค่าออกมาเป็ น array ของ String
ขั้นตอน
1. สร้างตัว แปร array ของ String มารับค่าดังกล่าว
2. นาตัวแปรนี้ ไปวนลูปเพื่อดึงค่า แต่ละของ element
JSP กับวิธีการรับข้อมูล จาก checkbox element
ขั้นตอน
1. สร้างตัว แปร array ของ String มารับค่าดังกล่าว
2. นาตัวแปรนี้ ไปวนลูปเพื่อดึงค่า แต่ละของ element
รู ปแบบ
String[] colors=request.getParameterValues(“color”);
for(int i=0; i<colors.length;i++){
out.print(colors[i]);
}
Code รับข้อมูลจาก checkbox หรื อ element ที่ส่งมา
มากกว่า 1 ค่าเช่น listbox แบบ multiple
ทดสอบ
เพิม่ เติม ในกรณี ไม่ได้เลือกค่าใดใน checkbox
<%
String[] colors=request.getParameterValues("color");
if(colors==null){
out.print("ไม่มีสีที่ชอบ");
}else{
for(int i=0; i<colors.length;i++){
out.print(colors[i]);
}
}
%>
code
ทดสอบ http://localhost:8080/mywebapps/Form1.html
การดึงชื่อของ element ทั้งหมด
จากหัวข้อที่ผา่ นมาต้องมาจาว่า element อะไรชื่ออะไรคงจะลาบาก
หัวข้อนี้ขอแนะนา
request.getParameterNames()
1.
2.
เป็ นการดึงชื่อของ element ที่มีอยูท่ ้ งั หมดมาก่อน
แล้วจึงนาชื่อที่ได้มาดึงค่าอีกที
Request.getParameterNames()
รู ปแบบ
java.util.Enumeration ตัวแปรที่จะเก็บชื่อ element ทั้งหมด = request.getParameterNames();
ตัวอย่าง
java.util.Enumeration paramNames= request.getParameterNames();
method : hasMoreElements()
จะทาการตรวจสอบตัวแปร paramNames ว่ายังมีชื่อของ
element อีกหรื อไม่ ถ้าไม่มีแล้วก็จะจบการทางานของลูป
while แต่ถา้ ยังมีกจ็ ะเข้าไปทางานตามคาสัง่ ในลูป while
หลักการดึงค่าของแต่ละ element ออกมาจาก ตัวแปร
<%
while(paramNames.hasMoreElements()) {
String paramName=(String)paraNames.nextElement();
paraName.nextElement()
เป็ นการดึงชื่อของ element ออกมาเก็บไว้ในตัวแปร
paramName โดยรอบที่ 1 จะดึงชื่อของ element ตัวที่ 1
รอบที่ 2 ดึง element ตัวที่ 2 … ทาไปเรื่ อยๆจนหมด
out.print(request.getParameter(paraName));
}
%>
เมื่อเราได้ ชื่อ element แต่ละรอบ ก็นาชื่อ element นั้น ๆ
มาดึงค่าของ element ตามคาสัง่ ที่เราเคยใช้
Request.getParameter(“ชื่อ element”);
1 สร้างไฟล์ RetrieveDataForm2.jsp
2 แก้ไขชื่อไฟล์ Form1.jsp ให้ action Form ส่ งมาที่
RetrieveDataForm2.jsp
3 ทดสอบ http://localhost:8080/mywebapps/Form1.html
การบ้าน
สร้างไฟล์ .jsp ตามที่สงั่ งาน ในห้องเรี ยน