wiki:waue/2010/0608

Version 18 (modified by rock, 14 years ago) (diff)

--

jsp + servlet 的範例程式<第一階段>
實作Model2 的 MVC 架構

本篇為此電子書(2開發簡單的servlet&jsp)的實做練習

零. 下載資源

0.A 用 virtualbox 虛擬機器

下載 virtualbox 的硬碟檔

  • 此硬碟檔為ubuntu 10.04 版本,已經調整好教材,請用virtualbox 3.2.2 以上版本掛載

0.B 自行下載資源

  1. 下載tomcat 6.5
  1. 下載 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
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("<html>");
    out.println("<head>");
    out.println("<title>Hello Servlet</title>");
    out.println("</head>");
    out.println("<body>");
    out.println("<h1> Hello! " + name + " !</h1>");
    out.println("</body>");                                       
    out.println("</html>");
    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 version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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-app_2_5.xsd">
    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello.do</url-pattern>
    </servlet-mapping>
</web-app>

1.5 啟動web容器:tomcat

cd /opt/tomcat
bin/startup.sh

1.6 用瀏覽器測試

http://localhost:8080/servlet1/hello.do?name=caterpillar

ps: ?name=caterpillar 可以改成你的名子來測試是否成功


練習

如果程式碼的第一行多了package宣告,要如何編譯執行

package tw.org.nchc.opsrc;
#其他相同省略~~~
  • Hit 1: 重新編譯,並放置正確的路徑下 (mkdir -p tw/org/nchc/opsrc)
  • Hit 2: 修改 web.xml (<servlet-class>tw.org.nchc.opsrc.HelloServlet?</servlet-class>)

範例二

  • 此範例對應到手冊 2.1.4 的範例 (p2-10 ~ p2-11)

2.1 管理網頁帳號

gedit /opt/tomcat/conf/web.xml
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
  <role rolename="tomcat"/>
  <role rolename="manager"/>
  <user username="nutchuser" password="nutchez" roles="tomcat,manager"/>
</tomcat-users>

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

有看到範例一的網頁即完成

練習

透過網頁介面,將專案分別進行

  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
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
import java.util.*;
public class Hello {
    private Map<String, String> messages;
    public Hello() {
        messages = new HashMap<String, String>();
        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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type"
              content="text/html; charset=UTF-8">
        <title>${param.user}</title>
    </head>
    <body>
        <h1>${message}</h1>
    </body>
</html>

這個jsp檔為servlet所respone的呈現頁

3.4 佈署web容器:web.xml

gedit /opt/tomcat/webapps/servlet3/WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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-app_2_5.xsd">
    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello.do</url-pattern>
    </servlet-mapping>
</web-app>

注意,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
http://localhost:8080/servlet3/hello.do?user=caterpillar
http://localhost:8080/servlet3/hello.do?user=Justin
http://localhost:8080/servlet3/hello.do?user=waue

練習

改寫程式碼,當輸入 user=rock,passwd=123456時,秀出歐八講的圖片,否則回應帳號密碼錯誤