如何实现一个简单教务系统的课程表查询

时间:2024-04-09 11:41:50

一、设计思路

1.     首先做好课程表静态页面(可用Sublime,Dreawvear等开发工具编写,本人用Sublime编写,代码稍后附上)

2.     数据库设计(可用access数据库、sql数据库或者mysql数据库,根据自己习惯选用数据库,本人选用access数据库。注意:连接不同数据库需要不同数据库驱动,自行百度下载)

如何实现一个简单教务系统的课程表查询

                                     

课程表效果图

二、课程表实现功能

1.实现select下拉列表的二级联动;

(何为select二级联动:当我在第一个下拉列表选中一个固定的选项之后,第二个下拉列表自动填充相对应选项)

2.实现不同院/系部、不同专业、不同学期的课程表查询

3.读取数据库信息时,使得数据库为null的信息显示在页面上为空字符;

三、实现过程

一.设计界面(附上静态页面代码,页面可根据自己喜好设计)

如何实现一个简单教务系统的课程表查询

如何实现一个简单教务系统的课程表查询

二.实现select下拉列表的二级联动

如何实现一个简单教务系统的课程表查询

附完整代码


步骤解析:

1.      将两个select分别命名为select1select2,并且分别定义其ids1s2values1s2,同时定义一个函数,代码如下:

<selectname="select1" id="s1" onChange="move()" value=" s1">

<!-- 根据id获取valueonchange()触发函数move()修改二级selecttext值实现联动 -->

       <option   value="DZ"  selected  value="s1">电子信息学院</option>

       <option   value="JD">机电工程学院</option>

       <option   value="CJ">财经管理学院</option>

       <option   value="GS">工商管理学院</option>

 </select>

 <select name="select2" id="s2" value="s2" >

        <!--默认选中,动态生成option -->

        <option value="j1"selected>16计算机1班</option>

        <option value="j2" >16计算机2班</option>

    </select>

2.      编写move函数(代码附有解释)

function move(){

     vars1=document.getElementById("s1");

     vars2=document.getElementById("s2");

       /*   <!-- 获取一级和二级的属性--> */

     var add;

     if(s1.value=="DZ"){

     add=new Array("16计算机1","16计算机2");//new 来创建数组对象。该代码定义了一个名为 Array 的数组对象,用来存储变量

        /* <!--比对value值,实现对应二级text值的动态生成-->*/

     }else if(s1.value=="JD"){

     add=new Array("16机器设计与制造1","16机器设计与制造2");      

  }else if(s1.value=="CJ"){

     add=new Array("16财务管理1","16财务管理2");

            }else if(s1.value=="GS"){

         add=new Array("16物流管理1","16物流管理2");

               }else if(s1.value=="s1") {

          add=new Array("16计算机1","16计算机2");

        }else{

     add=null; /*<!--若没有就为空,当然不可能出现的-->*/  

      }

      s2.length=0;

      for(var i=0;i<add.length;i++){

          var ss=new Option();

          ss.text=add[i].split()[0];

          s2.add(ss); /*    <!--text值添加到二级select中,显示出来-->*/       

      }

 }

三、 实现不同院/系部、不同专业、不同学期的课程表查询

      步骤解析:

1.  web项目中新建一个schedule1.jsp的页面,将做好的静态页面粘贴到schedule1.jsp中,运行;

2.  设计数据库(本人用access数据库,数据类型除了id为自动编号其余全部为文本,课程信息则自己根据实际加入即可,详情看附图)

如何实现一个简单教务系统的课程表查询

3. 连接access数据库实现查询功能,代码如下(前提:数据库驱动已经部署完毕

提醒:通过if..else if..else进行判断,为了方便,在这里我只判断是否是电子信息学院的,不是的话直接查询schedule1数据库中的6条数据(top  6指的是只查询6条数据 ;where id>XX是指从第XX+1条数据开始读取;order by id asc按照id进行升序处理)

1.该段代码放在body下面即可:

    <%

StringodbcQuery;

%>

<%

request.setCharacterEncoding("utf-8");

Stringquery_type=request.getParameter("select1"); //通过request.getParameter分别获取select1、2、3的数值

Stringquery_type1=request.getParameter("select2");

Stringquery_type2=request.getParameter("select3");

if(query_type1!=null&&query_type!=null){   

       if(query_type.equals("DZ")) {//判断是否是电子信息学院

           if(query_type1.equals("j1")) {//判断是否是16级计算机1班

               if(query_type2.equals("di1")) {//判断是否是第一学期

                     odbcQuery="select top 6 * from schedule1 where id>12  order by id asc";

               }

               else{

                     odbcQuery="select top 6 * from schedule1 where id>18  order by id asc";   

               }      

           }

           else{//16级计算机2

               if(query_type2.equals("di1")){

                     odbcQuery="select top 6 * from schedule ";

               }

               else{

                    odbcQuery="select top 6 * from schedule1 where id>6  order by id asc";     

               }

           }    

       }

       else{

           odbcQuery="select * from schedule1";

       }

   }

    else

         odbcQuery="selecttop 6 * from schedule1 where id>12 order by id asc";

try{

Class.forName("com.hxtt.sql.access.AccessDriver");

}

catch(ClassNotFoundExceptione){}

ResultSetrs; //建立ResultSet(结果集)对象

try {

       String path="jdbc:Access:///"+getServletContext().getRealPath("/").replaceAll("\\\\", "/")+"jiaoyu.mdb";

       Connection con = DriverManager.getConnection(path);     

       Statement sql=con.createStatement();

       rs = sql.executeQuery(odbcQuery); //执行SQL语句

%>

2.在两个tr表格之间放进以下代码

如何实现一个简单教务系统的课程表查询

<%

 while(rs.next()){

%>

3.</table>之前放进以下代码

如何实现一个简单教务系统的课程表查询

<% 

         }

        con.close();

        }

      catch(SQLException e1){}

 %>

四.读取数据库信息时,如何使得数据库为null的信息显示在页面上为空字符

如何实现一个简单教务系统的课程表查询

如果用<%=rs.getString("Monday")%>来读取数据库的信息,课程显示情况如下图:

如何实现一个简单教务系统的课程表查询

效果图



解决方法:

使用<%=(rs.getString("Monday")==null?"":rs.getString("Monday"))%>该语句来读取数据库,通过加入判断,如果等于null成立,则输出空字符串,否则输出数据库的数据(效果图如下)

如何实现一个简单教务系统的课程表查询

效果图