북마켓 프로젝트 4

상세 정보와 도서 목록에 각 책 이미지 추가

Book.java 파일에 코드 추가

	private String filename; // 이미지 파일명

	public String getFilename() {
		return filename;
	}

	public void setFilename(String filename) {
		this.filename = filename;
	}

BookRepository.java 에 코드 추가

html.setFilename("ISBN1234.jpg");
java.setFilename("ISBN1235.jpg");
spring.setFilename("ISBN1236.jpg");

정적인 파일을 넣을 폴더 생성 resources

css폴더 생성

https://getbootstrap.com/docs/4.6/getting-started/download/

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

부트스트랩 적용되어있는 welcome페이지 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet"
	href="./resources/css/bootstrap.min.css" />
<title>Welcome</title>

문제없음.

다른 파일들도 이렇게 수정해준다.

정적vs동적

정적 : 처음 만들어진 상태로 거의 수정이 없는 경우

동적 : 중간 중간 수정이 일어나는 경우

이미지 파일은 동적인 파일이기 때문에 image파일을 따로 만들어야함

이미지들 upload 폴더에 저장

books.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="dto.Book"%>
<%@page import="java.util.ArrayList"%>
<!-- BookRepository객체 생성 -->
<jsp:useBean id="bookDAO" class="dao.BookRepository" scope="session" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<title>도서목록</title>
</head>
<body>
	<jsp:include page="menu.jsp" />
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">🧾 도서 목록</h1>
		</div>
	</div>

	<div class="container">
		<%
			ArrayList<Book> listBooks = bookDAO.getAllBooks();
		for (int i = 0; i < listBooks.size(); i++) {
			Book book = listBooks.get(i);
		%>
		<div class="row">
		<div class="col-md-3" align="center">
			<img src="/upload/<%=book.getFilename()%>" style="width: 100%" />
			</div>
			<div class="col-md-7">
				<p>
				<h5>
					<b>[<%=book.getCategory()%>] <%=book.getName()%></b>
				</h5>
				<p style="padding-top: 20px"><%=book.getDescription().substring(0, 100)%>...
				
				<p><%=book.getAuthor()%>
					|
					<%=book.getPublisher()%>
					|
					<%=book.getUnitPrice()%>원
			</div>
			<div class="col-md-2" style="padding-top: 70px">
				<a href="./book.jsp?id=<%=book.getBookId()%>"
					class="btn btn-secondary" role="button">상세정보 &raquo;</a>
			</div>
		</div>
		<hr>
		<%
			} // 반복문 끝나는 부분
		%>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>

상세정보에서도

이미지 출력가능하게 만들기

book.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="dto.Book"%>
<%@page import="java.util.ArrayList"%>
<!-- BookRepository객체 생성 -->
<jsp:useBean id="bookDAO" class="dao.BookRepository" scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>도서 상세 정보</title>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
</head>
<body>
	<%@ include file="menu.jsp"%>
	<div class="jumbotron">
		<div class="container">

			<h1 class="display-4">도서 정보</h1>
		</div>
	</div>
	<%
		String id = request.getParameter("id");
	Book book = bookDAO.getBookById(id);
	%>
	<div class="container">
	<div class="row">
		<div class="col-md-4">
			<img src="/upload/<%=book.getFilename()%>" style="width: 100%" />
		</div>
		<div class="col-md-8">
			<h4>
				<b>[<%=book.getCategory()%>]<%=book.getName()%></b>
			</h4>
			<p><%=book.getDescription()%>
			<p>
				<b>도서코드 : </b><span class="badge badge-danger"> <%=book.getBookId()%></span>
			<p>
				<b>저자</b> :
				<%=book.getAuthor()%>
			<p>
				<b>출판사</b> :
				<%=book.getPublisher()%>
			<p>
				<b>출판일</b> :
				<%=book.getReleaseDate()%>
			<p>
				<b>총 페이지수</b> :
				<%=book.getTotalPages()%>
			<p>
				<b>재고수</b> :
				<%=book.getUnitsInStock()%>
			<h4><%=book.getUnitPrice()%>원
			</h4>
			<p>
				<a href="#" class="btn btn-info">도서주문 &raquo;</a> <a
					href="./books.jsp" class="btn btn-secondary">도서목록 &raquo;</a>
			<hr>
		</div>
		</div>
	</div>
	<%@ include file="footer.jsp"%>
</body>
</html>

이미지 파일 업로드하기

jar 다운로드

web-inf lib 넣기

addBook.jsp 추가

submit 버튼위에 이미지 추가 div 추가 및 enctype 변경

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
</head>

