如何實現一個簡單教務系統的課程表查詢
一、設計思路
1. 首先做好課程表靜態頁面(可用Sublime,Dreawvear等開發工具編寫,本人用Sublime編寫,程式碼稍後附上)
2. 資料庫設計(可用access資料庫、sql資料庫或者mysql資料庫,根據自己習慣選用資料庫,本人選用access資料庫。注意:連線不同資料庫需要不同資料庫驅動,自行百度下載)
課程表效果圖
二、課程表實現功能
1.實現select下拉列表的二級聯動;
(何為select二級聯動:當我在第一個下拉列表選中一個固定的選項之後,第二個下拉列表自動填充相對應選項)
2.實現不同院/系部、不同專業、不同學期的課程表查詢
3.讀取資料庫資訊時,使得資料庫為null的資訊顯示在頁面上為空字元;
三、實現過程
一.設計介面(附上靜態頁面程式碼,頁面可根據自己喜好設計)
二.實現select下拉列表的二級聯動
附完整程式碼
步驟解析:
1. 將兩個select分別命名為select1和select2,並且分別定義其id為s1和s2,value為s1和s2,同時定義一個函式,程式碼如下:
<selectname="select1" id="s1" onChange="move()" value=" s1">
<!-- 根據id獲取value,onchange()觸發函式move()修改二級select的text值實現聯動 -->
<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成立,則輸出空字串,否則輸出資料庫的資料(效果圖如下)
效果圖