Spring visit 방명록

VisitController.java

 

package com.korea.vs;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import dao.VisitDAO;
import vo.VisitVO;

@Controller
public class VisitController {
	VisitDAO visit_dao;
    
    // 생성자로 할 것인지, set으로 받을 것인지 선택 가능
    // context-3-에서 controller는 유일하게 servlet-context에서 만든다.
    
    public void setVisit_dao(VisitDAO visit_dao) {
    	this.visit_dao = visit_dao;
    }
    @RequestMapping(value={"/","/list.do"})
    public String list(Model model) {
    	List<VisitVO> list = visit_dao.selectList();
        model.addAttribute("list",list);
	// jsp에서는 sedRedirect(/aaa.do)로 가능했지만,
    // spring에서는 return "redirect:list.do";로 해야한다.
    // redirect: 명령어로 보내고 싶은 list.do로 보내야 한다.
    	return "WEB/INF/views/visit/visit_list.jsp";
    }
    @RequestMapping("/delete.do")
    @ResponseBody // return 값을 jsp등으로 인식하지 않고, 콜백메서드로 전달하기 위한 키워드
    public String delete(int idx) {	// visit_list.jsp에서 idx를 받고
    	int res = visit_dao.delete(idx);	//dao로 idx를 보낸다
        // dao 에서 res가 잘 지워지면 1, 지워지지않으면 0을 나타낸다
    	String result = "no";
        if(res == 1) {
        	result = "yes";
        }	// no.jsp, yes.jsp가 없기에 404오류, 그래서 @ResponseBody가 필요하다
    	return result;
    }	// @ResponseBody로 result의 no 또는 yes가 콜백메서드로 돌아간다
    @RequestMapping("/insert_form.do")
    public String insert_form() {
    	return "/WEB-INF/views/visit/visit_insert_form.jsp";
    }
    /* 새 글 등록하기
    @RequestMapping("/insert.do")
    public String insert(String name, String content, String pwd) {
    	// insert.do?name=hong&content=aaa&pwd=111 / visit_insert_from.jsp 에서 받은 주소
    }	// 이렇게 여러개의 파라미터를 받아야하는데, jsp와 vo에 변수 이름을 맞춰놓는다면 
    */	// 밑에 처럼 간단하게 사용할 수 있다.
    
    @RequestMapping("/insert.do")
    public String insert(VisitVO vo) {
    	int res = visit_dao.insert(vo);
        // jsp로 치면 sendRedirect("list.do");
        return "redirect:list.do";	// list.do 매핑을 호출하는 방법
    }
    @RequestMapping("/modify_form.do")
    public String modify_form(Model model, int idx) {
// 파라미터 idx, visit_dao.selectOne(idx);
// selectOne과 selectList는 개념적으로 다르다. list는 한개 이상의 목록 전체 목록을 봐야한다
// 이름에 홍이 들어가는 모든 목록을 봐야한다 
// idx가 정해져 있다는 것은 오로지 하나, 그것을 리스트로 궂이 받을 필요가 없다.
// 하나의 정보를 받아야한다면 VisitVO로 반환되는 selectOne()이라는 메서드를 사용하는 것이 좋다.
		VisitVO vo = visit_dao.selectOne(idx);
        if(vo != null) {
        	model.addAttribute("vo", vo);
        }
        return "/WEB-INF/views/visit/visit_modify_form.jsp";
    } // 수정 폼으로 페이지를 변경해 준다.
    
    @RequestMapping("/modufy.do")
    public String modify(VisitVO vo) {
    	// modify.do?idx=1&name=일길동&content=222&pwd=1111, 모두 vo에 있는 것만 jsp에서 보낸다
    	// 그래서 public String modify(int idx) 이런식으로 파라미터를 받으면 안된다.
        int res = visit_dao.update(vo);
        return "redirect:list.do";
    } // 수정 폼 페이지에서 변경된 값을 update 한다.
}

 

VisitDAO.java

 

package dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;

import vo.VisitVO;

public class VisitDAO {
	SqlSession sqlSession;
    
