hardingadonis · GoldStarPro · Dec 4, 2023 · Dec 4, 2023 · Dec 4, 2023 · Dec 4, 2023
diff --git a/pom.xml b/pom.xml
@@ -45,6 +45,11 @@
             <artifactId>jstl</artifactId>
             <version>1.2</version>
         </dependency>
+        <dependency>
+            <groupId>commons-fileupload</groupId>
+            <artifactId>commons-fileupload</artifactId>
+            <version>1.5</version>
+        </dependency>
     </dependencies>
 
     <build>

diff --git a/src/main/java/io/hardingadonis/miu/controller/web/ProfileServlet.java b/src/main/java/io/hardingadonis/miu/controller/web/ProfileServlet.java
@@ -0,0 +1,114 @@
+package io.hardingadonis.miu.controller.web;
+
+import io.hardingadonis.miu.model.*;
+import io.hardingadonis.miu.model.detail.*;
+import io.hardingadonis.miu.services.*;
+import java.io.*;
+import java.util.*;
+import javax.servlet.*;
+import javax.servlet.annotation.*;
+import javax.servlet.http.*;
+import org.apache.commons.fileupload.*;
+import org.apache.commons.fileupload.disk.*;
+import org.apache.commons.fileupload.servlet.*;
+
+@WebServlet(name = "ProfileServlet", urlPatterns = {"/profile"})
+@MultipartConfig
+public class ProfileServlet extends HttpServlet {
+
+    public static final String UPLOAD_AVATAR_DIRECTORY = "assets/images/avatars";
+
+    public static final int MEMORY_THRESHOLD = 1024 * 1024 * 3;
+    public static final int MAX_FILE_SIZE = 1024 * 1024 * 3;
+    public static final int MAX_REQUEST_SIZE = 1024 * 1024 * 10;
+
+    @Override
+    protected void doGet(HttpServletRequest request, HttpServletResponse response)
+            throws ServletException, IOException {
+        request.setCharacterEncoding("UTF-8");
+        response.setContentType("text/html; charset=UTF-8");
+
+        User user = (User) request.getSession().getAttribute("user");
+
+        if (user == null) {
+            response.sendRedirect("login");
+            return;
+        }
+
+        request.setAttribute("gender", user.getGender().toString());
+
+        request.getRequestDispatcher("/view/web/profile.jsp").forward(request, response);
+    }
+
+    @Override
+    protected void doPost(HttpServletRequest request, HttpServletResponse response)
+            throws ServletException, IOException {
+        request.setCharacterEncoding("UTF-8");
+        response.setContentType("text/html; charset=UTF-8");
+
+        User user = (User) request.getSession().getAttribute("user");
+
+        try {
+            String uploadPath = getServletContext().getRealPath("") + UPLOAD_AVATAR_DIRECTORY;
+
+            DiskFileItemFactory factory = new DiskFileItemFactory(MEMORY_THRESHOLD, new File(System.getProperty("java.io.tmpdir")));
+
+            ServletFileUpload upload = new ServletFileUpload(factory);
+            upload.setFileSizeMax(MAX_FILE_SIZE);
+            upload.setSizeMax(MAX_REQUEST_SIZE);
+
+            List<FileItem> items = upload.parseRequest(request);
+
+            for (FileItem item : items) {
+                if (!item.isFormField() && item.getSize() > 0) {
+                    String fileName = new File(item.getName()).getName();
+                    fileName = Hash.SHA256(fileName + System.currentTimeMillis()) + "." + getFileExtension(fileName);
+
+                    String filePath = uploadPath + File.separator + fileName;
+
+                    File storeFile = new File(filePath);
+                    if (!storeFile.exists()) {
+                        item.write(storeFile);
+                        user.setAvatarPath(UPLOAD_AVATAR_DIRECTORY + File.separator + fileName);
+                    }
+                } else {
+                    switch (item.getFieldName()) {
+                        case "full-name": {
+                            String fullName = item.getString("UTF-8");
+                            user.setFullName(fullName);
+                            break;
+                        }
+
+                        case "birth-year": {
+                            int birthYear = Integer.parseInt(item.getString("UTF-8"));
+                            user.setBirthYear(birthYear);
+                            break;
+                        }
+
+                        case "gender": {
+                            UserGender gender = UserGender.create(item.getString("UTF-8"));
+                            user.setGender(gender);
+                            break;
+                        }
+                    }
+                }
+            }
+        } catch (Exception ex) {
+            System.err.println(ex.getMessage());
+        }
+
+        Singleton.userDAO.update(user);
+
+        this.doGet(request, response);
+    }
+
+    private static String getFileExtension(String fileName) {
+        int dotIndex = fileName.lastIndexOf('.');
+
+        if (dotIndex > 0 && dotIndex < fileName.length() - 1) {
+            return fileName.substring(dotIndex + 1);
+        } else {
+            return "";
+        }
+    }
+}
diff --git a/src/main/java/io/hardingadonis/miu/controller/web/SearchServlet.java b/src/main/java/io/hardingadonis/miu/controller/web/SearchServlet.java
@@ -31,6 +31,7 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
 
         request.setAttribute("products", products);
         request.setAttribute("end_page", endPage);
