jsp程序設(shè)計實驗指導(dǎo)書2010

1、Jsp程序設(shè)計實驗指導(dǎo)書長春工業(yè)大學(xué)人文信息學(xué)院信息管理系信息管理與信息系統(tǒng)專業(yè)目錄前言一、上機實驗?zāi)康亩?、實驗基本?nèi)容三、實驗任務(wù)與時間安排實驗 1 JSP語法的練習(xí)一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)容（一）編寫main.jsp（二）編寫circle.jsp（三）編寫ladder.jsp（四）測試頁面四、思考實驗 2 練習(xí)request內(nèi)置對象一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)容四測試頁面五思考實驗 3 編寫計算器一、實驗?zāi)康亩?實驗要求三、 實驗內(nèi)容四測試頁面五思考實驗 4 猜數(shù)字游戲一、實驗?zāi)康亩?、實驗要求三實驗?nèi)容四測試頁面實驗 5 表單的客戶端驗證一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)

2、容實驗 6 jsp與javabean的結(jié)合一、實驗?zāi)康亩?、實驗要求三?實驗內(nèi)容實驗 7 標(biāo)準(zhǔn)化考試一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)容實驗 8 數(shù)據(jù)庫連接建立與關(guān)閉一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)容實驗 9 順序取得數(shù)據(jù)一、實驗?zāi)康亩?、實驗要求三、實驗?nèi)容實驗 10 用戶登陸功能的實現(xiàn)一、實驗?zāi)康亩嶒炓笕?、實驗?nèi)容實驗 11 取得記錄數(shù)一、實驗?zāi)康亩嶒炓笕?、實驗?nèi)容實驗 12 分頁顯示一、實驗?zāi)康亩?、實驗要求三、實驗步驟前言 一、上機實驗?zāi)康?上機實驗的目的是提高學(xué)生的分析問題、解決問題的能力和動手能力，通過實踐環(huán)節(jié)理解 JSP語言的基本結(jié)構(gòu)和程序設(shè)計方法。通過親手編程掌握 J

3、SP 語言編程的方法。 二、實驗基本內(nèi)容 為了使學(xué)生在上機實驗時目標(biāo)明確，本實驗指導(dǎo)書針對課程內(nèi)容編寫了 10 個實驗。學(xué)生可以在課內(nèi)機時先完成指導(dǎo)書中給出的程序，理解所學(xué)的知識，在此基礎(chǔ)上再編寫其他應(yīng)用程序。指導(dǎo)書中的 10 個實驗如下。 三、實驗任務(wù)與時間安排 JSP是一門實踐性很強的課程，除了在課內(nèi)安排的實驗外，鼓勵同學(xué)在課外用相關(guān)技術(shù) 進行編程練習(xí)。JSP上機實驗時間為 16學(xué)時，每2課時一個實驗。實驗 1 JSP語法的練習(xí) 一、實驗?zāi)康?1 掌握jsp基本語法。2 掌握J(rèn)SP中page標(biāo)簽的使用。 3 掌握J(rèn)SP中forward動作標(biāo)簽的使用。 4 掌握jsp中include動作標(biāo)簽

4、的使用。二、實驗要求 編寫三個JSP頁面：main.jsp、circle.jsp和ladder.jsp，將三個JSP頁面保存在同一Web服務(wù)目錄中。main.jsp使用include動作標(biāo)記加載circle.jsp 和ladder.jsp頁面。circle.jsp頁面可以計算并顯示圓的面積，ladder.jsp可以計算并顯示梯形的面積。當(dāng)circle.jsp和ladder.jsp被加載時獲取main.jsp頁面include動作標(biāo)記的param子標(biāo)記提供的圓的半徑以及梯形的上底、下底和高的值。三、實驗內(nèi)容（一）編寫main.jsp加載circle.jsp頁面代碼如下：請同學(xué)們編寫加載梯形的代碼