</head>
<body>
	<%@ include file="menu.jsp"%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-4">도서 등록</h1>
		</div>
	</div>

	<div class="container">
		<form name="newBook" action="./processAddBook.jsp"
			enctype="multipart/form-data" class="form-horizontal" method="post">
			<div class="form-group row">
				<label class="col-sm-2">도서코드</label>
				<div class="col-sm-3">
					<input type="text" id="bookId" name="bookId" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">도서명</label>
				<div class="col-sm-3">
					<input type="text" id="name" name="name" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">가격</label>
				<div class="col-sm-3">
					<input type="text" id="unitPrice" name="unitPrice"
						class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">저자</label>
				<div class="col-sm-3">
					<input type="text" name="author" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">출판사</label>
				<div class="col-sm-3">
					<input type="text" name="publisher" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">출판일</label>
				<div class="col-sm-3">
					<input type="date" name="releaseDate" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">총페이지 수</label>
				<div class="col-sm-3">
					<input type="text" name="totalPages" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상세정보</label>
				<div class="col-sm-5">
					<textarea name="description" cols="50" rows="2"
						class="form-control" placeholder="100자 이상 적어주세요"></textarea>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">분류</label>
				<div class="col-sm-3">
					<input type="text" name="category" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">재고수</label>
				<div class="col-sm-3">
					<input type="text" id="unitsInStock" name="unitsInStock"
						class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상태</label>
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New">신규도서 <input
						type="radio" name="condition" value="Old">중고도서 <input
						type="radio" name="condition" value="EBook">E-Book
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">이미지</label>
				<div class="col-sm-5">
					<input type="file" name="bookImage" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10 ">
					<input type="submit" class="btn btn-primary" value="등록">
				</div>
			</div>
		</form>
	</div>

	<%@ include file="footer.jsp"%>
</body>
</html>

processAddBook.jsp 추가

<% //자바코드 시작지점
	
	String realFolder = "C:\\java\\upload"; // 웹 어플리케이션상의 절대 경로
	String encType = "utf-8"; // 인코딩 타입
	int maxSize = 5 * 1024 * 1024; // 최대 업로드될 파일의 크기5MB
	//입력으로(request, 파일업로드 경로, 파일최대사이즈, 인코딩타입, 파일정책)
	MultipartRequest multi = new MultipartRequest(request, realFolder, maxSize, encType, 
	new DefaultFileRenamePolicy());

MultipartRequest multi를 사용하려면 객체를 다 multi로 지정해야함.

	//MultipartRequest 객체로 모두 바꾼다. 
	String bookId = multi.getParameter("bookId");
	String name = multi.getParameter("name");
	String unitPrice = multi.getParameter("unitPrice");
	String author = multi.getParameter("author");
	String publisher = multi.getParameter("publisher");
	String releaseDate = multi.getParameter("releaseDate");
	String totalPages = multi.getParameter("totalPages");
	String description = multi.getParameter("description");
	String category = multi.getParameter("category");
	String unitsInStock = multi.getParameter("unitsInStock");
	String condition = multi.getParameter("condition");

	
	//파라미터로 넘어오면 다 문자열로 넘어오게된다. 
	Integer price;//가격을 숫자로 변환
	if (unitPrice.isEmpty()) price = 0; //가격이 없을 경우 price= 0이다
	else price = Integer.valueOf(unitPrice);//문자열을 숫자로 변환해준다
	
	long stock; //재고수를 숫자로 변환
	if (unitsInStock.isEmpty()) stock = 0;
	else stock = Long.valueOf(unitsInStock); //문자열을 숫자로 바꿔준다.
	
	Enumeration files = multi.getFileNames(); //폼 요소 중 file 속성을 가진 파라미터 이름을 Enumeration 객체로 반환합니다.
	String fname = (String) files.nextElement(); //첫번째 파라미터이름 
	String fileName = multi.getFilesystemName(fname);//실제 서버상에 업로드 된 파일 이름을 String 객체로 반환

	
	long pages;
	//도서총페이지수 없으면 0 있으면 정수변환(Long타입)
	if (totalPages.isEmpty()) pages = 0;
	else pages = Long.valueOf(totalPages);

		Book newBook = new Book();
		newBook.setBookId(bookId);
		newBook.setName(name);
		newBook.setUnitPrice(price);//숫자로 변환
		newBook.setAuthor(author);
		newBook.setPublisher(publisher);
		newBook.setReleaseDate(releaseDate);
		newBook.setTotalPages(pages);//숫자로 변환
		newBook.setDescription(description);
		newBook.setCategory(category);
		newBook.setUnitsInStock(stock);//숫자로 변환
		newBook.setCondition(condition);
		newBook.setFilename(fileName);
	
	    bookDAO.addBook(newBook);

	    //새책을 추가 후 도서목록 페이지로 이동 
		response.sendRedirect("books.jsp");

%>

등록 클릭

Java - upload폴더에 자동으로 저장됨

'BACKEND > Jsp' 카테고리의 다른 글

북마켓 프로젝트 6 (0)	2023.09.25
북마켓 프로젝트 5 (0)	2023.09.22
북마켓 프로젝트 3 (0)	2023.09.22
북마켓 프로젝트2 (0)	2023.09.22
북마켓 프로젝트 1 (0)	2023.09.22

'BACKEND > Jsp' 카테고리의 다른 글

티스토리툴바