slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
WEB 架構 PowerPoint Presentation
Download Presentation
WEB 架構

Loading in 2 Seconds...

play fullscreen
1 / 95

WEB 架構 - PowerPoint PPT Presentation


  • 147 Views
  • Uploaded on

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 入門. 客戶端執行的網頁語言. JSP 的執行.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'WEB 架構' - ehren


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
JSP 2.0 動態網頁技術 第三版靜態網頁範例

<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 入門

slide4
JSP 2.0 動態網頁技術 第三版JSP的執行

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

slide5
研討主題
  • Hello World:動態 – 由 JSP 產生
  • <%@page contentType="text/html" pageEncoding="Big5"%>
  • <h3 align="center">
  • <%
  • out.println("Hello 大家好");
  • System.out.println("debug output");
  • %>
  • </h3>
slide6
研討主題
  • Hello World :動態 – 由 JSP 產生
    • 動態 – 由 JSP 產生
      • <%@page contentType=“text/html” pageEncoding=“Big5”%> 或者
      • <%@page contentType=“text/html; charset=Big5”%>
      • 請檢視網頁的原始碼
    • JSP 檔裡面,可以全部是 HTML 而沒有 JSP 的程式碼嗎?
      • 試試看
slide8
研討主題
  • HTMLform 元件
  • <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

slide9
研討主題
  • 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>
slide10
研討主題
  • 互動式 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 都可以
slide11
研討主題
  • 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>
slide12
研討主題
  • 互動式 Hello World(強化版)
    • 人機介面:希望能輕易的再次執行
      • 可以結合 if-else 敘述:例如,如果沒有任何輸入資料,則顯示 “Hello World”。
    • 如果使用者並未輸入任何資料?
      • 如果沒輸入資料(或者資料錯誤),讓使用者有再次輸入的機會。
      • 我們之後會逐步說明!
slide13
研討主題
  • 求解:a*x2 + b*x + c = 0
    • 接收到的資料是字串,需要轉換才能運算
    • Double.parseDouble();Integer.parseInt()
    • 如果 a = 0 或者 b2-4ac < 0
      • 明確說明原因,並要求重新輸入:response.sendRedirect(URL)
        • 呼叫另一個獨立網頁
        • 轉回原網頁
      • 請注意,這個用法相當於一個 GET;意思就是說,需要考量編碼問題
slide15
研討主題
  • 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>
slide16
研討主題
  • 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>
slide17
研討主題
  • cal3.jsp
  • // 資料檢查
  • if(a == 0) {
  • String msg = URLEncoder.encode("a 的值為 0,請重新輸入");
  • response.sendRedirect("cal.jsp?message=" + msg);
  • }
slide18
研討主題
  • 還有 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)
slide19
研討主題
  • jsp:forward 的用法

<jsp:forward page="cal-f.jsp">

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

</jsp:forward>

slide20
研討主題
  • 練習題:寫一個程式,將使用者輸入的攝氏溫度轉換成華氏溫度
    • 加強版:由選項按鈕(或者下拉式選單)決定究竟是攝氏轉華氏、還是華氏轉攝氏
  • 嗯,如果在範例中,使用者不小心輸入不是數字的資料(如英文、中文)呢?
    • 之後,例外處理中說明
slide21
研討主題
  • 往簡單的數位教學以及資料庫的資料處理進行
    • 需要知道迴圈
    • 需要知道陣列的資料型態
    • 需要知道例外處理的方式
slide22
研討主題
  • 請試求以下數列的總和。
    • 求 1 到 1/35 的和
    • 求前二十項的和
    • 需要迴圈:for (和 while) 語法與 pattern
    • 是否能以亂數的方式產生分母?
      • Math.random()
slide23
研討主題
  • 請試求以下矩陣之和與積。
    • 如果陣列大小改變了呢?
    • 這是所謂的一維陣列,還有二維、三維、…陣列
slide24
研討主題
  • <%@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) 的用法
  • // 可以把這段利用迴圈改寫嗎?
  • %>
slide25
研討主題
  • <table>
  • <tr>
  • <td>|</td><td><%=a1[0]%></td><td>|</td><td></td><td>|</td><td><%=a2[0]%></td><td>|</td>
  • <td></td><td>|</td><td><%=c[0]%></td><td>|</td>
  • </tr>
  • <tr>
  • <td>|</td><td><%=a1[1]%></td><td>|</td><td>+</td><td>|</td><td><%=a2[1]%></td><td>|</td>
  • <td>=</td><td>|</td><td><%=c[1]%></td><td>|</td>
  • </tr>
  • <tr>
  • <td>|</td><td><%=a1[2]%></td><td>|</td><td></td><td>|</td><td><%=a2[2]%></td><td>|</td>
  • <td></td><td>|</td><td><%=c[2]%></td><td>|</td>
  • </tr>
  • </table>
