基于HTML5的网络课堂前端开.docx

基于HTML5的网络课堂前端开.docx

《基于HTML5的网络课堂前端开.docx》由会员分享，可在线阅读，更多相关《基于HTML5的网络课堂前端开.docx（57页珍藏版）》请在冰豆网上搜索。

基于HTML5的网络课堂前端开

LUOYANGNORMALUNIVERSITY

2016届本科毕业设计

基于HTML5的网络课堂前端开发

院（系）名称

信息技术学院

专业名称

软件工程

学生姓名

孔会娟

学号

121164004

指导教师

王听忠

完成时间

2016年5月

摘要

随着互联网技术的不断发展，人类社会对互联网应用的需求越来越多，互联网可应用的语言框架也有越来越多，互联网技术也根据人们的社会需求，变的越来越人性化。

HTML5是顺应时代发展以满足现代人网络需求而生的新兴技术。

HTML5技术是在HTML和CSS样式基础上推陈出新，所搭配的CSS3也更符合现代人类的审美要求，简化了程序实现的步骤，加之配合使用javaScript，能够使整个页面完美的呈现在人们的视野里。

与此同时，HTML5的兼容性、实用性、互通性、通用访问性能够提高页面访问速度。

此外，在多元化社会中跨平台也显得十分重要，HTML5能够实现跨平台，并支持更多浏览器，因此它的应用更加广泛，实用性更强。

本人基于所学知识，及php相关的后台管理内容，设计与开发了基于HTML5的网络课堂前端，可实现了用户登录、开设课堂、查看及选择课程，课程评价及回复等功能。

关键词：

html5；CSS；javaScript；课堂；php；mysql

Abstract

WiththecontinuousdevelopmentofInternettechnology,humansocietyneedsmoreandmoreapplicationoftheInternet,thelanguageframeworkofInternetcanbeusedisalsobecomemore,theInternettechnologyalsoaccordingtothesocialneedsofthepeople,becomemoreandmorehumane.HTML5isanewtechnologytoadapttothedevelopmentofthetimesandtomeetthemodernneedsofnetwork.HTML5isinnovationinHTMLandCSSstyle,thecollocationofCSS3moreinlinewiththeaestheticrequirementsofmodernhumans,tosimplifytherealizationofprogramprocedures,coupledwiththeuseofJavaScript,canmakethepagepresentperfectlyinpeople’sview.Atthesametime,thecompatibility,practicality,interoperability,universalofHTML5havewaytoimprovethepageaccessspeed.Inaddition,crossplatformisalsoveryimportantinadiversifiedsociety,HTML5isabletocrossplatform,andsupportmorebrowsers,soitismorewidelyusedandmorepractical.

Ibasedontheknowledge,andPHPrelatedbackgroundcontentmanagement.Designedanddevelopedafront-endofnetwork-classbasedonHTML5,whichcanrealizetheloginofuser,classrooms’open,viewandselectcourses,curriculumevaluationandreplyfunctionandsoon.

Keywords:

HTML5;CSS;javaScript;class;PHP;MySQL

目录

第1章绪论1

1.2网络课堂开发的目的和意义1

1.3可行性分析1

第2章网络课堂前端需求分析3

2.1用户功能需求分析3

2.2前端的性能要求3

2.3业务流程分析3

第3章网络课堂前端的总体设计5

3.1网络课堂前端的功能模块分析5

3.1.2找回密码并登录5

3.1.3相关信息的添加和删除5

3.1.4信息的浏览和查询5

3.1.5数据管理5

3.2网络课堂前端的总体设计6

第4章网络课堂前端的详细设计7

4.1开发工具简介7

4.2开发环境概述7

4.2.1HTML5简介7

4.2.2CSS3简介8

4.2.3JavaScript的简介9

4.2.4php的简介9

4.3数据库设计10

4.4用户前端设计11

4.4.1登录、注册界面11

4.4.2网络课堂前端设计的主界面20

第5章网络课堂前端的测试和调试41

5.1白盒测试及测试实例41

5.2黑盒测试42

第6章工作总结和展望43

6.1工作总结43

6.2工作展望43

参考文献44

致谢45

第1章绪论

1.1系统开发背景

随着科学技术的越来越发达，互联网也慢慢的渗透到人们生活的方方面面，无论一个什么样的产品或者公司都需要有自己的特色设计来宣传或者介绍自己。

网站的设计和一个很好的使用性能可以很好的提高自己产品或公司的点击访问量，从而达到宣传的效果。

