PHP+MySql制作个人博客系统-完整教程

如果有人问“什么是web2.0？”，恐怕没几个人能说得清楚，但是要问什么是博客，哪怕是从不上网的人也是耳熟能详的了。博客正是web2.0概念中重要的组成部分之一（大家熟知的还包括IM即时通和RSS阅读器）。Blog（博客），全名Weblog，后来缩写为Blog。Blogger就是写Blog的人，习惯于在网上写出日记、发布个人照片、展示个性自我的用户群体。对于Blog/Blogger的中文名称，有翻译成“博客”，也有翻译为“网志”，但大多数人都已经认可了“博客”。通过阅读本章，读者可以学到：博客管理系统的开发流程进一步掌握如何做项目需求分析与系统设计实现一个简单的公告栏管理模块掌握不同的图片上传技术掌握一种采用JavaScript+CSS技术来实现的半透明动态下拉菜单博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）811第第章章导读PHP项目开发全程实录·374·8.1开发背景博客管理系统给人们提供抒发个人情感、人与人之间进行良好沟通的平台，博客拥有真实的内容，可以通过博客记录下工作、学习、生活和娱乐的点滴，以及发表文章和评论，从而在网上建立一个完全属于自己的个人天地，成为当今网络最为个性化和平民化的个人展示空间。对于网民，只要拥有博客，就可以超越现实生活，拥有不同以往的全新网上生活；对于博客服务商，则必须从功能提供转型到全方位社会服务的提供，建立虚拟社会，并负责维护运行，保证博客日常生活；对于社会而言，有利于构建和谐的互联网空间，维护和谐的社会环境。从这个角度来说，构建新生活方式，将是互联网发展的一个里程碑。8.2需求分析信息时代的今天，博客已经成为一种新的生活方式。在网络中构建一个赋有个性化的个人博客，提供了一种可信任的和实时连通的网络环境，通过网络开放性和交互性的特点，让用户在任何时间、任何地点，通过网络方便地“生活”，不仅是信息传递与获取，还可以进行群体交流和资源共享，展示自我，为个人发展带来新机遇。通过对多个博客网的调查分析，客户要求本博客管理系统具有以下功能：要求系统采用B/S架构，实现人机交互。要求系统界面个性化，色彩搭配和谐，很强的视觉冲击力，操作简便。要求突出主题，显示最新文章和公告。要求游客可以浏览文章、浏览图片、发表评论。要求具有强大的搜索查询功能，实现精确查询和模糊查询。完善的文章管理功能，包括文章的发表、删除，及对文章的评论与回复。支持图片上传功能，可以上传各种类型的图片。支持好友功能。系统运行稳定，安全可靠。8.3系统设计8.3.1系统目标该系统主要实现如下目标：系统采用B/S架构，实现人机交互。第8章博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）·375·系统界面设计以浅色为主，美观友好，操作简便。突出重点内容，显示最新文章。非登录用户可以浏览文章、浏览图片、发表评论。全面的搜索查询功能，包括精确查询和模糊查询。完善的文章管理功能，包括文章的发表、删除，及对文章的评论与回复。支持图片上传功能。支持好友功能。支持公告栏功能。系统运行稳定，安全可靠。8.3.2系统功能结构博客管理系统的功能结构如图8.1所示。文章管理图片管理评论管理用户管理公告管理普通用户超级用户博客管理系统浏览文章发表评论查询文章上传文章添加好友浏览图片上传图片删除好友回复评论游客图8.1博客管理系统功能结构图8.3.3系统功能预览为了让读者对本系统有个初步的了解和认识，下面给出本系统的几个页面运行效果图，如果想查看完整的效果图，请参见光盘源程序。博客管理系统的首页如图8.2所示，该页面包含了系统大部分的功能链接，包括用户注册、用户登录、文章浏览等。用户注册页面如图8.3所示，该页面显示了用户注册时需要填写的资料、注意事项等。浏览文章页面如图8.4所示，该页面用于显示文章及相关的评论，也可以发表评论。发表文章页面如图8.5所示，该页面用于登录用户发表文章，包括文章标题、文字编辑区和文章内容。PHP项目开发全程实录·376·图8.2博客首页（光盘\TM\08\online\index.php）图8.3用户注册页面（光盘\TM\08\online\Register.php）图8.4浏览文章页面（光盘\TM\08\online\article.php）图8.5发表文章页面（光盘\TM\08\online\file.php）图片上传页面用于上传图片，如图8.6所示，通过该页面用户可以将图片或照片添加到博客中。添加好友页面如图8.7所示，该页面用于输入用户好友的详细信息，包括姓名、性别、生日等。图8.6图片上传页面（光盘\TM\08\online\add_pic.php）图8.7添加好友页面（光盘\TM\08\online\friendd.php）8.3.4系统流程图博客管理系统的流程图如图8.8所示。第8章博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）·377·游客匿名访问查看文章发表评论浏览图片注册用户登录失败成功普通用户文章管理图片管理好友管理管理员用户管理公告管理图8.8系统流程图8.3.5开发环境在开发博客管理系统平台时，该项目使用的软件开发环境如下：1．服务器端操作系统：WindowsServer2003服务器：Apache2.0。PHP软件：PHP5.0。数据库：MySQL5.0。MySQL图形化管理软件：PhpMyAdmin-2.5.5。开发工具：Dreamweaver8。浏览器：IE6.0。分辨率：最佳效果1024×768像素。2．客户端浏览器：推荐使用IE6.0及以上版本。分辨率：最佳效果1024×768像素。8.3.6文件夹组织结构博客系统的目录比较少，结构比较简单，主要有数据库链接文件目录、css样式目录、js脚本目录及背景图片目录。文件夹组织结构如图8.9所示。PHP项目开发全程实录·378·图8.9博客管理系统文件夹组织结构8.4数据库设计8.4.1数据库分析本系统属于中小型个人网站，毫无争议的，本系统采用的依然是PHP+MySQL这对儿黄金组合，无论是从成本、性能、安全上考虑，还是从易操作性上考虑，MySQL都是最佳选择。8.4.2数据库概念设计通过需求分析和功能上的设计，本系统规划出用户信息实体、上传图片实体、朋友圈实体、文章实体和留言实体。下面给出主要的实体及E-R图。用户信息实体包括注册用户的详细个人信息，如果想在本系统中进行发表文章、上传图片等操作，则必须要先进行注。用户信息实体E-R图如图8.10所示。注册用户用户帐号用户真实姓名登记时间用户id用户性别用户生日…图8.10用户信息实体E-R图上传图片实体主要包括上传图片的名称、上传图片用户和上传图片时间等，实体E-R图如图8.11所示。用户id用户账号用户真实姓名登记时间第8章博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）·379·上传图片图片名称上传用户图片空间图片id上传时间图8.11上传图片实体E-R图8.4.3数据库物理结构设计根据实体E-R图和本系统的实际情况，需要创建6张数据表，如图8.12所示。图8.12数据表列表下面来具体看一下这6张数据表的结构设计。1．tb_user（用户列表）用户列表主要存储用户的个人信息。tb_user表的结构如图8.13所示。图8.13用户列表结构图片idPHP项目开发全程实录·380·2．tb_article（文章列表）文章列表存储的是用户发表过的文章信息。tb_article表的结构如图8.14所示。图8.14文章列表结构3．tb_filecomment（评论列表）评论列表存储的是用户对文章的评论，包括注册用户和游客都可以发表评论。tb_filecomment表的结构如图8.15所示。图8.15评论列表结构4．tb_tpsc（图片列表）图片列表存储的是上传图片的信息，如图片名称、上传用户、上传时间等。tb_tpsc表的结构如图8.16所示。图8.16图片列表结构第8章博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）·381·5．tb_friend（好友列表）好友列表主要记录了姓名、性别、生日等好友的个人信息。tb_friend表的结构如图8.17所示。图8.17好友列表结构6．tb_public（公告列表）公告列表主要记录了网站情况、博客系统的版本情况或是网站活动等等。公告列表的结构如图8.18所示。图8.18公告列表结构8.5首页设计8.5.1首页概述本系统首页页面设计简洁，主要包括以下3部分内容：首部导航栏：包括首页链接、注册和登录模块。PHP项目开发全程实录·382·左侧显示区：包括最新文章、最新图片和系统时间模块。游客主要通过该区域浏览文章、浏览图片及发表评论。主显示区：为系统公告栏，显示系统及网站的最新咨询。下面看一下本案例中提供的首页，该首页在本书光盘中的路径为\TM\08\tmlog\index.php，如图8.19所示。首部导航栏左侧显示区主显示区图8.19博客管理系统首页8.5.2首页技术分析在首页主显示区，是一个公告栏模块。公告栏主要用于公布系统版本的更新或升级情况、网站的最新活动安排等，也可以链接一些用户的精彩文章。本系统的公告栏模块是通过marquee标签来实现的。marquee标签是HTML自带的、也是初学者最常用的公告栏实现方式。使用marquee标签，可以实现文字或图片的滚动效果，增加了实用性的同时，也增加了观赏性。下面就来学习一下这个标签的常用方法及属性。第8章博客管理系统（Apache+PHP+phpMyAdmin+MySQL5.0实现）·383·注意：marquee标签是微软与网景等公司私制的，从来没有被W3C当作正式标签来使用，所以除了IE浏览器外，有些属性是不被其他浏览器所支持的。在使用时一定要留意。1．marquee标签的文字移动属性marquee标签的特点就是可以是文字或图片动起来，在早些时候，这可是一个了不起的技术。随着W3C标准的逐渐完善，marquee标签已经越来越少有用武之地了，但有些技术是永远不变的，比如marquee标签中属性名称和属性值，了解css样式表和JavaScript脚本语言的人会感觉到非常熟悉，因为这些属性名称和属性值都经常被提及和使用。marquee标签用的文字移动属性及属性值，如表8.1所示。表8.1marquee标签常用的文字移动属性及说明属性名称属性值属性说明应用举例marquee无标签基本语法，除了文字外，还可以是图片marquee你好，PHP/marqueedirectionleft,right,up,down文字移动属性，分别表示从右往左、从左往右、从下到上、从上到下marqueedirection=up从下到上移动/marqueebehaviorscroll,slide,alternate文字移动方式，分别表示沿同一方向不停滚动、只滚动一次、在两个边界内来回滚动marqueebehavior=scroll不停的循环播放/marqueeloop数值1,2,3…循环次数，不指定则表示为无限循环marqueeloop=5behavior=slide只循环滚动3次/marqueescrollmount数值10,20,30…滚动速度，数值越大，速度越快marqueescrollmount=25我漂起来了！！/marqueeScrolldelay数值100,200,300…延时，每动一次，停止的时间marqueescrolldelay=500scrollamount=100停停走走/marquee2．marquee标签的外观设置marquee标签不仅可以设置文字移动效果，还能设置标签的外观。外观包括对齐方式、标签底色、面积等。marquee标签常用的外观属性及说明如表8.2所示。表8.