slide26
研討主題
  • 在之前的範例中,我們都假設使用者會依照我們的期望,輸入正確的資料,只可惜事實上,這是非常遙不可及的想法
    • 你希望使用者輸入數字,例如 10,但是他卻輸入”a”。
    • 你希望使用者輸入的數字不能小於 1,但是他卻輸入”-1”。
try catch
例外處理:try-catch 子句

研討主題

try{

執行敘述1;

執行敘述2;

執行敘述3;

…; //偵錯程式區塊

}

catch(例外類型1 例外物件){

執行敘述 …; //處理例外錯誤的程式片段

}

catch(例外類型2 例外物件){

執行敘述 …; //處理例外錯誤的程式片段

}

catch(例外類型n 例外物件){

執行敘述 …; //處理例外錯誤的程式片段

}

finally{

執行敘述 …; //一定會執行的程式區段

}

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

slide29
例外處理的範例
  • <%@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>
slide30
例外處理的範例
  • <%@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
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>

slide32

研討主題

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

例外類別

說明

NumberFormatException

字串無法轉換的例外。

ArithmeticException

數學運算所產生的例外。

ArrayIndexOutOfBounds-Exception

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

NullPointerException

參考物件為 null 的例外。

研討主題

Exception 類別:

  • 例外處理機制,建構在一組預先設計好的例外類別之上,JSP 藉由各種例外類別,處理程式中各種可能所發生的錯誤。
  • java.lang.Execption 類別為所有例外類別的基礎類別;放置於最後一個 catch。
slide34
研討主題
  • 練習題:a*x2 + b*x + c = 0
    • 如果 a = 0 或者 b2-4ac < 0
    • 如果輸入的不是數字
    • 明確說明原因,並要求重新輸入
    • a、b、c 的值都由亂數產生器產生(可以是整數)
slide35
研討主題
  • 簡易的系統分析與 ERD(實體關聯圖)
    • 流程以畫面呈現
slide36
研討主題
  • 加入會員
slide38
研討主題
  • 實體關聯圖

學號 + 課程編號

  • PK(主鍵)以及 FK(外來鍵)
  • 記得要加上”index”(索引)
slide39
研討主題
  • 資料庫練習題(分組作業)
    • 以 Course, Student, Grade 為例
    • 請顯示每一位學生修課的總學分數(含未修任何學分的學生)
    • 請顯示每一位學生的平均分數
    • 請顯示每個學生所修的課程(常見於明細表)
      • XXX
        • DB
        • Programming
      • YYY
        • Architecture
      • ZZZ
        • English
        • Accounting
slide40
研討主題
  • 資料庫的安裝
    • http://web.nchu.edu.tw/~jlu/cyut/mysql.shtml
    • 在 \mysql的目錄下建立 startup.bat

start e:\mysql\bin\mysqld --defaults-file=my.ini --console

    • 在 \mysql的目錄下建立 shutdown.bat

e:\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
slide41
研討主題
  • 資料庫練習題(分組作業)
    • 請利用 MySQL 建立 Course, Student, Grade 表格,並建立範例資料;以 SQL 語法呈現下列結果
    • 請顯示每一位學生修課的總學分數(含未修任何學分的學生)
    • 請顯示每一位學生的平均分數
appserv
AppServ
  • 如果你在其他課程已經安裝了 AppServ 又不能解除安裝:
slide43
研討主題
  • JSP 查詢 MySQL 資料
  • <form method="post" action="http://localhost:8080/jsp/query1.jsp">
  • Price &gt; <input type="text" value="100" name="price" size="20"><br>
  • <input type="submit">
  • </form>
slide44
研討主題
  • <%@ 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.");
  • }
  • }
  • %>
slide45
研討主題
  • <%
  • 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);
slide46
研討主題
  • <%
  • 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>");
slide47
研討主題
  • // Display query results.
  • while(rs.next()) {
  • out.print("<tr>");
  • for(inti=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>
slide48
研討主題
  • 多網頁的系統
    • 以資料的修改為例
    • 原始碼http://web.nchu.edu.tw/~jlu/classes/jsp/update.zip
  • JSP 的生命週期
    • 經由生命週期的了解,可以提升 JSP 的效能
    • http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#life
slide49
研討主題
  • 多網頁的系統
slide50
研討主題
  • 多網頁的系統
slide51
研討主題
  • 多網頁的系統
slide52
研討主題
  • 多網頁的系統
slide53
研討主題
  • 多網頁的系統:如果不是 radio button,而是 checkbox 呢?
    • type 改成 checkbox(所有同一組 checkbox 的名稱仍維持相同)
slide54
研討主題
  • 多網頁的系統:
    • 利用 String[] input = request.getParameterValues(“n1”);
slide55
研討主題
  • 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”);
slide56
研討主題
  • 何謂資料庫的交易(Transaction)?
    • 交易以一個批次為單位執行數個獨立的SQL敘述。
    • 交易將操作資料庫的動作視為不可分割的過程。
    • 一旦執行過程中某段SQL執行發生錯誤,則先前所有執行完畢的步驟都將失效,只有整個交易過程成功執行完成之後,所有SQL敘述的異動內容才會整個生效。
slide57
交易方法
  • 交易的狀態必須由 Connection 作設定。
    • setAutoCommit ()用來設定是否目前的連線處於交易狀態。
    • rollback()為取消交易的任何動作,將所有狀態回復到未執行任何操作的初始狀態。
    • commit()則是確認所有交易的動作。
select3 jsp
以 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 jsp1
以 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 jsp2
以 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>

slide62
研討主題
  • 安全連線(https)
    • 優點:對現有的程式沒有任何影響
    • http://web.nchu.edu.tw/~jlu/cyut/tomcat55.shtml
slide63
研討主題
  • 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檔案物件。

MultipartRequest方法成員
slide65
檔案上傳的表單範例

<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>

slide67
檔案上傳的 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”) ;

