A. Giới thiệu
Website COZA STORE là một trong những trang web chuyên về những mặt hàng thời trang hiện đại, COZA STORE chuyên cung cấp các mặt hàng như quần, áo, phụ kiện, … dành cho cả nam và nữ. Với mục tiêu mang đến những sản phẩm chất lượng cao và phong cách thời thượng, COZA STORE không ngừng cập nhật các bộ sưu tập mới phù hợp với xu hướng thời trang toàn cầu.
Với giao diện bắt mắt và dễ sử dụng giúp người dùng có một trải nghiệm tuyệt vời khi mua hàng tại trang website coza store.
B. Giao diện
1. Trang chủ – Home
1.1 Mô tả
- Thanh hiển thị menu
- Sản phẩm đề xuất
- Sản phẩm mới
- Danh mục từng loại sản phẩm
- Dịch vụ cửa hàng
- Thông tin cửa hàng
- Các mục khác …
Hình ảnh
2. Trang danh mục – Category
2.1. Mô tả
- Trang danh mục là trang phân loại riêng từng thể loại sản phẩm.
- Mục đích là để giúp người dùng dễ dàng tìm kiếm danh mục sản phẩm phù hợp với nhu cầu của bản thân.
<div class="row isotope-grid">
<c:foreach items="${productList}" var="product">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<a href="ProductServlet?productId=${product.id}"><img src="${product.thumbnail}" alt="IMG-PRODUCT"></a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
${product.name}
</a>
<span class="stext-105 cl3">
$${product.price}
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="assets/images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="assets/images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</c:foreach>
</div>
2.2. Hình ảnh
3. Trang chi tiết sản phẩm – Detail
3.1. Mô tả
- Trang chi tiết sản phẩm dùng để hiển thị thông tin chi tiết của sản phẩm đó.
- Có thể hiển thị tên, giá, mô tả, mã QR của sản phẩm.
- Thêm vào giỏ hàng.
<div class="bg0 m-t-23 p-b-50"></div>
<div class="container mt-4">
<div class="row">
<div class="col-md-6 col-lg-5 mb-4">
<div class="card border-0 shadow-sm">
<div class="card-body p-0">
<div class="position-relative">
<img src="${product.thumbnail}" alt="IMG-PRODUCT" class="img-fluid rounded" style="border-radius: 15px;">
<a href="images/product-detail-01.jpg" class="position-absolute top-0 end-0 m-3 btn btn-light btn-sm rounded-circle">
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-5 p-b-30">
<form action="CartServlet" method="post">
<input type="hidden" name="action" value="create">
<input type="hidden" name="productId" value="${product.id}">
<input type="hidden" name="price" value="${product.price}">
<div class="p-r-50 p-t-5 p-lr-0-lg">
<h4 class="mtext-105 cl2 js-name-detail p-b-14">
${product.name}
</h4>
<span class="mtext-106 cl2">
$${product.price}
</span>
<p class="stext-102 cl3 p-t-23">
${product.description}
</p>
<div class="p-t-20">
<h5 class="mtext-104 cl2">QR Code Product</h5>
<img src="ProductServlet?action=getQRCode&productId=${product.id}" alt="QR Code" class="img-fluid mt-2">
</div>
<!-- Variants Section -->
<div class="p-t-20">
<h5 class="mtext-104 cl2">Variations</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="me-4">
<span class="stext-102 cl3">Size:</span>
<select name="size" class="form-select mt-2">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
</div>
</div>
<div class="p-t-33">
<div class="d-flex align-items-center">
<div class="wrap-num-product flex-w m-r-20">
<div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
<i class="fs-16 zmdi zmdi-minus"></i>
</div>
<input class="mtext-104 cl3 txt-center num-product" type="number" name="quantity" value="1" min="1">
<div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
<i class="fs-16 zmdi zmdi-plus"></i>
</div>
</div>
<button type="submit" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">
Add to cart
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<section class="bg0 p-t-23 p-b-140">
<div class="container">
<div class="p-b-10">
<h3 class="ltext-103 cl5">
Related Products
</h3>
</div>
<div class="row isotope-grid">
<c:foreach var="relatedProduct" items="${relatedProducts}" varstatus="status">
<c:if test="${status.index < 4}">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<a href="ProductServlet?productId=${relatedProduct.id}">
<img src="${relatedProduct.thumbnail}" alt="${relatedProduct.name}">
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l">
<a href="ProductServlet?productId=${relatedProduct.id}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
${relatedProduct.name}
</a>
<span class="stext-105 cl3">
$${relatedProduct.price}
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="ProductServlet?productId=${relatedProduct.id}" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="assets/images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="assets/images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</c:if>
</c:foreach>
</div>
</div>
</section>
</div>
3.2. Hình ảnh
4. Trang sản phẩm – Shop
4.1 Mô tả
- Hiển thị tất cả các phẩm có trong cửa hàng.
- Chức năng lọc sản phẩm giúp người dùng dễ dàng tìm kiếm sản phẩm theo sở thích.
<div class="flex-w flex-sb-m p-b-52">
<section id="filter" class="section-p1">
<style> form.filter {
display: flex;
align-items: center;
justify-content: flex-start;
}
#filter .form-control {
margin: 0 10px;
}
</style>
<form action="ShopServlet" method="get" class="filter">
<strong>Sort by:</strong>
<select name="property" class="form-control property">
<option value="name">Name</option>
<option value="price">Price</option>
<option value="createdAt">Time</option>
</select>
<strong>Order by:</strong>
<select name="order" class="form-control order">
<option value="asc">A-Z</option>
<option value="desc">Z-A</option>
</select>
<button type="submit" class="filter-submit btn btn-primary">Filter</button>
</form>
</section>
</div>
<div class="row isotope-grid">
<c:foreach items="${productList}" var="product">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<a href="ProductServlet?productId=${product.id}"><img src="${product.thumbnail}" alt="IMG-PRODUCT"></a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
${product.name}
</a>
<span class="stext-105 cl3">
$${product.price}
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="assets/images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="assets/images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</c:foreach>
</div>
4.2. Hình ảnh
5. Trang đăng ký – Register
5.1. Mô tả
- Thực hiện các vấn đề về tài khoản: Tạo , xác minh tài khoản.
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form method="post" action="RegisterServlet">
<h1>Registration</h1>
<span class="error">${error}</span>
<c:remove var="error" scope="session">
<!-- Email input -->
<div data-mdb-input-init="" class="form-outline mb-4">
<input type="email" name="email" id="form1Example13" class="form-control form-control-lg" required="">
<label class="form-label" for="form1Example13">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init="" class="form-outline mb-4">
<input type="password" name="password" id="form1Example23" class="form-control form-control-lg" required="">
<label class="form-label" for="form1Example23">Password</label>
</div>
<!-- Repeat Password input -->
<div data-mdb-input-init="" class="form-outline mb-4">
<input type="password" name="repeatPassword" id="form1Example24" class="form-control form-control-lg" required="">
<label class="form-label" for="form1Example24">Repeat your password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked="">
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init="" data-mdb-ripple-init="" class="btn btn-primary btn-lg btn-block">Sign Up</button>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="LoginServlet" style="color: #393f81;">Login</a></p>
</c:remove></form></div>
5.2. Hình ảnh
6. Trang đăng nhập – Login
6.1. Mô tả
- Thực hiện chức năng đăng nhập người dùng vào cửa hàng.
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form method="post" action="LoginServlet">
<h1>Login</h1>
<span class="error">${error}</span>
<c:remove var="error" scope="session">
<!-- Email input -->
<div data-mdb-input-init="" class="form-outline mb-4">
<input type="email" name="email" id="form1Example13" class="form-control form-control-lg" required="">
<label class="form-label" for="form1Example13">Email address</label>
</div>
<!-- Password input -->
<div data-mdb-input-init="" class="form-outline mb-4">
<input type="password" name="password" id="form1Example23" class="form-control form-control-lg" required="">
<label class="form-label" for="form1Example23">Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked="">
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init="" data-mdb-ripple-init="" class="btn btn-primary btn-lg btn-block">Sign in</button>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="RegisterServlet" style="color: #393f81;">Register here</a></p>
</c:remove></form></div>
6.2. Hình ảnh
7. Trang Dashboard
7.1. Mô tả
- Thống kê các thông số cửa hàng.
- Chức năng thêm sửa xoá danh mục, sản phẩm, người dùng…
7.2. Hình ảnh
Full sourcecode project
Github: https://github.com/hnmtri204/cozastore_java_project.git
Author: Hoàng Ngọc Minh Trí