JSP_Access网站博客实习报告.doc

第一章 引言31.1 系统概述31.2 系统功能31.3 系统开发环境41.3.1 硬件41.3.2 软件4第二章 数据库设计52.1 建立数据库52.2 建立数据表5第三章 详细设计63.1 定义站点63.2 设置数据库连接93.3 博客系统主页面设计103.3.1 首页index.jsp的设计103.3.2 以分类显示内容页面blogCategory.jsp的设计183.3.3 显示作者及网站信息页面blogInfo.jsp的设计183.3.4 博客文章及回复页面blogMessage.jsp的设计183.4博客管理页面的制作223.4.1 管理员登陆页面adminLogin.jsp的设计223.4.2 管理网站信息页面adminWebInfo.jsp页面的设计223.4.3 管理文章分类页面blogAdminCategory.jsp的设计243.4.4 删除文章分类页面delcate.jsp的设计263.4.5 管理文章列表页面blogAdminMessage.jsp的设计263.4.6 管理文章及回复详细信息页面blogAdminFix.jsp的设计293.4.7 删除文章页面delmess.jsp的设计323.4.8 删除回复页面delcomm.jsp的设计323.4.9 添加文章页面blogAdminPost.jsp的设计33第四章 网站测试354.1 页面的测试354.1.1 首页的测试354.1.2 博客文章详细信息页面的测试354.1.3 博客文章分类显示页面的测试364.1.4 定位到最新评论的测试364.1.5 查看网站信息页面374.1.6 管理员登录页面的测试374.1.7 修改网站信息页面的测试374.1.8 管理文章分类页面的测试384.1.9 发表文章页面的测试384.1.10 文章列表页面的测试394.1.11 管理文章详细信息页面的测试394.2 数据库数据的测试404.2.1 插入记录404.2.2 修改记录424.2.3 删除记录43第五章 总结45第一章 引言1.1 系统概述1.2 系统功能 组织结构图Index.jsp(系统主页面)用户浏览网站博客管理登录blogInfo.jspadminLogin.jspBlogCategory.jspblogMessage.jspadminWebJnfo.jspblogAdminCategory.jspblogAdminMessage.jspblogAdminPost.jspblogAdminFix.jspdelcate.jspdelmess.jspdelcomm.jsp站点地图：1.3 系统开发环境1.3.1 硬件1.3.2 软件 1 操作系统 Windows2000,Windows2003,WindowsXP均可 2 软件开发环境 J2SDK组件，Tomcat服务器软件，phpStudy开发环境（MySQL数据库） 第二章 数据库设计2.1 建立数据库使用的软件：phpStudy开发环境建立的数据库：Weblog包含4个表，分别是webconfiguration、blogcategory、blogmessages及blogcomments2.2 建立数据表webconfiguration表，这个表最主要的目的在于存储网站的信息，如网站名称等。所有字段的名字大都以“Web”为前缀符，以避免保留字的命名缺陷。本表以“id”为主键，并设置“auto_increment”(自动编号),这样就可以在添加资料时为每一个记录加上一个单独的编号而不重复。如图1所示：图1blogcategory表：这个表主要的目的是存储网站的文章分类信息。本表以“ca_id”（分类编号）为主键，并设置为“auto_increment”(自动编号)，如此即能在添加资料时为每一条记录加上一个单独的编号而不重复。如图2所示。图2blogmessages表：这个表主要目的是存储网站的文章内容。本表以“blog_id”(blog编号)为主键，并设置为“auto_increment”(自动编号)，如此即能在添加资料时为每一条记录加上一个单独的编号而不重复。如图3所示。图3Blogcomments表：这个表主要目的是存储网站的文章回复内容。本表以“co_id”(回复编号)为主键，并设置为“auto_increment”(自动编号)，如此即能在添加资料时为每一条记录加上一个单独的编号而不重复。如图4所示。图4第三章 详细设计3.1 定义站点先将自己设计好的静态网页原始文件，复制到网站路径C:Program FilesApache Software FoundationTomcat 5.5webapps目录下，如图5所示。图5打开Dreamweaver 8，然后选择菜单栏中的“站点”“新建站点”命令后，进入对话框在设置，过程如图6图12所示。选中“高级”选项，在“站点名称”中输入“blog”，然后在“本地根文件夹”中输入程序使用文件夹的位置，单击“测试服务器”分类图6选择“服务器模型”中的“JSP”，“访问”中的“本地/网络”，URL前缀为：http:/hocalhost:8080/blog（blog为程序使用的文件夹名称）。然后点击“基本”选项图7选中“自动刷新远程文件列表”，单击“下一步”按钮图8单击“测试URL”按钮图9URL前缀测试成功，单击确定，然后单击“下一步”按钮图10因为当前程序并不打算上传到其他的服务器，也没有其他的编辑成员，选择“否”单选按钮后，单击“下一步”按钮图11若是设置没有问题，请单击“完成”按钮，在“站点定义”对话框中再单击“完成”按钮即可完成站点的新建与定义图123.2 设置数据库连接在完成了网站的定义后，接下来就需要将网站博客与数据库进行连接。网站与数据库连接的操作方法如下：（1）在“数据库”面板中“单击”按钮，在弹出的菜单中选择“MySQL驱动程序（MySQL）”选项，如图13所示。图13（2）在打开的“MySQL驱动程序（MySQL）”对话框中进行设置，如图14所示。图14（3）单击“测试”按钮测试是否与MySQL数据库正常连接，如果正确，则弹出一个消息框，如图15所示。图153.3 博客系统主页面设计3.3.1 首页index.jsp的设计首先要制作网站博客的首页index.jsp。本页面除了要显示最新的文章外，还要在右方的栏中显示文章分类、最新文章及最新评论等信息。1.绑定记录集本页面绑定5个记录集，包括整个网站信息、文章列表、文章分类、最新文章及最新评论。（1）.请切换到“应用程序绑定”面板，选择“+”“记录集（查询）”命令，现在要添加显示网站信息的记录集，设置如图16所示。最后单击“确定”按钮完成设置。图16（2）.在选择“+”“记录集（查询）”命令，我们要添加文章列表的记录集，设置如图17所示。最后单击“确定”按钮完成设置。图17（3）.请再选择“+”“记录集（查询）”命令，我们要添加文章分类的记录集，如图18所示。最后单击“确定”按钮完成设置。图18（4）.再选择“+”“记录集（查询）”命令，我们要添加最新的5篇文章记录集，设置如图19和图20所示。图19图20（5）.再选择“+”“记录集（查询）”命令，我们要添加最新的5篇回复记录集，设置如图21和图22所示。图21图222.布置网站信息显示字段在博客系统中，整个网站的信息时存储在表中的，我们已经绑定了记录集“RecWebInfo”，如图23所示，请分别拖动字段webName和webDesc到页面显示。图233.布置文章分类区域在博客系统中，整个文章分类资料是存储在表中的，我们已经绑定记录集“RecCategory”,如图24图27所示，请拖动字段到页面显示并设置。图24图25图26图274.布置最新文章区块在博客系统中，最新文章资料是存储在表中的，我们已经绑定记录集“RecNewPost”,如图28和图29所示，请拖动字段到页面显示并设置。图28图29回到编辑页面后请单击选中整个字段，接着再选择“服务性行为”面板中的“+”“重复区域”命令，打开“重复区域”对话框进行设置，如图30所示。图305.布置最新评论区域我们已经绑定了记录集“RecNewComment”,如图31和图32所示，请拖动字段到页面显示并设置。图31图32回复文章是显示在相关主文章的下方，在每个回复前会放置锚记post。所以如果希望连接到该页时可以滚动到该回复，就必须在连接上设置锚记链接。如图33所示，回到编辑页面后，在“链接”列表框原来的地址后再加上如下锚记链接。#图33单击选中整个字段 ，接着再选择“服务性行为”面板中的“+”“重复区域”命令，打开“重复区域”对话框进行设置，如图34所示。图346.布置文章列表区域最后要设置的是首页最主要的地方，即左栏的主要文章列表。我们已经绑定记录集“RecBlog”，在这里显示的资料是以时间排序，一次显示5篇。如图35所示，请拖动字段到页面显示。图35其中“详细内容”和“相关分类”的设置如下：选中“详细内容”四个字，单击属性面板中的“链接”文本框右边的文件夹，弹出对话框，设置如图36所示。图36单击URL文本框右边的“参数”按钮，弹出对话框，如图37所示。图37blog_id的值选择为记录集“RecBlog”的“blog_id”字段。如图38所示。图38“相关分类”的设置步骤可参照“详细内容”设置，链接设置如图39所示。图39参数设置如图40所示。图40我们希望首页上每篇文章都不是显示全部的内容，而是截取部分字符串显示，让浏览者可以单击详细内容页面阅读全文。设置如下：将光标定位到显示文章内容的表格中，删除该字段，然后转到“代码”视图，输入以下代码： 此代码意思是从文章内容的开头开始截取，截取前200个字符。这样即完成捕获字符串字段的显示。最后设置重复区域及插入记录集导航条。如图41图45所示。图41图42图43图44完成后如图45所示：图45终于完成了首页index.jsp。其实博客主要页面的布局都与这一页面类似，以不同分类显示资料几乎相同，不同的只是记录集“RecBlog”设置的筛选值。所以可以以此为基础，复制后进行修改。选中页面index.jsp，按“Ctrl”+“D”快捷键复制一个新页面，修改这个文件名称为“blogCategory.jsp”。3.3.2 以分类显示内容页面blogCategory.jsp的设计刚才复制的blogCategory.jsp，即是分类显示内容的页面。在原来的index.jsp中，记录集“RecBlog”只是单纯地从表“blogmessages”取出资料按时间排序，但是在blogCategory.jsp中，要按照前一页传递的分类编号筛选出相关的资料，操作如下。 双击“服务器行为”面板上“记录集（RecBlog）”，打开“记录集”进行修改。设置如图46所示。图463.3.3 显示作者及网站信息页面blogInfo.jsp的设计先参考3.3.1的内容绑定记录集、布置网站信息显示字段、布置文章分类、最新文章、最新评论3个区域。1拖动记录集“RecWebInfo”中的“webabout”及“webIntroduce”两个字段到页面中显示，如图47所示。图473.3.4 博客文章及回复页面blogMessage.jsp的设计先参考3.3.1的内容绑定记录集、布置网站信息显示字段、布置文章分类、最新文章、最新评论3个区域。1.绑定记录集绑定记录集首先是主文章的记录集。请切换到“应用程序绑定”面板，选择“+”“记录集（查询）”命令，打开“记录集”对话框进行设置，如图48所示。最后单击“确定”按钮完成设置。图48接着是回复记录集。请切换到“应用程序绑定”面板，选择“+”“记录集（查询）”命令，打开“记录集”对话框进行设置，如图49所示。最后单击“确定”按钮完成设置。图492.布置显示字段首先布置主文章的显示字段，如图50所示，拖动记录集“RecBlog”中的字段到页面中图50接着布置回复的显示字段，如图51所示，拖动记录集“RecComments”中的字段到页面，并设置邮件文本链接。图513.插入回复前的锚记接着在每一条留言前加入一个以字段“co_id”为值的锚记，点击首页最新评论区域中的链接，就可以滚动到这条回复，如图52和图53所示。图52图53选取刚才加入的锚记，将记录集“RecComments”的“co_id”字段拖动到锚记上，然后在选择“绑定到”“”,再单击“绑定”按钮完成设置。4.设置重复区域一篇文章可能有多个回复，所以要为记录集“RecComments”设置重复区域。选中需要重复的区域，如图54所示。图54再选择“服务器行为”面板中的“+”“重复区域”命令，设置如图55所示。图555.设置回复的表单与插入记录最后要设置回复的表单并设置插入记录的服务器行为，先检查下面的表单名称是否正确，如图56所示。图56（1）拖动记录集“RecBlog”的“blog_id”字段，在表单“co_date”字段中输入设置现在时间为默认值。在该页面的“代码”视图第二行加入如下代码： （2）拖动记录集“RecBlog”“blog_title”字段到表单“co_subject”字段，并在前方加上字符串：“RE：”，如图57所示。图57（3）最后选择“服务器行为”面板中的“+”“插入记录”命令，打开“插入记录”对话框进行设置，如图58所示。图58如此即完成此页的制作，最后保存文件。3.4博客管理页面的制作3.4.1 管理员登陆页面adminLogin.jsp的设计先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。检查页面中登录表单的名称，选择“服务器行为”面板中的“+”“用户身份验证”“登录用户”命令，打开“登录用户”对话框进行设置，如图59和图60所示。图59图60在“登录失败，转到”的文本框中的页面后面加上代码：？Msg=1。然后将光标定位到想要显示错误信息的地方，转到“代码”视图，加入代码：，并且要在该页代码视图的动态代码部分加上如下代码：这样，如果登录失败，将会出现错误提示信息。3.4.2 管理网站信息页面adminWebInfo.jsp页面的设计1. 布置网站信息显示字段先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。如图61所示。图612. 更新记录的设置如图62所示，检查页面中表单的名称与记录集“RecWebInfo”对应的字段是否相同，并将该字段拖动到表单元素上。图62接着选择“服务器行为”中的“更新记录”选项，打开“更新记录”对话框进行设置。如图63所示。图633注销用户与限制对页的访问设置既然是管理页面，就应该有让登录者注销的功能，同是也要检查没有经过登录操作的用户，这里要设置注销用户与限制对页的访问。选择“注销管理”四个字，再选择“服务器行为”面板中的“+”“用户身份验证”“注销用户”命令，打开“注销用户”对话框进行设置。如图64所示。图64选择“服务器行为”面板中的“+”“用户身份验证”“限制对页的访问”命令，打开“限制对页的访问”对话框进行设置。如图65所示。图65如此即完成此页的制作，最后保存文件。3.4.3 管理文章分类页面blogAdminCategory.jsp的设计1. 布置网站信息显示字段 先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。如图66所示。图662. 关系数据库的使用接着绑定记录集“RecCategoryCount”，这个记录集要同时用到两个表，除了要显示每个类别的名称，还要统计这个类别中有多少文章。要将两个表联起来，可以利用SQL语法中的JOIN，如表1所示，基本连接语法有3种：连接语法说明INNERJOIN等值连接，仅包含两个表连接字段的资料相同的记录LEFTJOIN左连接，显示左方表中全部记录及右表中连接字段的资料相同的记录RIGHTJOIN右连接，显示右方表中全部记录及左表中连接字段的资料相同的记录表1要计算出某个文章分类在文章表中有几篇文章，这里会用LEFTJOIN，因为如果某个分类没有任何文章，使用INNERJOIN将无法显示该分类。统计每个分类下的文章数，就要使用COUNT()函数来统计关系表中对应的资料条数，其SQL语法代码如下：SELECT Count(blogMessages.blog_id) AS ca_total, blogCategory.ca_id, blogCategory.ca_nameFROM weblog.blogCategory LEFT JOIN weblog.blogMessages ON blogCategory.ca_id= blogMessages.ca_id GROUP BY blogCategory.ca_id,blogCategory.ca_name接着要在Dreamweaver设置这个记录集，切换到“应用程序绑定”面板，选择“+”“记录集（查询）”命令。请进入高级模式设置，将上面的SQL语法输入，最后单击“确定”按钮完成设置。如图67所示。图673 设置更新资料将“RecCategoryCount”记录集中的字段拖动到图68所示的表单中的字段。然后设置“重复区域”图68接着选择“服务器行为”面板中的“+”“更新记录”命令，打开“更新记录”对话框进行设置，如图69所示。图69设置更新资料完成，选中“删除”图片，选择“服务器行为”面板中的“+”“转到详细页面”命令，打开“转到详细页面”对话框进行设置，如图70所示。图704. 设置插入记录要添加分类资料可以利用最下方的表单，选择选择“服务器行为”面板中的“+”“插入记录”命令，打开“插入记录”对话框进行设置，如图71所示。图71最后参照3.4.2的说明设置注销用户与限制对页的访问，如此即完成此页的制作，保存文件。3.4.4 删除文章分类页面delcate.jsp的设计此页面是一个隐藏页面，要利用“服务器行为”中的“已准备（插入，更新，删除）”的功能选项，设置如图72所示：图72此页面最后有一行代码删除后快速回到目标页面blogAdminCategory.jsp3.4.5 管理文章列表页面blogAdminMessage.jsp的设计1. 布置网站信息显示字段 先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。如图73所示。图732. 绑定高级的记录集接着绑定记录集“RecMessage”，特别注意的是：我们将以“ca_id”（分类编号）作为筛选值，这样就可以单独显示某个分类的资料。当程序没有设置任何分类参数时，就显示所有资料。记录集“RecMessage”的设置如图74和图75所示。图74图753. 布置显示资料的表格参考图76和图77，将记录集“RecMessage”拖动到表格中显示，并加入转到详细页面、重复记录和记录集导航条。图76图774. 制作查询表单显示表格的上方有一个下拉菜单，我们想在其中显示所有分类的名称，这样选定某一个类别名称再单击“提交”按钮，显示表格中就可以只显示该类别的资料。选取上方的表单，“动作”文本框空白代表选定的值会送回原页面，“方法”为“GET”代码传送的值会转化为地址后方的参数。如图78所示。图78下拉式菜单的值必须有记录集形成，所以要建立记录集“RecCategory”，设置如图79所示。图79回到页面选取这个下拉式菜单，在“属性”面板中单击“动态”按钮，如图80所示。图80在这个菜单中，除了第一个选项“全部”是我们自定义的，其余选项都是由记录集产生的。请按图81所示进行设置。图81最后参照3.4.2的说明设置注销用户与限制对页的访问，如此即完成此页的制作，保存文件。3.4.6 管理文章及回复详细信息页面blogAdminFix.jsp的设计1. 布置网站信息显示字段 先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。如图82所示。图822绑定记录集在本页面中我们要依据前一页传送过来的blog编号（blog_id）在表“blogmessages”及“blogcomments”中筛选资料进行管理。记录集“RecMessage”的设置如图83所示。图83记录集“RecComments”的设置如图84所示。图843布置修改文章的表单如图85所示，将记录集“RecMessage”的字段拖动到表单中。图85这里要再设置表格内的“删除”按钮。管理员单击这个按钮时，程序会带着参数重新回到本页面执行删除文章的操作。选中“删除”图片，在选择“服务器面板”中的“+”“显示区域”“如果记录集为空则显示”，设置如图86所示。图86接着选择“服务器面板”中的“+”“转到详细页面”，设置如图87所示。图87设置完毕后，只要这个文章中没有任何回复程序才会显示删除按钮，也才允许执行删除操作。4 布置修改回复表单将记录集“RecComments”的字段拖动到表单中。如图88所示。图88选择“删除”图片，选择“转到详细页面”，设置如图89所示。图89接着在标签编辑区选取将整个表单选起来，然后选择“重复区域”，设置如图90所示。图905. 设置更新记录的服务器行为打开“更新记录”的对话框，设置如图91所示。图91接着选择“更新记录”的对话框，设置如图92所示。图92最后参照3.4.2的说明设置注销用户与限制对页的访问，如此即完成此页的制作，保存文件。3.4.7 删除文章页面delmess.jsp的设计此页面是一个隐藏页面，要利用“服务器行为”中的“已准备（插入，更新，删除）”的功能选项，设置如图93所示：图93此页面最后有一行代码删除后快速回到目标页面blogAdminMessage.jsp3.4.8 删除回复页面delcomm.jsp的设计此页面是一个隐藏页面，要利用“服务器行为”中的“已准备（插入，更新，删除）”的功能选项，设置如图94所示：图94此页面最后有一行代码删除后快速回到目标页面blogAdminMessage.jsp3.4.9 添加文章页面blogAdminPost.jsp的设计1. 布置网站信息显示字段 先参考3.3.1绑定记录集“RecWebInfo”，并布置网站信息的显示字段。如图95所示。图952绑定记录集在添加资料的表单中，我们希望文章的分类可以利用下拉式菜单直接选择，所以要先绑定记录集，切换到“应用程序绑定”面板，选择“+”“记录集（查询）”命令，打开“记录集”对话框进行设置，如图96所示。图963. 设置表单并设置插入记录服务器行为回到页面选取这个下拉式菜单，在“属性”面板中单击“动态”按钮，设置如图97和图98所示。图97图98接着选择“服务器面板”中的“+”“插入记录”命令，打开“插入记录”命令对话框进行设置，如图99所示。图99最后参照3.4.2的说明设置注销用户与限制对页的访问，如此即完成此页的制作，保存文件。到此整个作品的制作已完成。第四章 网站测试4.1 页面的测试4.1.1 首页的测试在首页中可以查看整个网站信息，右方有文章分类区域、最新文章区域及最新评论区域等。左方显示了目前的所有文章，按发表的先后显示，一次显示5篇，可利用下方的记录集导航条进行翻页操作，如图100所示。图1004.1.2 博客文章详细信息页面的测试点击首页任一篇文章“详细内容”的链接或者点击右方“最新文章”下的任一链接，即可进入该文章的详细信息页面，如图101所示。图101除了可以浏览文章全文，有任何想法还可以在下方的表单发表回复，如图102所示。图1024.1.3 博客文章分类显示页面的测试点击首页任一篇文章“相关分类”的链接或右方页面上“文章文类”下的任一链接，即可进入相关分类的页面，如图103所示。图1034.1.4 定位到最新评论的测试点击右方“最新评论”下的任一链接，即可定位到该文章的此评论处，如图104所示。图1044.1.5 查看网站信息页面点击网页上的“认识作者”或“关于本站”的文本链接，即可进入本页面显示相关信息，如图105所示。图1054.1.6 管理员登录页面的测试输入账号及密码（皆为admin）进入管理页面，如果输入错误将出现提示如图106所示。图1064.1.7 修改网站信息页面的测试当登录成功后，即进入此页面。在这个页面中可以修改所有显示的网站信息以及管理的账号及密码，如图107所示。图1074.1.8 管理文章分类页面的测试点击页面右方的“文章分类管理”链接，即进入此页面。在这个页面中可以管理当前网站文章分类的状况，除了可以修改，删除原有的分类，还可以添加分类，如图108所示。图1084.1.9 发表文章页面的测试点击页面右方的“添加文章”链接，即可进入该页面。在这个页面中可以添加文章到数据库，也可以在下拉式列表框中选择显示分类，如图109所示。图1094.1.10 文章列表页面的测试点击页面右方的“管理文章及回复”链接，即可进入该页面。在这个页面中可以看到所有的文章的列表，也可以利用上方的下拉式列表框选取不同的类别来显示文章，如图110所示。图1104.1.11 管理文章详细信息页面的测试点击上个页面中任一篇文章的标题，即进入此页面。在这个页面中除了可以修改或删除文章，也可以修改或删除相关的回复，如图111所示。图1114.2 数据库数据的测试4.2.1 插入记录（1）添加文章评论。打开一篇没有评论的文章，如图112所示。图112添加一条评论后，如图113所示。图113（2）添加一条文章分类。插入前只有三条分类，如图114所示。图114添加后，如图115所示。图115（3）添加一篇文章，添加