5、，并傳遞參數(shù)。（二）編寫circle.jsp核心代碼如下：（三）編寫ladder.jsp請同學(xué)們根據(jù)題目要求編寫該頁面（四）測試頁面結(jié)果如圖所示：四、思考如何能夠?qū)A的半徑和梯形的個邊實現(xiàn)動態(tài)輸入？實驗 2 練習(xí)request內(nèi)置對象一、實驗?zāi)康?、 掌握form表單提交信息2、 掌握request對象的方法3、 掌握在jsp頁面聲明、使用方法二、實驗要求編寫三個jsp頁面：login.jsp、dologin.jsp和success.jsp，將三個jsp頁面保存在同一目錄下。login.jsp頁面結(jié)構(gòu)如下：dologin.jsp校驗login.jsp頁面的輸入內(nèi)容并進行頁面跳轉(zhuǎn)，內(nèi)容如下：1）

6、、當(dāng)用戶不輸入用戶名和密碼，直接點擊“登錄”時，跳回login.jsp頁面。2）、當(dāng)用戶只輸入用戶名或者只輸入密碼，就點擊“登錄”時，跳回login.jsp頁面，并且將用戶剛才輸入的用戶名或密碼顯示在對應(yīng)的位置。3）、當(dāng)用戶完整輸入用戶名和密碼，點擊“登錄”時，跳轉(zhuǎn)到success.jsp，并在該頁面顯示用戶名，以及該用戶是第幾個用戶。三、實驗內(nèi)容1、設(shè)計login.jsp2、編寫dologin.jsp3、編寫success.jsp四測試頁面五思考用戶訪問次數(shù)的記錄特點，何時重新計數(shù)？實驗 3 編寫計算器一、實驗?zāi)康?、 掌握html標(biāo)簽的使用2、 掌握request對象的使用2、 實驗要求實

7、現(xiàn)如下計算器。要求：當(dāng)用戶輸入的數(shù)據(jù)不完整時，需要重新輸入信息。輸入完整的數(shù)據(jù)后，要將輸入的數(shù)據(jù)以及計算的結(jié)果顯示在頁面上。3、 實驗內(nèi)容1、 jisuan.jsp，代碼如下：2、 dojisuan.jsp代碼如下：四測試頁面五思考如何能在結(jié)果頁面中顯示出對應(yīng)的操作符號，即計算后在jisuan.jsp的下拉菜單中顯示用戶輸入的操作符號，+、-、/或者*？實驗 4 猜數(shù)字游戲一、實驗?zāi)康?. 掌握session對象的使用二、實驗要求實現(xiàn)猜數(shù)字的小游戲。當(dāng)客戶訪問服務(wù)器上的getNumber.jsp時，隨機分配給客戶一個1100之間的整數(shù)，然后將這個整數(shù)存在客戶的session對象中。客戶在表單里

8、輸入一個整數(shù)，來猜測分配給自己的那個整數(shù)?？蛻糨斎胍粋€整數(shù)后，提交給result.jsp，該頁面負(fù)責(zé)判斷這個整數(shù)是否和客戶session對象中存在的那個整數(shù)相同，如果相同就連接到success.jsp；如果不相同就連接到large.jsp或small.jsp，然后，客戶在這些頁面再重新提交整數(shù)result.jsp，效果如下圖所示： 三實驗內(nèi)容1. getNumber.jsp2. Result.jsp3. large.jsp4. small.jsp5. success.jsp四測試頁面實驗 5 表單的客戶端驗證一、實驗?zāi)康?、 掌握客戶端驗證的方法，比如用戶輸入信息的長度以及信息的合法性驗證等4

