1) 首先需要完成数据库的设计。这里采用 Access 数据库，数据库中表的结构以及测试数据如图所示。

图 1 数据库

2) 之后，配置一个 ODBC 数据源，数据源名称为 vote。

3) 接下来，可以实现访问数据库的 JavaBean 了，其代码和前面所示基本类似，仅仅是数据源发生了变化。JavaBean 的源代码如下。

package vote;

import java.sql.*;

public class VoteConn {

String sDBDriver = "sun.jdbc.odbc.JdbcOdbcDriver";

String sConnStr = "jdbc:odbc:vote";

Connection connect = null;

ResultSet rs = null;

public VoteConn() {

try {

Class.forName(sDBDriver);

}

catch(java.lang.ClassNotFoundException e) {

System.err.println( e.getMessage());

}

}

public ResultSet executeQuery(String sql) {

try {

connect = DriverManager.getConnection(sConnStr);

Statement stmt = connect.createStatement();

rs = stmt.executeQuery(sql);

}

catch(SQLException ex) {

System.err.println(ex.getMessage());

}

return rs;

}

public int executeUpdate(String sql) {

int result = 0;

try {

connect = DriverManager.getConnection(sConnStr);

Statement stmt = connect.createStatement();

result = stmt.executeUpdate(sql);

}

catch(SQLException ex) {

System.err.println(ex.getMessage());

}

return result;

}

}

4) 编译这个 JavaBean，将编译后的字节码文件复制到相应的 WEB-INF、classes 目录下。在 index.jsp 中要做的工作是把数据库中的每一条记录显示在表格中。程序源代码如下：

文件名称：index.jsp

<%@ page contentType="text/html;charset=GBK" %>

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<html>

<head>

<title>网上调查表</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<%

ResultSet rs = connDbBean.executeQuery("select * from vote");

%>

<body bgcolor="#FFFFFF">

<center>

<h2><font color=#0000ff>请您投票：</font></h2>

<Table border bgcolor=#00FFFF>

<form action="vote.jsp">

<% while(rs.next()) { %>

<TR>

<TD><input type="radio" name="type" value=<%=rs.getString("id")%>><%=rs.getString("note")%></TD>

</TR>

<%}

rs.close();

%>

<TR align="center"><TD><Input type="submit" value="投票"></TD></TR>

</form>

<TR><TD><A href="details.jsp">查看投票</A></TD></TR>

</Table>

</center>

</body>

</html>

在上面的代码中，使用了样式表来控制整个页面的显示效果：

<link rel = “stylesheet” type = “text/css” href = “style.css”>

这种方式在后面会经常用到，关于 CSS 样式表的详细介绍，请参考相关书籍。在这里用到的 CSS 样式表 style.css 源文件如下：

body{ font-size: 85%; font-family: 宋体; }

td{font-size:9pt;}

p{ font-size:9pt;}

li{font-size:9pt;}

A{text-decoration:none;color:navy}

A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}

当用户单击“查看投票”链接时，会转到“查看投票”对应页面 details.jsp，其源代码如下：

<%@ page contentType="text/html;charset=GBK" %>

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<%!

int tot_num=0;

int tmp_num=0;

%>

<HTML>

<HEAD>

<link rel="stylesheet" type="text/css" href="style.css">

<meta http-equiv="Expires" content="Tue, 09 Dec 1998 00:00:00 GMT">

<meta http-equiv="Pragma" content="no-cache">

</HEAD>

<BODY>

<table width="80%" border="0" cellspacing="2" cellpadding="3">

<%

// 获取总票数

ResultSet tmpRs = connDbBean.executeQuery("select sum(c_num) As totalnum from vote");

tmpRs.next();

tot_num = tmpRs.getInt("totalnum");

tmpRs.close();

ResultSet rs = connDbBean.executeQuery("select * from vote");

int i=1;

while(rs.next()) { %>

<tr bgcolor="#99CCFF">

<td>选项<%=i%>：<%=rs.getString("note")%></td>

</tr>

<tr>

<%

tmp_num = rs.getInt("c_num");

%>

<td>投票率：<img src="back.gif" width="<%=Math.floor(tmp_num*200/tot_num)%>" height="8"> <%=Math.floor(tmp_num*100/tot_num)%>%

[得：<%=tmp_num%>票 共：<%=tot_num%>票]</td>

</tr>

<%

i++;

}

