WEB技术课程设计报告留言板 .doc
浙江工商大学计算机与信息工程学院WEB技术课程设计报告课程名称： 项目名称： 班 级： 学 号： 姓 名： 2011 年 1 月课程设计任务书课程设计项目设计起讫时间： 2011年1月10日 2011 年 1月 14日 设计目的和要求：设计目的和要求：本小组要完成的任务由四人共同开放完成一个留言板。系统具有以下功能：前台：写入留言、留言列表、查看留言后台：管理员登录/注销、查看留言、搜索留言、删除留言、回复留言设计主要内容（含使用的工具语言、环境要求等）：1、jdk1.5.0_09：Java2的软件开发工具，是Java应用程序的基础。JSP是基于Java技术的，所以配置JSP环境之前必须要安装J2SDK。 2、 Apache服务器：Apache组织开发的一种常用Web服务器，提供Web服务。 3、apache-tomcat-5.5.20：Apache组织开发的一种JSP引擎，本身具有Web服务器的功能，可以作为独立的Web服务器来使用。但是，在作为Web服务器方面， Tomcat本身就是Apache的一个子项目，所以Tomcat对Apache提供了强有力的支持。4：Dreamweaver: JSP和html编写工具。通过“控制面板”中的“管理工具”中的“数据源（ODBC）”，配置Microsoft Office Access的数据源 2011年 1 月14日目录1功能分析22数据库表设计23功能实现24个人总结21功能分析留言簿前台：进去欢迎页，发表留言、人员注册登记留言列表、查看留言QQ在线/离线状态交流退出留言板后台： 管理员登录/注销删除留言、回复留言根据名字搜索留言程序部完成功能及截图如下：以下模块为XXX设计编写：前台 1，进去欢迎页：2，写入留言 注册登记：3，留言列表 模块：4，QQ在线/离线状态： 5，退出留言薄、再见页面:后台：1，管理员登录2，管理员删除留言、回复留言3，根据姓名搜索留言2数据库表设计数据库名称：message数据源名称：messageUID=root数据表1：admin含义：numb:管理员编号Name:管理员名称Pass：管理员密码主键（name,pass）数据包2：user含义：numb:用户编号 username:用户名称 mail：用户email地址 qq:用户qq号码 web：用户个人主页 mdn：用户留言rem：管理员回复images：用户头像主键：（numb） 3功能实现（介绍部分关键代码介绍如何实现相应的功能点）3.1 写入留言代码 add.jsp<script>function check()if (document.form.username.value=""|document.form.contents.value="")alert("用户名或留言没有正确填写！");return false;function openit()window.open('face.jsp', '图片列表', 'height=300,width=500,toolbar=no,scrollbars=yes');</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"><!-body background-image: url(images/bg6.jpg);.STYLE1 font-family: "新宋体"a:hover color: #0000FF;.STYLE2 color: #000000.STYLE4 font-family: "新宋体" color: #FF0000; -></style></head><body text="#000000"><center> <p> </p> <p> </p> <p class="STYLE2"><a href="index.jsp">查看留言</a></p></center><form action=save.jsp method=post name=form> <table cellpadding=0 cellspacing=0 border=0 width=600 bgcolor="#000000" align=center> <tr> <td> <table cellpadding=3 cellspacing=1 border=0 width=100%> <tr bgcolor=#F8B00A> <td bgcolor="#FFFF66" align=center height=22 colspan="2"><span class="STYLE4"><b>发表留言</b>(有*<b>号的必填)</b></span></td> </tr> <tr bgcolor=#F8B00A> <td width="30%" height="22" align="center" bgcolor="#FFFF99"> <div align="right" class="STYLE1">你的姓名： </div></td> <td width="70%" height="22" bgcolor="#FFFF99"> <span class="STYLE1"> <input type="text" name="username" maxlength="10" size="20"> <font color="#FF0000">*</font> </span></td> </tr> <tr bgcolor=#F8B00A> <td width="30%" height="22" align="center" bgcolor="#FFFF99"> <div align="right" class="STYLE1">Email地址： </div></td> <td width="70%" height="22" bgcolor="#FFFF99"> <span class="STYLE1"> <input type="text" name="mail"> </span></td> </tr> <tr bgcolor=#F8B00A> <td width="30%" height="22" align="center" bgcolor="#FFFF99"> <div align="right" class="STYLE1">QQ号码： </div></td> <td width="70%" height="22" bgcolor="#FFFF99"> <span class="STYLE1"> <input type="text" name="qq" maxlength="10"> </span></td> </tr> <tr bgcolor=#F8B00A> <td width="30%" height="39" align="center" bgcolor="#FFFF99"> <div align="right" class="STYLE1">选择头像： </div></td> <td width="70%" height="39" bgcolor="#FFFF99"> <span class="STYLE1"> <select name="images" size="1"> <%for (int i=1;i<=20;i+)%> <option value="image<%=i%>.gif">image<%=i%></option> <%> </select> <font color="#FF0000">*</font> <a href=javascript:openit()>点击查看图片列表</a></span></td> </tr> <tr bgcolor=#F8B00A> <td width="30%" height="22" align="center" valign="middle" bgcolor="#FFFF99"> <div align="right" class="STYLE1"> 留言内容： </div></td> <td width="70%" height="22" bgcolor="#FFFF99"> <span class="STYLE1"> <textarea name="contents" cols="30" rows="5" wrap="VIRTUAL" id="contents"></textarea> <font color="#FF0000">*</font> </span></td> </tr> <tr bgcolor=#F8B00A> <td bgcolor="#FFFF99" align=center height=22 colspan="2"> <span class="STYLE1"> <input type="submit" name="Submit" value="提交" onClick="return check()"> <input type="button" value="返回" onClick="javascript:window.location.href ='index.jsp'"> </span></td> </tr> </table></td> </tr> </table></form>图1其中主要的功能是设置一些text等对话框。而其中的每一个选框（空白部分的内容），都有一定的属性要求，而其中每一个的要求都是一个判断，要求每一个内容满足后台的要求实现。3.2 留言列表 、查看留言 index.jsp<% /设置上下翻页;int allcount; /所有的记录数;int showpage; /显示第几页数;int beginpage=1; /开始的页数;int allpage; /总共的页数;int showrow=6; /每页显示记录数;int temp=1;/取得记录总数;rs.last();allcount=rs.getRow();/得到url参数String row=null; row=request.getParameter("id");if(row!=null)beginpage=Integer.parseInt(row);showpage=beginpage;/计算页数allpage=allcount/showrow+1;if (allcount%showrow=0)allpage=allpage-1;/判断合法性;if(beginpage<1|beginpage>allpage)beginpage=1;/开始页数;if (beginpage!=1)beginpage=(beginpage-1)*showrow+1;rs.absolute(beginpage); %> <% dotemp+=1;numb=rs.getInt("numb");String rem=rs.getString("rem");%></p><table width="650" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#FCE09E" bgcolor="#FCE09E"> <tr> <td bgcolor="#FCE09E" valign="top" rowspan="3" width="103"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr> <td width="10" height="105"> </td> <td height="105" valign="top"><br> 姓名:<%=rs.getString("username")%><br> <br> <img src=images/<%=rs.getString("images")%>><br> <%if (ck=1)%> <div> <span class="STYLE1"><a href="del.jsp?id=<%=numb%>">删除</a>|<a href="reply.jsp?id=<%=numb%>">回复</a></span></div><%> </td> </tr> </table></td> <td width="538" height="42" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="29" bgcolor="#FCE09E"> </td> <td height="29" bgcolor="#FCE09E"> <a href="http:/<%=rs.getString("web")%>"><img src="images/homepage.gif" width="47" height="18" border="0"></a> <a target="_blank" href=" border="0" src=" alt="" title=""></a><a href="mailto:<%=rs.getString("mail")%>"></a> </td> </tr> </table></td> </tr> <tr> <td valign="top"> <table width="100%" height="69" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="35" colspan="2" bgcolor="#FCE09E"> <%=rs.getString("mdb")%> </td> </tr> <tr> <td height="34" colspan="2" bgcolor="#FCE09E"><font color="#00A800"> <%if(rem!=null)%> </font><span class="STYLE1"><b>回复：</b></span><span class="STYLE1"> </span><font color="blue"><%=rem%></font> <%> <br> </td> </tr> </table></td> </tr> <tr> <td height="45" valign="bottom" bgcolor="#FCE09E"> 发表时间：<%=rs.getString("datetimes")%></td> </tr></table><hr noshade width="650" color="#000000" size="1"><%while(rs.next()&&temp<=showrow);%><%rs.close();stmt.close();con.close();%><p align="center"> <span class="STYLE1">共有留言<b><%= allpage %></b>页 <b><%= allcount %></b>条每页显示<b><%= showrow %></b>条</span><font color="#000080"> <% if(showpage>1) %> <a href=index.jsp>首页</a> <a href=index.jsp?id=<%= showpage-1 %>>上一页</a> <% else %> </font><span class="STYLE1">首页 上一页 <% %> <% if(showpage=allpage) %> 下一页 尾页 <% else %> <a href=index.jsp?id=<%= showpage+1 %>>下一页</a> <a href=index.jsp?id=<%=allpage %>>尾页</a> <% %>留言板列表其中的表现主要重点和难点主要是在实现把数据库中的一些内容等什么东西，反映到网页中，而对与页面的大小，数据量，数据的规格等。每一个有显示几个记录；所有的记录数，页码数等等都需要对数据库里面是数据进行计算，才反映到页面当中。其中的浏览列表中的QQ状态等是事实体现，其中的每一个的信息和游客直接相关。3.3 管理员登录和注销 admin.jsp<form method="post" action="chklogin.jsp"> <table width=245 height="144" border=0 align="center" cellpadding=3 cellspacing=1 bgcolor="#000000"> <tr bgcolor=#F0AA06> <td bgcolor="#FFFF99" align=center colspan="2"><span class="STYLE1">管理员登陆</span></td> </tr> <tr bgcolor=#F0AA06> <td width="48%" align="center" bgcolor="#FFFF99"> <div align="left"> 管理员名称：</div> </td> <td width="52%" bgcolor="#FFFF99"> <input name="username" type="text" size="10"> </td> </tr> <tr bgcolor=#F0AA06> <td width="48%" align="center" bgcolor="#FFFF99"> <div align="left"> 管理员密码：</div> </td> <td width="52%" bgcolor="#FFFF99"> <input type="password" name="password" size="10"> </td> </tr> <tr bgcolor=#F0AA06> <td bgcolor="#FFFF99" align=center colspan="2"> <input type="submit" name="Submit3" value="提交"><input type="button" value="返回" onClick="javascript:window.location.href ='index.jsp'"> </td> </tr> </table></form>管理员登录和注销主要是后台的数据库的作用比较大，需要对数据库信息进行比较，在进行反映到网页当中。3.4搜索留言 search .jsp<% page language="Java" contentType="text/html; charset=gb2312"%><% include file="conn.jsp"%><%response.addHeader("Cache-Control", "no-cache");response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");int numb,ck=0;String name1=null;Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);String word=request.getParameter("searching");String sql="select * from user where username='"+word+"' or username like '"+word+"%' or username like '%"+word+"%' or username like '%"+word+"' order by datetimes desc"ResultSet rs=stmt.executeQuery(sql);if(rs=null&&!rs.next()%><script>alert("查无此人！");self.location="index.jsp"</script><% if (session.getValue("name")!=null)ck=1;name1=session.getValue("name").toString();%> <html> <head><title>留言簿</title> <link href="css.css" rel=stylesheet type=text/css><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"><!-body background-image: url(images/bg6.jpg);.STYLE1 color: #000000-> </style></head> <body text="#000000"> <p align="center"> </p><p align="center"><span class="STYLE1">| <a href="add.jsp">我要留言</a> <font size=2>|</font> <a href="admin.jsp"><font size=2>管理员入口</font></a> <font size=2>|</font> <%if (ck=1)%> <u><font size=2><%=name1%></font></u><a href="loginout.jsp"><font size=2>退出管理</font></a><font size=2> | </font><a href="index.jsp"><font size=2>查看留言</font></a></span></p><form name="form1" method="post" action="search.jsp"> <p align="right"><span class="STYLE1"><font size=2>姓名：</font></span> <input type="text" name="searching"/><input type="submit" name="Submit" value="搜索留言"> </p> </form><p align="center"> <%> <a href="quit.jsp" class="STYLE1"><font size=2>| 退出留言簿 |</font></a> <% /设置上下翻页;int allcount; /所有的记录数;int showpage; /显示第几页数;int beginpage=1; /开始的页数;int allpage; /总共的页数;int showrow=6; /每页显示记录数;int temp=1;/取得记录总数;rs.last();allcount=rs.getRow();/得到url参数String row=null; row=request.getParameter("id");if(row!=null)beginpage=Integer.parseInt(row);showpage=beginpage;/计算页数allpage=allcount/showrow+1;if (allcount%showrow=0)allpage=allpage-1;/判断合法性;if(beginpage<1|beginpage>allpage)beginpage=1;/开始页数;if (beginpage!=1)beginpage=(beginpage-1)*showrow+1;rs.absolute(beginpage);%> <% dotemp+=1;numb=rs.getInt("numb");String rem=rs.getString("rem");%></p><table width="650" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#FCE09E" bgcolor="#FCE09E"> <tr> <td bgcolor="#FCE09E" valign="top" rowspan="3" width="103"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr> <td width="10" height="105"> </td> <td height="105" valign="top"><br> 姓名:<%=rs.getString("username")%><br> <br> <img src=images/<%=rs.getString("images")%>><br> <%if (ck=1)%> <div> <a href="del.jsp?id=<%=numb%>"><font color=red>删除</font></a><font color=red>|</font><a href="reply.jsp?id=<%=numb%>"><font color=red>回复</font></a></div><%> </td> </tr> </table></td> <td width="538" height="42" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="29" bgcolor="#FCE09E"> </td> <td height="29" bgcolor="#FCE09E"> <a href="http:/<%=rs.getString("web")%>"><img src="images/homepage.gif" width="47" height="18" border="0"></a> <a href=" src="images/QQ.png" width="89" height="22" border="0"></a><a href="mailto:<%=rs.getString("mail")%>"></a> <a target="_blank" href=" border="0" src=" alt="" title=""></a> </td> </tr> </table></td> </tr> <tr> <td valign="top"> <table width="100%" height="69" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="35" colspan="2" bgcolor="#FCE09E"> <%=rs.getString("mdb")%> </td> </tr> <tr> <td height="34" colspan="2" bgcolor=
