web课程设计 课堂随机点名系统.doc

Web应用编程课程设计任务书 学 院计算机与信息工程学院专 业网络工程课程名称Web应用编程课程设计题 目课堂随机点名系统完成期限自2016年12月19日至2017年1月1日共2周内容及任务一、项目的目的采用HTML、PHP、MySQL数据库技术设计一个课堂随机点名系统，将课程学生名单存放在数据库中，通过PHP与数据库的链接实现教师对课程学生名单的查看、出勤的记录及出勤情况的点评。二、项目任务的主要内容和要求该课题主要研究和设计一个基于Web的课堂随机点名系统。主要功能要求如下：1.支持教师导入学习该课程的学生名单；2.支持随机点名和全员点名，支持考勤结果导出；3.支持教师对点名情况评分；三、项目设计（研究）思路首先要先将需要的数据库建立好，即建立点名系统数据库web，考虑到WampServer集成了PHP和PHPmyadmin环境，利用PHPmyadmin数据库，在此数据库的基础上建立user表和student表。数据库建立完成后进行HTML图形界面程序的设计、PHP与MySQL数据库的链接和PHP实现各种功能需求。四、具体成果形式和要求设计完成一个课堂随机点名系统，要求能通过对MySQL数据库的连接来实现对数据的操作，并且具备图形化界面。进度安排起止日期工作内容2016.12.1912.21根据要求，整理相关资料，确定思路。2016.12.2212.28设计数据库结构，编写系统HTML界面。2016.12.292017.1.1调试程序，完善功能，完成课程设计报告。主要参考资料1.任小琦.网页编程M.北京：清华大学出版社.2011.2.孔祥盛.PHP编程基础与实例教程 M.北京：人民邮电出版社.2016.3.张逸.软件设计精要与模式M.北京：电子工业出版社.2007.4.王德永.数据库原理与应用M.北京：人民邮电出版社.2011.指导教师意见（签字）： 年 月 日系（教研室）主任意见（签字）： 年 月 日WEB应用编程课程设计说明书学院名称： 计算机与信息工程学院 班级名称： 网络工程14级2班 学生姓名： 朱赛赛 学 号： 2014211585 题 目： 课堂随机点名系统 指导教师姓 名： 赵玉艳 起止日期： 2016.12.19 2017.1.1 目录一、选题背景1二、设计理念1三、过程论述13.1 系统流程图设计13.2 系统数据库设计23.3 数据库部分设计33.4 系统界面设计33.4.1 系统登陆界面设计33.4.2 学生信息管理界面43.5 系统功能实现63.5.1登录功能实现63.5.2点名系统管理界面73.5.3导入学生名单83.5.4进行全员点名103.5.5进行随机点名123.5.6随机点名显示界面133.5.7教师对学生进行点评模块143.5.8点名成绩查询16四、结果分析184.1 登录系统测试：184.2 点名管理测试194.2.1导入学生名单194.2.2进行全员点名194.2.3进行随机点名204.2.4教师点评214.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 教师表列名数据类型约束是否允许为空默认值说明usernamevarchar(100)主键NOT NULL无账号passwordvarchar(20)NOT NULL无密码(2)学生表用来存储学生信息，教师登陆之后可以在此表上进行增、改、查操作来对学生信息进行管理表3-2 学生表列名数据类型约束是否允许为空默认值说明idint(100)主键NOT NULL无学生编号namevarchar(100)NOT NULL无学生姓名situationint(50)NULL0点名情况scorevarchar(500)NULL0点评详情3.4 系统界面设计3.4.1 系统登陆界面设计该部分功能采用HTML+JS+CSS结合，利用CSS将整体背景色设为淡紫色，再结合HTML知识，利用div标签，设置登录框位置和大小。使用input输入框接受登录用户的username和password。登陆界面如图3-3所示。图3-3 用户登录界面部分代码如下： Login 登陆系统 登录 3.4.2 学生信息管理界面此界面利用div布局，左侧利用jQuery实现列表的级联效果，整个页面实现分页效果。如图3-4所示。图3-4 学生信息管理界面部分代码如下： .$(document).ready(function() $(.inactive).click(function()if($(this).siblings(ul).css(display)=none)$(this).parent(li).siblings(li).removeClass(inactives);$(this).addClass(inactives);$(this).siblings(ul).slideDown(100).children(li);if($(this).parents(li).siblings(li).children(ul).css(display)=block)$(this).parents(li).siblings(li).children(ul).parent(li).children(a).removeClass(inactives);$(this).parents(li).siblings(li).children(ul).slideUp(100);else/控制自身变成+号$(this).removeClass(inactives);/控制自身菜单下子菜单隐藏$(this).siblings(ul).slideUp(100);/控制自身子菜单变成+号$(this).siblings(ul).children(li).children(ul).parent(li).children(a).addClass(inactives);/控制自身菜单下子菜单隐藏$(this).siblings(ul).children(li).children(ul).slideUp(100);/控制同级菜单只保持一个是展开的（-号显示）$(this).siblings(ul).children(li).children(a).removeClass(inactives););3.5 系统功能实现3.5.1登录功能实现该部分通过PHP与MySQL数据库的建立链接，访问数据库任课教师users表，通过PHP获取输入的教职工账号和密码与users表中的数据进行比对，如果教职工账号与密码同时吻合则登录成功。跳转到点名系统管理界面。如图3-5所示：图3-5 任课教师登录模块任课教师登录模块PHP部分代码：0)echo 恭喜登陆成功！.;$_SESSIONuser_name = $username;header(location: ./html/main.html);else/echo 三秒后跳转回原界面;echo alert(用户名或密码不正确！); ;header(refresh:0;url=./html/Login.html);mysql_close($serverLink);?3.5.2点名系统管理界面此部分分成：导入学生名单、随机点名、全员点名、点评、点评成绩查询。通过PHP与MySQL数据库的链接实现学生名单的导入，进行全员点名、随机点名，教师可以根据点名情况对学生进行评价，教师还可以将评价信息导出。如图3-6所示。图3-6 点名系统管理界面点名系统管理界面部分代码：导入学生名单点名全员点名 随机点名 点评教师点评 点评成绩查询 3.5.3导入学生名单在该功能下，实现了教师对学生信息的管理，通过该模块，教师可导入班级学生名单。如图3-7所示：图3-7导入名单导入名单部分HTML代码：.导入名单部分PHP代码：?php$serverLink=mysql_connect(localhost,root,) or die(连接服务器失败！程序中断执行！);mysql_query(set names gbk);$link=mysql_select_db(web) or die(选择失败);/$stunum=$_POSTstunum;$name=$_POSTname;if(empty($name)$close=mysql_close($serverLink);$message=用户名不能为空！导入失败，请重新导入！;echo alert($message);parent.location.href=insert.html; $sql=insert into student values (null,$name,0,null);$resultSet=mysql_query($sql);$close=mysql_close($serverLink);if($resultSet)$message=导入成功！;echo alert($message);parent.location.href=./html/main.html;?3.5.4进行全员点名该功能实现将班级全部学生名单导出到界面，教师可根据点名情况，对每位学生应道进行记录，系统默认0为应道，1为未到。通过form表格将点名情况传递给handle_all.php进行处理如图3-8所示：图3-8进行全员点名全员点名PHP部分代码：?php/*连接数据库*/$serverLink = mysql_connect(localhost,root,);mysql_query(set names gbk);$dbLink =mysql_select_db(web);$selectSQL = select * from student;$resultSet = mysql_query($selectSQL);$i=1;echo ;echo 编号姓名应道编号姓名应道编号姓名应道;while($student = mysql_fetch_array($resultSet)if($i % 3 = 1)echo ;$i+;echo ;echo $studentid.;echo $studentname;echo ;echo ;echo (;echo ;echo );echo  if($i%3=1)echo ;mysql_close($serverLink);?全员点名数据处理部分代码：?php$selectSQL = select situation,id from student;$serverLink = mysql_connect(localhost,root,);mysql_query(set names gbk);$dbLink =mysql_select_db(web);$result = mysql_query($selectSQL);$resultCount = mysql_query($selectSQL);$myrows = mysql_num_rows($resultCount); /统计topic表中行数$situation=$_POSTi;while($user=mysql_fetch_array($result)$number1=$usersituation;$id=$userid;for($i=0;$icount($number1);$i+)$number$i=$number1$i+$situation$i;for($i=0;$icount($number);$i+)$updateSQL=update student set situation=$number$i where id=$id$i;mysql_query($updateSQL);$close=mysql_close($serverLink);$message=提交成功;echo alert($message);parent.location.href=./html/main.html;mysql_query($registerSQL);?3.5.5进行随机点名该功能实现了对student表中学生的随机提取功能，教师想随机抽取几位学生进行点名，只需在界面输入框输入相应数字即可进行随机点名。如图3-9所示。图3-9进行随机点名随机点名界面代码：input-webkit-border-radius: 15px;随机点名3.5.6随机点名显示界面该界面用于显示随机点名提交的抽取的数字进行从MySQL数据库中随机抽取学生进行点名，避免了点名的偶然性。如图3-10所示。图3-10 随机点名显示界面随机点名显示界面部分代码：?phpsession_start();$p=0;$m=0;$serverLink = mysql_connect(localhost,root,);mysql_query(set names gbk);$dbLink =mysql_select_db(web);$i = $_POSTnum;$selectSQL = select * from student ORDER BY rand() LIMIT $i;$resultSet = mysql_query($selectSQL);echo ;echo 编号姓名应道编号姓名应道编号姓名应道;while($q = mysql_fetch_array($resultSet)if($p%3=0)echo ;$p+;echo ;$number1=$qsituation; $_SESSIONnumber1 = $number1;$id=$qid; $_SESSIONid = $id;$m+;echo $qid.$qname;echo ;echo (;echo ;echo );if($p%3=0)echo ;mysql_close($serverLink);?随机点名数据处理部分代码：?phpsession_start();$serverLink=mysql_connect(localhost,root,) or die(连接服务器失败！程序中断执行！);mysql_query(set names gbk);$link=mysql_select_db(web) or die(选择失败);$number2 = $_POSTnumber2;$number1=$_SESSIONnumber1;$id=$_SESSIONid;for($i=0;$icount($number1);$i+)$number$i=$number1$i+$number2$i;for($i=0;$icount($number);$i+)$updateSQL=update student set situation=$number$i where id=$id$i;mysql_query($updateSQL);$message=提交成功;echo alert($message);parent.location.href=./html/main.html;?3.5.7教师对学生进行点评模块教师利用该模块实现对学生期末的评价，评价内容可以是数字评价也可以是文字评价，通过提交按钮，将评价内容写入到MySQL数据库。如图3-11所示。图3-11 教师全员点名界面教师评价界面部分源代码：?php/*连接数据库*/$serverLink = mysql_connect(localhost,root,);mysql_query(set names gbk);$dbLink =mysql_select_db(web);$selectSQL = select * from student;$resultSet = mysql_query($selectSQL);$i=1;echo ;echo 编号姓名评价编号姓名评价编号姓名评价;while($student = mysql_fetch_array($resultSet)if($i % 3 = 1)echo ;$i+;echo ;echo $studentid.;echo $studentname;echo ;echo ;echo (;echo ;echo );echo  if($i%3=1)echo ;mysql_close($serverLink);?教师评价数据处理部分源代码：?php$serverLink=mysql_connect(localhost,root,) or die(连接服务器失败！程序中断执行！);mysql_query(set names gbk);$link=mysql_select_db(web) or die(选择失败);$score = $_POSTscore;$selectSQL=select id from student;$result=mysql_query($selectSQL);while($user=mysql_fetch_array($result)$id=$userid;for($i=0;$icount($score);$i+)$updateSQL=update student set score=$score$i where id=$id$i;mysql_query($updateSQL);$close=mysql_close($serverLink); $message=提交成功;echo alert($message);parent.location.href=./html/main.html;?3.5.8点名成绩查询该模块实现了将教师对每个学生的评价总体导出的功能。如图3-12所示。图3-12 点名详情界面点名成绩查询部分源代码：?php/*连接数据库*/$serverLink = mysql_connect(localhost,root,);mysql_query(set names gbk);$dbLink =mysql_select_db(web);$selectSQL = select * from student;$resultSet = mysql_query($selectSQL);$i=1;echo ;echo 编号姓名旷课数评价编号姓名旷课数评价编号姓名旷课数评价;while($student = mysql_fetch_array($resultSet)if($i % 3 = 1)echo ;$i+;echo ;echo $studentid.;echo $studentname.;echo $studentsituation.;echo $studentscore.;if($i%3=1)echo ;mysql_close($serverLink);?四、结果分析4.1 登录系统测试：进入系统的第一步，通过验证输入的用户名与密码是否与MySQL数据库中存储的数据是否相符来决定能否登入。在测试过程中，登录界面能够针对各种情况作出正确的反应，基本满足了系统登录的要求。如图4-1、 4-2、 4-3、 4-4所示。 图4-1 输入登录信息 图4-2 验证用户名及密码成功图4-3 输入登录信息 图4-4 验证用户名及密码失败4.2 点名管理测试4.2.1导入学生名单该部分主要通过PHP与数据库的链接，访问数据库中student表的数据，通过PHP对MySQL数据库的处理将插入的学生名单插入到student表中。如图4-5所示。图4-5 导入学生名单 4.2.2进行全员点名该部分主要通过