让自己的网站既符合现在人的审美视觉，也能提供给用户很好的体验，那么网站的前端设计就显得特别重要。

在各种应用不断的趋于更加网络化的时代，为将东西做的更好更美观，一种新的技术标准也随之产生，那就是HTML5。

HTML5不仅用来表示web内容，更是将Web带入一个成熟的应用平台，视频、音频、动画、图像以及同电脑的交互都被标准化。

也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端，并可以在移动终端、PC或者其他有网络的地方轻松使用。

关于网站的使用相信大家多多少少都有自己的体验，它已经渗透到人们的生活中，不论是移动客户端还是PC都随处可见它的身影。

网络课堂也顺应时代发展潮流，运用网络来提供随时随地都可以学习的方便性，高效快捷又能提升自己。

1.2网络课堂开发的目的和意义

在当前的互联网时代中，网络技术、多媒体技术、互联网技术都得到了飞速发展，带给我们的是更快的网络传输速度、更好的多媒体播放效果、更智能化的IT管理系统。

互联网思维的出现改变了传统企业的工作模式，推动线下的业务逐渐向线上转移。

在教育机构中也发生着这样的变化，将传统的线下课堂式教育逐步向网络课堂教学进行转移，改变教育模式为线上、线下结合的方式，这样不仅可以降低企业的人力成本、教室租赁成本，还能拓展企业的业务和新学员的来源渠道，提升企业的业务水平，提高企业的经营效益。

当前互联网技术中最炙手可热的前端开发技术就是HTML5，通过HTML5与javaScript相结合使用将底层的大多数逻辑处理转移到客户端，服务器端口只提供少量逻辑处理和数据接口。

网络课堂这个网站使用javaScript、html、css实现前端的展示和逻辑调用，开发架构MVC与HTML5的配合使用，进一步实现了模块化的功能开发，提升了开发效率的同时也提高了网站的工作效率。

该网络课堂重点在于前端，网页的设计和管理都比较合理和易于后期的优化维护。

它提供了用户登录注册功能，注册成功可以观看视频，对老师讲课内容进行评论，对老师提出问题，以及收藏、转发老师课程。

作为讲课老师，可以增加自己的课堂，对课程进行一定的描述，并可以修改相应内容，同时可以为学生解答问题，批改学生试卷，采纳学生意见等。

此网站个性安全，管理得当。

1.3可行性分析

该设计采用sublimeText软件作为开发工具。

此软件使用时可以选择语言类型，有记忆功能，若是使用过的变量、对象、或者属性、方法还在此软件内打开时，当再次使用相同的变量、对象、或者属性、方法时，此工具使用它的记忆功能将之前用过的变量、对象、或者属性、方法、事件以联想的方式显示出来，方便直接使用。

利用该软件既可以做网页，也可以写php脚本语言操作后台，在windows系统上方便易操作。

该网页属于小型的个人设计，无需投入开发经费，使用一些公用软件开发，前期的UI由专业人员设计，后期有本人借鉴他人的图片和框架，经处理后使用。

第2章网络课堂前端需求分析

2.1用户功能需求分析

设计数据库系统时，首先充分了解用户各个方面的需求，包括现有的以及将来可能增加的，通过查询资料及在网上实施其他相关功能，该网页设计了以下角色及其功能：

用户：

如果是一个未注册的账户，必须先注册，注册成功后登录。

登录后可以查看不同老师的相关课程，可以对老师进行提问，对课程进行评价、转发分享，也可以给老师点赞，收藏老师的课程。

老师：

如果是一个未曾在此网站开过课的老师，首先注册相关信息，然后添加个人课程，并且可以对自己的课程有相应的描述，修改描述内容。

对学生提问给予相应的解答，对学生提出的建议可以选择性的采纳，对学生提交的试卷进行批改。

对课程订单以及学生对课程的转发、收藏、评论进行查看以及设置为已查看或者全部删除。

2.2前端的性能要求

1.实用性

该网页实用性强，只要注册了的账号，就可以管理本人的东西，更像属于本人的一个平台

2.安全性

该网页安全性高，账号由自己管理，如果他人不知道你的密码将无法对本人的相关信息及功能进行操作。

3.便捷性

该网页界面友好,操作方便，能够达到所见即所得的效果,方便用户的使用

2.3业务流程分析

依据系统的需求分析，得到系统的流程图如图2-1所示：

图2-1系统流程图

第3章网络课堂前端的总体设计

该前端总体设计需完成的主要功能是结构设计和后台的搭建。

