web 架構

JSP 2.0 動態網頁技術第三版

WEB 架構


<html>

<head><meta http-equiv="Content-Type" content="text/html;charset=Big5" /><title>JSP</title></head>

<body> Hello 大家好</body>

</html>

靜態網頁範例

其他細節，請參考 http://web.nchu.edu.tw/~jlu/tutorials.shtml 的 HTML 入門

http://web.nchu.edu.tw/~jlu/tutorials.shtml


客戶端執行的網頁語言


JSP 的執行

產生的程式碼以及其類別檔在 tomcat\work\Catalina\localhost\[test\]org\apache\jsp\xxx_jsp.java

研討主題• Hello World ：動態 – 由 JSP 產生

<%@page contentType="text/html" pageEncoding="Big5"%><h3 align="center"><% out.println("Hello 大家好 "); System.out.println("debug output");%></h3>

研討主題• Hello World ：動態 – 由 JSP 產生

– 動態 – 由 JSP 產生• <%@page contentType=“text/html”

pageEncoding=“Big5”%> 或者• <%@page contentType=“text/html; charset=Big5”%>• 請檢視網頁的原始碼

– JSP 檔裡面，可以全部是 HTML 而沒有 JSP 的程式碼嗎？

• 試試看

研討主題

研討主題• HTML form 元件

<html><head><meta http-equiv="Content-Type" content="text/html;charset=Big5"><title>Hello Form</title></head>

<body><form method="get" action="http://localhost:8080/jsp/hello1.jsp"><input type="text" value=" 老呂 " name="name"><input type="submit"></form></body></html>

其他細節，請參考 http://web.nchu.edu.tw/~jlu/classes/examples/cgi/forms.html

http://web.nchu.edu.tw/~jlu/classes/examples/cgi/forms.html

研討主題• hello1.jsp

<%@page contentType="text/html" pageEncoding="Big5"%><h3 align="center"><% request.setCharacterEncoding(“Big5”); // ??? 只有 post 有用 String name = request.getParameter("name"); out.println("Hello " + name);%></h3>

研討主題• 互動式 Hello World

– 若輸入為英文 (JSP 內建物件 request)• form 是 HTML 網頁，由 HTML 內呼叫遠端的 JSP• 注意 GET/POST 時，網址的變化• JSP 利用 request.getParameter() 取得使用者輸入的資料• 再次說明 System.out.println() 除錯時的用法

– 若輸入為中文• request.setCharacterEncoding("Big5");

– 這個方法只適用 POST ，卻無法正確處理 GET 。• String name = new

