网页设计与制作设计报告.doc

网页设计与制作设计报告题目名称：_网络聊天系统 设计环境：_DW，Fireworks,FronPage_ 指导教师：_寥静_ _ _专业班级：_信安0401,0402_ _ 姓 名：_陈美琳，周小琪，张淑苹_ 学 号：_20042694，20042696，20042732_联系电话：_6084573_ _ _ 电子邮件：_456123126.com_ _设计日期：2007 年5 月 4日至2007 年5 月 20 日 设计报告日期：2007 年5 月 21 日 设计成绩：_一、实验题目网络聊天系统二、实验内容1、设计版块依据简易聊天室的基本功能。可以将这个系统分为以下几个版块：enter.jsp（进入系统界面）,savadate.jsp（验证和保存上网者信息的程序）,chatroom.jsp（聊天室的主页框）,note.jsp（提供上网者发送信息）,show.jsp（显示聊天信息）,savenote.jsp（保存上网者送出的信息）,guest.jsp(显示目前上网者的信息)，out.jsp(离开聊天室注销).其中数据库命名为chat.mdb（包括了online表，和chatroom表）表的内容为：以下是对设计的各个版块的描述：1.enter.jsp版块（1）将整个登陆界面设置成上下框架的形式，然后在上框架中放在一个表单下进行进行操作。选择插入表单（2）写上昵称(颜色为yellow),其后插入的是文本字段，size=20（3）写上性别（颜色为yellow），其后插入的是单选按钮两个（分别名为男，女）初始值为男（4）喜欢的颜色（颜色为yellow），其后插入的是列表框（值为蓝,红，黄，桃色，绿）相应代码 蓝（5）更新方式（颜色为yellow），其后插入的是列表框（值为手动更新，每5秒更新，每10秒更新，每30秒更新。相应代码 手动更新 每5秒更新（6）插入一个按钮，取名为进入聊天室，动作为提交表单。大体式样如下图所示（7）下框架则添加一些注释性的话，让进入者有个了解即可。（8）还设置了对于错误代码就会显示对应信息：到此这个登陆界面就做完了。它的功能是要求上网者输入以及选择各类信息，处理此表单过程由savadata.jsp进行。也就是下一个版块所描述的2. Savadata.jsp版块这一块我们设计的是savadata数据保存版块。 在程序的开始，这段代码的意思是个固定的格式，是jsp的导引内容，在必要时必须要加上这段代码，contentType = text/html表示格式是text/html，而charset = GB2312是表示内容显示为简体中文，在其中要用到java.sql.*这个包，所以在写导引的时候把它也加了进来。 程序能实现的功能是取得表单上各项信息，if(name.equals( )用来判断是否输入用户信息，如果用户信息输入为空的话，就用这句response.sendRedirect(enter.jsp?error = 1);给出错误信息，并且跳回进入界面enter.jsp。 这三句的作用是获得用户输入的性别，更新方式以及颜色的信息。 这句的作用不是savadata版块的作用，但是是必不可少的，用于以后数据库的连接。 这几句是用sql语句写的，用于查询online这张表中有哪些用户以及昵称是什么，因为这条语句已经声明了一个变量是数据库语句，所以直接用smt.executeQuery(sql)来执行查询语句。 if语句块中的作用是先检查是否有相同的昵称上线，如果没有，就把用户信息存入session中，并且把昵称，性别加入到online表中，然后导向chatroom.jsp。如果有相同昵称的用户上线就执行else语句，给出错误信息，将页面指向enter页面，最后的con.close()的意思是将数据库给关闭了。通过以上程序的编写和执行，就完成了savadata.jsp版块的制作3、Chatroom.jsp版块（1）将整个页面分为三个框架（采用左侧固定，下方嵌套的方法）其中左边的是guest.jsp的内容，右边的是show.jsp的内容，下边的是note.jsp的内容。（2）具体的显示方法： 通过代码将这三个jsp放入对应的框架上去。就可以实现显示。（3）这里也要设计一个出错信息：if(session.getValue(name)=null)response.sendRedirect(enter.jsp?error=3);表示的是用来判断上网者是否经过登录界面进入此网页。若未经过，则导向enter.jsp并传送一个错误代码。4. note.jsp版块 这一块做的是note版块，主要作用是发送聊天消息，然后送出的消息交由savenote.jsp将聊天信息保存起来。 将结果显示在show的页面上。让这个程序指向savenote.jsp，即此程序的结果交由savenote.jsp来处理。先建立一个表格，在表格里面设置先添加一个文本，表示在此处输入你的聊天语句，后面插入一个文本字段，再添加两个按钮，分别为清除和发送消息。下面两句代码的意思是显示聊天人的基本信息，此句表示获得聊天人的远程IP地址，它是通过调用JSP里面的库函数来实现的。离开聊天室实现一个超链接到out.jsp，当聊天人点击它，就会跳转到out.jsp界面，摆脱框架的限制，显示在整个网页中。至此，note.jsp就做完了，也实现了聊天人发送消息的功能。 note.jsp截图界面如下所示： 5、savanote.jsp版块（1）从note中得到信息String note=new String(request.getParameter(note).getBytes(ISO-8859-1);（2）判断此信息是否为空，为空则导向 show.jsp并传送一个错误代码（3）不为空，就把上网者输入的信息，昵称，颜色存入chatroom中数据库连接代码：Class.forName(sun.jdbc.odbc.JdbcOdbcDriver);Connection con=DriverManager.getConnection(jdbc:odbc:chat);由于昵称及颜色已经存在于session（savedate.jsp）中。因此可以直接取出这两项内容。String color=(String)session.getValue(color);与信息一起放入信息表中：sql=insert into chatroom(nicheng,xinxi,yanse)values(+name+,+note+,+color+);（4）使网页导向show.jsp中，显示聊天室最新的发言：response.sendRedirect(show.jsp);6、show.jsp版块（1）首先取得更新时间间隔：String change=(String)session.getValue(change);（2）设置更新时间：response.setHeader(Refresh,change);（3）连接到数据库，从chatroom表中取出信息（发言）：String sql=select * from chatroom order by shijian desc;（4）将这些信息做按时间顺序的递减操作，以便显示在前面的总是最新的发言信息。（5）显示出最近的前15个发言信息：至此，显示信息这块就做完了，它在网页显示是 传回savanote.jsp中。可以浏览到整体信息。7Guest.jsp 这段程序代码所完成的功能是：显示目前上网者的信息。 这个代码是实现session中存储的更新取出，然后设置文件头名为Refresh。 这段代码的意思是先定义一个整形变量count，并把它的初值置为0，用while循环语句来实现，当用户的资料和系统储存的资料相匹配时候，count就加1，并且在循环中用ifelse语句判断，当用户的性别和boy相匹配时，就显示一张boy的图片，颜色为蓝色，否则就显示女孩的图片，颜色为red，最后将所有用户的昵称显示出来。 Guest.jsp截图界面如下所示：8、out.jsp版块这个程序是上网者选择“离开聊天室”链接时的注销程序。（1）同样和前面类似要连接到