본문 바로가기
Java 웹 개발

21.10.14 - 웹 개발 입문 44일차

개발이란 2021. 10. 15. 21:41

Q. 상품 관리 홈페이지 만들기

(참고)  
최초 페이지를 index.html로 만드는 이유
= 서버 설정에 의해서 주소를 생략할 수 있다
= 서버 설정 중 web.xml(운영설정) 파일에 welcome file list 라는 속성으로 지정되어 있다.

ul(unorder list) 태그 : 같은 항목들을 나열할 때 사용하는 list 태그
ol(order list) 태그 : ul과 동일하지만 순서가 부여되는 list 태그
li(list item) 태그 : ul 안에서 항목을 정의할 때 사용하는 태그 

 

 

(1) 메인 페이지 구현

1-1 메인 페이지 index.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 관리 시스템</h1>

	<h5>
		<a href="/web08/product/insert.html">상품 등록</a>
	</h5>
	<h5>
		<a href="/web08/product/search.txt">상품 조회</a>
	</h5>

	<form action="/web08/product/search.txt">
		<fieldset>

			<legend>상품 검색</legend>

			<select name="column">
				<option value="name">이름</option>
				<option value="type">구분</option>
			</select> <input type="search" name="keyword" required> <input
				type="submit" value="검색">

		</fieldset>
	</form>
	<h5>
		<a href="#">상품 상세보기</a>
	</h5>
	<h5>
		<a href="/web08/product/update.html">상품 수정</a>
	</h5>
	<form action="/web08/product/delete.txt">
		<fieldset>
			<legend>상품 삭제</legend>
			<input type="number" name="no" required placeholder="상품 번호">
			<input type="submit" value="삭제">
		</fieldset>
	</form>

	<ol>
		<li><a href="./product/insert.html">상품 등록</a></li>
		<li><a href="./product/search.txt">상품 조회</a></li>
		<li>
			<form action="./product/search.txt">
				<fieldset>
					<legend>상품 검색</legend>
					<select name="column">
						<option value="name">이름</option>
						<option value="type">구분</option>
					</select> <input type="search" name="keyword" required> <input
						type="submit" value="검색">
				</fieldset>
			</form>
		</li>
		<form action="/web08/product/detail.txt">
			<fieldset>
				<li>
					<form action="./product/detail.txt">
						<fieldset>
							<legend>상품 상세보기</legend>
							<input type="number" name="no" required placeholder="상품번호">
							<input type="submit" value="조회">
						</fieldset>
					</form>
				</li> <input type="number" name="no" required placeholder="상품번호">
				<input type="submit" value="조회">
			</fieldset>
		</form>

		<li><a href="./product/update.html">상품 수정</a></li>
		<li>
			<form action="./product/delete.txt">
				<fieldset>
					<legend>상품 삭제</legend>
					<input type="number" name="no" required placeholder="상품 번호">
					<input type="submit" value="삭제">
				</fieldset>
			</form>
		</li>
	</ol>

</body>
</html>

 

1-2 확인

(2) 삭제 기능 구현

2-1 삭제 번호 입력 메인페이지 index.html에 만들기

	<form action="/web08/product/delete.txt">
		<fieldset>
			<legend>상품 삭제</legend>
			<input type="number" name="no" required placeholder="상품 번호">
			<input type="submit" value="삭제">
		</fieldset>
	</form>

 

2-2 삭제 처리 delete.txt 만들기

package web08.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import web08.beans.ProductDao;

