蘇州市職業大學實習〔實訓〕報告名稱JSP商務網站設計實訓2015年1月5學院(部)計算機工程學院班級學號姓名學院(部)負責人李金祥系主任梁穎紅指導教師陳靜、張蘇

目錄一、工程實訓的目的與要求 1工程實訓目的 1工程實訓要求 1二、題目說明 1網站的背景介紹 1開發工具及技術介紹 12.2.1JSP簡介 12.2.2SQL-SERVER簡介 22.2.3Eclipse簡介 3三、總體說明 3系統工程規劃 3業務流程分析 3系統功能分析 3系統功能結構圖 4數據庫的實現 4系統的根本E-R圖 4數據庫的物理設計 6四、后臺系統局部模塊的實現 9登錄模塊 9用戶注冊模塊 10備忘錄模塊 11通訊錄模塊 12日記模塊 12財務管理模塊 13五、開發技巧與實現方法 14實現過程 14數據庫連接的實現 15六．工程實訓總結 15七、參考文獻 16一、工程實訓的目的與要求工程實訓目的目前，我國的科技水平高速開展，計算機作為今天使用最廣的現代化工具已深入到各個領域，并且正在成為未來社會——信息社會的重要支柱。本工程根據本學期所學的相關知識概念與原理，設計和開發基于MVC設計模式的個人信息管理系統。通過本工程的實訓對所學知識進行掌握以及綜合運用。〔1〕網站概論局部：力圖使學生對建立動態網站有一個根本概念，了解什么是動態網站，它與別的網站有什么不同，以及了解建站相關的根底知識。〔2〕外觀設計局部：從網頁制作技術上讓學生利用網頁的靜態頁面元素來完成網站頁面的視覺效果。〔3〕Web應用程序開發局部：掌握動態網站的核心局部的知識，以及開發網站應用的各個關鍵局部的方法和技巧。通過本次實訓，應使學生到達如下的根本要求：了解動態網站的根本概念和相關技術的根底知識。理解網站的設計與規劃。理解如何使用JSP和SQLServer、MySql來管理、使用數據。了解和掌握網絡數據庫的開展以及常見的數據庫產品〔Access、SQLServer、MySql等〕，能熟練掌握后臺數據庫的開發，設計合理的數據表。能獨立完成應用程序的運行環境的設置。二、題目說明2.1網站的背景介紹在我們當代信息社會里，人們對信息的交流與溝通越來越重視，對時間的有效利用更加的注重，其中個人信息也在高速增加，因此，個人信息的管理在日常工作和生活中成為必不可少的內容，方便實用的個人信息管理工具對于提高信息利用效率具有重要意義。隨著信息化的不斷進步，個人信息查詢系統更加簡便，易查詢，操作簡單化，方便公司、學校、企業以及很過地方的信息搜集和查詢。JSP簡介開發平臺：Dreamweaver+JSP+SQLSERVERJSP(JavaServer

Pages)是由Sun

Microsystems公司倡導、許多公司參與一起建立的一種動態網頁技術標準。該技術為創立顯示動態生成內容的Web頁面提供了一個簡捷而快速的方法。JSP技術的設計目的是使得構造基于Web的應用程序更加容易和快捷，而這些應用程序能夠與各種Web效勞器、應用效勞器、瀏覽器和開發工具共同工作。

JSP標準是Web效勞器、應用效勞器、交易系統、以及開發工具供給商間廣泛合作的結果。在傳統的網頁HTML文件(*htm,*.html)中參加Java程序片段(Scriptlet)和JSP標記(tag)，就構成了JSP網頁(*.jsp)。Web效勞器在遇到訪問JSP網頁的請求時，首先執行其中的程序片段，然后將執行結果以HTML格式返回給客戶。程序片段可以操作數據庫、重新定向網頁以及發送

email

等等，這就是建立動態網站所需要的功能。所有程序操作都在效勞器端執行，網絡上傳送給客戶端的僅是得到的結果，對客戶瀏覽器的要求最低，可以實現無Plugin，無ActiveX，無Java

