국비 TIL(Today I Learned) 20220811 anboard테이블 리뷰, mem테이블 실습

TIL/academy

국비 TIL(Today I Learned) 20220811 anboard테이블 리뷰, mem테이블 실습

토희 2022. 8. 11. 18:30

728x90

면접질문

* CRUD만드는데 얼마나 걸려요?

1번 내가 가지고 있는 소스 기반으로 구현한다고 했을때의 경우

2번 회사의 소스 분석하면서 만들었을때의 경우

3번 맨땅에서 스프링부터 구성했을때의 경우

1번 경우, 디자인 제외하고 하루정도면 충분할것 같습니다

2번 경우 5~6일

어제 실습한

anboard테이블 강사님 리뷰중, 나랑 다른거만 작성함

1. controller

2. sql

3., getAnboardList 쿼리문 작성할때

오늘작성된 글이면 시간이 뜨게하고, 오늘이 아닌 DATE면은 년월일이 뜨도록 추가함

내 궁금증 질문내용

Test_SQL.xml에 삭제 쿼리문

쿼리에는 <update></update> 쓰고,

TestDao1.java에는 delete로 썼어(sqlSession 뒷부분) => 강사님이 상관없데, sqlSession.delete나 update, insert는 어차피

'1행이 업데이트되었습니다.' 이런 1행 숫자 받는게 똑같아서 상관없데

update이는 시퀀스 증가하지 않으니까 rollback해도 상관없음, 디벨로퍼에서 쿼리문 맞는지 확인하고

Res대신에 쓰는법

anboardInsert.jsp

anboardAction.jsp

Res 대신 @PathVariable 로 쓰는법

기존

/SampleSpring/res

=> resources/~~~

/SampleSpring/resources/~~

현재

/SampleSpring/Action/insert

=> resources/~~

/SampleSpring/Action/resourdes/~~

따라서 이렇게 해줘야 => ../resources/~~~

기존경로 처림 됨 /SampleSpring/resources/~~

조회수 하는법

controller에서 detail쪽에 매서드 추가

ITestService1.jsp

TestService1.jsp

ITestDao1.jsp

TestDao1.jsp

Test_SQL.xml

지금 내코드는

Insert하는 부분은 anboardAction으로 하고 (파라미터로 넘기고)

update는 anboardRes로 되고있는듯 (gnb받고)

ck에디터 넣을예정

5버전은 es6문법이라 4버전으로 할예정

강사님이 샘플을 script에 넣어두심

anboard테이블 res대신에 파라미터로 준 후 코드

PshExamController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITestService1;

@Controller
public class PshExamController {
	@Autowired
	public ITestService1 iTestService1;

	@Autowired
	public IPagingService ips; // 페이징 서비스 객체 주입

	// anboard테이블!!!!!!!!
	@RequestMapping(value = "/anboardList")
	public ModelAndView anboardList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 현재페이지
		int page = 1;

