Spring MVC, Mybatis [2] 간단한 사용자 게시판 만들기

Spring MVC, Mybatis [2] 간단한 사용자 게시판 만들기

2021. 11. 24. 14:14ㆍSpring

728x90

그동안 Spring 공부를 하면서 해왔던 사용자 관리 프로젝트를

이제 간단하지만 화면 구현까지 해서 만들어 볼 예정이다.

Spring MVC Model2 를 활용해서 할 예정이다.

1. Users 테이블

Users 테이블은 userid, name, gender, city로 구성되어 있다.

2. 서비스 계층

UserService 인터페이스와 이를 구현한 UserServiceImple로 이루어져 있다.

1️⃣ UserService

2️⃣ UserServicImple

3. 데이터 액세스 계층

UserDAO 인터페이스와 이를 구현한 UserDAOJDBC

1️⃣ UserDAO

2️⃣ UserDAOJDBC

4. Mapping 파일

5. MyBatis-Config 파일

6. Mapper 인터페이스

7. 빈 설정 파일

1️⃣ DataSource 설정

이때 property 파일을 사용해서 데이터 값을 입력해줄 때는 <context:property-placeholder> 태그를 사용해 해당 파일의 위치를 지정해줘야한다.

2️⃣ MyBatis 설정

SqlSessionFactoryBean 을 빈 설정파일에 등록해줄 때 dataSource와 myBatis 설정파일 경로, 그리고 Mapping파일의 경로까지 지정해줘야한다.

SqlSessionTemplate도 빈설정파이레 등록해준다.

8. Spring MVC 기반 웹 어플리케이션 개발

1️⃣ 클라이언트의 모든 요청을 받는 DispatcherServlet을 web.xml에 설정한다.

사실 Spring mvc project로 만든 프로젝트라면 이건 모두 작성되어 있을거라 따로 추가하지는 않아도 된다.

⭐대신 한글 인코딩을 위해서 이 코드는 밑에 추가해주기!

<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️⃣ 클라이언트의 요청을 처리할 Controller를 작성한다.

3️⃣ Spring Bean으로 Controller 를 등록한다.

@Controller로 지정해주었기 때문에

패키지명만 잘 작성해준다.

4️⃣ JSP을 이용한 View 영역의 코드를 작성한다.

5️⃣ 브라우저상에서 jsp를 실행해본다.

9. Spring MVC 기반의 사용자 관리 프로젝트 만들기

1️⃣ 사용자 목록 조회

- 클라이언트의 요청을 처리할 POJO 형태의 UserController 클래스 작성

- Controller 클래스에 @Controller 어노테이션을 선언

- 사용자 목록을 조회하는 getUserList() 메서드를 선언하고, @RequestMapping 어노테이션을 선언한다.

- userList.jsp 페이지에 View 영역의 코드를 작성

- 브라우저 상에서 jsp 실행한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UserList</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container">
		<h2 class="text-center">사용자 목록 </h2>
		<table class="table table-bordered table table-hover">
			<thead>
				<tr>
					<th>아이디 </th>
					<th>이름</th>
					<th>성별</th>
					<th>거주지</th>
					<th>&nbsp;</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			
			<tbody>
				<c:forEach var="user" items="${userlist }">
					<tr>
						<td>
							<a href = "getUser.do?id=${user.userid}"> ${user.userid} </a>
						</td>
						
						<td>${user.name}</td>
						<td>${user.gender} </td>
						<td>${user.city}</td>
						<td>
							<a href="updateUserForm.do?id=${user.userid }">수정</a>
						</td>
						<td>
							<a href="deleteUser.do/${user.userid }">삭제</a>
						</td>
						
					</tr>
				</c:forEach>
				<tr>
					<td colspan="7">
						<a href="insertUserForm.do">사용자 등록</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

</body>
</html>

❗ ViewResolver

ViewResolver는 Controller의 실행 결과를 어떤 view에 보여줄 것인지 결정하는 기능을 제공한다.

InternalResourceViewResolver는 jsp를 사용하여 view를 생성한다.