9、、 掌握如何擴展驗證的內(nèi)容二、實驗要求1、 在Dreamweaver上制作JSP驗證頁面2、 通過Dreamweaver的預(yù)覽功能瀏覽頁面三、實驗內(nèi)容當(dāng)瀏覽者點擊提交按鈕時，表明瀏覽者已經(jīng)填寫完了這個表單，在一般情況下，服務(wù)器都需要對客戶端提交的數(shù)據(jù)進行驗證，判別其中的數(shù)據(jù)格式是否正確、填寫是否完整、數(shù)字是否越界等。所以，以下列出一些檢驗功能，請同學(xué)們分別設(shè)計表單，然后驗證表單信息。-檢查用戶輸入信息長度-限定字符串類型/在checktype函數(shù)中，在驗證年份的時候用了一個JAVASCRIPT的內(nèi)置函數(shù)isNaN(testvalue)，這個函數(shù)的作用是驗證一個字符串是不是一個數(shù)字（is not

10、 a number）。-限定數(shù)字的范圍實驗 6 jsp與javabean的結(jié)合一、實驗?zāi)康?、掌握javabean的定義以及使用二、實驗要求編寫一個jsp頁面，該頁面提供一個表單，用戶可以通過表單輸入兩個數(shù)和四則運算符號提交給該頁面。用戶提交表單后，jsp頁面將計算任務(wù)交給一個bean去完成。3、 實驗內(nèi)容1. 創(chuàng)建bean的java源文件2. 創(chuàng)建使用bean的jsp頁面實驗 7 標(biāo)準(zhǔn)化考試一、實驗?zāi)康?、掌握jsp的文件操作2、掌握javabean的應(yīng)用二、實驗要求使用bean來管理試題文件，jsp頁面調(diào)用bean實現(xiàn)網(wǎng)絡(luò)標(biāo)準(zhǔn)化考試。當(dāng)考試者選擇一套試題，并確定開始考試后，bean負(fù)責(zé)讀入

11、試題，并顯示給考試者。當(dāng)考試者在jsp頁面提供的文本框輸入全部的答案，單擊提交鍵后，jsp頁面再次調(diào)用bean來判斷考試者的得分，而且考試者只有一次提交答案的機會，bean還負(fù)責(zé)將考試者的成績保存到文件。三、實驗內(nèi)容1. 創(chuàng)建bean的源文件test.java2. 設(shè)計jsp頁面實驗 8 數(shù)據(jù)庫連接建立與關(guān)閉一、實驗?zāi)康?、掌握Access數(shù)據(jù)庫的創(chuàng)建和使用2、掌握數(shù)據(jù)表的創(chuàng)建、主鍵的設(shè)置以及數(shù)據(jù)的錄入3、掌握數(shù)據(jù)庫連接和關(guān)閉二、實驗要求1、創(chuàng)建Access數(shù)據(jù)庫2、創(chuàng)建一個學(xué)生信息表3、錄入數(shù)據(jù)4、配置ODBC數(shù)據(jù)源5、連接數(shù)據(jù)庫三、實驗內(nèi)容本實訓(xùn)制作了數(shù)據(jù)庫連接與關(guān)閉的例子。編程思路： 首

12、先，創(chuàng)建數(shù)據(jù)庫。我們這里采用ACCESS數(shù)據(jù)庫，創(chuàng)建一個學(xué)生數(shù)據(jù)庫，其中有一個數(shù)據(jù)表是學(xué)生信息數(shù)據(jù)表。路徑C盤根目錄數(shù)據(jù)表中信息如下：字段名稱數(shù)據(jù)類型說明NoChar學(xué)號NameChar姓名SexChar性別AgeChar年齡將學(xué)號no設(shè)置為主鍵。保存為student_info然后，在該數(shù)據(jù)表中錄入幾條記錄。第二步、創(chuàng)建該數(shù)據(jù)庫的ODBC數(shù)據(jù)源開始-控制面板-管理工具-ODBC數(shù)據(jù)源選擇系統(tǒng)數(shù)據(jù)源點擊添加選擇ACCESS數(shù)據(jù)庫點擊完成，出現(xiàn)如下所示在數(shù)據(jù)源名中輸入 student 記住這個名字然后點擊選擇，選擇你數(shù)據(jù)庫所在文件夾的位置點擊確定。第三步、熟悉以下，如下語法規(guī)則加載驅(qū)動程序的語法如