@WebServlet(urlPatterns = "/product/delete.txt")
public class ProductDeleteServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : 상품 번호 - no(int)
			int no = Integer.parseInt(req.getParameter("no"));

			//처리 : ProductDao
			ProductDao productDao = new ProductDao();
			boolean success = productDao.delete(no);

			//출력 : 성공 실패에 따라 각각 redirect 처리
			if(success) {
				resp.sendRedirect("delete_success.html");
				//resp.sendRedirect("/web08/product/delete_success.html");
			}
			else {
				resp.sendRedirect("delete_fail.html");
				//resp.sendRedirect("/web08/product/delete_fail.html");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

2-3 삭제 성공 delete_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 삭제 완료</h1>

	<h5><a href="../index.html">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="../">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="/web08/index.html">메인페이지로 이동(절대경로)</a></h5>
	<h5><a href="/web08/">메인페이지로 이동(절대경로)</a></h5>
</body>
</html>

 

2-4 삭제 실패 delete_fail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 삭제 실패</h1>
	<h3>(존재하지 않는 상품번호)</h3>

	<h5><a href="../index.html">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="../">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="/web08/index.html">메인페이지로 이동(절대경로)</a></h5>
	<h5><a href="/web08/">메인페이지로 이동(절대경로)</a></h5>
</body>
</html>

 

2-5 확인

 

 

(3) 등록 기능 구현

3-1 등록 정보 입력 insert.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>

	<h1>상품 등록 페이지</h1>

<!-- 	<form action="/web08/product/insert.txt"> -->
	<form action="insert.txt">

		상품이름 : <input type="text" name="name" required>

		<br><br>

		상품분류 : 
		<select name="type" required>
			<option value="">분류 선택</option>
			<option>과자</option>
			<option>아이스크림</option>
			<option>사탕</option>
			<option>주류</option>	
		</select>

		<br><br>

		상품가격 : <input type="number" name="price" required value="0" step="100" min="0">

		<br><br>

		제조일자 : <input type="date" name="made" required>

		<br><br>

		유통기한 : <input type="date" name="expire" required>

		<br><br>

		<input type="submit" value="등록">

	</form>

</body>
</html>

 

3-2 등록 처리 insert.txt 만들기

package web08.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import web08.beans.ProductDao;
import web08.beans.ProductDto;

//상품 등록 처리 서블릿
@WebServlet(urlPatterns = "/product/insert.txt")
public class ProductInsertServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : ProductDto(name, type, price, made, expire)
			ProductDto productDto = new ProductDto();
			productDto.setName(req.getParameter("name"));
			productDto.setType(req.getParameter("type"));
			productDto.setPrice(Integer.parseInt(req.getParameter("price")));
			productDto.setMade(req.getParameter("made"));
			productDto.setExpire(req.getParameter("expire"));

			//처리
			ProductDao productDao = new ProductDao();
			productDao.insert(productDto);

			//출력 : 성공 페이지로 redirect
			resp.sendRedirect("insert_success.html");//상대경로
			//resp.sendRedirect("/web08/product/insert_success.html");//절대경로
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

3-2 등록 완료 insert_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 등록 완료</h1>

	<h5><a href="../index.html">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="../">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="/web08/index.html">메인페이지로 이동(절대경로)</a></h5>
	<h5><a href="/web08/">메인페이지로 이동(절대경로)</a></h5>
</body>
</html>

 

3-3 확인

(4) 수정 기능 구현

(참고)

필드셋(fieldset)은 폼(form) 내부의 구획정리를 위해 사용
입력정보가 여러 종류로 구분될 때 해당 영역을 분리하기 위하여 사용
영역에 제목을 <legend>로 줄 수 있다.

4-1 수정 정보 입력 update.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 정보 수정</h1>

<!-- 	<form action="/web08/product/update.txt"> -->
	<form action="update.txt">

		<fieldset>
			<legend>대상 정보</legend>
			상품번호 : <input type="number" name="no" required>
		</fieldset>

		<fieldset>
			<legend>변경할 정보</legend>

			상품이름 : <input type="text" name="name" required>

			<br><br>

			상품분류 : 
			<select name="type" required>
				<option value="">분류 선택</option>
				<option>과자</option>
				<option>아이스크림</option>
				<option>사탕</option>
				<option>주류</option>	
			</select>

			<br><br>

			상품가격 : <input type="number" name="price" required value="0" step="100" min="0">

			<br><br>

			제조일자 : <input type="date" name="made" required>

			<br><br>

			유통기한 : <input type="date" name="expire" required>

		</fieldset>

		<br>

		<input type="submit" value="수정">

	</form>
</body>
</html>

 

4-2 수정 처리 update.txt 만들기

package web08.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import web08.beans.ProductDao;
import web08.beans.ProductDto;

@WebServlet(urlPatterns = "/product/update.txt")
public class ProductUpdateServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : ProductDto(no, name, type, price, made, expire)
			ProductDto productDto = new ProductDto();
			productDto.setNo(Integer.parseInt(req.getParameter("no")));
			productDto.setName(req.getParameter("name"));
			productDto.setType(req.getParameter("type"));
			productDto.setPrice(Integer.parseInt(req.getParameter("price")));
			productDto.setMade(req.getParameter("made"));
			productDto.setExpire(req.getParameter("expire"));

			//처리 : ProductDao
			ProductDao productDao = new ProductDao();
			boolean success = productDao.update(productDto);

			//출력 : 성공 실패에 따라 각각의 페이지로 redirect
			if(success) {
				resp.sendRedirect("update_success.html");
				//resp.sendRedirect("/web08/product/update_success.html");
			}
			else {
				resp.sendRedirect("update_fail.html");
				//resp.sendRedirect("/web08/product/update_fail.html");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

4-3 수정 성공 update_success.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>상품 수정 완료</h1>

	<h5><a href="../index.html">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="../">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="/web08/index.html">메인페이지로 이동(절대경로)</a></h5>
	<h5><a href="/web08/">메인페이지로 이동(절대경로)</a></h5>
</body>
</html>

 

4-4 수정 실패 update_fail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 관리 홈페이지</title>
</head>
<body>
	<h1>존재하지 않는 상품번호</h1>

	<h5><a href="./update.html">다시 수정하러 가기</a></h5>
	<h5><a href="../index.html">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="../">메인페이지로 이동(상대경로)</a></h5>
	<h5><a href="/web08/index.html">메인페이지로 이동(절대경로)</a></h5>
	<h5><a href="/web08/">메인페이지로 이동(절대경로)</a></h5>
</body>
</html>

 

4-5 확인

 

(5) 상품목록, 상품검색 통합 조회 기능 구현

5-1 상품목록, 상품검색 통합 조회 search.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제품 관리 홈페이지</title>
</head>
<body>

	<h1>제품 정보 검색</h1>
	
	<form action="search.txt">	
		
		<select name="column">
			<option value="name">이름</option>
			<option value="type">유형</option>
		</select>
		
		<input type="text" name="keyword" placeholder="검색어" required>
		
		<input type="submit" value="검색">
		
	</form>

</body>
</html>

 

5-2 상품목록, 상품검색 통합 조회 search.txt 만들기

package web08.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import web08.beans.ProductDao;
import web08.beans.ProductDto;

@WebServlet(urlPatterns = "/product/search.txt")
public class ProductSearchServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : column(선택), keyword(선택) : 둘다 있으면 검색, 아니면 목록
			String column = req.getParameter("column");
			String keyword = req.getParameter("keyword");

			//처리 : ProductDao
			boolean search = column != null && keyword != null;
			//List<ProductDto> list = 목록결과 or 검색결과;
			List<ProductDto> list;

			ProductDao productDao = new ProductDao();
			if(search) {
				list = productDao.select(column, keyword);
			}
			else {
				list = productDao.select();
			}

			//출력 : 리다이렉트 불가
			resp.setCharacterEncoding("MS949");
			resp.getWriter().println("데이터개수 : "+list.size());
			for(ProductDto productDto : list) { 
				resp.getWriter().println("+-------------------------------+");
				resp.getWriter().println("| 번호 : " + productDto.getNo() + "");
				resp.getWriter().println("| 이름 : " + productDto.getName() + "");
				resp.getWriter().println("| 구분 : " + productDto.getType() + "");
				resp.getWriter().println("| 가격 : " + productDto.getPrice() + "원");
				resp.getWriter().println("| 제조일 : " + productDto.getMade().substring(0, 10) + "");
				resp.getWriter().println("| 폐기일 : " + productDto.getExpire().substring(0, 10) + "");
				resp.getWriter().println("+-------------------------------+");
				resp.getWriter().println();
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

5-3 확인

(6) 상세 조회 기능 구현

6-1 번호 입력 detail.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제품 관리 홈페이지</title>
</head>
<body>

	<h1>제품 정보 상세 조회</h1>
	<form action="detail.txt">
		제품 번호 : <input type="text" name="no" required>
		<input type="submit" value="보기">
	</form>

</body>
</html>

 

6-2 단일 조회 및 출력 detail.txt 만들기

package web08.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import web08.beans.ProductDao;
import web08.beans.ProductDto;

@WebServlet(urlPatterns = "/product/detail.txt")
public class ProductDetailServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			//입력 : 상품번호(int no)
			int no = Integer.parseInt(req.getParameter("no"));

			//처리 : ProductDao
			ProductDao productDao = new ProductDao();
			ProductDto productDto = productDao.get(no);

			//출력 : 리다이렉트 불가. 직접 출력.
			resp.setCharacterEncoding("MS949");
			if(productDto != null) {
				resp.getWriter().println("+-------------------------------+");
				resp.getWriter().println("| 번호 : " + productDto.getNo() + "");
				resp.getWriter().println("| 이름 : " + productDto.getName() + "");
				resp.getWriter().println("| 구분 : " + productDto.getType() + "");
				resp.getWriter().println("| 가격 : " + productDto.getPrice() + "원");
				resp.getWriter().println("| 제조일 : " + productDto.getMade().substring(0, 10) + "");
				resp.getWriter().println("| 폐기일 : " + productDto.getExpire().substring(0, 10) + "");
				resp.getWriter().println("+-------------------------------+");
				resp.getWriter().println();
			}
			else {
				resp.getWriter().println("존재하지 않는 상품번호");
			}
		}
		catch(Exception e) {
			e.printStackTrace();
			resp.getWriter().println("error");
		}
	}
}

 