prefix는 Controller가 리턴한 view 이름 앞에 붙을 접두어이다.

suffix는 Controller가 리턴한 view이름 뒤에 붙을 확장자이다. jsp 라고 해주면 이제 return할 때 마다 .jsp를 붙이지 않아도 된다.

2️⃣ 특정 사용자 조회

- 사용자 목록을 조회하는 getUser(String id) 메서드를 작성하고 @RequestMapping 과 @RequestParam 어노테이션을 선언한다.

❗ @RequestParam 은 http 요청에 포함된 파라미터 참조시 사용한다.

- userList.jsp 페이지를 수정한다.

해당 userid를 클릭하면 특정 사용자를 볼 수 있는 UserInfo 화면으로 넘어간다.

- userInfo.jsp 페이지에 view 영역의 코드 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${user.userid }사용자 상세 정보</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 class="text-center">사용자 상세 정보</h2>
		<table class ="table table-bordered table table-hover">
			<tr><td>아이디 : </td><td>${user.userid }</td></tr>
			<tr><td>이름 :</td><td>${user.name }</td></tr>
			<tr><td>성별 :</td><td>${user.gender }</td></tr>
			<tr><td>거주지 : </td><td>${user.city }</td></tr>
			
		</table>
	</div>

</body>
</html>

- 브라우저 상에서 jsp를 실행

❗ ModleAndView 클래스

Controller에서 Service에서 호출한 결과를 받아서 View에 전달하기 위해 전달받은 데이터와 화면 정보를 ModelAndView 객체에 저장한다.

3️⃣ 사용자 정보 등록 화면

- 사용자 정보를 등록하는 화면을 포워딩 해주는 insertUserForm() 메서드를 작성하고 @RequestMapping 어노테이션을 선언

-> ArrayList에 각각 성별과 도시에 대한 정보를 넣어주고, 이를 userInsert 화면에 전달해주면 이를 화면에서 출력해준다.

- userList.jsp 페이지를 수정

- userInsert.jsp 페이지에서 View 영역의 코드를 작성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>        
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정보 등록</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 class="text-center">사용자 정보 등록</h2>
		<div>
			<form method="post" action="insertUser.do">
		
			<table class="table table-bordered table table-hover">
				<tr>
					<td>아이디</td>
					<td><input type="text" name="userid"/></td>
				</tr>
				
				<tr>
					<td>이름</td>
					<td><input type="text" name="name"/></td>
				</tr>
				
				<tr>
					<td>성별</td>
					<td>
						<c:forEach var="genderName" items="${map.genderList }">
							<input type="radio" name="gender" value="${genderName }">${genderName }
						</c:forEach>
					</td>
				</tr>
				
				<tr>
					<td>거주지</td>
					<td>
						<select name="city">
							<c:forEach var="cityName" items="${map.cityList }">
								<option value="${cityName }">${cityName }</option>
							</c:forEach>
						
						</select>
					</td>
				
				</tr>
				
				<tr>
					<td colspan="2" class="text-center">
						<input type="submit" value="등록"/>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" class="text-center">
						<a href="getUserList.do">사용자 목록 보기</a>
					</td>
				</tr>
			</table>
			</form>
		</div>
	</div>
</body>
</html>

map에 담겨 전달된 genderList와 cityList를 받아 화면에 출력해줌.

- 브라우저 상에서 jsp를 실행

4️⃣ 사용자 정보 등록

- 사용자 정보를 등록하는 insertUser(@ModelAttribute UserVO user) 메서드를 작성하고 @RequestMapping과 @ModelAttribute 어노테이션을 선언한다.

등록후엔 목록 조회가 redirect 되어야 하기 때문에 등록된 사용자 정보를 확인할 수 있도록 해야한다.

❗ @ModelAttribute

http 요청에 포함된 파라미터를 모델 객체로 바인딩해준다.

- userInsert.jsp 페이지에 View 영역의 코드를 작성

- 브라우저 상에서 jsp 실행

5️⃣ 사용자 수정 화면

- 사용자 정보를 수정하는 화면을 포워딩 해주는 updateUserForm(@RequestParam String id) 메서드를 작성하고

