Web bán hàng bằng Spring MVC – Thống kê dữ liệu

Tiếp tục loạt bài hướng dẫn xây dựng Web bán hàng bằng Spring MVC thì Team Việt Dev sẽ trình bày phần thống kê dữ liệu về đơn hàng, hóa đơn, sản phẩm.

Ở phần trước mình đã hướng dẫn các bạn thực hiện thiết kế giao diện quản lý, đăng nhập, quản lý sản phẩm trong Web bán hàng bằng Spring MVC, bây giờ chúng ta tiếp tục với phần xây dựng tính năng thống kê dữ liệu về hóa đơn, sản phẩm, đơn hàng.

Biểu đồ luôn là công cụ hữu hiệu nhằm thể hiện dữ liệu trực quan nhất, trong Web bán hàng bằng Spring MVC mình sẽ sử dụng Google Charts, Google Charts cung cấp rất nhiều những dạng đồ thị khác nhau như biểu đồ cột, biểu đồ miền, biểu đồ đường…

Bước 1: Đầu tiên chúng ta sẽ thiết kế giao diện trang thống kê dữ liệu, bạn cần lựa chọn dạng biểu đồ phù hợp trong Google Charts.

Truy cập trang https://developers.google.com/chart/interactive/docs/quick_start?hl=vi để lựa chọn mẫu biểu đồ phù hợp nhất với Web bán hàng bằng Spring MVC  của bạn.

Bước 2: Viết các phương thức để thống kê dữ liệu từ cơ sở dữ liệu của bạn, ở đây mình sẽ làm ví dụ về thống kê dữ liệu danh sách đơn hàng trong 10 ngày gần nhất.

Lớp ReportDAO.java

package com.teamvietdev.dao;

import com.teamvietdev.bean.MyItem;
import java.util.Date;
import java.util.List;

/**
 *
 * @author TVD
 */
public interface ReportDAO {
    
    public List<MyItem> reportReceipt(Date date, int limit);
    
}

Lớp ReportDAOImpl.java

package com.teamvietdev.dao;

import com.teamvietdev.bean.MyItem;
import com.teamvietdev.util.HibernateUtil;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.springframework.stereotype.Repository;

/**
 *
 * @author TVD
 */
@Repository
public class ReportDAOImpl implements ReportDAO {

    @Override
    public List<MyItem> reportReceipt(Date date, int limit) {
        List<MyItem> list = new ArrayList<>();
        for (int i = limit - 1; i >= 0; i--) {
            Date d = subDays(date, i);
            MyItem myItem = new MyItem();
            myItem.setTime(covertD2S(d));
            myItem.setValue(countItemByDate(d));
            list.add(myItem);
        }
        return list;
    }

    private int countItemByDate(Date date) {
        Session session = HibernateUtil.getSessionFactory().openSession();
        Transaction transaction = null;
        try {
            transaction = session.beginTransaction();
            Query query = session.createQuery("SELECT count(*) FROM receipt WHERE DATE_FORMAT(receiptDate,'%Y-%m-%d') = :date");
            query.setDate("date", date);
            Long obj = (Long) query.uniqueResult();
            transaction.commit();
            return obj.intValue();
        } catch (Exception ex) {
            if (transaction != null) {
                transaction.rollback();
            }
            ex.printStackTrace();
        } finally {
            session.flush();
            session.close();
        }
        return 0;
    }

    public static Date addDays(Date date, int days) {
        GregorianCalendar cal = new GregorianCalendar();
        cal.setTime(date);
        cal.add(Calendar.DATE, days);
        return cal.getTime();
    }

    public static Date subDays(Date date, int days) {
        GregorianCalendar cal = new GregorianCalendar();
        cal.setTime(date);
        cal.add(Calendar.DATE, -days);
        return cal.getTime();
    }

    private String covertD2S(Date date) {
        DateFormat df = new SimpleDateFormat("dd/MM/yyy");
        return df.format(date);
    }

}

Lớp ReportService.java

package com.teamvietdev.service;

import com.teamvietdev.bean.MyItem;
import java.util.Date;
import java.util.List;

/**
 *
 * @author TVD
 */
public interface ReportService {
    
    public List<MyItem> reportReceipt(Date date, int limit);
    
}

Lớp ReportServiceImpl.java

package com.teamvietdev.service;

import com.teamvietdev.bean.MyItem;
import com.teamvietdev.dao.ReportDAO;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 *
 * @author TVD
 */
@Service
public class ReportServiceImpl implements ReportService {

    @Autowired
    private ReportDAO reportDAO;

    @Override
    public List<MyItem> reportReceipt(Date date, int limit) {
        return reportDAO.reportReceipt(date, limit);
    }

}

Mở tập tin dispatcher-servlet.xml và thêm đoạn mã cấu hình sau:

<bean id="reportDAO" class="com.teamvietdev.dao.ReportDAOImpl" />
<bean id="reportService" class="com.teamvietdev.service.ReportServiceImpl" />

Bước 3: Tạo lớp ControllerReportManage.java xử lý dữ liệu khi người dùng xem thống kê dữ liệu trong Web bán hàng bằng Spring MVC.

package com.teamvietdev.controller;

import com.teamvietdev.bean.MyItem;
import com.teamvietdev.service.ReportService;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 *
 * @author TVD
 */
@Controller
@RequestMapping(value = "manages/report")
public class ControllerReportManage {

    @Autowired
    private ReportService reportService;

    @RequestMapping(value = "receipt.html", method = RequestMethod.GET)
    public String viewReceipt(ModelMap mm, HttpSession session) {
        Date date = new Date();
        List<MyItem> listItem = reportService.reportReceipt(date, 7);
        System.out.println(listItem.toString());
        mm.put("listReceipt", listItem);
        return "manages/report_receipt";
    }

}

Trang report_receipt.jsp bạn sẽ hiển thị dữ liệu, trong ví dụ mẫu mình sẽ hiển thị dữ liệu biểu đồ đường và biểu đồ cột như sau:

Biểu đồ đường (line):

<div class="span-2c">  
       <h3 class="tlt">Line Chart</h3>
       <canvas id="viewchart1" height="300" width="400" style="width: 400px; height: 300px;"></canvas>
       <script>
             var lineChartData = {
                  labels: [<c:forEach var="item" items="${listReceipt}">'${item.time}',</c:forEach>],
                  datasets: [
                       {
                             fillColor: "#FC8213",
                             data: [<c:forEach var="item" items="${listReceipt}">${item.value},</c:forEach>]
                       }
                  ]

             };
             new Chart(document.getElementById("viewchart1").getContext("2d")).Line(lineChartData);
       </script>
/div>

Biểu đồ cột (bar):

<div class="span-2c">  
     <h3 class="tlt">Bar Chart</h3>
     <canvas id="bar" height="300" width="400" style="width: 400px; height: 300px;"></canvas>
     <script>
           var barChartData = {
                labels: [<c:forEach var="item" items="${listReceipt}">'${item.time}',</c:forEach>],
                datasets: [
                     {
                          fillColor: "#FC8213",
                          data: [<c:forEach var="item" items="${listReceipt}">${item.value},</c:forEach>]
                     }
                ]
           };
           new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
     </script>
</div>

Khởi chạy để xem kết quả sau khi thực hiện thống kê dữ liệu trong Web bán hàng bằng Spring MVC:

Tải mã nguồn tại đây:

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết trong loạt bài hướng dẫn xây dựng web bán hàng bằng Spring MVC… miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)