JSP留言网站开发设计方案报告书.doc

*****大学
《网站开发》设计汇报书

题 目 __JSP留言网站开发_______

二 级 学 院 ____应用技术学院____
专 业 名 称 ___计算机科学和技术_
班 级 _ __ ________
学 生 学 号 _ __
学 生 姓 名 ___ ___
指 导 教 师 ____ ____ ___

成 绩 ____________________

二00 年 月
一、课程设计目标
依据教材内容，经过制作JSP动态网站，巩固所学知识，使理论和实践相结合，提升将理论利用于实践能力。同时，经过此次课程设计，熟练、灵活掌握JSP网站开发方法和过程，并在开发过程中加深对所学内容利用，提升动手能力和知识综合利用能力，积累和丰富网站开发经验。
二、课程设计内容
1．课程设计介绍
JSP(Java Server Page)是一个以Java语言为基础动态网页技术。JSP可应用Java下多种包和类，而且继承了Java以面向对象理论为中心设计构架，这些特点让JSP可制作出功效更为多样动态网页。
JSP除了简化服务器网页程序设计难度外，同时还提供了建构主从式架构网站所需默认对象。尽管以Java为基础发展而来，JSP直接简单设计理念又不一样于Java，它在现在动态网页设计领域，占有极为关键地位。
此次课程设计就是利用JSP技术构建动态网页，使用户端和服务器端进行交互，即在用户端实施网页语言内嵌在HTML中，当浏览器向服务器请求打开网页时，服务器会将整份网页传送至用户端，由浏览器进行网页程序解释操作，而且将结果显示在浏览器窗口中；而在服务器端实施网页语言必需由服务器中解释器来做解释操作，最终将解释后结果以HTML格式传送至用户端，直接显示在浏览器中，这么就实现了交互操作。
在程序编写中，将java代码嵌入到HTML代码中，即使要反复部分类似程序片段，但降低了程序设计难度。经过java代码，网页从数据库提取数据，和对数据库中数据进行插入、修改和删除。同时，在HTML代码中还加入了脚本语言，使网页愈加丰富生动。
2．设计说明
本系统是一个基于JSP平台及JDBC和ODBC接口技术访问ACCESS数据库机制网络留言板。该网站系统基础实现了网络留言等功效。系统包含前台（用户）和后台（管理员）两部分，前台包含网友留言、留言查看等多个模块，后台包含留言管理，修改管理员信息等多个模块。网页中文字及链接文字全部用css样式统一风格，布局合理。该网站页面条理清楚，含有操作方便，功效完善，易于管理等特点。系统采取SUN企业认证Tomcat 5.5搭建服务器，关键技术是利用JDBC、ODBC接口技术数据库访问机制，来实现和ACCESS数据库连接和操作，后台处理代码基于JDK1.6JAVA语言编写。

3、数据库建立
在设计网站时，我们决定采取简单易用Microsoft Access数据库，在设计表时，首先设计了2个基础表，分别统计管理员信息和留言信息。：

4．关键界面和具体设计
4.1主页面

