1. 來源
專案來源於我的室友,一個基於JSP+Mysql的WEB圖書售賣系統專案。
2.執行環境與執行結果
-
執行環境：
Windows 11 23H2
OpenJDK 21.0.2
IntelliJ IDEA 2023.3.4
Tomcat 10
MySQL-Connector 8.2.0 -
資料庫構成
-
源程式程式碼
book.java
package com.project02.project02;
public class Book {
private int bookid;
private String bookname;
private String author;
private String pic;
private String press;
private String intro;
private double price;
public Integer getBookid(){
return bookid;
}
public void setBookid(Integer bookid){
this.bookid = bookid;
}
public String getBookname(){
return bookname;
}
public void setBookname(String bookname){
this.bookname = bookname;
}
public String getAuthor(){
return author;
}
public void setAuthor(String author){
this.author = author;
}
public String getPic(){
return pic;
}
public void setPic(String pic){
this.pic =pic;
}
public String getPress(){
return press;
}
public void setPress(String press){
this.press = press;
}
public String getIntro(){
return intro;
}
public void setIntro(String intro){
this.intro = intro;
}
public double getPrice(){
return price;
}
public void setPrice(double price){
this.price = price;
}
}
cart.java
package com.project02.project02;
public class Cart {
private Book p;
private int sum;
public Book getP() {
return p;
}
public void setP(Book p) {
this.p = p;
}
public int getSum() {
return sum;
}
public void setSum(int sum) {
this.sum = sum;
}
}
doAccount.java
package com.project02.project02;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.*;
import java.io.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.net.URLDecoder;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
public class doAccount extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = (String)session.getAttribute("username");
String address = request.getParameter("address");
String phone = request.getParameter("phone");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.裝載驅動程式
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立資料庫連線
conn = DriverManager.getConnection(sConnStr,username,password);
// 4建立PreparedStatement物件
stmt = conn.createStatement();
// 執行SQL語句
String sql = "INSERT INTO userinfo (account, address, phone) VALUES('"+account+"','"+address+"','"+phone+"') " +
"ON DUPLICATE KEY UPDATE address = '"+address+"', phone = '"+phone+"';";
int result = stmt.executeUpdate(sql);
//6.處理結果
if(result>0){
response.sendRedirect("./account.jsp");
// 在session中儲存收貨地址和電話號碼
session.setAttribute("address", address);
session.setAttribute("phone", phone);
}
else {
response.sendRedirect("./accountFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.關閉連線
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doLogin.java
package com.project02.project02;
import java.io.IOException;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
public class doLogin extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = request.getParameter("username");
String pwd = request.getParameter("password");
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.裝載驅動程式
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立資料庫連線
conn = DriverManager.getConnection(sConnStr,username,password);
//4.建立PreparedStatement
String sql = "SELECT * FROM user WHERE account = ? AND password = ?";
stmt = conn.prepareStatement(sql);
stmt.setString(1, account);
stmt.setString(2, pwd);
//5.執行SQL語句
rs = stmt.executeQuery();
//6.處理結果
if(rs.next()){
//out.println("使用者登入成功，歡迎您，" + account);
response.sendRedirect("./account.jsp");
// 在session中儲存登入賬號和密碼
session.setAttribute("username", account);
session.setAttribute("password", pwd);
} else {
//out.println("使用者登入失敗，使用者名稱或密碼錯誤。");
response.sendRedirect("./loginFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.關閉連線
try {
rs.close();
stmt.close();
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doMessage.java
package com.project02.project02;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class doMessage extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
String msg = request.getParameter("msg");
String footer = request.getParameter("footer");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.裝載驅動程式
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立資料庫連線
conn = DriverManager.getConnection(sConnStr,username,password);
//4.建立Statement
stmt = conn.createStatement();
//5.執行SQL語句
String sql = "INSERT INTO message (msg,footer) VALUES('"+msg+"','"+footer+"') " ;
int result = stmt.executeUpdate(sql);
//6.處理結果
if(result>0){
response.sendRedirect("./message.jsp");
}
}
catch(SQLException el){
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.關閉連線
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doOrder.java
package com.project02.project02;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
import java.util.HashMap;
import java.util.Iterator;
public class doOrder extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String account = (String) session.getAttribute("username");
String address = (String) session.getAttribute("address");
String phone = (String) session.getAttribute("phone");
System.out.println(account);
System.out.println(address);
System.out.println(phone);
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.裝載驅動程式
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立資料庫連線
conn = DriverManager.getConnection(sConnStr,username,password);
// 4建立PreparedStatement物件
stmt = conn.createStatement();
int result =0;
HashMap map = (HashMap)session.getAttribute("cart");
Iterator it = map.keySet().iterator();
while(it.hasNext()) {
java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
java.util.Date currentTime = new java.util.Date();
String str1 = formatter.format(currentTime);
Object key = it.next();
Cart cartItem = (Cart) map.get(key);
Book p = cartItem.getP();
int sum = cartItem.getSum();
String sql = "INSERT INTO orders (account,address,phone,bookid,bookname,booknumber,buytime) VALUES('"+account+"','"+address+"','"+phone+"','"+p.getBookid()+"','"+p.getBookname()+"','"+sum+"','"+str1+"') " ;
result+= stmt.executeUpdate(sql);
}
//6.處理結果
if(result>0){
//下單成功頁面
response.sendRedirect("./orderSuccess.jsp");
// 在session中儲存收貨地址和電話號碼
}
else {
response.sendRedirect("./accountFail.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.關閉連線
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
doRegister
package com.project02.project02;
import java.io.IOException;
import java.sql.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
public class doRegister extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
String account = request.getParameter("username");
String pwd = request.getParameter("confirmPassword");
String ema = request.getParameter("email");
Connection conn = null;
Statement stmt = null;
String sDBDriver = "com.mysql.cj.jdbc.Driver";
String sConnStr = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "zhouzhou";
//2.裝載驅動程式
try{
Class.forName(sDBDriver);
}
catch(ClassNotFoundException ex){
System.err.println(ex.getMessage());
}
try{
//3.建立資料庫連線
conn = DriverManager.getConnection(sConnStr,username,password);
//4.建立Statement
stmt = conn.createStatement();
//5.執行SQL語句
String sql = "INSERT INTO user (account, password, email) VALUES('"+account+"','"+pwd+"','"+ema+"') " +
"ON DUPLICATE KEY UPDATE password = '"+pwd+"', email = '"+ema+"';";
int result = stmt.executeUpdate(sql);
//6.處理結果
if(result>0){
//out.println("使用者註冊成功，請登入使用。");
response.sendRedirect("./login.jsp");
}
}
catch(SQLException el){
// out.println(el);
} catch (IOException e) {
throw new RuntimeException(e);
} finally{
//7.關閉連線
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
}
User.java
package com.project02.project02;
public class User {
private String account;
private String password;
private String email;
@Override
public String toString(){
return "User{" +
"account='" + account +'\''+
", password='" + password + '\''+
", email='" + email + '\''+
'}';
}
public String getAccount(){
return account;
}
public void setAccount(String account){
this.account = account;
}
public String getPassword(){
return password;
}
public void setPassword(String password){
this.password = password;
}
public String getEmail(){
return email;
}
public void setEmail(String email){
this.email = email;
}
public User(){
}
public User(String account , String password,String email){
this.account = account;
this.password = password;
this.email = email;
}
}
BaseDao.java
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class BaseDao {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
Connection con;
public static Connection getConnection() throws SQLException {
Connection connection = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test";
connection = DriverManager.getConnection(url,"root","zhouzhou");
} catch (ClassNotFoundException e) {
// TODO: handle exception
e.printStackTrace();
}
return connection;
}
public static void closeAll(Connection conn, Statement stmt, ResultSet rs) {
try {
if (rs != null)
rs.close();
if (stmt != null)
stmt.close();
if (conn != null)
conn.close();
} catch (SQLException e) {
// TODO: handle exception
e.printStackTrace();
}
}
}
BookDaoImpl.java
package dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import com.project02.project02.Book;
//操作圖書的實現類
public class BookDaoImpl {
/* 作用,按照條件查詢圖書 */
public ArrayList findAll() {
ArrayList list = new ArrayList();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
// 1.開啟資料庫連線
conn = BaseDao.getConnection();
// 2.建立執行sql語句物件
stmt = conn.createStatement();
// 3.傳送sql語句到mysql
String sql = "select * from book";
rs = stmt.executeQuery(sql);
// rs結果集--->遍歷--->封裝product--->放入ArrayList
while (rs.next())// 迴圈一次只代表一行
{
Book p = new Book();
p.setBookid(rs.getInt("bookid"));
p.setBookname(rs.getString("bookname"));
p.setPrice(rs.getDouble("price"));
p.setAuthor(rs.getString("author"));
p.setPic(rs.getString("pic"));
p.setPress(rs.getString("press"));
p.setIntro(rs.getString("intro"));
System.out.println(p.getBookname());
list.add(p);
}
// 4.
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
BaseDao.closeAll(conn, stmt, rs);
}
return list;
}
public Book findById(int id) {
//ArrayList list = new ArrayList();
Book p = new Book();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
// 1.開啟資料庫連線
conn = BaseDao.getConnection();
// 2.建立執行sql語句物件
stmt = conn.createStatement();
// 3.傳送sql語句到mysql
String sql = "select * from book where bookid =" + id;
rs = stmt.executeQuery(sql);
// rs結果集--->遍歷--->封裝product--->放入ArrayList
while (rs.next())// 迴圈一次只代表一行
{
//Product p = new Product();
p.setBookid(rs.getInt("bookid"));
p.setBookname(rs.getString("bookname"));
p.setPrice(rs.getDouble("price"));
p.setAuthor(rs.getString("author"));
p.setPic(rs.getString("pic"));
p.setPress(rs.getString("press"));
p.setIntro(rs.getString("intro"));
System.out.println(p.getBookname());
}
// 4.
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally {
BaseDao.closeAll(conn, stmt , rs);
}
return p;
}
}
account.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>使用者</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
font-family: "zhanku";
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
#main {
display: none;
width: 70%;
height: 70%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 20%;
left: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.header-text{
position: relative;
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
text-align: center;
top: 5%;
}
#inner{
display: none;
position: relative;
width: 95%;
height: 80%;
left: 2.5%;
top: 5%;
}
.img-box{
position: relative;
width:50% ;
height: 100%;
}
#user-img{
position: relative;
width: 50%;
top: 20%;
left: 20%;
filter: brightness(120);
opacity: 0.6;
}
#account-form{
position: relative;
width: 100%;
height: 100%;
font-family: "JetBrainsMono-Bold";
text-align: center;
top: 8%;
}
#account-form h1{
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
}
#username-box{
position: relative;
width:100%;
height: 8%;
font-size: 32px;
font-family: "zhanku";
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
#address{
position: relative;
width:70%;
height: 25%;
margin: 12px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
input::placeholder{
text-align: center;
font-size: 15px;
}
input{
text-align: center;
text-wrap:inherit;
}
input:focus{
border: none;
outline: 2px solid rgb(116, 116, 116);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
#phone{
position: relative;
width:40%;
height: 12%;
margin: 15px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
#bottoms{
position: relative;
left: 10%;
width: 80%;
height: 12%;
bottom: 0;
margin: 15px 0px 0px 0px;
}
input[type="submit"],button{
border: none;
position: relative;
width: 20%;
height: 80%;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.8);
}
input[type="submit"]:hover,button:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active,button:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<%--判斷session中取的使用者名稱是否為空，若為空，則顯示去登入，--%>
<%-- 若不為空，則可以在session中取到使用者名稱,並且可以登出,登出後,使用者名稱不在顯示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<%
String address = null;
String phone = null;
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT address, phone FROM userinfo WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
address = rs.getString("address");
phone= rs.getString("phone");
}
if(address!=null && phone !=null){
session.setAttribute("address",address);
session.setAttribute("phone",phone);
}
rs.close();
stmt.close();
conn.close();
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="main">
<div class="header-text">ACCOUNT</div>
<div id="inner">
<div class="img-box"><img src="image/user_img.png" id="user-img"></div>
<form id="account-form" action="doAccount" method="post">
<div id="username-box"><%=session.getAttribute("username")%></div>
<h1>Address</h1>
<input type="text" id="address" name="address" placeholder="<%
if(session.getAttribute("address") != null){
out.print(session.getAttribute("address"));
}
else {%>
請填入收貨地址
<%
}
%>">
<h1>Phone</h1>
<input type="text" id="phone" name="phone" placeholder="<%
if(session.getAttribute("phone") != null){
out.print(session.getAttribute("phone"));
}
else {%>
請填入手機號碼
<%
}
%>">
<div id="bottoms">
<input type="submit" value="確認" id="account-submit">
<a href="session.jsp"><button type="button">登出</button></a>
<a href="index.jsp"><button type="button">返回</button></a>
</div>
</form>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
//載入介面時動畫
var mainForm = document.getElementById("main");
var form = document.getElementById("inner");
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "flex";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
prompt_window.classList.add("fadeout-effect");
}, 1800);
}
</script>
</html>
accountFail.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>使用者</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
font-family: "zhanku";
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
#main {
display: none;
width: 70%;
height: 70%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 20%;
left: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.header-text{
position: relative;
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
text-align: center;
top: 5%;
}
#inner{
display: none;
position: relative;
width: 95%;
height: 80%;
left: 2.5%;
top: 5%;
}
.img-box{
position: relative;
width:50% ;
height: 100%;
}
#user-img{
position: relative;
width: 50%;
top: 20%;
left: 20%;
filter: brightness(120);
opacity: 0.6;
}
#account-form{
position: relative;
width: 100%;
height: 100%;
font-family: "JetBrainsMono-Bold";
text-align: center;
top: 8%;
}
#account-form h1{
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
}
#username-box{
position: relative;
width:100%;
height: 8%;
font-size: 32px;
font-family: "zhanku";
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
#address{
position: relative;
width:70%;
height: 25%;
margin: 12px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
input::placeholder{
text-align: center;
font-size: 15px;
}
input{
text-align: center;
text-wrap:inherit;
}
input:focus{
border: none;
outline: 2px solid rgb(116, 116, 116);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
#phone{
position: relative;
width:40%;
height: 12%;
margin: 15px;
font-family: "JetBrainsMono-Thin";
border-radius: 32px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
}
#bottoms{
position: relative;
left: 10%;
width: 80%;
height: 12%;
bottom: 0;
margin: 15px 0px 0px 0px;
}
input[type="submit"],button{
border: none;
position: relative;
width: 20%;
height: 80%;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.8);
}
input[type="submit"]:hover,button:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active,button:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<%--判斷session中取的使用者名稱是否為空，若為空，則顯示去登入，--%>
<%-- 若不為空，則可以在session中取到使用者名稱,並且可以登出,登出後,使用者名稱不在顯示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示視窗 -->
<div id="window-prompt"><div id="prompt">請確保收貨地址或電話號碼完整</div></div>
<div class="container">
<div id="main">
<div class="header-text">ACCOUNT</div>
<div id="inner">
<div class="img-box"><img src="image/user_img.png" id="user-img"></div>
<form id="account-form" action="doAccount" method="post">
<div id="username-box"><%=session.getAttribute("username")%></div>
<h1>Address</h1>
<input type="text" id="address" name="address" placeholder="收貨地址">
<h1>Phone</h1>
<input type="text" id="phone" name="phone" placeholder="手機號碼">
<div id="bottoms">
<input type="submit" value="確認" id="account-submit">
<a href="session.jsp"><button type="button">登出</button></a>
<a href="index.jsp"><button type="button">返回</button></a>
</div>
</form>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
//載入介面時動畫
var mainForm = document.getElementById("main");
var form = document.getElementById("inner");
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "flex";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime")
prompt_window.classList.add("fadeout-effect");
}, 1800);
}
</script>
</html>
booklist.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>書單</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.booklist-container{
width: 80%;
top:150px;
height: 1800px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter:blur(4px);
position: relative;
left: 10%;
border-radius: 256px;
}
#booklist-header-text{
text-align: center;
height: 30px;
color: rgba(255,255,255,0.9);
font-size: 120px;
transform: translateY(-70px);
font-family: "zhanku";
z-index: 10;
--c:rgb(207, 207, 207);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation-light 5s infinite ease-in-out;
}
.booklist-heade-ul{
width: 60%;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 9999px;
position: relative;
left: 20%;
text-align: center;
}
.booklist-heade-ul ul{
width: 100%;
height: 100%;
display: flex;
align-items: center;
right: 5%;
}
.booklist-heade-ul li{
width: 100%;
text-align: center;
}
.booklist-heade-ul li a{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
border-radius: 9999px;
}
.booklist-heade-ul li a:hover{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
background-color: rgba(255,255,255,0.5);
}
.booklist-box{
position: relative;
width: 95%;
height: 90%;
left: 2.5%;
top: 2.5%;
border-radius: 200px;
display: flex;
justify-content: left;
align-items: start;
flex-wrap: wrap;
}
.booklist-subbox{
width: 18%;
height: 400px;
background-color: rgba(0, 0, 0, 0.2);
margin: 50px;
border-radius: 64px;
text-align: center;
flex: initial;;
}
.book-img{
position: relative;
border-radius: 64px 64px 100px 100px;
width: 100%;
height: 75%;
background-color: rgba(255,255,255,0.25);
background-position: center;
background-repeat: no-repeat;
}
.book-img:hover{
position: relative;
border-radius: 64px 64px 64px 64px;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.4);
background-position: center;
transform: scale(1.1);
background-repeat: no-repeat;
}
.book-name{
width: 100%;
height: 10%;
transform: translateY(-10px);
font-size: 32px;
color: rgba(255,255,255,0.9);
text-shadow: 0 0 16px rgba(255,255,255,0.3);
}
.book-press{
position: relative;
width: 100%;
height: auto;
font-size: 16px;
color: rgba(0, 0, 0, 0.4);
transform: translateY(0px);
}
.book-price{
color: rgba(255,255,255,0.9);
text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<%--判斷session中取的使用者名稱是否為空，若為空，則顯示去登入，--%>
<%-- 若不為空，則可以在session中取到使用者名稱,並且可以登出,登出後,使用者名稱不在顯示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<%--<div class="book-window">--%>
<%-- <div class="book-window-container">--%>
<%-- <div class="bookimg"><img src="image/book_img/santi_1.png" alt=""></div>--%>
<%-- <div class="bookcontent">--%>
<%-- <div id="bookname"><h1>書名</h1></div>--%>
<%-- <div id="author"><h2>作者</h2></div>--%>
<%-- <div id="press"><h3>出版社</h3></div>--%>
<%-- <div id="bookintro"><h2>簡介</h2><h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3> </div>--%>
<%-- <div class="price"> <h4>¥ 100.0</h4></div>--%>
<%-- <button class="button" type="button" id="addButton">--%>
<%-- <span class="button__text">加入購物車</span>--%>
<%-- <span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>--%>
<%-- </button>--%>
<%-- <button class="button" type="button" id="backButton">--%>
<%-- <span class="button__text">返回</span>--%>
<%-- <span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>--%>
<%-- </button>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</div>--%>
<div class="booklist-container">
<div class="booklist-header">
<div id="booklist-header-text" >書單</div>
<div class="booklist-heade-ul">
<ul>
<li><a href="">全部</a></li>
<li id="shop"><a href="cart.jsp">購物車</a> </li>
</ul>
</div>
</div>
<div class="booklist-box">
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<a href="detail.jsp?bookid=<%= p.getBookid() %>" class="booklist-subbox">
<img class="book-img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
cart.jsp
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="com.project02.project02.Cart" %>
<%@ page import="com.project02.project02.Book" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>購物車</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
border-radius: 64px;
}
.header ul li a{
color: rgba(0, 0, 0,0.7);
font-family: "zhanku";
font-size: 28px;
}
.cart-book-box{
position: relative;
background-color: rgba(255,255,255,0.2);
width: 90%;
left: 5%;
height: 300px;
margin: 50px;
font-family: "JetBrainsMono-Bold";
font-size: 20px;
display: flex;
border-radius: 26px;
}
.cart-book-box img{
position: relative;
object-fit: contain;
height: 80%;
top: 10%;
width: auto;
}
.cart-book-box p{
position: relative;
top: 25%;
width: 10%;
height: 50%;
margin: 10px;
font-size: 32px;
font-family: "JetBrainsMono-Bold";
text-align: center;
}
.cart-book-box img:hover{
transform: scale(1.24);
}
#cart-bar{
display: flex;
position: fixed;
bottom: 0;
width: 100%;
height: 7%;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
border-radius: 32px 32px 0px 0px;
text-align: end;
}
#sum-price{
position: relative;
height: 100%;
width: 30%;
bottom: 0;
top:20%;
font-size: 36px;
left: 50%;
text-align: right;
color: rgba(0,0,0,0.8);
text-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.button{
position: fixed;
z-index: 888;
width: 300px;
height: 100%;
right: 0;
bottom: 0;
font-size: 40px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(6px);
border: 0;
outline: none;
border-radius: 32px;
color: rgba(0,0,0,0.7);
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.button:hover{
background-image: linear-gradient(to top, rgba(183, 160, 245, 0.1) 0%, rgba(7, 181, 255, 0.1) 100%);
color: white;
text-shadow: 0 0 16px rgba(0,0,0,0.4);
}
#cart-header{
width: 100%;
height: 100px;
position: relative;
top: 45px;
float: left;
margin-right: 10px;
}
#cart-header ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: 30px;
}
#cart-header ul li{
display: inline-block;
margin-right: 110px;
font-family: "zhanku";
font-size: 28px;
left :25.5% ;
position: relative;
color: rgba(0,0,0,0.4);
user-select:none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="cart-header">
<ul>
<li>書名</li>
<li>書號</li>
<li>單價</li>
<li>數量</li>
<li>作者</li>
<li>出版社</li>
<li>總價</li>
</ul>
</div>
<%
//定義總共價格
double totalPrice = 0;
// 遍歷map, 前端顯示購物車商品
HashMap map = (HashMap)session.getAttribute("cart");
Iterator it = map.keySet().iterator();
while(it.hasNext()){
Object key = it.next();
Cart cartItem = (Cart)map.get(key);
Book p = cartItem.getP();
int sum = cartItem.getSum();
totalPrice +=p.getPrice()*sum;
%>
<div class="cart-book-box">
<img src="image/book_img/<%= p.getPic() %>.png" />
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-id"><%= p.getBookid()%></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<p class="book-number"><%=sum%></p>
<p class="book-author"><%= p.getAuthor()%></p>
<p class="book-press"><%= p.getPress()%></p>
<p class="book-totalPrice"> <%= p.getPrice()* sum%></p>
</div>
<%
}
%>
</div>
<div id="cart-bar">
<div id="sum-price">合計 <b>¥</b> <%=totalPrice%> </div>
<a href="doOrder" id="settle">
<button class="button" type="button" id="backButton">
結算
</button>
</a>
</div>
<a href="booklist.jsp" >返回</a>
</body>
</html>
detail.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2024/1/1
Time: 21:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<html>
<%
String idStr = request.getParameter("bookid");
if("".equals(idStr) || idStr == null){
response.sendRedirect("login.jsp");
}else{
int id = Integer.parseInt(request.getParameter("bookid"));
BookDaoImpl dao = new BookDaoImpl();
Book p = dao.findById(id);
%>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=p.getBookname()%> - <%=p.getAuthor()%></title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="book-window">
<div class="book-window-container">
<div class="bookimg"><img src="image/book_img/<%= p.getPic() %>.png" ></div>
<div class="bookcontent">
<div id="bookname"><h1><%= p.getBookname() %></h1></div>
<div id="author"><h2><%= p.getAuthor()%></h2></div>
<div id="press"><h3></h3><%= p.getPress()%></div>
<div id="bookintro"><h2>簡介</h2><h3><%= p.getIntro()%></h3> </div>
<div class="price"> <h4><b>¥</b> <%= p.getPrice() %></h4></div>
<a href="doCart.jsp?bookid=<%= p.getBookid() %>">
<button class="button" type="button" id="addButton">
<span class="button__text">加入購物車</span>
<span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>
</button>
</a>
<a href="booklist.jsp">
<button class="button" type="button" id="backButton">
<span class="button__text">返回</span>
<span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>
</button>
</a>
</div>
</div>
<%
}
%>
</body>
</html>
doCart.jsp
<%@ page language="java" import="dao.*,com.project02.project02.*,java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 1.獲得購物車 Map
// getAttribute的返回值型別是Object,需要向下轉型,
// 轉成你的userName型別的,簡單說就是存什麼,取出來還是什麼.
HashMap map = (HashMap) session.getAttribute("cart");
// 2.判斷購物車 Map是否存在,不存在則建立
if (map == null) {
map = new HashMap();
}
// 3.把產品新增到購物車
// 3.1 根據 id 查詢商品
String id = request.getParameter("bookid");
BookDaoImpl dao = new BookDaoImpl();
Book p = dao.findById(Integer.parseInt(id));
// 3.2判斷 Map 中是否由此商品 , 注意這裡id不加引號
Cart cart = (Cart) map.get(id);
// 有--> 把數量+1
// 無--> 把商品放入購物車 數量設定為1
if (cart != null) {
cart.setSum(cart.getSum() + 1);
} else {
cart = new Cart();
cart.setP(p); // 關鍵步驟
cart.setSum(1);
}
// 3.3 將產品加入map集合,id+""拼接成字串型
map.put(id, cart);
// out.print(map.size());
// 4.把集合儲存到session作用域
session.setAttribute("cart", map);
response.sendRedirect("cart.jsp");
%>
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖書售賣系統</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
h1{
font-size: 27px;
color: white;
height: 70px;
}
body{
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
padding: 0px 0px 150px 0px;
background-image: url("image/BG_index.jpg");
}
.container{
height: auto;
width: 100%;
}
.banner{
margin: 0;
width: 100%;
height: 500px;
text-align:center;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(5px);
}
#banner-box{
width: 80%;
height: 60%;
position: relative;
left: 10%;
top: 20%;
background-color: rgba(255,255,255,0.7);
border-radius: 120px;
--c: rgb(211, 211, 239);
box-shadow: 0 0 10px var(--c),
0 0 12px var(--c),
0 0 20px var(--c),
0 0 28px var(--c),
0 0 36px var(--c),
0 0 48px var(--c);
animation: glow-animation 2.6s infinite ease-in-out;
}
#banner-box h1{
height: 100%;
width: 100%;
text-align: center;
font-size: 120px;
font-family: "zhanku";
position: relative;
transform: translateY(25%);
--c: rgb(89, 210, 248);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation 2s infinite ease-in-out;
user-select: none;
}
.booklist h2{
color: white;
width: 100%;
height: 60px;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0));
backdrop-filter: blur(3px);
text-align: center;
font-size: 60px;
text-shadow: 3px -10px 16px rgba(0, 0, 0,0.5);
}
.booklist .response{
width: 33.3%;
height: 360px;
float: left;
text-align: center;
margin: 8px 0px 8px 0px;
}
.booklist .img{
width: auto;
height: 90%;
margin: 0 auto;
text-align: center;
background: lightblue;
border-radius: 16px ;
}
.booklist-foot{
text-align: end;
font-size: 24px;
}
.booklist-foot a{
color: white;
text-shadow: 3px -10px 32px black;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class = container>
<h1> </h1>
<div class="banner"><div id="banner-box"><h1>圖書售賣系統</h1></div></div>
<div class="booklist">
<h2>書單</h2>
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
int size =list.size();
if(size>6){
size=6;
}
for(int i=0;i<size;i++){
Book p = (Book)list.get(i);
%>
<a href="booklist.jsp" class="response" >
<img class="img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
<div class="booklist-foot"><a href="booklist.jsp">點此檢視更多圖書</a></div>
</div>
</div>
</body>
</html>
list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<li>
<a href="detail.jsp?bookid=<%= p.getBookid() %>">
<div class="book-box">
<img src="image/book_img/<%= p.getPic() %>.png" />
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
</div>
</a>
</li>
<%
}
%>
</body>
</html>
login.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2023/12/30
Time: 23:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>Login</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
.main {
display: none;
width: 40%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 22%;
left: 30%;
right: 30%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.form{
position: relative;
width: 80%;
height: 80%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.header-text{
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
}
.text-form{
transform: translateY(50px);
height: 100%;
}
input[type="submit"]:active,
button:active{
transform: scale(0.75);
transition: 0.3s ease-in-out;
}
input{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
font-size: 30px;
transition: all 0.4s;
background-color: rgba(255, 255, 255, 0.4);
box-sizing:border-box;
}
input::placeholder{
font-style:oblique;
text-align: center;
font-size: 25px;
color: rgba(0, 0, 0, 0.5);
}
.form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
input[type="password"]::-ms-reveal{
position: fixed;
}
input[type="password"]::-ms-clear{
position: relative;
}
input[type="submit"] {
background-color:rgba(219, 219, 219, 0.5);
font-style:oblique;
color: rgb(71, 71, 71);
font-size: 25px;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 23px;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
margin: 10px 0px 0px 0px;
}
button{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.4);
color: rgb(107, 107, 107);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
transition: all 0.4s ease-in-out;
}
button:hover{
background-color:rgba(51, 51, 51, 0.5);
color: rgb(241, 241, 241);
font-size: 32px;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease-in-out;
}
input[type="text"]:hover,
input[type="password"]:hover{
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 900px){
.main {
width: 70%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 25%;
left: 15%;
right: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 32px;
position: fixed;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
}
button{
width: 37%;
font-size: 28px;
margin: 0px 10px 0px 10px;
}
}
@media only screen and (max-width: 600px){
button{
width: 37%;
font-size: 24px;
font-weight: bold;
margin: 0px 10px 0px 10px;
}
}
/* 註冊介面 */
.register-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.register-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.register-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.register-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.register-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#conformPassword:focus{
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
/* 忘記密碼介面 */
.forget-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.forget-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
line-height: normal;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.forget-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.forget-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.forget-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#window-prompt{
display: none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示視窗 -->
<div id="window-prompt"><div id="prompt"></div></div>
<!-- 主視窗 -->
<div class="container">
<div class="main" id="mainForm">
<!-- 登入介面 -->
<div class="form" id="form">
<div class="header-text">LOGIN</div>
<div class="text-form">
<form id="loginform" action="doLogin" method="post">
<div class="one">
<input type="text" name="username" placeholder="USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="password" placeholder="PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input type="submit" value="OK" style=" text-align:center" onclick="return checkLoginForm()">
</div>
<div class="buttons">
<button id="go-register" type="button" >註冊</button>
<button id="go-forget" type="button">忘記</button>
</div>
</form>
</div>
</div>
<!-- 註冊介面 -->
<div class="register-form" id="register-form">
<div class="header-text">REGISTER</div>
<div class="text-form">
<form id="registerform" action="doRegister" method="post" >
<div class="one">
<input type="text" name="username" placeholder="NEW USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="newPassword" placeholder="NEW PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input id="conformPassword" type="password" name="confirmPassword" placeholder="CONFIRM PASSWORD" style=" text-align:center">
</div>
<div class="four">
<input class="email" type="text" name="email" placeholder="EMAIL" style=" text-align:center">
</div>
<input type="submit" value="OK" style=" text-align:center" id="reg-submit" onclick="return checkRegForm()">
<button id="back-register" type="button" >BACK</button>
</form>
</div>
</div>
<!-- 忘記密碼介面 -->
<div class="forget-form" id="forget-form">
<div class="header-text">FORGET</div>
<div class="text-form">
<div class="one">
<input type="text" name="username" placeholder="YOUR USERNAME" style=" text-align:center">
</div>
<div class="two">
<input class="email" type="text" name="email" placeholder="YOUR EMAIL" style=" text-align:center">
</div>
<div class="buttons">
<input type="submit" value="OK" style=" text-align:center;">
<button id="back-forget">BACK</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
// 按鈕
var registerBack_btn = document.getElementById("back-register");
var registerGo_btn = document.getElementById("go-register");
var forgetBack_btn = document.getElementById("back-forget");
var forgetGo_btn = document.getElementById("go-forget");
// 窗體
var form = document.getElementById("form");
var register_form = document.getElementById("register-form");
var forget_form = document.getElementById("forget-form");
var mainForm = document.getElementById("mainForm");
//載入介面時動畫
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 500);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime")
}, 1800);
}
//按鈕控制窗體漸變
registerBack_btn.onclick =function(){
register_form.classList.add("fadeout-effect");
setTimeout(function(){
register_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
register_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
registerGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
register_form.style.display = "block";
register_form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
register_form.classList.remove("fadein-effect")
},1260);
}
forgetBack_btn.onclick =function(){
forget_form.classList.add("fadeout-effect");
setTimeout(function(){
forget_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
forget_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
forgetGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
forget_form.style.display = "block";
forget_form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
forget_form.classList.remove("fadein-effect")
},1260);
}
//檢查登入表單
function checkRegForm(){
var registerform = document.getElementById('registerform');
var name = registerform.username.value;
var newpwd = registerform.newPassword.value;
var conpwd = registerform.confirmPassword.value;
var ema = registerform.email.value
if (name == "" || name == null) {
alert("請輸入賬號");
registerform.name.focus();
return false;
} else if (newpwd == "" || newpwd == null) {
alert("請輸入密碼");
registerform.newPassword.focus();
return false;
} else if (conpwd == "" || conpwd == null) {
alert("請確認密碼");
registerform.confirmPassword.focus();
return false;
}else if(ema == "" || ema == null){
alert("請輸入郵箱");
registerform.email.focus();
return false;
}else if(newpwd!=conpwd){
alert("兩次密碼輸入不一致，請重新輸入!");
registerform.confirmPassword.focus();
return false;
}
alert('註冊成功！');
return true;
}
//檢查登入表單
function checkLoginForm(){
var loginform = document.getElementById('loginform');
var name = loginform.username.value;
var pwd = loginform.password.value;
if (name == "" || name == null) {
alert("請輸入賬號");
loginform.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("請輸入密碼");
loginform.password.focus();
return false;
}
return true;
}
</script>
</html>
loginFail.jsp
<%--
Created by IntelliJ IDEA.
User: 14985
Date: 2023/12/30
Time: 23:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/prompt.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
<title>Login</title>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
overflow: hidden;
transition: 0.3s ease-in-out;
}
body{
background-color: lightgray;
height: 1000px;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_Login.jpg);
}
.header ul li a{
color: rgb(240, 240, 240);
}
.container{
width: 100%;
height: 100%;
}
.main {
display: none;
width: 40%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 22%;
left: 30%;
right: 30%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
border-radius: 32px;
position: fixed;
}
.form{
position: relative;
width: 80%;
height: 80%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.header-text{
font-family: "JetBrainsMono-Thin";
transform: translateY(-10px);
font-size: 60px;
color: rgb(112, 111, 111);
text-shadow: -5px 7px 8px rgba(0, 0, 0, 0.2);
}
.text-form{
transform: translateY(50px);
height: 100%;
}
input[type="submit"]:active,
button:active{
transform: scale(0.75);
transition: 0.3s ease-in-out;
}
input{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
font-size: 30px;
transition: all 0.4s;
background-color: rgba(255, 255, 255, 0.4);
box-sizing:border-box;
}
input::placeholder{
font-style:oblique;
text-align: center;
font-size: 25px;
color: rgba(0, 0, 0, 0.5);
}
.form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
input[type="password"]::-ms-reveal{
position: fixed;
}
input[type="password"]::-ms-clear{
position: relative;
}
input[type="submit"] {
background-color:rgba(219, 219, 219, 0.5);
font-style:oblique;
color: rgb(71, 71, 71);
font-size: 25px;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 23px;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
margin: 10px 0px 0px 0px;
}
button{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.4);
color: rgb(107, 107, 107);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
transition: all 0.4s ease-in-out;
}
button:hover{
background-color:rgba(51, 51, 51, 0.5);
color: rgb(241, 241, 241);
font-size: 32px;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease-in-out;
}
input[type="text"]:hover,
input[type="password"]:hover{
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 900px){
.main {
width: 70%;
height: 60%;
float: right;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
top: 25%;
left: 15%;
right: 15%;
z-index: 100;
box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.4);
border-radius: 32px;
position: fixed;
}
.buttons{
width: 100%;
height: 100px;
text-align:center;
}
button{
width: 37%;
font-size: 28px;
margin: 0px 10px 0px 10px;
}
}
@media only screen and (max-width: 600px){
button{
width: 37%;
font-size: 24px;
font-weight: bold;
margin: 0px 10px 0px 10px;
}
}
/* 註冊介面 */
.register-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.register-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.register-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.register-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.register-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
#conformPassword:focus{
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
/* 忘記密碼介面 */
.forget-form{
position: relative;
width: 80%;
height: 100%;
text-align: center;
left: 10%;
top: 10%;
display:none;
}
.forget-form input[type="submit"]{
border:0;
margin: 10px 0px 10px 0px;
outline:0;
border:none;
width: 80%;
height: 50px;
line-height: normal;
border-radius: 20px;
transition: all 0.3s ease-in-out;
background-color: rgba(255, 255, 255, 0.3);
color: rgba(0, 0, 0,0.8);
box-sizing:border-box;
font-family: "zhanku";
width: 38%;
font-size: 30px;
margin: 0px 10px 0px 10px;
font-style:oblique;
}
.forget-form input[type="submit"]:hover {
background-color:rgba(131, 131, 131, 0.2);
color: rgb(255, 255, 255);
font-weight: bold;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.forget-form input:focus::placeholder {
opacity: 0.2;
transition: all 0.2s ease-in-out;
font-size: 28px
}
.forget-form input:focus{
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<!-- 提示視窗 -->
<div id="window-prompt"><div id="prompt">登入失敗，請重試</div></div>
<!-- 主視窗 -->
<div class="container">
<div class="main" id="mainForm">
<!-- 登入介面 -->
<div class="form" id="form">
<div class="header-text">LOGIN</div>
<div class="text-form">
<form id="loginform" action="doLogin" method="post">
<div class="one">
<input type="text" name="username" placeholder="USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="password" placeholder="PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input type="submit" value="OK" style=" text-align:center" onclick="return checkLoginForm()">
</div>
<div class="buttons">
<button id="go-register" type="button" >註冊</button>
<button id="go-forget" type="button">忘記</button>
</div>
</form>
</div>
</div>
<!-- 註冊介面 -->
<div class="register-form" id="register-form">
<div class="header-text">REGISTER</div>
<div class="text-form">
<form id="registerform" action="doRegister" method="post" >
<div class="one">
<input type="text" name="username" placeholder="NEW USERNAME" style=" text-align:center">
</div>
<div class="two">
<input type="password" name="newPassword" placeholder="NEW PASSWORD" style=" text-align:center">
</div>
<div class="three">
<input id="conformPassword" type="password" name="confirmPassword" placeholder="CONFIRM PASSWORD" style=" text-align:center">
</div>
<div class="four">
<input class="email" type="text" name="email" placeholder="EMAIL" style=" text-align:center">
</div>
<input type="submit" value="OK" style=" text-align:center" id="reg-submit" onclick="return checkRegForm()">
<button id="back-register" type="button" >BACK</button>
</form>
</div>
</div>
<!-- 忘記密碼介面 -->
<div class="forget-form" id="forget-form">
<div class="header-text">FORGET</div>
<div class="text-form">
<div class="one">
<input type="text" name="username" placeholder="YOUR USERNAME" style=" text-align:center">
</div>
<div class="two">
<input class="email" type="text" name="email" placeholder="YOUR EMAIL" style=" text-align:center">
</div>
<div class="buttons">
<input type="submit" value="OK" style=" text-align:center;">
<button id="back-forget">BACK</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "text/javascript">
// 按鈕
var registerBack_btn = document.getElementById("back-register");
var registerGo_btn = document.getElementById("go-register");
var forgetBack_btn = document.getElementById("back-forget");
var forgetGo_btn = document.getElementById("go-forget");
// 窗體
var form = document.getElementById("form");
var register_form = document.getElementById("register-form");
var forget_form = document.getElementById("forget-form");
var mainForm = document.getElementById("mainForm");
var prompt_window = document.getElementById("window-prompt");
var prompt_content = document.getElementById("prompt");
//載入介面時動畫
window.onload = function() {
setTimeout(function() {
mainForm.style.display = "block";
mainForm.classList.add("fadein-effect-longTime");
}, 150);
setTimeout(function() {
form.style.display = "block";
prompt_window.style.display = "block";
form.classList.add("fadein-effect-longTime");
}, 700);
setTimeout(function() {
mainForm.classList.remove("fadein-effect-longTime");
form.classList.remove("fadein-effect-longTime");
prompt_window.classList.add("fadeout-effect");
}, 2000);
}
//按鈕控制窗體漸變
registerBack_btn.onclick =function(){
register_form.classList.add("fadeout-effect");
setTimeout(function(){
register_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
register_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
registerGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
register_form.style.display = "block";
register_form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
register_form.classList.remove("fadein-effect")
},1260);
}
forgetBack_btn.onclick =function(){
forget_form.classList.add("fadeout-effect");
setTimeout(function(){
forget_form.style.display = "none";
},620);
setTimeout(function(){
form.style.display = "block";
form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
forget_form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
form.classList.remove("fadein-effect")
},1260);
}
forgetGo_btn.onclick = function(){
form.classList.add("fadeout-effect");
setTimeout(function(){
form.style.display = "none";
},620);
setTimeout(function(){
forget_form.style.display = "block";
forget_form.classList.add("fadein-effect");
},640);
//移除漸變類
setTimeout(function(){
form.classList.remove("fadeout-effect")
},660);
setTimeout(function(){
forget_form.classList.remove("fadein-effect")
},1260);
}
//檢查登入表單
function checkRegForm(){
var registerform = document.getElementById('registerform');
var name = registerform.username.value;
var newpwd = registerform.newPassword.value;
var conpwd = registerform.confirmPassword.value;
var ema = registerform.email.value
if (name == "" || name == null) {
alert("請輸入賬號");
registerform.name.focus();
return false;
} else if (newpwd == "" || newpwd == null) {
alert("請輸入密碼");
registerform.newPassword.focus();
return false;
} else if (conpwd == "" || conpwd == null) {
alert("請確認密碼");
registerform.confirmPassword.focus();
return false;
}else if(ema == "" || ema == null){
alert("請輸入郵箱");
registerform.email.focus();
return false;
}else if(newpwd!=conpwd){
alert("兩次密碼輸入不一致，請重新輸入!");
registerform.confirmPassword.focus();
return false;
}
alert('註冊成功！');
return true;
}
//檢查登入表單
function checkLoginForm(){
var loginform = document.getElementById('loginform');
var name = loginform.username.value;
var pwd = loginform.password.value;
if (name == "" || name == null) {
alert("請輸入賬號");
loginform.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("請輸入密碼");
loginform.password.focus();
return false;
}
return true;
}
</script>
</html>
message.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
@font-face{
font-family: 'sao';
src : url(font/胡曉波騷包體.otf);
}
@font-face{
font-family: 'mao';
src : url(font/貓啃什錦黑.otf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_index.jpg);
overflow-y: hidden;
padding: 0px 0px 150px 0px;
}
.header ul li a{
color: rgb(253, 253, 253);
}
#msg-board{
height: 100%;
width: 80%;
position: relative;
left: 10%;
top: 100px;
background-color: rgba(255,255,255,0.3);
border-radius: 128px;
}
#msg-board #msg-header{
width: 100%;
height: 100px;
font-size: 70px;
font-family: "zhanku";
text-align: center;
position: relative;
top: 15px;
color: rgba(0,0,0,0.8);
text-shadow: 0 5px 12px rgba(0,0,0,0.3);
}
.msg-box{
height: 400px;
width: 60%;
background-color: rgba(255,255,255,0.3);
border-radius: 64px;
position: relative;
left: 20%;
margin: 40px 0px 40px 0px;
overflow-y: hidden;
}
.msg-box .msg-content{
height: 50%;
width: 80%;
position: relative;
left: 10%;
font-size: 40px;
text-align: center;
font-family: "sao";
top: 20%;
color: rgba(0,0,0,0.7);
text-shadow: 0 0 12px rgba(255,255,255,0.8);
}
.msg-box .footer{
height:30%;
width: 50%;
position: relative;
top: 30%;
left: 35%;
font-family: "mao";
font-size: 30px;
text-align: right;
color: rgba(0,0,0,0.4);
text-shadow: 0 5px 8px rgba(0,0,0,0.3);
}
#msg-input{
height: 300px;
width: 60%;
background-color: rgba(255,255,255,0.3);
border-radius: 64px;
position: relative;
left: 20%;
margin: 40px 0px 40px 0px;
overflow-y: hidden;
}
form{
width: 100%;
height: 100%;
}
input::placeholder{
text-align: center;
font-size: 16px;
transform: translateY(-3px);
}
input{
height: 200px;
width: 70%;
position: relative;
left: 15%;
text-align: center;
text-wrap:inherit;
border:none;
outline: none;
background-color: rgba(255,255,255,0.3);
display: flex;
top: 15px;
border-radius: 64px;
font-size: 30px;
}
#msg-footer{
position: relative;
height: 30px;
width: 40%;
left: 30%;
}
input[type="text"]:hover{
background-color: rgba(0,0,0,0.3);
}
input:focus{
border: none;
outline: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
input[type="submit"]{
border: none;
position: relative;
width: 30%;
height: 40px;
margin: 0px 20px 0px 20px;
border-radius: 64px;
font-size: 24px;
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
display:block;
left: 32.5%;
top: 20px;
}
input[type="submit"]:hover{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.1);
}
input[type="submit"]:active{
color: rgb(0, 0, 0);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
background-color: rgb(252, 252, 252);
outline-style: none;
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div id="msg-board">
<div id="msg-header">留言板</div>
<div id="msg-input">
<form action="doMessage" method="post">
<input type="text" name="msg" id="msg" placeholder="留言內容">
<input type="text" name="footer" id="msg-footer" placeholder="註名">
<input type="submit" id="submit" value="留言">
</form>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM message");
while (rs.next()) {
//獲取每一行的資料
String msg = rs.getString("msg");
String footer = rs.getString("footer");
%>
<div class="msg-box">
<div class="msg-content"><%=msg%></div>
<div class="footer">- <%=footer%> </div>
</div>
<%
}
//關閉結果集，預處理語句和資料庫連線
rs.close();
stmt.close();
conn.close();
%>
</div>
</body>
</html>
orderSuccess.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下單成功</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_order.jpg);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
top: 10%;
border-radius: 64px;
}
#container-header{
text-align: center;
font-size: 70px;
font-family: "zhanku";
color: rgba(0,0,0,0.9);
position: relative;
top:4%;
height: 100px;
width: 100%;
}
.container .header-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.5);
text-align: center;
border-radius: 64px;
box-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.container .header-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .header-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 28px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.2);
text-align: center;
border-radius: 40px;
margin: 40px 0px 0px 0px;
}
.container .order-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .order-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 22px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box:hover{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.container .order-box:hover li{
color: rgba(255,255,255,0.5);
text-shadow: 0 5px 12px rgba(255,255,255,0.5);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="container-header">訂單詳情</div>
<div class="header-box">
<ul>
<li>訂單號</li>
<li>書號</li>
<li>書名</li>
<li>地址</li>
<li>電話</li>
<li>數量</li>
<li>購買時間</li>
</ul>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM orders WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
//獲取每一行的資料
int orderid = rs.getInt("orderid");
String bookname = rs.getString("bookname");
String address = rs.getString("address");
String phone = rs.getString("phone");
int bookid = rs.getInt("bookid");
int booknumber = rs.getInt("booknumber");
String buytime = rs.getString("buytime");
%>
<div class="order-box">
<ul>
<li><%=orderid%></li>
<li><%=bookid%></li>
<li><%=bookname%></li>
<li><%=address%></li>
<li><%=phone%></li>
<li><%=booknumber%></li>
<li><%=buytime%></li>
</ul>
</div>
<%
}
//關閉結果集，預處理語句和資料庫連線
rs.close();
stmt.close();
conn.close();
%>
</div>
</body>
</html>
session.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登出</title>
</head>
<body>
<%
session.invalidate(); // 清空session
// 重定向
response.sendRedirect("account.jsp");
%>
</body>
</html>
- 執行結果截圖
index.jsp
login.jsp
account.jsp
booklist.jsp
書本二級介面
cart.jsp
3.主要問題
①發現購物車結算後原購物車的內容並沒有清空。
②除了購物車結算頁面和直接檢視資料庫以外沒有辦法檢視訂單記錄。
4.改進
在結算成功後清除購物車的session：修改後的orderSuccess.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下單成功</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
overflow-x: hidden;
outline: 0;
}
.header ul li a{
color: rgb(97, 156, 232);
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 6px;
}
body{
height: 100%;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_order.jpg);
display: flex;
}
.container{
position: relative;
width: 90%;
height: auto;
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(6px);
left: 5%;
top: 10%;
border-radius: 64px;
}
#container-header{
text-align: center;
font-size: 70px;
font-family: "zhanku";
color: rgba(0,0,0,0.9);
position: relative;
top:4%;
height: 100px;
width: 100%;
}
.container .header-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.5);
text-align: center;
border-radius: 64px;
box-shadow: 0 0 10px rgba(255,255,255,0.45);
}
.container .header-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .header-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 28px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box{
width: 80%;
height: 100px;
position: relative;
left: 10%;
top: 45px;
float: left;
background-color: rgba(255,255,255,0.2);
text-align: center;
border-radius: 40px;
margin: 40px 0px 0px 0px;
}
.container .order-box ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
user-select: none;
}
.container .order-box ul li{
display: inline-block;
font-family: "zhanku";
font-size: 22px;
position: relative;
color: rgba(0,0,0,0.6);
width: 13%;
height: 60%;
top: 40%;
text-shadow: 0 5px 10px rgba(0,0,0,0.2);
user-select: text;
}
.container .order-box:hover{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.container .order-box:hover li{
color: rgba(255,255,255,0.5);
text-shadow: 0 5px 12px rgba(255,255,255,0.5);
}
</style>
<body>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<div class="container">
<div id="container-header">訂單詳情</div>
<div class="header-box">
<ul>
<li>訂單號</li>
<li>書號</li>
<li>書名</li>
<li>地址</li>
<li>電話</li>
<li>數量</li>
<li>購買時間</li>
</ul>
</div>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "zhouzhou");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM orders WHERE account = '"+session.getAttribute("username")+"'");
while (rs.next()) {
//獲取每一行的資料
int orderid = rs.getInt("orderid");
String bookname = rs.getString("bookname");
String address = rs.getString("address");
String phone = rs.getString("phone");
int bookid = rs.getInt("bookid");
int booknumber = rs.getInt("booknumber");
String buytime = rs.getString("buytime");
%>
<div class="order-box">
<ul>
<li><%=orderid%></li>
<li><%=bookid%></li>
<li><%=bookname%></li>
<li><%=address%></li>
<li><%=phone%></li>
<li><%=booknumber%></li>
<li><%=buytime%></li>
</ul>
</div>
<%
}
//關閉結果集，預處理語句和資料庫連線
rs.close();
stmt.close();
conn.close();
session.removeAttribute("cart");///////////////////////修改的地方
%>
</div>
</body>
</html>
把booklist.jsp書單頁面中的無用按鈕“全部”改為“歷史訂單”並指定跳轉到orderlList.jsp：orderList.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.BookDaoImpl"%>
<%@ page import="com.project02.project02.Book"%>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>書單</title>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/effect.css">
<link rel="stylesheet" href="css/addButton.css">
<script type="text/javascript" src="js/header-rect.js" defer></script>
</head>
<style>
@font-face{
font-family: 'JetBrainsMono-Bold';
src : url(font/JetBrainsMono-Bold.ttf);
}
@font-face{
font-family: 'JetBrainsMono-Thin';
src : url(font/JetBrainsMono-Thin.ttf);
}
@font-face{
font-family: 'zhanku';
src : url(font/zhanku.ttf);
}
*{
transition: all 0.3s ease-in-out;
}
body{
height: 2000px;
width: 100%;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position:center;
background-image: url(image/BG_booklist-2.webp);
}
.header ul li a{
color: rgb(199, 198, 198);
}
.booklist-container{
width: 80%;
top:150px;
height: 1800px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter:blur(4px);
position: relative;
left: 10%;
border-radius: 256px;
}
#booklist-header-text{
text-align: center;
height: 30px;
color: rgba(255,255,255,0.9);
font-size: 120px;
transform: translateY(-70px);
font-family: "zhanku";
z-index: 10;
--c:rgb(207, 207, 207);
text-shadow: 0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c),
0 0 160px var(--c),
0 0 320px var(--c);
animation: glow-animation-light 5s infinite ease-in-out;
}
.booklist-heade-ul{
width: 60%;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 9999px;
position: relative;
left: 20%;
text-align: center;
}
.booklist-heade-ul ul{
width: 100%;
height: 100%;
display: flex;
align-items: center;
right: 5%;
}
.booklist-heade-ul li{
width: 100%;
text-align: center;
}
.booklist-heade-ul li a{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
border-radius: 9999px;
}
.booklist-heade-ul li a:hover{
color: rgb(122, 89, 241);
font: 100 40px "zhanku";
display: block;
width: 100%;
line-height: 70px;
background-color: rgba(255,255,255,0.5);
}
.booklist-box{
position: relative;
width: 95%;
height: 90%;
left: 2.5%;
top: 2.5%;
border-radius: 200px;
display: flex;
justify-content: left;
align-items: start;
flex-wrap: wrap;
}
.booklist-subbox{
width: 18%;
height: 400px;
background-color: rgba(0, 0, 0, 0.2);
margin: 50px;
border-radius: 64px;
text-align: center;
flex: initial;;
}
.book-img{
position: relative;
border-radius: 64px 64px 100px 100px;
width: 100%;
height: 75%;
background-color: rgba(255,255,255,0.25);
background-position: center;
background-repeat: no-repeat;
}
.book-img:hover{
position: relative;
border-radius: 64px 64px 64px 64px;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.4);
background-position: center;
transform: scale(1.1);
background-repeat: no-repeat;
}
.book-name{
width: 100%;
height: 10%;
transform: translateY(-10px);
font-size: 32px;
color: rgba(255,255,255,0.9);
text-shadow: 0 0 16px rgba(255,255,255,0.3);
}
.book-press{
position: relative;
width: 100%;
height: auto;
font-size: 16px;
color: rgba(0, 0, 0, 0.4);
transform: translateY(0px);
}
.book-price{
color: rgba(255,255,255,0.9);
text-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.book-window{
position: fixed;
z-index: 999;
width: 60%;
height: 80%;
top: 16%;
left: 20%;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
border-radius: 128px;
}
.book-window-container{
position: relative;
width: 98%;
height: 98%;
top: 1%;
left: 1%;
border-radius: 128px;
display: flex;
font-family: "zhanku";
}
.book-window-container h1{
font-size: 40px;
text-align: center;
}
.book-window-container h2{
font-size: 28px;
text-align: center;
}
.book-window-container h3{
font-size: 20px;
text-align: center;
word-wrap: break-word;
}
.book-window-container .bookimg{
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.book-window-container .bookimg img{
position: relative;
width: 100%;
height: auto;
top: 19.5%;
}
.book-window-container .bookcontent{
width: 55%;
height:100%;
background:rgba(0, 0, 0, 0);
}
.book-window-container .bookcontent #bookname{
position: relative;
top: 10px;
height: 60px;
text-align: center;
}
.book-window-container .bookcontent #author{
position: relative;
height: 30px;
text-align: center;
}
.book-window-container .bookcontent #press{
position: relative;
height: 20px;
text-align: center;
}
.book-window-container .bookcontent #bookintro{
position: relative;
top: 10px;
left: 5%;
width: 90%;
height: 72%;
text-align: center;
background-color: rgba(255,255,255,0);
}
.book-window-container .bookcontent #addButton{
position: fixed;
bottom: 5%;
right: 24%;
}
.book-window-container .bookcontent #backButton{
position: fixed;
bottom: 5%;
right: 8%;
}
.book-window-container .bookcontent .price {
font-size: 48px;
color: rgba(0, 0, 0, 0.9);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
position: fixed;
bottom: 4%;
right: 45%;
}
</style>
<body>
<%--判斷session中取的使用者名稱是否為空，若為空，則顯示去登入，--%>
<%-- 若不為空，則可以在session中取到使用者名稱,並且可以登出,登出後,使用者名稱不在顯示--%>
<%
if(session.getAttribute("username") != null) {
session.getAttribute("username");
}
else {
response.sendRedirect("login.jsp");
}
%>
<div class = header id="header">
<ul>
<li><a href="index.jsp"><div class="glow-text">首頁</div></a></li>
<li><a href="booklist.jsp">書單</a></li>
<li><a href="message.jsp">留言</a></li>
<li><a href="account.jsp">使用者</a></li>
<div class="header-box"></div>
</ul>
</div>
<%--<div class="book-window">--%>
<%-- <div class="book-window-container">--%>
<%-- <div class="bookimg"><img src="image/book_img/santi_1.png" alt=""></div>--%>
<%-- <div class="bookcontent">--%>
<%-- <div id="bookname"><h1>書名</h1></div>--%>
<%-- <div id="author"><h2>作者</h2></div>--%>
<%-- <div id="press"><h3>出版社</h3></div>--%>
<%-- <div id="bookintro"><h2>簡介</h2><h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3> </div>--%>
<%-- <div class="price"> <h4>¥ 100.0</h4></div>--%>
<%-- <button class="button" type="button" id="addButton">--%>
<%-- <span class="button__text">加入購物車</span>--%>
<%-- <span class="button__icon"><svg class="svg" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg></span>--%>
<%-- </button>--%>
<%-- <button class="button" type="button" id="backButton">--%>
<%-- <span class="button__text">返回</span>--%>
<%-- <span class="button__icon"><svg t="1703929107643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="25" height="25"><path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984a48 48 0 0 1 0-67.872l351.968-352a48 48 0 1 1 67.872 67.872L387.872 512.032l318.016 318.016A48 48 0 0 1 671.968 912z" fill="#333333" p-id="4298"></path></svg></span>--%>
<%-- </button>--%>
<%-- </div>--%>
<%-- </div>--%>
<%--</div>--%>
<div class="booklist-container">
<div class="booklist-header">
<div id="booklist-header-text" >書單</div>
<div class="booklist-heade-ul">
<ul>
<li><a href="orderList.jsp">歷史訂單</a></li>
<li id="shop"><a href="cart.jsp">購物車</a> </li>
</ul>
</div>
</div>
<div class="booklist-box">
<%
BookDaoImpl dao = new BookDaoImpl();
ArrayList list = dao.findAll();
for(int i=0;i<list.size();i++){
Book p = (Book)list.get(i);
%>
<a href="detail.jsp?bookid=<%= p.getBookid() %>" class="booklist-subbox">
<img class="book-img" src="image/book_img/<%=p.getPic()%>.png" alt="">
<p class="book-name"><%= p.getBookname() %></p>
<p class="book-price">
<b>¥</b>
<strong><%= p.getPrice() %></strong>
</p>
<div class="book-press"><%= p.getPress()%></div>
</a>
<%
}
%>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
5.總結
逆向軟體工程開發的難點我認為是看程式碼、學程式碼和理解程式碼。這次拿了室友的專案程式碼來之後，先是研究著把他的專案配置到自己電腦上花費了很多時間，然後又花了很多時間理清楚這套系統的來龍去脈和理解了主要的程式碼，發現了一個bug和一個可以改進的地方，從而讓‘使用者’能夠更好的使用這個圖書售賣系統。