51
3. คล๊ิกขวาท่ีโหนด ScopeDemo อกี ครง้ั
จากนนั้ เลือกคำส่งั New → Servlet
กำหนด Package = servlet , Class Name = SecondServlet แลว้ กด Finish
4. ในหน้าต่าง Editor เขียน Source code ของ SecondServlet.java ดัง Listing ท่ี 6.2 แลว้ Save
6.1.2 ขน้ั ตอนการทดสอบโปรแกรมเพือ่ สาธิตขอบเขตของ Object แบบ Request
เราสามารถทจ่ี ะทดสอบโปรแกรม ตามขั้นตอนดงั น้ี
1. ทำการ Deploy โปรเจ็ค ScopeDemo โดยคลิก๊ ขวาท่ี Apache Tomcat แลว้ Add and Remove Project เขา้ ไป
รปู ท่ี 6.1 การ Add Project เข้าสู่ Apache Tomcat หรือเรียกวา่ การ Deploy
2. ทำการ Run โปรเจ็ค ScopeDemo
3. ในโปรแกรม Web Browser เลอื ก URL ทช่ี ื่อ http://localhost:8080/ScopeDemo/FirstServlet สงั เกตุผลลพั ธ์
4. ทดลองรัน URL ทีช่ ่อื http://localhost:8080/ScopeDemo/SecondServlet โดยตรง แลว้ สังเกตผลลัพธ์อกี ครั้ง
จะเหน็ ว่า คา่ ที่แสดงเป็น null ท้งั น้ีเน่อื งจากโปรแกรมไมไ่ ดม้ กี ารส่ง request มาจาก FirstServlet
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
52
6.2 การพัฒนาโปรแกรมเพ่อื สาธิตขอบเขตของ Object แบบ Session
ขอบเขตการใชง้ านของออปเจ็คแบบ Request จะส่งผ่านคา่ ของออปเจค็ ตาม request ของ URL ท้งั น้ีไม่
สามารถทจ่ี ะใชง้ านได้โดยการเรียก URL นั้นโดยไมม่ ีการส่ง request มาดงั แสดงในขนั้ ตอนทีผ่ ่านมา เราสามารถท่ีจะ
กำหนดขอบเขตของการใชง้ านของออปเจ็ค ให้ใชง้ านผ่านใน session ของ Web Browser ได้ (ตราบเท่าที่ Browser ยัง
ใช้ session นนั้ อย)ู่ โดยการกำหนด Attribute ลงในออปเจ็คชนดิ HttpSession ซึง่ จะเปน็ ออปเจค็ ทเ่ี กบ็ ข้อมลู
session ของ Web Browser อาทิเช่นเก็บค่าของตัวแปร String ชอื่ ว่า name ไว้ใน attribute ของ session ที่ชือ่
SessionName โดยมรี ปู แบบคำส่งั ดงั น้ี
String name = "Thanisa";
HttpSession session = request.getSession();
session.setAttribute("SessionName", name);
โปรแกรม Java Servlet อนื่ ๆสามารถที่จะเรยี กใช้ attribute ของ Session ทีช่ ื่อ SessionName และดึงคา่ ของ
ตวั แปร name ออกมาได้ โดยใช้คำสัง่ getAttribute() เพอ่ื เรยี กค่าจาก Session โดยมรี ูปแบบดังน้ี
HttpSession session = request.getSession();
String name = (String) session.getAttribute("SessionName");
ในขนั้ ตอนน้ีจะเปน็ การพฒั นาโปรแกรมเพอ่ื สาธิตการทำงานของขอบเขตการทำงานของ Object แบบ
session โดยการพฒั นาโปรแกรม Servlet ขึน้ มาสองโปรแกรมคือ FirstSessionServlet ทีจ่ ะใช้ในการส่งออปเจ็คซง่ึ มี
source code ตาม Listing ท่ี 6.3 และ โปรแกรม SecondSessionServlet ที่จะใช่ในการอ่านคา่ ของออปเจ็คท่สี ่งออกมา
แล้วนำมาแสดงผล ซง่ึ มี source code ตาม Listing ที่ 6.4
Listing ที่ 6.3 โปรแกรม FirstSessionServlet.java
package servlet;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstSessionServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String name = "Thanisa";
HttpSession session = request.getSession();
session.setAttribute("SessionName", name);
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
53
}
public String getServletInfo() {
return "Short description";
}
}
Listing ท่ี 6.4 โปรแกรม SecondSessionServlet.java
package servlet;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SecondSessionServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
HttpSession session = request.getSession();
String name = (String) session.getAttribute("SessionName");
out.println(name);
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
54
6.2.1 ข้ันตอนการพัฒนาโปรแกรมเพอ่ื สาธติ ขอบเขตของ Object แบบ Session
เราสามารถท่ีจะพฒั นาโปรแกรม ตามข้ันตอนดังนี้
1. เลือกเมนู File → New แลว้ เลอื ก Dynamic Web Application
กำหนด Project Name = ScopeDemo
2. คลิ๊กขวาท่โี หนด ScopeDemo จากน้ันเลอื กคำสั่ง New → Servlet
กำหนด Package = servlet , Class Name = FirstServlet แลว้ กด Finish
3. ในหนา้ ตา่ ง Editor เขียน Source code ของ FirstSessionServlet.java ดัง Listing ท่ี 6.3 แลว้ Save
4. คลกิ๊ ขวาทีโ่ หนด ScopeDemo อีกครง้ั
จากนน้ั เลอื กคำส่งั New → Servlet
กำหนด Package = servlet , Class Name = SecondServlet แล้วกด Finish
ในหน้าต่าง Editor เขยี น Source code ของ SecondSessionServlet.java ดงั Listing ที่ 6.4 แล้ว Save
6.2.2 ขน้ั ตอนการทดสอบโปรแกรมเพอื่ สาธิตขอบเขตของ Object แบบ Session
เราสามารถทจี่ ะทดสอบโปรแกรม ตามข้ันตอนดังน้ี
1. ทำการ Deploy โปรเจค็ ScopeDemo
2. ทำการ Run โปรเจ็ค ScopeDemo
3. ในโปรแกรม Web Browser เลือก URL ทชี่ อื่ http://localhost:8080/ScopeDemo/FirstSessionServlet
4. ทดลองรัน URL ทชี่ ่อื http://localhost:8080/ScopeDemo/SecondSessionServlet แล้วสงั เกตผลลพั ธ์
5. ทดลองปดิ Web Browser แล้วเปิดขึ้นมาใหม่แล้วทดลองรนั URL ที่ช่ือ
http://localhost:8080/ScopeDemo/SecondSessionServlet ใหม่แล้วสงั เกตผลลัพธ์
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
55
6.3 การพัฒนาโปรแกรมเพื่อสาธติ ขอบเขตของ Object แบบ Application
เราสามารถทีจ่ ะกำหนดขอบเขตการใชง้ านของออปเจ็คให้เปน็ แบบ Application กล่าวคอื สามารถใช้กบั
โปรแกรม Java Servlet หรือ JSP ทุกโปรแกรมทีอ่ ย่ภู ายใน Web Application เดียวกันตราบใดท่ี Web Server ยงั
deploy โปรแกรม Web Application ดงั กล่าวอยู่ ถงึ แมว้ า่ Web Browser ของฝั่ง client จะปดิ ไปแลว้ ก็ตาม การกำหนด
ขอบเขตแบบ Application สามารถทำไดโ้ ดยใชค้ ำสง่ั setAttribute() กับออปเจค็ ชนิด ServletContext ซ่ึงเป็นออปเจค็
ทีเ่ กบ็ ข้อมลู ของ Web Application ซงึ่ ในแต่ละ Web Application จะมอี อปเจ็คชนดิ ServletContext อยู่หนงึ่ ตวั และ
สามารถเรยี กมาไดโ้ ดยใช้คำสั่ง getServletContext()
ตัวอย่างคำส่งั ในการเก็บออปเจ็คชนดิ String ทช่ี ่ือ name ไว้ใน attribute ท่ีช่อื AppName ของออปเจค็ ชนดิ
ServletContext จะมีรูปแบบคำส่งั ดังนี้
String name = "Thanisa";
ServletContext context = getServletContext();
context.setAttribute("AppName", name);
โปรแกรม Java Servlet อน่ื ๆสามารถทจ่ี ะเรียกใช้ attribute ของออปเจค็ ชนดิ ServletContext ที่ชื่อ
AppName และดงึ ค่าของตวั แปร name ออกมาได้ โดยใช้คำส่งั getAttribute() เพื่อเรียกค่าจากออปเจ็คชนดิ
ServletContext โดยมีรปู แบบดงั น้ี
ServletContext context = getServletContext();
String name = (String) context.getAttribute("AppName");
out.println(name);
ในข้นั ตอนนจ้ี ะเปน็ การพัฒนาโปรแกรมเพือ่ สาธิตการทำงานของขอบเขตการทำงานของ Object แบบ
application โดยการพฒั นาโปรแกรม Servlet ขนึ้ มาสองโปรแกรมคอื FirstAppServlet ที่จะใช้ในการสง่ ออปเจ็คซง่ึ มี
source code ตาม Listing ที่ 6.5 และ โปรแกรม SecondAppServlet ท่จี ะใชใ้ นการอ่านคา่ ของออปเจค็ ท่ีส่งออกมา
แล้วนำมาแสดงผล ซ่ึงมี source code ตาม Listing ที่ 6.6
Listing ที่ 6.5 โปรแกรม FirstAppServlet.java
package servlet;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstAppServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String name = "Thanisa";
ServletContext context = getServletContext();
context.setAttribute("AppName", name);
} finally {
out.close();
}
}
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
56
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}
Listing ท่ี 6.6 โปรแกรม SecondAppServlet.java
package servlet;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SecondAppServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
ServletContext context = getServletContext();
String name = (String) context.getAttribute("AppName");
out.println(name);
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
57
6.3.1 ข้นั ตอนการพัฒนาโปรแกรมเพอื่ สาธติ ขอบเขตของ Application
เราสามารถที่จะพัฒนาโปรแกรม ตามขน้ั ตอนดังนี้
1. เลือกเมนู File → New แลว้ เลอื ก Dynamic Web Application
กำหนด Project Name = ScopeDemo
2. คล๊กิ ขวาทีโ่ หนด ScopeDemo จากนั้นเลอื กคำสัง่ New → Servlet
กำหนด Package = servlet , Class Name = FirstServlet แล้วกด Finish
3. ในหน้าต่าง Editor เขียน Source code ของ FirstAppServlet.java ดงั Listing ที่ 6.5 แล้ว Save
4. คล๊กิ ขวาท่โี หนด ScopeDemo อีกคร้ัง
จากนั้นเลอื กคำสงั่ New → Servlet
กำหนด Package = servlet , Class Name = SecondServlet แลว้ กด Finish
ในหนา้ ต่าง Editor เขยี น Source code ของ SecondAppServlet.java ดัง Listing ที่ 6.6 แลว้ Save
6.3.2 ขนั้ ตอนการทดสอบโปรแกรมเพ่ือสาธิตขอบเขตของ Object แบบ Application
เราสามารถทีจ่ ะทดสอบโปรแกรม ตามขน้ั ตอนดังนี้
1. ทำการ Build และ Deploy โปรเจ็ค ScopeDemo
2. ทำการ Run โปรเจค็ ScopeDemo
3. ในโปรแกรม Web Browser เลือก URL ท่ีช่อื http://localhost:8080/ScopeDemo/FirstAppServlet
4. ทดลองรัน URL ท่ชี อ่ื http://localhost:8080/ScopeDemo/SecondAppServlet แล้วสงั เกตผลลัพธ์
5. ทดลองปดิ Web Browser แลว้ เปิดขนึ้ มาใหม่แลว้ ทดลองรนั URL ทชี่ ่ือ
http://localhost:8080/ScopeDemo/SecondAppServlet ใหมแ่ ลว้ สังเกตผลลัพธ์
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
58
Exercise 7 การพัฒนา WebBase DB โดยคลาสประเภท Web Listener
เนอ้ื หาที่ตอ้ งศกึ ษาก่อน การพฒั นาโปรแกรมเว็บเพ่อื ติดตอ่ กบั ฐานขอ้ มลู
แบบฝึกหัดนีจ้ ะเปน็ การปรับปรงุ โปรเจค็ Web Application ทชี่ อ่ื WebBaseDB ท่ใี ช้ในการเช่อื มโยงฐาน
ขอ้ มูลและใสข่ อ้ มลู ลง Table โดยเพ่มิ คลาสประเภท Web Listener เพื่อทำการเชื่อมตอ่ กับฐานขอ้ มลู แทนวิธกี ารเดมิ ที่
เชือ่ มต่อในเมธอด init()
ข้นั ตอนในการพัฒนาโปรแกรม
1. พฒั นาโปรแกรม Init.java
2. แกไ้ ขโปรแกรม AddBookServlet.java
7.1 การพฒั นาโปรแกรม Init.java
โปรแกรม AddBookServlet กำหนดคำสง่ั ในการเชอื่ มต่อกบั ข้อมูลที่อยใู่ นเมธอด init() ซ่ึงเป็นวธิ กี ารท่ีไม่
เหมาะสมนกั เน่อื งจากโปรแกรม Servlet ทุกโปรแกรมท่จี ะเชอื่ มตอ่ กับฐานขอ้ มูลตอ้ งเขียนโปรแกรมในส่วนของ
เมธอด init() ทซี่ ้ำกนั
โปรแกรม Servlet จะมี Listener อยู่สองชนดิ คอื 1. Context Listener และ 2. Session Listener
ในแบบฝึกหดั นีจ้ ะพัฒนาโปรแกรมโดยการใช้ Context Listener ซึง่ มันจะถกู เรียกเม่ือ Web Application
เร่ิมตน้ การทำงาน หรอื สิน้ สดุ การทำงาน
เราจะเขยี นโปรแกรมประเภท Context Listener โดยมขี ัน้ ตอนดังน้ี
1. เขียน คลาสประเภท Listener ( คือ Class ที่ implements interface ServletContextListener )
2. Implements method ที่บังคับใน Interface ของ Listener น้นั ๆ
3. เขียน Config ไฟลเ์ พิม่ ที่ Web Deployment Descriptor web.xml เพอื่ เพิ่ม คลาสประเภท Listener
โปรแกรม Init.java คอื โปรแกรมท่เี ป็น ServletContextListener มนั จะเช่อื มต่อกบั ฐานขอ้ มลู
เม่อื Web Application เร่มิ ทำงาน แล้วเก็บออปเจ็ค Connection ไว้ภายใน ServletContext เพ่อื ลดจำนวนครัง้ ในการ
เชอื่ มต่อฐานข้อมลู
เขยี นคำสง่ั เช่อื มต่อฐานข้อมูลทำท่ี Method contextInitialized( ) ซง่ึ จะถกู เรียกเมื่อ Web Application เรมิ่ ต้น
การทำงาน
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
59
ขัน้ ตอนการพัฒนาโปรแกรม Init.java
1. คล๊ิกขวาทโี่ หนด WebBaseDB → New → Listener
กำหนด Package = listener , Class Name = Init
แล้วกด Finish ดังรูปท่ี 7.1
รูปท่ี 7.1 การสร้างคลาสประเภท Web Listener
2. ตรวจสอบ context.xml ว่ามีอยู่หรือไม่ ถ้าไม่มีให้ เพิม่ Resource ชนิด DataSource ลงไปท่ี Tomcat
โดยสร้าง file context.xml ที่ Folder \WebContent\META-INF\
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
60
<Context>
<Resource
name="jdbc/test"
auth="Container"
driverClassName="com.mysql.jdbc.Driver"
type="javax.sql.DataSource"
url="jdbc:mysql://localhost:3306/test"
username="root"
password="root" >
</Resource>
</Context>
3. ทำการขอ Datasource จาก Container สว่ นตัวแปร ds ท่รี บั เป็น Instance Member
จะอยูน่ อก Method ใดๆ เพือ่ ให้ทง้ั initial และ destroy มองเหน็
@Resource(name="jdbc/test")
private DataSource ds;
private Connection conn;
เพ่ิม source code (ข้อ 4 - 5) ใน Method contextInitialized เพอ่ื เตรียม connection ใหพ้ ร้อมใชง้ าน
4. ขอ Connection จาก Datasource
conn = ds.getConnection();
5. นำ Connection ไปเก็บท่ี ServletContext แลว้ กำหนดชอื่ context varible เปน็ connection
(arg0 คือ instance ของ ServletContextEvent ทสี่ ง่ มาให้ทาง argument)
arg0.getServletContext().setAttribute("connection", conn);
6. เพ่ิมคำสง่ั ต่อไปนใ้ี นเมธอด contextDestroyed เพ่อื ให้ทำลาย Database Connection
กรณี Web Application หยุดใชง้ าน
public void contextDestroyed(ServletContextEvent arg0) {
try{
conn.close();
} catch (SQLException ex) {
Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
}
}
เราจะได้ source code ของไฟล์ Init.java ดัง Listing ท่ี 7.1
Listing ที่ 7.1 โปรแกรม Init.java
package listener;
import java.sql.Connection;
import java.sql.SQLException;
import javax.annotation.Resource;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.sql.DataSource;
public class Init implements ServletContextListener {
@Resource(name="jdbc/test")
private DataSource ds;
private Connection conn;
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
61
public void contextInitialized(ServletContextEvent arg0) {
try {
conn = ds.getConnection();
arg0.getServletContext().setAttribute("connection", conn);
} catch (SQLException e) {e.printStackTrace();}
}
public void contextDestroyed(ServletContextEvent arg0) {
try {
conn.close();
} catch (SQLException e) {e.printStackTrace();}
}
}
7.2 การปรับปรุงโปรแกรม AddBookServlet.java
โปรแกรม Init.java จะมำหนา้ ทใ่ี นการเชื่อมตอ่ กับฐานข้อมลู ดังนน้ั เราจึงต้องแก้ไขคำสง่ั การเชือ่ มโยงฐาน
ขอ้ มลู ท่ีอยใู่ นไฟล์ AddBookServlet.java โดยมขี ัน้ ตอนดงั นี้
1. ใหล้ บคำส่งั
@Resource(name = "jdbc/test")
private DataSource jdbcTest;
2. แก้ไขเมธอด init() ให้เป็นดังน้ี
public void init() {
conn = (Connection) getServletContext().getAttribute("connection");
}
เราจะไดโ้ ปรแกรม AddBookServlet.java ใหม่ดงั Listing ที่ 7.2
Lisitng ที่ 7.2 โปรแกรม AddBookServlet.java
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AddBookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private Connection conn;
public void init() {
conn = (Connection) getServletContext().getAttribute("connection");
}
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
62
out.println("<html>");
out.println("<head>");
out.println("<title>Add a new book</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1> Add a new book </h1>");
try {
String isbn = request.getParameter("isbn");
String author = request.getParameter("author");
String title = request.getParameter("title");
String priceStr = request.getParameter("price");
float price = Float.parseFloat(priceStr);
Statement stmt = conn.createStatement();
String sql = "INSERT INTO books VALUES('" + isbn + "','" + title
+ "','" + author + "'," + price + ")";
int numRow = stmt.executeUpdate(sql);
RequestDispatcher obj = request
.getRequestDispatcher("Thankyou.html");
if (numRow == 1 && obj != null) {
obj.forward(request, response);
}
} catch (SQLException ex) {
out.println("Error " + ex);
return;
}
out.println("</body>");
out.println("</html>");
out.close();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
processRequest(request, response);
}
}
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
63
7.3 ทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรแกรม WebBaseDB
2. Run โปรแกรม WebBaseDB ทั้งนตี้ อ้ งทำการรัน MySQL Database Server กอ่ น
3. โปรแกรมจะแสดงหนา้ addBook.html ให้เราใสข่ อ้ มลู
ซี่งเม่ือกด OK ผลลัพธก์ จ็ ะถูกบันทึกลง Table books เช่นเดยี วกบั แบบฝึกหดั ท่ี 5
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
64
Exercise 8 การพฒั นาโปรแกรม Servlet Filter
เนื้อหาทต่ี ้องศกึ ษากอ่ น การเขยี นโปรแกรม Servlet เพือ่ อา่ นคา่ พารามเิ ตอร์
แบบฝกึ หัดน้ีจะเปน็ การพัฒนาโปรแกรม Web Application เพื่ออธบิ ายการใช้ Servlet Filter ในการตรวจ
สอบการ login เขา้ สรู่ ะบบ โดยโปรแกรม Java Servlet บางโปรแกรมทีอ่ ยูใ่ น Web Application จะถกู Filter เรียกเพ่ือ
ตวั สอบสถานะการ login ก่อนทีจ่ ะสามารถใช้โปรแกรมนน้ั ได้
8.1 การพฒั นาโปรแกรม Servlet Filter
โปรแกรม Servlet Filter เป็นโปรแกรม Java ทีก่ ำหนดขนึ้ มาใน Web Application ซึ่งจะดักการทำงานของ
โปรแกรม Java Servlet ใดๆ แลว้ สามารถทจ่ี ะแก้ไขค่าของออปเจค็ ชนดิ request และ response กอ่ นท่ีโปรแกรม Java
Servlet นั้นจะถกู เรียกใช้ตอ่ ไป ตวั อยา่ งของการพัฒนาโปรแกรม Servlet Filter คอื
● การควบคมุ การใชง้ าน Servlet หรอื การทำ Authentication
● การบล็อกการใชง้ าน Servlet หรอื ตรวจสอบการใช้งาน Servlet
● การเปลย่ี นแปลงข้อมูลของออปเจ็ค request
โปรแกรม Servlet Filter จะเป็น โปรแกรม Java ที่ implements อนิ เตอร์เฟสทีช่ ื่อ Filter และมีเมธอดหลักคือ
init( ), destroy( ) และ doFilter( )
เราสามารถท่จี ะกำหนดให้ URL ใดๆ ในโปรแกรม Web Application ถกู Filter จากโปรแกรม Servlet Filter
ใดๆ โดยการกำหนดค่าใน web.xml อาทิเชน่ คำสงั่
<filter>
<filter-name>LoginFilterName</filter-name>
<filter-class> LoginFilter </filter-class>
</filter>
<filter-mapping>
<filter-name>LoginFilterName</filter-name>
<url-pattern> /* </url-pattern>
</filter-mapping>
เป็นการกำหนดใหโ้ ปรแกรม URL ทกุ ตัวท่ีอยู่ใน Web Application น้ี ตอ้ งถูกดกั โดย Servlet Filter ที่
ชื่อ LoginFilter
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
65
แบบฝกึ หัดน้ีจะกำหนดใหม้ ี Web Page ที่ชอื่ login.html ซงึ่ จะทำการเรยี กโปรแกรม LoginServlet ซงึ่ จะ
ตรวจสอบค่า username และ password ทปี่ อ้ นเขา้ มา หากถกู ตอ้ งก็จะกำหนดให้คา่ ของออปเจค็ ทชี่ ่อื loginFlag เปน็
true (กำหนดใหข้ อบเขตของออปเจ็ค loginFlag เปน็ แบบ Session โดยการ setAttribute ให้กับออปเจค็ ชนดิ
HttpSession )
โปรแกรม Web Application นย้ี ังมี Servlet Filter ทช่ี อ่ื LoginFilter ซง่ึ จะทำหนา้ ทีอ่ ่านค่าของออปเจค็
LoginFlag ทอ่ี ยใู่ นออปเจ็คชนดิ HttpSession ถา้ หากไมพ่ บหรือมีค่าเปน็ false โปรแกรมจะระบุ HTTP Error 401
(This request requires HTTP authentication . )
สุดทา้ ยจะมีการเขยี นโปรแกรม Java Servlet ที่ช่อื ShowServlet เพ่ือแสดงขอ้ ความวา่ HelloWorld เพอ่ื แสดง
ให้เหน็ ว่าโปรแกรมจะถูกดกั โดย LoginFilter
8.2 การเขียนหน้า Login
หนา้ Login จะมีโปรแกรมสองโปรแกรมคอื login.html ซึ่งจะเปน็ web page ทมี่ ีลกั ษณะดังรูป และมี source
code ตาม Listing ที่ 8.1 นอกจากจะมีโปรแกรม LoginServlet ซ่ึงจะทำหน้าท่ีในการอา่ นพารามิเตอร์ทชี่ ่อื username
และ password พร้อมท้ังตรวจสอบวา่ มคี า่ เป็น thana และ secret หรอื ไม่ หากใชก่ ็จะกำหนดค่า ตัวแปร loginFlag
เป็น true แล้วเกบ็ ลงในออปเจค็ ชนดิ HttpSession โปรแกรมนจี้ ะมี source code ดัง Listing ที่ 8.2
รูปที่ 8.1 เว็บหน้า Login
Listing ที่ 8.1 โปรแกรม login.html
<html>
<head><title>Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="LoginServlet" method="POST">
UserName: <input name="username" /> <br>
Password: <input type="password" name="password" /> <br>
<input type="submit" value="Login" />
</form>
</body>
</html>
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
66
Listing ที่ 8.2 โปรแกรม LoginServlet.java
package controller;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class LoginServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
boolean loginflag=false;
try{
String username =request.getParameter("username");
String password =request.getParameter("password");
System.out.println("input username="+username + ": password="+password);
if(username.equals("thana") && password.equals("secret")){
loginflag=true;
}
request.getSession().setAttribute("loginFlag", loginflag);
response.sendRedirect("show.do");
}catch (Exception e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}
ขั้นตอนการพัฒนาโปรแกรม
1. เลอื กเมนู File → New → Dynamic Web Project กำหนด Project = FilterDemo
2. คล๊กิ ขวาที่ FilterDemo → New → HTML File
กำหนด HTML File Name = login แล้วกด Finish
3. ในหน้าตา่ ง Editor เขยี น Source code ของ login.html ดงั Listing ที่ 8.1 แล้ว Save
4. คล๊ิกขวาที่ FilterDemo → New → Servlet
กำหนด Package = controller , Class Name = LoginServlet.java แล้วกด Finish
ในหน้าต่าง Editor เขียน Source code ของ LoginServlet.java ดัง Listing ที่ 8.2 แล้ว Save
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
67
8.3 การเขียน Servlet Filter
โปรแกรม LoginFilter จะทำหนา้ ทีใ่ นการเรยี ก attribute ท่ชี อ่ื loginFlag และหากไม่พบหรอื มีค่าเป็น
false โปรแกรมจะระบุ HTTP Error 401 (Unauthorize) โปรแกรม LoginFilter จะมี source code หลกั
อยูท่ ่ี เมธอด doFilter() ดัง Listing ที่ 8.3
กรณนี ี้จะกำหนดให้ URL เฉพาะท่ีเป็น *.do จงึ จะเรยี กใช้ Filter ทีช่ ่อื LoginFilter
ให้ใช้ Eclipse สรา้ ง Filter
จะเห็นความเปลย่ี นแปลงที่ Web Deployment Descriptor คอื มี Line เพิม่ ขึ้นมาดงั นี้
<filter>
<display-name>LoginFilter</display-name>
<filter-name>LoginFilter</filter-name>
<filter-class>filter.LoginFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>LoginFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
Listing ที่ 8.3 เมธอด doFilter() ของ โปรแกรม LoginFilter.java
package filter;
import javax.servlet.*;
import javax.servlet.http.*;
public class LoginFilter implements Filter {
public void destroy() {
}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpSession session = req.getSession();
Boolean flag = (Boolean) session.getAttribute("loginFlag");
boolean loginFlag;
if (flag == null) {
loginFlag = false;
} else {
loginFlag = flag;
}
if (!loginFlag) {
HttpServletResponse res = (HttpServletResponse) response;
res.sendError(HttpServletResponse.SC_UNAUTHORIZED);
return;
}
chain.doFilter(request, response);
}
public void init(FilterConfig fConfig) throws ServletException {
}
}
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
68
ข้นั ตอนการพัฒนาโปรแกรม
1. เลือกหน้าตา่ ง Projects แล้วคลิ๊กขวาที่โหนด FilterDemo จากนน้ั เลือกคำสัง่ New > Other..
2. ในไดอะล็อก New File ใหเ้ ลอื ก Categories ทีช่อื Web ซง่ึ โปรแกรมก็จะแสดง File Types ต่างๆ ภายใต้
Category นี้ ให้เราเลอื ก Filter แล้วกด Next
3. กำหนด Class Name: เปน็ LoginFilter และ Package เป็น filter แล้วกด Next
4. ในหน้าถัดไป ให้ใช้คา่ ท่ีกำหนดไว้ ดงั รูปท่ี 8.2 แล้วกด Finish
รปู ท่ี 8.2 การกำหนดค่าของ Filter
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
69
5. โปรแกรมจะทำการแก้ไขไฟล์ web.xml เพื่อระบุ Filter ใหม่ท่สี ร้างขนึ้ ซ่ึงเราสามารถทีจ่ ะดกู ารแกไ้ ขนี้ได้
โดยการขยายโหนด FilterDemo → WebContent → WEB-INF แลว้ ดับเบลิ คลก๊ิ ไฟล์ web.xml
รูปท่ี 8.3 ดผู ลลัพธข์ อง Web Deployment Descriptor (web.xml) เมอ่ื add Filter สู่ Project
6. ในหน้าตา่ ง Editor เขยี น Source code ของเมธอด doFilter() ของไฟล์ LoginFilter.java ดงั Listing ที่
8.3 แล้ว Save
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
70
8.4 การเขียนโปรแกรม ShowServlet
โปรแกรม ShowServlet จะทำหน้าท่เี พอ่ื แสดงข้อความว่า Hello World และให้ใช้งาน Filter
source code ดงั Listing ที่ 8.4
Listing ท่ี 8.4 เมธอด processRequest() ของโปรแกรม ShowServlet.java
…...............
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
try {
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet ShowServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1> Hello World </h1>");
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
ขั้นตอนการพฒั นาโปรแกรม
1. คล๊กิ ขวาท่ี FilterDemo → New → Servlet
กำหนด Package = view , Class Name = ShowServlet
2. กำหนด URL Mapping เป็น /show.do ดงั รปู ท่ี 8.4 แล้วกด Finish
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
71
รปู ที่ 8.4 การกำหนดคา่ URL pattern
3. ในหนา้ ตา่ ง Editor เขยี น Source code ของ ShowServlet.java ดงั Listing ที่ 8.4 แล้วเลือกคำสง่ั Save
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
72
8.5 ข้ันตอนการทดสอบโปรแกรม
1. ทำการ Build และ Deploy โปรเจค็ FilterDemo
2. ทำการ Run โปรเจ็ค FilterDemo
3. ทดลองรนั URL ทช่ี ่อื http://localhost:8080/FilterDemo/show.do
แล้วสงั เกตผลลัพธ์ จะเหน็ ว่าแสดงขอ้ ผดิ พลาด HTTP 401
4. ทดลองรนั URL ทช่ี อ่ื http://localhost:8080/FilterDemo/login.html
แลว้ ปอ้ น username เป็น thana และ password เปน็ secret
สงั เกตว่าผลลพั ธ์เป็นอย่างไร
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
73
Exercise 9 การเขยี นโปรแกรม JSP เพ่ือแสดงผลลัพธ์
เนือ้ หาท่ีตอ้ งศึกษาก่อน การพฒั นาโปรแกรมเวบ็ เพือ่ ตดิ ตอ่ กับฐานขอ้ มูล
แบบฝกึ หัดน้ีจะเป็นการพัฒนาโปรแกรม JSP เพ่อื แสดงข้อมลู จากฐานข้อมูล ออกทางโปรแกรม Web
Browser โดยจะเป็นการพฒั นาโปรเจค็ WebBaseDB เพื่อเตมิ
9.1 การพัฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เปน็ โปรแกรม JSP เพอ่ื แสดงข้อความและวนั เวลาของ Web Server โปรแกรมนี้จะ
เป็นการแสดงผลแบบ dynamic content จึงต้องพัฒนาโดยใช้ภาษา JSP โดยมขี ั้นตอนการพฒั นาโปรแกรมดงั นี้
1. คลิ๊กขวาที่โหนด WebBaseDB → New → JSP File
กำหนด JSP File Name = hello แล้วกด Finish
รูปที่ 9.1 สรา้ ง JSP file
2. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ hello.jsp ใหเ้ ป็นไปตาม Listing ท่ี 9.1
3. ทำการ Build และ Deploy โปรแกรม WebBaseDB
4. ในหน้าต่าง Projects เลอื กไฟล์ hello.jsp แลว้ เลือก Run โปรแกรม
5. โปรแกรมจะแสดงผลดังรูปท่ี 1
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
74
Listing ที่ 9.1 โปรแกรม hello.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head><title>Hello JSP</title></head>
<body>
<h1>My First JSP</h1>
Hello : Current time is : <%= new java.util.Date() %>
</body>
</html>
รปู ท่ี 9.2 ผลลัพธข์ อง hello.jsp
9.2 การพัฒนาโปรแกรม viewBook.jsp
โปรแกรม viewBook.jsp เป็นโปรแกรม JSP เพ่อื แสดงข้อมูลของ Table ท่ีช่อื books โปรแกรมนจี้ ะเรียกใช้
standard tags ท่ีกำหนดไว้ใน JSTL ซึ่งทำให้ผ้เู ขยี นโปรแกรม JSP ไมต่ ้องเขยี น source code ภาษา Java โดยมีคำสง่ั
ตา่ งๆ ทสี่ ำคัญดังนี้
9.2.1 การกำหนด Tag Library
โปรแกรม viewBook.jsp จะเรยี กใช้ JSTL จึงจำเปน็ ตอ้ งมีคำส่ัง Taglib เพ่ือทจี่ ะประกาศ Library ดังนี้
(Project หรือ Web Server ต้องมองเหน็ Library .jar ของ JSTL เพื่อใชง้ าน อาจตอ้ ง download เพม่ิ )
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
9.2.2 การกำหนด Datasource
โปรแกรม JSP นีจ้ ะทำการเช่ือมตอ่ กับฐานขอ้ มลู โดยจะตอ้ งใช้ DataSource ของโปรเจ็ค โดยสามารถ
กำหนดได้สองวธิ ี
1. กรณที มี่ ี datasource ซึ่งเชือ่ มตอ่ ฐานขอ้ มูลทตี่ อ้ งการอยู่แลว้ กส็ ามารถใชอ้ ันเดิมไดเ้ ลย ตัวอยา่ งเช่น
jdbc/test โดยไมจ่ ำเปน็ ต้องสร้าง dataSource ข้นึ ใหม่อีก
2. กรณที ่ยี งั ไมม่ ี datasource ใหใ้ ชค้ ำสั่ง setDataSource เปน็ Tag เพอ่ื ใหเ้ ราสามารถกำหนดการเชอ่ื มตอ่ กบั
ฐานขอ้ มลู และกำหนดค่าไว้ในตัวแปรตามชื่อทีก่ ำหนด
ถึงแมว้ า่ โปรเจค็ WebBaseDB จะมี Datasource อยู่แล้ว แตแ่ บบฝกึ หัดน้ีจะกำหนด Datasource ขน้ึ มาใหม่
โดยกำหนดเปน็ ตัวแปรทช่ี ื่อ newdatasource ดังนี้
<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql:///test" user="root" password="root"/>
เพอ่ื เป็นการเชื่อมต่อฐานข้อมูลทอ่ี ยทู่ ี่ URL ท่ีชอ่ื jdbc:mysql:///test
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
75
*สามารถใช้ URL ของ DB ได้ 2 แบบ คอื jdbc:mysql://localhost:3306/test หรือ jdbc:mysql:///test
คำสงั่ sql:query เปน็ คำส่ังทจี่ ะเรียกดขู ้อมูลของฐานขอ้ มูลท่เี ช่อื มต่อใน DataSource ท่ีเปน็ jdbc/test หรอื
ตวั แปร newdatasource ในโปรแกรม viewBook.jsp เราจะทำการเรยี กใชค้ ำส่ัง SQL คอื select * from books โดยใช้
คำส่งั sql:query ดงั น้ี
<sql:query var="db" dataSource="jdbc/test">
SELECT * FROM books
</sql:query>
หรอื
<sql:query var="db" dataSource="${newdatasource}">
SELECT * FROM books
</sql:query>
9.2.3 การใชค้ ำสั่ง c:forEach เพ่อื แสดงผล
การแสดงคา่ ของผลลัพธ์ท่ีไดจ้ ากการ Query ฐานขอ้ มลู สามารถทำได้ การแจงขอ้ มูลทลี ะแถวโดยใช้คำสง่ั
c:forEach โดยโปรแกรมนีจ้ ะแสดงข้อมูลชอ่ื หนงั สอื และช่อื ผูแ้ ต่ง โดยมคี ำส่งั ดงั น้ี
<c:forEach var="row" items="${db.rows}">
${row.title} : ${row.author} <br>
</c:forEach>
ขนั้ ตอนการพัฒนาโปรแกรมนี้ มดี ังนี้
1. คล๊ิกขวาทโ่ี หนด WebBaseDB → New → JSP
กำหนด JSP File Name = viewBook แลว้ กด Finish
2. เพ่ิม JSTL Library เพือ่ ให้ JSP เรยี กใชง้ านได้
(Download file jstl-impl-1.2.jar และ jstl-api-1.2.jar ท่นี ี่ http://jstl.java.net/download.html)
นำ .Jar File ท้งั 2 ไปไว้ที่ folder {$TOMCAT}\lib ซึ่งเปน็ path ของที่ install Apache Tomcat ดังรูปท่ี 9.3
รูปท่ี 9.3 การเพิม่ JSTL Library บน Apache Tomcat
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
76
เมอ่ื ดทู ี่ Project → Java Resource → Libraries → Apache Tomcat v6.0 จะเหน็ ว่ามี JSTL เพ่ิมแลว้
รปู ที่ 9.4 JSTL Library ที่ Apache Tomcat สามารถใช้งานได้
3. ในหน้าต่าง editor ให้แก้ไข source code ของไฟล์ viewBook.jsp ให้เปน็ ไปตาม Listing ที่ 9.2
4. ทำการ Build และ Deploy โปรแกรม WebBaseDB
5. ในหน้าต่าง Projects เลือกไฟล์ viewBook.jsp แล้วเลอื ก Run โปรแกรม
6. ที่ Web Browser เปล่ียน URL เปน็ http://localhost:8080/WebBaseDB/viewBook.jsp จะได้
ผลลัพธด์ ังตวั อยา่ งในรปู ท่ี 9.5
รปู ท่ี 9.5 ผลลัพธข์ อง viewBook.jsp
Listing ท่ี 9.2 โปรแกรม viewBook.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>JSP Page</h1>
<sql:setDataSource var="newdatasource" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql:///test" user="root" password="root" />
<sql:query var="db" dataSource="${newdatasource}">
SELECT * FROM books
</sql:query>
<c:forEach var="row" items="${db.rows}">
${row.title} : ${row.author} <br>
</c:forEach>
</body>
</html>
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
77
Exercise 10 การพฒั นาโปรแกรมเว็บ Online Book Store
เนื้อหาทต่ี อ้ งศกึ ษาก่อน การพฒั นาโปรแกรมเว็บเพือ่ ติดต่อกับฐานข้อมลู และ
การพฒั นาโปรแกรมเวบ็ เพ่อื ตดิ ตอ่ กับฐานขอ้ มลู
แบบฝกึ หัดนจ้ี ะเปน็ การพัฒนาโปรแกรม JSP เพื่อสร้าง Web Form ใหผ้ ใู้ ชเ้ ลอื กรายการหนังสือต่างๆ ที่มอี ยู่
ใน table ทชี่ อื่ books จากนัน้ จะแสดงรายการท่ผี ูใ้ ช้เลือกออกมาทางเว็บเพจ
10.1 การพัฒนาโปรแกรม selectBooks.jsp
โปรแกรม selectBooks.jsp เปน็ โปรแกรม JSP ท่เี ขยี นเพื่อแสดงรายการหนังสือทมี่ อี ย่ใู น table ที่ชอ่ื books
ออกมาแสดงในรูปแบบของ Web Form เพือ่ ใหผ้ ใู้ ช้เลือกรายการหนังสือและจำนวนดงั รูปท่ี 10.6 ทง้ั น้ี Web Form น้ี
จะเรยี ก url ท่ชี อื่ processSelection เมอ่ื มีการกดปุ่ม Select โปรแกรมนจ้ี ะเรียกใช้ SQL tags ของ JSTL เพอ่ื แสดง
รายการข้อมลู รายช่อื หนังสือ โดยมี source code ดงั แสดงใน Listing ที่ 10.1 และมขี ั้นตอนการพฒั นาโปรแกรมดงั นี้
1. เรมิ่ ต้นสร้างโปรแกรม Web-Base Application โดยการสร้าง Project ใหม่ มขี ้นั ตอนดังนี้
1. เลอื กเมนู File → New → Project ดังรปู ท่ี 1.1
2. รปู ที่ 10.1 การสรา้ งโปรเจ็ค Web Application
3. เลอื กรูป Folder ชือ่ Web และเลือก Dynamic Web Project ดังรปู ท่ี 1.2
รูปที่ 10.2 การสร้างโปรเจค็ Web Application
4. ให้กำหนด Project Name: เป็น WebApp
สว่ นการเก็บ File Eclipse จะใช้ Directory ท่ีถามเม่อื ครงั้ เปดิ ขึน้ มาเปน็ Default
แตถ่ า้ ต้องการระบุ ก็สามารถคลิกเครอื่ งหมายออก (Uncheck) แลว้ ทำการระบุ Directory ใหม่ได้
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
78
ดงั รูปท่ี 10.1 จากน้ันกด ปุ่ม Next
รปู ที่ 10.3 การกำหนดชื่อโปรเจค็
5. แสดง Folder ท่เี กบ็ source code และ Output folder (ทเ่ี กบ็ Class file)
คอื [directory ทีใ่ ส่กอ่ นรนั Eclipse]\src\ และ [directory ท่ใี ส่กอ่ นรนั Eclipse]\build\classes\
ดงั รูปที่ 10.3 จากนน้ั กด ปมุ่ Next
รปู ที่ 10.4 แสดงทีเ่ ก็บ source code และ Output directory
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
79
6. แสดง Context root และ Content directory ดังรูปที่ 10.2
รูปท่ี 10.5 แสดงช่อื Context root และ Content directory
7. คล๊กิ ขวาท่ี Project BookOnline → New → JSP File
กำหนด JSP File Name = selectBooks แล้วกด Finish
8. ในหนา้ ตา่ ง editor ให้แกไ้ ข source code ของไฟล์ selectBooks.jsp ให้เป็นไปตาม Listing ที่ 10.1
9. กดปมุ่ Save
รูปท่ี 10.6 ตวั อยา่ งผลลพั ธข์ องโปรแกรม selectBooks.jsp
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
80
Listing ท่ี 10.1 โปรแกรม selectBooks.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<sql:setDataSource var="ds" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql:///test" user="root" password="root" />
<sql:query var="rs" dataSource="${ds}">
select * from books
</sql:query>
<h1>Select Books</h1>
<form action="ProcessSelection" method="POST">
<table border="1">
<thead>
<tr>
<th></th>
<th> Title </th>
<th> Author </th>
<th> Price</th>
</tr>
</thead>
<tbody>
<c:forEach var="book" items="${rs.rows}">
<tr>
<td><input type="checkbox" name="isbn"
value="${book.isbn}" /> </td>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.price}</td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Select" />
</form>
</body>
</html>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
81
10.2 การพฒั นาโปรแกรม Book.java
โปรแกรม Book.java เป็นคลาสท่ีมี attribute ทสี่ อดคลอ้ งกบั table ทช่ี อื่ books โดยมี source code ดงั
Listing ที่ 10.2 และมีขั้นตอนการพัฒนาดงั นี้
1. คลก๊ิ ขวาท่ี Projects BookOnline → New → Class..
2. กำหนด Package = model , Class Name = Book กด Finish
รูปที่ 10.7 การ New Class Book.java เพื่อใชเ้ ป็น JavaBean ท่มี โี ครงสรา้ งเดยี วกับ Table
3. เพม่ิ attribute ภายในคลาส BookActionForm ดังนี้
private String isbn;
private String author;
private String title;
private double price;
หรอื
private String isbn,author,title;
private double price;
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
82
4. ทำการ encapsulate attribute (สร้างเมธอด getter และ setter)
โดยการคลิ๊กขวาภายในหน้าตา่ ง editor ของ source code
แลว้ เลือก Source > Generate Getters and Setters... ดงั รปู 10.8
รูปที่ 10.8 การ New Class Book.java เพ่ือใชเ้ ป็น JavaBean ทีม่ ีโครงสร้างเดยี วกับ Table
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
83
5. เลอื กวา่ จะสร้าง getters หรอื setters หรอื ทั้งสองอย่าง โดยการเลอื ก Check box
รูปที่ 10.9 กำหนด Encapsulation ให้ Attribute หรือ Instance Member
Listing ที่ 10.2 โปรแกรม Book.java
package model;
public class Book {
private String isbn,author,title;
private double price;
public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
84
10.3 การพัฒนาโปรแกรม Cart.java
โปรแกรม Cart.java เปน็ คลาสทท่ี ำหนา้ ที่คลา้ ยกบั shopping cart เพือ่ เก็บออปเจ็คชนดิ Book ตามรายการ
หนงั สอื ที่ผ้ใู ช้เลอื ก โดยอา้ งอิงจากหมายเลข isbn ซงึ่ โปรแกรมจะทำการคน้ รายชอื่ หนังสือจาก table ทีช่ ่อื books
หมายเลข isbn ที่อา้ งอิง แล้วจะแปลงเป็นออปเจค็ ชนิด books กอ่ นจะใส่ลงใน cart โปรแกรมน้จี ะมี source code
ดัง Listing ที่ 10.3 และมีขน้ั ตอนการพัฒนาดังนี้
1. คล๊ิกขวาที่ Projects BookOnline → New → Class
กำหนด Package = model , Class Name = Cart.java กด Finish
2. ในหนา้ ต่าง editor ใหแ้ ก้ไข source code ของไฟล์ Cart.java ใหเ้ ปน็ ไปตาม Listing ที่ 10.3 แลว้ Save
Listing ท่ี 10.3 โปรแกรม Cart.java
package model;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.LinkedList;
import java.util.List;
public class Cart {
List <Book> books;
Connection conn;
public void addItem(String isbn) {
try {
Statement stmt = conn.createStatement();
String sql = "SELECT * from books where isbn='" + isbn + "'";
ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
Book bk = new Book();
bk.setIsbn(isbn);
bk.setAuthor(rs.getString("author"));
bk.setTitle(rs.getString("title"));
bk.setPrice(rs.getFloat("price"));
books.add(bk);
}
}catch (SQLException ex) {
ex.printStackTrace();
}
}
public List<Book> getBooks() {
return books;
}
public Cart(Connection conn) {
this.conn = conn;
books = new LinkedList<Book>();
}
public void removeItem(String isbn) {
books.remove(isbn);
}
}
10.4 การพัฒนาโปรแกรม ProcessSelection.java
โปรแกรม ProcessSelection.java เปน็ โปรแกรม Java Servlet ท่ที ำหน้าท่อี า่ นคา่ พารามเิ ตอร์ท่ีชื่อ isbn ซ่ึง
สง่ มาจากหนา้ Web Form ของโปรแกรม selectBooks.java โดยใช้คำสงั่ getParameterValues ดงั นี้
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
85
String[] isbn = request.getParameterValues("isbn");
จากนัน้ จะทำการเรียก session เพอ่ื เรียก attribute ท่ีชอ่ื cart ออกมาโดยใช้คำส่ังดังนี้
(ทำ Casting เปน็ Cart เนอื่ งจาก HttpSession.getAttribute มนั Return Reference ชนดิ Object ออกมา)
HttpSession session = request.getSession(true);
Cart cart = (Cart) session.getAttribute("cart");
กรณที ี่ไมพ่ บ attribute ทีช่ อ่ื cart โปรแกรมจะทำการเก็บ attribute น้ีขึ้นใหม่โดยใช้คำส่งั ดงั น้ี
if (cart == null) {
ServletContext ctx = getServletContext();
Connection conn = (Connection) ctx.getAttribute("connection");
cart = new Cart(conn);
session.setAttribute("cart", cart);
}
เมอ่ื ไดค้ า่ attribute ท่ชี อ่ื cart มาแลว้ โปรแกรมก็จะเกบ็ รายการช่อื isbn ของหนงั สอื ที่ผู้ใชเ้ ลอื กลงในออป
เจ็คของ cart โดยใชค้ ำสง่ั ดงั น้ี
for (int i = 0; i < isbn.length; i++) {
cart.addItem(isbn[i]);
}
เมื่อสิ้นสุดการทำงานโปรแกรมก็จะไปเรยี ก URL ทีช่ ือ่ view.cart ตอ่ ไป โดยใช้คำส่ังดงั น้ี
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp");
pg.forward(request, response)
สำหรบั โปรแกรมนจ้ี ะมี source code ของเมธอด processRequest ดัง Listing ที่ 10.4
ข้ันตอนการพฒั นาโปรแกรม ProcessSelection.java มดี ังน้ี
1. คล๊ิกขวาที่ Projects BookOnline → New → Servlet
กำหนด Package = controller , Class Name = ProcessSelection
2. ในหนา้ ตา่ ง Editor เขยี น Source code ของ ProcessSelection.java ดงั Listing ท่ี 10.4 แล้ว Save
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
86
Listing ท่ี 10.4 เมธอด processRequest() ของโปรแกรม ProcessSelection.java
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import model.Cart;
public class ProcessSelection extends HttpServlet {
private static final long serialVersionUID = 1L;
public ProcessSelection() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
String[] isbn = request.getParameterValues("isbn");
HttpSession session = request.getSession(true);
Cart cart = (Cart) session.getAttribute("cart");
if (cart == null) {
ServletContext ctx = getServletContext();
Connection conn = (Connection) ctx.getAttribute("connection");
cart = new Cart(conn);
session.setAttribute("cart", cart);
}
for (int i = 0; i < isbn.length; i++) {
cart.addItem(isbn[i]);
}
cart = (Cart) session.getAttribute("cart");
RequestDispatcher pg = request.getRequestDispatcher("viewCart.jsp");
pg.forward(request, response);
out.close();
}
}
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
87
10.5 การพฒั นาโปรแกรม Init.java
โปรแกรม Init.java เป็นโปรแกรมประเภท ServletContextListener เพือ่ เชอื่ มตอ่ กับฐานข้อมลู เม่อื เร่มิ ตน้
แลว้ เกบ็ ออปเจค็ connection ไวภ้ ายใน ServletContext โดยมขี ั้นตอนการพัฒนาเช่นเดยี วกบั การพฒั นาโปรแกรม
Init.java ใน Exercise 7 การพฒั นา WebBase DB โดยคลาสประเภท Web Listener (หน้า 60)
และจะต้องมกี ารสร้างไฟล์ context.xml และแก้ไข web.xml แบบเดยี วกันกับ Exercise ดังกลา่ ว
Listing ท่ี 10.5 Source Code ของโปรแกรม Init.java
package listener;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.annotation.Resource;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.sql.DataSource;
public class Init implements ServletContextListener {
public Init() {
// TODO Auto-generated constructor stub
}
@Resource(name = "jdbc/test")
private DataSource ds;
private Connection conn;
public void contextInitialized(ServletContextEvent arg0) {
try {
Connection conn;
conn = ds.getConnection();
arg0.getServletContext().setAttribute("connection", conn);
System.out.println("Book Online : MySQL Connection Created ");
} catch (SQLException e) {
e.printStackTrace();
}
}
public void contextDestroyed(ServletContextEvent arg0) {
try {
conn.close();
System.out.println("Book Online : MySQL Connection Destroyed");
} catch (SQLException ex) {
Logger.getLogger(Init.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
88
10.6 การพฒั นาโปรแกรม viewCart.jsp
โปรแกรม viewCart.jsp เป็นโปรแกรม JSP ที่เขยี นเพื่อแสดงรายการหนังสือทผ่ี ใู้ ช้เลอื ก และเก็บใน
shopping cart ออกมาแสดง โปรแกรมนีจ้ ะใช้ Expression Language เพ่อื แสดงขอ้ มลู ใน session ดงั Listing ท่ี 10.6
และมขี ้นั ตอนการพฒั นาดงั นี้
1. คลกิ๊ ขวาที่ Project BookOnline → New → JSP File
กำหนด JSP File Name = viewCart แลว้ กด Finish
2. ในหน้าตา่ ง editor ใหแ้ ก้ไข source code ของไฟล์ viewCart.jsp ให้เปน็ ไปตาม Listing ที่ 10.6 แล้ว Save
Listing ท่ี 10.6 โปรแกรม viewCart.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cart</title>
</head>
<body>
<h1>Selected Books in Cart</h1>
<c:forEach var="book" items="${sessionScope.cart.books}">
${book.title} <br>
</c:forEach>
</body>
</html>
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
89
10.7 ขนั้ ตอนการทดสอบโปรแกรม
1. ทำการ Deploy โปรเจค็ BookOnline
2. ทดลองรนั URL ทช่ี อ่ื http://localhost:8080/BookOnline/selectBooks.jsp
ทดลองเลือกรายการหนังสือ แล้วกดปุ่ม Select
โปรแกรมจะเรียก URL ท่ีชอ่ื http://localhost:8080/BookOnline/processSelection
เพ่อื แสดงรายการใน Cart ดงั รูปที่ 10.10
3. ทดลองกลับไปเลอื กรายการหนงั สือเพมิ่ เติม หรอื เรียก URL ท่ชี อ่ื
http://localhost:8080/BookOnline/viewCart.jsp โดยตรงแลว้ สงั เกตผลลัพธ์
รปู ท่ี 10.10 การแสดงขอ้ มลู ใน Cart
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
90
Exercise 11 การสร้าง Custom Tags สำหรบั โปรแกรม JSP
เนอื้ หาทีต่ ้องศึกษากอ่ น
แบบฝกึ หัดน้จี ะเปน็ การพัฒนาโปรแกรม JSP เพ่ือสรา้ ง custom tag โดยจะเริ่มแสดงการพัฒนาโปรแกรม
ตัง้ แต่การเขยี น JSP โดยไม่ใช้ custom tags แลว้ สรา้ ง tag โดยใช้ Tag Handler และขัน้ ตอนสุดทา้ ยจะเป็นการสรา้ ง
tag โดยใช้ Tag File โดยโปรแกรม JSP ทีเ่ ขยี นจะเปน็ การพมิ พข์ ้อความว่า Hello xxxx จำนวนสิบคร้งั โดยท่ี xxxx คือ
ช่อื ทส่ี ่งมาทางพารามเิ ตอร์ที่ช่อื name
11.1 การพัฒนาโปรแกรม hello.jsp
โปรแกรม hello.jsp เป็นโปรแกรม JSP ทีเ่ ขียนโดยใช้ scriptlet เรียกคำส่งั ภาษาจาวา โดยจะมคี ำสง่ั ในการ
อ่านพารามเิ ตอร์ของออปเจ็ค request ท่ชี ่ือ name แล้วจะพมิ พ์ขอ้ ความ Hello xxxx จำนวนสบิ ครงั้ โดยโปรแกรมนี้
จะมี source code ดัง Listing ท่ี 11.1 และมีขน้ั ตอนการพฒั นาโปรแกรมดงั น้ี
1. เลอื กเมนู File → New → Dynamic Web Project
กำหนด Project Name = JSPDemo
2. คล๊ิกขวาที่ Project JSPDemo จากน้นั เลอื กคำส่ัง New → JSP File
กำหนด JSP File Name = hello
3. ในหนา้ ตา่ ง editor ใหแ้ ก้ไข source code ของไฟล์ hello.jsp ใหเ้ ป็นไปตาม Listing ที่ 11.1
4. ทำการ Build และ Deploy โปรแกรม JSPDemo
5. ในหน้าต่าง Projects เลอื กไฟล์ hello.jsp แลว้ เลอื ก Run โปรแกรมโดยให้ส่งผา่ นพารามเิ ตอรท์ าง URL เชน่
http://localhost:8080/JSPDemo/hello.jsp?name=Thanisa เราจะไดผ้ ลการรนั ดงั รูปท่ี 11.1
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
91
Listing ที่ 11.1 โปรแกรม hello.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Demo</title>
</head>
<body>
<h1>JSP Demo</h1>
<% String name = request.getParameter("name"); %>
<% for (int i = 0; i < 10; i++) { %>
Hello <%= name %> <br>
<% } %>
</body>
</html>
รปู ที่ 11.1 ผลลัพธข์ องโปรแกรม hello.jsp
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
92
11.2 การพัฒนาโปรแกรม helloTag.jsp
โปรแกรม helloTag.jsp เป็นโปรแกรม JSP ท่ที ำงานแบบเดยี วกบั โปรแกรม hello.jsp แตก่ ารพัฒนา
โปรแกรมน้ีจะเขียนโดยการสรา้ ง Custom tag ทช่ี ื่อ NameTagHandler การสร้าง Custom Tag จะต้องมกี ารพัฒนา
โปรแกรม 3 ส่วน ดงั นี้
• สร้าง Java Class Tag Handler [NameTagHandler.java] จะทำงานเมือ่ Custom Tag ถกู เรียกใช้
• สร้าง Tag Library Descriptor [MyTags.tld] เปน็ ตัวอธิบาย attribute ต่างๆภายใน element ของ tag
ตัวอยา่ ง element และ attribute → <element attribute1=”A”> </element>
• สร้าง JSP file [helloTag.jsp] เพื่อเรยี กใช้งาน Custom Tag
รปู ที่ 11.2 Overview ความสัมพนั ธข์ อง Custom Tag Files
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
93
11.2.1 สรา้ งไฟล์ Java ClassTag Handler
ไฟล์ Tag Handler จะเปน็ โปรแกรมจาวาท่ีพฒั นาข้นึ เพ่ือระบุว่า เม่อื เรียกใช้ tag แลว้ จะต้องทำคำสัง่ อยา่ งไร
ในท่ีนจ้ี ะกำหนดชอ่ื Tag เปน็ NameTag และโปรแกรมจาวาเป็น NameTagHandler โดยโปรแกรมจะทำการอ่านคา่
พารามเิ ตอร์ name และพมิ พ์ข้อความ Hello xxxx จำนวนสบิ ครง้ั การสรา้ งไฟล์ Tag Handler จะมขี ้ันตอนดงั น้ี
1. คล๊ิกขวาที่ Project JSPDemo จากนั้นเลือกคำส่งั New → Class
กำหนด Package = tags , Class Name = NameTagHandler
เลือก SuperClass = SimpleTagSupport
รปู ท่ี 11.3 การสร้าง Java Tag Handler Class
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
94
2. ทำการ Implement Method ช่ือ doTag( ) และ สร้าง method ประเภท setter เพม่ิ ช่อื setName( )
รปู ที่ 11.4 การ Implement method ท่จี ะถูกเรียกเม่ือมกี ารใช้ Custom Tag
3. หน้าต่าง Editor จะแสดงไฟล์ NameTagHandler.java ใหเ้ ขยี น source code ดงั Listing ท่ี 11.2
Listing ท่ี 11.2 โปรแกรม NameTagHandler.java
import java.io.IOException;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.JspFragment;
import javax.servlet.jsp.tagext.SimpleTagSupport;
public class NameTagHandler extends SimpleTagSupport {
String name;
public void setName(String name) {
this.name = name;
}
@Override
public void doTag() throws JspException, IOException {
super.doTag();
JspWriter out = getJspContext().getOut();
try {
JspFragment f = getJspBody();
if (f != null) f.invoke(out);
for (int i = 0; i < 10; i++) {
out.println("Hello " + name + "<br>");
}
} catch (java.io.IOException ex) {
throw new JspException("Error in NameTagHandler tag", ex);
}
}
}
11.2.2 สรา้ ง Tag Library Descriptor
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
95
ไฟล์นจี้ ะใช้เกบ็ รายชือ่ Tag ตา่ งๆ ท่ีมอี ยูเ่ พ่ือสามารถนำ tag ต่างๆ มาใช้ในโปรแกรม JSP
โดยใช้คำส่งั <%@taglib ...%>
การสรา้ ง Tag Library Descriptor จะมีขน้ั ตอนดังนี้
1. คลก๊ิ ขวาท่ี Project JSPDemo เลือก New → Folder
เลอื ก JSPDemo → WebContent → WEB-INF แลว้ กำหนด Folder name = tlds
รปู ท่ี 11.5 สร้าง Folder เพือ่ เกบ็ Tag Language Descriptor
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
96
2. เลือก Project JSPDemo → WebContent → WEB-INF → tlds
คลิกขวาที่ Folder tlds
กำหนด TLD Name = MyTags.tld ***ให้ใส่ นามสกลุ tld ด้วย แล้ว กด Finish
รปู ท่ี 11.6 การสร้าง File Tag Library Descriptor
3. หนา้ ต่าง Editor จะแสดงไฟลท์ ่ชี ื่อ MyTags.tld ทีอ่ ยู่ในโฟลเดอร์ \WebContent\WEB-INF\tlds
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
97
4. Implement code ดงั Listing ที่ 11.3
Listing ท่ี 11.3 โปรแกรม MyTags.tld
<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee,
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd">
<tlib-version>1.0</tlib-version>
<short-name>MyTags</short-name>
<uri>/WEB-INF/tlds/MyTags</uri>
<tag>
<name>NameTagHandler</name>
<tag-class>tags.NameTagHandler</tag-class>
<body-content>scriptless</body-content>
<attribute>
<name>name</name>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag>
</taglib>
11.2.3 เขียนโปรแกรม helloTag.jsp
จะเรยี กใช้ Tag ทช่ี อื่ NameTag โดยจะมี source code ดงั Listing ที่ 3 การสร้างโปรแกรม helloTag.jsp จะมี
ข้ันตอนดงั น้ี
1. เลือกหนา้ ตา่ ง Projects แลว้ คลก๊ิ ขวาท่ีโหนด JSPDemo จากนนั้ เลอื กคำสงั่ New > Other...
2. ในไดอะล็อก New File ให้เลือก Categories ทีชื่อ Web ซง่ึ โปรแกรมก็จะแสดง File Types ต่างๆ ภายใต้
Category น้ี ใหเ้ ราเลอื ก JSP แล้วกด Next
3. กำหนด JSP File Name: เปน็ helloTag แล้วกด Finish
4. ในหน้าตา่ ง editor ให้แก้ไข source code ของไฟล์ helloTag.jsp ใหเ้ ปน็ ไปตาม Listing ที่ 11.4
5. ทำการ run โปรแกรม จะได้ผลลัพธเ์ ชน่ เดียวกบั โปรแกรม hello.jsp
Listing ท่ี 11.4 โปรแกรม helloTag.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Demo</title>
</head>
<body>
<h1>JSP Demo</h1>
<myTags:NameTagHandler name="Thanisa" />
</body>
</html>
11.3 การพัฒนาโปรแกรม helloJSTL.jsp
โปรแกรม helloJSTL.jsp เปน็ โปรแกรม JSP ท่ีทำงานเช่นเดียวกบั โปรแกรมท่ผี ่านมาแต่จะทำการเรียกใช้
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
98
JSP Standard Tag Library ในการพมิ พ์ขอ้ ความ Hello xxx สิบครั้ง แทนการเขียนคำส่งั scriptlet โดยโปรแกรมนี้จะ
มี source code ดงั Listing ท่ี 11.5 และจะมีข้ันตอนการพัฒนาโปรแกรมดังนี้
1. คลกิ๊ ขวาที่ Project JSPDemo เลือก New → JSP File
กำหนด JSP File Name = helloJSTL แลว้ กด Finish
2. ตรวจสอบ JSTL Libraries ท่ีตอ้ งใชง้ าน ถา้ ไมม่ ใี ห้ทำการ import เขา้ มา
ตามหวั ข้อ 2. เพมิ่ JSTL Library เพอื่ ให้ JSP เรยี กใช้งานได้ (หน้าที่ 75)
รปู ที่ 11.7 ตรวจสอบ Library ของ JSTL
3. ในหน้าต่าง editor ให้แกไ้ ข source code ของไฟล์ helloJSTL.jsp ให้เปน็ ไปตาม Listing ท่ี 11.5
4. ทำการ run โปรแกรม
โดยกำหนด URL เป็น http://localhost:8080/JSPDemo/helloJSTL.jsp?name=Thanisa
จะได้ผลลัพธเ์ ช่นเดยี วกับโปรแกรม hello.jsp
Listing ที่ 11.5 โปรแกรม helloJSTL.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Demo</title>
</head>
<body>
<h1>JSP Demo</h1>
<c:forEach var="i" begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>
</body>
</html>
11.4 การพฒั นาโปรแกรม helloTagFile.jsp
JSP 2.0 อนญุ าตใหเ้ ราสร้าง custom tag โดยการเขียนไฟล์ html หรือ JSP แทนที่จะเขียนโปรแกรมภาษาจาวา
ซ่ึงทำให้งา่ ยตอ่ การพัฒนา ในทน่ี เ้ี ราจะพฒั นาโปรแกรม helloTagFile.jsp ซึง่ จะทำการเรียกใช้ custom tag ท่ชี ่อื
NameTagFile ที่เปน็ tag file ซ่ึงเป็นโปรแกรม JSP โดยมขี ั้นตอนการพัฒนาดงั นี้
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
99
11.4.1 สร้าง Tag File
ไฟล์นี้จะทำหน้าน้ีเป็นตวั จัดการ Tag โดยเขียนเปน็ โปรแกรม JSP และมีขนั้ ตอนการพฒั นาดังนี้
1. สร้าง Folder ช่ือ tags ภายใต้ \WebContent\WEB-INF\
2. คล๊กิ ขวาท่ี Folder tags กำหนด File Name = NameTagFile ดังรูป
รปู ที่ 11.8 การสรา้ ง Tag File
การเขยี นโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
100
3. หน้าตา่ ง Editor ให้ implement source code ดัง Listing ท่ี 11.6
Listing ท่ี 11.6 โปรแกรม NameTagFile.tag
<%@tag description="Tag Name" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:forEach var="i" begin="1" end="10">
Hello ${param.name} <br>
</c:forEach>
4. เนอ่ื งจากมี Tag Name ใหม่มาเพ่มิ กรณที ่ี File JSP มี Tag ชือ่ นถี้ กู เรียกใช้
มนั จะหา Tag Handler มาทำงาน โดยดูจาก <%@taglib uri="/WEB-INF/tlds/MyTags" prefix="myTags"
%>
ซ่ึงกค็ ือ File MyTags.tld ท่เี ราสรา้ งข้นึ มา ดงั นน้ั ต้องเพิม่ Configuration ชือ่ Tag ใหม่ เข้าไป
ดงั Listing ท่ี 11.7
Listing ที่ 11.7 เพม่ิ Tag Name ใหม่เข้าท่ี Tag Library Descriptor (MyTags.tld)
<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee,
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd">
<tlib-version>1.0</tlib-version>
<short-name>MyTags</short-name>
<uri>/WEB-INF/tlds/MyTags</uri>
<tag>
<name>NameTagHandler</name>
<tag-class>tags.NameTagHandler</tag-class>
<body-content>scriptless</body-content>
<attribute>
<name>name</name>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag>
<!--##########################################################-->
<tag-file>
<name>NameTagFile</name>
<path>/WEB-INF/tags/NameTagFile.tag</path>
<attribute>
<name>name</name>
<rtexprvalue>true</rtexprvalue>
<type>java.lang.String</type>
</attribute>
</tag-file>
<!--##########################################################-->
</taglib>
การเขียนโปรแกรม Java Servlet / JSP Assoc.Prof.Dr.Thanachart Numnonda/ Asst Prof.Thanisa Kruawaisayawan
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
webprogramming-eclipse
Discover the best professional documents and content resources in AnyFlip Document Base.
Search