최신글
hyeonga_code
reProject_10_사용자 상품 상세 페이지 구현 본문
반응형
reProject_09_사용자 상품 리스트 페이지 구현
2023.12.23 - [Project] - reProject_08_회원 정보 찾기 기능 구현(아이디 찾기, 비밀번호 찾기) 2023-12-22 -- 회원 기능을 완벽하게 구현하지 않았으나 다음주 금요일까지 팀원들과 하기로 한 스터디때문에
hyeonga493.tistory.com
2023-12-22
-- 회원 기능을 완벽하게 구현하지 않았으나 다음주 금요일까지 팀원들과 하기로 한 스터디때문에 상품 리스트, 상품 상세 페이지 기능부터 구현
-- 기존의 프로젝트에서는 패키지를 크게 product, admin, client로 나누어 작업했는데 product에 admin과 client의 내용이 같이 들어가 불편함이 있었으므로 product를 둘로 나누어 작업하려고 함
-- 기존 프로젝트에서 작업한 페이징 처리를 수정해서 사용
-- 상품 상세 페이지
1. client_productList.jsp 파일 작성
|
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
|
<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/w2/resources/client/client_js/client_productInfo.js"></script>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_productInfo_style.css">
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<input type="hidden" name="proPrice" value="${ product.proPrice }">
<input type="hidden" name="proName" value="${ product.proName }">
<div class="body">
<div class="product_body">
<div class="product_info">
<div class="product_main_image">
<img class="main_image" src="${ product.imageDir }${ product.imageName }"><br>
</div>
<div class="product_info_detail">
<ul class="product_info_ul">
<li class="product_info_li">
${ product.proName }
</li>
<li class="product_info_li">
<fmt:formatNumber value="${ product.proPrice }" pattern="###,### 원"/>
</li>
<li class="product_info_li">
<label for="opColor" class="product_info_label">색상</label>
<select class="select" id="opColor" onchange="select(this)">
<option value="SELECT">선택</option>
<c:forEach var="color" items="${ product.colorList }">
<option value="${ color }">${ color }</option>
</c:forEach>
</select>
</li>
<li class="product_info_li">
<label for="opSize" class="product_info_label">사이즈</label>
<select class="select" id="opSize" onchange="select(this)">
<option value="SELECT">선택</option>
<c:forEach var="size" items="${ product.sizeList }">
<option value="${ size }">${ size }</option>
</c:forEach>
</select>
</li>
<li class="product_info_optionSelect">
<section class="total_price">
<ul class="product_form_ul">
<li class="product_form_th">
총 상품 금액 :
</li>
<li class="product_form_td">
<input type="number" name="odTotal" value="0" id="odTotal" disabled="disabled"> 원
</li>
</ul>
</section>
<section id="selectOption">
</section>
</li>
<li class="product_info_li">
<form id="product_add_form">
<ul class="product_order_ul">
<li class="product_order_li">
<input class="order_btn" type="button" value="장바구니에 담기">
</li>
<li class="product_order_li">
<input class="order_btn" type="button" value="바로 주문하기">
</li>
<li class="product_order_li">
<input class="order_btn" type="button" value="찜하기">
</li>
</ul>
</form>
</li>
</ul>
</div>
</div>
<div class="product_info_menu">
<ul class="product_info_menu_ul">
<li class="product_info_menu_li">
<a id="proDetail_btn">상세 정보</a>
</li>
<li class="product_info_menu_li">
<a id="proReview_btn">리뷰</a>
</li>
<li class="product_info_menu_li">
<a id="proQna_btn">문의</a>
</li>
</ul>
</div>
<div class="product_detail">
<div class="product_detailImage">
<c:forEach var="im" items="${ product.detailImage }">
<img class="detailImage" src="${ product.imageDir }${ im }"><br>
</c:forEach>
</div>
<div class="product_content">
${ product.proContent }
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
2. ClientGetController.java 수정
/** 상품 상세 페이지 */
@RequestMapping("clientProductInfo.do")
public String clientProductInfo(@RequestParam(value = "proId", required = false)String proId, Model model) {
System.out.println("1. [ Client Post Controller ] clientProductInfo");
model.addAttribute("product", productService.clientProductInfo(proId));
return "client_productInfo";
}|
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
|
package com.w2.client.controller;
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.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.w2.client.ClientService;
import com.w2.client.ClientVO;
import com.w2.client.product.ClientProductService;
@Controller
public class ClientGetController {
@Autowired
private ClientService clientService;
@Autowired
private ClientProductService productService;
/** 사용자 메인페이지 */
@RequestMapping("clientMain.do")
public String main() {
return "client_main";
}
/** 상품 리스트 페이지 */
@RequestMapping("clientProductList.do")
public String clientProductList(@RequestParam(value = "page", required = false)Integer page,
@RequestParam(value="ordertype", required=false) String ordertype,
@RequestParam(value="gubun", required=false)String gubun, Model model) {
System.out.println("1. [ Client Get Controller ] productList");
HashMap<String, Object> check = new HashMap<String, Object>();
if(page == null || page == 0) {
check.put("page", 1);
} else {
check.put("page", (int)page);
}
check.put("table", "product");
check.put("ordertype", (String)ordertype);
check.put("gubun", (String)gubun);
List<HashMap<String, Object>> productList = productService.clientProductList(check, model);
model.addAttribute("productList", productList);
return "client_productList";
}
/** 상품 상세 페이지 */
@RequestMapping("clientProductInfo.do")
public String clientProductInfo(@RequestParam(value = "proId", required = false)String proId, Model model) {
System.out.println("1. [ Client Post Controller ] clientProductInfo");
model.addAttribute("product", productService.clientProductInfo(proId));
return "client_productInfo";
}
/** 사용자 로그인 페이지 */
@RequestMapping("clientLogin.do")
public String login() {
return "client_login";
}
/** 로그아웃 요청 */
@RequestMapping("clientLogout.do")
public String logout(HttpSession session) {
if(session != null) {
session.invalidate();
}
return "redirect:/clientMain.do";
}
/** 사용자 정보 찾기 페이지 */
@RequestMapping("clientFindInfo.do")
public String findInfo() {
return "client_findInfo";
}
/** 회원가입 페이지 */
@RequestMapping("clientSignup.do")
public String signup() {
return "client_signup";
}
/** 커뮤니티 페이지 */
@RequestMapping("clientCommunity.do")
public String community() {
return "client_community";
}
/** 마이페이지 */
@RequestMapping("clientMypage.do")
public String mypage(HttpSession session, ClientVO client, Model model) {
System.out.println("1. [ Client Get Controller ] myPage ");
HashMap<String, Object> myinfo = clientService.clientSetMypage((String)session.getAttribute("session"));
model.addAttribute("myinfo", myinfo);
return "client_mypage";
}
}
|
3. ProductService.java 인터페이스 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
package com.w2.client.product;
import java.util.HashMap;
import java.util.List;
import org.springframework.ui.Model;
public interface ClientProductService {
// 상품 목록
List<HashMap<String, Object>> clientProductList(HashMap<String, Object> check, Model model);
// 싱픔 상세
HashMap<String, Object> clientProductInfo(String proId);
}
|
4. ProductServiceImpl.java 클래스 작성
|
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
|
package com.w2.client.product.impl;
import java.util.HashMap;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.ui.Model;
import com.w2.client.product.ClientProductDAO;
import com.w2.client.product.ClientProductService;
import com.w2.util.Paging;
@Service("productService")
public class ClientProductServiceImpl implements ClientProductService {
@Autowired
public ClientProductDAO productdao;
// 상품 목록
@Override
public List<HashMap<String, Object>> clientProductList(HashMap<String, Object> check, Model model) {
System.out.println("2. [ Impl ] productList");
int currentPage;
if(check.get("page") == null || (int)check.get("page") == 0) {
currentPage = 1;
} else {
currentPage = (int)check.get("page");
}
int totalCount = productdao.searchCount(check);
Paging paging = new Paging(totalCount, currentPage, check);
int postStart = (paging.getCurrentPage()-1) * 20;
int postEnd = paging.getCurrentPage() * 20;
check.put("startPage", paging.getStartPage());
check.put("endPage", paging.getEndPage());
check.put("postStart", postStart);
check.put("postEnd", postEnd);
model.addAttribute("paging", paging);
return productdao.clientProductList(check);
}
// 상품 상세
@Override
public HashMap<String, Object> clientProductInfo(String proId) {
System.out.println("2. [ Impl ] clientProductInfo");
return productdao.clientProductInfo(proId);
}
}
|
5. ProductDAO.java 클래스 작성
|
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
|
package com.w2.client.product;
import java.util.HashMap;
import java.util.List;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
@Repository
public class ClientProductDAO {
@Autowired
private SqlSessionTemplate sqlSessionTemplate;
// 상품 리스트 조회
public List<HashMap<String, Object>> clientProductList(HashMap<String, Object> check) {
System.out.println("3. [ Product DAO ] productList");
return sqlSessionTemplate.selectList("ProductDAO.clientProductList", check);
}
// 상품 개수 확인
public int searchCount(HashMap<String, Object> check) {
System.out.println("3. [ Product DAO ] searchCount");
return sqlSessionTemplate.selectOne("ProductDAO.searchCount", check);
}
// 상품 상세
public HashMap<String, Object> clientProductInfo(String proId) {
System.out.println("3. [ Product DAO ] clientProductInfo");
HashMap<String, Object> product = sqlSessionTemplate.selectOne("ProductDAO.clientProductInfo", proId);
product.put("colorList", sqlSessionTemplate.selectList("ProductDAO.getColorList", proId));
product.put("sizeList", sqlSessionTemplate.selectList("ProductDAO.getSizeList", proId));
product.put("detailImage", sqlSessionTemplate.selectList("ProductDAO.getDetailImage", proId));
return product;
}
}
|
6. client-product-mapping.xml 파일 작성
|
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
|
<?xml version="1.0" encoding="UTF-8"?>
<!-- MyBatis 다운 파일 PDF 에서 붙여넣은 내용입니다. -->
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="ProductDAO">
<!-- 사용 가능
<sql id="미리 지정가능">지정하고 싶은 값 입력 가능</sql>
<include refid="미리 지정가능"/>
-->
<!-- 상품 리스트 -->
<select id="clientProductList" resultType="HashMap" parameterType="HashMap">
SELECT pro.proId, pro.proName, pri.proPrice, img.imageName, img.imageDir
FROM product pro
LEFT JOIN product_price pri ON pro.proId = pri.proId
LEFT JOIN product_image img ON pro.proId = img.ImageBy AND img.ImageStatus='대표'
WHERE pro.proSell = 'Y'
<choose>
<when test="gubun == 'outer'">
AND pro.proCate LIKE "11%"
</when>
<when test="gubun == 'top'">
AND pro.proCate LIKE "12%"
</when>
<when test="gubun == 'pants'">
AND pro.proCate LIKE "13%"
</when>
<when test="gubun == 'skirts'">
AND pro.proCate LIKE "14%"
</when>
<when test="gubun == 'dress'">
AND pro.proCate LIKE "15%"
</when>
</choose>
ORDER BY
<choose>
<when test="ordertype == 'proRegDate'">
pro.proRegDate DESC
</when>
<when test="ordertype == 'proCnt'">
pro.proCnt DESC
</when>
<when test="ordertype == 'proPriceH'">
pri.proPrice DESC
</when>
<when test="ordertype == 'proPriceL'">
pri.proPrice ASC
</when>
<when test="ordertype == 'proSell'">
pro.proSell ASC
</when>
<otherwise>
pro.proName ASC
</otherwise>
</choose>
<choose>
<when test="postStart == 1">
LIMIT 0,20
</when>
<otherwise>
LIMIT #{ postStart }, 20
</otherwise>
</choose>
</select>
<!-- 상품 개수 조회 -->
<select id="searchCount" resultType="int">
SELECT COUNT(*)
FROM product
JOIN product_image ON product.proId = product_image.imageBy AND product_image.imageStatus="대표"
<choose>
<when test="gubun == 'outer'">
WHERE proCate LIKE "11%"
</when>
<when test="gubun == 'top'">
WHERE proCate LIKE "12%"
</when>
<when test="gubun == 'pants'">
WHERE proCate LIKE "13%"
</when>
<when test="gubun == 'skirts'">
WHERE proCate LIKE "14%"
</when>
<when test="gubun == 'dress'">
WHERE proCate LIKE "15%"
</when>
</choose>
</select>
<!-- 상품 상세 조회 -->
<select id="clientProductInfo" parameterType="String" resultType="HashMap">
SELECT pro.proId, pro.proName, pro.proContent, pro.proCate, pro.proView, pro.proLike,
pri.proPrice, img.imageDir, img.imageName
FROM product pro
LEFT JOIN product_price pri ON pro.proId = pri.proId
LEFT JOIN product_image img ON pro.proId = img.imageBy AND img.imageStatus = "대표"
WHERE pro.proId=#{ proId }
</select>
<!-- 상품 색상 조회 -->
<select id="getColorList" resultType="String">
SELECT opColor FROM option_info
WHERE proId = #{proId}
GROUP BY opColor
</select>
<!-- 상품 사이즈 조회 -->
<select id="getSizeList" resultType="String">
SELECT opSize FROM option_info
WHERE proId = #{proId}
GROUP BY opSize
</select>
<!-- 상품 상세 이미지 조회 -->
<select id="getDetailImage" resultType="String">
SELECT imageName FROM product_image
WHERE imageBy = #{proId} AND imageStatus='상세'
</select>
</mapper>
|
7. client_productInfo_style.css 파일 수정
|
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
@charset "UTF-8";
.product_body {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.product_info {
width: 100%;
min-height: 400px;
height:auto;
display: flex;
}
.product_main_image {
width: 40%;
display: flex;
justify-content: center;
align-items: flex-start;
}
.main_image {
width: 350px;
height: 350px;
}
.product_info_detail {
width: 60%;
display: flex;
}
.product_info_ul {
width: 100%;
display: flex;
flex-direction: column;
padding-left: 10px;
align-items: center;
}
.product_info_li {
width: 95%;
height: 40px;
display: flex;
align-items: center;
margin-top: 5px;
}
.product_info_label {
width: 20%;
}
.detailImage {
width: 80%;
height: 80%;
}
.product_info_menu {
width: 80%;
height: 80px;
display: flex;
}
.product_info_menu_ul {
width: 100%;
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-evenly;
padding-left: 0px;
}
.product_info_menu_li {
width: 30%;
text-align: center;
font-size: 20px;
}
.product_info_optionSelect {
width: 95%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
}
.product_info_menu_li > a {
text-decoration: none;
color: dimgrey;
cursor: pointer;
}
.product_info_menu_li > a:hover {
color: black;
}
.product_detail {
display: flex;
flex-direction: column;
}
.product_detailImage {
display: flex;
flex-direction: column;
align-items: center;
}
.total_price {
width: 100%;
text-align: right;
}
.product_form_ul {
width: 100%;
padding-left: 0px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 20px;
list-style-type: none;
padding-top:10px;
}
.product_form_th{
width: 40%;
}
.product_form_td{
width: 60%;
}
#odTotal {
border: none;
text-align: center;
background-color: transparent;
font-size: 20px;
}
#selectOption{
width: 100%;
display: flex;
flex-direction: column;
padding-top: 10px;
min-height: 80px;
}
.selectValue {
width: 90%;
padding: 10px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.pro_btn {
width: 30px;
height: 30px;
}
#product_add_form {
width: 100%;
}
.product_order_ul {
width: 100%;
display: flex;
list-style-type: none;
padding-left: 0px;
justify-content: space-evenly;
}
.product_order_li {
width: 30%;
}
input[type="button"] {
width: 150px !important;
}
.proName {
width: 200px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
|
8. client_productInfo.js 파일 작성
|
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
|
function count(num, name) {
var cnt = parseInt($("div[name='" + name + "'] input[name='cnt" + name + "']").val());
var odTotal = parseInt($("input[name='odTotal']").val());
let proPrice = parseInt($("input[name='proPrice']").val());
if (num == 1) {
odTotal += proPrice;
cnt++;
} else if (num == 2){
odTotal -= proPrice;
cnt--;
}
if (cnt < 1) {
cnt = 0;
$("div[name='" + name + "']").remove();
}
$("div[name='" + name + "'] input[name='cnt" + name + "']").val(cnt);
$("input[name='odTotal']").val(odTotal);
}
function select(selectElement) {
var color = document.getElementById("opColor").value;
//console.log(color);
var size = document.getElementById("opSize").value;
//console.log(size);
var odTotal = parseInt($("input[name='odTotal']").val());
var proName = $("input[name='proName']").val();
if(color === "SELECT" || size === "SELECT"){
return;
}
var name= color+size;
var rename = "'" + name + "'";
if($("#"+name).length){
alert("이미 있다");
count(1, name);
} else {
var select = "";
select += "<div name='" + color + size + "' id='" + color + size + "' class='selectValue'>"
+ "<span class='proName'>" + proName + "</span> / " + color + " / " + size + " <br>"
+ "<button type='button' class='pro_btn' onclick='count(2,\"" + name +"\")'>-</button>"
+ "<input class='pro_btn' name='cnt" + name + "' style='width:35px; height:27px; margin-left:3px; margin-right:3px; text-align:center;' value=1>"
+ "<button type='button' class='pro_btn' onclick='count(1,\"" + name +"\")'>+</button>"
+ "<input type='hidden' name='opId' value='${ produce.proName }" + name + "'>"
+ "<button id='id' name='" + name + "' class='pro_btn' onclick='deleteSelected(this)' style='flozat:right; margin-left:10px;'>X</button>"
+ "</div><br>";
count(1, name);
$("#selectOption").append(select);
}
// 초기화
document.getElementById("opColor").value = "SELECT";
document.getElementById("opSize").value = "SELECT";
}
function moveToProductInfoMenu(){
document.querySelector('.product_info_menu').scrollIntoView();
}
function deleteSelected(element){
let cnt = $(element).parent().find("input[name='cnt" + element.name + "']").val();
for(let i=0; i<cnt; i++){
count(2, element.name);
}
$(element).parent().remove();
}
|
>>> 실행
-- 상품 리스트에서 상품 이름이나 이미지 클릭시 상품 상세 페이지로 이동
-- 메인 이미지 옆에 상품 정보가 출력되고 select 박스로 옵션을 선택하면 option div가 생성됩니다.
-- 수량 변경 가능하며 수량이 0이 되는 경우 생성되었던 div를 삭제
-- 이미 선택된 옵션을 동일하게 선택하는 경우 새로 생성되지 않고 수량이 증가
>> 옵션 선택
>> 상품 추가됨
반응형
'Project_WEATHERWEAR' 카테고리의 다른 글
| reProject_11_장바구니 페이지 구현 (1) | 2023.12.28 |
|---|---|
| reProject_00_작업 일지 (0) | 2023.12.27 |
| reProject_09_사용자 상품 리스트 페이지 구현 (0) | 2023.12.23 |
| reProject_08_회원 정보 찾기 기능 구현(아이디 찾기, 비밀번호 찾기) (0) | 2023.12.23 |
| reProject_07_로그인 기능 구현 (0) | 2023.12.23 |
'Project_WEATHERWEAR' Related Articles
more
