基于HTML5的网络课堂前端开Word文档格式.docx

基于HTML5的网络课堂前端开Word文档格式.docx

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

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增添了许多新的语法特征，就比如<

video>

<

audio>

和<

cavas>

等元素，就是为了更容易的在网页中添加和处理多媒体和图片内容而添加的；

还有就是对模块划分时，之前是需要再用同样的标签，然后通过设置标签属性来实现框架的结构，HTML5就不用这么麻烦，因为它自身的很多标签就带有相应的默认属性来实现相应功能，就比如<

section>

article>

header>

nav>

等这些新元素,不仅丰富了文档的数据内容，更直观的表达了此标签实现的是什么功能，该标签应该放在什么位置，起到了一目了然的作用。

有了这些好用的新元素的加入，自然就有些旧元素会被人们丢弃在角落里，久而久之也就被淘汰了，就像<

a>

cite>

menu>

等元素，虽然它们还没完全被淘汰，但是它们都有被重新定义或重新被标准化，即使这样，他们的使用频率依然降低了。

同时由于APIS和DOM的好用性，它们已经成为HTML5中的重要部分。

由于之前HTML在浏览器和客户端程序处理语法错误方面做的不太好，所以，HTML5通过定义处理非法文档的具体细节，很好的解决了这一问题，使得所有浏览器和客户端程序能够一致的处理语法错误。

HTML5提供了新的元素和属性，反应现代网站的典型用法。

新标签的出现和标准化，更有利于搜索引擎的搜索整理，小屏设备和视障人士的使用。

同时为其他浏览器要素通过一个标准接口提供了新的功能。

当然，新的时代到来，旧的东西就要被取消，那么一些过时的HTML标记也将被取消，就像那些纯粹为了显示效果而存在的标记。

HTML5兼容老版本的html，但是也有新的开始行，就比如添加了webform2.0的内容。

除了上面介绍的那么多，HTML5应用程序接口方面也有新的发展（API）：

（1）实时绘图。

有关动态产出与渲染图形、图表、图像和动画的CanvasAPI；

（2）HTML5音频与视频定时媒体的播放，无需插件即可实现；

（3）通讯网络：

构建实时和跨源通信的两大基础：

跨文档通信与XMLHTTPREQUESTlevel2；

（4）GeolocationAPI：

用户可共享地理位置，并在web应用的协助下享用位置感知服务；

（5）websqlDatabase，一个本地的sql数据库；

（6）websocket，一个基于浏览器的Socket，支持实时性的数据传输。

4.2.2CSS3简介

CSS即层叠样式。

在网页制作的过程中，我们之所以可以很精准的控制页面布局、字体、颜色、背景、和其他效果的实现，都是因为我们采用的是CSS技术，此技术要求我们只需对相应的代码做一些简单的改变，就能使一页面的内容发生很大变化。

CSS3技术是CSS的升级版本，朝着更具模块化的方向发展。

以前的模块都比较庞大和复杂，CSS3的出现更加简便且实现的功能更完美。

先出现的模块包括：

盒子模式、列表模式、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

之前需要CSS和大量javaScript才能实现的效果，现在仅仅用CSS3区区几行的样式便可实现，简单很多，自然效率也提高不少。

但是，它也有一些不尽如人意的地方。

可能由于它的发展太快，而其它技术跟不上它的步伐，所以在浏览器兼容这一块它出现繁琐的处理兼容的代码。

CSS3带来的变化如下：

布局变化，更直观，更具有代表意义。

特性：

丰富了对链接下划线的样式，以往的下划线都是直线，现在新增有波浪线、点线、虚线等，更可以对下划线的颜色和位置进行任意改变。

在文字下加强调的特点这一功能也有添加进来。

边框：

不再是只有只有一个属性来控制，添加了更具有针对性的属性

背景：

multiplebackground的出现使得可以出现多重背景图像。

用户界面：

resize可以由用户自己调整div的大小，有水平也有垂直或者两者同时调整，如果再加上max-width或者min-width来防止布局被破坏。

选择器：

CSS3新增了更多的CSS选择器，可以实现更简单且更强大的功能，比如mediaqueries，multi-columnlayout等。

4.2.3JavaScript的简介

