毕业设计（论文）-基于Web的个人博客的设计与实现.pdf

四川信息职业技术学院毕业设计说明书 第页i 目录 摘要1 第 1 章绪论2 1.1博客的作用2 1.2研究博客的背景与必要性3 第 2 章 关键技术简介5 2.1相关术语5 2.1.1站点.5 2.1.2超链接.5 2.1.3url.5 2.2dreamweaver8.0 简介.5 2.3adobephotoshop简介6 2.4开发语言简介7 2.4.1vbscript 脚本语言7 2.4.2javascript.8 2.4.3php 和 mysql 简介8 第 3 章 需求分析与博客的设计11 3.1需求分析11 3.1.1主要功能划分.11 3.1.2功能需求描述.11 3.1.3博客系统功能简图.11 3.1.4连接数据库的关键代码.12 3.2博客系统预期的结果12 3.3界面设计13 3.4数据库设计14 第 4 章 博客系统的实现17 4.1博客前台页面设计实现17 4.1.1首页面.17 4.1.2博文界面完成效果.20 4.1.3相册界面完成效果.22 4.1.4留言界面完成效果.23 4.2博客系统后台设计实现25 4.2.1后台登陆页面.25 4.2.2后台功能管理菜单.27 4.3博客系统的测试30 4.3.1博客系统的具体测试.30 四川信息职业技术学院毕业设计说明书 第页ii 总结与展望31 致谢32 参考文献33 四川信息职业技术学院毕业设计说明书 第页1 摘要 博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方 式” 。简单的说博客是一类人，这类人习惯于在网上写日记。 博客它通常是由简短且经常更新的帖子所构成，这些张贴的文章都按照年份和日期倒序排 列。blog 的内容和目的有很大的不同，从对其他网站的超级链接和评论，有关公司、个人构想 到日记、照片、诗歌、散文，甚至科幻小说的发表或张贴都有。 本博客与网上的其他博客一样，实现了一般博客所具有的功能，能够进行文章，图片的发布 以及进行博客系统中的各个部分的管理、后台的管理等等，浏览者可以进行浏览和留言等等。 本博客采用 php 实现以上功能，用 mysql 建立数据库，以 web 网页的形式呈现，用 “wamp5ver2.0”实现浏览各项功能。 关键词blog 博文 相册 mysql 数据库 四川信息职业技术学院毕业设计说明书 第页2 第 1 章 绪论 博客通常被称为“网络日志”简称为“网志” 。博客是继 emaile、bbs、im 之后出现的第四 种全新的网络交流方式。博客系统不仅仅是一种单向的发布系统，它有着极其出色的交流功能。 在以往的几种网络交流方式中，bbs 过于公共化。而 emaile 和即时通信工具 im 则有很明显的私 人性质，博客系统的出现则将公共性和私人性很好的结合起来。 博客是一个正处于快速发展和 快速演变中的互联网新应用，它就是一个网页，通常由简短且经常更新的帖子构成，这些帖子一 般是按照年份和日期倒序排列的。它并不等同于“网络日志” 。作为网络日志是带有很明显的私 人性质的， 博客则是私人性和公共性的有效结合， 它绝不仅仅是纯粹个人思想的表达和日常琐事 的记录，它提供的内容可以用来进行交流和为他人提供帮助，是可以包容整个互联网的，具有极 高的共享精神和价值。 简言之，博客就是以网络作为载体，简易迅速便捷地发布自己的心得，即时有效轻松的与他 人进行交流， 再集丰富多彩的个性化展示于一体的综合性平台。 博客系统可以充分展示每个用户 的内心世界、 工作感受、 技术资料等方面的资讯。 博客是个独立站点任何人都可以方便的来使用， 就像每个人拥有自己的笔记本开始书写一样简单。 博客的出现代替了以前的个人网站， 任何人不需要懂得网页设计的制作技术， 就可以在互联 网上表达自己的观点，展示自己的风采，记录自己的生活琐事或是工作经验，让自己得到更多人 的关注。 1.1博客的作用 (1)促进学习： 写 blog 可以促进学习， 想写文章出来， 自然不能是泛泛的了解就可以的， 要理解了才能写的出来。这就促进了对某些领域的不断学习和思考。 (2)记录收获：blog 中，常常是记录下来的都是瞬间的灵感，对于事物的感悟，经过多 日的思考和实践的结果，对于某个问题的解决方案等等，这些都是财富，要记录下来。 (3)反映成长：写 blog，可以反映出人的思考过程，而不仅仅是思考结果。对于一个问 题或是领域，从不了解到了解，从了解到熟悉，从熟悉到精通。这记录了一个人思考和解决问题 的成长过程。很久之后，看到自己之前的文章，将会觉得自己进步了。 四川信息职业技术学院毕业设计说明书 第页3 (4)结交朋友：写了 blog，自然会有许多志趣相同的朋友来阅读，这可以认识许多朋友。 大家有共同的兴趣爱好，自然谈得来。 (5)共享知识：blog 给大家看，大家的博客也给自己看。这个问题我解决了，那个问题 他解决了。大家互通有无，建立起一个社群。 (6)交流看法：回复的人对博客的观点或赞同，或反对，大家一起讨论，听听别人的思 想，可以促进双方的共同进步。 (7)包装自己：看到一篇篇用心写出的文章，自然是对自己知识技能的最好宣传。 (8)练习文笔：写 blog，得考虑这篇文章是否拿得出手吧，全是不通的语句怎么好意思 给人看，这是锻炼语句的好机会。 1.2研究博客的背景与必要性 现在越来越多的人都拥有了自己的私人博客，而且很多公司，单位也都有自己的博客，在这 些博客中每个都有自己独立的特点，都有自己的风格，为自身树立了一个与众不同的形象，博客 也变得越来越普遍， 它逐渐成为一个随时可以记录自己以及身边发生的一切的地方， 在这里可以 发表自己的观点，谈自己的想法，也可以和别人交流，学习到更多东西，研究博客具有很大的价 值 博客是继 email、bbs、icq 之后出现的第四种网络交流方式。 博客是网络时代的个人“读者文摘”。 博客是以超级链接为武器的网络日记。 博客是信息时代的麦哲伦。 博客代表着新的生活方式和新的工作方式，更代表着新的学习方式。通过博客，让自己学到 很多，让别人学到更多。 博客代表着“新闻媒体 3.0 版”：旧媒体（old media） 新媒体（new media） 自媒体 （we media） 。 总之，博客是一个正处于快速发展和快速演变中的互联网新应用。在市场术语中对博客 的定义为：一种表达个人思想和网络链接，内容按照时间顺序排列，并且不断更新的出版方式。 pyra 创始人 evanwilliams 认为博客概念主要体现在三个方面：频繁更新（frequency） 、简洁明 四川信息职业技术学院毕业设计说明书 第页4 了（brevity）和个性化（personality） 。佩姬?努南的解释是：博客是每周 7 天，每天 24 时运 转的言论网站， 这种网站以其率真、 野性、 无保留、 富于思想而奇怪的方式提供无拘无束的言论。 其他说法还有：博客是一个“快捷易用的知识管理系统”（dylan tweney） ，博客是新型的“协 同媒体”，博客是“不停息的网上旅程”，是“个人网上出版物（社区）”，是“网络中的信息 雷达系统”，是“人工搜索引擎”，是“专家过滤器”，是“自组织网络生态”，是“草根记 者” 四川信息职业技术学院毕业设计说明书 第页5 第 2 章 关键技术简介 2.1相关术语 2.1.1站点 所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就 构成了网站的实质内容。 站点文件夹里除了网页文件还有素材文件， 所谓素材就是网页中所用到 的图像、声音、视频等，这些内容是以单独文件的形式存在。 2.1.2超链接 我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠 标可以打开其他的网页或是跳转到其他的网站， 这就是超链接。 采用超链接技术可以将不同的网 站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览 和查找。 人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源， 实现在互联 网中的漫游。超链接能使 web 服务存在广泛和持久的生命力，超链接可以说是 web 的灵魂。 2.1.3urlurlurlurl url（uniform resource locator 的缩写） ，统一资源定位器。互联网中某种信息资源以某种 方式存储在网络中的某处，必须用一个惟一的 url 来进行标识，这样才能方便查找。对于 web 来说，可以简单把 url 理解为网址。每个 web 网页都有自己的网址，在浏览器地址栏里输入网页 的 url，就可以访问这个网页。例如，/index.html，其意思就是采用 http 超文本传输协议访问新浪网的首页， 由于网页均是通过 http 超文本传输协议进行访问， 默认下， “http:/”可以省略不输入。 2.2dreamweaver8.0 简介 dreamweaver 是创建和管理网页的专业化可视编辑器。使用 dreamweaver 可以轻松创建跨平 台、跨浏览器的页面。macromedia 的 roundtrip html 技术允许用户随意导入 html 文档而无需 四川信息职业技术学院毕业设计说明书 第页6 重新设置代码格式。 dreamweaver 可以为用户做到：使用动态 html 功能（例如具有动态效果的层和行为）而不 用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错 误。 dreamweaver 还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜 单和快捷键，甚至编写 javascript 代码扩展 dreamweaver 的行为和属性检查器。 至于 dreamweaver 工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。 常用的 dreamweaver 工作区组件有以下若干种： (一) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 (二) 装载器中包含一些打开和关闭常用检查器和模板的按钮。 (三) 对象工具栏包含创建不同类型的对象（例如图像、表格、层等）的按钮。 (四) 属性检查器显示选定对象的属性。 (五) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 (六) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗 口中。 2.3adobe photoshop 简介 photoshop 是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、 广 告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 (一) 文字处理更加方便 (二) 增加了图层集，让图层的管理更有序。 (三) 新增图像功能：图像的剪切和剪裁更加方便。 (四) 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便选项参数的设置。 (五) 为了更方便地用路径绘画， 改进增加了几何形状工具， 通过选择工具的不同工作模式， 可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。 四川信息职业技术学院毕业设计说明书 第页7 2.4开发语言简介 2.4.1vbscript 脚本语言 一、vbscript 数据类型 vbscript 只有一种数据类型 variant。variant 是一种特殊的数据类型，根据使用的方式， 它可以包含不同类别的作息。 因为 variant 是 vbscript 中惟一的数据类型， 所以它也是 vbscript 中所有函数的返回值的数据类型。 最简单的 variant 可以包含数字或字符串。variant 用于数字上下文中时作为数字处理， 用 于字符串上下文中时作为字符串处理。 这就是说， 如果使用看起来像是数字的数据， 则 vbscript 会假定其为数字并以适用于数字的方式处理。与此类似，如果使用的数据只要能是字符串，则 vbscript 将按字符串处理。当然，也可以将数字包含在引号“”中使其成为字符串。 二、vbscript 变量 在 vbscript 中只有一个基本数据类型， 即 variant， 因此所有变量的数据类型都是 variant。 1.声明变量 声明变量的常用方式是使用 dim 语句、public 语句和 private 语句在脚本中显式声明。 2.变量的命名规则 变量命名必须遵循 vbscript 的标准命名规则，必须遵循： 第一个字符必须是字母 不能包含嵌入的钟点 长度不能超过 255 个安符 在被声明的作用域内必须惟一 合法的变量名，例如 strl、myvarl、j,不合法的变量名，例如 la、abc 等。 3.循环语句 循环用于重复执行一组语句。循环可分为三类：一类在条件变为 false 之前重复执行语句， 一类在条件变为 true 之前重复执行语句，另一类按照指定的次数重复执行语句。 在 vbscript 中可使用下列循环语句： 1)do.loop:当（或直到）条件为 true 时循环。 四川信息职业技术学院毕业设计说明书 第页8 2)while.wend:当条件为 true 时循环。 3)for.next:指定循环次数，使用计数器重复运行语句。 4)foreach.next:对于集合中的每项或数组中的每个元素，重复执行一组语句。 2.4.2javascript javascript 是一种基于对象(object)和事件驱动(event driven)并具有安全性能的脚本语 言。使用它的目的是与 html 超文本标记语言、java 脚本语言（java 小程序）一起实现在一个 web 页面中链接多个对象，与 web 客户交互作用。从而可以开发客户端的应用程序等。它是通过 嵌入或调入在标准的 html 语言中实现的。它的出现弥补了 html 语言的缺陷，它是 java 与 html 折衷的选择。 2.4.3php 和 mysql 简介 php，一个嵌套的缩写名称，是英文超级文本预处理语言（php:hypertext preprocessor） 的缩写。php 是一种 html 内嵌式的语言，是一种在服务器端执行的嵌入 html 文档的脚本语言， 语言的风格有类似于 c 语言， 现在被很多的网站编程人员广泛的运用。 php 独特的语法混合了 c、 java、 perl 以及 php 自创新的语法。 它可以比 cgi 或者 perl 更快速的执行动态网页。 用 php 做出的动态页面与其他的编程语言相比，php 是将程序嵌入到 html 文档中去执行，执行效率比 完全生成 html 标记的 cgi 要高许多； 与同样是嵌入 html 文档的脚本语言 javascript 相比， php 在服务器端执行，充分利用了服务器的性能；php 执行引擎还会将用户经常访问的 php 程序驻留 在内存中， 其他用户再一次访问这个程序时就不需要重新编译程序了， 只要直接执行内存中的代 码就可以了，这也是 php 高效率的体现之一。php 具有非常强大的功能，所有的 cgi 或者 javascript 的功能 php 都能实现，而且支持几乎所有流行的数据库以及操作系统。 php 最初是 1994 年 rasmus lerdorf 创建的，刚刚开始只是一个简单的用 perl 语言编写的 程序， 用来统计他自己网站的访问者。 后来又用 c 语言重新编写， 包括可以访问数据库。 php1.0， 提供了访客留言本、访客计数器等简单的功能。php2.0，定名为 php/fi(form interpreter） ， 加入了对 mysql 的支持， 从此建立了 php 在动态网页开发上的地位。 第三版就定名为 php3。 2000 年，php4.0 又问世了，其中增加了许多新的特性。 php 的特性包括： 四川信息职业技术学院毕业设计说明书 第页9 开放的源代码：所有的 php 源代码事实上都可以得到。 php 是免费的。 php 的便捷性 : php 十分便捷，学习简单 基于服务器端：由于 php 是运行在服务器端的脚本,可以运行在 unix、linux、windows 下。 嵌入 html：因为 php 可以嵌入 html 语言，所以学习起来并不困难。 简单的语言：php 坚持脚本语言为主，与 java 和 c+不同。 效率高：php 消耗相当少的系统资源。 图像处理：用 php 动态创建图像 面向对像：在 php4,php5 中，面向对象方面都有了很大的改进，现在 php 完全可以用 来开发大型商业程序。 php 相对于其他语言，编辑简单，实用性强，更适合初学者。 mysql 是目前最流行的开源 sql 数据库管理系统，由 mysql ab 公司开发。在 mysql 的官方 网站 /上，可以找到关于 mysql 的最新信息。 mysql 是一种关系数据库管理系统，其中的 sql 指的是“结构化查询语言” ，是用于访问数 据库的最通用的标准化语言。 mysql 最初是为处理大型数据库而开发的，与已有的解决方案相比，它的速度更快。另外， 良好的安全性和方便连接使得 mysql 非常适合访问因特网上的数据库。mysql 的主要特性如下： 能够工作在绝大部分硬件平台和操作系统上，如 linux、mac os、windows。 提供了用于 c、c+、eiffel、java、perl、php、python、ruby 和 tcl 的 api。 其 sql 函数是使用高度优化的类库实现的，运行很快。 服务器可以作为独立的程序以客户/服务器方式运行，也可以作为库嵌入（链接）到其他 应用程序中。 有大量可用的共享 mysql 软件，大大简化了 mysql 的使用和管理。 提供了灵活安全的权限和密码系统，当用户连接到服务器时，所有的密码传输均采用加 密形式。 具有较强的可伸缩性，能够处理大型数据库。使用 myisam 表时，最大可达 65 536tb， 四川信息职业技术学院毕业设计说明书 第页10 因此 mysql 数据库的最大表尺寸通常是由操作系统对文件大小的限制决定的。 mysql 支持多种通信方式。客户端可以使用 tcp/ip 协议、命名管道（windows 系统的 nt 系列）以及 unix 域套接字文件与 mysql 服务器通信。mysql 提供的 connector/odbc（myodbc 接 口、connector/j 接口和 connector/net 接口可以分别满足使用 odbc、jdbc 连接的客户端程序 以及.net 应用程序的连接需要。 所以该博客选择了 php 结合 mysql 以及 dreamweaver 进行制作。 四川信息职业技术学院毕业设计说明书 第页11 第 3 章 需求分析与博客的设计 3.1需求分析 3.1.1主要功能划分 主要功能包括：对文章和图片的添加，删除，修改等。浏览者可以选择自己感兴趣的类别， 然后进行阅读，并且可以对其留言和评价。在后台管理页面中，通过认证管理者身份，管理员可 以对博客系统中的信息进行管理。 3.1.2功能需求描述 （1）前台 任何用户都可以对所有类别的文章和图片进行浏览，也可以选择自己感兴趣的类别浏览。 如 果想对某篇文章想说说自己的想法，可以进行留言，或者对整个博客进行评价。 （2）后台 后台主要是对前台页面中的文章和图片进行添加、删除、修改，并同时连接数据库及时的对 其进行更新。以及对用户的留言进行管理。 （3）用户管理 管理人员：后台管理人员主要是系统管理人员，其他用户不能进入。后台管理人员要处理 管理员登陆、查询信息、发布和更新信息、添加、删除、修改等信息。 个人用户：个人用户只能浏览博客以及进行留言等，不能让那个进入后台。与系统管理人 员有很大的区别。 3.1.3博客系统功能简图 博客系统系统利用 dreamweaver、php、mysql 数据库等技术。将自己的心得和记录以及一些 精彩的东西向他人开放，使其与他人进行交流和学习，它不仅使自己有一个抒写心得，记录东西 的地方更加方便了自己与他人交流分享也为其他人提供不过了一个参考，学习的地方。 下面是该博客系统的功能简图: 四川信息职业技术学院毕业设计说明书 第页12 图 3-1 博客系统的功能简图 3.1.4连接数据库的关键代码 3.2博客系统预期的结果 本博客系统的预期成果是完成前台各种信息正确的显示和后台中对数据的添加、 删除、 修改 等功能全部实现。具体介绍如下： 1.前台的各个页面 四川信息职业技术学院毕业设计说明书 第页13 首页面中将对在博客后台所添加的文章、图片等显示出来、以及文章和图片的导航，留言等 等。 2.后台的各个页面 登陆页面， 管理员可以通过此页面进入后台管理整个系统。 所以在登陆页面时一定要做好安 全的判断，一定是在拥有正确的用户名，密码的前提下才能正确登陆。否则不能登陆。 进入后台管理系统后，对系统分为六大模块：文章管理，添加文章管理，文章类别管理， 图 片管理，图片类别管理，留言管理以及其它模块。 在文章管理模块中：文章管理应实现文章的添加，删除，修改。在添加文章管理模块中主要 是针对文章标题、文章内容、文章摘要、文章类别的添加。而文章类别管理模块主要是对文章类 别的添加和删除。 图片管理和图片类别管理：能够添加图片类别，对图片进行添加和删除。 留言管理：对用户的留言进行查看和删除。 3.3界面设计 在明确了博客系统的风格和定位后， 就是博客系统的材料组织以及博客各个的页面设计和数 据库设计。 首先当然应该是博文质量。 界面装饰得再花哨， 而文章却很臭， 对别人也是没多大吸引力的。 正所谓“花里胡哨，空空如也”，说的就是这个道理。 在保证博文质量的前提下， 对博客做适当的修饰美化是有必要的， 因为博客是一个很私人的 东西，是代表自己的符号，所以一定要体现出自己的风格以及审美，千人一面就太让人乏味了。 因为，这世界本就是多彩的。 美化自己的博客， 首先要考虑的就是界面整体风格的和谐统一， 一定要追求专属于个人的标 志及特色。 从别的网站上复制几行源代码， 然后添上几滴水珠、 几朵鲜花， 抑或者加上一个钟表。 这些做法并没有什么太大的实际意义。 接下来就应该是头图和背景图的制作过程了，这部分大致分四步： 构思：首先要明确的是，想要做出一幅什么风格的头图及与之对应的背景图。在脑海中 勾勒出一个大致的轮廓，然后进行下一步的工作。 四川信息职业技术学院毕业设计说明书 第页14 搜集素材：当明确设计的大致方向，利用网上的壁纸站、百度搜索等寻找所需要的各种 元素。 制作：创建新图层，调整颜色，然后把需要的各种元素经过绘制、抠图、滤镜、描边、 调整、缩放等步骤后添加到图中去，最后，经过调整及修饰，最后完成制作。 应用：挑选与设计的头图和背景图所搭配的界面模版，然后开始应用。 个人博客设计的要求： 第一、导航清晰，布局合理，层次分明，页面的链接层次不要太深，尽量让浏览者用最短的 时间找到自己感兴趣的内容； 第二、风格统一：保持统一的风格，有助于加深浏览者对博客系统的印象。要实现风格的统 一，不一定要把每个栏目做得一模一样，举个例子来说，可以尝试让导航条样式统一，各个栏目 采用不同的色彩搭配，在保持风格统一的同时为网站增加一些变化； 第三、色彩和谐、重点突出：在界面设计中，根据和谐、均衡和重点突出的原则，将不同的 色彩进行组合、搭配来构成美观的页面； 第四、界面清爽：要吸引访问者长时间的停留在你的博客中，千万不能让浏览者第一眼就感 觉压抑。大量的文字内容要使用舒服的背景色，前景文字和背景之间要对比鲜明，这样访问者浏 览时眼睛才不致疲劳。适当的留白可以让界面更清爽； 第五、动态效果不宜太多：适当的动态效果可以起到画龙点睛的作用，过多的动态效果会让 人眼花缭乱而抓不住主题。 3.4数据库设计 1、 本网站的数据库名为 blog。 共 6 张表， 各表的名字分别为： bo_admin、 bo_chat、 bo_class、 bo_list、bo_pic、bo_pic_class。 2、各表介绍 （1）管理员信息表 管理员基本表主要是管理员的一些基本信息，如管理员帐号和密码,管理员通过其中信息进 入后台进行管理，区别与普通用户。表名为 bo_admin。表结果如表 3-1 所示： 表 3-1 管理员信息表 四川信息职业技术学院毕业设计说明书 第页15 （2）留言管理表 留言管理表主要是管理浏览者在浏览某些内容后的留言，对留言查看、删除 等管理。表名为 bo_chat。表结构如表 3-2 所示： 表 3-2 留言管理表 （3）文章类别管理表 文章类别管理表是可以进行文章类别的添加， 删除的信息表， 管理员能够通过它在后台添加 自己想要的文章类型。表名为 bo_class。表结构如表 3-3 所示： 表 3-3 文章类别管理表 （4）文章管理表 文章管理表主要是记录，显示所添加的文章的题目、内容、时间等，在后台运行时实现对文 章的添加、删除、修改等功能。表名为 bo_list。表结构如表 3-4 所示： 表 3-4 文章管理表 （5）图片管理表 图片管理主要是对整个博客中的图片进行添加、删除等。表名为 bo_pic。表结构如表 3-5 四川信息职业技术学院毕业设计说明书 第页16 所示： 表 3-5 图片管理表 （6）图片类别管理表 图片类别管理表主要是对整个博客中图片类别的添加、 删除， 管理员可以根据自己的需要添 加不同类型的图片，表名为 bo_pic_class。表结构如表 3-7 所示： 表 3-6 图片类别管理表 以上这些表就是整个博客系统的数据库中的所有表， 通过数据库连接代码连接到后台， 然后 管理员再进入后台管理处就可以实现对整个博客系统的管理。 四川信息职业技术学院毕业设计说明书 第页17 第 4 章 博客系统的实现 4.1博客前台页面设计实现 4.1.1首页面 1、首页面的设计 前台所有的页面的设计都是分模块来设计的，除了相册页面分为 2 部分 top（头部）和 body （主体）外，其他页面分为 top(头部)，bottom(底部)，body(主体)，期中在 body 中由包括了 其他内容。这样在做网站的时候只需要变动这些模块就行了，而 top 和 bottom 部分直接调用就 也可以了。如在首页代码中就包含了下面的其他部分： 首页面里，分为三大块，用一个大行三列固定好整个框架，顶部单独为一块，右边用来显示 最新的评论，留言。中间用来显示文章的类型，以及最新添加进去的文章，最新添加的图片等。 这时里面所有的信息都从数据库里面读取。所用到的关键代码如下： get_result(“select * from bo_class“); foreach($arr as $value)? “ get_result(“select * from bo_list limit 0,5“); 四川信息职业技术学院毕业设计说明书 第页18 foreach($arr as $value)? “ spanclass=“style35“阅读全文 get_row(“bo_class“,array(“id“=$valueli_class); echo $temp_rowco_content; ? 评论（get_nums(“bo_chat“,array(ch_article_id=$valueid); ?） 浏览（ ? 2、首页面完成效果 首页面一般会显示出博客中的相关信息，里面主要包括导航、最新添加的文章、最新添加的 图片、最近的评论等等内容。博客首页效果图如图 4-1、图 4-2、图 4-3 所示： 四川信息职业技术学院毕业设计说明书 第页19 图 4-1 博客首页图 图 4-2 博客首页图 四川信息职业技术学院毕业设计说明书 第页20 图 4-3 博客首页图 4.1.2博文界面完成效果 该页面主要是显示出博客中的所有文章， 在该页面的右边是所有文章的分类， 和浏览者的最 新评论，浏览者可以选择自己喜欢的类型，可以查看其他人留下的评论和自己留下的评论，页面 显示效果如图 4-4、图 4-5 所示： 四川信息职业技术学院毕业设计说明书 第页21 图 4-4 博文界面图 图 4-5 博文界面图 四川信息职业技术学院毕业设计说明书 第页22 4.1.3相册界面完成效果 该页面主要是显示出博客中所有添加的图片， 在博客的头部下面是对图片的分类， 浏览者可 以选择喜欢的图片类型进行浏览，页面显示效果如图 4-6、图 4-7 所示： 图 4-6 相册界面图 四川信息职业技术学院毕业设计说明书 第页23 图 4-7 相册界面图 4.1.4留言界面完成效果 任何博客或者网站中都有一个浏览者能够发表自己观点的地方，本博客也不例外，留言能 够反馈很多的有用的信息， 不仅能够帮助博客管理人员更好的了解该博客系统的不足之处， 而且 有些信息还有很好的参考性、学习性，也可对其他浏览者产生帮助。页面显示效果如图 4-8、 图 4-9 所示： 四川信息职业技术学院毕业设计说明书 第页24 图 4-8 留言板界面图 图 4-9 留言板界面图 四川信息职业技术学院毕业设计说明书 第页25 4.2博客系统后台设计实现 4.2.1后台登陆页面 1、 此页面在设计时主要是有一个表格用模块来控制排版， 这里最重要的是安全问题的考虑。 这个表格要向数据库输入数据所以要放在表单里面。后台连接数据库代码如下：登陆页面如图 4-10 所示： 图 4-10 登陆界面图 点击登陆按钮时触发，在 mysql 数据库里面的管理员信息表中的 admin_name 和 admin_pwd 与当前所输入信息进行比较，存在并且正确则登陆，否则错误提示。 只要代码如下： alert(登陆成功！); “; $result=mysql_query($sql); echo “; echo “location=main.php ; “; echo “; else/登录失败。 echo “ alert(用户名或密码输入错误!); “; echo “parent.window.history.go(-1); ? 在输入的管理员帐号和密码与数据库管理员信息表中和的帐号 密码相同时则登陆成功，如 图 4-11 所示： 图 4-11 登陆成功图 演示没输入管理员帐号或者密码或者管理员帐号、 密码均不输入或者输入与数据库中管理员 四川信息职业技术学院毕业设计说明书 第页27 信息表中的帐号、密码不相符时则登陆出错，如图 4-12 所示： 图 4-12 登陆失败图 4.2.2后台功能管理菜单 1、管理人员 由于本博客系统要求比较简单，所以只设置有一个管理员，没有注册用户，也不分为超级管 理员和普通管理员，系统中的信息均是由一个管理员管理,管理员可以对数据库系统中的所有信 息进行添加、删除、修改,如果没有经过任何登陆进入后台则非法登陆，页面上不显示任何内容, 其页面为 adminacl.php,其判断代码如下： 四川信息职业技术学院毕业设计说明书 第页28 2、管理员表页面完成效果 表 4-1 管理员列表 3、信息管理 后台信息管理主要是对博客中文章、 文章类别和图片、 图片类别以及对浏览者的留言内容进 行添加、删除和修改。这项功能只能管理员进行此操作。通过对这些信息进行相应的操作后在前 台显示出来。 其中包含了 adminarticles.php、 adminpic_classes.php、 adminpictures.php、 adminadd_article.php 等等页面、可以在这些页面进行相关代码编写，所有信息都是通过连接 数据库从数据库里面读出来完成页面如图 4-13、图 4-14、图 4-15 所示： 图 4-13 文章类别管理图 四川信息职业技术学院毕业设计说明书 第页29 图 4-14 文章添加图 图 4-15 图片添加图 四川信息职业技术学院毕业设计说明书 第页30 4.3博客系统的测试 4.3.1博客系统的具体测试 1、登录 对本博客而言， 主要是管理员可以登陆后台。 所以在登陆时对账号， 密码的正确性要求很高。 我们在测试时一般是看是否可以不登陆面直接进入后台。在登陆时账号或密码不小心输错后， 可 以试多少次的限制。对大小写是否敏感。这些都是我们需要注意的地主。 2、session web 应用系统是否有超时的限制，也就是说，浏览者在一定时间内没有点击任何页面，是否 需要重新登陆才能正常使用。 3、博客功能测试 这里主要是看信息是否能正确的添加，删除，或修改。浏览者是否能够成功的添加留言， 管 理员能否在数据库中进行相关的操作，以及在添加、删除、修改相关信息后能否在前台页面正确 的显示出来。 四川信息职业技术学院毕业设计说明书 第页31 总结与展望 在做该博客系统的过程中遇到了很多的困难， 因为有老师同学的帮助， 加上自己不断的努力， 现在终于是完成了，心里感觉很舒服。很有成功感。 刚开始做的时候找了很多相关的资料，不管是需求分析时，还是编