String(request.getParameter(“name").getBytes("ISO-8859-1"), "Big5");

– 這個方法 GET/POST 都可以

研討主題• hello3.jsp

<%@page contentType="text/html" pageEncoding="Big5"%><h3 align="center"><% String name = request.getParameter("name"); name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "Big5"); out.println("Hello " + name);%></h3>

研討主題

• 互動式 Hello World （強化版）– 人機介面：希望能輕易的再次執行

• 可以結合 if-else 敘述：例如，如果沒有任何輸入資料，則顯示 “ Hello World” 。

– 如果使用者並未輸入任何資料？• 如果沒輸入資料（或者資料錯誤），讓使用者有再

次輸入的機會。• 我們之後會逐步說明！

研討主題

• 求解： a*x2 + b*x + c = 0– 接收到的資料是字串，需要轉換才能運算– Double.parseDouble() ； Integer.parseInt()– 如果 a = 0 或者 b2-4ac < 0

• 明確說明原因，並要求重新輸入：response.sendRedirect(URL)

– 呼叫另一個獨立網頁– 轉回原網頁

• 請注意，這個用法相當於一個 GET ；意思就是說，需要考量編碼問題

研討主題

研討主題• cal.html

<html><head><meta http-equiv="Content-Type" content="text/html;charset=Big5"><title> 解一元二次方程式 </title></head><body><form method="POST" action="cal1.jsp">輸入 a 值： <input type="text" name="a"/><br/>輸入 b 值： <input type="text" name="b"/><br/>輸入 c 值： <input type="text" name="c"/><br/><input type="submit" value=" 求解 "/></form></body></html>

研討主題• cal1.jsp

<%@page contentType="text/html" pageEncoding="Big5"%><h3 align="center"><% request.setCharacterEncoding("Big5"); double a = Double.parseDouble(request.getParameter("a")); double b = Double.parseDouble(request.getParameter("b")); double c = Double.parseDouble(request.getParameter("c")); double x1 = (-b + Math.sqrt(b*b - 4*a*c)) / (2 * a); double x2 = (-b - Math.sqrt(b*b - 4*a*c)) / (2 * a); out.println("x1 = " + x1 + "<br/>"); out.println("x2 = " + x2 + "<br/>");%></h3>

研討主題• cal3.jsp

// 資料檢查if(a == 0) { String msg = URLEncoder.encode("a 的值為 0 ，請重新輸

入 "); response.sendRedirect("cal.jsp?message=" + msg);}

研討主題

• 還有 jsp:forward 的用法（要說嗎 ??? ）– <jsp:forward> 是一個 JSP 內建的特殊標籤– 與 response.sendRedirect(URL) 功能類似，但有

下列不同處：• 直接呼叫，而非經由瀏覽器• 被呼叫的 JSP （ B.jsp ）和呼叫的 JSP （ A.jsp ），

共享一個 request 物件– http://someurl/jsp/A.jsp?data1=ddd

– A.jsp 呼叫 B.jsp 時，傳遞了 data2=eee ；因為 A 和 B 共用一個 request 物件， B.jsp 可以同時取得 data1 和 data2 的值

• 網址列只會顯示呼叫的 JSP （ A.jsp ）

研討主題

• jsp:forward 的用法 <jsp:forward page="cal-f.jsp">

<jsp:param name="message" value="a 的值為 0 ，請重新輸入 " />

</jsp:forward>

研討主題

• 練習題：寫一個程式，將使用者輸入的攝氏溫度轉換成華氏溫度– 加強版：由選項按鈕（或者下拉式選單）決定

究竟是攝氏轉華氏、還是華氏轉攝氏

• 嗯，如果在範例中，使用者不小心輸入不是數字的資料（如英文、中文）呢？– 之後，例外處理中說明

研討主題

• 往簡單的數位教學以及資料庫的資料處理進行– 需要知道迴圈– 需要知道陣列的資料型態– 需要知道例外處理的方式

研討主題• 請試求以下數列的總和。

– 求 1 到 1/35 的和– 求前二十項的和– 需要迴圈： for ( 和 while) 語法與 pattern

– 是否能以亂數的方式產生分母？• Math.random()

...11

1

9

1

7

1

5

1

3

11

研討主題• 請試求以下矩陣之和與積。

– 如果陣列大小改變了呢？– 這是所謂的一維陣列，還有二維、三維、…陣

列

1

3

4

7

8

2

研討主題<%@page contentType="text/html" pageEncoding="Big5"%>

<% int[] a1 = new int[3]; int[] a2 = new int[3];

for(int i=0; i<a1.length; i++) { a1[i] = (int) (Math.random() * 10); a2[i] = (int) (Math.random() * 10); }

int[] c = new int[3]; for(int i=0; i<c.length; i++) { c[i] = a1[i] + a2[i]; } // 以下結合 table 和 Expression Lanaguage (EL) 的用法 // 可以把這段利用迴圈改寫嗎？%>

研討主題• 在之前的範例中，我們都假設使用者

會依照我們的期望，輸入正確的資料，只可惜事實上，這是非常遙不可及的想法– 你希望使用者輸入數字，例如 10 ，但

是他卻輸入” a” 。– 你希望使用者輸入的數字不能小於 1 ，

但是他卻輸入” -1” 。

研討主題

例外處理： try-catch 子句 try{ 執行敘述 1; 執行敘述 2; 執行敘述 3; 　…　 ; //偵錯程式區塊}catch( 例外類型 1 例外物件 ){ 執行敘述　…　 ; // 處理例外錯誤的程式片段}catch( 例外類型 2 例外物件 ){ 執行敘述　…　 ; // 處理例外錯誤的程式片段}catch( 例外類型 n 例外物件 ){ 執行敘述　…　 ; // 處理例外錯誤的程式片段}finally{ 執行敘述　…　 ; // 一定會執行的程式區段}

研討主題

try至少要配上一個 catch ，而 finally 則是可有可無。

例外處理的範例<%@page contentType="text/html" pageEncoding="Big5"%>

<h3 align="center"><% request.setCharacterEncoding("Big5");

try { String input = request.getParameter("a"); int n = Integer.parseInt(input); //int n = Integer.parseInt(request.getParameter("a")); int result = 0; for(int i=1; i<=n; i++) { result = result + i; } out.println(" 總和 = " + result + "<br/>"); } catch(NumberFormatException e) { out.println(" 輸入值必須都是數字 !! <br/>"); } finally { out.println("<a href='loop-try1.html'> 回首頁 </a>"); }%></h3>

例外處理的範例<%@page contentType="text/html" pageEncoding="Big5"%><h3 align="center"><% request.setCharacterEncoding("Big5"); try { String input = request.getParameter("a"); int n = Integer.parseInt(input); if(n < 1) { throw new Exception(" 輸入值不得小於 1"); } int result = 0; for(int i=1; i<=n; i++) { result = result + i; } out.println(" 總和 = " + result + "<br/>"); } catch(NumberFormatException e) { out.println(" 輸入值必須都是數字 !! <br/>"); } catch(Exception e) { out.println(e.getMessage() + "<br/>"); } finally { out.println("<a href='loop-try2.html'> 回首頁 </a>"); }%></h3>

usingMultiCatch.jsp<%@page contentType="text/html“ pageEncoding="Big5"%><html> <head><title>多重 catch子句 </title></head><body> <% try{ String input = request.getParameter("input"); int intNumber = Integer.parseInt(input); out.print("您指定的陣列數目： "+ intNumber + "<br><br>" );

int a[]=new int[intNumber]; for(int i=0;i<=intNumber;i++){ a[i]=i*10 ; out.println(a[i]+ "<br>") ; } } catch(NumberFormatException e){ out.println(" 網址列的參數不正確 !! <br>") ; out.println(" 請在參數列輸入整數值 !! <br>") ; } catch(ArrayIndexOutOfBoundsException e){ out.println("超出陣列大小 "); } finally { out.println("<b><br><br> 程式執行結束 !! <b>"); } %> </body></html>

• catch 內程式的設計原則：– 儘可能反應”例外“發生的原因– 進可能讓使用者有機會彌補錯誤

研討主題

Exception 類別：• 例外處理機制，建構在一組預先設計好的例外類別之上， JSP 藉由各種例外類別，處理程式中各種可能所發生的錯誤。

• java.lang.Execption 類別為所有例外類別的基礎類別；放置於最後一個 catch 。

研討主題

例外類別說明

NumberFormatException

字串無法轉換的例外。

ArithmeticException 數學運算所產生的例外。

ArrayIndexOutOfBounds-Exception

陣列索引值超出陣列大小的例外。

NullPointerException 參考物件為 null 的例外。

研討主題

• 練習題： a*x2 + b*x + c = 0– 如果 a = 0 或者 b2-4ac < 0– 如果輸入的不是數字– 明確說明原因，並要求重新輸入

– a 、 b 、 c 的值都由亂數產生器產生（可以是整數）

研討主題

• 簡易的系統分析與 ERD （實體關聯圖）– 流程以畫面呈現

研討主題

• 加入會員

研討主題

• 登入

研討主題

• 實體關聯圖學號 + 課程編號

• PK （主鍵）以及 FK （外來鍵）• 記得要加上” index” （索引）

研討主題• 資料庫練習題（分組作業）

– 以 Course, Student, Grade 為例– 請顯示每一位學生修課的總學分數（含未修任

何學分的學生）– 請顯示每一位學生的平均分數– 請顯示每個學生所修的課程（常見於明細表）

• XXX– DB– Programming

• YYY– Architecture

• ZZZ– English– Accounting

研討主題• 資料庫的安裝

– http://web.nchu.edu.tw/~jlu/cyut/mysql.shtml

– 在 \mysql 的目錄下建立 startup.batstart e:\mysql\bin\mysqld --defaults-file=my.ini --console

– 在 \mysql 的目錄下建立 shutdown.bate:\mysql\bin\mysqladmin –u root –p shutdown

• JDBC 的安裝– Connector/J:

http://dev.mysql.com/downloads/connector/j/

– http://web.nchu.edu.tw/~jlu/cyut/mysql-jdbc.shtml

http://web.nchu.edu.tw/~jlu/cyut/mysql.shtml

http://dev.mysql.com/downloads/connector/j/

http://web.nchu.edu.tw/~jlu/cyut/mysql-jdbc.shtml

研討主題• 資料庫練習題（分組作業）

– 請利用 MySQL 建立 Course, Student, Grade 表格，並建立範例資料；以 SQL 語法呈現下列結果

– 請顯示每一位學生修課的總學分數（含未修任何學分的學生）

– 請顯示每一位學生的平均分數

AppServ

• 如果你在其他課程已經安裝了 AppServ 又不能解除安裝：

研討主題• JSP 查詢 MySQL 資料

<form method="post" action="http://localhost:8080/jsp/query1.jsp">Price > <input type="text" value="100" name="price" size="20"><br><input type="submit"></form>

研討主題<%@ page contentType=“text/html;charset=Big5” language=“java” import="java.sql.*" %><html><%! private Connection conn = null;

public void jspInit() { try { Class.forName(“com.mysql.jdbc.Driver”); // 載入 JDBC 驅動程式 // 請記得設定適當的 UID 和 PWD 。 conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1/eric", "jlu", "abcd"); } catch (Exception e) { System.out.println("Fail to connect to database."); } } public void jspDestroy() { try { conn.close(); } catch (Exception e) { System.out.println("Fail to close connection."); } }%>

研討主題<% String salary = request.getParameter("price"); String aQuery = null; try { aQuery = "select * from Product where Price > " + salary;%> <head><title>Database Query</title></head> <body><% // Construct a SQL statement and submit it Statement aStatement = conn.createStatement(); ResultSet rs = aStatement.executeQuery(aQuery);

研討主題<% ResultSetMetaData rsmeta = rs.getMetaData(); int cols = rsmeta.getColumnCount();

// contruct table out.println("<table border=\"1\">"); out.println("<tr>");

// Display column headers for(int i=1; i<=cols; i++) { out.print("<th>"); out.print(rsmeta.getColumnLabel(i)); out.print("</th>"); } out.println("\n</tr>");

研討主題 // Display query results. while(rs.next()) { out.print("<tr>"); for(int i=1; i<=cols; i++) { out.print("<td>"); out.print(rs.getString(i)); out.print("</td>"); } out.println("</tr>"); } // Clean up rs.close(); aStatement.close(); } catch (Exception e) { System.out.println("Exception Occurs: " + e); }%> </body></html>

研討主題• 多網頁的系統

– 以資料的修改為例– 原始碼 http://web.nchu.edu.tw/~jlu/classes/jsp/

update.zip

• JSP 的生命週期– 經由生命週期的了解，可以提升 JSP 的效能– http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#life

研討主題• 多網頁的系統

研討主題• 多網頁的系統：如果不是 radio button ，而

是 checkbox 呢？– type 改成 checkbox （所有同一組 checkbox

的名稱仍維持相同）

研討主題• 多網頁的系統：

– 利用 String[] input = request.getParameterValues(“n1”);

研討主題• Session

– http://web.nchu.edu.tw/~jlu/cyut/jsp-session.shtml

– 主要功能：• 可以在網頁之間傳遞資料（比之前的 hidden 有效率）

– session.setAttribute() 和 session.getAttribute()

• 可以避免使用者在多網頁的過程中，利用”我的最愛”或者直接輸入 URL 的方式切入某一特定網頁

– isNew() 和 invalidate()

• 與 Session 結合的 Connection– session.setAttribute(“conn”, conn);

– Connction conn = session.getAttribute(“conn”);

研討主題

• 何謂資料庫的交易（ Transaction ）？– 交易以一個批次為單位執行數個獨立的 SQL

敘述。– 交易將操作資料庫的動作視為不可分割的過

程。– 一旦執行過程中某段 SQL 執行發生錯誤，

則先前所有執行完畢的步驟都將失效，只有整個交易過程成功執行完成之後，所有 SQL敘述的異動內容才會整個生效。

交易方法

• 交易的狀態必須由 Connection 作設定。– setAutoCommit () 用來設定是否目前的連線

處於交易狀態。– rollback() 為取消交易的任何動作，將所有狀

態回復到未執行任何操作的初始狀態。– commit() 則是確認所有交易的動作。

交易過程

以 Select3.jsp 為例<%@ page contentType="text/html;charset=Big5“ import="java.sql.*" %><html><%! private Connection conn = null; public void jspInit() { try { Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); conn = DriverManager.getConnection("jdbc:odbc:csie", "jlu", “newpass"); conn.setAutoCommit(false); } catch (Exception e) { System.out.println("Fail to connect to database."); } } public void jspDestroy() { try { conn.close(); } catch (Exception e) { System.out.println("Fail to close connection."); } }%>

以 Select3.jsp 為例 <head><title>Database Update</title></head> <body><% // 取得 Select1.jsp 傳過來的資料 String num = request.getParameter("num"); String name = request.getParameter("name"); String price = request.getParameter("price"); String qty = request.getParameter("qty");

// 建立 update SQL 指令；請小心 SQLInjection 的攻擊 // 應該仔細檢查收到的資料是否符合正確格式 String uSQL = "update Product set name='" + name + "', price=" +

price + ", qty=" + qty + " where id=" + num;

以 Select3.jsp 為例 try { Statement stmt = conn.createStatement();

if(stmt.executeUpdate(uSQL) > 0) { conn.commit(); out.println("<h3 align='center'>修改成功 </h3>"); out.println("<a href='Select1.jsp'>繼續修改資料 </a>"); } else { throw new SQLException(" 資料修改失敗 "); } stmt.close(); } catch (Exception e) { conn.rollback(); System.out.println("Exception Occurs: " + e); }%> </body></html>

研討主題• 安全連線（ https ）

– 優點：對現有的程式沒有任何影響– http://web.nchu.edu.tw/~jlu/cyut/tomcat55.shtml

研討主題• O’Reilly 上傳套件• 下載位置

– http://www.servlets.com/cos/

– 下載檔案 cos-26Dec2008.zip

– 解壓縮，並將 lib\cos.jar 安裝於 tomcat\common\lib 、 tomcat\shared\lib 、或者 webapps\test\WEB-INF\lib （僅供 test 使用）

– 重新啟動 tomcat

MultipartRequest 方法成員

方法說明

getFileNames() 取得包含所有檔案上傳檔案名稱的Enumeration 物件。

getFilesystemName(fieldName)

取得檔案名名稱。

getContentType(fieldName) 取得檔案名型態。

getFile(fieldName) 取得 File 檔案物件。

檔案上傳的表單範例<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Big5"> <title></title> </head> <body> <form action=“uploadfiles.jsp" enctype="multipart/form-data“ method="post" > <input type=“file” name=“file1” size=“50” /> <br> <input type=“file” name=“file2” size=“50” /> <br> <input type=“submit” value="上傳 " /> <input type="reset" value="清除 "/> </form><div align="center"><font color="red">上傳檔案最大不能大於

10MB</font></div> </body></html>

檔案上傳的表單範例

檔案上傳的 JSP 程式<%@page contentType="text/html" pageEncoding="Big5"%><%@page import="com.oreilly.servlet.MultipartRequest"%><%@page import="java.io.*"%><%@page import="java.util.*"%><html> <head><title>上傳檔案作業 -O'Reilly</title></head> <body> <% // 第二個參數指的是檔案儲存位置，範例使用 d:\tomcat\temp // 第三個參數為限制上傳檔案大小：範例為 10MB // 第四個參數使得可以正確顯示上傳中文檔案的名稱 // 這行敘述執行完，檔案已經上傳完畢。 MultipartRequest theMultipartRequest = new MultipartRequest(request,”D:\\tomcat\\temp\\",10*1024*1024, “Big5”) ;

檔案上傳的 JSP 程式 // 這之後的都只是顯示用的 String f1 = mrequest.getFilesystemName("file1"); String f2 = mrequest.getFilesystemName("file2");

if(f1 != null) out.println(f1 + "<br>"); if(f2 != null) out.println(f2 + "<br>"); out.println(" 成功上傳案上列檔案 "); %> </body></html>

檔案上傳的 JSP 程式

研討主題• 練習題：修改上傳程式，使得

– 顯示上傳檔案的大小• 利用 java.io.File 的 length()

– 假設只限制能上傳 word 檔• 檢查方式：副檔名，以及 content type

研討主題• Java Mail

– 由 Java (servlet/JSP) 程式傳送 email 的套件– JavaMail API 1.4.4 下載位置：

• http://www.oracle.com/technetwork/java/index-138643.html

• 如果你安裝的 JDK 不是 1.6.x 版以上，使用 JavaMail API ，必須利用到 JavaBeans Activation Framework (JAF) ，因此也需要下載安裝 JAF

• 檔案解壓縮之後，將 mail.jar 和 activation.jar 安裝於 tomcat\common\lib 、 tomcat\shared\lib 、或者 webapps\test\WEB-INF\lib （僅供 test 使用）

– 重新啟動 tomcat

JSP 網頁發送電子郵件

傳送郵件程式碼<%@page contentType="text/html“ pageEncoding="Big5"%><%@page import

="java.util.*,java.io.*,javax.mail.*,javax.mail.internet.*,javax.activation.*"%>

<html> <head><title>JavaMail</title></head> <body> <% // 設定寄件郵件伺服器，需要依據你的 ISP 的設定而改變 Properties theProperties = System.getProperties() ; theProperties.put("mail.host",“dragon.nchu.edu.tw") ; theProperties.put("mail.transport.protocol","smtp") ; // 此 session 不是 JSP 的 session ，而是代表一個 email 的對話 Session theSession = Session.getDefaultInstance(theProperties,null) ; theSession.setDebug(false) ;

傳送郵件程式碼 // 一封 email 的資訊，含表頭以及內容 MimeMessage theMessage = new MimeMessage(theSession) ; // email 的送信人 theMessage.setFrom(new InternetAddress("[email protected]") ) ; // email 的收件人 theMessage.setRecipients(Message.RecipientType.TO,"[email protected]") ; // 一次設定多個收件人 // theMessage.setRecipients(Message.RecipientType.TO, // InternetAddress.parse(“[email protected],B@com")); // email 的標題 theMessage.setSubject("JavaMail 測試郵件 ", "Big5") ; // email 的內容 theMessage.setText("JSP 與 JavaMail測試郵件內容 ..." , "Big5") ; // 將 email 寄送出去 Transport.send(theMessage) ; out.println("郵件寄送完成 ") ; %> </body></html>

收集送信資訊

• 使用 MimeMessage必須提供的幾項重要資訊。參數項目方法說明

寄信來源 setFrom() 寄信人電子郵件位址。

收信目的 setRecipients()

收信人電子郵件位址。

信件主旨 setSubject() 設定郵件主旨。

信件內容 setText() 設定郵件內容。

收集送信資訊

• 而 RecipientType代表所要傳送的型態。型態說明

Message.RecipientType.TO 郵件收件人。

Message.RecipientType.CC 副本收件人。

Message.RecipientType.BCC

副本密件收件人

研討主題• 畫面：（ Batman 寄信給我耶）

研討主題• 練習題：

– 請為 JavaMail 程式設計一個寫信的介面（ HTML form 表單），然後由 JSP 程式來傳送信件。

研討主題• web.xml

– 系統常用資訊的存放地；例如， dsn 、 port 、 username 、 password 等

– http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#web

– 請利用 web.xml 定義連結資料庫時所用到的資訊，然後你的 jsp 程式可以讀取這些資料。

• 可以包含 JDBC 的驅動程式名稱， URL 、帳號 /密碼等。

http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#web

研討主題• 數字的格式化

– 一般來說，我們在 JSP 處理的數字大多為 int 、double 等資料型態。

– 在顯示 double 的資料時，往往會出現我們不希望看到的小數

– 為了能格式化數字的輸出（尤其是 double ），我們可以藉助

• java.text.DecimalFormat

• 或者 JSP 的 JSTL

import java.text.*; public class TestFormat { public static void main (String argv[]) { double x = 2.0, y = 3.0; System.out.println("x / y = " + x/y); DecimalFormat two = new DecimalFormat("0.00"); System.out.println("x / y = " + two.format(x/y)); // 先行零不顯示 DecimalFormat thr = new DecimalFormat("#.00"); System.out.println("x / y = " + thr.format(x/y)); DecimalFormat fou = new DecimalFormat("$#,##0.00"); System.out.println("x / y = " + fou.format(x/y)); System.out.println("1234567.123456 = " + two.format(1234567.123456)); System.out.println("1234567.123456 = " + fou.format(1234567.123456)); } }

研討主題

• 經由之前的討論，我們可以得知，我們範例程式的輸出結果會像– x / y = 0.6666666666666666 – x / y = 0.67 – x / y = .67 – x / y = $0.67 – 1234567.123456 = 1234567.12 – 1234567.123456 = $1,234,567.12

研討主題

• 安裝 JSTL 1.1: http://tomcat.apache.org/taglibs/standard/– 解壓縮後，將 jstl.jar 和 standard.jar 放置於

tomcat 的適當位置

– 如果使用 1.1.2 版，課本的 usingformatNumber.jsp 有錯，需要把 “ ${20001000.123}” 改成 “ 20001000.123”

研討主題

<%@page contentType="text/html" pageEncoding="Big5"%><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><% double x = 123456789.123456789123456789; double y = 20000000 / 3.0;%><html> <head><title> 數值格式化 </title></head> <body> <table border="1" width="100%"> <tr> <th width="20%">格式 </th> <th width="40%"> 輸出 x</th> <th width="40%"> 輸出 y</th> </tr> <tr> <td align=right> 原始數值 </td>

<td> <fmt:formatNumber value="<%=x%>"/> </td><td> <fmt:formatNumber value="<%=y%>"/> </td>

</tr>

研討主題

<tr> <td align=right>移除分隔符號 </td> <td><fmt:formatNumber value="<%=x%>" groupingUsed='false'/></td> <td><fmt:formatNumber value="<%=y%>" groupingUsed='false'/></td> </tr> <tr> <td align=right>最大 2 位整數 </td> <td><fmt:formatNumber value="<%=x%>" maxIntegerDigits='2'/></td> <td><fmt:formatNumber value="<%=y%>" maxIntegerDigits='2'/></td> </tr> <tr> <td align=right>最小 12 位整數 </td> <td><fmt:formatNumber value="<%=x%>" minIntegerDigits='12'/></td> <td><fmt:formatNumber value="<%=y%>" minIntegerDigits='12'/></td> </tr> <tr> <td align=right>最大 2 位小數 </td> <td><fmt:formatNumber value="<%=x%>" maxFractionDigits='2'/></td> <td><fmt:formatNumber value="<%=y%>" maxFractionDigits='2'/></td> </tr>

研討主題

<tr> <td align=right> 新台幣 </td>  <td><fmt:formatNumber value="<%=x%>" type="currency" currencyCode="TWD"/> <td><fmt:formatNumber value="<%=y%>" type="currency" currencyCode="TWD"/> </td> </tr> <tr> <td align=right>自訂樣式 (#.####E0)</td> <td><fmt:formatNumber value="<%=x%>" pattern="#.####E0"/> <td><fmt:formatNumber value="<%=y%>" pattern="#.####E0"/> </td> </tr> </table> </body></html>

研討主題

研討主題

研討主題• 日期的格式化

– 一般來說，在 JSP 中需要處理的日期大部分分成兩種；一種是字串，另一種是資料庫（ JDBC ）回傳的 java.sql.Date 。

• 若是字串，我們需要利用 indexOf() 的方法將年、月、日分開。（也可以使用 StringTokenizer ）

• 若是 java.sql.Date– java.sql.Date 是 java.util.Date 的子類別，所以可以使用

getYear()［西元年 – 1900］、 getMonth() ［ 1 月為 0］、 getDate() 、 getHours() 、 getMinutes() 、以及 getSeconds() 來取得資料

– 但是， java.util.Date 的方法大多都 deprecated 。

<%@page contentType="text/html" pageEncoding="Big5" import="java.util.*"%><h3 align="center"><% Date date = new Date(); int yy = date.getYear(); int mm = date.getMonth(); int dd = date.getDate(); int hh = date.getHours(); int mi = date.getMinutes(); int ss = date.getSeconds();%>系統時間：民國 <%=yy-11%> 年 <%=mm+1%> 月 <%=dd%> 日 <%=hh%> 時 <%=mi%> 分 <%=ss%> 秒</h3>

研討主題

研討主題

<%@page contentType="text/html" pageEncoding="Big5" import="java.util.*"%><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><% Date nowDateTime = new Date();%><html> <head><title>日期時間格式化 </title></head> <body> <table border="1" width="100%"> <tr> <th width="50%">格式 </th> <th width="50%"> 輸出 </th> </tr> <tr> <td width="50%" align=right> 原始日期時間表示式 </td> <td width="50%"> <fmt:formatDate value="<%=nowDateTime%>" type="both" dateStyle="full" timeStyle="full" /> </td> </tr>

研討主題

<tr> <td width="50%" align=right>medium日期 </td> <td width="50%"> <fmt:formatDate value="<%=nowDateTime%>" type="date" dateStyle="medium" /> </td> </tr> <tr> <td width="50%" align=right>medium 時間 </td> <td width="50%"> <fmt:formatDate value="<%=nowDateTime%>" type="time" timeStyle="medium" /> </td> </tr> <tr> <td width="50%" align=right>MM-dd-yyyy HH:mm:ss</td> <td width="50%"> <fmt:formatDate value="<%=nowDateTime%>" type="date" timeStyle="medium" pattern="MM-dd-yyyy HH:mm:ss"/> </td> </tr> </table> </body></html>

研討主題

研討主題

研討主題• Open Flash Chart 2 與 JOFC2 套件

– 是一種讓網頁可以輕易產生圖表的方式– http://web.nchu.edu.tw/~jlu/cyut/ofc2/ofc2.shtml

研討主題• ZK

– 是一種結合前、端端的開發平台– http://web.nchu.edu.tw/~jlu/classes/xml/ajax/

ZK.shtml

web 架構

Documents