实验三 Web数据库程序设计

实验项目名称：实验三 Web数据库程序设计

一、实验目的

通过使用JSP技术设计一个简单的数据库管理系统，了解展示页面和编辑页面的区别，掌握Web服务器与MySQL数据库的连接和数据库操作的方法，掌握使用Java语言编写JSP文件的方法。

二、实验内容和基本要求

从以下列举的四个数据库中，任选其一，或者自行定义其他数据库，每个数据库中包含一张表，数据库名、表名、列名、列数据类型自行定义（提示：主键可以设为自增列）：

  1. 学生数据库：存储的信息包括学生学号、姓名、性别、生日等。
  2. 商品数据库：存储的信息包括商品ID、商品名称、商品数量、生产厂家等。
  3. 客户数据库：存储的信息包括客户ID、客户姓名、客户地址、手机号码等。
  4. 车辆数据库：存储的信息包括汽车ID、品牌、颜色、车主姓名等。
    开发一个数据库管理系统需要完成对以上数据库表中的记录的基本的查看、增加、修改和删除功能，参考系统文件关系如图1所示：

图1 系统文件关系图

各个文件功能如下：
1)index.jsp：显示数据库表中的所有记录，每条记录均拥有两个超链接，分别指向edit.jsp和del.jsp，这两个文件分别完成该条记录的编辑和删除功能。此外，该页面还需包含一个超链接指向add.jsp，完成新增一条记录的功能；
2)add.jsp：提供新增一条记录的页面，包含一个表单，若干输入框，该表单提交给addsave.jsp；
3)addsave.jsp：从add.jsp接收用户输入的数据，将数据插入数据库表中，并提示用户成功或者失败，提供一个超链接转向index.jsp；
4)edit.jsp：提供修改某一条记录的页面，包含一个表单，若干输入框，输入框初始值为该条记录原有数据，用户修改后，提交给editsave.jsp；
5)editsave.jsp：从edit.jsp接收用户输入的数据，修改数据库表中的对应记录，并提示用户成功或者失败，提供一个超链接转向index.jsp；
6)del.jsp：完成删除某一条记录的功能，并提示用户成功或者失败，提供一个超链接转向index.jsp；
7)error.jsp：作为其他所有页面的错误处理页面，该页面显示异常信息。
完成基本功能后，可以从以下方面对系统进行改进：
1)对于客户端增加和修改信息页面，使用JavaScript、Jquery、Vue等技术进行必要的数据的非空验证；
2)自行添加一些CSS，使得页面和字体更加美观。
完成后，请将各个文件程序源代码和浏览器截图写入实验报告。

三、实验步骤

1)打开MySQL，新建一个数据库。
2)新建一个数据库表。
3)在表中增加若干记录，作为初始数据。
4)打开Eclipse软件，新建一个名为Lab03的Web项目，并设置其部署程序为Tomcat。
5)在Lab03中添加文件，编写代码。

6)Style.css

@charset "utf-8";
body{
   background-image: url("stdu.png");
   background-size: cover;
   text-align: center;
}
table {
   width: 400px;
   border: 1px solid #696969;
   border-collapse: collapse;
   margin:0 auto;
}

th {
   border: 1px solid #696969;
   background-color: #5f80c9;
}
td {
   text-align: center;
   border: 1px solid ;
   height: 50px;
   opacity:0.8;
   background-color: #fff;
}
input {
   font-size: 20px;
}
a {
   color: #11F7F7;
   text-decoration: none;
   font-size: 18px;
}

a:hover {
   color: #F79011;
   text-decoration: underline;
   font-size: 18px;
}

7)Index.jsp

<%@ page language="java" import="java.sql.*" pageEncoding="utf-8"%>
<%@ page errorPage="error.jsp"%>
<html>
<head>
 <title>学生信息管理系统</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1 style="width: 100%; font-family: 微软雅黑; color:#fff;">学生信息管理系统</h1>
<a href="add.jsp">添加学生信息</a>
<br />
<br />
<table style="width: 50%;">
 <tr>
   <th>学号</th>
   <th>姓名</th>
   <th>性别</th>
   <th>生日</th>
   <th>管理</th>
 </tr>
 <%
   try {
     Class.forName("com.mysql.jdbc.Driver");
     Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8", "root", "123456");
     //使用Statement对象
     Statement stmt = con.createStatement();
     ResultSet rs = stmt.executeQuery("select * from student");
     while (rs.next()) {
       int id = rs.getInt(1);
       out.println("<tr><td>" + rs.getString(1) +"</td><td>" + rs.getString(2) + "</td><td>" + rs.getString(3) + "</td><td>"
               + rs.getString(4) + "</td><td>"+ rs.getString(5) +"</td><td><a href='edit.jsp?id=" + id
               + "'>修改</a>&nbsp;<a href='del.jsp?id=" + id + "'>删除</a></td></tr>");
     }
     rs.close();
     stmt.close();
     con.close();
   } catch (Exception e) {
     out.println("Exception:" + e.getMessage());
   }
 %>

</table>
<br />
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">
 &copy;版权所有：石家庄铁道大学信息科学与技术学院&nbsp;&nbsp;<a href="Lab03.png" target="_blank">网站地图</a>
</div>
</body>
</html>

8)Add.jsp

<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="error.jsp"%>
<html>
<head>
 <title>添加学生信息</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript">
   function check() {
     var id = document.getElementById("id");
     var name = document.getElementById("name");
     var sex = document.getElementById("sex");
     var birthday= document.getElementById("birthday");
     
     //非空
     if(id.value == '') {
       alert('学号为空');
       name.focus();
       return false;
     }
     if(name.value == '') {
       alert('姓名为空');
       teacher.focus();
       return false;
     }
     if(sex.value == '') {
       alert('性别为空');
       classroom.focus();
       return false;
     }
     if(birthday.value == '') {
       alert('生日为空');
       classroom.focus();
       return false;
     }
   }
 </script type="text/javascript">
