1 / 95

WEB 架構

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 的執行.

ehren
Download Presentation

WEB 架構

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JSP 2.0 動態網頁技術 第三版 WEB架構

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

  3. JSP 2.0 動態網頁技術 第三版 客戶端執行的網頁語言

  4. JSP 2.0 動態網頁技術 第三版 JSP的執行 產生的程式碼以及其類別檔在 tomcat\work\Catalina\localhost\[test\]org\apache\jsp\xxx_jsp.java

  5. 研討主題 • Hello World：動態 – 由 JSP 產生 • <%@page contentType="text/html" pageEncoding="Big5"%> • <h3 align="center"> • <% • out.println("Hello 大家好"); • System.out.println("debug output"); • %> • </h3>

  6. 研討主題 • Hello World ：動態 – 由 JSP 產生 • 動態 – 由 JSP 產生 • <%@page contentType=“text/html” pageEncoding=“Big5”%> 或者 • <%@page contentType=“text/html; charset=Big5”%> • 請檢視網頁的原始碼 • JSP 檔裡面，可以全部是 HTML 而沒有 JSP 的程式碼嗎？ • 試試看

  7. 研討主題

  8. 研討主題 • 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

  9. 研討主題 • 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>

  10. 研討主題 • 互動式 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 都可以

  11. 研討主題 • 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>

  12. 研討主題 • 互動式 Hello World（強化版） • 人機介面：希望能輕易的再次執行 • 可以結合 if-else 敘述：例如，如果沒有任何輸入資料，則顯示 “Hello World”。 • 如果使用者並未輸入任何資料？ • 如果沒輸入資料（或者資料錯誤），讓使用者有再次輸入的機會。 • 我們之後會逐步說明！

  13. 研討主題 • 求解：a*x2 + b*x + c = 0 • 接收到的資料是字串，需要轉換才能運算 • Double.parseDouble()；Integer.parseInt() • 如果 a = 0 或者 b2-4ac < 0 • 明確說明原因，並要求重新輸入：response.sendRedirect(URL) • 呼叫另一個獨立網頁 • 轉回原網頁 • 請注意，這個用法相當於一個 GET；意思就是說，需要考量編碼問題

  14. 研討主題

  15. 研討主題 • 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>

  16. 研討主題 • 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>

  17. 研討主題 • cal3.jsp • // 資料檢查 • if(a == 0) { • String msg = URLEncoder.encode("a 的值為 0，請重新輸入"); • response.sendRedirect("cal.jsp?message=" + msg); • }

  18. 研討主題 • 還有 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）

  19. 研討主題 • jsp:forward 的用法 <jsp:forward page="cal-f.jsp"> <jsp:param name="message" value="a 的值為 0，請重新輸入" /> </jsp:forward>

  20. 研討主題 • 練習題：寫一個程式，將使用者輸入的攝氏溫度轉換成華氏溫度 • 加強版：由選項按鈕（或者下拉式選單）決定究竟是攝氏轉華氏、還是華氏轉攝氏 • 嗯，如果在範例中，使用者不小心輸入不是數字的資料（如英文、中文）呢？ • 之後，例外處理中說明

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

  22. 研討主題 • 請試求以下數列的總和。 • 求 1 到 1/35 的和 • 求前二十項的和 • 需要迴圈：for (和 while) 語法與 pattern • 是否能以亂數的方式產生分母？ • Math.random()

  23. 研討主題 • 請試求以下矩陣之和與積。 • 如果陣列大小改變了呢？ • 這是所謂的一維陣列，還有二維、三維、…陣列

  24. 研討主題 • <%@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) 的用法 • // 可以把這段利用迴圈改寫嗎？ • %>

  25. 研討主題 • <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>

  26. 研討主題 • 在之前的範例中，我們都假設使用者會依照我們的期望，輸入正確的資料，只可惜事實上，這是非常遙不可及的想法 • 你希望使用者輸入數字，例如 10，但是他卻輸入”a”。 • 你希望使用者輸入的數字不能小於 1，但是他卻輸入”-1”。

  27. 研討主題

  28. 例外處理：try-catch 子句 研討主題 try{ 執行敘述1; 執行敘述2; 執行敘述3; …; //偵錯程式區塊 } catch(例外類型1 例外物件){ 執行敘述　…; //處理例外錯誤的程式片段 } catch(例外類型2 例外物件){ 執行敘述　…; //處理例外錯誤的程式片段 } catch(例外類型n 例外物件){ 執行敘述　…; //處理例外錯誤的程式片段 } finally{ 執行敘述　…; //一定會執行的程式區段 } try至少要配上一個catch，而finally則是可有可無。

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

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

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

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

  33. 例外類別 說明 NumberFormatException 字串無法轉換的例外。 ArithmeticException 數學運算所產生的例外。 ArrayIndexOutOfBounds-Exception 陣列索引值超出陣列大小的例外。 NullPointerException 參考物件為 null 的例外。 研討主題 Exception 類別： • 例外處理機制，建構在一組預先設計好的例外類別之上，JSP 藉由各種例外類別，處理程式中各種可能所發生的錯誤。 • java.lang.Execption 類別為所有例外類別的基礎類別；放置於最後一個 catch。

  34. 研討主題 • 練習題：a*x2 + b*x + c = 0 • 如果 a = 0 或者 b2-4ac < 0 • 如果輸入的不是數字 • 明確說明原因，並要求重新輸入 • a、b、c 的值都由亂數產生器產生（可以是整數）

  35. 研討主題 • 簡易的系統分析與 ERD（實體關聯圖） • 流程以畫面呈現

  36. 研討主題 • 加入會員

  37. 研討主題 • 登入

  38. 研討主題 • 實體關聯圖 學號 + 課程編號 • PK（主鍵）以及 FK（外來鍵） • 記得要加上”index”（索引）

  39. 研討主題 • 資料庫練習題（分組作業） • 以 Course, Student, Grade 為例 • 請顯示每一位學生修課的總學分數（含未修任何學分的學生） • 請顯示每一位學生的平均分數 • 請顯示每個學生所修的課程（常見於明細表） • XXX • DB • Programming • YYY • Architecture • ZZZ • English • Accounting

  40. 研討主題 • 資料庫的安裝 • 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

  41. 研討主題 • 資料庫練習題（分組作業） • 請利用 MySQL 建立 Course, Student, Grade 表格，並建立範例資料；以 SQL 語法呈現下列結果 • 請顯示每一位學生修課的總學分數（含未修任何學分的學生） • 請顯示每一位學生的平均分數

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

  43. 研討主題 • 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>

  44. 研討主題 • <%@ 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."); • } • } • %>

  45. 研討主題 • <% • 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);

  46. 研討主題 • <% • 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>");

  47. 研討主題 • // 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>

  48. 研討主題 • 多網頁的系統 • 以資料的修改為例 • 原始碼http://web.nchu.edu.tw/~jlu/classes/jsp/update.zip • JSP 的生命週期 • 經由生命週期的了解，可以提升 JSP 的效能 • http://web.nchu.edu.tw/~jlu/cyut/jsp.shtml#life

  49. 研討主題 • 多網頁的系統

  50. 研討主題 • 多網頁的系統

More Related