1. Phân tích chức năng
Sau khi người dùng đăng nhập thành công. Người dùng chuyển hướng đến trang admin, thường mặc định hiển thị trang dashboard đầu tiên. Ở đây sẽ hiển thị những thông tin tổng quan đến hoạt động của một trang web như
- Báo cáo nhanh doanh thu
- Báo cáo nhanh tồn kho sản phẩm
- Báo cáo nhanh đơn hàng
Github Source: https://github.com/binhdev/dashmin
2. Thực thi
B1: Tạo package binh.dev.admin. Trong package admin chúng ta sẽ tạo các controller phục vụ cho trang admin
Đầu tiên tạo controller BaseAdminServlet extends HttpServlet là lớp cha cho các controller trong package admin
Đối với trang dashboard. Tạo DashboardServlet extends BaseAdminServlet
package binh.dev.admin;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;
import binh.dev.data.dao.DatabaseDao;
import binh.dev.data.dao.OrderDao;
import binh.dev.data.dao.ProductDao;
import binh.dev.data.dao.UserDAO;
import binh.dev.data.model.Order;
import binh.dev.data.model.OrderItem;
import binh.dev.data.model.Product;
import binh.dev.util.Constants;
import binh.dev.util.GetDateTime;
/**
*
* @author binhdev
*/
public class DashboardServlet extends BaseAdminServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
super.doGet(request, response);
UserDAO userDao = DatabaseDao.getInstance().getUserDao();
int numberUser = userDao.findAll().size();
ProductDao productDao = DatabaseDao.getInstance().getProductDao();
List<Product> productList = productDao.findAll();
int numberProduct = productDao.findAll().size();
OrderDao orderDao = DatabaseDao.getInstance().getOrderDao();
int numberOrder = orderDao.findAll().size();
double total = getTotal();
request.setAttribute("numberUser", numberUser);
request.setAttribute("numberProduct", numberProduct);
request.setAttribute("numberOrder", numberOrder);
request.setAttribute("total", total);
request.setAttribute("productList", productList);
List<Order> orderPendingList = orderDao.findByStatus("pending");
request.setAttribute("orderPendingList", orderPendingList);
request.setAttribute("countOrderPending", orderPendingList.size());
List<Order> orderFinishList = orderDao.findByStatus("finished");
request.setAttribute("countOrderFinish", orderFinishList.size());
// Chart
List<String> dateList = GetDateTime.getDates(Constants.NUMBER_DAY);
request.setAttribute("dateList", dateList);
List<Double> earningEachDay = new ArrayList<>();
for (int i = 0; i < Constants.NUMBER_DAY; i++) {
earningEachDay.add(orderDao.earningOrderByDay(dateList.get(i)));
}
request.setAttribute("earningEachDay", earningEachDay);
request.getRequestDispatcher("admin/dashboard.jsp").include(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
private double getTotal() {
double total = 0;
OrderDao orderDao = DatabaseDao.getInstance().getOrderDao();
List<Order> orderList = orderDao.findByStatus("finished");
for (Order order : orderList) {
List<OrderItem> orderItemList = DatabaseDao.getInstance().getOrderItemDao().findByOder(order.getId());
total += sum(orderItemList);
}
return total;
}
private double sum(List<OrderItem> orderItemList) {
double s = 0;
for (OrderItem orderItem : orderItemList) {
s += orderItem.getQuantity() * orderItem.getPrice();
}
return s;
}
}
B2: Tạo tập tin dashboard.jsp trong thư mục web/admin
<%--
Document : dashboard
Created on : May 23, 2023, 6:10:20 PM
Author : binhdev
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>CornSalad Admin - Dashboard</title>
<!-- Custom fonts for this template-->
<link href="./assets/admin/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="./assets/admin/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<%@include file="./inc/sidebar.jsp" %>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<%@include file="./inc/header.jsp" %>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
</div>
<!-- Content Row -->
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Total User</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">${numberUser} User</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Total product</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">${numberProduct} Product</div>
</div>
<div class="col-auto">
<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Order Pending
</div>
<div class="row no-gutters align-items-center">
<div class="col-auto">
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">${orderPendingList.size()} Order Pending</div>
</div>
<div class="col">
<div class="progress progress-sm mr-2">
<div class="progress-bar bg-info" role="progressbar"
style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-auto">
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Total Revenue</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">
<fmt:setLocale value = "en_US"/>
<fmt:formatNumber type="currency" value = "${total}" />
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Pending
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Finished
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
</div>
<!-- /.container-fluid -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Pending Orders</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>STT</th>
<th>Code</th>
<th>Status</th>
<th>UserId</th>
<th>#</th>
</tr>
</thead>
<tbody>
<c:set var="index" value="0"/>
<c:forEach items="${orderPendingList}" var="order">
<c:set var="index" value="${index + 1}"/>
<tr >
<td>${index}</td>
<td> <a href="OrderItemServlet?orderId=${order.id}">${order.code}</td>
<td>${order.status}</td>
<td>${order.user.email}</td>
<td>
<a href="EditOrderServlet?orderId=${order.id}">Edit</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->
<!-- Footer -->
<%@include file="./inc/footer.jsp" %>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<script>
var labels = [<c:forEach items="${dateList}" var="date">"${date}",</c:forEach>];
var data = [<c:forEach items="${earningEachDay}" var="earning">${earning},</c:forEach>];
var pieLabel = ['Pending', 'Finish'];
var pieData = [${countOrderPending}, ${countOrderFinish}];
</script>
<!-- Bootstrap core JavaScript-->
<script src="./assets/admin/vendor/jquery/jquery.min.js"></script>
<script src="./assets/admin/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="./assets/admin/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="./assets/admin/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="./assets/admin/vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="./assets/admin/js/demo/chart-area-demo.js"></script>
<script src="./assets/admin/js/demo/chart-pie-demo.js"></script>
</body>
</html>