Các thao tác cơ bản CRUD-Tìm kiếm-Phân trang trong Spring MVC-Hibernate-SQL Server
Đăng lúc: 11:41 PM - 28/02/2024 bởi Charles Chung - 2329Trong bài này tôi sẽ hướng dẫn các thao tác cơ bản CRUD-Tìm kiếm-Phân trang trong Spring MVC-Hibernate-SQL Server
1. Kiến thức cần có
- Thiết kế web với HTML5, CSS3, JS, JQuery, Bootstrap
- Cơ bản về Database SQL Server
- Nắm vững JavaCore
- Nắm cơ bản về JSP Servlet, Spring MVC
2. Chuẩn bị dữ liệu
- Tải tệp script tạo cơ sở dữ liệu trong SQL Server tại đây
- Tải thư mục images chứa các ảnh sản phẩm tại đây
- Tải thư mục ckeditor 3.x tại đây
3. Các thao tác thực hiện trong bài demo
- Hiển thị sản phẩm hoa
- Thêm mới, sửa sản phẩm hoa có upload ảnh và tích hợp ckeditor cho soạn thảo nội dung
- Xóa sản phẩm hoa
- Hiển thị sản phẩm hoa theo loại
- Tìm kiếm sản phẩm hoa theo loại và tên
- Tìm kiếm sản phẩm hoa theo khoảng giá
- Phân trang sản phẩm hoa theo loại
4. Các bước thực hiện
Bước 1: Tạo dự án
Mở Eclipse tạo loại project Dynamic Web Project và đặt tên "SpringHibernateSQLServer", lưu ý sinh file web.xml trong quá trình tạo
Bước 2: Convert project sang Maven Project
Kích chuột phải vào project vừa tạo -> chọn Configure->Convert to Maven Project -> Finish
Bước 3: Mở file pom.xml và cấu hình các dependency như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<dependencies> <!-- https://mvnrepository.com/artifact/javax.servlet/jstl --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!--https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.18</version> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-web --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>5.3.18</version> </dependency> <!-- https://mvnrepository.com/artifact/org.springframework/spring-orm --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>5.3.18</version> </dependency> <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>5.4.26.Final</version> </dependency> <!-- https://mvnrepository.com/artifact/com.microsoft.sqlserver/mssql-jdbc --> <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>mssql-jdbc</artifactId> <version>12.5.0.jre11-preview</version> </dependency> <!--https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.5</version> </dependency> <!-- https://mvnrepository.com/artifact/commons-io/commons-io --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.13.0</version> </dependency> </dependencies> |
Bước 4: Copy thư mục ckeditor và images đã tải về vào thư mục src/main/webapp của project
Bước 5: Tạo tệp tin spring-servlet.xml trong thư mục src/main/webapp/WEB-INF và cấu hình như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"> <!-- chỉ ra các package chứa các lớp java được đăng ký như là các bean --> <context:component-scan base-package="controllers,dao" /> <!-- chỉ tìm kiếm các bean trong cùng context application mà nó được định nghĩa --> <context:annotation-config /> <!-- mặc định các basic components được ủy quyền gửi request tới các controller --> <mvc:annotation-driven /> <!-- Cấu hình đường dẫn tài nguyên được phép truy cập --> <mvc:resources mapping="/**" location="/" /> <!-- Tạo bean xác định view sẽ được sinh ra (thư mục chứa các view, đuôi tệp tin view) --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/WEB-INF/views/" p:suffix=".jsp" /> <!-- Tạo bean xác định dữ liệu multipart khi upload file --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" /> <!-- Tạo đối tượng bean dataSource kết nối database oracle --> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="com.microsoft.sqlserver.jdbc.SQLServerDriver"></property> <property name="url" value="jdbc:sqlserver://localhost:1433;databaseName=FlowerSun;Encrypt=True;trustServerCertificate=True"></property> <property name="username" value="sa"></property> <property name="password" value="123465"></property> </bean> <!-- Tạo đối tượng bean sessionFactory cấu hình Hibernate --> <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean"> <property name="dataSource" ref="dataSource"></property> <property name="packagesToScan" value="entities"></property> <property name="hibernateProperties"> <props> <prop key="hibernate.current_session_context_class">thread</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.dialect">org.hibernate.dialect.SQLServer2008Dialect</prop> </props> </property> </bean> </beans> |
Bước 6: Mở tệp tin web.xml ở thư mục src/main/webapp/WEB-INF và cấu hình vào trong thẻ web-app như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- Cấu hình filter hỗ trợ UTF-8 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- Cấu hình Dispatcher Servlet nhận các cấu hình của Spring trong file spring-servlet.xml --> <servlet> <servlet-name>spring</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/spring-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>spring</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> |
Bước 7: Tạo các trang jsp để hiển thị dữ liệu và các lớp entities, dao, controller để xử lý logic
Tạo thư mục views trong thư mục src/main/webapp/WEB-INF để chứa các trang jsp, sau đây là cấu trúc project đầy đủ
- Tạo lớp entities/Category.java (Biểu diễn dữ liệu của bảng Categories)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
package entities; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Table(name="Categories") @Entity public class Category { @Id @Column(name="categoryid") @GeneratedValue(strategy = GenerationType.IDENTITY) private int categoryId; @Column(name="categoryname") private String categoryName; @Column(name="parentid",nullable = true) private Integer parentId; public Category() { } public Category(int categoryId, String categoryName, int parentId) { super(); this.categoryId = categoryId; this.categoryName = categoryName; this.parentId = parentId; } public int getCategoryId() { return categoryId; } public void setCategoryId(int categoryId) { this.categoryId = categoryId; } public String getCategoryName() { return categoryName; } public void setCategoryName(String categoryName) { this.categoryName = categoryName; } public Integer getParentId() { return parentId; } public void setParentId(Integer parentId) { this.parentId = parentId; } } |
- Tạo lớp entities/Flower.java (Biểu diễn dữ liệu bảng Flowers)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
package entities; import java.sql.Date; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; @Table(name="Flowers") @Entity public class Flower { @Id @Column(name="flowerid") private String flowerId; @Column(name="flowername") private String flowerName; @Column(name="unit") private String unit; @Column(name="price") private float price; @Column(name="priceold") private float priceOld; @Column(name="brief") private String brief; @Column(name="description") private String description; @Column(name="picture") private String picture; @Column(name="categoryid") private int categoryId; @Column(name="createdate") private Date createDate; @Column(name="active") private boolean active; public Flower() { } public Flower(String flowerId, String flowerName, String unit, float price, float priceOld, String brief, String description, String picture,int categoryId, Date createDate, boolean active) { super(); this.flowerId = flowerId; this.flowerName = flowerName; this.unit = unit; this.price = price; this.priceOld = priceOld; this.brief = brief; this.description = description; this.picture = picture; this.categoryId=categoryId; this.createDate = createDate; this.active = active; } public String getFlowerId() { return flowerId; } public void setFlowerId(String flowerId) { this.flowerId = flowerId; } public String getFlowerName() { return flowerName; } public void setFlowerName(String flowerName) { this.flowerName = flowerName; } public String getUnit() { return unit; } public void setUnit(String unit) { this.unit = unit; } public float getPrice() { return price; } public void setPrice(float price) { this.price = price; } public float getPriceOld() { return priceOld; } public void setPriceOld(float priceOld) { this.priceOld = priceOld; } public String getBrief() { return brief; } public void setBrief(String brief) { this.brief = brief; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public String getPicture() { return picture; } public void setPicture(String picture) { this.picture = picture; } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } public boolean isActive() { return active; } public void setActive(boolean active) { this.active = active; } public int getCategoryId() { return categoryId; } public void setCategoryId(int categoryId) { this.categoryId = categoryId; } } |
- Tạo lớp entities/FlowerPage.java (Biểu diễn trang dữ liệu lấy ra từ bảng Flowers)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package entities; import java.util.List; public class FlowerPage { private List<Flower> flowers; private int totalPages; private int pageSize; private int currentPage; public FlowerPage() { } public FlowerPage(List<Flower> flowers, int totalPages, int pageSize, int currentPage) { super(); this.flowers = flowers; this.totalPages = totalPages; this.pageSize = pageSize; this.currentPage = currentPage; } public List<Flower> getFlowers() { return flowers; } public void setFlowers(List<Flower> flowers) { this.flowers = flowers; } public int getTotalPages() { return totalPages; } public void setTotalPages(int totalPages) { this.totalPages = totalPages; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } } |
- Tạo interface dao/CategoryDAO.java (Biểu diễn nghiệp vụ làm việc với bảng Category)
1 2 3 4 5 6 |
package dao; import java.util.List; import entities.Category; public interface CategoryDAO { public List<Category> getAll(); } |
- Tạo lớp dao/CategoryImpl.java (Thực thi các nghiệp vụ từ interface CategoryDAO)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package dao; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import entities.Category; @Repository public class CategoryImpl implements CategoryDAO { //khởi tạo SessionFactory (đã cấu hình trong spring-servlet.xml) @Autowired private SessionFactory sessionFactory; @Override public List<Category> getAll() { Session session=sessionFactory.openSession(); session.beginTransaction(); List<Category> result=session.createQuery("from Category").list(); session.getTransaction().commit(); session.close(); return result; } } |
- Tạo interface dao/FlowerDAO.java (Biểu diễn nghiệp vụ làm việc với bảng Flower)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package dao; import java.util.List; import entities.Flower; import entities.FlowerPage; public interface FlowerDAO { public List<Flower> search(int cateid); public List<Flower> search(int cateid,String name); public List<Flower> search(float fromPrice,float toPrice); public FlowerPage paging(int cateid, int pageno, int pagesize); public void insert(Flower f); public void update(Flower f); public void delete(String fkey); public Flower getById(String fkey); } |
- Tạo lớp dao/FlowerImpl.java (Thực thi các nghiệp vụ từ interface FlowerDAO)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
package dao; import java.util.List; import javax.persistence.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import entities.Flower; import entities.FlowerPage; @Repository public class FlowerImpl implements FlowerDAO { @Autowired private SessionFactory sessionFactory; @Override public List<Flower> search(int cateid) { Session session=sessionFactory.openSession(); session.beginTransaction(); Query query=null; if(cateid==0) { query=session.createQuery("from Flower"); }else{ query=session.createQuery("from Flower where categoryId=:cateid"); query.setParameter("cateid",cateid); } List result=query.getResultList(); session.close(); return result; } @Override public List<Flower> search(int cateid, String name) { Session session=sessionFactory.openSession(); session.beginTransaction(); Query query=null; if(cateid==0) { query=session.createQuery("from Flower where flowerName like :name").setParameter("name", "%"+name+"%"); }else{ query=session.createQuery("from Flower where categoryId=:cateid and flowerName like :name"); query.setParameter("cateid",cateid); query.setParameter("name","%"+name+"%"); } List result=query.getResultList(); session.close(); return result; } @Override public List<Flower> search(float fromPrice, float toPrice) { Session session=sessionFactory.openSession(); session.beginTransaction(); Query query=null; if(fromPrice==0 && toPrice>0) { query=session.createQuery("from Flower where price<=:toPrice").setParameter("toPrice",toPrice); }else if(fromPrice>0 && toPrice==0) { query=session.createQuery("from Flower where price>=:fromPrice").setParameter("fromPrice",fromPrice); }else { query=session.createQuery("from Flower where price>=:fromPrice and price<=:toPrice"); query.setParameter("toPrice",toPrice); query.setParameter("fromPrice",fromPrice); } List result=query.getResultList(); session.close(); return result; } @Override public FlowerPage paging(int cateid, int pageno, int pagesize) { Session session=sessionFactory.openSession(); session.beginTransaction(); int records=0; Query query=null; if(cateid==0) { query=session.createQuery("from Flower"); records=query.getResultList().size(); query.setFirstResult((pageno-1)*pagesize).setMaxResults(pagesize).getResultList(); }else { query=session.createQuery("from Flower where categoryId=:cateid").setParameter("cateid", cateid); records=query.getResultList().size(); query.setFirstResult((pageno-1)*pagesize).setMaxResults(pagesize); } List result=query.getResultList(); FlowerPage fp=new FlowerPage(); fp.setFlowers(result); fp.setCurrentPage(pageno); fp.setPageSize(pagesize); int totalpage=records%pagesize==0?records/pagesize:(records/pagesize)+1; fp.setTotalPages(totalpage); session.close(); return fp; } @Override public void insert(Flower f) { Session session=sessionFactory.openSession(); session.beginTransaction(); session.save(f); session.getTransaction().commit(); session.close(); } @Override public void update(Flower f) { Session session=sessionFactory.openSession(); session.beginTransaction(); session.update(f); session.getTransaction().commit(); session.close(); } @Override public void delete(String fkey) { Session session=sessionFactory.openSession(); session.beginTransaction(); Flower flower= session.find(Flower.class, fkey); session.remove(flower); session.getTransaction().commit(); session.close(); } @Override public Flower getById(String fkey) { Session session=sessionFactory.openSession(); Flower emp= session.find(Flower.class, fkey); session.close(); return emp; } } |
- Tạo lớp controllers/FlowerController.java (Biểu diễn xử lý các nghiệp vụ của trang web)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
package controllers; import java.io.File; import java.io.IOException; import java.sql.Date; import java.time.LocalDate; import javax.servlet.http.HttpServletRequest; 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 org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; import dao.CategoryDAO; import dao.FlowerDAO; import entities.Flower; import entities.FlowerPage; @Controller public class FlowerController { // khởi tạo dao @Autowired CategoryDAO categoryDao; @Autowired FlowerDAO flowerDao; @RequestMapping(value = { "/", "/trang-chu" }, method = RequestMethod.GET) public String index(Model model) { model.addAttribute("page", "flowertables"); model.addAttribute("flowers", flowerDao.search(0)); return "index"; } @RequestMapping(value = "tim-theo-danh-muc") public String search(Integer cateid, Model model) { model.addAttribute("page", "flowercategories"); cateid = cateid == null ? 0 : cateid; model.addAttribute("categories", categoryDao.getAll()); model.addAttribute("cateid", cateid); model.addAttribute("flowers", flowerDao.search(cateid)); return "index"; } @RequestMapping(value = "tim-theo-ten") public String searchByName(Integer cateid, String searchname, Model model) { model.addAttribute("page", "flowersearchname"); cateid = cateid == null ? 0 : cateid; searchname = searchname == null ? "" : searchname; model.addAttribute("categories", categoryDao.getAll()); model.addAttribute("cateid", cateid); model.addAttribute("flowers", flowerDao.search(cateid, searchname)); return "index"; } @RequestMapping(value = "tim-theo-gia") public String searchByPrice(String fromPrice, String toPrice, Model model) { model.addAttribute("page", "flowersearchprice"); float from = fromPrice == null || fromPrice.equals("") ? 0 : Float.parseFloat(fromPrice); float to = toPrice == null || toPrice.equals("") ? 0 : Float.parseFloat(toPrice); model.addAttribute("flowers", flowerDao.search(from, to)); return "index"; } @RequestMapping(value = "phan-trang") public String paging(Integer cateid, Integer pageno, Model model) { cateid = cateid == null ? 0 : cateid; pageno = pageno == null ? 1 : pageno; model.addAttribute("page", "flowerpaging"); model.addAttribute("categories", categoryDao.getAll()); model.addAttribute("cateid", cateid); FlowerPage flowerPage = flowerDao.paging(cateid, pageno, 3); model.addAttribute("flowers", flowerPage.getFlowers()); model.addAttribute("totalpage", flowerPage.getTotalPages()); model.addAttribute("currentpage", pageno); return "index"; } @RequestMapping(value = "xoa/{id}") public String delete(@PathVariable("id") String id) { flowerDao.delete(id); return "redirect:/trang-chu"; } @RequestMapping(value = "sua/{id}") public String edit(@PathVariable("id") String id, Model model) { model.addAttribute("categories", categoryDao.getAll()); model.addAttribute("flower", flowerDao.getById(id)); model.addAttribute("page", "edit"); return "index"; } @RequestMapping(value = "them-moi") public String add(Model model) { model.addAttribute("flower", new Flower()); model.addAttribute("categories", categoryDao.getAll()); model.addAttribute("page", "add"); return "index"; } @RequestMapping(value = "luu", method = RequestMethod.POST) public String save(@ModelAttribute("flower") Flower flower, @RequestParam("file") MultipartFile file, Model model, HttpServletRequest req) { if (file != null && !file.isEmpty()) { String uploadRootPath = req.getServletContext().getRealPath("images"); File destination = new File(uploadRootPath + "/" + file.getOriginalFilename()); try { file.transferTo(destination); } catch (IllegalStateException | IOException e) { e.printStackTrace(); } flower.setPicture(file.getOriginalFilename()); } flower.setCreateDate(Date.valueOf(LocalDate.now())); flowerDao.insert(flower); return "redirect:/trang-chu"; } @RequestMapping(value = "cap-nhat", method = RequestMethod.POST) public String update(@ModelAttribute("flower") Flower flower,String pictureOld, @RequestParam("file") MultipartFile file, Model model, HttpServletRequest req) { if (file != null && !file.isEmpty()) { String uploadRootPath = req.getServletContext().getRealPath("images"); File destination = new File(uploadRootPath + "/" + file.getOriginalFilename()); try { file.transferTo(destination); } catch (IllegalStateException | IOException e) { e.printStackTrace(); } flower.setPicture(file.getOriginalFilename()); }else { flower.setPicture(pictureOld); } flowerDao.update(flower); return "redirect:/trang-chu"; } @RequestMapping(value = "chi-tiet/{id}") public String detail(@PathVariable("id") String id, Model model) { model.addAttribute("flower", flowerDao.getById(id)); model.addAttribute("page", "flowerdetails"); return "index"; } } |
- Tạo trang src/main/webapp/WEB-INF/views/index.jsp (hiển thị bổ cục chung của ứng dụng web)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cửa hàng hoa tươi BKAP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" /> <script src="${pageContext.servletContext.contextPath}/ckeditor/ckeditor.js"></script> <style> #content { padding: 10px; } </style> </head> <body> <div class="container"> <nav class="nav"> <a class="nav-link active" href="${pageContext.servletContext.contextPath}/trang-chu">Trang chủ</a> | <a class="nav-link" href="${pageContext.servletContext.contextPath}/tim-theo-danh-muc">Lọc theo danh mục</a> | <a class="nav-link" href="${pageContext.servletContext.contextPath}/tim-theo-ten">Tìm kiếm theo tên</a> | <a class="nav-link" href="${pageContext.servletContext.contextPath}/tim-theo-gia">Tìm kiếm theo giá</a> | <a class="nav-link" href="${pageContext.servletContext.contextPath}/phan-trang">Phân trang</a> </nav> <hr> <div id="content"> <c:if test="${!(empty page)}"> <jsp:include page="${page}.jsp"></jsp:include> </c:if> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script> </body> </html> |
- Tạo trang src/main/webapp/WEB-INF/views/flowertables.jsp (hiển thị sản phẩm hoa theo dạng bảng với các chức năng thêm/sửa/xóa/xem chi tiết)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>Hiển thị tất cả hoa</h4> <span style="color:blue">${msg}</span> <p><a href="them-moi" class="btn btn-primary">Thêm mới</a></p> <table class="table table-bordered"> <tr> <th>Mã số</th> <th>Tên hoa</th> <th>Giá</th> <th>Ảnh</th> <th>Ngày tạo</th> <th>Tình trạng</th> <th></th> </tr> <c:forEach items="${flowers}" var="f"> <tr> <td>${f.flowerId}</td> <td>${f.flowerName}</td> <td>${f.price}</td> <td><img src="images/${f.picture}" width="100"/></td> <td><f:formatDate value="${f.createDate}" pattern="dd/MM/yyyy"/> </td> <td><c:choose> <c:when test="${f.active==true}"> Còn hàng </c:when> <c:otherwise> Hết hàng </c:otherwise> </c:choose> </td> <th> <a href="sua/${f.flowerId}" class="btn btn-info">Sửa</a> <a href="xoa/${f.flowerId}" class="btn btn-danger" onclick="return confirm('Bạn có muốn xóa không?')">Xóa</a> <a href="chi-tiet/${f.flowerId}" class="btn btn-success">Chi tiết</a> </th> </tr> </c:forEach> </table> |
- Tạo trang src/main/webapp/WEB-INF/views/add.jsp (hiển thị form thêm sản phẩm hoa)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <h3>Thêm mới hoa</h3> <form:form action="luu" method="post" modelAttribute="flower" enctype="multipart/form-data"> <table class="table"> <tr> <td>Mã hoa</td> <td><form:input path="flowerId" /></td> </tr> <tr> <td>Tên hoa</td> <td><form:input path="flowerName" /></td> </tr> <tr> <td>Đơn vị tính</td> <td><form:input path="unit" /></td> </tr> <tr> <td>Loại hoa</td> <td><form:select path="categoryId" items="${categories}" itemValue="categoryId" itemLabel="categoryName"></form:select> </td> </tr> <tr> <td>Giá</td> <td><form:input path="price" value="0" /></td> </tr> <tr> <td>Giá cũ</td> <td><form:input path="priceOld" value="0" /></td> </tr> <tr> <td>Mô tả ngắn</td> <td><form:textarea path="brief"></form:textarea></td> </tr> <tr> <td>Mô tả đầy đủ</td> <td><form:textarea path="description"></form:textarea></td> </tr> <tr> <td>Ảnh</td> <td><input type="file" name="file" /></td> </tr> <tr> <td>Tình trạng</td> <td><form:checkbox path="active" checked="checked" />Còn hàng</td> </tr> <tr> <td colspan="2"><button>Lưu</button></td> </tr> </table> </form:form> <script> CKEDITOR.replace('description') </script> |
- Tạo trang src/main/webapp/WEB-INF/views/edit.jsp (hiển thị form sửa sản phẩm hoa)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <h3>Sửa hoa</h3> <form:form action="${pageContext.servletContext.contextPath}/cap-nhat" method="post" modelAttribute="flower" enctype="multipart/form-data"> <input type="hidden" name="pictureOld" value="${flower.picture}"/> <form:hidden path="createDate"/> <table class="table"> <tr> <td>Mã hoa</td> <td><form:hidden path="flowerId" /></td> </tr> <tr> <td>Tên hoa</td> <td><form:input path="flowerName" /></td> </tr> <tr> <td>Đơn vị tính</td> <td><form:input path="unit" /></td> </tr> <tr> <td>Loại hoa</td> <td><form:select path="categoryId" items="${categories}" itemValue="categoryId" itemLabel="categoryName"></form:select> </td> </tr> <tr> <td>Giá</td> <td><form:input path="price" /></td> </tr> <tr> <td>Giá cũ</td> <td><form:input path="priceOld" /></td> </tr> <tr> <td>Mô tả ngắn</td> <td><form:textarea path="brief"></form:textarea></td> </tr> <tr> <td>Mô tả đầy đủ</td> <td><form:textarea path="description"></form:textarea></td> </tr> <tr> <td>Ảnh</td> <td><input type="file" name="file" /></td> </tr> <tr> <td>Tình trạng</td> <td><form:checkbox path="active"/>Còn hàng</td> </tr> <tr> <td colspan="2"><button>Lưu</button></td> </tr> </table> </form:form> <script> CKEDITOR.replace('description') </script> |
- Tạo trang src/main/webapp/WEB-INF/views/flowerdetails.jsp (hiển thị chi tiết sản phẩm hoa)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>CHI TIẾT HOA</h4> <div class="row" style="border: 1px gray solid;border-radius:5px;"> <div class="col-3"> <img src="${pageContext.servletContext.contextPath}/images/${flower.picture}" width="95%" /> </div> <div class="col-9"> <p>${flower.flowerName}</p> <p> <span style="text-decoration: line-through; color: red">Giá cũ: <f:formatNumber value="${flower.priceOld}" /></span> Giá mới: <f:formatNumber value="${flower.price}" /> đ </p> <p>${flower.brief}</p> </div> <div class="col-12"> <h4>Mô tả</h4> <p>${flower.description}</p> <p><a href="javascript:history.back()">Quay lại</a> </div> </div> |
- Tạo trang src/main/webapp/WEB-INF/views/flowercategories.jsp (hiển thị sản phẩm hoa theo loại hoa)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>Chọn loại hoa</h4> <form action="" method="post"> <select name="cateid" onchange="forms[0].submit()" class="form-control"> <option value="0">---------Hiển thị tất cả-----------</option> <c:forEach var="c" items="${categories}"> <c:choose> <c:when test="${c.categoryId==cateid}"> <option value="${c.categoryId}" selected>${c.categoryName}</option> </c:when> <c:otherwise> <option value="${c.categoryId}">${c.categoryName}</option> </c:otherwise> </c:choose> </c:forEach> </select> </form> <hr> <table class="table table-bordered"> <tr> <th>Mã số</th> <th>Tên hoa</th> <th>Giá</th> <th>Ảnh</th> <th>Ngày tạo</th> <th>Tình trạng</th> </tr> <c:forEach items="${flowers}" var="f"> <tr> <td>${f.flowerId}</td> <td>${f.flowerName}</td> <td>${f.price}</td> <td><img src="images/${f.picture}" width="100" /></td> <td><f:formatDate value="${f.createDate}" pattern="dd/MM/yyyy" /> </td> <td><c:choose> <c:when test="${f.active==true}"> Còn hàng </c:when> <c:otherwise> Hết hàng </c:otherwise> </c:choose></td> </tr> </c:forEach> </table> |
- Tạo trang src/main/webapp/WEB-INF/views/flowersearchname.jsp (hiển thị kết quả tìm kiếm sản phẩm hoa theo loại + tên)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>Tìm kiếm theo loại và tên</h4> <form action="" method="post"> Chọn loại hoa <select name="cateid"> <option value="0">---------Hiển thị tất cả-----------</option> <c:forEach var="c" items="${categories}"> <c:choose> <c:when test="${c.categoryId==cateid}"> <option value="${c.categoryId}" selected>${c.categoryName}</option> </c:when> <c:otherwise> <option value="${c.categoryId}">${c.categoryName}</option> </c:otherwise> </c:choose> </c:forEach> </select> <input type="text" name="searchname" placeholder="Nhập tên cần tìm"/> <button class="btn btn-primary key">Tìm</button> </form> <hr> <table class="table table-bordered"> <tr> <th>Mã số</th> <th>Tên hoa</th> <th>Giá</th> <th>Ảnh</th> <th>Ngày tạo</th> <th>Tình trạng</th> </tr> <c:forEach items="${flowers}" var="f"> <tr> <td>${f.flowerId}</td> <td>${f.flowerName}</td> <td>${f.price}</td> <td><img src="images/${f.picture}" width="100" /></td> <td><f:formatDate value="${f.createDate}" pattern="dd/MM/yyyy" /> </td> <td><c:choose> <c:when test="${f.active==true}"> Còn hàng </c:when> <c:otherwise> Hết hàng </c:otherwise> </c:choose></td> </tr> </c:forEach> </table> |
- Tạo trang src/main/webapp/WEB-INF/views/flowersearchprice.jsp (hiển thị kết quả tìm kiếm sản phẩm hoa theo khoảng giá)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>Tìm kiếm theo khoảng giá</h4> <form action="" method="post"> Nhập giá từ <input type="number" name="fromPrice"/> đến giá <input type="number" name="toPrice"/> <button class="btn btn-primary key">Tìm</button> </form> <hr> <table class="table table-bordered"> <tr> <th>Mã số</th> <th>Tên hoa</th> <th>Giá</th> <th>Ảnh</th> <th>Ngày tạo</th> <th>Tình trạng</th> </tr> <c:forEach items="${flowers}" var="f"> <tr> <td>${f.flowerId}</td> <td>${f.flowerName}</td> <td>${f.price}</td> <td><img src="images/${f.picture}" width="100" /></td> <td><f:formatDate value="${f.createDate}" pattern="dd/MM/yyyy" /> </td> <td><c:choose> <c:when test="${f.active==true}"> Còn hàng </c:when> <c:otherwise> Hết hàng </c:otherwise> </c:choose></td> </tr> </c:forEach> </table> |
- Tạo trang src/main/webapp/WEB-INF/views/flowerpaging.jsp (hiển thị kết quả phân trang sản phẩm hoa theo loại)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%> <h4>Phân trang theo loại hoa</h4> <form action="${pageContext.servletContext.contextPath}/phan-trang" method="post"> Chọn loại hoa <select name="cateid" onchange="forms[0].submit()"> <option value="0">---------Hiển thị tất cả-----------</option> <c:forEach var="c" items="${categories}"> <c:choose> <c:when test="${c.categoryId==cateid}"> <option value="${c.categoryId}" selected>${c.categoryName}</option> </c:when> <c:otherwise> <option value="${c.categoryId}">${c.categoryName}</option> </c:otherwise> </c:choose> </c:forEach> </select> </form> <hr> <table class="table table-bordered"> <tr> <th>Mã số</th> <th>Tên hoa</th> <th>Giá</th> <th>Ảnh</th> <th>Ngày tạo</th> <th>Tình trạng</th> </tr> <c:forEach items="${flowers}" var="f"> <tr> <td>${f.flowerId}</td> <td>${f.flowerName}</td> <td>${f.price}</td> <td><img src="images/${f.picture}" width="100" /></td> <td><f:formatDate value="${f.createDate}" pattern="dd/MM/yyyy" /> </td> <td><c:choose> <c:when test="${f.active==true}"> Còn hàng </c:when> <c:otherwise> Hết hàng </c:otherwise> </c:choose></td> </tr> </c:forEach> </table> Trang: <c:forEach var="i" begin="1" end="${totalpage}"> <c:choose> <c:when test="${i==currentpage}"> <span> ${i} </span> </c:when> <c:otherwise> <a href="phan-trang?cateid=${cateid}&pageno=${i}"> ${i} </a> </c:otherwise> </c:choose> </c:forEach> |
Bước 8: Run và kiểm tra kết quả
- Màn hình hiển thị tất cả các loài hoa với các nút thêm/xóa/sửa/xem chi tiết (flowertables.jsp)
- Màn hình thêm mới sản phẩm hoa (add.jsp)
- Màn hình sửa sản phẩm hoa (edit.jsp)
- Màn hình hiển thị chi tiết sản phẩm hoa (flowerdetails.jsp)
- Màn hình hiển thị sản phẩm hoa theo danh mục (flowercategories.jsp)
- Màn hình hiển thị kết quả tìm kiếm sản phẩm hoa theo loại + tên (flowersearchname.jsp)
- Màn hình hiển thị kết quả tìm kiếm sản phẩm hoa theo khoảng giá (flowersearchprice.jsp)
- Màn hình hiển thị kết quả phân trang theo loại (flowerpaging.jsp)
Video đang quay
thay lời cảm ơn!
Các bài cũ hơn
- [Java-Web] Tìm hiểu về đa ngôn ngữ với Internationalization và Localization trong JSP Servlet sử dụng thư viện JSTL (04:50 PM - 26/02/2024)
- [Java Web] Lọc, phân trang, tìm kiếm dữ liệu với SQL Server trong JSP Servlet (09:24 AM - 23/02/2024)
- [Java Web] Upload file-Tích hợp CKEditor vào JSP Servlet (03:38 PM - 20/02/2024)
- [Java Web] Thêm-Xóa-Sửa dữ liệu trong SQL Server sử dụng JDBC và JSP Servlet (04:20 PM - 19/02/2024)
- [Java Web] Truy xuất dữ liệu trong SQL Server sử dụng JDBC và JSP Servlet (01:13 PM - 02/02/2024)