오늘 배운 것
1. 관리자로 로그인했을 때는 MyShop 메뉴에서 '상품 등록'만 나오게 하고,
관리자기 아닌 경우에는 MyShop 메뉴에서 '상품 목록'만 나오게 하기
2. 상품 등록, 상품 조회(카테고리별 조회), 그 외 화면 꾸미기
사실 두가지 다 부트스트랩만 새로운 것들을 쓴 것 말고는 다 했던 것을 복습한 것이었다. 그래도 예전에는 복습하는 내용도 막힐 때가 많았는데 오늘은 손가락이 좀 잘 움직였다!!
테이블 생성
shop 테이블
create table shop (shopnum smallint auto_increment primary key,
category varchar(30),
sangpum varchar(50),
photo varchar(50),
price int,
ipgoday varchar(20))
cart 테이블
create table cart (idx smallint auto_increment primary key,
shopnum smallint,
num smallint,
cnt int,
cartday date,
foreign key (shopnum) references shop(shopnum) on delete cascade,
foreign key (num) references member(num) on delete cascade)
원래 테이블에서 smallint로 저장했다면 foreign key로 받아오는 경우에 int로 하면 오류가 뜬다. 동일하게 smallint로 넣어줘야 한다.
로그인 상태에 따라 다른 메뉴 보이기
layout/menu.jsp
(먼저 admin/1111 관리자 계정으로 회원 가입을 해준 뒤 진행한다.)
//세션 로그인 상태 확인
String loginok = (String)session.getAttribute("loginok");
//세션에 저장된 아이디
String myid = (String)session.getAttribute("myid");java 부분에 session에 저장된 정보로 로그인 상태를 확인하는 loginok, id를 확인하는 myid를 선언해주고 html 부분에서 조건을 준다.
<li><a href="#">MyShop</a>
<ul class="sub-menu">
<%
if(loginok!=null && myid.equals("admin")){
%>
<li><a href="index.jsp?main=shop/addform.jsp">상품등록</a></li>
<%}else{%>
<li><a href="index.jsp?main=shop/shoplist.jsp">상품목록</a></li>
<%}
%>
</ul>
</li>loginok!=null => loginok가 not null, 즉 loginok 속성이 null이 아니라면 id, password 확인 과정을 완료하고 로그인이 되어 있다는 뜻
myid.equals("admin") => 로그인한 계정 아이디가 'admin'인지 확인
*loginok와 myid는 login/loginaction.jsp에서 session에 저장된 상태
admin 계정으로 로그인된 것이 확인되면 위처럼 MyShop 메뉴에서 '상품등록'이 뜬다.
admin 계정이 아니거나 로그아웃 상태이면 위처럼 MyShop 메뉴에서 '상품목록'이 뜬다.
'상품등록' 메뉴에서는 'shop/addform.jsp'로, '상품목록' 메뉴에서는 'shop/shoplist.jsp'로 가게 한다.
상품 등록 - insert
ShopDao.java
String sql = "insert into shop (category, sangpum, photo, price, ipgoday) values(?,?,?,?,?)";addform.jsp
<div>
<form action="shop/addaction.jsp" method="post" enctype="multipart/form-data">
<table class="table table-bordered" style="width: 600px;">
<caption><b>상품등록</b></caption>
<tr>
<td style="width: 150px; background-color: pink;">카테고리</td>
<td>
<select style="width: 200px;" name="category" class="form-control" required="required">
<option value="아우터">아우터</option>
<option value="상의">상의</option>
<option value="하의">하의</option>
<option value="원피스">원피스</option>
<option value="악세사리" selected="selected">악세사리</option>
</select>
</td>
</tr>
<tr>
<td style="width: 150px; background-color: pink;">상품명</td>
<td><input type="text" name="sangpum" class="form-control" style="width: 200px;" required="required"> </td>
</tr>
<tr>
<td style="width: 150px; background-color: pink;">상품이미지</td>
<td><input type="file" name="photo" class="form-control" style="width: 300px;" required="required"> </td>
</tr>
<tr>
<td style="width: 150px; background-color: pink;">상품가격</td>
<td><input type="text" name="price" class="form-control" style="width: 200px;" required="required"> </td>
</tr>
<tr>
<td style="width: 150px; background-color: pink;">입고일</td>
<td><input type="date" name="ipgoday" style="width: 200px;" required="required"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-info" id="btnadd" style="width: 100px;">상품저장</button>
<button type="button" class="btn btn-info" style="width: 100px;" onclick="location.href='index.jsp?main=shop/shoplist.jsp'">상품목록</button>
</td>
</tr>
</table>
</form>
</div>
<form action="shop/addaction.jsp" method="post" enctype="multipart/form-data"> 이미지를 업로드해야 하기 때문에 enctype = "multipart/form-data"를 추가해줘야 한다.
form의 action에 addaction.jsp를 넣어놨으니 하단의 '상품저장' 버튼의 type은 submit으로 준다. 이제 입력한 값들을 db에 추가하기 위한 addaction.jsp를 만들어보자.
addaction.jsp
<%
//이미지가 업로드 될 실제 경로
String realPath = getServletContext().getRealPath("/shopsave"); //
System.out.println(realPath); //콘솔창 확인해서 이미지 들어갔는지 확인
//업로드사이즈
int uploadSize = 1024*1024*10; //10mb
try{
//생성자 파라메타
//request, 업로드폴더, 업로드사이즈, 한글타입, new DefaultFileRenamePolicy(같은 이름에 (2), (3)붙여서 저장하기)
MultipartRequest multi = new MultipartRequest(request,realPath, uploadSize, "utf-8", new DefaultFileRenamePolicy() );
//입력값 읽기
String category = multi.getParameter("category");
String sangpum = multi.getParameter("sangpum");
String photo = multi.getFilesystemName("photo");
int price = Integer.parseInt(multi.getParameter("price"));
String ipgoday = multi.getParameter("ipgoday");
//dto에 담기
ShopDto dto = new ShopDto();
dto.setCategory(category);
dto.setSangpum(sangpum);
dto.setPhoto(photo);
dto.setPrice(price);
dto.setIpgoday(ipgoday);
//db선언
ShopDao dao = new ShopDao();
//insert 호출
dao.insertShop(dto);
//목록으로 이동
response.sendRedirect("../index.jsp?main=shop/addform.jsp");
}catch(Exception e){
System.out.println("업로드 오류"+e.getMessage());
}
%>이제 이정도는 알 때가 됐다!
상품 전체 출력
ShopDao.jsp
try {
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
ShopDto dto = new ShopDto();
dto.setShopnum(rs.getString("shopnum"));
dto.setCategory(rs.getString("category"));
dto.setSangpum(rs.getString("sangpum"));
dto.setPhoto(rs.getString("photo"));
dto.setPrice(rs.getInt("price"));
dto.setIpgoday(rs.getString("ipgoday"));
//리스트에 추가
list.add(dto);
}shoplist.jsp
<%
ShopDao dao = new ShopDao();
List<ShopDto> list = dao.getAllSangpums();
%>ShopDao를 선언해주고, dao.getALlSangpums()를 통해 전체 목록을 출력한다.
이번에는 부트스트랩을 사용해보았다.
전체 목록에서는 Shop 테이블에 저장되어있는 모든 데이터들을 확인할 수 있고, 각 탭에 따라 아우터/상의/하의/원피스/악세사리만 구분하여 카테고리별로 볼 수 있게 해보자
우리가 사용할 Tab의 부트스트랩이다. 이 부트스트랩을 적용하기 위해서는
이 부트스트랩을 jquery 밑에 복붙해주는걸 잊지 말아야 한다.
암튼... 부트스트랩에서 필요한 부분들을 수정해주고, 각 탭에 따라 원하는 화면이 나오도록 html을 작성해준다.
<table class="table table-bordered shoptable" style="width: 800px;">
<caption><b>전체상품 목록</b></caption>
<tr>
<%
//가격 단위표시
NumberFormat nf = NumberFormat.getCurrencyInstance();
int i = 0; //인덱스 i
for(ShopDto dto:list){
//첫번째 사진
String photo = dto.getPhoto();
//할인율: 20~50% 랜덤으로 나타내기
int sale = (int)(Math.random()*31)+20; //20에서 50까지의 난수 발생
%>
<td>
<a href="" style="cursor: pointer;" class="godetail">
<img alt="" src="shopsave/<%=photo%>" class="photo">
<br>
<%=dto.getSangpum() %>
<br>
<b style="color: red; font-size: 1.3em;"><%=sale %>%</b>
<span style="float: right;">
<div style="color: black;">
<%
int price = (int)(dto.getPrice()-(dto.getPrice()*(sale/100.0)));
%>
<strike><%=nf.format(dto.getPrice()) %>원</strike></div>
<div style="color: blue;"><%=nf.format(price) %>원</div></span>
</a>
</td>
<%
i++;
if((i+4)%4==0){
%>
</tr><tr>
<%
}
}
%>
</tr>
</table>
</div>
전체 목록 조회를 했을 때의 화면이다.
다른 태그에서 각 카테고리별로 조회를 하고 싶다면 동일한 코드에
if(dto.getCategory().equals("아우터")){ } 를 추가하면 된다.
