[6장] 연습문제


01. form 태그에 사용하는 속성에 대해 간단히 설명하시오.


action: 폼 데이터를 받아 처리하는 웹 페이지의 URL을 설정한다.

method: 폼 데이터가 전송되는 HTTP방식을 설정한다. (get 방식 or post방식)

name: 폼을 식별하기 위한 이름을 설정한다.

accept-charset: 폼 전송에 사용할 문자 인코딩을 설정한다.


02. form 태그 내에 중첩하여 사용하는 태그를 나열하고 설명하시오.


input태그: 사용자가 텍스트입력, 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그다.

select태그: 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그로, 반드시 option태그를 포함해야한다.

textarea태그: 여러 줄의 텍스트를 입력할 수 있는 태그로, 입력폼 안에 사용된 태그와 띄어쓰기가 그대로 출력된다.



03. 폼 페이지에서 전송된 데이터를 전달받는 내장 객체와 관련된 메소드는 무엇인가?


request 내장 객체


메소드

1. 요청 파라미터의 값 받기: getParameter("요청 파라미터 이름");

2. 요청 파라미터의 값을 배열로 받기: getParameterValues("요청 파라미터 이름");

3. 요청 파라미터의 전체 값 받기: 

 1) getParameterNames(): 모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration형태로 전달받는다.

 2) hasMoreElements(): Enumeration 요소가 있으면 true, 없으면 false를 반환한다.

 3) nextElement(): Enumeration 요소를 반환한다.

04. form 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.

      


1. form01.jsp 파일을 생성합니다.

- input 태그 내에 text유형을 이용하여 이름, 주소, 이메일 항목을 작성합니다.

- form 태그의 action 속성 값은 form01_process.jsp로 작성합니다.

2. form01_process.jsp 파일을 생성합니다.

- request 내장 객체의 getParameter()메소드를 이용하여 전송된 요청 파라미터 값을 받습니다.

- StringBuffer 클래스를 이용하여 전송된 요청 파라미터 값을 저장하여 출력합니다.

3. 웹 브라우저에 http://localhost:8080/Exercise/ch06/form01.jsp를 입력하여 실행결과를 확인합니다.


<코드>

1. form01.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 3행,6행은 부트스트랩 적용 과정에서 디폴트로 파일 생성시 기본 적용된 태그입니다. -->
<title>Form Processing</title>
</head>
<body>
    <!--책의 결과 화면URL에 입력 데이터정보가 없으므로 post방식임  -->
    <form action="form01_process.jsp" method="post">
        이름: <input type="text" name="name">
        <p> 주소: <input type="text" name="address">
        <p> 이메일: <input type="text" name="email">
        <p> 전송:<input type="submit" value="전송">
    </form>
</body>
</html>
cs


2. form01_process.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
    <%
        request.setCharacterEncoding("utf-8");
        String name=request.getParameter("name");
        String address=request.getParameter("address");
        String email=request.getParameter("email");
    %>
    아이디: <%=name %>
    <p> 주소: <%=address %>
    <p> 이메일: <%=email %>
</body>
</html>
cs

05. form 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행결과를 확인하시오.

  

1. form02.jsp 파일을 생성합니다.

- input 태그 내에 text 유형을 이용하여 이름, 주소, 이메일 항목을 작성합니다.

- form 태그의 action 속성 값은 form02_process.jsp로 작성합니다.

2. form02_process.jsp파일을 생성합니다.

- Enumeration 클래스를 이용하여 전송된 모든 요청 파라미터 값을 받습니다.

- StringBuffer 클래스를 이용하여 전송된 요청 파라미터 이름과 값을 저장하여 출력합니다.

3. 웹 브라우저에 http://localhost:8080/Exercise/ch06/form02.jsp를 입력하여 실행결과를 확인합니다.


<코드>

1. form02.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 3행,6행은 부트스트랩 적용 과정에서 디폴트로 파일 생성시 기본 적용된 태그입니다. -->
<title>Form Processing</title>
</head>
<body>
    <!--책의 결과 화면URL에 입력 데이터정보가 없으므로 post방식임  -->
    <form action="form02_process.jsp" method="post">
        이름: <input type="text" name="name">
        <p> 주소: <input type="text" name="address">
        <p> 이메일: <input type="text" name="email">
        <p> 전송:<input type="submit" value="전송">
    </form>
</body>
</html>
cs


2. form02_process.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
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
    <%
        request.setCharacterEncoding("utf-8");
        Enumeration en=request.getParameterNames();
        
        Enumeration em=request.getParameterNames();
        while(em.hasMoreElements())
        {
            String name=(String)em.nextElement();
            String pValue=request.getParameter(name);
            out.println(name+" : "+pValue + "<br>");
        }
        
    %>
</body>
</html>
cs


06. form 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.

   


1. form03.jsp 파일을 생성합니다.

- input 태그 내에 checkbox 유형을 이용하여 오렌지, 사과 ,바나나 항목을 작성합니다.

- form 태그의 action 속성 값은 form03_process.jsp로 작성합니다.

