web应用与开发课程设计报告本科论文.doc
HUNAN CITY UNIVERSITY WEB应用与开发 课程设计报告 专 业： 网络工程 学生姓名： 班级学号： 小组成员： 指导老师： 2016年 11月 5日12WEB应用与开发课程设计报告1306101-23一、 设计时间2016年 10月 22日-2016年 11月 5日二、 设计地点湖南城市学院实验楼计算机503机房三、 设计目的开发一个学生信息管理数据库的目的，主要是对查询学生信息过程中的所有信息进行更加科学、规范和有效的综合管理，是为了让同学们能在任何时候都能查阅到有关自己的信息。该学生信息管理系统主要包括学生信息查询、选修课管理、课程管理、帐号信息修改等。本系统还提供学生相关的基本信息统计、汇总、查询，这样便于辅助学校领导的学生管理工作。四、 设计小组成员1306101-08何振雄 1306101-23李吉宇五、 指导老师习胜丰老师六、 设计课题学生信息管理系统七、 学生信息管理系统的需求根据系统的需求，首先将要记录的信息分类，要记录的信息如下：学生信息：包括每个学生的学号、姓名、性别、年龄、籍贯、政治面貌、入学时间、联系电话等学生课程信息：包括学生所学的专业课程和选修课程的课程编号、课程名称、授课老师、课程学分学分等学生选课信息：包括选修课名称、选修课类型、课程编号、任课教师。用户信息：包括包括用户名、对应密码等根据这些需要，本系统需要“学生基本信息”表，“学生课程信息”表，“学生选课信息”表，和“用户信息表”。 如图1所示。用户登录学生信息管理课程信息管理学生成绩管理用户信息管理取 消图1 系统基本逻辑关系八、 模型设计 （1）实体列表表1实体列表实 体描 述学生基本信息学号、姓名、性别、年龄、籍贯、政治面貌、入学时间、联系电话学生课程管理专业课程和选修课程的课程编号、课程名称、授课老师、课程学分学生选课管理选修课名称、选修课类别、课程编号用户信息用户名、密码等（2）系统的E-R模型图学生基本信息学生选课管理学生课程管理政治面貌学号姓名联系电话籍贯性别年龄专业课程用户信息课程名称授课老师学分密码用户名选修课名称选修课类别选修登录选修课程入学时间图2 E-R模型九、 数据库设计应用mysql程序作为数据库。设计了一个表格。图3数据库表格十、 系统流程图在本系统中准备通过如下窗体来实现数据维护的功能：(1) 主窗体：管理着各个子窗体。(2)“查看信息”子窗体：管理学生基本信息。(3)“查看课程”子窗体：管理学生课程基本信息。(4)“网上选修”子窗体：管理学生选修信息(5)“修改密码”子窗体：修改用户密码。(6)“退出”子窗体：退出系统。系统流程图如图3所示：启动界面登录 N允许登录 Y查看信息查看课程网上选修修改密码退出系统图4系统流程图十一、 程序调试情况在数据连接时一定要注意窗体和相应显示控件的绑定关系。在把系统从一台计算机移植到另一台计算机时一定要把数据库TABLE同时移植。与数据库的链接代码如下：/连接驱动字符串String className = "com.mysql.jdbc.Driver"String url = "jdbc:mysql:/localhost:3306/studentManage"Class.forName(className);Connection con = DriverManager.getConnection(url, "root", "");Statement sta = con.createStatement();/登录界面的查询语句String sql = "select * from users where userId='" + user + "' and pwd='"+ pwd + "'"/得到查询结果集ResultSet rs=sta.executeQuery(sql);十二、 重点代码及功能显示1、 运行程序后首先显示就会弹出如图4所示登录框。图5登录界面代码实现：1、 背景设置,样式设置<style>table table-layout: fixed;body background-image: url(././StudentManage/imgs/BG1.jpg);</style>2、用户类型选择<select id="sel" name="sel_Type"style="width: 130px; height: 25px" onchange="SelType()"><option value="STU">学生</option><option value="TEA">教师</option><option value="ADM">管理员</option></select><br> <br><script type="text/javascript">function SelType() var type = document.getElementById("sel").optionsdocument.getElementById("sel").selectedIndex.value;if (type = "TEA")document.getElementsByTagName("font")2.innerHTML = "工号："else if (type = "ADM")document.getElementsByTagName("font")2.innerHTML = "帐号："else if (type = "STU")document.getElementsByTagName("font")2.innerHTML = "学号："</script>2、在登录对话框中输入用户姓名和密码，单击“确认”按钮，就会对用户身份进行认证，若认证通过，那么就会弹出如图5所示的学生信息管理系统窗体。图6学生信息管理系统窗体代码实现：（采用frame设置）<frameset rows="15%,*"><frame src="jsps/upMain.jsp" scrolling="no"></frame><frameset cols="20%,*"><%if ("STU".equals(session.getAttribute("userTYPE") %><frame src="jsps/student.jsp" scrolling="no"></frame><% else if ("TEA".equals(session.getAttribute("userTYPE") %><frame src="jsps/teacher.jsp" scrolling="no"></frame><% else if ("ADM".equals(session.getAttribute("userTYPE") %><frame src="jsps/admin.jsp" scrolling="no"></frame><%><frame src="jsps/inter.jsp" name="disp" scrolling="no"></frame></frameset></frameset>3、在“查看课程”窗体中可以对用户课程信息进行查看，例如添加用户信息和修改密码。如图6图7查看课程窗体代码实现：（学期学年选择框）<table width="300" border="0" cellpadding="0" cellspacing="0"align="center"><tbody><tr><td width="50%" height="30px">学年学期 <selectstyle="width: 165px"><option>2015-2016学年第一学期</option><option>2014-2015学年第二学期</option><option>2014-2015学年第一学期</option><option>2013-2014学年第二学期</option><option>2013-2014学年第一学期</option></select></td></tr></tbody></table>4、在“网上”窗体中可以对学生选修信息进行操作，例如选择课程，提交选修课程记录等。如图7所示.图8网上选修窗体代码：（标题类型）<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#ffffff"><tbody><tr><td align="center" width="5%" rowspan="2">选定</td><td align="center" width="18%" rowspan="2">课程</td><td align="center" width="5%" rowspan="2">学分</td><td align="center" width="15%" rowspan="2">类别</td><td align="center" width="9%" rowspan="2">任课教师</td><td align="center" width="10%" rowspan="2">上课班级<br>名称</td><td align="center" width="5%" rowspan="2">限选</td><td align="center" width="5%" rowspan="2">已选</td><td align="center" width="5%" rowspan="2">可选</td><td align="center" width="15%" rowspan="2">上课时间/上课地点</td></tr></tbody></table>5、在“修改密码”窗体中可以对用户密码进行修改，保证用户信息的安全。如图8，图9所示。图9修改密码窗口代码实现：（js实现对应功能）<script type="text/javascript">/检查输入的密码是否正确function checkOPWD()var psw=document.getElementsByName("oldPWD")0.value;if(psw!=<%=session.getAttribute("userPWD")%>)document.getElementById("errorSpan").innerHTML="输入的密码错误！"return false;elsereturn true;/判断新密码的格式function checkNPWD1()var psw1=document.getElementsByName("newPWD1")0.value;var reg = new RegExp("0-93"); /正则表达式 if(!reg.test(psw1)document.getElementById("errorSpan").innerHTML="新密码长度至少要3位数字!"return false;elsereturn true;/判断两次密码是否一致function checkNPWD2()var psw1=document.getElementsByName("newPWD1")0.value;var psw2=document.getElementsByName("newPWD2")0.value;if(psw1!=psw2)document.getElementById("errorSpan").innerHTML="两次密码输入不同！"return false;elsereturn true;/当所有条件正确时，提交表单function checkForm()if(checkOPWD() && checkNPWD1() && checkNPWD2()return true;elsereturn false;</script> 十三、 遇到的问题及解决办法 遇到的问题及解决方法：（1）主窗体和子窗体的设置。解决方法：由于窗体要用VB的知识去弄，而我们却没有关于这方面的知识，因此我们找了很多关于VB知识的书，查阅了关于如何建窗体的资料。（2）功能显示（窗体的创建）的控件无法实现操作。解决方法：通过与伙伴间的交流和对窗体的调试，补充相应知识，阅读数据库原理与应用案例教程的第6章，终于解决了问题。十四、 课程设计心得 通过这次的课程设计，我体会了编程工作者的辛苦，因为每一个细微的细节都必须十分的注意。在同学的帮助下，我认识到自己的不足和劣势，编制一个实用简单的程序也是一件很不容易的事情。不过当看到程序没错误能执行出来时，心中的喜悦难以用言语来表达。在同学的帮助和自己的努力之下，简单的实现了数据的添加，对数据的删除和查询等操作，因此需要今后更加深入的学习和努力。参考文献1夏士兵，钱江.构建基于COM+的分布式Web应用J.微型机与应用，2001（6）.8-9.2美Richard Anderson, Chris Blexrud著.ASP3高级编程M.刘福太，张立民，金慧琴，梁发麦等译.北京：机械工业出版社，2000.408-458.
