本文研究的是如何制作一个编程类的网站，让用户可以有效的学到编程技术，它可以学习课件，评论课程或课件，发表提问，还可以记笔记，在线编程等功能。它会使用多种Web技术，这将在开发语言与技术简介中详细介绍，网站的系统分析与设计，会在论文中详细介绍，具体的实现会在文章中介绍，最后是全文的总结，和对网站以后的展望，基本本文的研究方式就是如此。

一、开发语言与技术简介

该网站使用到了多种Web技术，前端使用了HTML+CSS+JavaScript+ jQuery + Bootstrap，后端使用了PHP+Laravel，在这些技术的搭配下，开发出一个完善的网站，下面就依次介绍这些技术。

1、HTML

HTML即超文本标记语言，它通过标记符号来定义网页的各个部分，告诉浏览器该如何显示网页，可能很多人不认为这是一门编程语言，但这却是编写网页最重要的基础。目前HTML5已基本普及，各大浏览器厂商在最新的版本中都对HTML5中的新特性给予了支持，开发时只需简单的调下兼容性就可以在各大主流浏览器正常运行。

2、CSS

CSS即层叠样式表，英文名为Cascading Style Sheets，主要是用来定义网页上的样式，正是在CSS的美化下，能让一个网页看上去排版工整，赏心悦目，而且CSS还可以定义动画等。目前最新的CSS版本是CSS3，和HTML5一样，也有很多新特性，比如圆角表格、文字特效、动画属性、0更多的CSS选择器等等。

3、JavaScript

JavaScript是一种动态的脚本语言，运行在浏览器上，需要JavaScript解释器解释后才可运行。目前JavaScript广泛应用于Web应用开发中，用以来制作动态效果，而且也可以分担一些服务端的压力，因为可以在客户端页面中执行一些操作，在不发生网络请求的情况下，可谓是非常快捷便利。而且目前JavaScript的发展势头非常好，是因特网上最流行的脚本语言，用在数以百千万计的网页中，实现多种页面功能。

4、jQuery和ajax

jQuery是一个快而简的JavaScript框架，将许多JavaScript编写起来相对复杂的功能都封装了，使开发者用起来非常方便，大大的简化了JavaScript编程。而且学习起来也比较容易，语法简练，它的设计理念就是如此write less，do more，这在实际编程中就深有体会。并且在jQuery之上还有许多插件可供使用，它们是基于jQuery实现了多种多样的动态效果和功能。做出来的页面更加生动，交互更加人性化。

ajax即异步JavaScript和XML，用以快速建立动态页面。jQuery库中就有一套完整的执行异步请求函数，使我们想异步加载传输数据更加便利，我们可以在页面不刷新的情况下完成各种各样的操作，而这正是我们非常需要的，我们也会大量的使用这种技术。

5、Bootstrap

Bootstrap是一个前端框架，它来自Twitter的两位工程师，基于HTML、CSS、JavaScript，是时下最流行使用最广泛的前端框架。Bootstrap有CSS样式和JavaScript组件两大部分，常用的有栅格系统、表单、表格、模态框、按钮等，这些组件对前端编程有莫大的帮助，能够帮助开发人员快速建立一个美观的页面。

6、PHP和Laravel

PHP是一种开源的脚本语言，也是时下最流行的Web后端编程语言。PHP的代码常嵌入到HTML内运行，使用起来相对简单方便，而且最新版的PHP7执行速度相较于上一代提升了一倍有余，再加上与MySQL的合理搭配，开发网站非常合适。

Laravel是一个PHP框架，它的理念是简洁、优雅，代码可读性高，开发速度快，而且目前Laravel作为国外最流行的PHP框架，社区活跃，文档丰富。其提供了许多好用的功能，比如中间件、Artisan命令行、安全认证、事件系统、Eloquent ORM等，这是一个非常强大的PHP Web框架。

二、整体功能分析

程序功能分析,网站前台功能设计，如下图所示

后台功能设计，如下图所示

程序流程分析

用户登录注册。用户进入首页后，如果没有账号可以点击注册，输入账号信息后，点击注册按钮，然后系统验证正确后会使用该账号登录；如果有账号，可以直接登录，系统验证之后会跳转到首页。如下图所示：

用户学习。当用户登陆后，可以打开课程页面，然后开始学习课件，学习的同时还可以评论，提问和记笔记。如下图所示：

三、前端设计（部分功能展示）

用户注册时服务器端是需要对注册信息做验证的，比如邮箱格式正确与否，是否已经有人已经注册，密码长度是不是足够，两次密码是否相同等。当这些验证通过会跳转到首页，否则页面会刷新，显示错误信息。注册页面主体如下图所示：

用户登录的时候服务器端也是要做验证的，首先是格式的验证，然后是验证码的验证，之后是密码的验证，当这些都通过时会存储session，更新用户表该用户信息，具体就是remember_token和updated_at字段，然后跳转到首页，同时页面的右上角会显示该用户信息。登录页面主体如下图所示：

首页是网站的重要组成部分，这里左侧导航栏会显示当前网站里的所有分类，然后点击文字链接后会显示分类下的所有课程，右侧是根据分类依次排列着的所有课程，每个课程里显示有圆形的logo图和课程简介，点击文字或图片就可以进入课程详情界面。首页如下图所示：

课程页显示的是该课程的信息，包括课程logo、课程详情、学习人数、课程评分、学前须知、课程收获等，然后下部显示的是课程的课件目录、评论、问答和笔记，点击文字即可进入相应的页面。课件目录会在用户登陆后，记录之前该用户的学习情况，然后分别显示继续学习或者加入学习。课程页如下图所示：

课件页显示详细的学习信息，下面可以评论，提问、记笔记等。课件页如下图所示：

除此之外还有用户评论页、个人信息编辑页、问答页、友情链接页等等就不一一展示了。

四、后端设计（部分功能展示）

课程编辑页包含了课程的编辑功能，也可以添加课件、编辑课件、删除课程。课程管理页如下图所示：

课件添加页可以添加课件，有多个输入框和一个编辑器，最后是一个按钮，编辑好就可以发布了。具体如下图所示：

网站配置页包含网站的多项动态设置，可以在这个页面进行编辑和添加配置，比如包含了SEO相关的网页Keywords、Description、Author等。网站配置页具体如图所示：

功能很全面，这里就不一一展示了，感兴趣的可以下载源码自己研究。