其关键代码：
<DIV id=Tbody>
<DIV id=mainContent>
<DIV id=innermainContent>
<DIV id=mainContent-topimg></DIV>
<DIV class=content-width id=Content_Contentlist>
<DIV class=pageContent>
<DIV class=page style="FLOAT: right">
<UL>
</UL></DIV></DIV>
<%
i = 0;
while(i< intPageSize && !Rs.isAfterLast()){
//读留言信息
int id=Rs.getInt("id");
String username=Rs.getString("username");
String userface=Rs.getString("userface");
String userurl=Rs.getString("userurl");
String usermail=Rs.getString("usermail");
String userqq=Rs.getString("userqq");
String usertitle=Rs.getString("usertitle");
String content=Rs.getString("content");
String mydate=Rs.getString("mydate");
String remydate=Rs.getString("remydate");
String recontent=Rs.getString("recontent");
String ip=Rs.getString("ip");
%>
<DIV class=Content>
<DIV class=comment style="MARGIN-BOTTOM: 20px">
<DIV class=commenttop><IMG style="MARGIN: 0px 1px -3px 0px"
alt=公开 src="images/qipeng/icon_quote.gif" border=0> <B><%=username%></B>
</DIV>
<div class=commentcontent>
<table width="99%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="140" align="center" valign="top" bgcolor="#CCCCCC" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height=20></td>
</tr>
</table>
<img src="images/<%=userface%>.gif" width="72" height="72"><br>
<br>
<%=username%>&nbsp;</td>
<td valign="top"><table width="100%" border="0" align="center" cellpadding="1" cellspacing="3">
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#999999">
<tr>
<td bgcolor="#FFFFFF"><table width="100%" height="24" border="0" cellpadding="0" cellspacing="0" bgcolor="#f5f5f5">
<tr>
<td width="50%" bgcolor="#CCCCCC">&nbsp;标题：<%=usertitle%>&nbsp;</td>
<td width="50%" bgcolor="#CCCCCC"><div align="right"> <a href="<%=userurl%>" target="_blank"><img src="images/home.gif" width="16" height="16" border="0" align="absmiddle" alt="主页:[ <%=userurl%> ]"></a> | <a href="mailto:<%=usermail%>" target="_blank"><img src="images/email.gif" width="18" height="18" border="0" align="absmiddle" alt="电子邮件:[ <%=usermail%> ]"></a> | <a href="#"><img src="images/qq-gray.gif" width="16" height="16" border="0" align="absmiddle" alt="QQ号码:<%=userqq%>"></a> | <a href="#"><img src="images/ip.gif" width="16" height="16" border="0" align="absmiddle" alt="来自：[ <%=ip%> ]"></a> &nbsp; </div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="5">
<tr>
<td bgcolor="#999999"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC"><fieldset style="width:100%;" align="center;">
<legend> &nbsp;<strong>留言内容： </strong></legend>
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td height="60"><%=content%></td>
</tr>
</table>
</fieldset></td>
</tr>
</table>
<div align="right">发表时间： <%=mydate%> &nbsp; </div></td>
</tr>
</table></td>
</tr>
<%
if(recontent!=null)
{
//站长回复
%>
<tr>
<td height="30" align="center" bgcolor="#cccccc" ><font color=red>回复：</font></td>
<td bgcolor="f5f5f5"><table width="100%" border="0" cellpadding="0" cellspacing="4" bgcolor="#cccccc">
<tr>
<td bgcolor="#CCCCCC"><font color=red><%=recontent%></font></td>
</tr>
</table></td>
</tr>
<%
}
if(a==null||a.booleanValue()==false)
{}else{
%>
<tr bgcolor="#cccccc">
<td colspan="2"><div align="right"><a href="javascript:go('del.jsp?id=<%=id%>','您确定要删除?')">删除</a> <a href="JavaScript:openwin('Reply.jsp?id=<%=id%>',600,500)">回复/编辑回复</a> <a href="JavaScript:openwin('Edit.jsp?id=<%=id%>',600,500)">编辑</a> </div></td>
</tr>
<%
}
%>
</table>
</div>
</DIV>
</DIV>
<%
Rs.next();
i++;
//读流言信息结束
}
%>
<DIV class=pageContent>
<DIV class=page style="FLOAT: right">
<UL>
<LI class=pageNumber><STRONG>
第<%=intPage%>页 共<%=intRowCount%>条统计/共<%=intPageCount%>页
<%
if(intPage<2){
out.print("首页 | 上一页");
}else{%>
<a href="index.jsp?page=1">首页 </a> | <a href="index.jsp?page=<%=intPage-1%>">上一页</a>
<%}%>|
<%
if((intPageCount-intPage)<1)
{
out.print("下一页 | 尾页");
}else{%>
<a href="index.jsp?page=<%=intPage+1%>">下一页</a> | <a href="index.jsp?page=<%=intPageCount%>">尾页</a>
<%}
}
else{
}
if(conn!=null)
{
conn.close();
}
if(stmt!=null)
{
stmt.close();
}

