TIL/academy

국비 TIL(Today I Learned) 20220816 로그인 후, 글삭제 수정/ Ajax 테이블

토희 2022. 8. 16. 16:27
728x90

SSO(Single Sign On) - 같은 유형의 서비스들에 대하여 로그인 세션을 공유하는것, 같이 로그인, 같이 로그아웃
대규모 프로젝트를 한다고 하면 SSO를 연계하라고 할것이다.

회사마다 틀림, 연동해야하는곳을 들어간다면 가이드를 준다.

이름 정도만 알아두자

 

 

Controller.java만들기, Service, Dao 만들고, SQL 만들고

 

getTCnt 메소드 만들고

Cnt 쿼리

SELECT COUNT(*) AS CNT
FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
AND M.DEL = 1
WHERE T.DEL = 1
-- 제목
-- AND T.TITLE LIKE '%' || 'TEST' || '%'
-- 작성자
AND M.MEM_NM LIKE '%' || 'TEST' || '%'
;

 

getTList 메소드 만들고

List의 쿼리

SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT
FROM(
SELECT T.NO, T.TITLE, M.MEM_NM, T.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 T.NO DESC) AS RNUM
FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
AND M.DEL = 1
WHERE T.DEL = 1
-- 제목
-- AND T.TITLE LIKE '%' || 'TEST' || '%'
-- 작성자
AND M.MEM_NM LIKE '%' || 'TEST' || '%') T
WHERE T.RNUM BETWEEN 1 AND 10
;

 

 

anboardList 복붙해서

list 만들고

로그인되어 있을때만 글추가 버튼 활성화되게 if문

 

sMemNm은 저번주에 만든 LoginController에 있는 값임

 

지난주 login의 main.jsp에 있는 내요을

T/list.jsp로 가져옴

 

anboardInsert 복붙해서

insert 만들고 작성자 변경

이 부분 삭제

 

 

 

 

시퀀스 만들고

 

insert쿼리

 

MEM_NO 6인 사람이 DEL = 0이라서, 데이터 목록에 안 뜸(탈퇴한 사람의 데이터는 목록에 안뜸)

 

 

 

공통된 부분 header만들어서, import

 

import쉽게 하는 프레임워크

 

 

TController.java

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

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

import javax.servlet.http.HttpSession;

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.ITService;

@Controller
public class TController {
	@Autowired
	public ITService iTService;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/TList")
	public ModelAndView tList(@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 = iTService.getTCnt(params);

		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 10, 10);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iTService.getTList(params);

		mav.addObject("list", list);
		mav.addObject("page", page);
		mav.addObject("pd", pd);

		mav.setViewName("test/T/list");

		return mav;
	}

	// 첫번째로 로그인됬을때 글 추가 버튼이 활성화되게 하고, 두번째로 주소창에서 입력되어 들어오는것을 막기 위해 권한 체크용으로 세션추가
	@RequestMapping(value = "/TInsert")
	public ModelAndView tInsert(HttpSession session, ModelAndView mav) {

		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			// 로그인 중이라면
			mav.setViewName("test/T/insert");
		} else {
			// 로그인 중이 아니라면 로그인으로 이동
			mav.setViewName("redirect:testLogin");
		}

		return mav;
	}

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

		int cnt = 0;

		try {
			switch (params.get("gbn")) {
			case "i":
				cnt = iTService.insert(params);
				break;
			case "d":
				cnt = iTService.delete(params);
				break;
			case "u":
				cnt = iTService.update(params);
			}
			if (cnt > 0) {
				mav.addObject("res", "success");
			} else {
				mav.addObject("res", "failed");
			}

		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}

		mav.setViewName("test/T/action");
		return mav;

	}

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

		if (params.get("no") != null && params.get("no") != "") {
			// 번호가 들어왔다면
			// 조회수 (데이터 조회보다 먼저해야함)
			iTService.updateTHit(params);

			// 데이터 조회
			HashMap<String, String> data = iTService.getT(params);

			mav.addObject("data", data);
			mav.setViewName("test/T/detail");
		} else {
			// 번호가 들어오지 않았다면 리스트로 이동
			mav.setViewName("redirect:TList");
		}

		return mav;
	}

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

		if (params.get("no") != null && params.get("no") != "") {

			// 데이터 조회
			HashMap<String, String> data = iTService.getT(params);

			mav.addObject("data", data);
			mav.setViewName("test/T/update");
		} else {
			// 번호가 들어오지 않았다면 리스트로 이동
			mav.setViewName("redirect:TList");
		}

		return mav;
	}
}

 

 

ITService.java

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

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

public interface ITService {

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

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

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

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

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

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

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

}

 

TService.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.ITDao;

@Service
public class TService implements ITService {
	@Autowired
	public ITDao iTDao;

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

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

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

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

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

	}

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

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

 

ITDao.java

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

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

