基于HTML的网络课堂前端

LUOYANG NORMAL UNIVERSITY2016 届 本 科 毕 业 设 计基于 HTML5 的网络课堂前端开发院 （ 系 ） 名 称 信息技术学院专 业 名 称 软件工程学 生 姓 名 孔会娟学 号 121164004指 导 教 师 王 听 忠完 成 时 间 2016 年 5 月基于 HTML5 的网络课堂前端开发摘 要随着互联网技术的不断发展，人类社会对互联网应用的需求越来越多，互联网可应用的语言框架也有越来越多，互联网技术也根据人们的社会需求，变的越来越人性化。HTML5 是顺应时代发展以满足现代人网络需求而生的新兴技术。HTML5 技术是在 HTML 和 CSS 样式基础上推陈出新，所搭配的 CSS3 也更符合现代人类的审美要求，简化了程序实现的步骤，加之配合使用 javaScript，能够使整个页面完美的呈现在人们的视野里。与此同时，HTML5 的兼容性、实用性、互通性、通用访问性能够提高页面访问速度。此外，在多元化社会中跨平台也显得十分重要，HTML5 能够实现跨平台，并支持更多浏览器，因此它的应用更加广泛，实用性更强。本人基于所学知识，及 php 相关的后台管理内容，设计与开发了基于 HTML5 的网络课堂前端，可实现了用户登录、开设课堂、查看及选择课程，课程评价及回复等功能。关键词：html5；CSS；javaScript；课堂；php；mysql洛阳师范学院 2016 届本科生毕业设计AbstractWith the continuous development of Internet technology, human society needs more and more application of the Internet,the language framework of Internet can be used is also become more,the Internet technology also according to the social needs of the people,become more and more humane.HTML5 is a new technology to adapt to the development of the times and to meet the modern needs of network.HTML5 is innovation in HTML and CSS style, the collocation of CSS3 more in line with the aesthetic requirements of modern humans,to simplify the realization of program procedures ,coupled with the use of JavaScript, can make the page present perfectly in peoples view.At the same time, the compatibility, practicality, interoperability, universal of HTML5 have way to improve the page access speed.In addition,cross platform is also very important in a diversified society,HTML5 is able to cross platform,and support more browsers,so it is more widely used and more practical.I based on the knowledge,and PHP related background content management.Designed and developed a front-end of network-class based on HTML5 ,which can realize the login of user ,classrooms open, view and select courses ,curriculum evaluation and reply function and so on.Keywords:HTML5;CSS;javaScript;class;PHP;MySQL洛阳师范学院 2016 届本科生毕业设计目 录第 1 章 绪论 .11.2 网络课堂开发的目的和意义 .11.3 可行性分析 .1第 2 章 网络课堂前端需求分析 .32.1 用户功能需求分析 .32.2 前端的性能要求 .32.3 业务流程分析 .3第 3 章 网络课堂前端的总体设计 .53.1 网络课堂前端的功能模块分析 .53.1.2 找回密码并登录 .53.1.3 相关信息的添加和删除 .53.1.4 信息的浏览和查询 .53.1.5 数据管理 .53.2 网络课堂前端的总体设计 .6第 4 章 网络课堂前端的详细设计 .74.1 开发工具简介 .74.2 开发环境概述 .74.2.1 HTML5 简介 .74.2.2 CSS3 简介 .84.2.3 JavaScript 的简介 .94.2.4 php 的简介 .94.3 数据库设计 .104.4 用户前端设计 .114.4.1 登录、注册界面 .114.4.2 网络课堂前端设计的主界面 .20第 5 章 网络课堂前端的测试和调试 .415.1 白盒测试及测试实例 .415.2 黑盒测试 .42第 6 章 工作总结和展望 .436.1 工作总结 .436.2 工作展望 .43参考文献 .44致 谢 .45洛阳师范学院 2016 届本科生毕业设计0第 1 章 绪论1.1 系统开发背景随着科学技术的越来越发达，互联网也慢慢的渗透到人们生活的方方面面，无论一个什么样的产品或者公司都需要有自己的特色设计来宣传或者介绍自己。网站的设计和一个很好的使用性能可以很好的提高自己产品或公司的点击访问量，从而达到宣传的效果。让自己的网站既符合现在人的审美视觉，也能提供给用户很好的体验，那么网站的前端设计就显得特别重要。在各种应用不断的趋于更加网络化的时代，为将东西做的更好更美观，一种新的技术标准也随之产生，那就是 HTML5。HTML5 不仅用来表示 web内容，更是将 Web 带入一个成熟的应用平台，视频、音频、动画、图像以及同电脑的交互都被标准化。也就是说 HTML5 是通过开放的技术和标准来实现一个无插件模式的客户端，并可以在移动终端、PC 或者其他有网络的地方轻松使用。关于网站的使用相信大家多多少少都有自己的体验，它已经渗透到人们的生活中，不论是移动客户端还是 PC 都随处可见它的身影。网络课堂也顺应时代发展潮流，运用网络来提供随时随地都可以学习的方便性，高效快捷又能提升自己。1.2 网络课堂开发的目的和意义在当前的互联网时代中，网络技术、多媒体技术、互联网技术都得到了飞速发展，带给我们的是更快的网络传输速度、更好的多媒体播放效果、更智能化的 IT 管理系统。互联网思维的出现改变了传统企业的工作模式，推动线下的业务逐渐向线上转移。在教育机构中也发生着这样的变化，将传统的线下课堂式教育逐步向网络课堂教学进行转移，改变教育模式为线上、线下结合的方式，这样不仅可以降低企业的人力成本、教室租赁成本，还能拓展企业的业务和新学员的来源渠道，提升企业的业务水平，提高企业的经营效益。当前互联网技术中最炙手可热的前端开发技术就是 HTML5，通过 HTML5 与javaScript 相结合使用将底层的大多数逻辑处理转移到客户端，服务器端口只提供少量逻辑处理和数据接口。网络课堂这个网站使用 javaScript、html、css 实现前端的展示和逻辑调用，开发架构 MVC 与 HTML5 的配合使用，进一步实现了模块化的功能开发，提升了开发效率的同时也提高了网站的工作效率。该网络课堂重点在于前端，网页的设计和管理都比较合理和易于后期的优化维护。它提供了用户登录注册功能，注册成功可以观看视频，对老师讲课内容进行评论，对老师提出问题，以及收藏、转发老师课程。作为讲课老师，可以增加自己的课堂，对课程进行一定的描述，并可以修改相应内容，同时可以为学生解答问题，批改学生试卷，采纳学生意见等。此网站个性安全，管理得当。基于 HTML5 的网络课堂前端设计11.3 可行性分析该设计采用 sublime Text 软件作为开发工具。此软件使用时可以选择语言类型，有记忆功能，若是使用过的变量、对象、或者属性、方法还在此软件内打开时，当