@RequestMapping 과 @RequestParma 어노테이션을 선언

-> 사용자 화면을 수정할 때는 우선 수정 버튼을 누르면 사용자의 정보가 입력되어 있어야 하기 때문에 UserVO 객체도 담고, 아까 사용자 등록화면에서 작성했던 genderList와 cityList도 포함해서 Map에 저장하여 userUpdate.jsp에 보낸다.

-userList.jsp 페이지 수정

- userUpdate.jsp 페이지에서 View 영역의 코드를 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>     
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정보 수정</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 class="text-center">사용자 정보 수정</h2>
		<div>
		<form method="post" action="updateUser.do">		
			<input type="hidden" name="userid" value="${map.user.userid }"/>
			<table class="table table-bordered table table-hover">
				<tr>
					<td>아이디</td>
					<td>${map.user.userid }</td>
				</tr>
				
				<tr>
					<td>이름</td>
					<td><input type="text" name="name" value="${map.user.name }"/> </td>
				</tr>
				
				<tr>
					<td>성별</td>
					<td>
						<c:forEach var="genderName" items="${map.genderList }">
							<c:choose>
								<c:when test="${genderName eq map.user.gender }">
									<input type="radio" name="gender" value="${genderName }" checked="checked"> ${genderName }
								</c:when>
								
								<c:otherwise>
									<input type="radio" name="gender" value="${genderName }"> ${genderName }
								
								</c:otherwise>
							
							</c:choose>
						
						</c:forEach>
						
					</td>
				</tr>
				
				<tr>
					<td>거주지</td>
					<td>
						<select name="city">
							<c:forEach var="cityName" items="${map.cityList }">
								<c:choose>
									<c:when test="${cityName eq map.user.city }">
										<option value="${cityName }" selected> ${cityName } </option>
									</c:when>
									
									<c:otherwise>
										<option value="${cityName }">${cityName }</option>
									
									</c:otherwise>							
								
								</c:choose>
							
							
							</c:forEach>
						
						
						</select>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" class="text-center">
						<input type="submit" value="수정">
					</td>
				</tr>
			</table>	
			</form>
		</div>	
	</div>

</body>
</html>

-> hidden을 하는 이유는 수정하고 submit 버튼을 누를 때 userid값도 전달은 되어야 하기 때문에 !!!

userid는 수정 불가라 수정할 수 없도록 고정해서 화면에 보여진다.

- 브라우저 상에서 jsp 를 실행

6️⃣ 사용자 수정

- 사용자 정보를 수정하는 화면을 포워딩 해주는 updateUser(@ModelAttribute UserVo user) 메서드를 작성하고,

@RequestMapping 과 @ModelAttribute 어노테이션을 선언한다.

그리고 수정 후에는 다시 목록조회가 redirect 되도록 하여, 수정된 사용자 정보를 확인할 수 있도록 해야한다.

- userUpdate.jsp 페이지에 view 영역 코드 작성

- 브라우저 상에서 jsp 를 실행

7️⃣ 사용자 정보 삭제

- 사용자 정보를 삭제하는 deleteUser(@pathVariable String id) 메서드를 작성하고 @RequestMapping 과 @PathVariable 어노테이션을 선언

❗ @PathVariable

파라미터를 url 형식으로 받을 수 있도록 해준다.

- userList.jsp 페이지를 수정

- 브라우저 상에서 jsp 를 실행

728x90

'Spring' 카테고리의 다른 글

Spring @Controller, @RequestMapping (0)	2021.11.26
Spring Error 예외 처리 하는 법 (0)	2021.11.24
Spring EL(Expression Language) 과 JSTL (Java Standard Tag Library) (0)	2021.11.23
Spring MVC [1] Spring MVC 개념 및 환경설정 (0)	2021.11.23
[Error] cvc-id.3: A field of identity constraint 'web-app-servlet-name-uniqueness' matched element 'web-app', but this element does not have a simple type. 에러 해결 방법 (0)	2021.11.23

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'Spring' 카테고리의 다른 글

관련글

티스토리툴바