实 验 报 告
|
课程名称： 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文件代码
<%@ 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>
<form action="addsave.jsp" method="post">
<h2>添加学生信息</h2>
<table style="width: 80%">
<tr>
<th width="30%">学号：</th>
<td width="70%"><input name="stuid" 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>
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应用程序。
标签：Web,数据库,request,stmt,jsp,程序设计,id,con From： https://www.cnblogs.com/DREAM2021/p/17407085.html