6-3 확인

 

 

지금까지 개발한 홈페이지의 문제점

1. 목록페이지에 HTML을 적용할 수 없다(없는건 아니고 불편하다)
2. 페이지의 링크가 정상적으로 연결되어 있지 않다

원인 : HTML에 프로그래밍 코드를 넣을 수 없다
해결 : HTML에 프로그래밍 코드를 넣는 새로운 페이지를 배운다 (JSP)

JSP : Java Server Page = 프로그래밍 코드가 가미된 HTML 페이지

 

 

웹 - JSP 기본


페이지 설정(Directive)
= 형식 - <%@ 이름="값" 이름="값" %>
= language : 페이지에서 사용할 언어(생략 가능)
= contentType : (중요!) 사용자(브라우저)에게 알려줄 페이지의 형태와 특징
= 형태를 MIME-TYPE이라고 부르며, 대분류/소분류 형태로 구성되어 있다.
= pageEncoding : JSP는 내부적으로 Servlet으로 변환되는데 이 때 적용할 글꼴(생략하면 contentType을 따라감)

 

<%-- 사용자에게 보이지 않는 JSP 전용 주석 --%>

<!-- 사용자에게 보이는 HTML 전용 주석 -->

<%@ 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>
</head>
<body>
	<h1>Hello JSP!</h1>
