View
243
Download
0
Embed Size (px)
Citation preview
企業建置前端Java Server Page 程式設計
井民全
outlineJSP Container網頁表單的處理
瀏覽器 IE Netscape
JSP page
Web 伺服器 (Apache 或 IIS)
產生 Servlet 程式碼
編譯 Servlet 程式碼
1. Request
4. Response
JSP 執行的過程
JSP Container就是能夠執行 JSP 的伺服器JSP Container List
Name Price Descript
Apache Tomcat 3.2.1
Free 不支援 EJB
Inprise Application Server
$8500/CPU Jbuilder 完全整合
Caucho Resin 2.1
開發或個人使用免費
所有的 container: http://www.flashline.com/Components/appservermatrix.jsp
Caucho Resin 2.1
網址 : http://www.caucho.com/download/index.xtp
HTTP/1.1ServletsJSP ProcessingLoad Balancing最重要的是 , 可以與 IIS 整合
Resin Installation安裝 IIS 套件 in W2000解壓縮 resin-ee-2.1.2.zip 到 c:\
會在 c:\ 建立 resin-ee-2.1.2 目錄設定
執行 c:\ resin-ee-2.1.2 \bin\ setup.exe
指定 resin home
指定 c:\inetpub\scirpts
Resin Installation指定 IIS Server:
設定 C:\resin-ee-2.1.2\conf\ resin.conf
執行 :C:\resin-ee-2.1.2\bin\ httpd.exe
C:\inetpub\wwwroot
Test
建立 test.jsp 放到 c:\Inetpub\wwwroot
<%@ page language=javascript %>2 + 2 = <%= 2 + 2 %>
鍵入 http://localhost/test.jsp
Scripting Element Declarations
<%! 宣告要用到的類別或變數 %>
Scriptlets<% out.println(“Hello World”); %>
Expressions ( 運算式 )<%= 1+1 %> 注意 : 沒有分號
注意分號
Declarations 宣告變數
<%! int I=0; %><%! int a, b, c; %>
宣告物件變數<%! Circle a = new Cirlce(2,0); %>
定義 function<%! public String f(int I) { if ( I < 3 ) return “I 小於三” ; } %>
可以定義 class 嗎 ?<%! class Person { String Name; public Person(){ Name=“Guest”; } }%>
<% Person Tom=new Person();%>
Scriptlets可包含任何有效程式片斷主程式的撰寫區 , 只要合乎 Java 語法
即可<% 起始 程式片斷%> 結束
Scriptlets 範例<%
String name=null;
if( request.getParameter(“name”) == null){
%>
沒有輸入 name (html 的部分 )
<%
}
else
out.println(“Hi….”+ name);
1+…+100 的範例<!% int I=0 , Sum=0; %>
<%
for (I=0; I<= 100; I++)
Sum+=I;
%>
<font color="blue"> <%=Sum%> </font>
宣告變數
Scriptlets
Html 的部分
試試看 !
Resin 設定設定為 NTServer:
當系統 reboot 時 , Resin 自動啟動
dos> resin-ee-2.1.2/bin/httpd -install
• 取消 :
dos> resin-ee-2.1.2/bin/httpd -remove
Resin 設定與 Jbuilder 整合
Copy resin-jbuilder.jar 到 Jbuilder lib/ext 目錄 .
參考資料 :http://www.caucho.com/resin/ref/ide-jbuilder.xtp
參考資料http://www.jsptw.com/Resin 操作參考 : http://www.caucho.com/resin/java_tut/index.xtp
網頁表單的處理
參考資料 : JavaServer Pages 技術手冊
表單的功能 : 讓使用者透過網頁輸入資料
基本的傳送方法 Get
Post
http:// URL 位址 ? Name1=Value1 & Name2=Value2
如何利用表單傳送資料
控制項 Name 與 Value 和 URL 位址分開傳送
簡單的 Form
<Form method="Get" action="test.jsp"> <Input Type="Text" Name="name"></Form>
選擇傳送的方法 選擇傳送的地點Test.htm
<% String Name=null; Name=request.getParameter(“name”);
out.println(“你輸入的內容“ +name);
%>
Test.jsp
常見的輸入型態本文輸入型態 (Text)密碼 (Password)選項按鈕 (Radio)核取方塊 (Check)下拉選項 (Select)檔案輸入 (File)本文區輸入 (Textarea)
<Input Type ="Text" Name="Jing" MaxLength=10 Size=5 Value="TextInput">
本文輸入型態單行輸入
屬性<Input Type= “Text” >
Name 名稱MaxLength 允許輸入最大字數Size 欄位寬度Value 預設值
範例 :
密碼輸入型態遮掩使用者所輸入的資料 . ( 沒有編碼 )
屬性<Input Type= “Password” >
Name 名稱 ( 與 Text 相同 )
MaxLength 允許輸入最大字數Size 欄位寬度Value 預設值
<Input Type =“Password" Name="Jing" MaxLength=10 Size=5 Value="TextInput">
範例 :
選項按鈕讓使用者可以選擇 ( 單選 )
屬性<Input Type= “Radio” >
Name 群組名稱
Value 傳到對方網頁的值Checked 預設被選到
範例 :<Input Type = Radio Name=“群組 1” Value=“M” Checked> 男 <Input Type = Radio Name=“群組 1” Value=“W”> 女 <Input Type = Radio Name="群組 1“ Value=“None”> 第三性公關
核取方塊可多重選擇
屬性
<p> 興趣 :   <Input Type="CheckBox" Name="Habit" Value="Reading">閱讀 <Input Type="CheckBox" Name="Habit" Value="Game"> 打電動 <Input Type="CheckBox" Name="Habit" Value="Travel"> 旅行 </p>
<Input Type= “CheckBox” >
同選項方塊
範例 :
下拉選項 所佔空間較小 , 廣被大家使用
<Select Name=“Old”> <Option Value=“10”> 10 – 20 </Option> <Option Value=“20” Selected> 20 – 30 </Option> <Option Value=“30”> 30 – 40 </Option></Select>
Name 選項控制項名稱
Option Value 傳到對方網頁的值Selected 預設被選到Size 欄位大小
利用 JSP 讀取表單傳來的資料
綜合範例<html>
</html>
<Form Name="Example" method="Post" action="Form.jsp">
</Form>
<p> 姓名 :   <Input Type="Text" Name="Name"> </p>
<p> 密碼 :   <Input Type="Password" Name="Passwd"> </p>
<p> 性別 :  
<Input Type="Radio" Name=“Sex" Value="Man">
<Input Type="Radio" Name=“Sex" Value="Woman"></p>
Select 控制項
Check Box 控制項
檔名 : Form.htm
<input type="submit" value="傳送檢核 ">
<input type="reset" value="重新輸入 ">傳送按鈕 清除按鈕
<p>年齡 :  
<Select Name="Old">
<Option Value="10"> 10 - 20 </option>
<Option Value="20"> 20 - 30 </option> </Select> </p>
<p>興趣 :  
<Input Type="Check Box" Name="Habit" Value=Reading"> 閱讀
<Input Type="Check Box" Name="Habit" Value=Game"> 打電動 </p>
Select 控制項
Check Box 控制項
回上一頁
接收資料的 JSP 端<html>
<body><%
String Name=request.getParameter("Name");
String Password = request.getParameter(“Password”);
String Sex=request.getParameter(“Sex”);
String Old=request.getParameter(“Old”);
String [] Habit=request.getParameterValues(“Habit”);
%>
姓名 :  <%=Name%>
</body></html>
進一步的程式處理 (push)
檔名 : Form.jsp
下一頁
<%if(Sex.equals(“Man”)
out.println(“ 男 <br>”); else out.pritnln(“ 女 <br>”);%>
進一步的程式處理
回上一頁
測試 ( 最簡單 )將專案的 defaultroot 中的所有內容Copy -> www root 中即可
注意 : 要先把 Jbuilder 正在 debug 的專案停下來
測試 Step 1: 複製整個 jsp 專案到 c:\test Step 2: 複製 Form.htm 到 defaultroot 目錄中
在 IIS 中加入虛擬目錄 test Step 3: 虛擬目錄連到 defaultroot 中
設定 Resin 目錄 mapping Step 4: 編輯 resin.conf 加入
Restart the Resin<path-mapping url-pattern='/test/*' real-path='C:\test\Form\defaultroot'/>
完整程式範例 : Form
檔案上傳允許使用者將自己的檔案上傳到伺服器傳送檔案的編碼方式
規格 : http://www.ietf.org/rfc/rfc1867.txt
<Form ENCType=“multipart/form-data” > <Input Type=“File”></Form>
伺服器不能直接用 request.getParameter() 取得檔案資料 .
利用 O’Reilly 的MultipartRequest提供原始碼隨時都在 update下載網址 : http://www.servlets.com/cos/index.html
安裝 Step 1: 解壓縮 cos-27May2002.zip Step 2: 把 cos.jar Resin 目錄下的 lib 中 cos.jar C:\jakarta-tomcat-4.1.12\common\lib
(Tomcat)
Step 3: 重新啟動 Resin (bin/httpd)參考資料 :http://www.servlets.com/cos/index.htmlhttp://www.caucho.com/support/resin-interest/9912/0123.html
Html 檔的撰寫<Form Name=“Form1” ENCType=“multipart/form-data” Method=“Post” Action=“UploadFile.jsp”>
</Form>
<p> 上傳檔案 1:<input type="file" name="File1" size="20" maxlength="20"> </p>
控制項的名稱 控制項大小 最大可輸入大小
<input type="submit" value="上傳檔案 ">
<input type="reset" value="清除所有的資料 ">傳送按鈕 清除按鈕
檔名 : UpLoadFile.htm
Jsp 檔撰寫– JBuilder 設定
Step 1: 利用 Jbuilder 建立一個 JSP 專案Step 2: 建立一個新的 JSP 檔Step 3: 設定 Library
加入新的 library
1
2
選擇 cos.jar 所在的目錄
檔名 : UpLoadFile.jsp
Jsp 檔撰寫<%@ page import="com.oreilly.servlet.MultipartRequest"%>
<Body>
</Body>
<%
%>
MultipartRequest multi=new MultipartRequest(request, "c:\\Test", 5*1024*1024);
讀取資料物件檔案放置位置
限制檔案大小
java.util.Enumeration FileName=multi.getFileNames();取出控制項的名稱
取出檔案名稱
下一頁
while(FileName.hasMoreElements()){
String Name=(String) FileName.nextElement();
String SystemFileName=multi.getFilesystemName(Name);
out.println(SystemFileName+"<BR>");
}
取出檔案名稱
回上一頁
安裝與測試Step 1: 把 Jsp project c:\testStep 2: 把 UpLoadFile.htm Jsp Project \defaultroot
Step 3: 設定 IIS 虛擬目錄 TEST c:\test Step 4: 設定 Resin resin.conf 對應 IIS 目錄
Step 5: 重新啟動 Resin
<path-mapping url-pattern='/test/*' real-path='C:\test\'/>
完整程式範例 : UpLoadFilename