web课程设计

Web应用编程课程设计任务书

WEB应用编程课程设计说明书

学院名称：计算机与信息工程学院班级名称：网络工程14级2班

学生姓名：朱赛赛

学号：2014211585

题目：课堂随机点名系统

指导教师

姓名：赵玉艳

起止日期：2016.12.19 – 2017.1.1

目录

一、选题背景 (1)

二、设计理念 (1)

三、过程论述 (1)

3.1 系统流程图设计 (1)

3.2 系统数据库设计 (2)

3.3 数据库部分设计 (3)

3.4 系统界面设计 (3)

3.4.1 系统登陆界面设计 (3)

3.4.2 学生信息管理界面 (4)

3.5 系统功能实现 (6)

3.5.1登录功能实现 (6)

3.5.2点名系统管理界面 (7)

3.5.3导入学生名单 (8)

3.5.4进行全员点名 (10)

3.5.5进行随机点名 (12)

3.5.6随机点名显示界面 (13)

3.5.7教师对学生进行点评模块 (14)

3.5.8点名成绩查询 (16)

四、结果分析 (18)

4.1 登录系统测试： (18)

4.2 点名管理测试 (19)

4.2.1导入学生名单 (19)

4.2.2进行全员点名 (19)

4.2.3进行随机点名 (20)

4.2.4教师点评 (21)

4.2.5点评成绩查询 (21)

五、总结 (22)

六、参考文献 (23)

八、成绩评定 (24)

一、选题背景

众所周知课堂随机点名系统可以方便老师进行课堂出勤的考察，加强学生与学生之间的认识，也有利于教师更好的掌握课堂教学。而考勤则是任何一个学校都认真对待的问题，学生出勤不仅可以反映学生的学习热情，也能反映该学生对该课程的喜爱程度，更能反映任教教师的教学情况。

此次开发了一种基于web的课堂随机点名系统。该系统实现了任课教师的登录，以及登录过后对学生信息的查看、对全部学生进行点名记录缺勤次数或者随机抽取学生进行点名查看是否缺勤。本系统更加的方便实用，也有利于教师课堂点名的效果，比如当此系统用于点名提问时，公平性的问题就能够得到很好的解决。

二、设计理念

Dreamweaver开发工具和WampServer，利用这些软件易于实现和满足需求，再加上之前对二者都比较熟悉，容易上手。Dreamweaver是可以编辑多种形式的编辑器，利用Dreamweaver编写HTML、PHP、CSS、JavaScript和jQuery代码。WampServer采用的是PHP+PHPmyadmin结合的方式，界面比较美观，操作简单，利用WampServer搭建运行环境。

三、过程论述

3.1 系统流程图设计

在该系统中，教师可以通过登录界面进入主界面，在主界面中可以管理各个功能模块，进而通过各个功能模块对后台数据库进行数据操作和管理。系统流程图如图3-1 所示。

图3-1 系统流程图3.2 系统数据库设计

系统数据库设计如图3-2所示。

图3-2 总体数据库流程图

3.3 数据库部分设计

课堂随机点名系统主要功能是方便教师对班级管理，上课前可对班级学生进行点名，并将缺勤学生进行记录。数据库共分为两张表，分别是教师登录表users、学生信息表student。主要功能是对学生表student的操作。

(1)教师表存储任课教师信息，由于任课教师是固定的，所以此表是学校事前写好，此表只有读权限，不可对表进行增、删、改操作。

表3-1 教师表

列名数据类型约束是否允许为空默认值说明username varchar(100)主键NOT NULL无账号password varchar(20)NOT NULL无密码

(2)学生表用来存储学生信息，教师登陆之后可以在此表上进行增、改、查操作来对学生信息进行管理

表3-2 学生表

列名数据类型约束是否允许为空默认值说明

id int(100)主键NOT NULL无学生编号

name varchar(100)NOT NULL无学生姓名situation int(50)NULL0点名情况

score varchar(500)NULL0点评详情3.4 系统界面设计

3.4.1 系统登陆界面设计

该部分功能采用HTML+JS+CSS结合，利用CSS将整体背景色设为淡紫色，再结合HTML知识，利用div标签，设置登录框位置和大小。使用input输入框接受登录用户的username和password。登陆界面如图3-3所示。

图3-3 用户登录界面

部分代码如下：

登陆系统

name="username">

登录

3.4.2 学生信息管理界面

此界面利用div布局，左侧利用jQuery实现列表的级联效果，整个页面实现分页效果。如图3-4所示。