Dev/Spring boot

스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (6. select option 콤보박스, jstl c:if, c:forEach, fn 사용)

uragil 2022. 11. 29. 17:23
반응형

book_input페이지

도서명 장르 작가를 입력받아 db에 저장

bcode-책 번호는 seq를 만들어서 입력 시 1부터 순차적으로 부여 

bstate- 대여상태와 rdate-반납예정일 brcount-대여 횟수는 대여 발생 시 업데이트하도록 설계

 

form을 이용하여 입력을 받고 input.js 의 breg_frm에서 간단한 validation 작업 후 DB에 INSERT

 

input.js

 function inputCheck() {
	if(document.breg_frm.bname.value.length == 0) {
		alert("도서타이틀을 입력해주세요");
		breg_frm.bname.focus();
		return;		
	}
	
	if(document.breg_frm.bcategori.value.length == 0) {
		alert("도서장르를 입력해주세요.");
		breg_frm.bcategori.focus();
		return;		
	}

	document.breg_frm.submit();
}

book_input.jsp 전체 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/input.js"></script>
<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/content.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/member.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/menu.css?after">
</head>
<body>

	<%@ include file="include/header.jsp" %>

	<center>	
	<table width="70%" border="0" cellspacing="0" cellpadding="0">
		<tr height="300">
			<td bgcolor="#bbb" align="center" height="500">
				<form action="book_inputOk" method="get" name="breg_frm">
				<table>
					<table bgcolor="#fff" height="120" width="300" cellspacing="10px">
					
						<tr align="center">
							<td colspan="2" >
							<span class="content05">도서정보 입력</span>
							</td>
						</tr>
						<tr align="right">
							<td>
									<span class="content03" >도서명 :</span>
							</td>
							<td >
								<input  type="text" name="bname">
							</td>
							
						<tr align="right">
							<td  >
									<span class="content03">장르 :</span>
							</td>
							<td  >
								<input  type="text" name="bcategori">
							</td>
						</tr>
						<tr align="right">
							<td>
									<span class="content03">작가 :</span>
							</td>
							<td>
								<input  type="text" name="bwriter">
							</td>
						</tr>
						<tr>
							<td colspan="2" align="right">
								<input class="button01" type="button" value="도서정보 입력" onclick="inputCheck()">
							</td>
						</tr>
						<tr>
							<td colspan="2" align="right">
								<input class="button03" type="button" value="도서정보" onclick="location.href='book_list'">
								<input class="button03" type="button" value="대출정보" onclick="location.href='br_list'">
								<input class="button03" type="button" value="HOME" onclick="location.href='home'">
							</td>
						</tr>					
						</table>						
					</table>
					</form>
		</tr>
	</table>
	</center>
<%@ include file="include/footer.jsp" %>	

</body>
</html>

 

controller

book_input이 들어오면 book_input 으로 보내고

form action으로 book_inputok로 request에 담겨 넘어온 인수들을 받아 bname/bcategori/bwriter에 저장

 

b_inputDao에 저장한 값을 param에 넣어서 dao.b_inputDao 호출하여 Insert 실행 

 dao.b_inputDao(bname, bcategori, bwriter);

 

Controller(b_input, b_inputok)

	@RequestMapping(value="/book_input")
	public String book_input() {
		
		return "book_input";
	}
	
	
	@RequestMapping(value ="/book_inputOk")
	public String b_inputOk(HttpServletRequest request, Model model) {
		
		String bname = request.getParameter("bname");
		String bcategori = request.getParameter("bcategori");
		String bwriter = request.getParameter("bwriter");
			
		IDao dao = sqlSession.getMapper(IDao.class);
        dao.b_inputDao(bname, bcategori, bwriter);		
		return "redirect:book_list";
	}

Dao

public void b_inputDao(String bname, String bcategori, String bwriter);

mapper

bcode, bname, bcategori, bwriter 4개의 칼럼에 INSERT 하는 쿼리

b_book_seq.nextval를 통해 bcode를 넣어주고 나머지 칼럼은 param으로 받아서 입력