public interface ITDao {

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

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

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

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

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

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

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

}

TDao.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 TDao implements ITDao {
	@Autowired
	public SqlSession sqlSession;

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

	@Override
	public List<HashMap<String, String>> getTList(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectList("T.getTList", params);
	}

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

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

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

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

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

 

T_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">
<mapper namespace="T">
	<select id="getTCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getTList" resultType="hashmap" parameterType="hashmap">
		SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT
		FROM(
		SELECT T.NO, T.TITLE, M.MEM_NM, T.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 T.NO DESC) AS RNUM
				FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
				AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>) T
		WHERE T.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertT" parameterType="hashmap">
		INSERT INTO TBOARD(NO, TITLE, MEM_NO, CON)
		VALUES (TBOARD_SEQ.NEXTVAL, #{title} , #{memNo}, #{con})
	</insert>
	 
	<select id="getT" parameterType="hashmap"  resultType="hashmap">
		SELECT T.NO, T.TITLE, M.MEM_NO, M.MEM_NM, T.CON, T.HIT,
	    TO_CHAR(T.DT, 'YYYY-MM-DD') AS DT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.NO = #{no}
	</select>
	
	<update id="updateTHit" parameterType="hashmap">
		UPDATE TBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteT"  parameterType="hashmap">
		UPDATE TBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateT"  parameterType="hashmap">		
		UPDATE TBOARD SET TITLE = #{title},
		CON = #{con}
		WHERE NO = #{no}
	</update>
</mapper>

 

T폴더에

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 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}");	
	}
	
	$('select').on('change', function() {
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	});
	
	
	$("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","TDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "TInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	})
	
	
})
</script>
</head>
<body>
<c:import url="/testHeader"></c:import>
<!-- 기존 검색 내용 유지용 -->
<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 가져갈거임 -->
	<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" />
	<c:if test="${!empty sMemNm}"> <!-- 로그인 중이라면 -->
		<input type="button" value="추가" id="insertBtn" />
	</c:if>
</form>
<br/>
<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.MEM_NM}</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>

insert.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 () {
	// 에디터 연결
	// 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($("#con").val()) == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="TList" 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="TAction" 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 />
작성자${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/>
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br/>
</form> 
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

 

detail.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","TList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","TAction"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","TUpdate");
		$("#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}"/>
</form>	
번호: ${data.NO}<br/>
제목: ${data.TITLE}<br/>
작성자: ${data.MEM_NM}<br/>
조회수: ${data.HIT}<br/>
작성일: ${data.DT}<br/>
내용: ${data.CON}<br/>
<c:if test="${sMemNo eq data.MEM_NO}">
	<input type="button" value="수정" id="updateBtn" />
	<input type="button" value="삭제" id="deleteBtn" />
</c:if>
<input type="button" value="목록" id="listBtn" />
</body>

 

action.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 = "TList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="TDetail" 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="sortGbn" value="${param.sortGbn}"/>
</form>
</body>
</html>

update.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" 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($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="TAction" id="actionForm" method="post">
<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}"/>
번호: ${data.NO}<br/>
제목: <input type="text" name="title" id="title" value="${data.TITLE}"/><br />
작성자: ${data.MEM_NM}<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>

 

 

login쪽에 바뀐거

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
$(document).ready(function () {
	$("#logoutBtn").on("click", function () {
		location.href = "testLogout";
	})
	
	$("#loginBtn").on("click", function () {
		location.href = "testLogin";
	})
})

</script>
<c:choose>
	<c:when test="${empty sMemNm}"> <!-- el태그의 empty : 해당 값이 비어있는지 확인 -->
		<input type="button" value="로그인" id="loginBtn" />
	</c:when>
	<c:otherwise>
		${sMemNm}님 어서어세요. <input type="button" value="로그아웃" id="logoutBtn" />
	</c:otherwise>
</c:choose>

main.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 () {
	
})
</script>
</head>
<body>
<c:import url="/testHeader"></c:import>
<br/>
<a href="TList">TBoard LISt</a>
</body>
</html>

LoginController.java

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

import java.util.HashMap;

import javax.servlet.http.HttpSession;

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.web.test.service.ILoginService;

@Controller
public class LoginController {
	@Autowired
	public ILoginService iLoginService;

	@RequestMapping(value = "/testLogin")
	public ModelAndView testLogin(HttpSession session, // 로그인 된 상태에서 로그인 화면 못가게 하기 위해
			ModelAndView mav) {
		// session의 getAttribute(키) : 세션값 취득
		// 세션에 값이 존재한다면 main으로 이동
		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/login");
		}