+        request.setAttribute("category_id", categoryID);
         request.setAttribute("pagination_str", paginationStr);
 
         request.getRequestDispatcher("/view/web/search.jsp").forward(request, response);

diff --git a/src/main/webapp/assets/css/web/profile.css b/src/main/webapp/assets/css/web/profile.css
@@ -0,0 +1,27 @@
+.option {
+    transition: background-color 0.3s;
+}
+
+.option:hover {
+    background-color: #d1d8e0;
+}
+
+.option:active {
+    background-color: rgba(109, 121, 134, 0.9);
+    color: #ffffff;
+}
+
+.option-selected {
+    background-color: rgba(165, 175, 185, 0.9);
+    color: #ffffff;
+}
+
+.form-check-input:checked {
+    background-color: #000 !important;
+    border-color: #000 !important;
+    color: #fff !important;
+}
+
+.input-field-gender {
+    display: flex;
+}
diff --git a/src/main/webapp/assets/css/web/search.css b/src/main/webapp/assets/css/web/search.css
@@ -39,7 +39,7 @@ p a:hover {
     color: #ffffff;
 }
 
-.category-slected {
+.category-selected {
     background-color: rgba(165, 175, 185, 0.9);
     color: #ffffff;
 }
@@ -72,6 +72,7 @@ p a:hover {
     padding: 8px 16px;
     text-decoration: none;
 }
+
 .product-name {
     overflow: hidden;
     white-space: nowrap;

diff --git a/src/main/webapp/assets/js/web/profileHandler.js b/src/main/webapp/assets/js/web/profileHandler.js
@@ -0,0 +1,27 @@
+const form = document.getElementById('profile-form');
+const fullNameInput = document.getElementById('full-name');
+const birthYearInput = document.getElementById('birth-year');
+
+form.addEventListener('submit', function (event) {
+    event.preventDefault();
+
+    removeExtraSpaces(fullNameInput);
+
+    this.submit();
+});
+
+birthYearInput.addEventListener('input', function () {
+    removeNonNumericCharacters(birthYearInput);
+
+    if (birthYearInput.value.length > 4) {
+        birthYearInput.value = birthYearInput.value.slice(0, 4);
+    }
+});
+
+function removeExtraSpaces(input) {
+    input.value = input.value.replace(/\s+/g, ' ').trim();
+}
+
+function removeNonNumericCharacters(input) {
+    input.value = input.value.replace(/[^0-9]/g, '');
+}
diff --git a/src/main/webapp/view/web/common/_footer.jsp b/src/main/webapp/view/web/common/_footer.jsp
@@ -20,13 +20,13 @@
                     <a href="home" class="nav-link text-dark">Hỗ trợ</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link text-muted">Cài đặt</a>
+                    <a href="profile" class="nav-link text-muted">Cài đặt</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link text-muted">Giỏ hàng</a>
+                    <a href="cart" class="nav-link text-muted">Giỏ hàng</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link text-muted">Lịch sử mua hàng</a>
+                    <a href="purchase-history" class="nav-link text-muted">Lịch sử mua hàng</a>
                 </li>
             </ul>
             <ul class="nav flex-column">

diff --git a/src/main/webapp/view/web/common/_header.jsp b/src/main/webapp/view/web/common/_header.jsp
@@ -27,10 +27,10 @@
                                 </a>
                                 <ul class="dropdown-menu">
                                     <li>
-                                        <a class="dropdown-item" href="#">Cài đặt</a>
+                                        <a class="dropdown-item" href="profile">Cài đặt</a>
                                     </li>
                                     <li>
-                                        <a class="dropdown-item" href="#">Lịch sử mua hàng</a>
+                                        <a class="dropdown-item" href="purchase-history">Lịch sử mua hàng</a>
                                     </li>
                                     <li>
                                         <hr class="dropdown-divider">

diff --git a/src/main/webapp/view/web/profile.jsp b/src/main/webapp/view/web/profile.jsp
@@ -0,0 +1,96 @@
+<%@ page contentType="text/html" pageEncoding="UTF-8" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<!DOCTYPE html>
+
+<html>
+
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
+        <link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/web/common/common.css" />
+        <link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/web/profile.css" />
+
+        <link rel="icon" type="image/x-icon" href="<%=request.getContextPath()%>/assets/images/favicon/favicon.png">
+
+        <title>Miu Shop | Thông tin chung</title>
+    </head>
+
+    <body>
+        <%@include file="common/_header.jsp" %>
+
+        <section class="py-5 my-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-3 col-sm-12 text-center">
+                        <img src="./${sessionScope.user.avatarPath}" alt="Avatar" class="img-thumbnail rounded">
+                        <h3 class="my-4">${sessionScope.user.fullName}</h3>
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a href="profile" class="nav-link text-muted option option-selected">Thông tin chung</a>
+                                <a href="delivery-address" class="nav-link text-muted option">Địa chỉ giao hàng</a>
+                                <a href="purchase-history" class="nav-link text-muted option">Lịch sử mua hàng</a>
+                                <a href="change-password" class="nav-link text-muted option">Đổi mật khẩu</a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="col-lg-9 col-sm-12">
+                        <div class="container-fluid p-3 border border-dark">
+                            <h6 class="m-3 text-center display-6">Thông tin chung</h6>
+
+                            <form id="profile-form" action="profile" method="post" enctype="multipart/form-data" class="px-5">
+                                <div class="mb-3">
+                                    <label for="full-name" class="form-label">Họ và tên</label>
+                                    <input name="full-name" class="form-control" type="text" id="full-name" value="${sessionScope.user.fullName}" required>
+                                </div>
+
+                                <div class="mb-3">
+                                    <label for="email" class="form-label">Email</label>
+                                    <input name="email" type="text" class="form-control" id="email" value="${sessionScope.user.email}" disabled required>
+                                </div>
+
+                                <div class="mb-3">
+                                    <label for="birth-year" class="form-label">Năm sinh</label>
+                                    <input name="birth-year" class="form-control" type="text" id="birth-year" value="${sessionScope.user.birthYear}" required>
+                                </div>
+
+                                <div class="mb-3 input-field-gender">
+                                    <label class="form-label me-3">Giới Tính</label>
+                                    <div class="justify-content-around d-flex">
+                                        <div class="form-check mx-3">
+                                            <input class="form-check-input" type="radio" name="gender" id="male" value="male" ${gender eq 'male' ? 'checked' : ''}>
+                                            <label class="form-check-label" for="male">Nam</label>
+                                        </div>
+                                        <div class="form-check mx-3">
+                                            <input class="form-check-input" type="radio" name="gender" id="female" value="female" ${gender eq 'female' ? 'checked' : ''}>
+                                            <label class="form-check-label" for="female">Nữ</label>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="mb-3">
+                                    <label for="formImageFile" class="form-label">Chọn ảnh avatar mới</label>
+                                    <input name="avatar-image" class="form-control" type="file" id="formImageFile" accept="image/*">
+                                </div>
+
+                                <div class="my-3 text-center">
+                                    <button type="submit" class="btn btn-outline-dark">Xác Nhận</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <%@include file="common/_footer.jsp" %>
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="<%=request.getContextPath()%>/assets/js/web/common/commonHandler.js"></script>
+        <script src="<%=request.getContextPath()%>/assets/js/web/profileHandler.js"></script>
+    </body>
+
+</html>
diff --git a/src/main/webapp/view/web/register.jsp b/src/main/webapp/view/web/register.jsp
@@ -23,8 +23,8 @@
                     <div class="row">
                         <div class="col-lg-6 col-sm-12">
                             <div class="input-field">
-                                <input name="full-name"" type="text" class="input" id="full-name" required value="${fullName}">
-                                <label for="full-name"">Họ và tên</label>
+                                <input name="full-name" type="text" class="input" id="full-name" required value="${fullName}">
+                                <label for="full-name">Họ và tên</label>
                             </div>
                             <div class="input-field">
                                 <input name="birth-year" type="text" class="input" id="birth-year" required value="${birthYear}">

diff --git a/src/main/webapp/view/web/search.jsp b/src/main/webapp/view/web/search.jsp
@@ -28,7 +28,7 @@
                     <ul class="nav flex-column">
                         <c:forEach var="category" items="${Singleton.categoryDAO.getAll()}">
                             <li class="nav-item">
-                                <a href="search?category_id=${category.ID}" class="nav-link text-muted category ${category_id == category.ID ? "category-slected": ""}">${category.name}</a>
+                                <a href="search?category_id=${category.ID}" class="nav-link text-muted category ${category_id == category.ID ? 'category-selected': ''}">${category.name}</a>
                             </li>
                         </c:forEach>
                     </ul>