%>
3.2网友留言界面：

关键代码：
<DIV id=Tbody>
<DIV id=mainContent>
<DIV id=innermainContent>
<DIV id=mainContent-topimg></DIV>
<DIV class=content-width id=Content_Contentlist>
<DIV class=pageContent>
<DIV class=page style="FLOAT: right">
<UL>
</UL></DIV></DIV>
<DIV class=Content>
<DIV class=comment style="MARGIN-BOTTOM: 20px">
<DIV class=commenttop></DIV>
<div class=commentcontent>
<table width="540" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
<form action="add.jsp?action=add" method="post" name="post" onSubmit="return datacheck();">
<tr>
<td valign="top">
<table width="450" border="0" cellspacing="0" cellpadding="0" align="center" class="font">
<tr>
<td colspan="3"> <div align="center" class="STYLE2">输入个人信息</div></td>
</tr>
<tr>
<td width="76" height="25" > <div align="center">昵
称 ：</div></td>
<td height="25" colspan="2" > <input name="username" maxlength="15" class=button1 size="25" >
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="76" height="25" > <div align="center">信
箱 ：</div></td>
<td height="25" colspan="2" > <input name="usermail" size="25" maxlength="50" class=button1 >
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="76" height="25" > <div align="center">主
页 ：</div></td>
<td height="25" colspan="2" > <input name="userurl" size="25" maxlength="50" value="" class=button1 >
</td>
</tr>
<tr>
<td width="76" height="25" > <div align="center"><span class="EFONT">QQ</span>
：</div></td>
<td height="25" width="221"> <input name="userqq" maxlength="10" class=button1 size="25" >
</td>
<td height="25" width="153" valign="baseline" >&nbsp;</td>
</tr>
<tr>
<td height="25" align="center" >主 题 ：</td>
<td height="25"><input name="usertitle" maxlength="20" class=button1 size="25" >
<font color="#FF0000">*</font></td>
<td height="25" valign="baseline" >打<font color="#FF0000">*</font>号为必填项</td>
</tr>
</table>
<table width="450" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#33FF00" >
<tr>
<td colspan="10" class="font"> <div align="center" class="STYLE3">选 择 头 像 </div></td>
</tr>
<tr align="center" valign="middle">
<td height="35">
<div align="center">
<input type="radio" name="userface" value="1" checked>
</div></td>
<td height="35">
<div align="center"><img src="images/1.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="2">
</div></td>
<td height="35">
<div align="center"><img src="images/2.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="3">
</div></td>
<td height="35">
<div align="center"><img src="images/3.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input name="userface" type="radio" value="4">
</div></td>
<td height="35">
<div align="center"><img src="images/4.gif" width="70" height="70"></div></td>

</tr>
<tr align="center" valign="middle">
<td height="35">
<div align="center">
<input type="radio" name="userface" value="5">
</div></td>
<td height="35" >
<div align="center"><img src="images/5.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="6">
</div></td>
<td height="35" >
<div align="center"><img src="images/6.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="7">
</div></td>
<td height="35" >
<div align="center"><img src="images/7.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="8">
</div></td>
<td height="35" >
<div align="center"><img src="images/8.gif" width="70" height="70"></div></td>

</tr>
<tr align="center" valign="middle">
<td height="35">
<div align="center">
<input type="radio" name="userface" value="9">
</div></td>
<td height="35" >
<div align="center"><img src="images/9.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">
<input type="radio" name="userface" value="10">
</div></td>
<td height="35" >
<div align="center"><img src="images/10.gif" width="70" height="70"></div></td>
<td height="35">
<div align="center">