slide68
檔案上傳的 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>

slide70
研討主題
  • 練習題:修改上傳程式,使得
    • 顯示上傳檔案的大小
      • 利用 java.io.File 的 length()
    • 假設只限制能上傳 word 檔
      • 檢查方式:副檔名,以及 content type
slide71
研討主題
  • 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
slide73
傳送郵件程式碼

<%@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) ;

slide74
傳送郵件程式碼

// 一封 email 的資訊,含表頭以及內容

MimeMessage theMessage = new MimeMessage(theSession) ;

// email 的送信人

theMessage.setFrom(new InternetAddress("sean@testServer.com.tw") ) ;

// email 的收件人

theMessage.setRecipients(Message.RecipientType.TO,"tim@nantay.com.tw") ;

// 一次設定多個收件人

// theMessage.setRecipients(Message.RecipientType.TO,

// InternetAddress.parse(“A@edu.tw,B@com"));

// email 的標題

theMessage.setSubject("JavaMail 測試郵件", "Big5") ;

// email 的內容

theMessage.setText("JSP與JavaMail測試郵件內容..." , "Big5") ;

// 將 email 寄送出去

Transport.send(theMessage) ;

out.println("郵件寄送完成") ;

%>

</body>

</html>

slide75

參數項目

方法

說明

寄信來源

setFrom()

寄信人電子郵件位址。

收信目的

setRecipients()

收信人電子郵件位址。

信件主旨

setSubject()

設定郵件主旨。

信件內容

setText()

設定郵件內容。

收集送信資訊
  • 使用MimeMessage必須提供的幾項重要資訊 。
slide76

型態

說明

Message.RecipientType.TO

郵件收件人。

Message.RecipientType.CC

副本收件人。

Message.RecipientType.BCC

副本密件收件人

收集送信資訊
  • 而RecipientType代表所要傳送的型態 。
slide77
研討主題
  • 畫面:(Batman 寄信給我耶)
slide78
研討主題
  • 練習題:
    • 請為 JavaMail 程式設計一個寫信的介面(HTML form 表單),然後由 JSP 程式來傳送信件。
slide79
研討主題
  • web.xml
    • 系統常用資訊的存放地;例如,dsn、port、username、password 等
    • http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#web
    • 請利用 web.xml 定義連結資料庫時所用到的資訊,然後你的 jsp 程式可以讀取這些資料。
      • 可以包含 JDBC 的驅動程式名稱,URL、帳號/密碼等。
slide80
研討主題
  • 數字的格式化
    • 一般來說,我們在 JSP 處理的數字大多為 int、double 等資料型態。
    • 在顯示 double 的資料時,往往會出現我們不希望看到的小數
    • 為了能格式化數字的輸出(尤其是 double),我們可以藉助
      • java.text.DecimalFormat
      • 或者 JSP 的 JSTL
slide81

研討主題

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));

}

}

slide82
經由之前的討論,我們可以得知,我們範例程式的輸出結果會像經由之前的討論,我們可以得知,我們範例程式的輸出結果會像

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

研討主題

slide83
安裝 JSTL 1.1: http://tomcat.apache.org/taglibs/standard/

解壓縮後,將 jstl.jar 和 standard.jar 放置於 tomcat 的適當位置

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

研討主題

slide84

研討主題

<%@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>

slide85

研討主題

<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>

slide86

研討主題

<tr>

<td align=right>新台幣</td>

<!-- USD: 美金;CNY:人民幣 -->

<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>

slide88
研討主題
  • 日期的格式化
    • 一般來說,在 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。
slide89

研討主題

<%@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>

slide91

研討主題

<%@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>

slide92

研討主題

<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>

slide94
研討主題
  • Open Flash Chart 2 與 JOFC2 套件
    • 是一種讓網頁可以輕易產生圖表的方式
    • http://web.nchu.edu.tw/~jlu/cyut/ofc2/ofc2.shtml
slide95
研討主題
  • ZK
    • 是一種結合前、端端的開發平台
    • http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ZK.shtml