[Spring] 글 목록·상세 출력 / 입력·등록·삭제·수정 만들기

728x90

Spring Legacy · STS · OracleDB · SQLDeveloper

이전 포스팅과 설명이 이어집니다.

https://rebornbb.tistory.com/entry/Spring-Spring-DTO-DAO-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0

저번 포스팅에서는 DTO,DAO,mapper,DB연결 등에 대하여 다뤄보았다.

이번 포스팅은 이전 정리내용에 이어 Service와 Controller, View파일 생성으로

DB에 저장된 게시판 데이터를 화면으로 출력하고 다루는 기초 내용을 정리하였다.

1. 게시글 목록 출력

2. 게시글 입력

3. 게시글 등록

4. 게시글 상세 출력

5.게시글 삭제

6.게시글 수정

1. 게시글 목록 출력

throws - 예외처리 사용자에게 위임
try catch - service.selectAll이 직접 예외처리

HomeController.java

	//리스트 출력
	@RequestMapping(value = "/selectAll", method = RequestMethod.GET)
	public String selectAll(Model model) throws Exception {
		model.addAttribute("list", service.selectAll() );
		return "selectAll";

selectAll메서드는 model에 "list"라는 key값으로 service의 selectAll() 을 가지고 selectAll이라는 view파일로 전달한다.

HumanServiceImpl 는 IHumanService 인터페이스의 메서드를 override받아 Implement (구현)하는 역할을 한다.

DAO이름 DAO변수명 = sqlSession.getMapper(선택DAO클래스명.class);
DAO변수명.delete(DTO변수명);

selectAll.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 prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
	<script>
	 var result = '${msg}';
		if (result == 'success') {
			alert("처리가 완료되었습니다.");
		}
	</script>
	<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>
  select
  <table id='customers' width=100% border="1">
	<tr>
		<th style="width: 10px">name</th>
		<th style="width: 100px">age</th>
		<th style="width: 200px">height</th>
		<th style="width: 40px">birthday</th>
	</tr>
	<c:forEach items="${list}" var="dto">	
		<tr>
			
			<!-- 상세보기페이지 -->
			<td><a href="/ex/selectName?name=${dto.name }">${dto.name }</a></td>
			<td >${dto.age}</td>
			<td >${dto.height }</td>
			<td >
			<fmt:formatDate pattern="yyyy-MM-dd HH:mm" value= "${dto.birthday }"/></td>
			
		</tr>
	</c:forEach>
    </table>
	<a href="/ex/insert">새글</a>
</body>
</html>

DB에 추가로 넣은 데이터 글씨가 깨져있다. 위와 같은 경우

아래 이미지와 같이 web.xml에 filter, filter-mapping 설정을 넣어 정상적이게 출력될 수 있게 만들어 주어야 한다.

	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

2. 게시글 입력

HomeController.java

	//데이터 입력
	@RequestMapping(value = "/insert", method = RequestMethod.GET)
	public String insert() {
		return "insert";
	}

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
</head>
<body>
insert
<form action="/ex/insert" method="post">
이름<input type="text" name=name >
나이<input type="text" name=age >
키<input type="text" name=height >
생일<input type="datetime-local" name=birthday >
<input type="submit" value="제출">
</form>
</body>
</html>

action으로 폼의 데이터가 도착할 url을 명시한다.

method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시

GET 방식 - 눈에 보이는 주소로 간다
POST 방식 - 눈에 안보이는 쿼리스트링으로 간다

3. 게시글 등록

HomeController.java

	//데이터 등록
	@RequestMapping(value = "/insert", method = RequestMethod.POST)
	public String insertDB(HumanDto humanDto,RedirectAttributes rttr) throws Exception{
		service.insert(humanDto);
		rttr.addFlashAttribute("msg","success");
		return "redirect:selectAll";
	}

	<!--selectAll.jsp-->
    <script>
	 var result = '${msg}';
		if (result == 'success') {
			alert("처리가 완료되었습니다.");
		}
	</script>
	<style>

redirect 시 데이터를 전달할 수 있는 방법 : RedirectAttribute

- RedirectAttributes 클래스를 사용하여 전달할 수 있다.
- RedirectAttributes 클래스는 Spring 3.1 버전에 추가되었다고 한다.

- redirect시 RedirectAttributes 클래스를 이용해 효과적으로 alert창을 띄울수도 있다.

addFlashAttribute 사용

addFlashAttribute 라는 메소드를 통해 데이타를 전달할수 있는데, 보통 아래 3번과 같이 여러개의 데이타를 map, list등을 통해 전달하는데 사용되는 것 같다. 다만 여기서는 string 문자열을 전달해봤는데 유용하게 사용할 수 있을 것 같다.

addFlashAttribute 의 경우 데이타가 post 형식으로 전달이 된다.

addFlashAttribute 의 경우 데이타가 한번만 사용된다.

위와 같은 코드처럼 String 문자열을 전달했을 경우에 redirect되는 method의 jsp 파일에서

${msg}를 출력하면 한번만 "success" 가 출력된다.

즉 새로고침을 해도 한번만 나오는데 게시판 같은 경우

글 등록/수정/삭제후에 목록화면으로 이동하는 경우에 유용할 것 같다.

정리참고 : https://web-obj.tistory.com/455

4. 게시글 상세보기

HomeController.java

	//상세 보기
	@RequestMapping(value = "/selectName", method = RequestMethod.GET)
	public String selectName(String name,Model model) throws Exception {
		model.addAttribute("dto", service.selectName(name) );
		return "selectName";
	}

selectName메서드는 model에 "dto"라는 key값으로 service의 selectName(name) 을 가지고

selectName이라는 view파일로 전달한다.

selectName.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 prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
	<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>
  select
  <table id='customers' width=100% border="1">
	<tr>
	    <th style="width: 10px">선택</th>
		<th style="width: 10px">name</th>
		<th style="width: 100px">age</th>
		<th style="width: 200px">height</th>
		<th style="width: 40px">birthday</th>
	</tr>
		<tr>
		    <td><a href="/ex/delete?name=${dto.name }">삭제</a></td>
			<td>${dto.name }</td>
			<td >${dto.age}</td>
			<td >${dto.height }</td>
			<td >
			<fmt:formatDate pattern="yyyy-MM-dd HH:mm" value= "${dto.birthday }"/></td>
		</tr>
	</table>
	<fmt:formatDate pattern="yyyy-MM-dd'T' HH:mm" value= "${dto.birthday }"/>
	<a href='/ex/update?name=${dto.name }&age=${dto.age }&height=${dto.height }
	&birthday=<fmt:formatDate pattern="yyyy-MM-dd\'T\' HH:mm" value= "${dto.birthday }"/>' >수정</a>
	 




</body>
</html>

4. 게시글 삭제

HomeController.java

	//글 삭제
	@RequestMapping(value = "/delete", method = RequestMethod.GET)
	public String delete(String name,RedirectAttributes rttr) throws Exception {
		service.delete(name);
		rttr.addFlashAttribute("msg","success");
		return "redirect:selectAll";
	}

5. 게시글 수정

HomeController.java

	//글 수정 화면
	@RequestMapping(value = "/update", method = RequestMethod.GET)
	public String update(HumanDto humanDto) {
		System.out.println(humanDto);
		return "update";
	}
	//수정 결과 저장과 출력
	@RequestMapping(value = "/update", method = RequestMethod.POST)
	public String updateDB(HumanDto humanDto,RedirectAttributes rttr) throws Exception{
		service.update(humanDto);
		rttr.addFlashAttribute("msg","success");
		return "redirect:selectAll";
	}

수정할수있는 부분 설정은 Mapper에서 확인가능

humanMapper.xml

<update id="update">
update human set height=#{height} where name=#{name}
</update>

키만 수정 할 수있게 설정해두었다.

update.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 prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
</head>
<body>
update
<form action="/ex/update" method="post"> <!-- 수정이니까post -->
이름<input type="text" name=name value="${humanDto.name }" readonly>
나이<input type="text" name=age value="${humanDto.age }">
키<input type="text" name=height value="${humanDto.height }">

생일<input type="datetime-local" name=birthday
 value='<fmt:formatDate pattern="yyyy-MM-dd'T'HH:mm:ss" value= "${humanDto.birthday }"/>'>

<!-- 생일<input type="datetime-local" name=birthday value="2000-01-01T12:13:22"> -->
<input type="submit" value="수정">
</form>
</body>
</html>

수정되어야 하므로 method = "post" 방식으로 입력한다.

728x90

'STUDY > SpringLegacy' 카테고리의 다른 글

[JSP] 예외처리 연습 / JSP include 태그 (1)	2022.09.19
[Spring] 게시판 만들기 총정리 (게시글 등록·확인·삭제·수정) (0)	2022.09.19
[Spring] DTO,DAO,mapper생성과 DB연결 설정하기 (0)	2022.09.17
[JSP] JSTL · EL 설명 예제 (0)	2022.09.16
[Spring] Spring 기초 어노테이션 다루기 (0)	2022.09.14

1. 게시글 목록 출력

HomeController.java

selectAll.jsp

2. 게시글 입력

HomeController.java

insert.jsp

3. 게시글 등록

HomeController.java

redirect 시 데이터를 전달할 수 있는 방법 : RedirectAttribute

addFlashAttribute 사용

4. 게시글 상세보기

HomeController.java

selectName.jsp

4. 게시글 삭제

HomeController.java

5. 게시글 수정

HomeController.java

humanMapper.xml

update.jsp

'STUDY > SpringLegacy' 카테고리의 다른 글

티스토리툴바