2. form03_process.jsp 파일을 생성합니다.

- request 내장 객체의 getParameterValues() 메소드를 이용하여 요청 파라미터 값을 전달받아 출력합니다.

3. 웹 브라우저에 http://localhost:8080/Exercise/ch06/form03.jsp를 입력하여 실행결과를 확인합니다.


<코드>

1. form03.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 3행,6행은 부트스트랩 적용 과정에서 디폴트로 파일 생성시 기본 적용된 태그입니다. -->
<title>Form Processing</title>
</head>
<body>
    <!--책의 결과 화면URL에 입력 데이터정보가 없으므로 post방식임  -->
    <form action="form03_process.jsp" method="post">
        오렌지<input type="checkbox" name="name" value="오렌지">
        사과<input type="checkbox" name="name" value="사과">
        바나나<input type="checkbox" name="name" value="바나나">
        <input type="submit" value="전송">
    </form>
</body>
</html>
cs


2. form03_process.jsp

<b>~</b> 태그를 사용하여 "선택한 과일" 문구를 굵게 표현했습니다.

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
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<b>선택한 과일</b><p>
    <%
        request.setCharacterEncoding("utf-8");
        String []fruit=request.getParameterValues("name");
        if(fruit!=null)
        {
            for(int i=0;i<fruit.length;i++)
            {
                out.println(" "+fruit[i]);
            }
        }
    %>
 
    
</body>
</html>
cs

07. 다음 조건에 맞게 도서 웹 쇼핑몰을 위한 웹 애플리케이션을 만들고 실행 결과를 확인하시오.

         


1. 생성된 BookMarket 프로젝트를 사용합니다.

2. WebContent 폴더에 상품 정보 등록 페이지 addBook.jsp 파일을 생성합니다.

- 위의 그림과 같이 입력 항목을 작성합니다.

- 신규 도서의 등록을 처리하는 processAddBook.jsp 파일을 생성합니다.

3. src 폴더의 BookRepository 클래스에 신규 도서를 저장하는 addBook() 메소드를 작성합니다.

4. 자바빈즈를 대신하여 새로 등록된 상품 목록을 가져오도록 상품 목록 페이지 products.jsp 파일을 수정합니다.

5. 자바빈즈를 대신하여 새로 등록된 상품 상세 정보를 가져오도록 상품 상세 정보 페이지 product.jsp 파일을 수정합니다.

6. 웹 브라우저에 http://localhost:8080/BookMarket/addBook.jsp를 입력하여 실행결과를 확인합니다.


<코드>

각 챕터의 쇼핑몰 프로젝트의 코드를 이용해서 내용을 추가하거나 수정한 부분이있는 jsp파일만 올렸습니다.

addBook.jsp 파일로 실행해야 상품등록 페이지가 출력됩니다.

1. addBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="dto.Book" %>

<jsp:useBean id="productDAO" class="dao.BookRepository" scope="session"/>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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">
		<form name="newProduct" action="./processAddBook.jsp"class="form-horizontal" method="post">
			<div class="form-group row">
				<label class="col-sm-2">도서 코드</label>
				<div class="col-sm-3">
					<input type="text" 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" 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" 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="text" 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"></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" 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="Refurbished"> 재생 제품
 				</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>
	<jsp:include page="footer.jsp"/>
</body>
</html>

2. BookRepository.jsp

package dao;
import java.util.ArrayList;
import dto.Book;
public class BookRepository {
	ArrayList<Book>listOfBooks=new ArrayList<Book>();
	private static BookRepository instance= new BookRepository();
	public static BookRepository getInstance() {
		return instance;
	}
	public BookRepository(){
		
		Book book1=new Book("Num1","HTML5+CSS",15000);
		book1.setDescription("워드나 PPT문서를 만들수 있나요? 그러면 문제 없습니다. 지금 바로 웹페이지에 도전하세요.");
		book1.setCategory("Hello Coding");
		book1.setPublisher("한빛미디어");
		book1.setAuthor("황재호");
		book1.setTotalPages(268);
		book1.setUnitsInStock(1500);
		book1.setReleaseDate("2018/03/07");
		
		Book book2=new Book("Num2","쉽게 배우는 자바 프로그래밍",27000);
		book2.setDescription("객체 지향의 핵심과 자바의 현대적 기능을 다루면서 초보자가 쉽게 학습할 수 있습니다.");
		book2.setCategory("IT모바일");
		book2.setPublisher("한빛아카데미");
		book2.setAuthor("우종중");
		book2.setTotalPages(308);
		book2.setUnitsInStock(2000);
		book2.setReleaseDate("2016/09/01");
		
		Book book3=new Book("Num3","스프링4 입문",27000);
		book3.setDescription("스프링은 단순히 사용 방법만 익히는것보다 아키텍쳐를 이해하는게 중요합니다!");
		book3.setCategory("IT모바일");
		book3.setPublisher("한빛미디어");
		book3.setAuthor("하세가와 유이치,오오노 와타루,토키 코헤이(권은철,전민수)");
		book3.setTotalPages(189);
		book3.setUnitsInStock(3000);
		book3.setReleaseDate("2019/05/03");
		listOfBooks.add(book1);
		listOfBooks.add(book2);
		listOfBooks.add(book3);
	}
	public ArrayList<Book> getAllProducts(){
		return listOfBooks;
	}
	public void addProduct(Book book)
	{
		listOfBooks.add(book);
	}
	public Book getBookById(String bookId)
	{
		Book bookByid=null;
		
		for(int i=0;i<listOfBooks.size();i++)
		{
			Book book=listOfBooks.get(i);
			if(book!=null&&book.getBookId()!=null&&book.getBookId().equals(bookId))
			{
				bookByid=book;
				break;
			}
		}
		return bookByid;
	}
}
3. processAddBook.jsp
<%@page import="java.util.concurrent.Flow.Publisher"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="dto.Book"%>
<%@ page import="dao.BookRepository"%>