    public void setSqlSession(SqlSession sqlSession) {
		this.sqlSession = sqlSession;
	}
    // 방명록 전체 조회
    public List<VisitVO> selectList() {
    	List<VisitVO> list = sqlSession.selectList("v.visit_list");
        return list;
    }
    public int delete(int idx) {	// controller에서 보낸 idx를 받음
    	int res = sqlSession.delete("v.visit_delete", idx);
        // 잘 지우면 1 못 지우면 0
    	return res;
    }
    public int insert(VisitVO vo) {
    	int res = sqlSessioin.insert("v.visit_insert", vo);
        return res;
    }
    public VisitVO selectOne(int idx) {
		VisitVO vo = sqlSession.selectOne("v.visit_one", idx);
        return vo;
	}
    public int update(VisitVO vo) {
    	int res = sqlSession.update("v.visit_update", vo);
        // v.visit_update에서 원하는 것을 VO에서 업데이트 시킨다
        return res;
    }
}

 

VisitVO.jsp

 

package vo;

public class VisitVO {
	
	private int idx;
	private String name, content, pwd, regdate;
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getRegdate() {
		return regdate;
	}
	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}
	
}

 

visit.xml

mapper

<select id="visit_list" resultType="visit">
	select * from visit order by idx DESC
</select>

<delete id="visit_delete" parameterType="int">
	delete from visit where idx="#{idx}"
</delete>

<!-- 게시글 추가 -->
<insert id="visit_insert" parameterType="visit">
	insert into visit values(seq_visit_idx.nextVal, #{name}, #{content}, #{pwd}, sysdate)
</insert>

<!-- 수정을 위한 게시글 한 건 조회 -->
<select id="visit_one" resultType="visit" parameterType="int">
	select * from visit where idx=#{idx}
</select>

<!-- 게시글 수정 -->
<update id="visit_update" parameterType="visit">
	update visit set name=#{name},content=#{content},pwd=#{pwd},regdate=sysdate where idx=#{idx}
</update>

 

visit_list.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		*{margin:0; padding:0;}
		#main_box{
			width:330px;
			margin:0 auto;
		}
		
		h1{
			text-align:center;
			font-size:20px;
			margin:10px 0 10px 0;
			color:#ffffff;
			text-shadow:2px 2px 2px black;
		}
		
		.visit_box{
			margin:0 auto;
			width:330px;
			margin-top:30px;
			box-shadow:2px 2px 2px black;
			border:1px solid blue;
		}
		
		.type_content{
			min-height:100px;
			height:auto;
			background:#fcc;
		}
		
		.type_name{
			background:#cfc;
		}
		
		.type_regdate{
			background:#ccf;
		}
	</style>

	<!-- Ajax사용을 위한 httpRequest.js를 참조 -->
	<script src="/vs/resources/js/httpRequest.js"></script>

	<script>
		/* 삭제버튼 클릭 */
		function del( f ) {
			var pwd = f.pwd.value;		//원본 비밀번호
			var c_pwd = f.c_pwd.value;	//비교를 위한 번호
			
			if( pwd != c_pwd ){
				alert('비밀번호가 다릅니다');
				return;
			}
			
			//Ajax를 통해 idx를 서버로 전송
			// 지우고 싶은 idx는 name="idx" 이것으로 정의
			var url = "delete.do";	// controller에 연결
			var param = "idx="+f.idx.value;
// delete.do?idx=1 idx 번호가 1번이면 서버에 보내고 다시 돌려받고 싶다라는 뜻
			sendRequest( url, param, resultFunc, "Post" );
			// 서버로 보넀다가 resultFunc로 다시 돌아온다
		}//del()
		
		/* 삭제결과를 확인할 콜백메서드 */
		function resultFunc(){
			
			if( xhr.readyState == 4 && xhr.status == 200 ){
				// 404 나 500 같은 오류가아닌 정상적인 종료가 200
				// 컨트롤러에서 삭제 후 return 해준 데이터를 받는다
				var data = xhr.responseText;
				// controller delete()의 result의 no 또는 yes를 가져옴
				
				if( data == 'no' ){
					alert("삭제실패");
					return;
				}else{
					alert("삭제성공");
					location.href="list.do";
// 삭제 성공하면 새로고침 해줘야 없어진 것이 보이는데, location.href를 정해주면 그럴 필요가 없다
				}
				
			}
			
		}
		
		/* 수정버튼 클릭 */
		function modify( f ) {
			var pwd = f.pwd.value;//원본 비밀번호
			var c_pwd = f.c_pwd.value;//비교를 위한 번호
			
			if( pwd != c_pwd ){
				alert('비밀번호가 다릅니다');
				return;
			}
			
			f.action = "modify_form.do";	// 비밀번호 가져오는 코드
			f.method = "post";
			f.submit();
			
		}
	</script>