		return mav;
	}

	// DB에 붙을예정
	@RequestMapping(value = "/testLoginAction")
	public ModelAndView testLoginAction(
			// HttpServletRequest req, // 1. 요청 객체 취득
			HttpSession session, // 2. Spring에 Session 객체 요청
			@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 1. Request를 통한 세션 취득
		// HttpSession session = req.getSession();

		// 아이디와 비밀번호가 일치하는 사용자 정보 취득
		HashMap<String, String> data = iLoginService.checkMem(params);

		if (data != null) { // 조회 데이터가 있다면
			// 세션에 값 추가
			session.setAttribute("sMemNo", data.get("MEM_NO"));
			session.setAttribute("sMemNm", data.get("MEM_NM"));

			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/action");
		}
		return mav;
	}

	@RequestMapping(value = "/testMain")
	public ModelAndView testMain(ModelAndView mav) {
		mav.setViewName("test/login/main");

		return mav;
	}

	@RequestMapping(value = "/testLogout")
	public ModelAndView testLogout(HttpSession session, ModelAndView mav) {
		// 요청 사용자 세션 초기화
		session.invalidate();

		mav.setViewName("redirect:testMain");

		return mav;
	}

	@RequestMapping(value = "/testHeader")
	public ModelAndView testHeader(ModelAndView mav) {
		mav.setViewName("test/login/header");

		return mav;
	}
}

 

이제 Ajax로 게시판 하는거 새로 폴더, 파일 만듬

 

https://interconnection.tistory.com/137

 

Jackson ObjectMapper 정리

개요 Java 개발자라면 Jackson에서 제공하는 ObjectMapper와 자주 마주치게 됩니다. Java 클래스 내용을 확인하거나 내용물의 Parsing 과정에 필요한 커스터마이징이 존재하기 때문입니다. 물론 중요한 기

interconnection.tistory.com

Jackson 잭슨관련해서

pom.xml에 설정내용이 있음 (메이븐의 경우)

 

 

 

 

get으로 들어오면

 

 

값 가져오기

 

 

ajax로 받아오면, action파일이 사라질 예정

 

TestAController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;

@Controller
public class TestAController {

	@RequestMapping(value = "/testA")
	public ModelAndView testA(ModelAndView mav) {

		mav.setViewName("testa/testA");
		return mav;
	}

	// RequestMapping의 method : 해당 주소의 접근 형태를 제한
	// produces : 문서의 형태와 언어셋
	@RequestMapping(value = "/testAAjax", method = RequestMethod.POST, // get방식으로 들어오면 동작안할거여, POST만 가능
			produces = "text/json;charset=UTF-8")

	// @ResponseBody : 결과가 View로 인식하게 함. 따라서 ViewResolver가 동작 안함,
	// Spring에 결과가 View인척 하는 역할을 제공
	@ResponseBody
	public String testAAjax() throws Throwable {

		// JSON핸들링
		ObjectMapper mapper = new ObjectMapper(); // 외부라이브러리임, 스프링에서 제공하는건 아님, jackson에서 제공
		// 보낼 값들을 담을 객체
		Map<String, Object> model = new HashMap<String, Object>();

		model.put("msg", "Hi");
		int[] arr = { 3, 6, 9 };
		model.put("arr", arr);
		// JSON = > {"msg":"hi","arr":[3,6,9]}
		// 원래 이렇게 해야하는데, 이거를 손 쉽게 할려고 ObjectMapper 사용
		// writeValueAsString(객체) : 객체의 내용을 JSON 문자열로 변환
		// 단, 사용불가능한 형식이 들어올 수 있기 때문에 예외처리 필요 그래서 throws Throwable 붙여줌
		System.out.println(mapper.writeValueAsString(model));

		return mapper.writeValueAsString(model);
	}

}

ITestAService.java

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

public interface ITestAService {

}

 

TestAService.java

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

public class TestAService {

}

 

ITestADao.java

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

public interface ITestADao {

}

 

TestADao.java

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

public class TestADao {

}

 

testA.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 () {
	$.ajax({
		url : "testAAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res);
			console.log(res.msg);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseTxt); // 실패 상세 태역
		}
	});
});
</script>
</head>
<body>

</body>
</html>

 

728x90

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

국비 TIL(Today I Learned) 20220822 ajaxForm으로 파일 첨부, 다운받기  (0) 2022.08.22
국비 TIL(Today I Learned) 20220818 스프링 ajax로 추가, 상세, 수정, 삭제, mem테이블 실습  (0) 2022.08.18
국비 TIL(Today I Learned) 20220812 MEM테이블 리뷰, 로그인, 로그아웃 화면  (0) 2022.08.12
국비 TIL(Today I Learned) 20220811 anboard테이블 리뷰, mem테이블 실습  (0) 2022.08.11
국비 TIL(Today I Learned) 20220810 검색하기, sell, manager, anboard테이블  (0) 2022.08.10

'TIL/academy'의 다른글

  • 현재글국비 TIL(Today I Learned) 20220816 로그인 후, 글삭제 수정/ Ajax 테이블

관련글

댓글

티스토리툴바