《PHP应用开发与实践 教学课件 ppt 作者 马骏 第20章 课程设计——微博》由会员分享，可在线阅读，更多相关《PHP应用开发与实践 教学课件 ppt 作者 马骏 第20章 课程设计——微博（62页珍藏版）》请在金锄头文库上搜索。
1、,本章要求：,第20章 课程设计微博,系统设计思路 数据库设计 用户登录模块设计 微博首页设计 Ajax无刷新技术 主要功能模块的关键代码,主要内容,1. 课程设计目的 2. 功能描述 3. 总体设计 4. 数据库设计 5. 实现过程 6. Ajax无刷新技术专题 7. 课程设计总结,第20章 课程设计微博,20.1 课程设计目的,本章提供了“微博”作为这一学期的课程设计之一，本次课程设计旨在提升学生实时开发能力，加强学生对专业理论知识的理解和实际应用，锻炼学生的创新思维。本次课程设计的主要目的如下： 加深对PHP语言的理解。 掌握PHP开发应用程序的基本流程。 掌握Ajax无刷新技术在实际开
2、发中的应用。 掌握微博开发的基本流程。 培养和锻炼开发程序的逻辑思维。 培养分析问题、解决实际问题的能力,20.2 功能描述,明日微博程序主要包括3个主要模块，其中主要包括：用户登录模块、微博发布主页、以及我的微博页面。 用户登录界面，顾名思义，为用户登录微博提供主要的界面，该页面主要包括登录表单和推荐用户两个模块。 微博发布主页是整个微博系统的核心部分，它包含了所有用户发表的心情以及回复内容、用户个人基本信息、以及常用微博操作超级链接。 我的微博页面主要用于显示我的基本信息、用户个人发表的心情以及其他博友在心情中提到该用户名称的心情以及用户个人的对心情的评论内容。,20.3 总体设计,20.
3、3.1 功能结构 20.3.2 系统预览,微博的主要模块大体可以分为登录模块、微博首页和我的微博主页三大功能模块，其结构如图20-1所示。 图20-1 微博功能结构图,20.3.1 功能结构,20.3.2 系统预览,为了让读者对本系统有个初步的了解和认识，下面给出本系统的几个页面运行效果图。 用户登录页面如图20-2所示，该页面主要显示用户的登录界面以及微博的推荐用户。 图20-2 用户登录模块,微博发布页面如图20-3所示，该页面主要用于发布字数限制在140字的微博内容、查看自己和其他用户发表的微博内容、添加微博回复，转发微博、收藏微博；用户可以在该页面查看自己的个人用户信息，并通过相关超级
4、链接进入不同的操作界面。 图20-3 微博发布页,我的微博页面主要向当前用户展示发表微博的内容、时间等信息，并可以在该页面查看自己关注的博友以及关注自己的用户。其运行页面如图20-4所示。 图20-4 我的微博主页,另外用户还可以通过单击微博主页的其他超级链接进入相应的功能主页，其中提到我的页面如图20-5所示。 图20-5 提到我的运行结果,我的收藏图20-6所示 图20-6 我的收藏,20.4 数据库设计,20.4.1 数据库设计 20.4.2 数据表设计,20.4.1 数据库设计,根据一般微博的结构和功能，设计明日微博系统的数据库，定义该数据库名称为db_microblog，数据库主要包
5、括5个数据表，如图20-7所示 图20-7 明日微博数据库,明日微博的数据库中包括5张数据表，下面来具体了解这5张数据表的结构设计。 1tb_user（用户信息数据表） 用户信息数据表主要用于存储用户的登录账号、密码、昵称等个人信息。该数据表的结构如表20-1所示。 表20-1 tb_user表,20.4.2 数据表设计,2tb_content（发表微博表） 发表微博表主要用于存储用户发表的微博信息。该数据表的结构如表20-2所示。 表20-2 tb_content表,3tb_reply（微博回复表） 微博回复表主要用于存储用户对微博文章的回复。该数据表的结构如表20-3所示。 表20-3 t
6、b_reply表,4tb_friends（关注者信息表） 关注者信息表主要用于存储用户所关注的微博作者。该数据表的结构如表20-4所示。 表20-4 tb_friends表,5tb_collection（收藏微博记录表） 收藏微博记录表主要用于存储用户所收藏的微博信息。该数据表的结构如表20-5所示。 表20-5 tb_collection表,20.5 实现过程,20.5.1 用户登录设计 20.5.2 微博首页设计 20.5.3 发布微博设计 20.5.4 微博内容显示设计 20.5.5 微博评论设计,用户要想登录自己的微博发表微博文章，就必须通过登录验证的方式进入微博发布页。由于微博和一般
7、留言板不同，必须通过个人的有效登录信息进行登录操作，才可以发布微博文章。用户登录模块的运行结果如图20-8所示。 图20-8 用户登录模块的运行结果,20.5.1 用户登录设计,1界面设计 用户登录模块的设计非常简单，只包括两个表单元素和一个用于提交的图像域即可，虽然内容少，但对其与其他内容进行合理的搭配也是非常重要的。用户登录模块中涉及到的HTML表单元素如表20-6所示。 表20-6 用户登录页面涉及到的HTML表单的重要元素,2关键代码 （1）创建index.php文件，来判断用户是否登录，如果用户已经登录，则跳转到发表微博主页面，否则跳转到登录模块的登录界面，其代码如下： “; els
8、e echo “; ? （2）创建登录模块的前台登录表单，用于实现用户的前台登录。其主要代码如下： 用户名称: 密码: ,（3）创建JavaScript脚本文件，并调用自定义onLoad函数对所添加的用户名和密码进行非空的验证，其关键代码如下所示： function onLoadInfo() form1.input1.style.color=“#CCCCCC“; form1.input1.value=“请输入用户名“ function insName() form1.input1.style.color=“#000000“; form1.input1.value=“; function che
9、ckinfo() if(form1.input1.value=“ | form1.input1.value=“请输入用户名“) alert(请输入用户名！); form1.input1.focus(); return false; if(form1.input2.value=“) alert(请输入密码！); form1.input2.focus(); return false; ,（4）单击“登录微博”按钮，将数据提交到用户登录数据处理页中，对提交的数据进行验证，如果正确则提示用户登录成功并跳转到微博的主页，否则返回到用户登录页面。其中用户登录数据处理页中的代码如下： “; echo “登录
10、成功！“; else echo “alert(用户名或密码错误！);“; include_once(“index.php“); ?,微博首页页面设计比较简洁，主要包括以下4部分内容： 微博发布区：发布及时消息和心情等内容。 微博展示区：当前所有用户发表的最新微博内容。 个人信息区：个人的昵称、头像、以及微博粉丝、关注者以及发表微博个数等。 导航区：提供“我的微博”、“提到我的”、“我的收藏”、“我的评论”等链接。 热门文章展示区：滚动展示热门的微博文章。,20.5.2 微博首页设计,微博首页的运行效果如图20-9所示。 图20-9 微博主页页面,1界面设计 微博的首页设计主要使用了文件的包含技
11、术。所谓的使用包含文件结合技术，就是将所有副页面以包含文件方式引用过来，组成一个看起来多功能技术性强的微博首页。从这句话上看，读者应该能看出来，其实微博首页没什么特殊功能和重点知识点，只不过是由一些包含文件(在这里可以说是调用文件)的方式拼凑在一起的。包含文件方式具体详解如下： 在微博首页中通过include_once()函数包含文件。使用include_once函数在包含文件时，如果该文件中的代码已经被包含，则不会被再次包含。include_once函数应用于脚本执行期间同一个文件有可能被包含超过一次的情况下，以确保他只被包含一次，从而避免出现函数从定义、变量重新赋值等问题。 2关键代码 微
12、博首页实现起来十分的简单，总体是采用表格嵌套来实现整个首页的布局，然后在使用包含文件结合技术，把所有需要显示在首页文件引入进来就可以了。其具体的实现步骤如下： （1）加载各种文件，如CSS样式文件、JS脚本文件等。代码如下： ,（2）使用表格嵌套的方法对首页布局，并在相应的位置使用包含文件技术，载入不同的页面，如个人信息展示页、微博文章展示页等。代码如下所示： , /*省略其它页面的超级链接*/ /*省略滚动显示热门文章*/ ,（3）创建“我的微博”、“提到我的”、“我的收藏”、“我的评论”的链接。代码如下所示： “ 我的微博 “提到我的 “我的收藏 “我的评论 ,（4）应用iconv_str
13、len()函数对热门文章进行截取，截取16个字符，并应用“”标签进行滚动显示。代码如下所示： “ target=“_blank“ 16) echo iconv_substr($infocontent,0,16,gb2312).“; else echo $infocontent; ? ,发布微博是微博最基本的功能。用户可以发表少于140个字的内容，微博内容编写完成以后，单击“发布”按钮即可将微博内容存储在数据库中。发布微博的运行结果如图20-10所示。 图20-10发布微博页运行结果,20.5.3 发布微博设计,1界面设计 发布微博界面设计是在mainindex.php页完成的，实现表单设计代码
14、如下： 2关键代码 （1）在编写微博内容时，对所编写的微博内容字数进行了限制，其只允许输入140个字以内的内容，该功能的实现主要是依靠javascript脚本来实现，通过键盘事件来实现文字字数的验证。当用户输入的文字字数超出140字，则提示用户已经超出的限定的字符个数。实现的主要代码如下： function checkcount() charcount=form1.text.value.length; var msgcount=140-charcount; if(msgcount0) msgcount=0-msgcount; count.style.color=“red“; document.
15、getElementById(“annchar“).innerHTML=您已超过; document.getElementById(“count“).innerHTML=msgcount; return false; else count.style.color=“blue“; document.getElementById(“annchar“).innerHTML=您还可以输入：; document.getElementById(“count“).innerHTML=msgcount; ,（2）在index.js文件中首先定义一个createXmlHttpRequestObject()对象，
16、并获取XMLHttpRrequest对象，然后定义xmlHttp用来存储将要使用的XMLHttpRrequest对象。关键代码如下： var xmlHttp=createXmlHttpRequestObject(); /定义XMLHttpRrequest对象 function createXmlHttpRequestObject() /获取XMLHttpRrequest对象 var xmlHttp; /用来存储将要使用的XMLHttpRrequest对象 if(window.ActiveXObject) /如果在internet Explorer下运行 try xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP“); c