<%
	request.setCharacterEncoding("utf-8");
	
	String bookId=request.getParameter("BookId");
	String name=request.getParameter("name");
	String unitPrice=request.getParameter("unitPrice");
	String author=request.getParameter("author");
	String publisher=request.getParameter("publisher");
	String releaseDate=request.getParameter("releaseDate");
	String totalPages=request.getParameter("totalPages");
	String description=request.getParameter("description");
	String category=request.getParameter("category");
	String unitsInStock=request.getParameter("unitsInStock");
	String condition=request.getParameter("condition");
	
	Integer price;
	
	if(unitPrice.isEmpty())
		price=0;
	else price=Integer.valueOf(unitPrice);
	
	long stock;
	if(unitsInStock.isEmpty())
		stock=0;
	else stock=Long.valueOf(unitsInStock);
	
	long pages;
	if(unitsInStock.isEmpty())
		pages=0;
	else pages=Long.valueOf(totalPages);
	
	
	BookRepository dao=BookRepository.getInstance();
	
	Book newProduct=new Book();
	newProduct.setBookId(bookId);
	newProduct.setName(name);
	newProduct.setUnitPrice(price);
	newProduct.setAuthor(author);
	newProduct.setPublisher(publisher);
	newProduct.setReleaseDate(releaseDate);
	newProduct.setTotalPages(pages);
	newProduct.setDescription(description);
	newProduct.setCategory(category);
	newProduct.setUnitsInStock(stock);
	newProduct.setCondition(condition);
	dao.addProduct(newProduct);
	response.sendRedirect("products.jsp");
	
%>

4. products.jsp

<%@page import="dao.BookRepository"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dto.Book" %>
<jsp:useBean id="BookDAO" class="dao.BookRepository" scope="session"/>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>	
<body>

<nav class="navbar navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">	
			<a class="navbar-brand" href="./welcome.jsp">Home</a>
		</div>
	</div>
</nav>

<%! String greeting="도서 목록";%>
<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">
		<%=greeting %>
		</h1>
	</div>
</div>
<%
	BookRepository dao = BookRepository.getInstance();
	ArrayList<Book> listOfBooks = dao.getAllProducts();
%>
<div class="container">
		<div class="col" align="L">
			<%for(int i=0;i<listOfBooks.size();i++){
				Book book=listOfBooks.get(i);
			%>
			<div class="col-lg">
				<h4>[<%=book.getCategory() %>] <%=book.getName() %></h4><p>
				<p><%=book.getDescription()%>
				 <a href="./product.jsp?id=<%=book.getBookId() %>"
				class="btn btn-secondary rold="button">상세 정보 &raquo</a>
				<p><%=book.getAuthor() %>|<%=book.getPublisher() %>|<%=book.getUnitPrice() %>원
			</div>
			<hr>
			<%} %>			
		</div> 
<jsp:include page="footer.jsp"/>
</body>
</html>

5. product.jsp

<%@page import="dao.BookRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="dto.Book" %>
<jsp:useBean id="productDAO" class="dao.BookRepository" scope="session"/>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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>
	<%
		String id=request.getParameter("id");
		BookRepository dao=BookRepository.getInstance();
		Book book=dao.getBookById(id);
	%>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h3>[<%=book.getCategory()%>] <%=book.getName()%></h3>
				<p><%=book.getDescription()%>
				<p><b>도서 코드:</b><span class="badge badge-danger">
				
				<%=book.getBookId() %></span>
				<p><b>출판사</b> : <%=book.getPublisher()%>
				<p><b>저자</b> : <%=book.getAuthor() %>
				<p><b>재고수</b> : <%=book.getUnitsInStock() %>
				<p><b>총 페이지수</b> : <%=book.getTotalPages() %>
				<p><b>출판일</b> : <%=book.getReleaseDate() %>
				<h4><%=book.getUnitPrice()%>원</h4>
				<p> <a href="#" class="btn btn-info"> 도서 주문&raquo</a>
				 <a href="./products.jsp" class="btn btn-secondary">도서 목록 &raquo</a>
			</div>
						
		</div> 
		<hr>
	</div>
	<jsp:include page="footer.jsp"/>
</body>
</html>
</body>
</html>



+ Recent posts