</head>
<body>
	<div id="main_box">
		<h1>:::방명록 리스트:::</h1>
		
		<div align="center">
			<input type="button" value="글쓰기" onclick="location.href='insert_form.do'">
		<!-- Spring은 반드시 Controller를 거쳐 jsp로 가야한다. jsp > jsp 다이렉트로 갈 수 없다 -->
		</div>
		
		<c:forEach var="vo" items="${ list }">
			<div class="visit_box">
				<div class="type_content"><pre>${vo.content}</pre></div>
				<!-- pre tag로 엔터값까지 내용을 가져올 수 있다. -->
				<div class="type_name">${ vo.name }</div>
				<div class="type_regdate">작성일:${vo.regdate}</div>
				
				<div>
					<form>
						<input type="hidden" name="idx" value="${vo.idx}">
						<input type="hidden" name="pwd" value="${vo.pwd}">
						<!-- idx, pwd 알고 있지만 type="hidden"으로 숨겨두었다. -->
						비밀번호<input type="password" name="c_pwd">
						<!-- c_pwd와 pwd가 같은지 체킹해야한다. -->
						<input type="button" value="수정" onclick="modify(this.form);">
						<input type="button" value="삭제" onclick="del(this.form);">
						<!-- 수정을 한다면 modify() 함수 호출, 삭제한다면 del() 함수 호출 -->
					</form>
				</div>
				
			</div>
		</c:forEach>
	</div>
</body>
</html>

 

visit_insert_form.jsp

 

<%@ 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>
<script>
	function send(f) {
		let name = f.name.value; // input의 입력값을 받는다, script에서 var보다 let을 사용하는 것이 효율적이다.
		let content = f.content.value;
		let pwd = f.pwd.value;
		
		// 유효성 체크 했다고 치고, 비밀번호 비거나 다르면 경고창 띄우는 것
		f.action = "insert.do";	// insert.do?name=hong&content=aaa&pwd=1111
		f.method = "post";
		f.submit(); // 전송
	}
</script>
</head>
<body>
	
	<form>
		<table border="1" align="center">
			<caption>:: 새 글 쓰기 ::</caption>
			<tr>
				<th>작성자</th>
				<td><input name="name"></td>
			</tr>
			<tr>
				<th>내용</th>
				<td><textarea name="content" rows="5" cols="50" wrap="on"></textarea></td>
				<!-- wrap을 on으로 되면, textarea에서 작성된 글이 길어서 다음줄로 넘어갔을 때, 엔터값으로 인지할 수 있도록 해주는 속성 / DB로 들어갈 때는 인지를 못함, 그것을 해결 -->
			</tr>
			<tr>
				<th>비밀번호</th>
				<td><input type="password" name="pwd"></td>
			</tr>
			<tr>
				<td>
				<input type="button" value="글쓰기" onclick="send(this.form);">
				<input type="button" value="목록으로" onclick="location.href='list.do'">
				<!-- location.href='list.do 목록으로 버튼을 누르면 list.do 페이지로 돌아간다 -->
				</td>
			</tr>
		</table>
	</form>
	
</body>
</html>

 

visit_modify_form.jsp

 

<%@ 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>
<script>
	function send(f) {
		let name = f.name.value;	// 유효성 체크를 받기 위해서 변수를 만드는 것이다.
		let content = f.content.value;
		let pwd = f.pwd.value;
		
		f.action="modify.do";
		f.method="post";
		f.submit();	// modify.do?로 파라미터가 전부 넘어간다.
					// modify.do?idx=1&name=일길동&content=222&pwd=1111 
					// post로 넘어가기에 보이지는 않겠지만, 모든 vo 파라미터가 넘어간다
	}
</script>
</head>
<body>
	<form>
		<input type="hidden" name="idx" value="${vo.idx}">
		<table border="1" align="center">
			<caption>:: 수정하기 ::</caption>
			<tr>
				<th>작성자</th>
				<td><input name="name" value="${vo.name}"></td>
			</tr>
			<tr>
				<th>내용</th>
				<td><textarea rows="5" cols="50" name="content">${vo.content}</textarea></td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td><input type="password" name="pwd" value="${vo.pwd}"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" value="수정" onclick="send(this.form);">
					<input type="button" value="목록" onclick="location.href='list.do'">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>