TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
本文将向你演示如何使用Apache Tomcat+JSP来制作多媒体教室上课预约单。
一、 界面要求：
第 周多媒体教室上课预约单
我要预约
星期一
星期二
星期三
星期四
星期五
星期六
星期日
第一节
第二节
第三节
第四节
第五节
第六节
第七节
第八节
其中”我要预约”超链接到填写预约单的页面。 二、安装 Tomcat
先安装了Tomcat 之后，再设置我们的工作目录。
首先，在 c:Tomcat 5.0webapps 目录下创建一个名为 yyd 的子目录。然后在 yyd 子目录下，
创建标准的 Web 应用程序目录结构：
c:Tomcat 5.0webappsyyd
c:Tomcat 5.0webappsyydWEB-INF
c:Tomcat 5.0webappsyydWEB-INFclasses
c:Tomcat 5.0webappsyydWEB-INFclassesdingdan
三、数据库设置
我们的预约单数据库用来存储教师的预约记录，打开Access,创建数据库dingdan,存盘保存在：
c:Tomcat 5.0webappsyydWEB-INFdingdan.mdb
在其中创建二十五个表：guestbook1,guestbook2,...guestbook25。每个表的结构一样，如下所示：
字段说明
字段
数据类型
是否能为空
编号
serial_no
自动编号
否
姓名
name
文本
否
星期几
week
文本
否
第几节
jie
文本
否
上课课题
content
文本
否
我们使用二十五个表对应一个学期的二十五个周，这样便于管理。当然也可用一个表。Week和jie字段用了文本类型。
四、设置数据源
以win2000为例，从控制面板的管理工具中打开“ODBC 数据源管理器”,单击”系统DSN”选项卡,在其中添加数据源dingdan,指向我们在上面创建的数据库dingdan.mdb。 五、多媒体教室上课预约单的文件结构
制作这个预约单将使用五个文件：
dingdan.jsp 选择周次的主文件。
index1.jsp 显示本周预约情况的jsp文件
Adddingdan.jsp 供老师填写的预约单
Okdingdan.jsp 将预约记录写入数据库
Dingdan.java 用于连接数据库 （1）Dingdan.jsp是供老师选择预约周次的jsp文件，并负责向index1.jsp传递参数。原码如下：
<%@page contentType="text/HTML;charset=gb2312" %>
<html>
<BODY>
<font size="2">多媒体教室上课预约单</font><p>
<table border="0" width="103%" cellspacing="0" cellpadding="0" height="1">
<tr> <FORM name="guideform" action=index1.jsp target="_blank" method=”post”>
<SELECT name="guidelinks">
<OPTION SELECTED value="1">第一周
<OPTION value="2">第二周
<OPTION value="3">第三周
<OPTION value="4">第四周
<OPTION value="5">第五周
<OPTION value="6">第六周
<OPTION value="7">第七周
<OPTION value="8">第八周
<OPTION value="9">第九周
<OPTION value="10">第十周
<OPTION value="11">第十一周
<OPTION value="12">第十二周
<OPTION value="13">第十三周
<OPTION value="14">第十四周
<OPTION value="15">第十五周
<OPTION value="16">第十六周
<OPTION value="17">第十七周
<OPTION value="18">第十八周
<OPTION value="19">第十九周
<OPTION value="20">第二十周
<OPTION value="21">第二十一周
<OPTION value="22">第二十二周
<OPTION value="23">第二十三周
<OPTION value="24">第二十四周
<OPTION value="25">第二十五周
</SELECT><INPUT type="submit" name="go" value="Go!"
</FORM>
</tr>
</table>
</BODY> （2）index1.jsp用来显示本周的预约情况
一周的预约情况用一个数组week[][]记录，首先将数组赋初值：
for(int i=0;i<=8;i++)
for(int j=0;j<=7;j++)
week[j]=" ";
week[0][1]="星期一";
week[0][2]="星期二";
week[0][3]="星期三";
week[0][4]="星期四";
week[0][5]="星期五";
week[0][6]="星期六";
week[0][7]="星期日"; for(int i=1;i<=8;i++)
week[0]="第"+i+"节";
这个数组中其它元素的值从数据库中读出
Rs = showBean.executeQuery("SELECT * FROM guestbook"+sn1);
while(Rs.next()){
e1 = Rs.getString("week");
name1 = Rs.getString("name");
e2 = Rs.getString("jie");
int k=Integer.parseInt(e1);
int l=Integer.parseInt(e2);
week[l][k]=name1;
}
最后用一个表格显示week[][]。原代码如下：
<%@ page contentType="text/html;charset=gb2312" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多媒体教室上课预约单</title>
<script LANGUAGE="javascript">
function newwin(url) {
var newwin=window.open(url,"newwin","toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=350");
newwin.focus();
return false;
}
</script>
</head>
<body bgcolor="#FFFFCC">
<script LANGUAGE="javascript">
function submit11()
{
self.location.replace("index1.jsp")
}
</script> <%
String sn,sn1;
String e1;
String name1;
String e2;
String week[][]=new String[9][8];
int m1,m2;
sn=request.getParameter("guidelinks");
if(sn!=null) {
session.setAttribute("SN",sn);
sn1=(String)session.getAttribute("SN");
}else{
sn1=(String)session.getAttribute("SN");}
%> <center><p><h2><font color="blue">第<%=sn1 %>周多媒体教室上课预约单</font></h2></p></center>
<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="showBean" scope="page" class="dingdan.dingdan" />
<% ResultSet Rs=null; for(int i=0;i<=8;i++)
for(int j=0;j<=7;j++)
week[j]=" "; week[0][1]="星期一";
week[0][2]="星期二";
week[0][3]="星期三";
week[0][4]="星期四";
week[0][5]="星期五";
week[0][6]="星期六";
week[0][7]="星期日"; for(int i=1;i<=8;i++)
week[0]="第"+i+"节";
try{
Rs = showBean.executeQuery("SELECT * FROM guestbook"+sn1); while(Rs.next()){
e1 = Rs.getString("week");
name1 = Rs.getString("name");
e2 = Rs.getString("jie");
int k=Integer.parseInt(e1);
int l=Integer.parseInt(e2);
week[l][k]=name1;
}
Rs.close();
}catch(Exception e){
System.out.println(e.toString());
}
showBean.closeConn();
%>
<p align="left">
<% out.print("<a href="addguestbook.jsp">我要预约</a> "); %>
</p>
<center>
<table border="1" cellspacing="0" width="632" bgcolor="#ffffff bordercolorlight="red" bordercolordark="red">
<% for(m1=0;m1<=8;m1++){ %>
<tr>
<% for(m2=0;m2<=7;m2++){ %>
<td bgcolor="#33ccff"><%=week[m1][m2] %></td>
<% } %>
<tr>
<% } %>
</table> <p> <h5>某某制作</h5>
</center> </body>
</html> （3）add.jsp用来给教师填预约单并向ok_add.jsp传递表单数据。 原代码如下,函数valiform()用于客户端表单验证。
<%@page contentType="text/html;charset=gb2312" %> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>预约单</title>
<SCRIPT LANGUAGE="JavaScript">
function valiform() {
if(document.form1.content.value==""){
alert("请输入课题！");
document.form1.content.focus();
return false;
}
else if(document.form1.name.value==""){
alert("请输入姓名！");
document.form1.name.focus();
return false;
}
else if(document.form1.week.value==""){
alert("请输入星期！");
document.form1.week.focus();
return false;
}
else if(document.form1.jie.value==""){
alert("请输入节次！");
document.form1.jie.focus();
return false;
}
}
</script>
</head>
<body> <FORM METHOD=POST action="ok_add.jsp" name=form1 onSubmit="return valiform()">
<center><h2><font color="blue">预约单</font></h2></p>
<center><h5>预约单不能修改，请认真填写！</h5></center><p>
<TABLE width="60%" height="120"> <TR>
<td>姓名：<INPUT TYPE="text" name="name" value="" ></td>
</TR>
<TR>
<td>星期:
<select name="week" size="1">
<option style="color: #000000" value="1" selected>星期一 </option>
<option style="color: #000000" value="2">星期二</option>
<option style="color: #000000" value="3">星期三</option>
<option style="color: #000000" value="4">星期四</option>
<option style="color: #000000" value="5">星期五</option>
<option style="color: #000000" value="6">星期六</option>
<option style="color: #000000" value="7">星期日</option>
</select>
</td>
<tr>
<td>节次：<select name="jie" size="1">
<option style="color: #000000" value="1" selected>第一节 </option>
<option style="color: #000000" value="2">第二节</option>
<option style="color: #000000" value="3">第三节</option>
<option style="color: #000000" value="4">第四节</option>
<option style="color: #000000" value="5">第五节</option>
<option style="color: #000000" value="6">第六节</option>
<option style="color: #000000" value="7">第七节</option>
<option style="color: #000000" value="8">第八节</option>
</select>
</td>
</td>
</TR>
<TR>
<td>课题：<input type"text" name="content" value=""></td>
</TR>
<TR>
<td align="center"> <INPUT TYPE="submit" size="4" value="提交" class="buttonface">
<INPUT TYPE="reset" size="4" value="重写" class="buttonface"></td>
</TR>
</table>
</center>
</form>
</body>
</html> （4）ok_add.jsp文件将教师的预约数据写入数据库并刷新index1.jsp
<html>
<head>
<%@ page contentType="text/html;charset=gb2312" %>
<title>保存数据</title>
</head>
<%@ page language="java" import="java.sql.*" %>
<jsp:useBean id="addBean" scope="page" class="dingdan.dingdan" />
<%
int i=0;
String name= new String(request.getParameter("name").getBytes("8859_1"));
String em= new String(request.getParameter("week").getBytes("8859_1"));
String em2= new String(request.getParameter("jie").getBytes("8859_1")); String content= new String(request.getParameter("content").getBytes("8859_1"));
String sn=(String)session.getAttribute("SN");
String sql="select * from guestbook"+sn;
ResultSet rs=addBean.executeQuery(sql);
while(rs.next()){
String ee=rs.getString("week");
String ee1=rs.getString("jie");
if((em.equals(ee))&&(em2.equals(ee1))){
i=1;
break;
}
}
rs.close();
if(i==0){
String strSQL="insert into guestbook"+sn+" (name,week,jie,content) values("" + name + "","" + em + "",""+em2+"","" +
content + "")";
addBean.executeUpdate(strSQL);
out.print("您的预约内容已经保存到数据库中，谢谢！");
}else if(i==1){
if(em.equals("7")){ out.print("星期日"+"第"+em2+"节，有人预约，请您重新填单！！");
}else{
out.print("星期"+em+"第"+em2+"节，有人预约，请您重新填单！！");
}
}
addBean.close();
%>
<body onload="load2()">
<script language=javascript>
function load2(){
opener.setTimeout("submit11()",1500)
self.setTimeout("exit()",1500)
}
function exit(){
window.close()
}
</script> </body>
</html>
(5)dingdan.java文件用于连接数据库
- package dingdan;
- import java.sql.*;
- public class dingdan {
- String sDBDriver = "sun.jdbc.odbc.JdbcOdbcDriver";
- String sConnStr = "jdbc:odbc:dingdan";
- private Connection conn = null;
- private Statement stmt = null;
- ResultSet rs = null;
- public dingdan() {
- try {
- Class.forName(sDBDriver);
- }catch(java.lang.ClassNotFoundException e) {
- System.err.println("dingdan(): " + e.getMessage());
- }
- }
-
- public ResultSet executeQuery(String sql) {
- try {
- conn = DriverManager.getConnection(sConnStr);
- stmt = conn.createStatement();
- rs = stmt.executeQuery(sql);
- }catch(SQLException ex) {
- System.err.println("aq1.executeQuery: " + ex.getMessage());
- }
- return rs;
- }
-
- public void executeUpdate(String sql) {
- stmt = null;
- try {
- conn = DriverManager.getConnection(sConnStr);
- stmt = conn.createStatement();
- stmt.executeUpdate(sql);
- }catch(SQLException ex) {
- System.err.println("aq2.executeQuery: " + ex.getMessage());
- }
- }
- public void closeStmt(){
- try{
- stmt.close();
- }
- catch(SQLException e){
- e.printStackTrace();
- }
- }
- public void closeConn(){
- try{
- conn.close();
- }
- catch(SQLException e){
- e.printStackTrace();
- }
- }
- }
为了使用dingdan.java，你必须用命令行 javac 编译器这个 .java 文件。
将已编译的dingdan.class 文件复制到先前创建的
c:Tomcat 5.0webappsyydWEB-INFclassesdingdan下。
七、运行
将dingdan.html,index1.jsp,add.jsp,ok_add.jsp四个文件放在c;Tomcat 5.0wepappsydd下，
启动Tomcat,在浏览器的地址栏中键入http://127.0.0.1:8080/ydd/dingdan.jsp。
源码下载：http://file.javaxxz.com/2014/10/1/025605281.zip |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-10-1 02:56:05