		// 넘어오는 페이지 셋팅
		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page")); // 받아온 페이지 할당
		}

		// 총 데이터 개수 취득
		int cnt = iTestService1.getAnboardCnt(params);

		// 페이징 데이터 계산
		// ips.getPagingData(page, maxCount, viewCnt, pageCnt)
		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 3, 2);

		// 파라미터에 시작, 종료값 추가
		// 한쪽으로 필요 데이터를 몰았다?
		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		// 데이터 취득
		List<HashMap<String, String>> list = iTestService1.getAnboardList(params);

		// 목록 데이터
		mav.addObject("list", list);
		// 페이징 정보
		mav.addObject("pd", pd);
		// 현재 페이지
		mav.addObject("page", page);
		mav.setViewName("test/anboardList");

		return mav;
	}

	@RequestMapping(value = "/anboardDetail")
	public ModelAndView anboardDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 조회수 증가
		iTestService1.updateHit(params);

		if (params.get("no") == null || params.get("no") == "") {
			mav.setViewName("redirect:anboardList");

		} else {
			HashMap<String, String> data = iTestService1.getAnboard(params);

			mav.addObject("data", data);
			mav.setViewName("test/anboardDetail");
		}

		return mav;
	}

	@RequestMapping(value = "/anboardInsert")
	public ModelAndView managerInsert(ModelAndView mav) {
		mav.setViewName("test/anboardInsert");
		return mav;

	}

	@RequestMapping(value = "/anboardRes")
	public ModelAndView anboardInsertRes(@RequestParam HashMap<String, String> params, ModelAndView mav)
			throws Throwable {

		System.out.println(params.toString());
		try {
			int cnt = 0; // insert, update, delete 다 쓸거기 때문에 처음에 0줌

			switch (params.get("gbn")) {
			case "i":
				cnt = iTestService1.insertAnboard(params);
				break;
			case "u":
				cnt = iTestService1.updateAnboard(params);
				break;
			case "d":
				cnt = iTestService1.deleteAnboard(params);
				break;
			}

			if (cnt > 0) { // 1건 이상 등록된 경우
				mav.addObject("res", "success");
			} else { // 등록 안된 경우
				mav.addObject("res", "failded");
			}
		} catch (Exception e) { // 예외 발생시
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/anboardRes");
		return mav;
	}

	// 글 수정페이지
	@RequestMapping(value = "/anboardUpdate")
	public ModelAndView anboardUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 기존데이터 조회해와야함
		HashMap<String, String> data = iTestService1.getAnboard(params);
		mav.addObject("data", data);

		mav.setViewName("test/anboardUpdate");

		return mav;

	}

	// gbn없이 하는법
	// RequestMapping에서 주소 중 특정 내용들을 값으로 활용 가능
	// 주소 값에 {키}를 지정하면 해당 내용을 변수로 받을 수 있음
	@RequestMapping(value = "anboardAction/{action}")
	public ModelAndView anboardAction(
			// @pathVariable : 경로를 변수로 활용하여 받아옴
			@PathVariable String action, // action이 위의 {action} 이랑 이름 같아야 함, 여기서는 insert를 받아올 예정
			@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		int cnt = 0;

		try {
			switch (action) {
			case "insert":
				cnt = iTestService1.insertAnboard(params);
				break;
			case "update":
				cnt = iTestService1.updateAnboard(params);
				mav.addObject("flag", "u"); // 업데이트 할때 값을 하나 더 주기, 이 역활이 gbn 대신
				break;
			case "delete":
				cnt = iTestService1.deleteAnboard(params);
				break;
			}

			if (cnt > 0) { // 1건 이상 등록된 경우
				mav.addObject("res", "success");
			} else { // 등록 안된 경우
				mav.addObject("res", "failded");
			}

		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/anboardAction");
		return mav;

	}

}

ITestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITestService1 {

	// anboard 테이블

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable;

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public void updateHit(HashMap<String, String> params) throws Throwable;

}

TestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITestDao1;

