基于WEB的视频点播系统设计-计算机网络课程设计报告V2.5-by大仁哥

计算机网络课程设计报告-0902130620大仁哥中南大学计算机网络课程设计报告题目基于WEB的视频点播系统设计学生姓名大仁哥指导教师刘嫔学院信息科学与工程专业班级计算机科学与技术1306班完成时间2015年12月6日目录TOC\o"1-3"\h\u126221需求分析 4187961.1开发背景 459531.2设计目标 490571.3可行性分析 4137181.4系统运行环境 4217431.5功能分析 5184101.6需求分析小结 5171692概要设计 6163252.1系统总体功能设计 6327352.2系统的E-R图 7232612.3数据库设计 8323043详细设计 1094113.1系统流程图 10141073.2主要功能的实现 1117413.2.1数据库实现 11309003.2.2界面设计实现 1324695主界面 133960用户注册 1613194用户登录 1718495用户信息修改 192769管理员界面 2030391电影分类显示 2114117电影搜索 2319629电影播放功能 2476943.3网站界面优化 25288523.4配置Apache服务器 25282454测试分析（黑盒测试） 27304404.1测试计划和要点 27292394.2主模块测试要点 27135354.3用户注册模块测试要点 27133374.4用户登陆模块测试要点 27291884.5视频查询模块测试要点 2745874.6用户注册模块测试 28163684.7用户登录模块测试 29319034.8视频查询模块测试 30252244.9视频播放测试 31195514.10浏览器兼容性测试 32117354.11局域网连接服务器测试 3359895课程设计总结 34122975.1问题与收获 34104035.2课程设计感悟 34286586参考文献 3623710附录 361需求分析1.1开发背景视频点播VOD(VideoonDemand)出现的最初动力是人们对广播电视的更高需求。在传统的电视中，观众完全是被动的。节目提供者播放什么节目，观众就只能观看什么节目，节目的播放时间也是无法按照观众的意愿改变的。尽管电视台可以提供很多的节目，但要想完整地收看到一个自己满意的节目，对于许多人来讲也是不太容易做到的，因为在快节奏的现代生活中，许多人不可能为了看某一个电视节目而预先安排自己的时间，一些偶尔的突发事件还会打乱我们的预期计划。我设计的这款系统是为了满足人们的需求，随时可以观看自己想看的影视作品，抛却之前的繁琐。1.2设计目标本设计要求完成一个视频点播系统。采用B/S架构。应该具有易用、美观的图形界面。要求:能够实现视频在线播放；能够在本地建立缓存文件；能实现节目管理,用户管理,节目查询等基本功能；界面美观，使用方便。1.3可行性分析 ①技术可行性分析：本系统采用AdobeDreamweaverCS6来进行系统构建，采用B/S架构，利用PHP+MySQL+Apache搭建服务器环境，可以很方便进行动态网站的开发。通过学习HTML5+CSS3进行网页设计和界面优化，然后使用PHP来制作这个网站的动态内容，利用MySQL数据库进行后台数据管理，可以使得用户和系统进行更好的交互，而且易于管理，具有良好的技术可行性。②经济可行性分析：开发此软件是个人独立设计，不需要大量的经费，而且可以节省许多费用，同时也可提高个人的实际动手能力，具有经济可行性。③法律可行性分析：本系统模块等都由自己独立开发，不会出现侵犯版权等问题。网站出于科研学习目的，运营合法，不存在不良资源，因此具有法律可行性。④市场可行性分析：本网站全面免费，后期管理和维护方便，可以推广使用，具有市场可行性。1.4系统运行环境 系统开发环境：PHP+MySQL+DreamweaverCS6 系统开发语言：HTML5+CSS3+PHP 数据库：MySQL5.5.20 Web服务器：Apache功能分析作为一个在线影视播放系统，它展示给浏览者的是各种视频信息，同时，系统需要能够实现对这些信息的有效管理。对于浏览者和会员的功能而言叫做前台实现，对系统管理者身份的功能而言叫做后台实现，下面给出系统的前台和后台功能说明。前台实现提供如下主要功能。①影视展示功能：在前台首页显示最新加入的影片信息，推荐的影片信息，热门影片信息，提供按各种不同的类别对电影信息进行展示。②电影查询功能：在任意搜索框浏览者输入电影名称关键字，可以查询到与之相关的电影信息，查询结果分页显示。③电影在线观看：使用网页播放器播放用户选择的影片。后台实现，管理员实现对各种信息的管理，主要功能如下。①电影信息管理：管理员可以添加，修改，删除电影信息。②电影分类信息管理：管理员可以添加，修改，删除各个电影类目。③会员信息管理：管理员可以添加，修改，删除会员帐号信息。1.6需求分析小结 通过需求分析报告，可以看出这个系统是完全可行的，也点明了开发这系统所需要的工具和技术。最重要的是本系统可以提供的各种功能，方便了许多影视爱好者，明确了开发目标，有着一定的开发意义。2概要设计2.1系统总体功能设计按系统的功能需求分析可得，将系统分成两个大模块：用户功能模块和管理员功能模块。用户功能模块包括：用户注册，修改资料，浏览视频，搜索视频，观看视频和视频评论；管理员功能模块包括：视频管理，视频分类管理，会员信息管理和评论管理。 根据系统功能模块设计，系统整个功能结构图如下：图2.1系统功能结构图用户功能模块主要是描述了作为一个普通用户能够在该在线视频点播系统中能够做的一些操作：注册，搜索，观看等。管理员功能模块主要是对用户，视频的基本信息进行添加，删除和修改。此外还能添加，修改视频的分类。对于一些不符合法律法规的评论则要进行删除，保持网站的绿色合法。2.2系统的E-R图 用户是在线视频点播系统的使用者，是在线视频点播系统的重要组成部分因此需要创建一个用户实体，用于存储用户的详细信息，如下图所示：图2.2用户信息图在线视频点播系统的主干是视频，是该系统密不可分的部分，因此创建一个视频信息实体，用于保存节目的详细信息：图2.3视频信息图在线视频点播系统的流程是用户登录网站若用户名不存在，则需先注册用户信息，注册完用户信息后，用户输入自己的账号及密码登录系统，在用户登录成功后系统根据登录的帐号信息与数据库表中的数据进行对比判断是普通用户是否存在，如果存在，用户可以在线浏览网站提供的信息以及视频内容，可以根据自己的喜好搜索视频，用户在点击视频后，系统会显示视频的详细信息，用户可以点击收看该视频。此外，用户可以在线修改自己的账号信息。如果管理员登录，管理员需要对网站的节目信息进行管理，及时修改和删除已经过时的视频内容，以及发布新的视频供用户观看，系统会将最新发布的视频信息添加到数据库视频信息表中。如下图所示：图2.4系统E-R图2.3数据库设计数据库设计（几个主要的表单）：用户信息表（Users）字段名称数据类型说明uid自动编号ID标识符，自动增加UserName文本用户名password文本密码regtime日期/时间注册时间sex文本性别Type数字用户类型（0为管理员）Tele文本电话Email文本E-mail视频分类表（VideoType）字段名称数据类型说明vtid自动编号ID标识符，自动增加Class文本电影类别名称LISTIMG文本列表图片地址电影信息表（videos）字段名称数据类型说明fid自动编号ID标识符，自动增加Path文本路径FilmName文本影片名称Director文本导演Player文本主演Class文本类型filmcover文本电影封面filmpic文本电影剧照film-gut文本视频简介Join-time日期/时间加入日期表2.1数据库表单设计

