Lập trình Spring Boot: Xây dựng Dự án BookStore bằng Spring JDBC, Thymeleaf - P2

Trong bài viết tiếp theo này, các bạn học java web sẽ lập trình chức năng quản lý chủ đề trong dự án BookStore sử dụng spring jdbc, thymeleaf trong lập trình Spring Boot bằng công cụ Intellij IDEA.

Ở bài viết Lập trình Spring Boot: Xây dựng Dự án BookStore bằng Spring JDBC, Thymeleaf, các bạn học lập trình java web với spring boot đã tạo được dự án spring boot, xây dựng được các lớp mô tả với các bảng tương ứng trong cơ sở dữ liệu mysql. Các bạn có thể xem bài viết trước: tại đây. Trong bài viết này chúng ta tiếp tục xây dựng các lớp xử lý nghiệp vụ trong dự án BookStore.

1. Lập trình xử lý dữ liệu với Spring Data JDBC

Trong package vn.com.stanford.stanford_workingjdbcspringboot.model đầu tiên tạo lớp giao diện IHanhDong để khai báo những xử lý chính trong mỗi lớp mà mình sẽ cần dùng như sau:

package vn.com.stanford.stanford_workingjdbcspringboot.model;
import java.util.List;
 
public interface IHanhDong <T, idT>{
    List<T> getList();
 
    T getById(idT id);
 
    boolean add(T obj);
 
    boolean update(T obj);
 
    boolean delete(idT id);
}

 

1.1. Lập trình lớp xử lý dữ liệu chủ đề sách

Bạn cần tạo một lớp có tên ChuDeImpl triển khai từ giao diện ChuDeDao và sử dụng các hàm được JdbcTemplate trong Spring MVC cung cấp để làm việc với bảng chude trong mysql với các nội dung như sau:

package vn.com.stanford.stanford_workingjdbcspringboot.model;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.EmptyResultDataAccessException;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;
import vn.com.stanford.stanford_workingjdbcspringboot.entities.ChuDe;
import vn.com.stanford.stanford_workingjdbcspringboot.entities.ChuDeMapper;
import java.util.List;
 
@Repository("chuDeDao")
public class ChuDeImpl implements ChuDeDao{
    @Autowired
    private JdbcTemplate jdbcTemplate;
 
    @Override
    public List<ChuDe> getList() {
        String sql = "SELECT * FROM ChuDe";
        return jdbcTemplate.query(sql, new ChuDeMapper());
    }
 
    @Override
    public ChuDe getById(String maCD) {
        try {
            String sql = "SELECT * FROM ChuDe WHERE MaChuDe = ?";
            return jdbcTemplate.queryForObject(sql, new ChuDeMapper(), maCD);
        } catch (EmptyResultDataAccessException e) {
            System.err.println("Không tìm thấy thông tin chủ đề. Chi tiết: " + e.getMessage());
            return null;
        }
    }
 
    @Override
    public boolean add(ChuDe obj) {
        String sql = "INSERT INTO ChuDe (MaChuDe, TenChuDe) VALUES (?, ?)";
        jdbcTemplate.update(sql, obj.getMaChuDe(), obj.getTenChuDe());
 
        return true;
    }
 
    @Override
    public boolean update(ChuDe obj) {
        String sql = "UPDATE ChuDe SET TenChuDe= ? WHERE MaChuDe = ? ";
        jdbcTemplate.update(sql, obj.getTenChuDe(), obj.getMaChuDe());
 
        return true;
    }
 
    @Override
    public boolean delete(String id) {
 
        String sql = "DELETE FROM ChuDe WHERE MaChuDe = '" + id + "'";
        jdbcTemplate.update(sql);
 
        return true;
    }
}
Trong đó lớp giao diện ChuDeDao như sau:

 

 

package vn.com.stanford.stanford_workingjdbcspringboot.model;
 
import vn.com.stanford.stanford_workingjdbcspringboot.entities.ChuDe;
 
public interface ChuDeDao extends IHanhDong<ChuDe, String> {
}

 

1.2. Lập trình xử lý nghiệp vụ chủ đề sách

Trong package vn.com.stanford.stanford_workingjdbcspringboot.controller xây dựng các hàm chức năng chính bao gồm: lấy danh sách, hiển thị thông tin chi tiết, thêm mới, sửa thông tin và xóa thông tin chủ đề như sau:

package vn.com.stanford.stanford_workingjdbcspringboot.controller;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import vn.com.stanford.stanford_workingjdbcspringboot.entities.ChuDe;
import vn.com.stanford.stanford_workingjdbcspringboot.model.ChuDeDao;
 
@Controller
public class ChuDeController {
 
    @Autowired
    private ChuDeDao chuDeDao;
    @RequestMapping(value={"/", "/admin/chude"})
    public String listCustomer(Model model) {
        model.addAttribute("lstChuDe", chuDeDao.getList());
        return "admin/DanhSachChuDe";
    }
 
    @RequestMapping("/admin/chude/them")
    public String themMoiChuDe(Model model) {
        model.addAttribute("chuDe", new ChuDe());
        return "admin/ChuDeAdd";
    }
 
    @RequestMapping(value="/admin/themChuDe", method = RequestMethod.POST)
    public String thucHienThemChuDe(@ModelAttribute("ChuDe") ChuDe objCD, Model model) {
 
        ChuDe chuDe = chuDeDao.getById(objCD.getMaChuDe());
 
        if(chuDe != null)
        {
            chuDeDao.update(objCD);
            return "redirect:/admin/chude";
        }
        else
        {
            chuDeDao.add(objCD);
            return "redirect:/admin/chude/them";
        }
    }
 