@Service
public class TestService1 implements ITestService1 {
	@Autowired
	public ITestDao1 iTestDao1;

	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardList(params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardCnt(params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboard(params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.insertAnboard(params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.updateAnboard(params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.deleteAnboard(params);
	}

	@Override
	public void updateHit(HashMap<String, String> params) throws Throwable {
		iTestDao1.updateHit(params);

	}
}

ITestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITestDao1 {

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params);

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public void updateHit(HashMap<String, String> params) throws Throwable;

}

TestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TestDao1 implements ITestDao1 {
	@Autowired
	public SqlSession sqlSession;

	
	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) {
		return sqlSession.selectList("test.getAnboardList", params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboardCnt", params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboard", params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("test.insertAnboard", params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("test.updateAnboard", params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.delete("test.deleteAnboard", params);
	}

	@Override
	public void updateHit(HashMap<String, String> params) throws Throwable {
		sqlSession.update("test.updateHit", params);
	}

}

Test_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">
	
	<!-- anboard테이블 -->
	
	<select id="getAnboardList" resultType="hashmap" parameterType="hashmap">		
		SELECT S.NO, S.TITLE, S.WRITER, S.HIT, S.DT
		FROM (SELECT NO, TITLE, WRITER, HIT, CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
        THEN TO_CHAR(DT, 'HH24:MI')
        ELSE TO_CHAR(DT, 'YY.MM.DD')
        END AS DT,
        ROW_NUMBER() OVER(ORDER BY DT DESC, NO DESC) AS RNK
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
		<if test="1 == 1">
			<choose>
				<when test="sortGbn == 0">
					ORDER BY NO ASC
				</when>
				<when test="sortGbn == 1">
					ORDER BY TITLE ASC
				</when>
			</choose>
		</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end} 
	</select>

	<select id="getAnboard" resultType="hashmap" parameterType="hashmap">
		SELECT NO, TITLE, WRITER, CON, HIT, DT 
		FROM ANBOARD
		WHERE NO = #{no}
	</select>
	
	<insert id="insertAnboard" parameterType="hashmap">
		INSERT INTO ANBOARD(NO, TITLE, WRITER, CON)
		VALUES(ANBOARD_SEQ.NEXTVAL, #{title}, #{writer}, #{con})
	</insert>
	
	<update id="deleteAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET TITLE = #{title},
                WRITER = #{writer},
                CON = #{con}
                WHERE NO = #{no}
	</update>
	
	<select id="getAnboardCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0"> <!-- searchGbn eq 0 -->
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>


	<update id="updateHit" parameterType="hashmap" >
		UPDATE ANBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
</mapper>

anboardAction.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 type="text/javascript" src="../resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 주소창의 데이터 받을수 있긴 한데 정말 귀찮으니 어떻게 처리할건인가 하면
	
	// src에  "../resources/script/jquery/jquery-1.12.4.min.js"로 변경하기
	// 또는 src에  "${pageContext.request.contextPath}/resources/script/jquery/jquery-1.12.4.min.js"
	
	// 경로문제가 스크립트뿐만 아니라 list도 문제임
		
	switch("${res}"){
	case "success" : 
		if("${flag}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "../anboardList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="../anboardDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>
</body>
</html>

anboardInsert.jsp (form 주소바뀜 /insert, CKEDITOR 사용)

<%@ 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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#title").val()) == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($.trim($("#writer").val()) == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		}  else if($.trim($("#con").val()) == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="anboardList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- gbn대신에 action에 /뒤에 이름으로 달라지게 -->
<form action="anboardAction/insert" id="actionForm" method="post">
	제목<input type="text" name="title" id="title" /><br/>
	작성자<input type="text" name="writer" id="writer" /><br/>
	내용<textarea rows="10" cols="30" name="con" id="con"></textarea>
</form> 

<!-- <form action="anboardRes" id="actionForm" method="post">
gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete
<input type="hidden" name="gbn" value="i"/>
제목 
<input type="text" name="title" id="title" />
<br />
작성자 
<input type="text" name="writer" id="writer" />
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br/>
</form>  -->
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

anboardDetail.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>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","anboardList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","anboardAction/delete"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","anboardUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>	
번호: ${data.NO}<br/>
제목: ${data.TITLE}<br/>
내용: ${data.CON}<br/>
작성자: ${data.WRITER}<br/>
조회수: ${data.HIT}<br/>
작성일: ${data.DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>

anboardList.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 type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	if("${param.sortGbn}" == ""){
		$("#sortGbn").val("0");	
	}
	if("${param.sortGbn}" != "") { 
		$("#sortGbn").val("${param.sortGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "anboardInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	})
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="anboardDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<select name="sortGbn" id="sortGbn">
		<option value="0">번호순</option>
		<option value="1">제목순</option>
	</select>
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">제목</option>
		<option value="1">작성자</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.NO}">
				<td>${data.NO}</td>
				<td>${data.TITLE}</td>
				<td>${data.WRITER}</td>
				<td>${data.HIT}</td>
				<td>${data.DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

anboardRes.jsp (param.gbn 부분 변경됨)

<%@ 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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "anboardList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="anboardDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>
</body>
</html>

anboardUpdate.jsp (CKEDITOR 사용부분만 변경)

<%@ 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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		if($("#title").val() == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($("#writer").val() == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		} else if($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<!-- 번호는 시퀀스 쓸거기 때문에 받을 필요없음, 보여줄 필요 없음, 저장되야 글번호 보여지지 -->
<!-- select 전달하기 위해  name줘야함 -->
<!-- option value 지정해줘야함! -->
<form action="anboardRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.NO}"/> <!-- 이 번호만 수정해라라는 조건 달기위해 필요 -->
<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
<!-- 전 화면에서 넘어온 검색 정보 -->
<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
제목 
<input type="text" name="title" id="title" value="${data.TITLE}"/>
<br />
작성자 
<input type="text" name="writer" id="writer" value="${data.WRITER}"/>
<br/>
내용 
<textarea name="con" id="con">${data.CON}</textarea>
<br />
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

mem테이블 실습

아직 강사님이 리뷰전, 내가 한 코드

MemController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITestService2;

@Controller
public class MemController {
	@Autowired
	public ITestService2 iTestService2;

	@Autowired
	public IPagingService ips; // 페이징 서비스 객체 주입

	// MEM테이블 글 목록
	@RequestMapping(value = "/memList")
	public ModelAndView memList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 현재페이지
		int page = 1;

		// 넘어오는 페이지 셋팅
		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page")); // 받아온 페이지 할당
		}

		// 총 데이터 개수 취득
		int cnt = iTestService2.getMemCnt(params);

		// 페이징 데이터 계산
		// ips.getPagingData(page, maxCount, viewCnt, pageCnt)
		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 3, 2);

		// 파라미터에 시작, 종료값 추가
		// 한쪽으로 필요 데이터를 몰았다?
		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		// 데이터 취득
		List<HashMap<String, String>> list = iTestService2.getMemList(params);

		// 목록 데이터
		mav.addObject("list", list);
		// 페이징 정보
		mav.addObject("pd", pd);
		// 현재 페이지
		mav.addObject("page", page);
		mav.setViewName("test/memList");

		return mav;
	}

	@RequestMapping(value = "/memDetail")
	public ModelAndView anboardDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		if (params.get("no") == null || params.get("no") == "") {
			mav.setViewName("redirect:anboardList");

		} else {
			HashMap<String, String> data = iTestService2.getMem(params);

			mav.addObject("data", data);
			mav.setViewName("test/memDetail");
		}

		return mav;
	}

	@RequestMapping(value = "/memInsert")
	public ModelAndView memInsert(ModelAndView mav) {
		mav.setViewName("test/memInsert");
		return mav;
	}

	@RequestMapping(value = "/memRes")
	public ModelAndView memInsertRes(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		try {
			int cnt = 0;

			switch (params.get("gbn")) {
			case "i":
				cnt = iTestService2.insertMem(params);
				break;
			case "u":
				cnt = iTestService2.updateMem(params);
				break;
			case "d":
				cnt = iTestService2.deleteMem(params);
				break;
			}

			if (cnt > 0) {
				mav.addObject("res", "success");
			} else {
				mav.addObject("res", "failded");
			}
		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/memRes");
		return mav;
	}

	@RequestMapping(value = "/memUpdate")
	public ModelAndView bookUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 기존데이터 조회해와야함

		System.out.println(params.toString());

		HashMap<String, String> data = iTestService2.getMem(params);
		mav.addObject("data", data);

		mav.setViewName("test/memUpdate");

		return mav;

	}

}

ITestService2.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITestService2 {

	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) throws Throwable;

	public int getMemCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable;

	public int insertMem(HashMap<String, String> params) throws Throwable;

	public int updateMem(HashMap<String, String> params) throws Throwable;

	public int deleteMem(HashMap<String, String> params) throws Throwable;

}

TestService2.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITestDao2;

@Service
public class TestService2 implements ITestService2 {
	@Autowired
	public ITestDao2 iTestDao2;

	@Override
	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMemList(params);
	}

	@Override
	public int getMemCnt(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMemCnt(params);
	}

	@Override
	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMem(params);
	}

	@Override
	public int insertMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.insertMem(params);
	}

	@Override
	public int updateMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.updateMem(params);
	}

	@Override
	public int deleteMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.deleteMem(params);
	}

}

ITestDao2.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITestDao2 {

	public List<HashMap<String, String>> getMemList(HashMap<String, String> params);

	public int getMemCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable;

	public int insertMem(HashMap<String, String> params) throws Throwable;

	public int updateMem(HashMap<String, String> params) throws Throwable;

	public int deleteMem(HashMap<String, String> params) throws Throwable;

}

TestDao2.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TestDao2 implements ITestDao2 {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) {
		return sqlSession.selectList("mem.getMemList", params);
	}