<insert id="b_inputDao">
		INSERT INTO b_book (bcode, bname, bcategori, bwriter)VALUES(b_book_seq.nextval, #{param1},#{param2},#{param3})
	</insert>

 

 

book_list 페이지

book table에 입력된 도서들을 select 하여 보여준다. 

타이틀의 내용이 안보이는건 css가 이상하게 적용돼서 흰 글씨로 되어있어서 그렇다. 

 

jstl c:forEach , c:if문과 fn으로 문자열을 처리 (특정 글자 수까지만 출력)를 사용하기 위하여 taglib를 호출

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

 

option value 값을 받아 select 문에 where 조건을 이용하여 목록을 출력할 수 있도록 넣어 주었다. 

select option value를 이용하여 콤보박스를 만들고 

<form action="book_list"> 
         <select name="searchOption">
            <option value="title">제목</option>
             <option value="categori">장르</option>
             <option value="writer">저자</option>
           </select> 

keyword 입력폼과 submit button 생성
      <input type="text" name="searchKeyword" >
      <input type="submit" value="검색">

 

bdto에 담긴 b_list 끝날 때까지  <c:forEach></c:forEach> 문 반복

<c:forEach items="${b_list }" var="bdto">

 

bcode btitle bcategori bwriter bstate rdate 순서로 출력

<td  class="board02">${bdto.bcode}</td>

 

세션 값 확인하여 관리자 아이디로 로그인한 경우 책 제목 클릭 시 책정보 수정 페이지 인 b_modify로 연결

<%
String id=(String)session.getAttribute("id");
if(id.equals("admin")){
%>

<td  class="board03"><a href="b_modifyView? bcode=${bdto.bcode }">${bdto.bname}</a></td>
<%
} else{
%>
<td  class="board03">${bdto.bname}</a></td>
<%
}
%>
<td  class="board02">${bdto.bcategori}</td>
<td  class="board02">${bdto.bwriter }</td>

 

bstate값을 확인하여 css를 달리 적용하기 위해 c:if 문 사용하였다.

<c:if test="${bdto.bstate !=null}">
<td  class="board04">${bdto.bstate }</td>
</c:if>

 

 

fn:substring을 사용하여 rdate를 2~11자리만 출력하였다.

그렇지 않으면 YY/mm/dd/hh/mm/ss로 전체가 출력

<c:out value="${fn:substring(bdto.rdate,2,11)}"/>
</c:forEach>

 

book_list.jsp 전체

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/content.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/member.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/board.css?after">

<title>책 정보 목록</title>
</head>
<body>

	<%@ include file="include/header.jsp" %>

	<center>	
	<table width="75%" border="0" cellspacing="0" cellpadding="10" >
		<tr>
			<td align="center"></td>
		</tr>
		<tr>
			<td align="center" height=""></td>
		</tr>
					<table border="0" cellspacing="0" cellpadding="10">
							<tr>
								
								<td colspan="2"align="left">
								<span class="content01">도서정보 목록</span></td>
								<form action="book_list"> 
								
								<td colspan="4" align="right">
								
								<select name="searchOption">
           							<option value="title">제목</option>
            						<option value="categori">장르</option>
            						<option value="writer">저자</option>
          						</select> 
							      <input type="text" name="searchKeyword" >
							      <input type="submit" value="검색">
							   </td>
							   </form>
							</tr>
							<tr class="board01">
								<th >도서코드</th>
								<th width="250px" >타이틀</th>
								<th >장르</th>
								<th >저자</th>
								<th >대출상태</th>
								<th >반납예정일</th>
							</tr>
							
							<c:forEach items="${b_list }" var="bdto">
							<tr class="" align="center">
								<td  class="board02">${bdto.bcode}</td>
								<%
								String id=(String)session.getAttribute("id");
								if(id.equals("admin")){
								%>
								<td  class="board03"><a href="b_modifyView?bcode=${bdto.bcode }">${bdto.bname}</a></td>
								<%
								} else{
									%>
									<td  class="board03">${bdto.bname}</a></td>
								<%
								}
								%>
								
								
								<td  class="board02">${bdto.bcategori}</td>
								<td  class="board02">${bdto.bwriter }</td>
								
								<c:if test="${bdto.bstate !=null}">
								<td  class="board04">${bdto.bstate }</td>
								</c:if>
								
								<c:if test="${bdto.rdate == null}">
								<td  class="board05">${bdto.bstate }</td>
								</c:if>
								
								<c:if test="${bdto.bstate !=null}">
								<td  class="board04"><c:out value="${fn:substring(bdto.rdate,2,11)}"/></td>
								</c:if>
								
								<c:if test="${bdto.rdate == null}">
								<td  class="board05"><c:out value="${fn:substring(bdto.rdate,2,11)}"/></td>
								</c:if>
								   
							          
							</c:forEach>
							</tr>
							<tr >
							<td colspan="6"  align="right">
							<hr>
								<%
								String id=(String)session.getAttribute("id");
								if(id.equals("admin")){
								%>
								
								<input class="button07" type="button" value="도서입력" onclick="location.href='book_input'">&nbsp;&nbsp;
								<input class="button03" type="button" value="대출열람" onclick="location.href='br_list'">&nbsp;&nbsp;
								<input class="button03" type="button" value="홈으로" onclick="location.href='home'">
								<%
								}else{
								%>
								
								<input class="button03" type="button" value="대출열람" onclick="location.href='mbr_list'">&nbsp;&nbsp;
								<input class="button03" type="button" value="홈으로" onclick="location.href='home'">	
								<%
								}
								%>
							</td>
						</tr>				

					</table>
				</form>
		</tr>
	</table>
	</center>
<%@ include file="include/footer.jsp" %>	
</body>
</html>

controller

from에서 request 에 담긴 searchOption(콤보 박스)와 keyword를 저장

String searchKeyword = request.getParameter("searchKeyword");
String searchOption = request.getParameter("searchOption");

String mid = request.getParameter("mid");

 

bookDto들이 담긴 bDtos와 bDtos1 BorrowDto들이 담긴 brDtos를 만들고

ArrayList <BookDto> bDtos = null;
ArrayList <BookDto> bDtos1 = null;
ArrayList <BorrowDto> brDtos = null;

 

옵션과 키워드가 없으면 순차적으로 dao.b_listDao() >> dao.b_listDao1()>>dao.br_listDao()를 호출

로직 때문에 순서가 바뀌면 문제가 된다.

if(searchOption == null || searchKeyword == null) {
bDtos = dao.b_listDao();
bDtos1 = dao.b_listDao1();
brDtos = dao.br_listDao();

 

옵션과 키워드가 들어오면 해당 키워드를 받아 dao를 호출
} else {
if(searchOption.equals("title")) {
//제목 특정 키워드 검색한 결과
bDtos = dao.TitleSearchlistDao(searchKeyword);
} else if(searchOption.equals("categori") ) {
//장르 특정 키워드 검색한 결과
bDtos = dao.CategoriSearchlistDao(searchKeyword);
} else {
//글쓴이에서 특정 키워드 검색한 결과
bDtos = dao.WriterSearchlistDao(searchKeyword);
}
}

 

b_list , br_list를모델에 담아 보낸다.
model.addAttribute("b_list", bDtos);
model.addAttribute("br_list", brDtos);

 

controller(book_list)

@RequestMapping(value ="/book_list")
	public String book_list(HttpServletRequest request,  Model model) {
		
		String searchKeyword = request.getParameter("searchKeyword");
		String searchOption = request.getParameter("searchOption");
		String mid = request.getParameter("mid");
		System.out.println(searchKeyword);		
		
		IDao dao = sqlSession.getMapper(IDao.class);
		HttpSession session = request.getSession();
		
		ArrayList<BookDto> bDtos = null;
		ArrayList<BookDto> bDtos1 = null;
		ArrayList<BorrowDto> brDtos = null;
		
		if(searchOption == null || searchKeyword == null) {
			bDtos = dao.b_listDao();
			bDtos1 = dao.b_listDao1();
			brDtos = dao.br_listDao();
			
		} else {
			if(searchOption.equals("title")) {
				//제목 특정 키워드 검색한 결과
				bDtos = dao.TitleSearchlistDao(searchKeyword);
			} else if(searchOption.equals("categori") ) {
				//장르 특정 키워드 검색한 결과
				bDtos = dao.CategoriSearchlistDao(searchKeyword);
			} else {
				//글쓴이에서 특정 키워드 검색한 결과
				bDtos = dao.WriterSearchlistDao(searchKeyword);
			}
		}
		
		model.addAttribute("b_list", bDtos);
		model.addAttribute("br_list", brDtos);

		return "book_list";
		
	}

 

Dao

	public ArrayList<BookDto> b_listDao();//리스트 가져오기
    public ArrayList<BookDto> b_listDao1();//리스트 가져오기
	public void b_inputDao(String bname, String bcategori, String bwriter);
	
	public ArrayList<BookDto> TitleSearchlistDao(String keyword);
	public ArrayList<BookDto> CategoriSearchlistDao(String keyword);
	public ArrayList<BookDto> WriterSearchlistDao(String keyword);

 

mapper

전체 list를 출력하는 query 와 

option 검색을 위해 입력 받은 key 값을 param으로 받아 select 하는 query 

b_listDao1은 brcount-대여횟수를 내림차순으로 select 하여 출력(top 3에 사용)

	<select id="b_listDao" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book ORDER BY bcode DESC
	</select>

	<select id="TitleSearchlistDao" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book WHERE bname LIKE '%'|| #{param1} ||'%' ORDER BY bname ASC  
	</select>
	
	<select id="CategoriSearchlistDao" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book WHERE bcategori LIKE '%'|| #{param1} ||'%' ORDER BY bcategori ASC  
	</select>
	
	<select id="WriterSearchlistDao" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book WHERE bwriter LIKE '%'|| #{param1} ||'%' ORDER BY bwriter ASC  
	</select>
    
    <select id="b_listDao1" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book ORDER BY brcount DESC
	</select>

 

b_modify

infomodify와 같은 내용

 

b_modifyView.jsp 전체

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script type="text/javascript" src="${pageContext.request.contextPath }/resources/js/input.js"></script>
<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/content.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/main.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/member.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/header.css?after">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/menu.css?after">
</head>
<body>

	<%@ include file="include/header.jsp" %>

	<center>	
	<table width="70%" border="0" cellspacing="0" cellpadding="10">
		<tr height="530">
			<td bgcolor="#bbb" align="center" height="500">
				<form action="b_modifyOk" method="get" name="breg_frm">
				<table>
					<table bgcolor="#fff" height="120" width="300" cellspacing="10px">
					
						<tr align="center">
							<td colspan="2" >
							<span class="content05">도서정보 수정</span>
							</td>
						</tr>
						<input  type="hidden" name="bcode" value="${bDto.bcode}">
						<tr align="right">
							<td>
								<span class="content03" >도서명 :</span>
							</td>
							<td >
								<input  type="text" name="bname" value="${bDto.bname}">
							</td>
							
						<tr align="right">
							<td  >
									<span class="content03">장르 :</span>
							</td>
							<td  >
								<input  type="text" name="bcategori" value="${bDto.bcategori}">
							</td>
						</tr>					
						<tr align="right">
							<td>
									<span class="content03">작가 :</span>
							</td>
							<td>
								<input  type="text" name="bwriter" value="${bDto.bwriter}">
							</td>					
						</tr>									
						<tr>
							<td colspan="2" align="right">
								<input class="button01" type="button" value="수정내용 입력" onclick="inputCheck()">
							</td>
						</tr>
						<tr>
							<td colspan="2" align="right">
								<input class="button03" type="button" value="도서정보" onclick="location.href='book_list'">
								<input class="button03" type="button" value="도서입력" onclick="location.href='book_list'">
								<input class="button03" type="button" value="대출정보" onclick="location.href='br_list'">
							</td>
						</tr>					
						</table>						
					</table>
					</form>
		</tr>
	</table>
	</center>
<%@ include file="include/footer.jsp" %>	

</body>
</html>

Controller

	@RequestMapping(value ="/b_modifyView")
	public String b_modify(HttpServletRequest request, Model model) {
		
		String bcode = request.getParameter("bcode");
		IDao dao = sqlSession.getMapper(IDao.class);
		BookDto bDto = dao.modifyViewDao(bcode);
		
		model.addAttribute("bDto", bDto);
		
		
		
		return  "b_modifyView";
	}
	
	@RequestMapping(value = "/b_modifyOk")
	public String b_modifyOk(HttpServletRequest request) {
		
		IDao dao = sqlSession.getMapper(IDao.class);
		
		String bcode = request.getParameter("bcode");
		String bname = request.getParameter("bname");
		String bcategori = request.getParameter("bcategori");
		String bwriter = request.getParameter("bwriter");
		
		dao.bookModifyDao(bname, bcategori, bwriter, bcode);
		
		return "redirect:book_list";
	}

Dao

public BookDto modifyViewDao(String bcode);
	public void bookModifyDao(String bcode, String bname, String bcategori, String bwriter);

mapper

<select id="modifyViewDao" resultType="com.uragil.LMS.dto.BookDto">
		SELECT * FROM b_book WHERE bcode = #{param1}
	</select>
	
	
	<update id="bookModifyDao">
		UPDATE b_book SET bname=#{param1}, bcategori=#{param2}, bwriter=#{param3} WHERE bcode=#{param4} 	
	</update>

 

전체 프로젝트 git

https://github.com/byunjeyun/testgit.git

반응형

'Dev > Spring boot' 카테고리의 다른 글

스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (7. 대출 테이블, 도서반납)  (1) 2022.11.30
스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (4. 로그인form.jsp, controller, Dao, mapper, session이용)  (0) 2022.11.18
스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (3. 회원가입form.jsp, controller, Dao, Dto, mapper)  (0) 2022.11.17
스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (2. 프로젝트 생성. gradle, application.properties, controller, jsp 설정)  (0) 2022.11.16
스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (1. 준비와 시작)  (0) 2022.11.15

'Dev/Spring boot'의 다른글

  • 현재글스프링부트 미니 프로젝트 : Spring boot 도서관리시스템 웹 만들기 (6. select option 콤보박스, jstl c:if, c:forEach, fn 사용)

관련글

댓글

티스토리툴바