13、下：Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”)打開數(shù)據(jù)庫連接的語法如下:Connection Connection 對象變量=DriverManager.getConnection(“jdbc:odbc:ODBC 數(shù)據(jù)源名稱”,”使用者賬號”,”密碼”)關(guān)閉數(shù)據(jù)庫連接的語法如下：Connection 對象變量.close()程序代碼：數(shù)據(jù)庫連接的建立與關(guān)閉已經(jīng)建立與數(shù)據(jù)庫的連接已經(jīng)關(guān)閉數(shù)據(jù)庫的連接實驗 9 順序取得數(shù)據(jù)一、實驗?zāi)康?、掌握如何將數(shù)據(jù)庫中的數(shù)據(jù)取得2、掌握如何將數(shù)據(jù)庫中的數(shù)據(jù)正確的顯示二、實驗要求1、在上一實驗的基礎(chǔ)上，寫入數(shù)據(jù)庫連

14、接的代碼2、通過循環(huán)體，將數(shù)據(jù)逐條顯示出來三、實驗內(nèi)容建立與數(shù)據(jù)庫的連接后，建立查詢語句的執(zhí)行對象，調(diào)用產(chǎn)生的對象實現(xiàn)查詢功能，并將查詢到的數(shù)據(jù)顯示出來。本實訓(xùn)知識點：數(shù)據(jù)庫連接的建立與關(guān)閉，建立statement對象代替可執(zhí)行的sql語句。代碼如下：test3.jsp順序取得數(shù)據(jù)順序取得數(shù)據(jù)學(xué)生編號姓名性別年齡實驗 10 用戶登陸功能的實現(xiàn)一、實驗?zāi)康?、通過Dreamweaver掌握表單的制作2、掌握用戶登陸功能的實現(xiàn)二、實驗要求1、建立用戶信息表2、配置ODBC數(shù)據(jù)源3、建立與數(shù)據(jù)庫的連接4、通過sql語句驗證用戶輸入信息是否合法5、實現(xiàn)用戶正確登陸的功能三、實驗內(nèi)容0、首先將實驗4的數(shù)

15、據(jù)庫連接功能實現(xiàn)，這是這節(jié)實驗課的前提條件。1、創(chuàng)建Access數(shù)據(jù)庫，命名為misdb，將其存儲到d盤根目錄下面。2、創(chuàng)建數(shù)據(jù)表，命名為user，其數(shù)據(jù)表結(jié)構(gòu)如下：3、在此表中錄入任意3條數(shù)據(jù)：4、將數(shù)據(jù)庫程序關(guān)閉，進行ODBC數(shù)據(jù)源的配置，在系統(tǒng)數(shù)據(jù)源，創(chuàng)建Access數(shù)據(jù)源，命名為mis5、制作頁面。首先看一下流程圖Login.jsp在這個頁面中，通過表單輸入用戶名和密碼，點擊登陸；如果數(shù)據(jù)庫中存在此人的正確的用戶名和密碼，那么系統(tǒng)提示成功登陸；否則系統(tǒng)提示登陸失敗，請重新登陸。Checklogin.jsp這個頁面首先取得login.jsp提交過來的數(shù)據(jù)，然后連接數(shù)據(jù)庫，通過sql語句在

16、數(shù)據(jù)庫中進行查詢比對，看有沒有此用戶，如果有，提示用戶登陸成功，反之。數(shù)據(jù)Home.jsp歡迎大家進入我的主頁登陸成功登陸失敗首先，我們打開Dreamweaver，進行表單的設(shè)計。然后在表單中輸入文本 用戶名：效果如圖所示：用同樣的方法設(shè)計密碼文本框：效果如圖所示：然后在表單中添加按鈕控件：效果如圖所示：好，到此為止，表單設(shè)計完畢。我們需要對該頁面的部分代碼進行修改(紅字是修改過的)。無標(biāo)題文檔 用戶名： 密碼： 然后，將該頁面保存為login.jsp，并保存在tomcat-webapps下的root文件夾下?，F(xiàn)在，我們來制作第2個頁面 checklogin.jsp我給出第2個頁面的代碼。紅色

