{{{ #!html

jsp + servlet 的範例程式<第一階段>

實作Model2 的 MVC 架構

}}} [[PageOutline]] 本篇為此電子書（2開發簡單的servlet&jsp）的實做練習 * [http://secuse.nchc.org.tw/jspservlet/jspservlet%e5%88%9d%e9%9a%8e.pdf 下載 pdf 手冊][[BR]] = 零. 下載資源 = == 0.A 用 virtualbox 虛擬機器 == [http://secuse.nchc.org.tw/jspservlet/u1004.vdi 下載 virtualbox 的硬碟檔] * 此硬碟檔為ubuntu 10.04 版本，已經調整好教材，請用virtualbox 3.2.2 以上版本掛載 == 0.B 自行下載資源 == 1. [http://secuse.nchc.org.tw/jspservlet/tomcat-6.0.26.tar.gz 下載tomcat 6.5] 2. [http://secuse.nchc.org.tw/jspservlet/eclipse-SDK-3.5.2-linux-gtk.tar.gz 下載 eclipse 3.5 linux版] = 範例一 = * 2.1.1~ 2.1.3 的範例 (p2-1~p2-10) == 1.0 == * 專案目錄將呈現以下結構 || /opt/tomcat/webapps/servlet1/ || || || || || || + || WEB-INF/ || || || || || || - || web.xml || || || || || + || classes/ || || || || || || - || HelloServlet.java || || == 1.1 建立目錄 == {{{ cd /opt/tomcat/webapps/ mkdir -p /opt/tomcat/webapps/servlet1/WEB-INF/classes }}} == 1.2 第一個程式:HelloServlet.java == {{{ cd /opt/tomcat/webapps/servlet1/WEB-INF/classes gedit HelloServlet.java }}} {{{ #!java import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); out.println(""); out.println(""); out.println("Hello Servlet"); out.println(""); out.println(""); out.println("

Hello! " + name + " !

"); out.println(""); out.println(""); out.close(); } } }}} == 1.3 編譯:HelloServlet.java檔 == {{{ cd /opt/tomcat/webapps/servlet1/WEB-INF/classes javac -classpath /opt/tomcat/lib/servlet-api.jar ./HelloServlet.java }}} == 1.4 製作佈署描述檔:web.xml == {{{ cd /opt/tomcat/webapps/servlet1/WEB-INF/ gedit web.xml }}} {{{ #!xml

HelloServlet

/hello.do

}}} == 1.5 啟動web容器:tomcat == {{{ cd /opt/tomcat bin/startup.sh }}} == 1.6 用瀏覽器測試 == [http://localhost:8080/servlet1/hello.do?name=caterpillar] ps: '''?name=caterpillar''' 可以改成你的名子來測試是否成功 ------------ == 練習 == 如果程式碼的第一行多了package宣告，要如何編譯執行 {{{ #!java package tw.org.nchc.opsrc; #其他相同省略~~~ }}} * Hit 1: 重新編譯，並放置正確的路徑下 (mkdir -p tw/org/nchc/opsrc) * Hit 2: 修改 web.xml (tw.org.nchc.opsrc.HelloServlet) = 範例二 = * 此範例對應到手冊 2.1.4 的範例 (p2-10 ~ p2-11) == 2.1 管理網頁帳號 == {{{ gedit /opt/tomcat/conf/tomcat-users.xml }}} {{{ #!xml }}} == 2.2 封裝成war檔 == {{{ cd /opt/tomcat/webapps/servlet1/ jar cvf ~/servlet1.war * }}} 此處注意不可 ''cd /opt/tomcat/webapps/ ;jar cvf ~/servlet1.war servlet1/* ''，因為這樣會多一層servlet1的目錄刪除/opt/tomcat/webapps/servlet1/ 整個專案，再重開tomcat {{{ rm -rf /opt/tomcat/webapps/servlet1/ /opt/tomcat/bin/shutdown.sh /opt/tomcat/bin/startup.sh }}} 先開啟[http://localhost:8080/servlet1/hello.do?name=caterpillar] 網頁錯誤（因為已經被移除掉了） == 2.3 用管理頁面佈署 war 檔 == [http://localhost:8080/manager/html/list] 佈署~/servlet1.war檔（圖形介面難以文字描述）開啟[http://localhost:8080/servlet1/hello.do?name=caterpillar] 有看到範例一的網頁即完成 == 練習 == 透過網頁介面，將專案分別進行[[br]] 1. 停止 2. 開啟 3. 移除 = 範例三 = * 2.2 節（p2-11~p2-20） == 3.0 == * 專案目錄將呈現以下結構 || /opt/tomcat/webapps/servlet3/ || || || || || || - || hello.jsp|| || || || || + || WEB-INF/ || || || || || || - || web.xml || || || || || + || classes/ || || || || || || - || HelloServlet.java || || || || || - || Hello.java || || == 3.1 建立control:HelloServlet.java == {{{ cd /opt/tomcat/webapps/ mkdir -p /opt/tomcat/webapps/servlet3/WEB-INF/classes cd /opt/tomcat/webapps/servlet3/WEB-INF/classes gedit HelloServlet.java }}} {{{ #!java import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloServlet extends HttpServlet { private Hello hello; public HelloServlet() { hello = new Hello(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("user"); String message = hello.doHello(name); request.setAttribute("message", message); request.getRequestDispatcher("hello.jsp").forward(request, response); } } }}} == 3.2 建立model:Hello.java == {{{ gedit /opt/tomcat/webapps/servlet3/WEB-INF/classes/Hello.java }}} {{{ #!java import java.util.*; public class Hello { private Map messages; public Hello() { messages = new HashMap(); messages.put("caterpillar", "Hello"); messages.put("Justin", "Welcome"); messages.put("momor", "Hi"); } public String doHello(String user) { String message = messages.get(user); return message + ", " + user + "!"; } } }}} == 3.3 建立view:hello.jsp == {{{ gedit /opt/tomcat/webapps/servlet3/hello.jsp }}} {{{ #!java <%@page contentType="text/html" pageEncoding="UTF-8"%> ${param.user}

${message}

}}} 這個jsp檔為servlet所respone的呈現頁 == 3.4 佈署web容器:web.xml == {{{ gedit /opt/tomcat/webapps/servlet3/WEB-INF/web.xml }}} {{{ #!xml

HelloServlet

/hello.do

}}} 注意，HelloServlet 的 url-pattern 可任意命名，但千萬不可命名成 '''''hello.jsp''''' == 3.5 編譯control與model == {{{ cd /opt/tomcat/webapps/servlet3/WEB-INF/classes javac -cp /opt/tomcat/lib/servlet-api.jar ./Hello.java javac -cp /opt/tomcat/lib/servlet-api.jar:. ./HelloServlet.java }}} 上面的步驟順序很重要，並且在編譯HelloServlet 時，classpath 必須引入本身目錄，否則會出現錯誤訊息：找不到Hello這個symbol == 3.6 重新啟動tomcat == {{{ cd /opt/tomcat bin/shutdown.sh bin/startup.sh }}} == 3.7 測試 == 比較以下網址的不同處: [http://localhost:8080/servlet3/hello.do?user=momor][[br]] [http://localhost:8080/servlet3/hello.do?user=caterpillar][[br]] [http://localhost:8080/servlet3/hello.do?user=Justin][[br]] [http://localhost:8080/servlet3/hello.do?user=waue][[br]] == 練習 == 改寫程式碼，當輸入 user=rock,passwd=123456時，秀出歐八講的圖片，否則回應帳號密碼錯誤