3详细设计3.1系统流程图系统功能实现部分主要是对整个系统的实现进行描述。其中包括系统运行环境，系统后台，前台的功能实现等。3.2主要功能的实现3.2.1数据库实现使用NavicatforMySQL对MySQL数据库进行实现。具体步骤为：建立本地连接新建数据库数据库名为wlks,字符集选择utf-8,排序规则为utf8_general_ci。在wlks数据库中新建3个表。建好后的3个表如下：在表中插入几条测试用数据3.2.2界面设计实现主界面用户主界面，用户通过该界面，登录网站，实现影片浏览、播放功能。图3.2.1主界面设计图3.2.2主界面效果主页的设计难点在于滚动展示的电影横幅怎样显示。经过长时间的探索，最终使用JavaScript实现了每3秒切换一个图片，图片附带链接，用户点击之后可以直接跳转到播放界面。主要代码如下：<scripttype="text/javascript">$(function(){ $(".flashBanner").each(function(){ vartimer; $(".flashBanner.maskimg").click(function(){ varindex=$(".flashBanner.maskimg").index($(this)); changeImg(index); }).eq(0).click(); $(this).find(".mask").animate({ "bottom":"0" },700); $(".flashBanner").hover(function(){ clearInterval(timer); },function(){ timer=setInterval(function(){ varshow=$(".flashBanner.maskimg.show").index(); if(show>=$(".flashBanner.maskimg").length-1) show=0; else show++; changeImg(show); },3000); }); functionchangeImg(index) { $(".flashBanner.maskimg").removeClass("show").eq(index).addClass("show"); $(".flashBanner.bigImg").parents("a").attr("href",$(".flashBanner.maskimg").eq(index).attr("link")); $(".flashBanner.bigImg").hide().attr("src",$(".flashBanner.maskimg").eq(index).attr("uri")).fadeIn("slow"); } timer=setInterval(function(){ varshow=$(".flashBanner.maskimg.show").index(); if(show>=$(".flashBanner.maskimg").length-1) show=0; else show++; changeImg(show); },3000); });});</script>显示效果如下：3.2.3横幅切换显示效果用户注册用户先注册，然后就可以用注册的账号和密码进行登录。注册的时候，系统会自动检测该用户名是否已经被注册过了，当用户名已存在会提示你更换一个新的用户名；用户所输入的注册信息必须符合一定的规则，如违反这些规则会提示用户重新输入正确的注册信息。3.2.4用户注册界面注册界面主要通过HTML的表单实现，对每个表单输入框的输入内容用PHP进行检查。电子邮箱信息通过正则表达式进行验证。PHP代码如下：//注册信息判断if(!preg_match('/^[\w\x80-\xff]{3,15}$/',$username)){exit('错误：用户名不符合规定。<ahref="javascript:history.back(-1);">返回</a>');}if(strlen($password)<6){exit('错误：密码长度太短。请设置6位以上密码。<ahref="javascript:history.back(-1);">返回</a>');}//验证邮箱格式正则表达式if(ereg("/^[a-z]([a-z0-9]*[-_\.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;",$email)){exit('错误：电子邮箱格式错误。<ahref="javascript:history.back(-1);">返回</a>');}当注册成功后，在数据库的用户信息表中产生一条新的用户记录。用户登录用户登录界面实现用户登录功能，并应能在一段时间内保留用户ID等登录信息使用户在浏览本网站其他网页的过程中，不致丢失用户信息需要再次重新登录。为实现这个功能，需要利用PHP的Session机制。当每个用户访问web,PHP的session初始化函数都会给当前来访用户分配一个唯一的sessionID。并且在session生命周期结束的时候，将用户在此周期产生的session数据持久到session文件中。用户再次访问的时候，session初始化函数，又会从session文件中读取session数据，开始新的session生命周期。本网站建设中主要运用了以下几个PHP函数。1.session_start()函数session_start会初始化session，也标识着session生命周期的开始。要使用session，必须初始化一个session环境。有点类似于OOP概念中调用构造函数构创建对象实例一样。session初始化操作，声明一个全局数组$_SESSION，映射寄存在内存的session数据。如果session文件已经存在，并且保存有session数据，session_start()则会读取session数据，填入$_SESSION中，开始一个新的session生命周期。2.$_SESSION它是一个全局变量，类型是Array,映射了session生命周期的session数据，寄存在内存中。在session初始化的时候，从session文件中读取数据，填入该变量中。在session生命周期结束时，将$_SESSION数据写回session文件。3.session_register()在session生命周期内，使用全局变量名称将注全局变量注册到当前session中。所谓注册，就是将变量填入$_SESSION中，值为NULL。它不会对session文件进行任何IO操作，只是影响$_SESSION变量。注意，它的正确写法是session_register(‘varname’)，而不是session_register($varname)4.session_unregister()与session_register操作正好相反，即在session生命周期,从当前session注销指定变量。同样只影响$_SESSION，并不进行任何IO操作。5.session_unset()在session生命周期，从当前session中注销全部session数据，让$_SESSION成为一个空数组。它与unset($_SESSION)的区别在于:unset直接删除$_SESSION变量，释放内存资源;另一个区别在于，session_unset()仅在session生命周期能够操作$_SESSION数组，而unset()则在整个页面(page)生命周期都能操作$_SESSION数组。session_unset()同样不进行任何IO操作，只影响$_SESSION数组。6.session_destroy()如果说session_start()初始化一个session的话，而它则注销一个session。意味着session生命周期结束了。在session生命周期结整后，session_register,session_unset,session_register都将不能操作$_SESSION数组，而$_SESSION数组依然可以被unset()等函数操作。这时，session意味着是未定义的，而$_SESSION依然是一个全局变量，他们脱离了关映射关系。通过session_destroy()注销session,除了结束session生命周期外，它还会删除sesion文件，但不会影响当前$_SESSION变量。即它会产生一个IO操作。了解了PHP的session机制和函数变量用法后，再对用户登录功能进行实现。登录主界面如下：3.2.5用户登录界面当用户打开这个界面时，即建立一个session并链接用户数据库。require_once('Connections/webconn.php');if(!isset($_SESSION)){session_start();}当用户输入完毕点击“确定”提交输入结果后，PHP对用户输入数据进行检查然后在数据库中查找匹配的结果。若查找成功就显示登录成功并返回主页，若查找失败则提示相应错误信息并返回登录界面。当查找成功后，用户的信息（用户名）要保存在session的全局变量$_SESSION['MM_Username']中，当打开其他网页时，重新运行session_start();即可刷新session并调用已经保存的$_SESSION['MM_Username']变量。登录成功后，主页的用户信息区显示为：代码如下：<articleclass="userSec"> <?php //登录 if(isset($_SESSION['MM_Username'])){ echo"欢迎您，".$_SESSION['MM_Username'];?>   <ahref="login2.php?action=logout">注销</a> <?php }else{//未登录 ?> <ahref="login2.php?action=login">登录</a>  <ahref="reg.html">注册</a> <?php }?></article>用户信息修改为了注册的便捷，用户在注册时需要输入的仅有用户名、密码和邮箱，为了能让用户能完善自己的个人信息，必须要设计一个信息完善和更改的界面。界面设计如下：上方栏位用于用户输入新的信息，下方栏位可以显示用户数据库中保存的用户信息。由于用户输入的信息是动态的，所以网页也是动态的。一旦用户提交成功，下方栏位就会显示修改后的用户信息。修改前：修改后：管理员界面管理员登录界面与用户登录界面相同，管理员填写用户名和密码，点击“登录”，系统验证用户名和密码是否正确，并验证用户类型是否为管理员，正确则显示“系统验证成功”，进入后台管理页面。若用户非管理员或密码不对，系统显示错误。管理员登录对后台进行管理，主要可以对用户进行信息更新和删除。 查看用户信息的主要难点是分页显示。不过Dreamweaver提供了工具条，可以方便地对记录进行分页。电影分类显示为了用户更方便地浏览网站资源，将电影分类显示有助于提高网站的交互性和友好性。为实现分类显示，将电影简单地分为国产电影和外国电影，后期也可添加更多分类。该功能主要通过PHP操纵MySQL实现。主要PHP代码为：if(!isset($_SESSION)){session_start();}mysql_select_db($database_webconn,$webconn);$query_Rsv3='SELECT*FROMvideoswhereCLASS="国产电影"';mysql_query("setnamesutf8");$Rsv3=mysql_query($query_Rsv3,$webconn)ordie(mysql_error());$totalRows_Rsv3=mysql_num_rows($Rsv3); //搜索结果$results=array();for($i=0;$i<$totalRows_Rsv3;$i++){//把结果存进数组array_push($results,mysql_fetch_assoc($Rsv3));}“国产电影”网页中的显示部分代码为：<?phpif(count($results)>0){?><divclass="video_show_window"><?phpforeach($resultsas$index=>$video){?><divclass="video_show"><divclass="vs_img"><ahref="play.php?fid=<?phpecho$fid=$video["fid"];?>"><imgsrc="<?phpecho$_SESSION['filepic']=$video["filmpic"];?>"/></a></div><divclass="vs_link"></div><divclass="vs_text"><divclass="vs_title"><ahref="play.php?fid=<?phpecho$fid=$video["fid"];?>"><?phpecho$_SESSION['filename']=$video['FILMNAME'];?></a></div><divclass="vs_subtitle"><span><?phpecho$video["filmgut"];?></span></div></div></div><?php}?></div><?php}else{?><h3>抱歉，未匹配到结果</h3><?php}?>外国电影原理与国产电影相似。显示效果如下：电影搜索搜索页面与电影分类浏览原理相同，只是要获取搜索表单中的输入查找数据库中的文件名字段是否有匹配。查询结果依然是通过数组存储然后在网页上展示。搜索功能的PHP代码为：<?phpif(!isset($_SESSION)){session_start();}//获取检索关键词if(isset($_GET['searchInput'])){$keyword=$_GET['searchInput'];}else{$keyword="";}if($keyword!=""){//mysql_select_db($database_webconn,$webconn);$query_Rsv1='SELECT*FROMvideoswhereFILMNAMElike"%'.$keyword.'%"';mysql_query("setnamesutf8");$Rsv1=mysql_query($query_Rsv1,$webconn)ordie(mysql_error());$totalRows_Rsv1=mysql_num_rows($Rsv1);$results=array(); //创建关联数组，带有键和值for($i=0;$i<$totalRows_Rsv1;$i++){array_push($results,mysql_fetch_assoc($Rsv1));}//var_dump($results);}else{header("Location:index.php");}?>显示界面的代码和分类显示的代码大致相同，只对提示信息进行修改。搜索效果：电影播放功能使用HTML5的<video>标签可以实现对视频资源的播放。在开发条件允许的情况下，也可自行设计新的播放器。<video>是HTML5的新标签，利用它可以方便地在网页中播放视频，并可通过JS扩展为支持绝大多数主流浏览器的强大播放器。使用<video>标签的方法为：<!--播放器--><articleid="playSec"> <p> </p> <p>视频名称:<?phpecho$filename;?></p> <videosrc="<?phpecho$file;?>"poster="<?phpecho$filepic;?>"controlswidth="720px"height="480px">您的浏览器动力不足，请使用IE9.0以上版本播放</video></article>其中src为视频地址，poster为电影不播放时显示的图片。效果如图：<video>标签使用了流媒体播放技术，页面加载时和播放过程中可以看到播放器下方的缓冲进度条。经查找资料，其本地缓存路径为：当打开新的视频播放网页时，可以看到该路径下的文件被修改，说明网页确实使用了这个文件作为缓存。3.3网站界面优化对网站进行设计和初步实现以后，网站界面往往比较丑陋，无法吸引用户的目光。而且网页中也往往存在着许多不友好的人机界面，所以需要我们在完成网站功能实现以后进行非常多的界面优化工作。如：将导航栏扩展到每个子网页，以实现网页间互访的便捷；增大导航栏链接的面积，使用户更容易点击；增加网站的提示性文字；忽略网页中弹出的非致命性错误；优化CSS显示效果等。3.4配置Apache服务器当网站建设基本完成后，即可将其发布在本机的Apache服务器上。这样在局域网中的其他计算机就可以通过网址访问本机的服务器，浏览这个网站，获取我发布在服务器上的资源。配置过程如下。找到Apache安装目录下的conf目录,在这个目录里,有一个"httpd.conf"文件，即为Apache服务器的配置文件，修改以下配置信息：修改默认的网站根文件夹查找DocumentRoot字段，将其值修改为网站根目录所在的目录。将默认首页设置为index.php找到DirectoryIndex这段.把它改成DirectoryIndexindex.phpindex.Htmlindex.html这样,你的网站目录的默认首页是index.php,如果没有index.php系统会自动寻找index.html做为默认首页。将服务器配置为局域网可以访问连接局域网；打开命令提示符，输入ipconfig，获取本机IP；查找onlineofflinetag字段，将其下方的属性修改为：#onlineofflinetag-don'tremoveOrderDeny,Allow#Denyfromall AllowfromAllowfrom10.10.2.*这样10.10.2.*网段的主机都可以访问本机的服务器，即可实现局域网访问。4测试分析（黑盒测试）功能测试的基本观点是，任何程序都可以看作是将输入定义域取值映射到输出值域的函数。4.1测试计划和要点软件测试的本质是针对要测试的内容确定一组测试用例。在讨论之前，先把要测试各个模块的计划和要点列出：4.2主模块测试要点数据库连接情况：正常情况，数据库文件缺少，外部系统异常。系统设置获取：正常情况，外部系统异常。对用户输入的响应：合法输入，能够正常调用子模块；非法输入，系统能否辨别，并作出响应(提出警告)；子模块的异常状况，系统能否及时做出响应。4.3用户注册模块测试要点模块正常运行流程用户输入数据检查(用户名、用户密码），包括数据合理性检查，以及合法性检查数据库操作数据库连接异常时的响应情况4.4用户登陆模块测试要点数据库连接正常时输入合理合法参数输入参数不合理输入参数不合法数据库连接异常；数据库数据异常(用户名称为空)4.5视频查询模块测试要点数据库连接正常数据库数据正常输入的视频名合理合法输入的视频名不合理输入的视频名不合法数据库数据异常数据库连接异常4.6用户注册模块测试（1）测试用例用户注册模块测试用例如下表所示。字段名称描述标识符C2测试项用户注册模块的功能测试输入标准1.打开注册模块模块，没有任何输入字符，点击相应的项目。2.输入一些正确的用户名、密码、E-mail，点击“确定”。3.输入一些非法的用户名、密码、E-mail，点击“确定”。输出标准1.输入错误后返回注册界面。2.输入正确后显示注册成功并进入登录界面测试结果测试结果如图所示。输入空用户名或非法用户名：电子邮箱格式错误：两次输入密码不一致：4.7用户登录模块测试测试用例用户登录模块测试用例如表4-5所示。表4-5用户登录模块测试用例字段名称描述标识符C3测试项用户登陆模块的功能测试输入标准1.打开主界面模块，没有任何输入字符，点击相应的项目。2.输入一些正确的用户名、密码，点击“登陆”。3.输入一些非法的用户名、密码，点击“登陆”。输出标准模块未做任何操作，单击“退出”命令，能正常退出，无提示信息。用户名或者密码错误时，单击“登陆”显示“用户名或密码错误”。测试结果输入正确用户名和密码：输入错误用户名和密码：用户登录模块测试结果如表4-6所示。表4-6用户登录模块测试结果标识符C3测试结果在未输入正确的用户名和用户密码后单击“登陆”，不能够登陆。在输入正确的用户名和用户密码后单击“登陆”，能够顺利登陆。与预期的偏差无说明的问题主模块通过了功能测试4.8视频查询模块测试（1）测试用例视频查询模块测试用例如表4-7所示。表4-7视频查询模块测试用例字段名称描述标识符C4测试项视频查询模块的功能测试输入标准1.打开视频查询模块，没有任何输入字符，点击相应的项目。2.输入一些正确的视频名、类型，点击“搜索”。3.输入一些非法的视频名、类型，点击“搜索”。输出标准1.模块未做任何操作，单击“退出”命令，能正常退出，无提示信息。测试结果视频查询模块测试，如图。搜索失败：成功搜索：表4-9视频查询模块测试结果标识符C4测试结果正常操作无任何异常处理出现与预期的偏差无说明的问题视频查询模块通过了功能测试4.9视频播放测试测试方法字段名称描述标识符C5测试项视频播放模块的功能测试输入标准1.打开视频播放模块，不点击任何项目。2.点击“播放”按钮，“全屏”按钮，并进行音量调节。3.点击进度条任意位置观看。输出标准按钮反应正常，无提示信息。视频可以跳跃观看，载入缓冲正常。测试结果播放效果：全屏播放：4.10浏览器兼容性测试使用IE浏览器浏览网站，测试页面显示和功能是否正常。使用谷歌浏览器浏览网站，测试页面显示和功能是否正常。使用火狐浏览器浏览网站，测试页面显示和功能是否正常。经测试，本网站兼容市面上大多数浏览器，各种浏览器浏览时页面