Book Management System JavaWeb
1 总体设计分析
图书管理系统需要再次迎来升级，现在，我们可以直接访问网站来操作图书，这里我们给大家提供一个前端模板直接编写，省去编写前端的时间。
本次实战使用到的框架：Servlet+Mybatis+Thymeleaf
注意在编写的时候，为了使得整体的代码简洁高效，我们严格遵守三层架构模式：
就是说，表示层只做UI，包括接受请求和相应，给模板添加上下文，以及进行页面的解析，最后响应给浏览器；业务逻辑层才是用于进行数据处理的地方，表示层需要向逻辑层索要数据，才能将数据添加到模板的上下文中；数据访问层一般就是连接数据库，包括增删改查等基本的数据库操作，业务逻辑层如果需要从数据库取数据，就需要向数据访问层请求数据。
当然，贯穿三大层次的当属实体类了，我们还需要创建对应的实体类进行数据的封装，以便于在三层架构中进行数据传递。
接下来，明确我们要实现的功能，也就是项目需求：
- 图书管理员的登陆和退出（只有登陆之后才能进入管理页面）
- 图书的列表浏览（包括书籍是否被借出的状态也要进行显示）以及图书的添加和删除
- 学生的列表浏览
- 查看所有的借阅列表，添加借阅信息
2 登录和拦截
选中的几个都删掉.
然后添加依赖:
添加前端模版
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->
<head>
<title>Book Management System Login</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/auth.css">
</head>
<body>
<div class="ad-auth-wrapper">
<div class="ad-auth-box">
<div class="row align-items-center">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="ad-auth-img">
<img src="static/picture/auth-img1.png" alt="">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="ad-auth-content">
<form method="post" action="login">
<h2><span class="primary">Hello,</span>Welcome!</h2>
<p th:unless="${loginFailure}">Please Enter Your Details Below to Continue</p>
<p th:if="${loginFailure}" style="color: red">Your username or password is wrong</p>
<div class="ad-auth-form">
<div class="ad-auth-feilds mb-30">
<input type="text" placeholder="Username" class="ad-input" name="username">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1 v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5 c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3 c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95 c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4 c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
<div class="ad-auth-feilds">
<input type="password" placeholder="Password" class="ad-input" name="password">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5 s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1 c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6 c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5 S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5 S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
</div>
<div class="ad-other-feilds">
<div class="ad-checkbox">
<label>
<input type="checkbox" name="remember-me" class="ad-checkbox">
<span>Remember Me</span>
</label>
</div>
<a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
</div>
<div class="ad-auth-btn">
<button class="ad-btn ad-login-member">Login</button>
</div>
<p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
</form>
</div>
</div>
</div>
<div class="ad-notifications ad-error">
<p><span>Duhh!</span>Something Went Wrong</p>
</div>
</div>
</div>
</body>
</html>
LoginServlet.java:
package com.book.servlet;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
ThymeleafUtil.process("login.html", new Context(), response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
}
}
点击登录后应该会跳转到空白的页面.
MainFilter.java:
package com.book.filter;
import com.book.entity.User;
import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpFilter;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import java.io.IOException;
@WebFilter("/*")
public class MainFilter extends HttpFilter {
@Override
protected void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException {
// Your code here
String url = request.getRequestURI().toString();
if (!url.contains("/static/") && !url.endsWith("login")){
HttpSession session = request.getSession();
User user = (User) session.getAttribute("user");
if (user == null){
response.sendRedirect("login");
return;
}
}
chain.doFilter(request, response);
}
}
配置mybatis:
mybatis-config.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/book_management"/>
<property name="username" value="root"/>
<property name="password" value="Eve123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper class="com.book.dao.UserMapper"/>
</mappers>
</configuration>
UserMapper.java:
package com.book.dao;
import com.book.entity.User;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
public interface UserMapper {
@Select("select * from admin where username = #{username} and password = #{password}")
User getUser(@Param("username") String username, @Param("password") String password);
}
UserService:
package com.book.service;
import jakarta.servlet.http.HttpSession;
public interface UserService {
boolean auth(String username, String password, HttpSession session);
}
UserServiceImpl.java:
package com.book.service.impl;
import com.book.dao.UserMapper;
import com.book.entity.User;
import com.book.service.UserService;
import com.book.utils.MybatisUtil;
import jakarta.servlet.http.HttpSession;
import org.apache.ibatis.session.SqlSession;
public class UserServiceImpl implements UserService {
@Override
public boolean auth(String username, String password, HttpSession session) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
User user = userMapper.getUser(username, password);
if (user == null){
return false;
}
session.setAttribute("user", user);
return true;
}
}
}
LoginServlet.java:
package com.book.servlet;
import com.book.service.UserService;
import com.book.service.impl.UserServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
UserService service;
@Override
public void init() throws ServletException {
service = new UserServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
Context context = new Context();
if (request.getSession().getAttribute("login-failure") != null) {
context.setVariable("loginFailure", true);
request.getSession().removeAttribute("login-failure");
}
ThymeleafUtil.process("login.html", context, response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
String username = request.getParameter("username");
String password = request.getParameter("password");
String remember = request.getParameter("remember-me");
if (service.auth(username, password, request.getSession())) {
response.getWriter().write("Login success");
} else {
request.getSession().setAttribute("login-failure", new Object());
this.doGet(request, response);
}
}
}
ThymeleafUtil.java:
package com.book.utils;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.IContext;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;
import java.io.Writer;
public class ThymeleafUtil {
private static final TemplateEngine engine;
static {
engine = new TemplateEngine();
ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
engine.setTemplateResolver(resolver);
}
public static void process(String template, IContext context, Writer writer) {
engine.process(template, context, writer);
}
}
3 管理页面框架搭建
indexServlet.java:
package com.book.servlet;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
ThymeleafUtil.process("index.html", new Context(), response.getWriter());
}
}
LoginSerlvet.java:
package com.book.servlet;
import com.book.service.UserService;
import com.book.service.impl.UserServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
UserService service;
@Override
public void init() throws ServletException {
service = new UserServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
Context context = new Context();
if (request.getSession().getAttribute("login-failure") != null) {
context.setVariable("loginFailure", true);
request.getSession().removeAttribute("login-failure");
}
if (request.getSession().getAttribute("user") != null) {
response.sendRedirect("index");
return;
}
ThymeleafUtil.process("login.html", context, response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
String username = request.getParameter("username");
String password = request.getParameter("password");
String remember = request.getParameter("remember-me");
if (service.auth(username, password, request.getSession())) {
response.sendRedirect("index");
} else {
request.getSession().setAttribute("login-failure", new Object());
this.doGet(request, response);
}
}
}
If happen something wrong, try clean and then restart again.
?
不同浏览器打开颜色不一样
可能font color 标签
User.java:
package com.book.entity;
import lombok.Data;
@Data
public class User {
int id;
String username;
String nickname;
String password;
}
LogoutServlet.java:
package com.book.servlet.auth;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
request.getSession().removeAttribute("user");
response.sendRedirect("login");
}
}
Delete something we don't need.
books.html:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->
<head>
<title>Library Management System</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/icofont.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" id="theme-change" type="text/css" href="">
</head>
<body>
<div class="loader">
<div class="spinner">
<img src="static/picture/loader.gif" alt="">
</div>
</div>
<!-- Main Body -->
<div class="page-wrapper">
<!-- Header Start -->
<div th:replace="header.html :: title"></div>
<!-- Sidebar Start -->
<aside class="sidebar-wrapper">
<div class="side-menu-wrap">
<ul class="main-menu">
<li>
<a href="index" >
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="menu-text">
Loan management
</span>
</a>
</li>
<li>
<a href="books" class="active">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="menu-text">
Book management
</span>
</a>
</li>
<li>
<a href="students">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="menu-text">
Student management
</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Container Start -->
<div class="page-wrapper">
<div class="main-content">
<!-- Page Title Start -->
<div class="row">
<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-title-wrapper">
<div class="page-title-box ad-title-box-use">
<h4 class="page-title">Orders</h4>
</div>
<div class="ad-breadcrumb">
<ul>
<li>
<div class="ad-user-btn">
<input class="form-control" type="text" placeholder="Search Here..." id="text-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
s-17-7.626-17-17S14.61,6,23.984,6z"></path>
</svg>
</div>
</li>
<li>
<div class="add-group">
<a class="ad-btn">Add New Order</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Table Start -->
<div class="row">
<!-- Styled Table Card-->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card table-card">
<div class="card-header pb-0">
<h4>Orders List</h4>
</div>
<div class="card-body">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1"></label>
</div>
</th>
<th>Order ID</th>
<th>Billing Name</th>
<th>Date</th>
<th>Total</th>
<th>Payment Status</th>
<th>Payment Method</th>
<th>View Details</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2"></label>
</div>
</td>
<td>#JH2033</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">Emily Arnold</span>
</span>
</td>
<td>22/06/2021</td>
<td>$600</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-paypal"></i>
<span class="ml-2">Paypal</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3"></label>
</div>
</td>
<td>#MK4433</td>
<td>
<span class="img-thumb ">
<img src="static/picture/4.jpg" alt=" ">
<span class="ml-2 ">Mark Doe</span>
</span>
</td>
<td>14/07/2021</td>
<td>$700</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-visa"></i>
<span class="ml-2">Visa</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox4" type="checkbox">
<label for="checkbox4"></label>
</div>
</td>
<td>#MD4578</td>
<td>
<span class="img-thumb">
<img src="static/picture/7.jpg" alt=" ">
<span class="ml-2 ">Mark Smith</span>
</span>
</td>
<td>28/08/2021</td>
<td>$800</td>
<td>
<label class="mb-0 badge badge-danger" title="" data-original-title="Pending">Cancel</label>
</td>
<td>
<span class="img-thumb">
<i class="fas fa-credit-card"></i>
<span class="ml-2">Credit Card</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox5" type="checkbox">
<label for="checkbox5"></label>
</div>
</td>
<td>#DD1048</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">Mike Wood</span>
</span>
</td>
<td>13/04/2021</td>
<td>$880</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-mastercard"></i>
<span class="ml-2">Mastercard</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox6" type="checkbox">
<label for="checkbox6"></label>
</div>
</td>
<td>#JH2033</td>
<td>
<span class="img-thumb ">
<img src="static/picture/3.jpg" alt=" ">
<span class="ml-2 ">Emily Arnold</span>
</span>
</td>
<td>22/06/2021</td>
<td>$600</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-paypal"></i>
<span class="ml-2">Paypal</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox7" type="checkbox">
<label for="checkbox7"></label>
</div>
</td>
<td>#MK4433</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">John Doe</span>
</span>
</td>
<td>14/07/2021</td>
<td>$700</td>
<td>
<label class="mb-0 badge badge-danger" title="" data-original-title="Pending">Cancel</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-visa"></i>
<span class="ml-2">Visa</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox8" type="checkbox">
<label for="checkbox8"></label>
</div>
</td>
<td>#MD4578</td>
<td>
<span class="img-thumb ">
<img src="static/picture/7.jpg" alt=" ">
<span class="ml-2 ">Mark Smith</span>
</span>
</td>
<td>28/08/2021</td>
<td>$800</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fas fa-credit-card"></i>
<span class="ml-2">Credit Card</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox9" type="checkbox">
<label for="checkbox9"></label>
</div>
</td>
<td>#DD1048</td>
<td>
<span class="img-thumb ">
<img src="static/picture/4.jpg" alt=" ">
<span class="ml-2 ">Mike Wood</span>
</span>
</td>
<td>13/04/2021</td>
<td>$880</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-mastercard"></i>
<span class="ml-2">Mastercard</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-right pt-2">
<nav class="d-inline-block">
<ul class="pagination mb-0 ">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0);" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active "><a class="page-link " href="javascript:void(0); ">1</a></li>
<li class="page-item ">
<a class="page-link " href="javascript:void(0); ">2</a>
</li>
<li class="page-item "><a class="page-link " href="javascript:void(0); ">3</a></li>
<li class="page-item ">
<a class="page-link " href="javascript:void(0); "><i class="fas fa-chevron-right "></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="ad-footer-btm">
<p>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
</div>
<!-- Script Start -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/apexcharts.min.js"></script>
<script src="static/js/control-chart-apexcharts.js"></script>
<!-- Page Specific -->
<script src="static/js/nice-select.min.js"></script>
<!-- Custom Script -->
<script src="static/js/custom.js"></script>
</body>
</html>
header.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header class="header-wrapper main-header" th:fragment="title">
<div class="header-inner-wrapper">
<div class="logo-wrapper">
<a href="" class="admin-logo">
<img src="static/picture/logo.png" alt="">
</a>
</div>
<div class="header-right">
<div class="header-left">
<div class="header-links">
<a href="javascript:void(0);" class="toggle-btn">
<span></span>
</a>
</div>
</div>
<div class="header-controls">
<div class="user-info-wrapper header-links">
<a href="javascript:void(0);" class="user-info">
<img src="static/picture/user.jpg" alt="" class="user-img">
<div class="blink-animation">
<span class="blink-circle"></span>
<span class="main-circle"></span>
</div>
</a>
<div class="user-info-box">
<div class="drop-down-header">
<h4 th:text="${nickname}"></h4>
<p>Welcome to library management system!</p>
</div>
<ul>
<li>
<a href="logout">
<i class="fas fa-sign-out-alt"></i> logout
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
header.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header class="header-wrapper main-header" th:fragment="title">
<div class="header-inner-wrapper">
<div class="logo-wrapper">
<a href="" class="admin-logo">
<img src="static/picture/logo.png" alt="">
</a>
</div>
<div class="header-right">
<div class="header-left">
<div class="header-links">
<a href="javascript:void(0);" class="toggle-btn">
<span></span>
</a>
</div>
</div>
<div class="header-controls">
<div class="user-info-wrapper header-links">
<a href="javascript:void(0);" class="user-info">
<img src="static/picture/user.jpg" alt="" class="user-img">
<div class="blink-animation">
<span class="blink-circle"></span>
<span class="main-circle"></span>
</div>
</a>
<div class="user-info-box">
<div class="drop-down-header">
<h4 th:text="${nickname}"></h4>
<p>Welcome to library management system!</p>
</div>
<ul>
<li>
<a href="logout">
<i class="fas fa-sign-out-alt"></i> logout
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
index.html:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->
<head>
<title>Library Management System</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/icofont.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" id="theme-change" type="text/css" href="">
</head>
<body>
<div class="loader">
<div class="spinner">
<img src="static/picture/loader.gif" alt="">
</div>
</div>
<!-- Main Body -->
<div class="page-wrapper">
<!-- Header Start -->
<div th:replace="header.html :: title"></div>
<!-- Sidebar Start -->
<aside class="sidebar-wrapper">
<div class="side-menu-wrap">
<ul class="main-menu">
<li>
<a href="index" >
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="menu-text">
Loan management
</span>
</a>
</li>
<li>
<a href="books">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="menu-text">
Book management
</span>
</a>
</li>
<li>
<a href="students" class="active">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="menu-text">
Student management
</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Container Start -->
<div class="page-wrapper">
<div class="main-content">
<!-- Page Title Start -->
<div class="row">
<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-title-wrapper">
<div class="page-title-box">
<h4 class="page-title bold">Dashboard</h4>
</div>
<div class="breadcrumb-list">
<ul>
<li class="breadcrumb-link">
<a href="javascript:void(0);"><i class="fas fa-home mr-2"></i>Dashboard</a>
</li>
<li class="breadcrumb-link active">Admin</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Dashboard Start -->
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6">
<!-- Start Card-->
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 512.126 512.126" xml:space="preserve">
<g transform="translate(0 -1)">
<g>
<g>
<path d="M13.88,171.793h117.986c1.201,2.614,2.547,5.16,4.031,7.625l-0.009,4.175l-22.567,11.587
c-11.796,5.875-19.293,17.877-19.4,31.054v8.875c0.104,7.537,6.288,13.568,13.825,13.484h125.95
c7.537,0.085,13.721-5.946,13.825-13.483v-8.875c-0.108-13.178-7.605-25.18-19.4-31.058l-22.583-11.579v-4.171
c1.49-2.466,2.84-5.015,4.042-7.633h117.983c7.537,0.085,13.721-5.946,13.825-13.483v-8.875
c-0.107-13.177-7.604-25.179-19.4-31.054v-0.004l-22.583-11.579v-4.196c3.072-5.008,5.558-10.353,7.408-15.929
c5.027-3.432,8.109-9.062,8.292-15.146V60.689c-0.089-4.571-1.961-8.927-5.217-12.138l-0.025-8.554
c0.722-9.479-2.508-18.835-8.925-25.85c-9.739-9.271-22.94-13.999-36.35-13.021c-13.434-0.976-26.655,3.772-36.4,13.071
c-6.195,6.829-9.377,15.867-8.825,25.071v9.259c-3.309,3.191-5.213,7.566-5.292,12.162v10.837
c0.183,6.084,3.265,11.713,8.292,15.146c1.848,5.573,4.331,10.915,7.4,15.921l-0.009,4.2l-13.682,7.024
c-0.04-8.48-3.251-16.638-9.002-22.87c-9.739-9.27-22.939-13.999-36.35-13.021c-13.434-0.976-26.655,3.772-36.4,13.071
c-5.69,6.256-8.857,14.4-8.889,22.856l-13.761-7.056v-4.196c3.072-5.008,5.558-10.353,7.408-15.929
c5.027-3.432,8.109-9.062,8.292-15.146V60.689c-0.09-4.57-1.962-8.924-5.217-12.133l-0.025-8.558
c0.723-9.479-2.508-18.836-8.925-25.85c-9.739-9.271-22.94-13.999-36.35-13.021C63.421,0.151,50.2,4.898,40.455,14.197
c-6.195,6.831-9.377,15.87-8.825,25.075v9.259c-3.307,3.19-5.211,7.564-5.292,12.158v10.837
c0.183,6.084,3.265,11.713,8.292,15.146c1.849,5.573,4.332,10.915,7.4,15.921l-0.009,4.2l-22.567,11.588
c-11.796,5.875-19.293,17.877-19.4,31.054v8.875C0.159,165.846,6.343,171.878,13.88,171.793z M241.063,120.151
c3.963-2.5,6.193-7.008,5.775-11.675v-8.363c-0.001-1.683-0.499-3.329-1.434-4.729c-3.314-4.994-5.84-10.468-7.491-16.229
c-0.555-2.011-1.827-3.749-3.575-4.887c-1.249-0.682-2.339-1.621-3.2-2.754v0.004l-0.075-10.438
c0.643-0.803,1.388-1.519,2.217-2.129c1.993-1.622,3.15-4.055,3.15-6.625l-0.025-13.754c-0.366-4.656,1.181-9.259,4.284-12.75
c6.584-5.711,15.224-8.469,23.9-7.629c8.668-0.841,17.302,1.912,23.883,7.617c3.252,3.69,4.829,8.563,4.358,13.458v13.058
c0,2.57,1.157,5.003,3.15,6.625c1.692,1.371,2.05,1.833,2.058,1.737l0.017,10.696c0,0.009-0.383,1.05-3.217,2.883
c-1.748,1.138-3.02,2.876-3.575,4.887c-1.651,5.762-4.178,11.235-7.492,16.229c-0.934,1.4-1.433,3.046-1.434,4.729v8.363
c-0.392,4.852,2.04,9.498,6.25,11.942l25.6,13.141c6.094,2.966,10.008,9.1,10.133,15.876v5.292h-104.35
c0.843-2.028,1.273-4.204,1.267-6.4v-10.837c0.004-2.221-0.456-4.418-1.35-6.45L241.063,120.151z M139.413,135.743
c1.554-1.34,2.563-3.203,2.838-5.236l0.04-0.177c0.121-0.394,0.212-0.796,0.273-1.204l-0.025-13.75
c-0.366-4.657,1.18-9.263,4.283-12.755c6.584-5.711,15.224-8.469,23.9-7.629c8.668-0.841,17.302,1.912,23.883,7.617
c3.251,3.692,4.829,8.565,4.358,13.462v13.054c0,2.57,1.157,5.003,3.15,6.625c1.692,1.371,2.058,1.829,2.058,1.737l0.017,10.696
c0,0.009-0.383,1.05-3.217,2.883c-1.731,1.126-2.995,2.842-3.558,4.829c-0.34,1.328-0.774,2.63-1.3,3.896
c-0.052,0.116-0.062,0.241-0.108,0.358c-0.024,0.061-0.078,0.101-0.101,0.163c-1.501,4.139-3.49,8.083-5.925,11.75
c-0.983,1.426-1.509,3.118-1.508,4.85v8.363c-0.392,4.852,2.039,9.498,6.25,11.942l25.6,13.138
c6.093,2.968,10.008,9.102,10.133,15.878v5.292H110.988v-5.292c0.124-6.776,4.039-12.91,10.133-15.875l26.075-13.408
c3.963-2.5,6.193-7.008,5.775-11.675v-8.363c0.001-1.732-0.525-3.424-1.508-4.85c-2.489-3.786-4.525-7.85-6.067-12.11
l-0.012-0.029l-0.055-0.132c-0.526-1.266-0.96-2.568-1.3-3.896c-0.566-1.986-1.83-3.7-3.558-4.829
c-1.249-0.682-2.339-1.621-3.2-2.754v0.004l-0.083-10.433C137.837,137.08,138.584,136.36,139.413,135.743z M17.122,149.435
c0.124-6.776,4.039-12.91,10.133-15.875l26.075-13.408c3.963-2.5,6.193-7.008,5.775-11.675v-8.363
c-0.001-1.683-0.499-3.329-1.434-4.729c-3.314-4.994-5.84-10.468-7.492-16.229c-0.555-2.011-1.827-3.749-3.575-4.887
c-1.249-0.682-2.339-1.621-3.2-2.754v0.004l-0.083-10.433c0.648-0.805,1.396-1.525,2.225-2.142
c1.992-1.619,3.149-4.049,3.15-6.616l-0.025-13.75c-0.366-4.657,1.181-9.262,4.284-12.754c6.584-5.711,15.224-8.469,23.9-7.629
c8.668-0.841,17.302,1.912,23.883,7.617c3.251,3.692,4.829,8.565,4.358,13.462v13.054c0.001,2.567,1.158,4.997,3.15,6.617
c1.692,1.379,2.067,1.842,2.058,1.746l0.017,10.696c0,0.009-0.383,1.05-3.217,2.883c-1.748,1.138-3.02,2.876-3.575,4.887
c-1.651,5.762-4.178,11.235-7.492,16.23c-0.934,1.4-1.433,3.046-1.434,4.729v8.363c-0.392,4.852,2.04,9.498,6.25,11.942
l20.763,10.656c-0.92,2.014-1.402,4.2-1.413,6.415v10.837c0.036,2.206,0.514,4.382,1.406,6.4H17.122V149.435z"></path>
<path d="M26.422,400.235c1.51-0.001,3.018-0.125,4.508-0.371c55.972-9.13,252.363-56.295,443.986-279.584l11.697,6.639
c5.476,3.078,12.2,2.903,17.508-0.456c5.309-3.359,8.346-9.361,7.908-15.627l-4.692-63.371
c-0.399-5.686-3.615-10.795-8.57-13.612c-4.955-2.817-10.99-2.969-16.08-0.405l-56.7,28.654
c-5.651,2.802-9.287,8.503-9.444,14.809c-0.157,6.306,3.189,12.181,8.694,15.262l8.583,4.873
C253.671,295.491,73.423,339.651,21.938,348.477c-12.583,2.109-21.821,12.971-21.883,25.729c0.003,2.12,0.269,4.232,0.792,6.288
C3.817,392.172,14.371,400.319,26.422,400.235z M24.855,365.293c53.354-9.143,241.519-55.127,427.17-262.877
c1.32-0.706,2.425-1.756,3.197-3.04c2.323-4.099,0.887-9.305-3.209-11.633l-18.367-10.392l56.675-28.663l4.692,63.375
l-17.75-10.071c-0.277-0.109-0.561-0.202-0.848-0.279c-3.098-1.393-6.734-0.749-9.164,1.625c-0.245,0.173-0.48,0.359-0.704,0.558
C277.23,327.422,83.155,374.052,28.164,383.022c-4.808,0.917-9.51-2.028-10.783-6.754c-0.17-0.674-0.257-1.367-0.259-2.063
C17.192,369.75,20.454,365.99,24.855,365.293z"></path>
<path d="M76.855,419.26h-51.2c-14.132,0.015-25.585,11.468-25.6,25.6v59.733c-0.001,2.263,0.898,4.434,2.499,6.035
c1.6,1.6,3.771,2.499,6.035,2.499h85.333c2.263,0.001,4.434-0.898,6.035-2.499c1.6-1.6,2.499-3.771,2.499-6.035V444.86
C102.44,430.728,90.987,419.275,76.855,419.26z M85.388,496.06H17.122v-51.2c0.005-4.711,3.822-8.529,8.533-8.533h51.2
c4.711,0.005,8.529,3.822,8.533,8.533V496.06z"></path>
<path d="M213.388,385.126h-51.2c-14.132,0.015-25.585,11.468-25.6,25.6v93.867c-0.001,2.263,0.898,4.434,2.499,6.035
c1.6,1.6,3.771,2.499,6.035,2.499h85.333c2.263,0.001,4.434-0.898,6.035-2.499c1.6-1.6,2.499-3.771,2.499-6.035v-93.867
C238.973,396.594,227.52,385.142,213.388,385.126z M221.922,496.06h-68.267v-85.333c0.005-4.711,3.822-8.529,8.533-8.533h51.2
c4.711,0.005,8.529,3.822,8.533,8.533V496.06z"></path>
<path d="M349.922,308.326h-51.2c-14.132,0.015-25.585,11.468-25.6,25.6v170.667c-0.001,2.263,0.898,4.434,2.499,6.035
c1.6,1.6,3.771,2.499,6.035,2.499h85.333c2.263,0.001,4.434-0.898,6.035-2.499c1.6-1.6,2.499-3.771,2.499-6.035V333.926
C375.506,319.794,364.054,308.342,349.922,308.326z M358.455,496.06h-68.267V333.926c0.005-4.711,3.822-8.529,8.533-8.533h51.2
c4.711,0.005,8.529,3.823,8.533,8.533V496.06z"></path>
<path d="M486.455,205.926h-51.2c-14.132,0.015-25.585,11.468-25.6,25.6v273.067c-0.001,2.263,0.898,4.434,2.499,6.035
c1.6,1.6,3.771,2.499,6.035,2.499h85.333c2.263,0.001,4.434-0.898,6.035-2.499c1.6-1.6,2.499-3.771,2.499-6.035V231.526
C512.04,217.394,500.587,205.942,486.455,205.926z M494.988,496.06h-68.267V231.526c0.005-4.711,3.822-8.529,8.533-8.533h51.2
c4.711,0.005,8.529,3.822,8.533,8.533V496.06z"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Happy Customers</h5>
<h4 class="ad-card-title">66k</h4>
</div>
</div>
</div>
</div>
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><g id="shopping-smartphone-home-house-hand"><path d="M60.02,25.05a2.971,2.971,0,0,0,1.84-1.54l.21-.41a3.022,3.022,0,0,0-1.14-3.91L33.54,2.76a2.988,2.988,0,0,0-3.08,0L3.07,19.19A3.022,3.022,0,0,0,1.93,23.1l.21.41a2.971,2.971,0,0,0,1.84,1.54,3.045,3.045,0,0,0,.84.12A3.033,3.033,0,0,0,6,24.9V56H5a3,3,0,0,0,0,6H59a3,3,0,0,0,0-6H58V24.91A2.928,2.928,0,0,0,60.02,25.05ZM59,58a1,1,0,0,1,0,2H5a1,1,0,0,1,0-2ZM46,37H56v9H41V29a1,1,0,0,1,2,0v5A3.009,3.009,0,0,0,46,37Zm0-2a1,1,0,0,1-1-1V29a2.98,2.98,0,0,0-4-2.82V23a3.009,3.009,0,0,0-3-3H26a3.009,3.009,0,0,0-3,3v7a3.009,3.009,0,0,0-3,3,2.974,2.974,0,0,0,.78,2,2.954,2.954,0,0,0,0,4,2.954,2.954,0,0,0,0,4A2.974,2.974,0,0,0,20,45a3.009,3.009,0,0,0,3,3v1a3.009,3.009,0,0,0,3,3H38a3.009,3.009,0,0,0,3-3V48H56v8H8V23.76L31.48,9.62a1.02,1.02,0,0,1,1.04,0L56,23.76V35ZM23,36h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm-1-3a1,1,0,0,1,1-1h2a1,1,0,0,1,0,2H23A1,1,0,0,1,22,33Zm1,7h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm0,4h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm2,4a3.009,3.009,0,0,0,3-3h8a1,1,0,0,0,1-1V34a1,1,0,0,0-1-1H35a3.99,3.99,0,0,0-7.58-1.75A2.956,2.956,0,0,0,25,30V23a1,1,0,0,1,1-1H38a1,1,0,0,1,1,1V49a1,1,0,0,1-1,1H26a1,1,0,0,1-1-1Zm2.22-9a2.954,2.954,0,0,0,0-4H35v8H27.22a2.954,2.954,0,0,0,0-4ZM29,33a2,2,0,0,1,4,0ZM33.55,7.91a2.979,2.979,0,0,0-3.1,0L5.34,23.03a1.018,1.018,0,0,1-.8.1.972.972,0,0,1-.61-.51l-.21-.41A1.021,1.021,0,0,1,4.1,20.9L31.49,4.47a1,1,0,0,1,1.02,0L59.9,20.9a1.021,1.021,0,0,1,.38,1.31l-.21.41a.972.972,0,0,1-.61.51,1.018,1.018,0,0,1-.8-.1Z"></path></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Daily Orders</h5>
<h4 class="ad-card-title">15k</h4>
</div>
</div>
</div>
</div>
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 64"><g id="hand_·_ecommerce_·_shopping_·_online_·_sale" data-name="hand · ecommerce · shopping · online · sale"><path d="M61,52H59V23a3.009,3.009,0,0,0-3-3H49V9a1,1,0,0,0-1-1H45a5.992,5.992,0,0,0-8.5-5.45A5.992,5.992,0,0,0,28,8H24a1,1,0,0,0-1,1V20H8a3.009,3.009,0,0,0-3,3V52H3a1,1,0,0,0-1,1v4a5,5,0,0,0,5,5H57a5,5,0,0,0,5-5V53A1,1,0,0,0,61,52ZM45,25V10h2V27a3.009,3.009,0,0,1-3,3H42.89A6.97,6.97,0,0,0,45,25ZM39,4a4,4,0,0,1,4,4H40a6.016,6.016,0,0,0-1.49-3.95A3.87,3.87,0,0,1,39,4Zm-2.5.9A3.976,3.976,0,0,1,38,8H35A3.976,3.976,0,0,1,36.5,4.9ZM34,4a3.87,3.87,0,0,1,.49.05A6.016,6.016,0,0,0,33,8H30A4,4,0,0,1,34,4Zm-9,6h3v2a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2V10h8v2a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2V10h3V25a5,5,0,0,1-5,5H30a5,5,0,0,1-5-5ZM23.08,26A7,7,0,0,0,30,32H44a5,5,0,0,0,5-5V26h4V48H11V46h5a1,1,0,0,0,1-1v-.14l.93.62a2.952,2.952,0,0,0,1.68.52H34.46a2.925,2.925,0,0,0,1.5-.4l13.4-7.73a3.006,3.006,0,0,0,1.1-4.1,3.011,3.011,0,0,0-4.1-1.1l-6.43,3.71A2.993,2.993,0,0,0,37,34H29.3l-.2-.13A10.972,10.972,0,0,0,17,33.8V33a1,1,0,0,0-1-1H11V26ZM11,44V34h4V44Zm20-4h6a2.982,2.982,0,0,0,1.98-.77l8.39-4.83a1.006,1.006,0,0,1,1.49.86.992.992,0,0,1-.5.87L34.95,43.87a.922.922,0,0,1-.49.13H19.61a1.023,1.023,0,0,1-.56-.17L17,42.46V36a.967.967,0,0,0,.55-.17l.46-.3a8.975,8.975,0,0,1,9.98,0l.46.3A.967.967,0,0,0,29,36h8a1,1,0,0,1,.71,1.7.01.01,0,0,0-.01.01A.991.991,0,0,1,37,38H31a1,1,0,0,0,0,2ZM7,23a1,1,0,0,1,1-1H23v2H10a1,1,0,0,0-1,1V49a1,1,0,0,0,1,1H54a1,1,0,0,0,1-1V25a1,1,0,0,0-1-1H49V22h7a1,1,0,0,1,1,1V52H7ZM36,54v1a1,1,0,0,1-1,1H29a1,1,0,0,1-1-1V54Zm24,3a3.009,3.009,0,0,1-3,3H7a3.009,3.009,0,0,1-3-3V54H26v1a3.009,3.009,0,0,0,3,3h6a3.009,3.009,0,0,0,3-3V54H60Z"></path><path d="M29.293,26.707a1,1,0,0,0,1.414,0l8-8a1,1,0,0,0-1.414-1.414l-8,8A1,1,0,0,0,29.293,26.707Z"></path><circle cx="30" cy="20" r="2"></circle><circle cx="38" cy="24" r="2"></circle></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Total Sales</h5>
<h4 class="ad-card-title">420k</h4>
</div>
</div>
</div>
</div>
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg enable-background="new 0 0 64 64" viewbox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><path d="m28 60c4.962 0 9-4.038 9-9s-4.038-9-9-9-9 4.038-9 9 4.038 9 9 9zm0-16c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"></path><path d="m26 53h-2c0 1.654 1.346 3 3 3v1h2v-1c1.654 0 3-1.346 3-3s-1.346-3-3-3v-2c.551 0 1 .449 1 1h2c0-1.654-1.346-3-3-3v-1h-2v1c-1.654 0-3 1.346-3 3s1.346 3 3 3v2c-.551 0-1-.449-1-1zm0-4c0-.551.449-1 1-1v2c-.551 0-1-.449-1-1zm3 3c.551 0 1 .449 1 1s-.449 1-1 1z"></path><path d="m62 29h-9v-4.08c3.387-.488 6-3.401 6-6.92v-4c0-.552-.448-1-1-1-2.548 0-4.775 1.373-6 3.413-1.225-2.04-3.452-3.413-6-3.413-.552 0-1 .448-1 1v4c0 3.519 2.613 6.432 6 6.92v4.08h-18v-5h3c3.86 0 7-3.14 7-7 0-.552-.448-1-1-1h-4c-1.958 0-3.728.81-5 2.11v-5.169c4.493-.5 8-4.317 8-8.941v-2c0-.552-.448-1-1-1-3.483 0-6.505 1.993-8 4.896-1.495-2.903-4.517-4.896-8-4.896-.552 0-1 .448-1 1v2c0 4.624 3.507 8.441 8 8.941v5.169c-1.272-1.3-3.042-2.11-5-2.11h-4c-.552 0-1 .448-1 1 0 3.86 3.14 7 7 7h3v5h-18v-4.08c3.387-.488 6-3.401 6-6.92v-4c0-.552-.448-1-1-1-2.548 0-4.775 1.373-6 3.413-1.225-2.04-3.452-3.413-6-3.413-.552 0-1 .448-1 1v4c0 3.519 2.613 6.432 6 6.92v4.08h-1c-.552 0-1 .448-1 1v5h-3c-.552 0-1 .448-1 1v3h-3c-.552 0-1 .448-1 1v22c0 .552.448 1 1 1h52c.552 0 1-.448 1-1v-3h3c.552 0 1-.448 1-1v-5h3c.552 0 1-.448 1-1v-22c0-.552-.448-1-1-1zm-5-13.899v2.899c0 2.415-1.721 4.435-4 4.899v-2.899c0-2.415 1.721-4.435 4-4.899zm-10 2.899v-2.899c2.279.464 4 2.485 4 4.899v2.899c-2.279-.464-4-2.484-4-4.899zm-9 0h2.899c-.464 2.279-2.485 4-4.899 4h-2.899c.464-2.279 2.484-4 4.899-4zm-10 4c-2.415 0-4.435-1.721-4.899-4h2.899c2.415 0 4.435 1.721 4.899 4zm11-18.929v.929c0 3.521-2.612 6.442-6 6.929v-.929c0-3.521 2.612-6.442 6-6.929zm-14 .929v-.929c3.388.487 6 3.408 6 6.929v.929c-3.388-.487-6-3.408-6-6.929zm-8 11.101v2.899c0 2.415-1.721 4.435-4 4.899v-2.899c0-2.415 1.721-4.435 4-4.899zm-10 2.899v-2.899c2.279.464 4 2.485 4 4.899v2.899c-2.279-.464-4-2.484-4-4.899zm46 43h-50v-20h50zm4-4h-2v-17c0-.552-.448-1-1-1h-47v-2h50zm4-6h-2v-15c0-.552-.448-1-1-1h-47v-4h50z"></path><path d="m6 59h12v-2h-11v-12h11v-2h-12c-.552 0-1 .448-1 1v14c0 .552.448 1 1 1z"></path><path d="m51 58v-14c0-.552-.448-1-1-1h-12v2h11v12h-11v2h12c.552 0 1-.448 1-1z"></path><path d="m46 54c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1h-6c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1zm-5-4h4v2h-4z"></path><path d="m10 48c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1h6c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1zm5 4h-4v-2h4z"></path></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Total Revenue</h5>
<h4 class="ad-card-title">10k</h4>
</div>
</div>
</div>
</div>
</div>
<!-- Revanue Status Start -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class="card chart-card">
<div class="card-header">
<h4 class="has-btn">Total Revanue <span><button type="button" class="btn btn-primary squer-btn sm-btn">Download</button></span></h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12">
<div class="chart-holder">
<div id="chartD"></div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12">
<div class="revenue-wrapper">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1-tab" data-toggle="pill" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2-tab" data-toggle="pill" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab3-tab" data-toggle="pill" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Yearly</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<div class="revenue-info-wrap">
<table>
<tbody>
<tr>
<td><i class="far fa-chart-bar mr-2 icon-only"></i>Total Sales</td>
<td>5995<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-user-friends mr-2 icon-only"></i>Total Customers</td>
<td>5894<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-hand-holding-usd mr-2 icon-only"></i>Total Income</td>
<td>4453<sup class="medium ml-2 txt-green">+25%</sup></td>
</tr>
<tr>
<td><i class="fas fa-signal mr-2 icon-only"></i>Total Expense</td>
<td>7454<sup class="medium ml-2 txt-red">+2%</sup></td>
</tr>
<tr>
<td><i class="far fa-heart mr-2 icon-only"></i>Total Likes</td>
<td>14454<sup class="medium ml-2 txt-red">+5%</sup></td>
</tr>
<tr>
<td><i class="far fa-frown-open mr-2 icon-only"></i>Tax Paid</td>
<td>786<sup class="medium ml-2 txt-green">+5%</sup></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
<div class="revenue-info-wrap">
<table>
<tbody>
<tr>
<td><i class="far fa-chart-bar mr-2 icon-only"></i>Total Sales</td>
<td>5995<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-user-friends mr-2 icon-only"></i>Total Customers</td>
<td>5894<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-hand-holding-usd mr-2 icon-only"></i>Total Income</td>
<td>4453<sup class="medium ml-2 txt-green">+25%</sup></td>
</tr>
<tr>
<td><i class="fas fa-signal mr-2 icon-only"></i>Total Expense</td>
<td>7454<sup class="medium ml-2 txt-red">+2%</sup></td>
</tr>
<tr>
<td><i class="far fa-heart mr-2 icon-only"></i>Total Likes</td>
<td>14454<sup class="medium ml-2 txt-red">+5%</sup></td>
</tr>
<tr>
<td><i class="far fa-frown-open mr-2 icon-only"></i>Tax Paid</td>
<td>786<sup class="medium ml-2 txt-green">+5%</sup></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
<div class="revenue-info-wrap">
<table>
<tbody>
<tr>
<td><i class="far fa-chart-bar mr-2 icon-only"></i>Total Sales</td>
<td>5995<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-user-friends mr-2 icon-only"></i>Total Customers</td>
<td>5894<sup class="medium ml-2 txt-green">+15%</sup></td>
</tr>
<tr>
<td><i class="fas fa-hand-holding-usd mr-2 icon-only"></i>Total Income</td>
<td>4453<sup class="medium ml-2 txt-green">+25%</sup></td>
</tr>
<tr>
<td><i class="fas fa-signal mr-2 icon-only"></i>Total Expense</td>
<td>7454<sup class="medium ml-2 txt-red">+2%</sup></td>
</tr>
<tr>
<td><i class="far fa-heart mr-2 icon-only"></i>Total Likes</td>
<td>14454<sup class="medium ml-2 txt-red">+5%</sup></td>
</tr>
<tr>
<td><i class="far fa-frown-open mr-2 icon-only"></i>Tax Paid</td>
<td>786<sup class="medium ml-2 txt-green">+5%</sup></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Products Orders Start -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card chart-card">
<div class="card-header">
<h4>Newest Orders</h4>
</div>
<div class="card-body pb-4">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1"></label>
</div>
</th>
<th>Order ID</th>
<th>Billing Name</th>
<th>Date</th>
<th>Total</th>
<th>Payment Status</th>
<th>Payment Method</th>
<th>View Details</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2"></label>
</div>
</td>
<td>#JH2033</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">Emily Arnold</span>
</span>
</td>
<td>22/06/2021</td>
<td>$600</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-paypal"></i>
<span class="ml-2">Paypal</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3"></label>
</div>
</td>
<td>#MK4433</td>
<td>
<span class="img-thumb ">
<img src="static/picture/4.jpg" alt=" ">
<span class="ml-2 ">Mark Doe</span>
</span>
</td>
<td>14/07/2021</td>
<td>$700</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-visa"></i>
<span class="ml-2">Visa</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option">
<ul>
<li>
<a href="javascript:void(0);"><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox4" type="checkbox">
<label for="checkbox4"></label>
</div>
</td>
<td>#MD4578</td>
<td>
<span class="img-thumb">
<img src="static/picture/7.jpg" alt=" ">
<span class="ml-2 ">Mark Smith</span>
</span>
</td>
<td>28/08/2021</td>
<td>$800</td>
<td>
<label class="mb-0 badge badge-danger" title="" data-original-title="Pending">Cancel</label>
</td>
<td>
<span class="img-thumb">
<i class="fas fa-credit-card"></i>
<span class="ml-2">Credit Card</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox5" type="checkbox">
<label for="checkbox5"></label>
</div>
</td>
<td>#DD1048</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">Mike Wood</span>
</span>
</td>
<td>13/04/2021</td>
<td>$880</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-mastercard"></i>
<span class="ml-2">Mastercard</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox6" type="checkbox">
<label for="checkbox6"></label>
</div>
</td>
<td>#JH2033</td>
<td>
<span class="img-thumb ">
<img src="static/picture/3.jpg" alt=" ">
<span class="ml-2 ">Emily Arnold</span>
</span>
</td>
<td>22/06/2021</td>
<td>$600</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-paypal"></i>
<span class="ml-2">Paypal</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox7" type="checkbox">
<label for="checkbox7"></label>
</div>
</td>
<td>#MK4433</td>
<td>
<span class="img-thumb ">
<img src="static/picture/1.jpg" alt=" ">
<span class="ml-2 ">John Doe</span>
</span>
</td>
<td>14/07/2021</td>
<td>$700</td>
<td>
<label class="mb-0 badge badge-danger" title="" data-original-title="Pending">Cancel</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-visa"></i>
<span class="ml-2">Visa</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox8" type="checkbox">
<label for="checkbox8"></label>
</div>
</td>
<td>#MD4578</td>
<td>
<span class="img-thumb ">
<img src="static/picture/7.jpg" alt=" ">
<span class="ml-2 ">Mark Smith</span>
</span>
</td>
<td>28/08/2021</td>
<td>$800</td>
<td>
<label class="mb-0 badge badge-success" title="" data-original-title="Pending">Success</label>
</td>
<td>
<span class="img-thumb">
<i class="fas fa-credit-card"></i>
<span class="ml-2">Credit Card</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox9" type="checkbox">
<label for="checkbox9"></label>
</div>
</td>
<td>#DD1048</td>
<td>
<span class="img-thumb ">
<img src="static/picture/4.jpg" alt=" ">
<span class="ml-2 ">Mike Wood</span>
</span>
</td>
<td>13/04/2021</td>
<td>$880</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">Pending</label>
</td>
<td>
<span class="img-thumb">
<i class="fab fa-cc-mastercard"></i>
<span class="ml-2">Mastercard</span>
</span>
</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending">View Detail</label>
</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ad-footer-btm">
<p>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
</div>
<!-- Script Start -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/apexcharts.min.js"></script>
<script src="static/js/control-chart-apexcharts.js"></script>
<!-- Page Specific -->
<script src="static/js/nice-select.min.js"></script>
<!-- Custom Script -->
<script src="static/js/custom.js"></script>
</body>
</html>
login.html:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->
<head>
<title>Book Management System Login</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/auth.css">
</head>
<body>
<div class="ad-auth-wrapper">
<div class="ad-auth-box">
<div class="row align-items-center">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="ad-auth-img">
<img src="static/picture/auth-img1.png" alt="">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="ad-auth-content">
<form method="post" action="login">
<h2><span class="primary">Hello,</span>Welcome!</h2>
<p th:unless="${loginFailure}">Please Enter Your Details Below to Continue</p>
<p th:if="${loginFailure}" style="color: red">Your username or password is wrong</p>
<div class="ad-auth-form">
<div class="ad-auth-feilds mb-30">
<input type="text" placeholder="Username" class="ad-input" name="username">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.3 483.3"><path d="M424.3,57.75H59.1c-32.6,0-59.1,26.5-59.1,59.1v249.6c0,32.6,26.5,59.1,59.1,59.1h365.1c32.6,0,59.1-26.5,59.1-59.1 v-249.5C483.4,84.35,456.9,57.75,424.3,57.75z M456.4,366.45c0,17.7-14.4,32.1-32.1,32.1H59.1c-17.7,0-32.1-14.4-32.1-32.1v-249.5 c0-17.7,14.4-32.1,32.1-32.1h365.1c17.7,0,32.1,14.4,32.1,32.1v249.5H456.4z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M304.8,238.55l118.2-106c5.5-5,6-13.5,1-19.1c-5-5.5-13.5-6-19.1-1l-163,146.3l-31.8-28.4c-0.1-0.1-0.2-0.2-0.2-0.3 c-0.7-0.7-1.4-1.3-2.2-1.9L78.3,112.35c-5.6-5-14.1-4.5-19.1,1.1c-5,5.6-4.5,14.1,1.1,19.1l119.6,106.9L60.8,350.95 c-5.4,5.1-5.7,13.6-0.6,19.1c2.7,2.8,6.3,4.3,9.9,4.3c3.3,0,6.6-1.2,9.2-3.6l120.9-113.1l32.8,29.3c2.6,2.3,5.8,3.4,9,3.4 c3.2,0,6.5-1.2,9-3.5l33.7-30.2l120.2,114.2c2.6,2.5,6,3.7,9.3,3.7c3.6,0,7.1-1.4,9.8-4.2c5.1-5.4,4.9-14-0.5-19.1L304.8,238.55z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
<div class="ad-auth-feilds">
<input type="password" placeholder="Password" class="ad-input" name="password">
<div class="ad-auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 482.8 482.8"><path d="M395.95,210.4h-7.1v-62.9c0-81.3-66.1-147.5-147.5-147.5c-81.3,0-147.5,66.1-147.5,147.5c0,7.5,6,13.5,13.5,13.5 s13.5-6,13.5-13.5c0-66.4,54-120.5,120.5-120.5c66.4,0,120.5,54,120.5,120.5v62.9h-275c-14.4,0-26.1,11.7-26.1,26.1v168.1 c0,43.1,35.1,78.2,78.2,78.2h204.9c43.1,0,78.2-35.1,78.2-78.2V236.5C422.05,222.1,410.35,210.4,395.95,210.4z M395.05,404.6 c0,28.2-22.9,51.2-51.2,51.2h-204.8c-28.2,0-51.2-22.9-51.2-51.2V237.4h307.2L395.05,404.6L395.05,404.6z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path><path d="M241.45,399.1c27.9,0,50.5-22.7,50.5-50.5c0-27.9-22.7-50.5-50.5-50.5c-27.9,0-50.5,22.7-50.5,50.5 S213.55,399.1,241.45,399.1z M241.45,325c13,0,23.5,10.6,23.5,23.5s-10.5,23.6-23.5,23.6s-23.5-10.6-23.5-23.5 S228.45,325,241.45,325z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#9abeed"></path></svg>
</div>
</div>
</div>
<div class="ad-other-feilds">
<div class="ad-checkbox">
<label>
<input type="checkbox" name="remember-me" class="ad-checkbox">
<span>Remember Me</span>
</label>
</div>
<a class="forgot-pws-btn" href="forgot-pws.html">Forgot Password?</a>
</div>
<div class="ad-auth-btn">
<button class="ad-btn ad-login-member">Login</button>
</div>
<p class="ad-register-text">Don't have an account? <a href="register.html">Click Here</a></p>
</form>
</div>
</div>
</div>
<div class="ad-notifications ad-error">
<p><span>Duhh!</span>Something Went Wrong</p>
</div>
</div>
</div>
</body>
</html>
students.html:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- Begin Head -->
<head>
<title>Library Management System</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" href="static/css/fonts.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/icofont.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" id="theme-change" type="text/css" href="">
</head>
<body>
<div class="loader">
<div class="spinner">
<img src="static/picture/loader.gif" alt="">
</div>
</div>
<!-- Main Body -->
<div class="page-wrapper">
<!-- Header Start -->
<div th:replace="header.html :: title"></div>
<!-- Sidebar Start -->
<aside class="sidebar-wrapper">
<div class="side-menu-wrap">
<ul class="main-menu">
<li>
<a href="index" class="active">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="menu-text">
Loan management
</span>
</a>
</li>
<li>
<a href="books">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="menu-text">
Book management
</span>
</a>
</li>
<li>
<a href="students">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="menu-text">
Student management
</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Container Start -->
<div class="page-wrapper">
<div class="main-content">
<!-- Page Title Start -->
<div class="row">
<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-title-wrapper">
<div class="page-title-box ad-title-box-use">
<h4 class="page-title">Customers</h4>
</div>
<div class="ad-breadcrumb">
<ul>
<li>
<div class="ad-user-btn">
<input class="form-control" type="text" placeholder="Search Here..." id="text-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
s-17-7.626-17-17S14.61,6,23.984,6z"></path>
</svg>
</div>
</li>
<li>
<div class="add-group">
<a class="ad-btn">New Customers</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Table Start -->
<div class="row">
<!-- Styled Table Card-->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card table-card">
<div class="card-header pb-0">
<h4>Customers List</h4>
</div>
<div class="card-body">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Phone / Email</th>
<th>Address</th>
<th>Rating</th>
<th>Wallet Balance</th>
<th>Joining Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<input id="checkbox" type="checkbox">
<label for="checkbox"></label>
</div>
</td>
<td>Scott Henry</td>
<td>
+(00) 4512 451<br>
scotthenry@gamil.com
</td>
<td>2210 Grove Street Bethpage, NI 440014</td>
<td>
<label class="mb-0 badge badge-primary">4.1</label>
</td>
<td>$6,415</td>
<td>22/06/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox23" type="checkbox">
<label for="checkbox23"></label>
</div>
</td>
<td>Mark Wood</td>
<td>
+(00) 4512 451<br>
markwood@gamil.com
</td>
<td>2210 sed do eiusmod tempor ut, NI 440022</td>
<td>
<label class="mb-0 badge badge-primary">2.2</label>
</td>
<td>$2,415</td>
<td>22/07/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox34" type="checkbox">
<label for="checkbox34"></label>
</div>
</td>
<td>Mike Doe</td>
<td>
+(00) 4512 451<br>
mikedoe@gamil.com
</td>
<td>4477 labore et dolore magna, NI 440011</td>
<td>
<label class="mb-0 badge badge-primary">3.1</label>
</td>
<td>$5,415</td>
<td>12/02/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox44" type="checkbox">
<label for="checkbox4"></label>
</div>
</td>
<td>Tom John</td>
<td>
+(00) 4512 451<br>
tomjohn@gamil.com
</td>
<td>4877 occaecat cupidatat non proident, NI 2441</td>
<td>
<label class="mb-0 badge badge-primary">1.1</label>
</td>
<td>$4,411</td>
<td>11/07/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox22" type="checkbox">
<label for="checkbox"></label>
</div>
</td>
<td>Scott Henry</td>
<td>
+(00) 4512 451<br>
scotthenry@gamil.com
</td>
<td>2210 Grove Street Bethpage, NI 440014</td>
<td>
<label class="mb-0 badge badge-primary">4.1</label>
</td>
<td>$6,415</td>
<td>22/06/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox24" type="checkbox">
<label for="checkbox24"></label>
</div>
</td>
<td>Mark Wood</td>
<td>
+(00) 4512 451<br>
markwood@gamil.com
</td>
<td>2210 sed do eiusmod tempor ut, NI 440022</td>
<td>
<label class="mb-0 badge badge-primary">2.2</label>
</td>
<td>$2,415</td>
<td>22/07/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox33" type="checkbox">
<label for="checkbox33"></label>
</div>
</td>
<td>Mike Doe</td>
<td>
+(00) 4512 451<br>
mikedoe@gamil.com
</td>
<td>4477 labore et dolore magna, NI 440011</td>
<td>
<label class="mb-0 badge badge-primary">3.1</label>
</td>
<td>$5,415</td>
<td>12/02/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input id="checkbox4" type="checkbox">
<label for="checkbox4"></label>
</div>
</td>
<td>Tom John</td>
<td>
+(00) 4512 451<br>
tomjohn@gamil.com
</td>
<td>4877 occaecat cupidatat non proident, NI 2441</td>
<td>
<label class="mb-0 badge badge-primary">1.1</label>
</td>
<td>$4,411</td>
<td>11/07/2021</td>
<td class="relative">
<a class="action-btn " href="javascript:void(0); ">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-right">
<nav class="d-inline-block">
<ul class="pagination mb-0 ">
<li class="page-item disabled ">
<a class="page-link" href="javascript:void(0);" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active "><a class="page-link " href="javascript:void(0); ">1</a></li>
<li class="page-item ">
<a class="page-link " href="javascript:void(0); ">2</a>
</li>
<li class="page-item "><a class="page-link " href="javascript:void(0); ">3</a></li>
<li class="page-item ">
<a class="page-link " href="javascript:void(0); "><i class="fas fa-chevron-right "></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="ad-footer-btm">
<p>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
</div>
<!-- Script Start -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/apexcharts.min.js"></script>
<script src="static/js/control-chart-apexcharts.js"></script>
<!-- Page Specific -->
<script src="static/js/nice-select.min.js"></script>
<!-- Custom Script -->
<script src="static/js/custom.js"></script>
</body>
</html>
4 实现借阅信息列表
index.html:
<!-- Products Orders Start -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card chart-card">
<div class="card-header">
<div class="card-header">
<h4 class="has-btn">Book loan list<span><button type="button" class="btn btn-primary squer-btn sm-btn">Add loans</button></span></h4>
</div>
</div>
<div class="card-body pb-4">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>Book ID</th>
<th>Book Title</th>
<th>Date</th>
<th>Borrower</th>
<th>Borrower ID</th>
<th>Return</th>
</tr>
</thead>
<tbody>
<tr th:each="borrow : ${borrows}">
<td th:text="'#' + ${borrow.getBook_id()}">#JH2033</td>
<td th:text="${borrow.getBook_name()}">Book Title</td>
<td th:text="${borrow.getTime()}">22/06/2021</td>
<td th:text="${borrow.getStudent_name()}">I am student</td>
<td th:text="'#' + ${borrow.getStudent_id()}">#1111</td>
<td class="relative">
<a class="action-btn " href="#">
<svg class="default-size " viewbox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
<div class="action-option ">
<ul>
<li>
<a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
</li>
<li>
<a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
BookService.java:
package com.book.service;
import com.book.entity.Borrow;
import java.util.List;
public interface BookService {
List<Borrow> getBorowList();
}
Borrow.java:
package com.book.entity;
import lombok.Data;
import java.util.Date;
@Data
public class Borrow {
int book_id;
String book_name;
Date time;
String student_name;
int student_id;
}
BookMapper.java:
package com.book.dao;
import com.book.entity.Borrow;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface BookMapper {
@Results({
@Result(column = "bid", property = "book_id"),
@Result(column = "title", property = "book_name"),
@Result(column = "borrow_time", property = "time"),
@Result(column = "name", property = "student_name"),
@Result(column = "sid", property = "student_id")
})
@Select("SELECT * FROM borrow, student, book where borrow.bid = book.bid and borrow.sid = student.sid")
List<Borrow> getBorrowList();
}
IndexServlet.java:
package com.book.servlet.pages;
import com.book.entity.User;
import com.book.service.BookService;
import com.book.service.impl.BookServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
BookService service;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
User user = (User) request.getSession().getAttribute("user");
context.setVariable("nickname", user.getNickname());
// Your code here
context.setVariable("borrows", service.getBorowList());
ThymeleafUtil.process("index.html", context, response.getWriter());
}
}
MybatisUtil.java:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/book_management"/>
<property name="username" value="root"/>
<property name="password" value="Eve123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<package name="com.book.dao"/>
</mappers>
</configuration>
继续写return的部分
Borrow.java:
package com.book.entity;
import lombok.Data;
import java.util.Date;
@Data
public class Borrow {
int id;
int book_id;
String book_name;
Date time;
String student_name;
int student_id;
}
BookMapper.java:
package com.book.dao;
import com.book.entity.Borrow;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface BookMapper {
@Results({
@Result(column = "id", property = "id"),
@Result(column = "bid", property = "book_id"),
@Result(column = "title", property = "book_name"),
@Result(column = "borrow_time", property = "time"),
@Result(column = "name", property = "student_name"),
@Result(column = "sid", property = "student_id")
})
@Select("SELECT * FROM borrow, student, book where borrow.bid = book.bid and borrow.sid = student.sid")
List<Borrow> getBorrowList();
}
ReturnServlet.java:
package com.book.servlet.manage;
import com.book.service.BookService;
import com.book.service.impl.BookServiceImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/return-book")
public class ReturnServlet extends HttpServlet {
BookService service;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
String id = request.getParameter("id");
service.returnBook(id);
response.sendRedirect("index");
}
}
<tbody>
<tr th:each="borrow : ${borrows}">
<td th:text="'#' + ${borrow.getBook_id()}">#JH2033</td>
<td th:text="${borrow.getBook_name()}">Book Title</td>
<td th:text="${borrow.getTime()}">22/06/2021</td>
<td th:text="${borrow.getStudent_name()}">I am student</td>
<td th:text="'#' + ${borrow.getStudent_id()}">#1111</td>
<td class="relative">
<a class="action-btn " th:href="'return-book?id=' + ${borrow.getId()}">
<button type="button" class="btn btn-primary squer-btn sm-btn">Return</button>
</a>
</td>
</tr>
</tbody>
5 完善借阅操作
index.html
<!-- Products Orders Start -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card chart-card">
<div class="card-header">
<div class="card-header">
<h4 class="has-btn">Book loan list
<span>
<a type="button" href="add-borrow" class="btn btn-primary squer-btn sm-btn">Add loans</a>
</span>
</h4>
</div>
</div>
add-borrow.html:
<form class="separate-form" method="post" action="add-borrow">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<hr class="mt-4 mb-4">
<h5 class="from-title mb-1">Info</h5>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="region" class="col-form-label">Book</label>
<select class="select2 form-control" id="region" name="book">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
</optgroup>
</select>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="city" class="col-form-label">Student</label>
<select class="select2 form-control" id="city" name="student">
<option value="AK">Alaska</option>
</select>
</div>
</div>
</div>
<div class="form-group mb-0">
<button class="btn btn-primary" type="submit">submit</button>
</div>
</div>
</form>
同一本书不能借两次
StudentMapper.java:
package com.book.dao;
import com.book.entity.Student;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface StudentMapper {
@Select("select * from student")
List<Student> getStudentList();
}
BookMapper.java:
package com.book.dao;
import com.book.entity.Book;
import com.book.entity.Borrow;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface BookMapper {
@Results({
@Result(column = "id", property = "id"),
@Result(column = "bid", property = "book_id"),
@Result(column = "title", property = "book_name"),
@Result(column = "time", property = "time"),
@Result(column = "name", property = "student_name"),
@Result(column = "sid", property = "student_id")
})
@Select("SELECT * FROM borrow, student, book where borrow.bid = book.bid and borrow.sid = student.sid")
List<Borrow> getBorrowList();
@Delete("DELETE FROM borrow WHERE id = #{id}")
void deleteBorrow(String id);
@Select("SELECT * FROM book")
List<Book> getBookList();
@Insert("insert into borrow(sid, bid, time) values(#{sid}, #{bid}, NOW())")
void addBorrow(@Param("sid") int sid, @Param("bid") int bid);
}
Book.java:
package com.book.entity;
import lombok.Data;
@Data
public class Book {
int bid;
String title;
String desc;
double price;
}
Student.java:
package com.book.entity;
import lombok.Data;
@Data
public class Student {
int sid;
String name;
String sex;
int grade;
}
StudentServiceImpl.java:
package com.book.service.impl;
import com.book.dao.StudentMapper;
import com.book.entity.Student;
import com.book.service.StudentService;
import com.book.utils.MybatisUtil;
import org.apache.ibatis.session.SqlSession;
import java.util.List;
public class StudentServiceImpl implements StudentService {
@Override
public List<Student> getStudentList() {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
return mapper.getStudentList();
}
}
}
UserServiceImpl.java
package com.book.service.impl;
import com.book.dao.UserMapper;
import com.book.entity.User;
import com.book.service.UserService;
import com.book.utils.MybatisUtil;
import jakarta.servlet.http.HttpSession;
import org.apache.ibatis.session.SqlSession;
public class UserServiceImpl implements UserService {
@Override
public boolean auth(String username, String password, HttpSession session) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
User user = userMapper.getUser(username, password);
if (user == null){
return false;
}
session.setAttribute("user", user);
return true;
}
}
}
BookService.java:
package com.book.service;
import com.book.entity.Book;
import com.book.entity.Borrow;
import java.util.List;
public interface BookService {
List<Borrow> getBorowList();
void returnBook(String id);
List<Book> getActiveBookList();
void addBorrow(int sid, int bid);
}
StudentService.java:
package com.book.service;
import com.book.entity.Student;
import java.util.List;
public interface StudentService {
List<Student> getStudentList();
}
AddBorrowServlet.java:
package com.book.servlet.manage;
import com.book.service.BookService;
import com.book.service.StudentService;
import com.book.service.impl.BookServiceImpl;
import com.book.service.impl.StudentServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/add-borrow")
public class AddBorrowServlet extends HttpServlet {
BookService service;
StudentService studentService;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
studentService = new StudentServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
context.setVariable("book_list", service.getActiveBookList());
context.setVariable("student_list", studentService.getStudentList());
ThymeleafUtil.process("add-borrow.html", context, response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
int sid = Integer.parseInt(request.getParameter("student"));
int bid = Integer.parseInt(request.getParameter("book"));
service.addBorrow(sid, bid);
response.sendRedirect("index");
}
}
add-borrow.html:
<!-- From Start -->
<div class="from-wrapper">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-header">
<h4>Add loans</h4>
<p class="card-desc">Please select the <code>book</code> and the <code>borrower</code> below </p>
</div>
<div class="card-body">
<form class="separate-form" method="post" action="add-borrow">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<hr class="mt-4 mb-4">
<h5 class="from-title mb-1">Info</h5>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="region" class="col-form-label">Book</label>
<select class="select2 form-control" id="region" name="book">
<option th:value="${book.getBid()}" th:each="book : ${book_list}" th:text="${book.getTitle()}">Hawaii</option>
</select>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="city" class="col-form-label">Student</label>
<select class="select2 form-control" id="city" name="student">
<option th:value="${student.getSid()}" th:each="student: ${student_list}" th:text="${student.getName()}">Alaska</option>
</select>
</div>
</div>
</div>
<div class="form-group mb-0">
<button class="btn btn-primary" type="submit">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
6 书籍列表以及相关操作
BookMapper.java:
package com.book.dao;
import com.book.entity.Book;
import com.book.entity.Borrow;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface BookMapper {
@Results({
@Result(column = "id", property = "id"),
@Result(column = "bid", property = "book_id"),
@Result(column = "title", property = "book_name"),
@Result(column = "time", property = "time"),
@Result(column = "name", property = "student_name"),
@Result(column = "sid", property = "student_id")
})
@Select("SELECT * FROM borrow, student, book where borrow.bid = book.bid and borrow.sid = student.sid")
List<Borrow> getBorrowList();
@Delete("DELETE FROM borrow WHERE id = #{id}")
void deleteBorrow(String id);
@Select("SELECT * FROM book")
List<Book> getBookList();
@Insert("insert into borrow(sid, bid, time) values(#{sid}, #{bid}, NOW())")
void addBorrow(@Param("sid") int sid, @Param("bid") int bid);
@Delete("DELETE FROM book WHERE bid = #{bid}")
void deleteBook(int bid);
@Insert("insert into book(title, `desc`, price) values(#{title}, #{desc}, #{price})")
void addBook(@Param("title") String title, @Param("desc") String desc, @Param("price") double price);
}
BookServiceImpl.java:
package com.book.service.impl;
import com.book.dao.BookMapper;
import com.book.entity.Book;
import com.book.entity.Borrow;
import com.book.service.BookService;
import com.book.utils.MybatisUtil;
import org.apache.ibatis.session.SqlSession;
import java.util.*;
import java.util.stream.Collectors;
public class BookServiceImpl implements BookService {
@Override
public List<Borrow> getBorowList() {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
return mapper.getBorrowList();
}
}
@Override
public void returnBook(String id) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
mapper.deleteBorrow(id);
}
}
@Override
public List<Book> getActiveBookList() {
Set<Integer> set = new HashSet<>();
this.getBorowList().forEach(borrow -> set.add(borrow.getBook_id()));
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
return mapper.getBookList()
.stream()
.filter(book -> !set.contains(book.getBid()))
.collect(Collectors.toList());
}
}
@Override
public void addBorrow(int sid, int bid) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
mapper.addBorrow(sid, bid);
}
}
@Override
public Map<Book, Boolean> getBookList() {
Set<Integer> set = new HashSet<>();
this.getBorowList().forEach(borrow -> set.add(borrow.getBook_id()));
try(SqlSession sqlSession = MybatisUtil.getSession()) {
Map<Book, Boolean> map = new LinkedHashMap<Book, Boolean>();
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
mapper.getBookList().forEach(book -> map.put(book, set.contains(book.getBid())));
return map;
}
}
@Override
public void deleteBook(int bid) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
mapper.deleteBook(bid);
}
}
@Override
public void addBook(String title, String desc, double price) {
try (SqlSession sqlSession = MybatisUtil.getSession()) {
BookMapper mapper = sqlSession.getMapper(BookMapper.class);
mapper.addBook(title, desc, price);
}
}
}
BookService.java:
package com.book.service;
import com.book.entity.Book;
import com.book.entity.Borrow;
import java.util.List;
import java.util.Map;
public interface BookService {
List<Borrow> getBorowList();
void returnBook(String id);
List<Book> getActiveBookList();
void addBorrow(int sid, int bid);
Map<Book, Boolean> getBookList();
void deleteBook(int bid);
void addBook(String title, String desc, double price);
}
AddBorrowSerlvet.java:
package com.book.servlet.manage;
import com.book.service.BookService;
import com.book.service.StudentService;
import com.book.service.impl.BookServiceImpl;
import com.book.service.impl.StudentServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/add-borrow")
public class AddBorrowServlet extends HttpServlet {
BookService service;
StudentService studentService;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
studentService = new StudentServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
context.setVariable("book_list", service.getActiveBookList());
context.setVariable("student_list", studentService.getStudentList());
ThymeleafUtil.process("add-borrow.html", context, response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
int sid = Integer.parseInt(request.getParameter("student"));
int bid = Integer.parseInt(request.getParameter("book"));
service.addBorrow(sid, bid);
response.sendRedirect("index");
}
}
DeleteBookServlet.java:
package com.book.servlet.manage;
import com.book.service.BookService;
import com.book.service.impl.BookServiceImpl;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/delete_book")
public class DeleteBookServlet extends HttpServlet {
BookService service;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
int bid = Integer.parseInt(request.getParameter("bid"));
service.deleteBook(bid);
response.sendRedirect("books");
}
}
BookServlet.java:
package com.book.servlet.pages;
import com.book.entity.User;
import com.book.service.BookService;
import com.book.service.impl.BookServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
import java.util.ArrayList;
@WebServlet("/books")
public class BookServlet extends HttpServlet {
BookService service;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
User user = (User) request.getSession().getAttribute("user");
context.setVariable("nickname", user.getNickname());
context.setVariable("book_list", service.getActiveBookList());
context.setVariable("book_list_status", new ArrayList<>(service.getBookList().values()));
// Your code here
ThymeleafUtil.process("books.html", context, response.getWriter());
}
}
AddBookServlet.java:
package com.book.servlet.manage;
import com.book.service.BookService;
import com.book.service.impl.BookServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/add-book")
public class AddBookServlet extends HttpServlet {
// Your code here
BookService service;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
ThymeleafUtil.process("add-book.html", new Context(), response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
String title = request.getParameter("title");
String desc = request.getParameter("desc");
double price = Double.parseDouble(request.getParameter("price"));
service.addBook(title, desc, price);
response.sendRedirect("books");
}
}
add-book.html:
<!-- Container Start -->
<div class="page-wrapper">
<div class="main-content">
<!-- Page Title Start -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-title-wrapper">
<div class="page-title-box">
<h4 class="page-title">Add book information</h4>
</div>
<div class="breadcrumb-list">
<ul>
<li class="breadcrumb-link">
<a href="javascript:void(0);"><i class="fas fa-home mr-2"></i>Library Management System</a>
</li>
<li class="breadcrumb-link active">Add book information</li>
</ul>
</div>
</div>
</div>
</div>
<!-- From Start -->
<div class="from-wrapper">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-header">
<h4>Add loans</h4>
<p class="card-desc">Please select the <code>book</code> and the <code>borrower</code> below </p>
</div>
<div class="card-body">
<form class="separate-form" method="post" action="add-book">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<hr class="mt-4 mb-4">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="Title" class="col-form-label">Book Title</label>
<input class="form-control" type="text" placeholder="Book Title" id="Title" name="title">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="Description" class="col-form-label">Book Description</label>
<input class="form-control" type="text" placeholder="Book Description" id="Description" name="desc">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label for="Price" class="col-form-label">Price</label>
<input class="form-control" type="number" placeholder="Price" id="Price" name="price">
</div>
</div>
</div>
<div class="form-group mb-0">
<button class="btn btn-primary" type="submit">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="ad-footer-btm">
<p>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
books.html:
<!-- Main Body -->
<div class="page-wrapper">
<!-- Header Start -->
<div th:replace="header.html :: title"></div>
<!-- Sidebar Start -->
<aside class="sidebar-wrapper">
<div class="side-menu-wrap">
<ul class="main-menu">
<li>
<a href="index" >
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="menu-text">
Loan management
</span>
</a>
</li>
<li>
<a href="books" class="active">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
<span class="menu-text">
Book management
</span>
</a>
</li>
<li>
<a href="students">
<span class="icon-menu feather-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</span>
<span class="menu-text">
Student management
</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Container Start -->
<div class="page-wrapper">
<div class="main-content">
<!-- Page Title Start -->
<div class="row">
<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-title-wrapper">
<div class="page-title-box ad-title-box-use">
<h4 class="page-title">Book Management</h4>
</div>
<div class="ad-breadcrumb">
<ul>
<li>
<div class="ad-user-btn">
<input class="form-control" type="text" placeholder="Search Books Here..." id="text-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
s-17-7.626-17-17S14.61,6,23.984,6z"></path>
</svg>
</div>
</li>
<li>
<div class="add-group">
<a class="ad-btn" href="add-book">Add An New Book</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Table Start -->
<div class="row">
<!-- Styled Table Card-->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card table-card">
<div class="card-header pb-0">
<h4>Books List</h4>
</div>
<div class="card-body">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>Book ID</th>
<th>Book Title</th>
<th>Description</th>
<th>Price</th>
<th>Loan status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="book, iterStat : ${book_list}">
<td th:text="'#' + ${book.getBid()}">#JH2033</td>
<td th:text="${book.getTitle()}">Title</td>
<td th:text="${book.getDesc()}">22/06/2021</td>
<td th:text="'$' + ${book.getPrice()}">$600</td>
<td>
<label class="mb-0 badge badge-primary" title="" data-original-title="Pending" th:if="${book_list_status.get(iterStat.index)}">On loan</label>
<label class="mb-0 badge badge-success" title="" data-original-title="Delivered" th:unless="${book_list_status.get(iterStat.index)}">Available</label>
</td>
<td class="relative">
<a class="action-btn " th:href="'delete-book?bid=' + ${book.getBid()}">
<svg class="default-size " viewBox="0 0 341.333 341.333 ">
<g>
<g>
<g>
<path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
<path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
<path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
</g>
</g>
</g>
</svg>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ad-footer-btm">
<p>Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</div>
</div>
</div>
7 完善项目以及打包发布
StudentServlet.java:
package com.book.servlet.pages;
import com.book.entity.User;
import com.book.service.BookService;
import com.book.service.StudentService;
import com.book.service.impl.BookServiceImpl;
import com.book.service.impl.StudentServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/students")
public class StudentServlet extends HttpServlet {
StudentService service;
@Override
public void init() throws ServletException {
service = new StudentServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
User user = (User) request.getSession().getAttribute("user");
context.setVariable("nickname", user.getNickname());
context.setVariable("students_list", service.getStudentList());
ThymeleafUtil.process("students.html", context, response.getWriter());
}
}
IndexServlet.java:
package com.book.servlet.pages;
import com.book.entity.User;
import com.book.service.BookService;
import com.book.service.StudentService;
import com.book.service.impl.BookServiceImpl;
import com.book.service.impl.StudentServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
BookService service;
StudentService studentService;
@Override
public void init() throws ServletException {
service = new BookServiceImpl();
studentService = new StudentServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Context context = new Context();
User user = (User) request.getSession().getAttribute("user");
context.setVariable("nickname", user.getNickname());
// Your code here
context.setVariable("borrow_list", service.getBorowList());
context.setVariable("book_count", service.getBookList().size());
context.setVariable("student_count", studentService.getStudentList().size());
ThymeleafUtil.process("index.html", context, response.getWriter());
}
}
LogoutServlet.java:
package com.book.servlet.auth;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
request.getSession().removeAttribute("user");
Cookie cookie_username = new Cookie("username", "username");
cookie_username.setMaxAge(0);
Cookie cookie_password = new Cookie("password", "password");
cookie_password.setMaxAge(0);
response.addCookie(cookie_username);
response.addCookie(cookie_password);
response.sendRedirect("login");
}
}
LoginServlet.java:
package com.book.servlet.auth;
import com.book.service.UserService;
import com.book.service.impl.UserServiceImpl;
import com.book.utils.ThymeleafUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.apache.ibatis.session.SqlSession;
import org.thymeleaf.context.Context;
import java.io.IOException;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
UserService service;
@Override
public void init() throws ServletException {
service = new UserServiceImpl();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
Cookie[] cookies = request.getCookies();
if (cookies != null){
String username = null;
String password = null;
for (Cookie cookie : cookies){
if (cookie.getName().equals("username")){
username = cookie.getValue();
}
if (cookie.getName().equals("password")){
password = cookie.getValue();
}
}
if (username != null && password != null){
if (service.auth(username, password, request.getSession())){
response.sendRedirect("index");
return;
}
}
}
Context context = new Context();
if (request.getSession().getAttribute("login-failure") != null) {
context.setVariable("loginFailure", true);
request.getSession().removeAttribute("login-failure");
}
if (request.getSession().getAttribute("user") != null) {
response.sendRedirect("index");
return;
}
ThymeleafUtil.process("login.html", context, response.getWriter());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Your code here
String username = request.getParameter("username");
String password = request.getParameter("password");
String remember = request.getParameter("remember-me");
if (service.auth(username, password, request.getSession())) {
if (remember != null){
Cookie cookie_username = new Cookie("username", username);
cookie_username.setMaxAge(60 * 60 * 24 * 7);
Cookie cookie_password = new Cookie("password", password);
cookie_password.setMaxAge(60 * 60 * 24 * 7);
response.addCookie(cookie_username);
response.addCookie(cookie_password);
}
response.sendRedirect("index");
} else {
request.getSession().setAttribute("login-failure", new Object());
this.doGet(request, response);
}
}
}
index.html:
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g id="shopping-smartphone-home-house-hand"><path d="M60.02,25.05a2.971,2.971,0,0,0,1.84-1.54l.21-.41a3.022,3.022,0,0,0-1.14-3.91L33.54,2.76a2.988,2.988,0,0,0-3.08,0L3.07,19.19A3.022,3.022,0,0,0,1.93,23.1l.21.41a2.971,2.971,0,0,0,1.84,1.54,3.045,3.045,0,0,0,.84.12A3.033,3.033,0,0,0,6,24.9V56H5a3,3,0,0,0,0,6H59a3,3,0,0,0,0-6H58V24.91A2.928,2.928,0,0,0,60.02,25.05ZM59,58a1,1,0,0,1,0,2H5a1,1,0,0,1,0-2ZM46,37H56v9H41V29a1,1,0,0,1,2,0v5A3.009,3.009,0,0,0,46,37Zm0-2a1,1,0,0,1-1-1V29a2.98,2.98,0,0,0-4-2.82V23a3.009,3.009,0,0,0-3-3H26a3.009,3.009,0,0,0-3,3v7a3.009,3.009,0,0,0-3,3,2.974,2.974,0,0,0,.78,2,2.954,2.954,0,0,0,0,4,2.954,2.954,0,0,0,0,4A2.974,2.974,0,0,0,20,45a3.009,3.009,0,0,0,3,3v1a3.009,3.009,0,0,0,3,3H38a3.009,3.009,0,0,0,3-3V48H56v8H8V23.76L31.48,9.62a1.02,1.02,0,0,1,1.04,0L56,23.76V35ZM23,36h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm-1-3a1,1,0,0,1,1-1h2a1,1,0,0,1,0,2H23A1,1,0,0,1,22,33Zm1,7h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm0,4h2a1,1,0,0,1,0,2H23a1,1,0,0,1,0-2Zm2,4a3.009,3.009,0,0,0,3-3h8a1,1,0,0,0,1-1V34a1,1,0,0,0-1-1H35a3.99,3.99,0,0,0-7.58-1.75A2.956,2.956,0,0,0,25,30V23a1,1,0,0,1,1-1H38a1,1,0,0,1,1,1V49a1,1,0,0,1-1,1H26a1,1,0,0,1-1-1Zm2.22-9a2.954,2.954,0,0,0,0-4H35v8H27.22a2.954,2.954,0,0,0,0-4ZM29,33a2,2,0,0,1,4,0ZM33.55,7.91a2.979,2.979,0,0,0-3.1,0L5.34,23.03a1.018,1.018,0,0,1-.8.1.972.972,0,0,1-.61-.51l-.21-.41A1.021,1.021,0,0,1,4.1,20.9L31.49,4.47a1,1,0,0,1,1.02,0L59.9,20.9a1.021,1.021,0,0,1,.38,1.31l-.21.41a.972.972,0,0,1-.61.51,1.018,1.018,0,0,1-.8-.1Z"></path></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Book Number</h5>
<h4 class="ad-card-title" th:text="${book_count}">15k</h4>
</div>
</div>
</div>
</div>
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g id="hand_·_ecommerce_·_shopping_·_online_·_sale" data-name="hand · ecommerce · shopping · online · sale"><path d="M61,52H59V23a3.009,3.009,0,0,0-3-3H49V9a1,1,0,0,0-1-1H45a5.992,5.992,0,0,0-8.5-5.45A5.992,5.992,0,0,0,28,8H24a1,1,0,0,0-1,1V20H8a3.009,3.009,0,0,0-3,3V52H3a1,1,0,0,0-1,1v4a5,5,0,0,0,5,5H57a5,5,0,0,0,5-5V53A1,1,0,0,0,61,52ZM45,25V10h2V27a3.009,3.009,0,0,1-3,3H42.89A6.97,6.97,0,0,0,45,25ZM39,4a4,4,0,0,1,4,4H40a6.016,6.016,0,0,0-1.49-3.95A3.87,3.87,0,0,1,39,4Zm-2.5.9A3.976,3.976,0,0,1,38,8H35A3.976,3.976,0,0,1,36.5,4.9ZM34,4a3.87,3.87,0,0,1,.49.05A6.016,6.016,0,0,0,33,8H30A4,4,0,0,1,34,4Zm-9,6h3v2a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2V10h8v2a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2V10h3V25a5,5,0,0,1-5,5H30a5,5,0,0,1-5-5ZM23.08,26A7,7,0,0,0,30,32H44a5,5,0,0,0,5-5V26h4V48H11V46h5a1,1,0,0,0,1-1v-.14l.93.62a2.952,2.952,0,0,0,1.68.52H34.46a2.925,2.925,0,0,0,1.5-.4l13.4-7.73a3.006,3.006,0,0,0,1.1-4.1,3.011,3.011,0,0,0-4.1-1.1l-6.43,3.71A2.993,2.993,0,0,0,37,34H29.3l-.2-.13A10.972,10.972,0,0,0,17,33.8V33a1,1,0,0,0-1-1H11V26ZM11,44V34h4V44Zm20-4h6a2.982,2.982,0,0,0,1.98-.77l8.39-4.83a1.006,1.006,0,0,1,1.49.86.992.992,0,0,1-.5.87L34.95,43.87a.922.922,0,0,1-.49.13H19.61a1.023,1.023,0,0,1-.56-.17L17,42.46V36a.967.967,0,0,0,.55-.17l.46-.3a8.975,8.975,0,0,1,9.98,0l.46.3A.967.967,0,0,0,29,36h8a1,1,0,0,1,.71,1.7.01.01,0,0,0-.01.01A.991.991,0,0,1,37,38H31a1,1,0,0,0,0,2ZM7,23a1,1,0,0,1,1-1H23v2H10a1,1,0,0,0-1,1V49a1,1,0,0,0,1,1H54a1,1,0,0,0,1-1V25a1,1,0,0,0-1-1H49V22h7a1,1,0,0,1,1,1V52H7ZM36,54v1a1,1,0,0,1-1,1H29a1,1,0,0,1-1-1V54Zm24,3a3.009,3.009,0,0,1-3,3H7a3.009,3.009,0,0,1-3-3V54H26v1a3.009,3.009,0,0,0,3,3h6a3.009,3.009,0,0,0,3-3V54H60Z"></path><path d="M29.293,26.707a1,1,0,0,0,1.414,0l8-8a1,1,0,0,0-1.414-1.414l-8,8A1,1,0,0,0,29.293,26.707Z"></path><circle cx="30" cy="20" r="2"></circle><circle cx="38" cy="24" r="2"></circle></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Borrow Number</h5>
<h4 class="ad-card-title" th:text="${borrow_list.size()}">420k</h4>
</div>
</div>
</div>
</div>
<!-- Start Card-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card ad-info-card">
<div class="card-body dd-flex align-items-center">
<div class="icon-info">
<svg enable-background="new 0 0 64 64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><path d="m28 60c4.962 0 9-4.038 9-9s-4.038-9-9-9-9 4.038-9 9 4.038 9 9 9zm0-16c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7z"></path><path d="m26 53h-2c0 1.654 1.346 3 3 3v1h2v-1c1.654 0 3-1.346 3-3s-1.346-3-3-3v-2c.551 0 1 .449 1 1h2c0-1.654-1.346-3-3-3v-1h-2v1c-1.654 0-3 1.346-3 3s1.346 3 3 3v2c-.551 0-1-.449-1-1zm0-4c0-.551.449-1 1-1v2c-.551 0-1-.449-1-1zm3 3c.551 0 1 .449 1 1s-.449 1-1 1z"></path><path d="m62 29h-9v-4.08c3.387-.488 6-3.401 6-6.92v-4c0-.552-.448-1-1-1-2.548 0-4.775 1.373-6 3.413-1.225-2.04-3.452-3.413-6-3.413-.552 0-1 .448-1 1v4c0 3.519 2.613 6.432 6 6.92v4.08h-18v-5h3c3.86 0 7-3.14 7-7 0-.552-.448-1-1-1h-4c-1.958 0-3.728.81-5 2.11v-5.169c4.493-.5 8-4.317 8-8.941v-2c0-.552-.448-1-1-1-3.483 0-6.505 1.993-8 4.896-1.495-2.903-4.517-4.896-8-4.896-.552 0-1 .448-1 1v2c0 4.624 3.507 8.441 8 8.941v5.169c-1.272-1.3-3.042-2.11-5-2.11h-4c-.552 0-1 .448-1 1 0 3.86 3.14 7 7 7h3v5h-18v-4.08c3.387-.488 6-3.401 6-6.92v-4c0-.552-.448-1-1-1-2.548 0-4.775 1.373-6 3.413-1.225-2.04-3.452-3.413-6-3.413-.552 0-1 .448-1 1v4c0 3.519 2.613 6.432 6 6.92v4.08h-1c-.552 0-1 .448-1 1v5h-3c-.552 0-1 .448-1 1v3h-3c-.552 0-1 .448-1 1v22c0 .552.448 1 1 1h52c.552 0 1-.448 1-1v-3h3c.552 0 1-.448 1-1v-5h3c.552 0 1-.448 1-1v-22c0-.552-.448-1-1-1zm-5-13.899v2.899c0 2.415-1.721 4.435-4 4.899v-2.899c0-2.415 1.721-4.435 4-4.899zm-10 2.899v-2.899c2.279.464 4 2.485 4 4.899v2.899c-2.279-.464-4-2.484-4-4.899zm-9 0h2.899c-.464 2.279-2.485 4-4.899 4h-2.899c.464-2.279 2.484-4 4.899-4zm-10 4c-2.415 0-4.435-1.721-4.899-4h2.899c2.415 0 4.435 1.721 4.899 4zm11-18.929v.929c0 3.521-2.612 6.442-6 6.929v-.929c0-3.521 2.612-6.442 6-6.929zm-14 .929v-.929c3.388.487 6 3.408 6 6.929v.929c-3.388-.487-6-3.408-6-6.929zm-8 11.101v2.899c0 2.415-1.721 4.435-4 4.899v-2.899c0-2.415 1.721-4.435 4-4.899zm-10 2.899v-2.899c2.279.464 4 2.485 4 4.899v2.899c-2.279-.464-4-2.484-4-4.899zm46 43h-50v-20h50zm4-4h-2v-17c0-.552-.448-1-1-1h-47v-2h50zm4-6h-2v-15c0-.552-.448-1-1-1h-47v-4h50z"></path><path d="m6 59h12v-2h-11v-12h11v-2h-12c-.552 0-1 .448-1 1v14c0 .552.448 1 1 1z"></path><path d="m51 58v-14c0-.552-.448-1-1-1h-12v2h11v12h-11v2h12c.552 0 1-.448 1-1z"></path><path d="m46 54c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1h-6c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1zm-5-4h4v2h-4z"></path><path d="m10 48c-.552 0-1 .448-1 1v4c0 .552.448 1 1 1h6c.552 0 1-.448 1-1v-4c0-.552-.448-1-1-1zm5 4h-4v-2h4z"></path></g></svg>
</div>
<div class="icon-info-text">
<h5 class="ad-title">Total Revenue</h5>
<h4 class="ad-card-title">10k</h4>
</div>
</div>
</div>
</div>
students.html:
<!-- Table Start -->
<div class="row">
<!-- Styled Table Card-->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card table-card">
<div class="card-header pb-0">
<h4>Students List</h4>
</div>
<div class="card-body">
<div class="chart-holder">
<div class="table-responsive">
<table class="table table-styled mb-0">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Sex</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr th:each="student : ${students_list}">
<td th:text="'#' + ${student.getSid()}">Scott Henry</td>
<td th:text="${student.getName()}">Scott Henry</td>
<td th:text="${student.getSex()}">Scott Henry</td>
<td th:text="${student.getGrade()}">
+(00) 4512 451<br>
scotthenry@gamil.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