javaScript是一种直译式的脚本语言，是一种弱类型、动态类型、基于原型的语言，广泛用于客户端。

HTML之所以结合javaScript语言实现前端的设计与开发，主要是因为javaScript向HTML页面添加交互行为，可以直接嵌入HTML页面，当然也可以写成单独的js文件，还可以实现跨平台。

以下即是javaScript脚本语言的一些特点。

1.javaScript是一种解释型的脚本语言，它是在程序的运行过程中逐行进行解释；

2.javaScript是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有的对象；

3.javaScript采用的是弱变量的类型，对数据类型没有做出特别严格的要求。

它是以java基本语句和控制为基础的脚本语言，在设计上简单紧凑；

4.javaScript是一种采用事件驱动的脚本语言，不需要经过web服务器就可以直接对用户的输入做出判断并响应；

5.跨平台。

javaScript脚本语言不依赖操作系统，仅需要浏览器的支持，因此，它可以用到任何浏览器支持的机器上。

随着浏览器的强壮，大多数程序员虽然更喜欢运行于服务器端的脚本以保证安全，但是，javaScript却仍以跨平台、容易学习等优势被喜爱。

4.2.4php的简介

Php是一种服务器脚本语言，它简单易懂，使用也很容易。

编辑PHP时可以直接使用编辑HTML的常规方法，用很少的编程知识建立一个真正交互的web站点，然后被当作一般的HTML网页文件来解析处理。

PHP是开放源码项目，没有什么商业支持，并且由此而带来的执行速度缓慢。

但是PHP有很多自己的框架一直以来被广泛利用，多半都是基于mvc架构模式的。

以下是国内的一部分框架：

ThinkPHP框架有着卓越的性能，是具有丰富的功能的轻量级PHP开发框架，原创特性、并且倡导大道至简，用最少的代码完成更多的功能是它本身具有的特色，它的宗旨是让web应用开发更简单、更快速；

Canphp框架是中国开源的php框架之一，主要是以追求简单、减少php初学者的学习成本，追求高效率为设计理念，而且，模版类不提供其他标签，直接应用php的源代码；

KYPHP框架是中国开源的另一种框架，严格遵守OOP和MVC的理念，具有控件化、可扩展性强等特点，除此之外，php还有很多框架供我们使用。

总之，PHP现在应用广泛，跨平台性强，开发快捷，效率高，面对对象，并且易于上手，专业专注等诸多优点。

4.3数据库设计

由于此设计主要针对前端来做的，所以数据库这一块设计的比较简单，实现了数据的基本查询、插入、和修改。

数据库的基本设计（由phpmyadmin绘制）：

实现数据的插入操作：

实现数据库的简单操作

4.4用户前端设计

4.4.1登录、注册界面

1.

网络课堂的前端注册界面

图4-1创建账号主界面

该页面php代码（实现数据库的基本操作）：

<

?

php

header（'

Content-type:

text/html;

charset=utf-8'

）;

//连接数据库

$conn=mysql_connect（'

localhost'

'

root'

'

//如果连接失败就停止

if（!

$conn）{

die（'

连接数据库失败'

}

//选择数据库

mysql_select_db（'

student'

//执行sql语句设置编码

mysql_query（'

setnamesutf8'

//在连接和传输数据时使用的编码

/*。

。

自此可以使用mysql_query函数执行sql来操作数据库。

*/

$pn=$_GET['

phonenumber'

];

$sql="

SELECTCOUNT（*）FROMstudentWHEREphonenumber='

{$pn}'

"

;

$res=mysql_query（$sql）;

$row=mysql_fetch_array（$res）;

//根据从结果集取得的行生成的数组，如果没有更多行则返货false

if（（int）$row[0]>

0）{

echo'

{err:

0,msg:

"

此用户已寻在"

}'

exit（）;

/*else{

1,msg:

此用户请注册"

}*/

>

Ajax操作实现访问服务器部分：

账号填写，及验证是否已经存在

functionxiayibu（）{

if（ip[0].value!

=ip[1].value）{

alert（'

密码不一致'

}

else{

varxhr=newXMLHttpRequest（）;

xhr.open（'

get'

psw.php?

password='

+ip[1].value+'

&

phonenumber='

+