Applet，甚至無Frame。.2SQL-SERVER簡介MicrosoftSQLServer是一個高性能的關系型數據庫管理系統，它具有客戶機/效勞器體系結構，能夠滿足大規模的分布式計算環境的需要。該數據庫系統有SQLServer和SQLWorkstation兩種產品，SQLWorkstation相當于一個單用戶許可的SQLServer，它最多只能同時連接15個數據庫，但是提供了一些客戶端數據應用程序開發工具，如DB_LibraryforC、DB_LibraryforVisualBasic、ODBC(OpenDataBaseConnectivity,開放數據庫互連)和ODS(OpenDataServices,開放數據效勞)編程接口(API)等。除了這些差異之外，SQLWorkstation和SQLServer具有同樣的性能和功能。SQLServer數據庫系統特點：(1)完全的客戶機/效勞器體系結構。這一結構可以更有效地使用網絡，因為客戶機/效勞器運算模式下，數據庫的查詢操作都集中在效勞器方進行，在網絡上傳輸的是用戶的請求命令和效勞器的檢索結果，而不是整個數據庫文件，這樣可以減少網絡上的信息流量，從而提高網絡的使用效率。(2)簡單的圖形化管理工具，使系統管理更為直觀方便。SQLEnterpriseManager(SQL企業級管理器)是一個基于Windows圖形用戶界面(GUI)的集成管理工具，利用它可以完成SQLServer的配置管理工作，如建立設備(devices)和數據庫、備份和恢復數據、執行查詢操作、調度和警報管理、數據復制等。SQLServer的管理體系建立在SQL分布式管理對象(SQLDistributedManagementObject,簡寫為SQL_DMO)根底上，形成SQLServer的分布式管理框架。(3)隱含的并發控制能力。SQLServer利用動態鎖定功能防止用戶在查詢和更新并發操作時相互間發生沖突，動態鎖定是隱含的，用戶不必操心鎖定的過程。(4)富的編程接口工具。SQLServer提供了Transact_SQL、DB_LibraryforC和DB_LibraryforVisualBasic等專用開發工具。Transact_SQL與工業標準SQL語言兼容，并在其根底上加以擴充，使它更適合事務處理方面的需要。此外它支持ODBC標準，可以使用ODBC訪問SQLServer數據庫。(5)線程體系結構。SQLServer支持多線程操作，在多用戶并發訪問時，系統在產生較小額外負擔的情況下能夠進行并行處理，從而減少內存需求，提高系統的吞吐量。在用戶數量增加時，SQLServer的運行速度也不會明顯變慢。2.2.3Eclipse簡介Eclipse是一個開放源代碼的、基于Java的可擴展開發平臺。就其本身而言，它只是一個框架和一組效勞，用于通過插件組件構建開發環境。幸運的是，Eclipse附帶了一個標準的插件集，包括Java開發工具〔JavaDevelopmentKit，JDK〕。雖然大多數用戶很樂于將Eclipse當作Java集成開發環境〔IDE〕來使用，但Eclipse的目標卻不僅限于此。Eclipse還包括插件開發環境〔Plug-inDevelopmentEnvironment，PDE〕，這個組件主要針對希望擴展Eclipse的軟件開發人員，因為它允許他們構建與Eclipse環境無縫集成的工具。近期還有包括Oracle在內的許多大公司也紛紛參加了該工程，并宣稱Eclipse將來能成為可進行任何語言開發的IDE集大成者，使用者只需下載各種語言的插件即可。Eclipse工程由ProjectManagementCommittee(PMC)所管理，它綜觀工程全局，Eclipse采用的技術是IBM公司開發的SWT，這是一種基于Java的窗口組件，類似Java本身提供的AWT和Swing窗口組件；不過IBM聲稱SWT比其他Java窗口組件更有效率。Eclipse的用戶界面還使用了GUI中間層JFace，從而簡化了基于SWT的應用程序的構建。這種平等和一致性并不僅限于Java開發工具。盡管Eclipse是使用Java語言開發的，但它的用途并不限于Java語言；例如，支持諸如C/C++和COBOL等編程語言的插件已經可用，或預計將會推出。Eclipse框架還可用來作為與軟件開發無關的其他應用程序類型的根底，比方內容管理系統。基于Eclipse的應用程序的一個突出例子是IBMRationalSoftwareArchitect，它構成了IBMJava開發工具系列的根底。三、總體說明在我們當代信息社會里，人們對信息的交流與溝通越來越重視，對時間的有效利用更加的注重，其中個人信息也在高速增加，因此，個人信息的管理在日常工作和生活中成為必不可少的內容，方便實用的個人信息管理工具對于提高信息利用效率具有重要意義。隨著個人電腦的普及，簡單實用的個人信息管理工具成為人們日常個人信息管理的不錯選擇。業務流程分析用戶需要使用賬號與密碼通過登陸頁面登陸個人信息管理系統，新用戶可注冊新賬號登陸。登陸后進入系統主窗體，可對個人信息管理、備忘錄管理、通訊錄管理、日記管理、財務管理進行操作。退出系統時返回登陸頁面。系統功能分析個人信息管理系統主要由：個人信息管理、備忘錄管理、通訊錄管理、日記管理、財務管理等模塊組成。進入該系統后，用戶可以對系統中的信息進行添加、修改、刪除和查詢等操作。包括以下功能：通訊錄信息：包括通訊人姓名、聯系方式、工作地點、城市、備注等。備忘錄信息：包括什么時間、事件、地點等。日記信息：包括什么時間、地點、事件等。個人財物管理：包括總收入，消費工程、消費金額、消費時間、余額。每個用戶可以自己注冊一個用戶名，對自己的個人信息進行獨立的管理。工程個人信息管理系統正是基于一個應用需求而設計的。其中包括：個人信息管理、備忘錄管理、通訊錄管理、日記管理、財務管理等模塊組成。進入該系統后，用戶可以對系統中的信息進行添加、修改、刪除和查詢等操作。個人信息管理系統個人信息管理系統個人信息備忘錄通訊錄日記財務管理查看個人信息寫日志財務總況財務清單收人情況支出情況添加記錄添加備忘查看記錄添加記錄查看日志個人首頁修改個人信息查看備忘操作退出系統根據數據庫原理，該階段建立的概念模型,并結合E-R圖，經轉換，可以導出各個關系。其轉化規那么為首先每個實體應該轉換成一個關系，有屬性的聯系也應轉化為一個關系然且需要給出每個關系的關鍵字。根據以上規那么直接給出所有關系。系統的根本E-R圖根據之前的分析規劃出的個人信息管理系統實體有：個人信息實體、備忘錄實體、通訊錄實體、日記實體、財務管理實體。個人信息實體圖如圖3.2所示個人信息個人信息姓名年齡出生日期號碼QQ工作地址3.2個人信息實體賬號密碼 備忘錄實體圖如圖3.3所示備忘錄備忘錄用戶名時間記錄時間地點事情3.3備忘錄實體同通訊錄實體如圖3.4所示通訊錄通訊錄出生日期性別QQ姓名城市地址工作關系添加時間3.4通訊錄實體 日記實體如圖3.5所示日記日記日記標題地點時間用戶名事情3.5日記實體 財務管理實體如圖3.6所示財務管理財務管理用戶名工程時間數額添加時間收入/支出3.6財務管理實體數據庫的物理設計在完成數據庫的邏輯設計后，即可以開始數據庫的物理設計。基于以上數據庫的邏輯設計，考慮程序設計的簡易性及通用性，本個人信息管理系統采用Oracle數據庫，并在其下創立5個數據表，其結構分別如下：(1)個人信息表,其字段列表如表3.1所示：表3.1個人信息表字段名數據類型字段長度與格式主鍵UserIDVARCHAR20是userNameVARCHAR10否userPasswordVARCHAR20否uageNUMBER/否ubirthdayDATE/否utelephotoVARCHAR11否uQQVARCHAR15否ujobVARCHAR30否uworkingPlaceVARCHAR30否uremarksCLOB/否(2)備忘錄表,其字段列表如表3.2所示：表3.2備忘錄表字段名數據類型字段長度與格式主鍵midVARCHAR20是userIdVARCHAR20否mtimetimestamp/否maddtimetimestamp/否mplaceVARCHAR30否mthingsCLOB/否(3)通訊錄表,其字段列表如表3.3所示：表3.3通訊錄表字段名數據類型字段長度與格式主鍵aidVARCHAR20是userIdVARCHAR20否nameVARCHAR10否relationVARCHAR10否sexVARCHAR2否birthdayDATE/否aaddtimeDATE/否telephoneVARCHAR11否QQVARCHAR15否jobVARCHAR30否workingPlaceVARCHAR30否cityVARCHAR15否(4)日記表,其字段列表如表3.4所示：表3.4日記表字段名數據類型字段長度與格式主鍵didVARCHAR20是userIdVARCHAR20否atitleVARCHAR20否dtimeDATE/否dplaceVARCHAR30否dthingsCLOB/否(5)財務管理表,其字段列表如表3.5所示：表3.5財務管理表字段名數據類型字段長度與格式主鍵fidVARCHAR20是userIdVARCHAR20否inoroutNUMBER/否projectVARCHAR30否ftimeDATE/否faddtimeDATE/否fmoneyNUMBER8,2否四、后臺系統局部模塊的實現用戶登錄注冊和用戶的注銷：是該系統的公共的功能局部。該局部主要負責對用戶登錄狀態的信息的存儲和傳遞。圖4.1登錄模塊界面<center><h1>個人信息系管理統歡送您</h1><formaction="check.jsp"method="post"name="form1"><tablewidth="250"border="0"><tbody><tr><td>賬號：</td><td><inputtype="text"name="userId"id="userId"side="15"maxlength="15"></td></tr><tr><td>密碼：</td><td><inputtype="password"name="password"id="password"side="15"maxlength="15"></td></tr><tr><td> </td><td><inputtype="submit"value="確定"> <inputtype="reset"value="取消"> <inputtype="button"value="注冊"onClick="window.open('zhuce.jsp')"><br></td></tr></tbody></table></form>〔用戶名和密碼請輸入6~15位的字母或數字〕</center><divclass="div1"><tableborder="0"width="250px"><tr><tdheight="23px"><%=login.getErrorMsg("erruserId")%></td></tr><tr><tdheight="23px"><%=login.getErrorMsg("errpassword")%></td></tr></table></div></div></div></body></html>用戶注冊模塊：該模塊主要的任務是實現對用戶注冊信息的管理。圖4.2用戶注冊界面<trbgcolor="#E7E7E7"> <tdheight="24"colspan="10"> 注冊 </td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">用戶名：</td><tdalign="left"><inputtype="text"name="userName"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">密 碼：</td><tdalign="left"><inputtype="text"name="password"/>〔6~15位字母或數字〕</td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">年齡：</td><tdalign="left"><inputtype="text"name="uage"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">出生日期：</td><tdalign="left"><inputtype="text"name="ubirthday"/>〔YYYY-MM-DD〕</td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">：</td><tdalign="left"><inputtype="text"name="utelephoto"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">QQ：</td><tdalign="left"><inputtype="text"name="uqq"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">工作：</td><tdalign="left"><inputtype="text"name="ujob"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">工作地址：</td><tdalign="left"><inputtype="text"name="uworkingPlace"/></td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdcolspan="2"height="280"><textarearows="10"cols="120"name="uremaks"></textarea></td></tr>備忘錄管理模塊：該模塊主要的任務是實現對用戶的備忘錄的管理，包括對備忘錄的添加和查看的功能。添加備忘錄：圖4.3備忘錄界面<html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>備忘錄</title><linkrel="stylesheet"type="text/css"href="../css/base.css"><scriptlanguage="javascript"type="text/javascript"src="../js/base.js"></script></head><bodyleftmargin="8"topmargin="8"><!--快速轉換位置按鈕--><tablewidth="98%"border="0"cellpadding="0"cellspacing="1"bgcolor="#D1DDAA"align="center"><tr><tdheight="26"><tablewidth="98%"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="center"><%@includefile="top.jsp"%></td></tr></table></td></tr></table><!--內容列表--><formname="form"action="add_mem.jsp"method="post"><tablewidth="98%"border="0"cellpadding="2"cellspacing="1"bgcolor="#D1DDAA"align="center"style="margin-top:8px"><trbgcolor="#E7E7E7"> <tdheight="24"colspan="10"> 添加備忘錄 </td></tr>通訊錄管理模塊：該模塊主要的任務是實現對用戶的個人通訊錄的管理，包括對通信錄的添加查看功能。圖4.4通訊錄界面添加新聯系人<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%><%@pageimport="java.text.*"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%StringuserId=null;%><%@includefile="../cookie2.html"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">日記管理模塊：該模塊主要的任務是實現對用戶的個人日記的管理，包括對日記的添加和查看的功能。圖4.5日記界面添加新的日記<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%><%@pageimport="java.text.*"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%StringuserId=null;%><%@includefile="../cookie2.html"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">財務管理模塊：該模塊主要的任務是實現對用戶的個人財務狀況的管理，包括對個人財務總況的的顯示，財務狀況的詳細情況的查看，查看個人收入支出的詳細情況，添加個人財務信息的功能。圖4.6財務管理界面添加新賬目<%@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%><%@pageimport="java.text.*"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%StringuserId=null;%><%@includefile="../cookie2.html"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>添加賬目</title><linkrel="stylesheet"type="text/css"href="../css/base.css"><scriptlanguage="javascript"type="text/javascript"src="../js/base.js"></script></head><bodyleftmargin="8"topmargin="8"><!--快速轉換位置按鈕--><tablewidth="98%"border="0"cellpadding="0"cellspacing="1"bgcolor="#D1DDAA"align="center"><tr><tdheight="26"><tablewidth="98%"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="center"><%@includefile="top.jsp"%></td></tr></table></td></tr></table><!--內容列表--><formname="form"action="add_fin.jsp"method="post"><tablewidth="98%"border="0"cellpadding="2"cellspacing="1"bgcolor="#D1DDAA"align="center"style="margin-top:8px"><trbgcolor="#E7E7E7"> <tdheight="24"colspan="10"> 添加賬目 </td></tr><tralign="center"bgcolor="#FAFAF1"height="22"><tdwidth="20%">收入/支出</td><tdalign="left"><inputtype="radio"name="inorout"value=1checked="checked"/>收入<inputtype="radio"name="inorout"value=-1/>支出</td><tdwidth="20%">項  目：</td><tdalign="left"><inputtype="text"name="project"/></td>五、開發技巧與實現方法5.1實現過程頁面為框架頁面，整個框架分別由左端菜單頁面〔leftframe.jsp〕，頂端標識頁面〔topframe.jsp〕，以及右下方的主頁面〔employeeWelcom.jsp〕構成。其中左端和頂端框架中的頁面是固定不變的，而右下方主頁面將回隨著處理的不同需求而改變。頁面框架實現的關鍵代碼如下：<framesetrows="57,*"border="0"><framename="banner"scrolling="no"noresizetarget="contents"src="topFrame.jsp"marginwidth="0"marginheight="0">//設置頁面頂端框架菜單頁面的顯示屬性，并指明頂端框架中顯示的內容為topframe.jsp。<framename