%>

</table>

<%

rs.close();

%>

</BODY>

</HTML>

在这个页面中有几点是需要注意的：

l 利用 SQL 语句中的集合函数 sum 先求出总的票数。

l 在显示当前候选项对应票数时，实现图形方式的显示，核心用到了 HTML 中 IMG 标记的 width 属性。当 width 属性不同时，图片的长度自然就会发生变化。

当用户选择某个候选项，单击“投票”按钮后，信息会提交到处理投票的页面 vote.jsp，在完成对当前用户所选项数目增加的操作后，页面跳转到 details.jsp。页面 vote.jsp 的源代码如下。

<%@ page contentType="text/html;charset=GBK" %>

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<%

String rb = request.getParameter("type");

if(rb != null && rb != "") {

String sql = "Update vote Set c_num=c_num+1 where id=" + rb;

connDbBean.executeUpdate( sql );

}

%>

<jsp:forward page="details.jsp"/>

下面，考虑实现系统维护功能。

首先，需要完成系统维护的初始页面 admin.jsp，该页面对数据库中的各条记录进行显示。在每条记录对应行的右边都有一个“删除”链接，当用户单击此链接时，可以删除相应的记录。admin.jsp 的源代码如下：

<%@ page contentType="text/html;charset=GBK" %>

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body bgcolor="#FFFFFF">

<div align="center">

<p><font color="#990000" size="+2"><u>调查系统维护中心</u></font> </p>

<%

ResultSet tempRs = connDbBean.executeQuery("SELECT id,note FROM vote Order BY id");

%>

<table width="80%" border="0" cellspacing="1" cellpadding="2">

<tr>

<td width="10%" class="text1" bgcolor="#99CCFF">

<div align="center">序号</div>

</td>

<td width="80%" class="text1" bgcolor="#99CCFF">

<div align="center">内　　　　　　　　　　　　容</div>

</td>

<td width="10%" class="text1" bgcolor="#99CCFF">

<div align="center">^_^</div>

</td>

</tr>

<%

int i = 1 ;

while(tempRs.next()) {

%>

<tr>

<td >

<div align="center"><%=i%></div>

</td>

<td ><%=tempRs.getString("note")%></td>

<td >

<div align="center"><a href="delvote.jsp?id=<%=tempRs.getInt("id")%>">删除</a></div>

</td>

</tr>

<%

i=i+1;

}

%>

<tr>

<td colspan="3">

<hr width="100%" size="1">

</td>

</tr>

<tr>

<td class="text1">

<div align="center"></div>

</td>

<td class="text1" colspan="2">&nbsp;</td>

</tr>

<tr>

<td class="text1" colspan="3" bgcolor="#99CCFF">增加项目</td>

</tr>

<tr>

<td class="text1" colspan="3">

<form method="post" action="addvote.jsp">

<p>内容：

<input type="text" name="note" size="50" maxlength="50">

</p>

<p>

<input type="submit" name="Submit" value="提交">

<input type="reset" name="Submit2" value="重置">

</p>

<p>&nbsp;</p>

</form>

</td>

</tr>

</table>

<%

tempRs.close();

%>

</body>

</html>

在这个页面中，用户单击“删除”链接后，通过 delvote.jsp 页面可以删除选项。delvote.jsp 的源代码如下：

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<%

String d_id = request.getParameter("id");

if(d_id!=null && d_id.length()>0) {

connDbBean.executeUpdate("DELETE FROM VOTE Where id=" + d_id);

}

%>

<jsp:forward page="admin.jsp"/>

同时，用户可以输入新增项目的内容，单击“提交”按钮，实现新增项目的提交。处理新增项目的页面 addvote.jsp 源程序如下：

<%@ page contentType="text/html;charset=GBK" %>

<%@ page language="java" import="java.sql.*"%>

<jsp:useBean id="connDbBean" scope="page" class="vote.VoteConn"/>

<%

String nn = request.getParameter("note");

if(nn != null && nn.length() >0) {

ResultSet tmpRs = connDbBean.executeQuery("select max(id) As maxid from vote");

tmpRs.next();

int max_id = tmpRs.getInt("maxid") + 1;

tmpRs.close();

String sql = "insert into vote values (" + max_id + ",'";

sql += nn + "',0);";

connDbBean.executeUpdate(sql);

}

%>

<jsp:forward page="admin.jsp"/>