实验三 Web数据库程序设计

实验报告

课程名称： WEB应用开发技术	任课教师：雷宇	实验日期： 2023.5.16
班级：信2105-2班	姓名：燕烁天	学号： 20213849

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

一、实验目的

二、实验内容和基本要求

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

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) 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">
   <style type="text/css">

      body {

         background: url(111.jpg);
         background-size:cover;
      }

   </style>

</head>
<body>
   <h1>学生管理系统</h1>
   <a href="add.jsp">添加学生信息</a>
   <br />
   <br />
   <table style="width: 80%;">
      <tr>
         <th>学号</th>
         <th>姓名</th>
         <th>性别</th>
         <th>生日</th>
         <th>管理</th>
      </tr>
      <%
         Class.forName("com.mysql.jdbc.Driver");
         Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/book", "root", "Woshi17333960765");
         //使用Statement对象
         Statement stmt = con.createStatement();
         ResultSet rs = stmt.executeQuery("select * from bookinfo");

         /*
         PreparedStatement stmt = con.prepareStatement("select * from bookinfo");
         ResultSet rs = stmt.executeQuery();
         */
         while (rs.next()) {
            int id = rs.getInt(1);
            out.println("<tr><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> <a href='del.jsp?id=" + id + "'>删除</a></td></tr>");
         }
         rs.close();
         stmt.close();
         con.close();
      %>

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

7) add.jsp文件代码

8) 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">
   <style type="text/css">

      body {

         background: url(111.jpg);
         background-size:cover;
      }

   </style>
</head>
<body>
   <%
      request.setCharacterEncoding("utf-8");
      String stuid = request.getParameter("stuid");
      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/book", "root", "Woshi17333960765");
      //使用Statement对象
      Statement stmt = con.createStatement();
      String sql = "insert into bookinfo(stuid,name,sex,birthday) values('" + stuid + "','" + name + "','" + sex + "','" + birthday + "')";
      System.out.println(sql);
      int i = stmt.executeUpdate(sql);


/*        PreparedStatement stmt = con.prepareStatement("insert into bookinfo(stuid,name,sex,birthday) values(?, ?, ?,?)");
      stmt.setString(1, stuid);
      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>

9) 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">
   <style type="text/css">

      body {

         background: url(111.jpg);
         background-size:cover;
      }

   </style>
</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/book", "root", "Woshi17333960765");
      //Statement stmt = con.createStatement();
      //ResultSet rs = stmt.executeQuery("select * from bookinfo where id=" + id);

      PreparedStatement stmt = con.prepareStatement("select * from bookinfo 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="stuid" type="text"
               value="<%=rs.getString(2)%>"></td>
         </tr>
         <tr>
            <th>姓名：</th>
            <td><input name="name" type="text"
               value="<%=rs.getString(3)%>"></td>
         </tr>
         <tr>
            <th>性别：</th>
            <td><input name="sex" type="text"
               value="<%=rs.getString(4)%>"></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>

10) 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">
   <style type="text/css">

      body {

         background: url(111.jpg);
         background-size:cover;
      }

   </style>
</head>
<body>
   <%
      request.setCharacterEncoding("utf-8");
      String stuid = request.getParameter("stuid");
      String name = request.getParameter("name");
      String sex = request.getParameter("sex");
      String birthday = request.getParameter("birthday");
      String id = request.getParameter("id");
      Class.forName("com.mysql.jdbc.Driver");
      Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/book", "root", "Woshi17333960765");
      Statement stmt = con.createStatement();
      String sql = "update bookinfo set stuid='" + stuid + "',name='" + name + "',sex='" + sex + "',birthday=" + birthday
            + " where id=" + id;
      System.out.println(sql);
      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>

11) 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">
   <style type="text/css">

      body {

         background: url(111.jpg);
         background-size:cover;
      }

   </style>
</head>
<body>
   <%
   request.setCharacterEncoding("utf-8");
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/book", "root", "Woshi17333960765");
   Statement stmt=con.createStatement();
   String id=request.getParameter("id");
   int i=stmt.executeUpdate("delete from bookinfo 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>

12) 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>
   <h1>程序出现错误</h1>
   <div>错误信息为：<br/>
   <%=exception.getMessage()%><br/>
   <%=exception.toString()%>
   </div>
</body>
</html>

13) 程序截图

四、心得体会

对于Web数据库程序设计实验，我认为以下几点是非常重要的：

1.熟悉数据库语言：如SQL等，了解查询、插入、更新、删除等基本操作，以及数据库的设计原则和规范。

2.掌握前端开发技术：如HTML、CSS、JavaScript等，能够使用这些技术来设计并实现用户界面。

3.了解后端开发技术：如PHP、Python、Java等，能够使用这些技术来处理用户请求，并与数据库进行交互。

4.熟悉Web开发框架：如Django、Flask等，这些框架可以帮助开发者更快速地搭建Web应用程序。

5.注重数据安全：在设计和实现Web应用程序时，需要考虑数据的安全性，包括数据的加密、防止SQL注入攻击等。

总的来说，Web数据库程序设计实验需要开发者具备全面的Web开发技术和数据库知识，同时需要注重数据的安全性，这样才能设计出高质量、安全可靠的Web应用程序。

posted @ 2023-05-16 22:27 STDU_DREAM 阅读(408) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

DREAM2021

实验三 Web数据库程序设计

公告