17、部分是我們需要在新建的checklogin.jsp中添加的。無標(biāo)題文檔然后，我們制作第3個頁面，home.jsp，在頁面上輸入文字 歡迎大家進入我的主頁：好，到此為止，我們?nèi)孔魍辍，F(xiàn)在進行調(diào)試。實驗 11 取得記錄數(shù)一、實驗?zāi)康谋敬螌嶒炓蟠蠹艺莆杖〉糜涗浿羔樜恢玫腞esultSet的getRow（）方法的使用。二、實驗要求1、建立數(shù)據(jù)庫，并創(chuàng)建圖書信息表。2、配置ODBC數(shù)據(jù)源。3、建立與數(shù)據(jù)庫的連接。4、實現(xiàn)用getRow（）方法取得數(shù)據(jù)表中記錄數(shù)的功能。三、實驗內(nèi)容1、編程思路 用ResultSet的last方法將記錄指針移到最后，再利用ResultSet的getRow（）方法取得記錄

18、指針的位置，就是數(shù)據(jù)庫中的記錄筆數(shù)。 取得記錄指針的位置的語法如下： ResultSet對象變量.getRow（）； 記錄指針設(shè)置的語法如下： ResultSet對象變量.absolute（int 記錄位置）2、實驗步驟1）首先確定本實驗的程序路徑，例如：C:Tomcat 6.0webappsROOT2）在此文件夾下建立一個文件夾名為data3）在此文件夾下建立一個access數(shù)據(jù)庫，命名為book.mdb。4）在該數(shù)據(jù)庫中建立一個數(shù)據(jù)表，命名為bookinfo。數(shù)據(jù)表各字段如下：將id設(shè)置為主鍵將此數(shù)據(jù)表保存為bookinfo。為本數(shù)據(jù)表添加一些數(shù)據(jù)。5）為該數(shù)據(jù)庫建立ODBC數(shù)據(jù)源。（參考

19、實驗4的內(nèi)容，這里不過多贅述）。6）然后將數(shù)據(jù)表中的內(nèi)容順序顯示出來。（參考實驗5的內(nèi)容，這里不過多贅述）。7）源代碼順序取得數(shù)據(jù),并顯示記錄數(shù)順序取得數(shù)據(jù),并顯示記錄數(shù)圖書編號書名作者出版社8）將此文件放置到C:Tomcat 6.0webappsROOT中，命名為test8.jsp。9）啟動Tomcat10）在IE中輸入:8080/test8.jsp效果如圖所示：11）在此基礎(chǔ)上對源代碼進行修改（紅色部分是后加上的）順序取得數(shù)據(jù),并顯示記錄數(shù)順序取得數(shù)據(jù),并顯示記錄數(shù)記錄數(shù):圖書編號書名作者出版社12）將添加新代碼后的test8.jsp重新運行一下，效果如圖所示：實驗 12 分頁顯示一、實驗?zāi)康膶τ谌啃畔?，通過分頁顯示的方式將所有的信息顯示出來，并且可以隨時顯示任意的分頁信息。二、實驗要求1、建立數(shù)據(jù)庫，并創(chuàng)建圖書信息表。2、為該數(shù)據(jù)表錄入一些基本數(shù)據(jù)。3、配置ODBC數(shù)據(jù)源。4、建立與數(shù)據(jù)庫的連接。5、借助實驗5將數(shù)據(jù)庫中的數(shù)據(jù)順序顯示出來。6、實現(xiàn)分頁顯示。三、實驗步驟第一步、建立數(shù)據(jù)庫在tomcat的webapps中的root下新建立一個名為data的文件夾，用于存儲數(shù)據(jù)庫。在該文件