</body>
</html>

 


디렉티브(directive)
= 설정을 하고 싶을 때 사용
= 형식은 <%@ 설정 %>

스크립트릿(scriptlet) : 
= 프로그래밍 코드(ex : if, for, 객체생성, ..)를 작성하고 싶을 때 사용.
= 형식은 <%  코드  %>

표현식(expression) : 프로그래밍 값을 출력하고 싶을 때 사용.(ex : System.out.println())
= 형식은 <%= 값 %> 

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

<%for(int i=1; i <= 10; i++){ %>
<h1>Hello JSP <%=i%></h1>
<%}%>

 

 


exam 테이블의 데이터들을 조회하여 화면에 HTML 방식으로 출력
= 프로그래밍 조회 코드 + HTML 출력 코드

<%@page import="web09.beans.ExamDto"%>
<%@page import="java.util.List"%>
<%@ page import="web09.beans.ExamDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	//프로그래밍 조회 코드
	ExamDao examDao = new ExamDao();
	List<ExamDto> list = examDao.select();
%>

<!-- HTML 출력코드 : 조회한 list에서 ExamDto의 이름만 출력 -->
<% for(ExamDto examDto : list){ %>
	<h3><%=examDto.getStudent()%></h3>
<% } %>

 

'Java 웹 개발' 카테고리의 다른 글

21.10.18 - 웹 개발 입문 46일차  (0) 2021.10.18
21.10.15 - 웹 개발 입문 45일차  (0) 2021.10.15
21.10.13 - 웹 개발 입문 43일차  (0) 2021.10.13
21.10.12 - 웹 개발 입문 42일차  (0) 2021.10.12
21.10.11 - 웹 개발 입문 41일차  (0) 2021.10.11

'Java 웹 개발' Related Articles

티스토리툴바