</head>
<body>
<%
 Object message = request.getAttribute("message");
 if(message!=null && !"".equals(message)){

%>
<script type="text/javascript">
 alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<form action="addsave.jsp" method="post" onsubmit="return check()">
 <h2>添加学生信息</h2>
 <table style="width: 50%">
   <tr>
     <th width="30%">学号</th>
     <td width="70%"><input name="id" type="text"></td>
   </tr>
   <tr>
     <th>姓名</th>
     <td><input name="name" type="text"></td>
   </tr>
   <tr>
     <th>性别</th>
     <td><input name="sex" type="text"></td>
   </tr>
   <tr>
     <th>生日</th>
     <td><input name="birthday" type="text"></td>
   </tr>
   <tr>
     <td colspan="2"><input type="submit" name="submit" value="添加"> <input type="reset" value="重置"></td>
   </tr>
 </table>
</form>

</body>
</html>

9)Addsave.jsp

<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="error.jsp"%>
<html>
<head>
 <title>添加学生信息</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<%
 request.setCharacterEncoding("utf-8");
 String id = request.getParameter("id");
 String name = request.getParameter("name");
 String sex = request.getParameter("sex");
 String birthday = request.getParameter("birthday");
 Class.forName("com.mysql.jdbc.Driver");
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8", "root", "123456");
 PreparedStatement stmt = con.prepareStatement("insert into student(id,name,sex,birthday) values(?, ?,?,?)");
 stmt.setString(1, id);
 stmt.setString(2, name);
 stmt.setString(3, sex);
 stmt.setString(4, birthday);
 int i = stmt.executeUpdate();


 if (i == 1) {
   out.println("<h2>添加成功！</h2><br/>");
   out.println("<a href='index.jsp'>返回首页</a>");
 } else {
   out.println("<h2>添加失败！</h2><br/>");
   out.println("<a href='add.jsp'>重新添加</a>");
 }
 stmt.close();
 con.close();

%>
</body>
</html>

10)Del.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" pageEncoding="utf-8"%>
<html>
<head>
 <title>删除学生信息</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<%
 request.setCharacterEncoding("utf-8");
 Class.forName("com.mysql.jdbc.Driver");
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8", "root", "123456");
 Statement stmt=con.createStatement();
 String id=request.getParameter("id");
 int i=stmt.executeUpdate("delete from student where id="+id);
 if(i==1)
 {
   out.println("<h2>删除成功！</h2><br/>");
 }
 else
 {
   out.println("<h2>删除失败！</h2><br/>");
 }
 out.println("<a href='index.jsp'>返回首页</a>");
 stmt.close();
 con.close();

%>
</body>
</html>

11)Edit.jsp

<%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%>
<html>
<head>
   <title>修改学生信息</title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<%
   request.setCharacterEncoding("utf-8");
   String id = request.getParameter("id");
   Class.forName("com.mysql.jdbc.Driver");

   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8", "root", "123546");

   PreparedStatement stmt = con.prepareStatement("select * from student where id=?");
   stmt.setString(1, id);
   ResultSet rs = stmt.executeQuery();

   rs.next();
%>
<form action="editsave.jsp" method="post">
   <h2>修改学生信息</h2>
   <table style="width:50%">
       <tr>
           <th width="30%">学号：</th>
           <td width="70%"><input name="id" type="text"
                                  value="<%=rs.getString(1)%>"></td>
       </tr>
       <tr>
           <th>姓名：</th>
           <td><input name="name" type="text"
                      value="<%=rs.getString(2)%>"></td>
       </tr>
       <tr>
           <th>性别：</th>
           <td><input name="sex" type="text"
                      value="<%=rs.getString(3)%>"></td>
       </tr>
       <tr>
           <th>生日：</th>
           <td><input name="birthday" type="text"
                      value="<%=rs.getString(4)%>"></td>
       </tr>
       <tr>
           <td colspan="2"><input type="hidden" name="id" value="<%=id%>">
               <input type="submit" value="修改"> <input type="reset"
                                                         value="重置"></td>
       </tr>
   </table>
</form>
<%
   rs.close();
   stmt.close();
   con.close();
%>
</body>
</html>

12)Editsave.jsp

<%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%>
<html>
<head>
   <title>修改完成</title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<%
   request.setCharacterEncoding("utf-8");
   String id = request.getParameter("id");
   String name = request.getParameter("name");
   String sex = request.getParameter("sex");
   String birthday = request.getParameter("birthday");
  
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8", "root", "123456");
   Statement stmt = con.createStatement();
   String sql = "update info set id='"+id+"',name='" + name  + "',sex='" + sex+ "',birthday='" + birthday+ "'
           + "'where id=" + id;
   int i = stmt.executeUpdate(sql);
   if (i == 1) {
       out.println("<h2 >修改成功！</h2><br/>");
       out.println("<a href='index.jsp'>返回首页</a>");
   } else {
       out.println("<h2>修改失败！</h2><br/>");
       out.println("<a href='edit.jsp?id='" + id + ">重新添加</a>");
   }
   stmt.close();
   con.close();
%>
</body>
</html>

13)Error.jsp

<%@ page language="java" isErrorPage="true" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>error page</title>
</head>
<body>
错误信息为：<br/>
<%=exception.getMessage()%><br>
<%=exception.toString()%>
</body>
</html>

14)程序截图

Index.jsp

Add.jsp

Addsave.jsp

Edit.jsp

Editsave.jsp

Del.jsp

posted @ 2023-05-10 21:30  YE-  阅读(416)  评论(0)  编辑  收藏  举报