	@Override
	public int getMemCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("mem.getMemCnt", params);
	}

	@Override
	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("mem.getMem", params);
	}

	@Override
	public int insertMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("mem.insertMem", params);
	}

	@Override
	public int updateMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("mem.updateMem", params);
	}

	@Override
	public int deleteMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.delete("mem.deleteMem", params);
	}

}

Mem_SQLxml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="mem">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getMemList" resultType="hashmap" parameterType="hashmap">
		SELECT S.MEM_NO, S.MEM_ID, S.MEM_NM, S.REG_DT
		FROM (SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT,
       		  ROW_NUMBER() OVER(ORDER BY REG_DT DESC, MEM_NO DESC) AS RNK
			  FROM MEM
			  WHERE DEL = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 품목 -->
						AND MEM_ID LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 수량 -->
						AND MEM_NM = #{searchTxt}
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<!-- 
		parameterType : 실행시 받는 값 
		#{키} : 헤당위치에 문자열로 키에 해당하는 값을 넣어준다
		ex) no에 3이 들어있는 경우
		WHERE SELL_NO = #{no}
		=> WHERE SELL_NO = '3' // 문자열이기 때문에  ' '이 들어감
		parameterType dao받는값, resultType값이 db실행결과
	-->
	<select id="getMem" resultType="hashmap" parameterType="hashmap">
		SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(MEM_BIRTH,'YYYY-MM-DD') AS MEM_BIRTH, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT
		FROM MEM
		WHERE MEM_NO = #{no}
	</select>
	
	<!-- insert는 resultType 이 없음 -->
	<insert id="insertMem" parameterType="hashmap">
		INSERT INTO MEM(MEM_NO, MEM_ID, MEM_PW, MEM_NM, MEM_BIRTH)
		VALUES(MEM_SEQ.NEXTVAL, #{memId}, #{memPw}, #{memNm}, #{memBirth})
	</insert>
	
	
	<update id="deleteMem" parameterType="hashmap">
		UPDATE MEM SET DEL = 0
		WHERE MEM_NO = #{no}
	</update>
	
	<update id="updateMem" parameterType="hashmap">
		UPDATE MEM SET MEM_ID = #{memId},
                MEM_NM = #{memNm},
                MEM_BIRTH = #{memBirth}
       	WHERE MEM_NO = #{no}
	</update>
	
	<select id="getMemCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MEM
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 품목 -->
					AND MEM_ID LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 수량 -->
					AND MEM_NM = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	
</mapper>

memList.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 type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","memDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "memInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","memList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","memList");
		$("#actionForm").submit();
	})
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="memDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">아이디</option>
		<option value="1">이름</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>이름</th>
			<th>등록일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.MEM_NO}">
				<td>${data.MEM_NO}</td>
				<td>${data.MEM_ID}</td>
				<td>${data.MEM_NM}</td>
				<td>${data.REG_DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

memDetail.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>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","memList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","memRes"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","memUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.MEM_NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>	
번호: ${data.MEM_NO}<br/>
아이디: ${data.MEM_ID}<br/>
이름: ${data.MEM_NM}<br/>
생년월일: ${data.MEM_BIRTH}<br/>
등록일: ${data.REG_DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>

memInsert.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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
	
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		} else if($.trim($("#memPw").val()) == ""){
			alert("비밀번호를 입력하세요");
			$("#memPw").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<form action="memRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="i"/>
아이디 
<input type="text" name="memId" id="memId" />
<br />
비밀번호 
<input type="password" name="memPw" id="memPw" />
<br />
이름
<input type="text" name="memNm" id="memNm" />
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" />
<br/>
</form>  
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

memRes.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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ 
			$("#goForm").submit();
		} else {
			location.href = "memList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="memDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" /> 
</form>
</body>
</html>

memUpdate.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 type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {

		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memRes" id="actionForm" method="post">
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.MEM_NO}"/> 
아이디 
<input type="text" name="memId" id="memId" value="${data.MEM_ID}"/>
<br />
이름
<input type="text" name="memNm" id="memNm"  value="${data.MEM_NM}"/>
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" value="${data.MEM_BIRTH}"/>
<br/>
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

728x90

'TIL > academy' 카테고리의 다른 글

국비 TIL(Today I Learned) 20220816 로그인 후, 글삭제 수정/ Ajax 테이블 (0)	2022.08.16
국비 TIL(Today I Learned) 20220812 MEM테이블 리뷰, 로그인, 로그아웃 화면 (0)	2022.08.12
국비 TIL(Today I Learned) 20220810 검색하기, sell, manager, anboard테이블 (0)	2022.08.10
국비 TIL(Today I Learned) 20220809 테이블 페이징 처리 (0)	2022.08.09
국비 TIL(Today I Learned) 20220808 Spring 시험, 팀별 프로젝트 (0)	2022.08.09

현재글국비 TIL(Today I Learned) 20220811 anboard테이블 리뷰, mem테이블 실습

redis명령어, redis, Github, spring-boot-starter-validation, Spring Boot 구동오류, 배열, java, Til, 채팅기능, firebase, TlL, mariaDB, 국비학원, 변수, 쿼리문, mysql, 스프링부트, IntelliJ, Spring Boot, issuelabels,

Today :
Yesterday :

makeaplayground