结构设计决定了这个网页是不是符合现在人的要求及审美，使用的方便性。

网页的性能、服务器端都得到优化，后期维护、组件的易用性、分层语义模块和浏览器分级支持等。

3.1网络课堂前端的功能模块分析

该网络课堂主要分为注册、登录、密码丢失及忘记找回、课程信息的浏览和查询、教师课程的管理页等五个功能模块。

3.1.1注册界面

选择国籍，输入手机号码，输入验证码，同意此网站协议方可注册，下一步设置密码并确认，且严格按照密码格式填写，即可注册成功。

3.1.2找回密码并登录

用户需要填写自己的账户名称进行身份验证，然后设置新密码并确认，即可找回完成。

3.1.3相关信息的添加和删除

教师：

1.实现对自己课程信息的添加和删除。

2.重置课程的相关介绍，选择相关课程是否上架。

3.若是课程较多可以通过搜索相关课程的名字来对该课程进行操作。

3.1.4信息的浏览和查询

学生：

1.浏览课程信息，查看老师开设了哪些课程；

2.相关课程的评价及学生对老师的提问；

3.查看关注老师课程的人数。

老师：

1.查看课程的学生人数；

2.查看课程被转载、分享、收藏的量及提问和评论；

3.查看试卷信息；

4.可以查看课程订单；

3.1.5数据管理

进行数据的保存，数据的修改和数据的添加及删除。

3.2网络课堂前端的总体设计

该设计设置了学生、老师两个角色。

学生和老师登录都需要注册登录，之后以应有的操作相应的功能模块。

前端设计的基本模块：

第4章网络课堂前端的详细设计

4.1开发工具简介

SublimeText工具软件是一个代码编辑器（收费软件，但是可以无限期试用），是由程序员JonSkinner开发的一款具有丰富扩展功能的软件。

SublimeText是一个支持多种编程语言的语法环境，拥有优秀的代码自动联想功能，还拥有代码片段的记忆功能，就是如果写过此类代码，而且此代码仍在该软件上打开着，那么在我们重新写相关的东西时，它就可以通过联想功能将写过的代码显示出来，以防我们拼写错误。

SublimeText也支持vim模式，它能使用Vim模式下的多数命令。

Sublime还有良好的扩展功能和完全开放的用户自定义配置功能，同时还拥有返回原来状态等编辑状态恢复功能。

如果安装的插件比较完善的话，它还能支持强大的多行选择和多行编辑功能。

Sublime不仅支持html此种语言，还支持php等多种常用语言，是一款很好用的软件。

Wampsever是WindowsApacheMysqlPHP的集成安装环境，即在window下的Apache、php、mysql的服务器软件。

Wampsever是一款由法国人开发的ApacheWeb服务器、PHP解释器以及MySQL数据库的整合软件。

免去了开发人员将时间花费在繁琐的配置环境的过程，从而腾出更多精力去做开发。

在windows下将Apache+PHP+Mysql集成环境，拥有简单的图形和菜单安装和配置环境，能很好的应用本地服务器，免去了开发时需要先买个服务器的麻烦。

而且，此款软件是免费使用的。

通过php来操作数据库，然后在数据库和前端之间搭建一座桥梁，完整的将两者结合。

之后在通过ajax来访问本地服务器，从后台中选择要调用的数据。

使用数据窗口可以很容易的对数据库中数据进行操作，无需编写复杂的SQL语句，当使用数据窗口时，只需要让数据窗口知道做什么而不需要对数据库进行直接操作，大大降低了用户的使用难度，这也是数据窗口的特点和优点。

4.2开发环境概述

4.2.1HTML5简介

HTML5是在HTML的基础上，通过对标签语义的不断改善发展而来，它使其更直观，在理解上给人清楚明了的感觉。

HTML5由于是最近才发展起来的一种开发工具，所以它现在仍处于发展阶段，但是，它的发展前景确实可观的，它以取代1999年所订定的HTML4.01和XHTML1.0标准为目标，给做开发的人员带来更多方便，也让开发变得相对简单一些。

期待在互联网应用迅速发展的今天，网络使用标准进一步达到符合当代的网络需求。

广义上的HTML5是指HTML、CSS、javaScript三者在内的一种组合技术，能够减少浏览器对于需要插件的丰富性网络应用服务RIA，并且提供更多有效增强网络应用的标准集。

前面也提到了，HTML5有对标签语义做改善，所以，也可以说HTML5增添了许多新的语法特征，就比如