    @RequestMapping("/admin/chude/sua/{id}")
    public String suaChuDe(@PathVariable String id, Model model) {
        ChuDe chuDe = chuDeDao.getById(id);
        model.addAttribute("chuDe", chuDe);
        return "admin/ChuDeAdd";
    }
 
    @RequestMapping("/admin/chude/xoa/{id}")
    public String xoaChuDe(@PathVariable String id, Model model) {
        chuDeDao.delete(id);
 
        return "redirect:/admin/chude";
    }
 
}

2. Thiết kế giao diện và lập trình chức năng quản lý chủ đề sách

Trong phần này, chúng ta sẽ sử dụng thymeleaf để trình bày giao diện và gọi các chức năng của chủ đề sách. Các bạn học lập trình spring boot thực hiện theo hướng dẫn chi tiết từng bước dưới đây:

2.1. Giao diện danh sách chủ đề sách

Sau khi tạo một trang web có tên DanhSachChuDe.html trong dự án, bạn cần khai báo sử dụng thymeleaf và tài nguyên js, css như sau:


Thiết kế giao diện hiển thị danh sách chủ đề sách như sau:

<div class="row">
    <div class="col-md-12">
        <div style="width:100%; text-align:center;margin-bottom:5px;">
            <h2 style="text-transform: uppercase;">Danh sách chủ đề</h2>
        </div>
        <div style="width:100%; text-align:right;margin-bottom:5px;">
            <a th:href="@{/admin/chude-add}" class="btn btn-primary">Thêm mới</a>
        </div>
        <div class="tile">
            <div class="tile-body">
                <table id="sampleTable" class="table table-bordered table-striped"
                       style="width: 100%; border-collapse: collapse;">
                    <thead>
                    <tr>
                        <th>Mã chủ đề</th>
                        <th>Tên chủ đề</th>
                        <th style="width:150px;"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="c : ${lstChuDe}">
 
                        <td>[[${c.maChuDe}]]</td>
                        <td>[[${c.tenChuDe}]]</td>
                        <td>
                            <a class="btn btn-xs btn-info" th:href="@{'/admin/chude-edit/' + ${c.maChuDe}}">Sửa</a>
                              
                            <a onclick="return confirm('Bạn có chắc chắn muốn xóa thông tin này ?');" class="btn btn-xs btn-danger" th:href="@{'/admin/chude-delete/' + ${c.maChuDe}}">Xóa</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

2.2. Giao diện thêm, sửa thông tin chủ đề sách

Lập trình xử lý hiển thị giao diện thêm mới và sửa thông tin chủ đề sách bằng cách tạo một trang web có tên ChuDeAdd.html và viết đoạn code dưới đây:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thêm mới, sửa chủ đề</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <div style="width:100%; text-align:right;margin-bottom:5px;">
            <a th:href="@{/admin/chude-add}" class="btn btn-primary">Thêm mới</a>
        </div>
        <div class="tile">
            <div class="tile-body">
                <form action="#" method="post" th:action="@{/admin/themChuDe}" th:object="${chuDe}">
                    <fieldset>
                        <legend>Nhập thông tin chủ đề</legend>
                        <div class="container-fluid">
                            <div class="row">
                                <label class="col-md-2">
                                    Mã chủ đề:
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" th:field="*{maChuDe}"/>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-2">
                                    Tên chủ đề:
                                </label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" th:field="*{tenChuDe}"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-4">
                                    <input type="submit" class="btn btn-primary" name="btnCapNhat" value="Cập nhật"/>
                                      
                                    <a th:href="@{/admin/chude}" class="btn btn-primary">Trở về</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-10">
                                    <span class="text-warning">[[${message}]]</span><br>
 
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3. Giao diện hiển thị của quản lý thông tin chủ đề sách

Sau khi bạn đã lập trình đầy đủ các nghiệp vụ, chức năng và thiết kế giao diện chủ đề ở trên, bạn thực hiện chạy dự án BookStore của bạn trên Intellij IDEA sẽ có giao diện như sau:


Hình 1: Giao diện danh sách chủ đề sách


Hình 2: Giao diện thêm mới, sửa thông tin chủ đề

Hy vọng qua bài viết này các bạn đã hiển hơn về Spring Data JDBC trong Spring Boot cũng như xây dựng cho mình một dự án BookStore đầy đủ các chức năng với bảng dữ liệu chủ đề sách. Bài viết tiếp theo Stanford sẽ tiếp tục hướng dẫn bạn lập trình quản lý thông tin sách với Spring Data JDBC, Thymeleaf trong Spring Boot. Chúc các ban thành công !

Bên cạnh đó nếu bạn đang muốn được đào tạo bài bản từ cơ bản đến nâng cao có thể tham gia ngay khóa học lập trình java fullstack cùng chuyên gia giàu kinh nghiệm Stanford tại đây: http://bit.ly/2SLPYFF và nhận ưu đãi hấp dẫn của Stanford trong thời gian này. Bạn có thể gọi theo hotline: 0963 723 236 - 0866 586 366 để được gọi lại tư vấn trực tiếp nhé.

=============================
☎ STANFORD – ĐÀO TẠO VÀ PHÁT TRIỂN CÔNG NGHỆ
Hotline: 0963 723 236 - 0866 586 366
Website: https://stanford.com.vn
Facebook: http://bit.ly/2FN0TYb
Youtube: http://bit.ly/2TkKT7I

Tags: spring boot, spring data jdbc, học spring boot