스프링 프레임워크 (32)

스프링 프레임워크 · 2024.05.22

[스프링 프레임워크] 32장 연습

[스프링 프레임워크] 32장 연습

스프링 프레임워크
스프링 프레임워크 · 2024.05.21

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장

스프링 프레임워크
스프링 프레임워크 · 2024.05.20

[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조

[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조

스프링 프레임워크

스프링 프레임워크

[스프링 프레임워크] 32장 연습

2024. 5. 22. 16:08

연습용

테이블 생성 및 데이터 삽입

---------------------------------------------
--공통코드정보
CREATE TABLE COM_CODE_INFO(
    COM_CODE VARCHAR2(10),
    COM_CODE_NM VARCHAR2(150),
    DESCRIPTIONS VARCHAR2(300),
    CONSTRAINT PK_CCI PRIMARY KEY(COM_CODE)
);

INSERT INTO COM_CODE_INFO
VALUES('ENT01','전사관계자구분','전사관계자구분');
INSERT INTO COM_CODE_INFO
VALUES('CUR01','현직무구분','현직무구분');
INSERT INTO COM_CODE_INFO
VALUES('PFL01','프로필구분','프로필구분');
INSERT INTO COM_CODE_INFO
VALUES('CRE01','경력구분','경력구분');

SELECT COM_CODE, COM_CODE_NM, DESCRIPTIONS
FROM  COM_CODE_INFO
ORDER BY COM_CODE;

CREATE TABLE COM_DET_CODE_INFO(
    COM_DET_CODE VARCHAR2(10),
    COM_CODE VARCHAR2(10),
    COM_DET_CODE_NM VARCHAR2(150),
    DESCRIPTIONS VARCHAR2(300),
    CONSTRAINT PK_CDCI PRIMARY KEY(COM_DET_CODE),
    CONSTRAINT FK_CDCI FOREIGN KEY(COM_CODE) REFERENCES COM_CODE_INFO(COM_CODE)
);

INSERT INTO COM_DET_CODE_INFO
VALUES('ENT01001','ENT01','개인고객','개인고객');
INSERT INTO COM_DET_CODE_INFO
VALUES('ENT01002','ENT01','직원','직원');
INSERT INTO COM_DET_CODE_INFO
VALUES('CUR01001','CUR01','강사','강사');
INSERT INTO COM_DET_CODE_INFO
VALUES('CUR01002','CUR01','관리직원','관리직원');
INSERT INTO COM_DET_CODE_INFO
VALUES('PFL01001','PFL01','경력사항','경력사항');
INSERT INTO COM_DET_CODE_INFO
VALUES('PFL01002','PFL01','보유자격','보유자격');
INSERT INTO COM_DET_CODE_INFO
VALUES('CRE01001','CRE01','프로젝트','프로젝트');
INSERT INTO COM_DET_CODE_INFO
VALUES('CRE01002','CRE01','강의','강의');
------------------------------------------------

--두 개의 테이블을 내부 조인하기
SELECT C.COM_CODE, C.COM_CODE_NM, C.DESCRIPTIONS
    , D.COM_DET_CODE, D.COM_CODE, D.COM_DET_CODE_NM, D.DESCRIPTIONS
FROM COM_CODE_INFO C, COM_DET_CODE_INFO D
WHERE C.COM_CODE = D.COM_CODE;

--ANSI표준
SELECT C.COM_CODE, C.COM_CODE_NM, C.DESCRIPTIONS
    , D.COM_DET_CODE, D.COM_CODE, D.COM_DET_CODE_NM, D.DESCRIPTIONS
FROM COM_CODE_INFO C
INNER JOIN COM_DET_CODE_INFO D ON (C.COM_CODE = D.COM_CODE);

create

ComCodeInfoVO.java

package kr.or.ddit.vo;

import java.util.List;

import lombok.Data;

//공통 코드 정보
@Data
public class ComCodeInfoVO {
	private String comCode;
	private String comCodeNm;
	private String descriptions;
	
	//COM_CODE_INFO : COM_DET_CODE_INFO = 1 : N
	private List<ComDetCodeInfoVO> comDetCodeInfoVOList;
}

ComDetCodeInfoVO.java

package kr.or.ddit.vo;

import lombok.Data;

//공통 상세 코드 정보
@Data
public class ComDetCodeInfoVO {
	private String comDetCode;
	private String comCode;
	private String comDetCodeNm;
	private String descriptions;
}

mybatisAlias.xml
</configuration> 안에 추가

<typeAlias type="kr.or.ddit.vo.ComCodeInfoVO" alias="comCodeInfoVO"/>
<typeAlias type="kr.or.ddit.vo.ComDetCodeInfoVO" alias="comDetCodeInfoVO"/>

ComCodeInfoController.java

package kr.or.ddit.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import kr.or.ddit.service.ComCodeInfoService;
import kr.or.ddit.vo.ComCodeInfoVO;
import lombok.Getter;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@RequestMapping("/comCodeInfo")
@Controller
public class ComCodeInfoController {

	@Autowired
	ComCodeInfoService comCodeInfoService;
	
	//등록 뷰
	@GetMapping("/create")
	public String create() {
		//forwarding
		return "comCodeInfo/create";
	}
	
	//입력 실행
	@PostMapping("/createPost")
	public String createPost(ComCodeInfoVO comCodeInfoVO) {
		log.info("createPost->comCodeInfoVO : " + comCodeInfoVO);
		
		int result = this.comCodeInfoService.createPost(comCodeInfoVO);
		log.info("createPost->result : " + result);
		
		//입력 후 상세로 이동
		return "redirect:/comCodeInfo/detail?comCode=" + comCodeInfoVO.getComCode();
	}
	
	//상세 뷰
	@GetMapping("/detail")
	public String detail(ComCodeInfoVO comCodeInfoVO) {
		//forwarding
		return "comCodeInfo/detail";
	}
	
	//수정 실행
	@PostMapping("/updatePost")
	public String updatePost(ComCodeInfoVO comCodeInfoVO) {
		//수정 후 상세로 이동
		return "redirect:/comCodeInfo/detail?comCode="+comCodeInfoVO.getComCode();
	}
	
	//삭제 실행
	@PostMapping("/deletePost")
	public String deletePost(ComCodeInfoVO comCodeInfoVO) {
		//삭제 후 목록으로 이동
		return "redirect:/comCodeInfo/list";
	}
	
	//목록 뷰
	@GetMapping("/list")
	public String list() {
		//forwarding
		return "comCodeInfo/list";
	}
}

ComCodeInfoService.java

package kr.or.ddit.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.ComCodeInfoVO;

public interface ComCodeInfoService{
	
	//등록 뷰
	public List<ComCodeInfoVO> create();
	
	//입력 실행 
	public int createPost(ComCodeInfoVO comCodeInfoVO);
	
	//상세 뷰 
	public ComCodeInfoVO detail(ComCodeInfoVO comCodeInfoVO);
	
	//수정 실행 
	public int updatePost(ComCodeInfoVO comCodeInfoVO);
	
	//삭제 실행 
	public int deletePost(ComCodeInfoVO comCodeInfoVO);
	
	//목록 뷰 
	public List<ComCodeInfoVO> list(Map<String, Object> map);
}

ComCodeInfoServiceImpl.java

package kr.or.ddit.service.impl;

import java.util.List;
import java.util.Map;

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

import kr.or.ddit.mapper.ComCodeInfoMapper;
import kr.or.ddit.service.ComCodeInfoService;
import kr.or.ddit.vo.ComCodeInfoVO;

@Service
public class ComCodeInfoServiceImpl implements ComCodeInfoService{
	
	@Autowired
	ComCodeInfoMapper comCodeInfoMapper;
	
	//등록 뷰
	public List<ComCodeInfoVO> create(){
		return this.comCodeInfoMapper.create();
	}
	
	//입력 실행 
	public int createPost(ComCodeInfoVO comCodeInfoVO) {
		return this.comCodeInfoMapper.createPost(comCodeInfoVO);
	}
	
	//상세 뷰 
	public ComCodeInfoVO detail(ComCodeInfoVO comCodeInfoVO) {
		return this.comCodeInfoMapper.detail(comCodeInfoVO);
	}
	
	//수정 실행 
	public int updatePost(ComCodeInfoVO comCodeInfoVO) {
		return this.comCodeInfoMapper.updatePost(comCodeInfoVO);
	}
	
	//삭제 실행 
	public int deletePost(ComCodeInfoVO comCodeInfoVO) {
		return this.comCodeInfoMapper.deletePost(comCodeInfoVO);
	}
	
	//목록 뷰 
	public List<ComCodeInfoVO> list(Map<String, Object> map){
		return this.comCodeInfoMapper.list(map);
	}
}

ComCodeInfoMapper.java

package kr.or.ddit.mapper;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.ComCodeInfoVO;

public interface ComCodeInfoMapper {
	
	//등록 뷰
	public List<ComCodeInfoVO> create();
	
	//입력 실행 
	public int createPost(ComCodeInfoVO comCodeInfoVO);
	
	//상세 뷰 
	public ComCodeInfoVO detail(ComCodeInfoVO comCodeInfoVO);
	
	//수정 실행 
	public int updatePost(ComCodeInfoVO comCodeInfoVO);
	
	//삭제 실행 
	public int deletePost(ComCodeInfoVO comCodeInfoVO);
	
	//목록 뷰 
	public List<ComCodeInfoVO> list(Map<String, Object> map);
}

comCodeInfo_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="kr.or.ddit.mapper.ComCodeInfoMapper">

	<!-- 등록 뷰 -->
	<select id="create" resultType="comCodeInfoVO">
		SELECT COM_CODE, COM_CODE_NM, DESCRIPTIONS
		FROM COM_CODE_INFO
	</select>
	
	<!-- 입력 실행 -->
	<insert id="createPost" parameterType="comCodeInfoVO">
		INSERT INTO COM_CODE_INFO(COM_CODE, COM_CODE_NM
			<if test="descriptions!=null and descriptions!=''">
			, DESCRIPTIONS
			</if>
			)
		VALUES(#{comCode}, #{comCodeNm}
			<if test="descriptions!=null and descriptions!=''">
			, #{descriptions}
			</if>
			)
	</insert>
	
	<!-- 상세 뷰 -->
	<select id="detail" parameterType="comCodeInfoVO" 
		resultType="comCodeInfoVO">
		SELECT COM_CODE, COM_CODE_NM, DESCRIPTIONS
		FROM COM_CODE_INFO
		WHERE COM_CODE = #{comCode}
	</select>
	
	<!-- 수정 실행 -->
	<update id="updatePost" parameterType="comCodeInfoVO">
		UPDATE COM_CODE_INFO
		SET COM_CODE_NM = #{comCodeNm}
		<if test="descriptions!=null and descriptions!=''">
		    , DESCRIPTIONS = #{descriptions} 
		</if>
		WHERE COM_CODE = #{comCode} 
	</update>
	
	<!-- 삭제 실행 -->
	<delete id="deletePost" parameterType="comCodeInfoVO">
		DELETE FROM COM_CODE_INFO
		WHERE COM_CODE = #{comCode}
	</delete>
	
	<!-- 목록 뷰 -->
	<select id="list" parameterType="hashMap" resultType="comCodeInfoVO">
		SELECT COM_CODE, COM_CODE_NM, DESCRIPTIONS
		FROM COM_CODE_INFO
	</select>
</mapper>

create.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<h3>공통코드</h3>
<div class="row">
	<div class="col-md-6">
		<form action="/comCodeInfo/createPost" method="post">
			<div class="card card-primary">
				<div class="card-header">
					<h3 class="card-title">공통코드</h3>
				</div>
				<div class="card-body">
					<div class="form-group">
						<label for="comCode">공통 코드</label>
						<input type="text" id="comCode" name="comCode" class="form-control"
							placeholder="공통 코드" required />
					</div>
					<div class="form-group">
						<label for="comCodeNum">공통 코드 명</label>
						<input type="text" id="comCodeNm" name="comCodeNm" class="form-control"
							placeholder="공통 코드 명" required />
					</div>
					<div class="form-group">
						<label for="descriptions">설명</label>
						<textarea id="descriptions" name="descriptions" 
							cols="30" rows="5" class="form-control"
							placeholder="설명" ></textarea>
					</div>
				</div>
				<div class="card-footer">
					<button type="submit" class="btn btn-primary">공통 코드 등록</button>
				</div>
			</div>
			<sec:csrfInput/>
		</form>
	</div>
	<div class="col-md-6">
		<div class="card card-info">
			<div class="card-header">
				<h3 class="card-title">공통 상세 코드</h3>
			</div>
			<div class="card-body">
				<div class="form-group">
					<label for="comDetCode">공통 상세 코드</label>
					<input type="text" id="comDetCode" name="comDetCode" class="form-control"
						placeholder="공통 상세 코드" required />
				</div>
				<div class="form-group">
					<label for="comDetCodeNm">공통 상세 코드 명</label>
					<input type="text" id="comDetCodeNm" name="comDetCodeNm" class="form-control"
						placeholder="공통 상세 코드 명" required />
				</div>
				<div class="form-group">
					<label for="descriptions2">설명</label>
					<textarea id="descriptions2" name="descriptions2" 
						cols="30" rows="5" class="form-control"
						placeholder="설명" ></textarea>
				</div>
			</div>
			<div class="card-footer">
				<button type="submit" class="btn btn-primary">공통 상세 코드 등록</button>
			</div>
		</div>
	</div>
</div>

aside

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
	<!-- Brand Logo -->
	<a href="index3.html" class="brand-link"> <img
		src="/resources/adminlte/dist/img/AdminLTELogo.png"
		alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
		style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE
			3</span>
	</a>

	<!-- Sidebar -->
	<div class="sidebar">
		<!-- Sidebar user panel (optional) -->
		<!-- /// 로그인 안함 시작 /// -->
		<!-- isAnonymous() 는 로그인 안 했을 때 true -> 아래 코드 실행 -->
		<sec:authorize access="isAnonymous()"> <!-- 인가 : 권한 -->
			<div class="user-panel mt-3 pb-3 mb-3 d-flex">
				<div class="image">
					<img src="/resources/adminlte/dist/img/user2-160x160.jpg"
						class="img-circle elevation-2" alt="User Image">
				</div>
				<div class="info">
					<a href="#" class="d-block">Alexander Pierce</a>
				</div>
			</div>
		</sec:authorize>
		<!-- /// 로그인 안함 끝 /// -->
		
		<!-- /// 로그인 함 시작 /// -->
		<sec:authorize access="isAuthenticated()">
		
			<!-- principal : 사용자정보 객체
			var속성이 있으면 JSTL변수에 할당.
			var속성이 없으면 화면에 출력.-->
			<sec:authentication property="principal.member" var="member"/>
			<sec:authentication property="principal.member.memberAuthVOList" var="memberAuthVOList" />
			
			<c:forEach var="memberAuthVO" items="${memberAuthVOList}" varStatus="stat">
				<p>${memberAuthVO.auth}</p>
			</c:forEach>
			
			<div class="user-panel mt-3 pb-3 mb-3 d-flex">
				<div class="image">
					<img src="/resources/upload/mang6.jpg"
						class="img-circle elevation-2" alt="User Image">
				</div>
				<div class="info">
					<a href="#" class="d-block">${member.userName}님 환영합니다.</a>
					<form action="/logout" method="post"> <!-- 꼭 post여야함 -->
						<button type="submit" class="btn btn-block btn-secondary btn-xs">로그아웃</button>
						<sec:csrfInput/>
					</form>
				</div>
			</div>
		</sec:authorize>
		<!-- /// 로그인 함 끝 /// -->


		<!-- SidebarSearch Form -->
		<div class="form-inline">
			<div class="input-group" data-widget="sidebar-search">
				<input class="form-control form-control-sidebar" type="search"
					placeholder="Search" aria-label="Search">
				<div class="input-group-append">
					<button class="btn btn-sidebar">
						<i class="fas fa-search fa-fw"></i>
					</button>
				</div>
			</div>
		</div>

		<!-- Sidebar Menu -->
		<nav class="mt-2">
			<ul class="nav nav-pills nav-sidebar flex-column"
				data-widget="treeview" role="menu" data-accordion="false">
				<!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
				<li class="nav-item menu-open"><a href="#"
					class="nav-link active"> <i
						class="nav-icon fas fa-tachometer-alt"></i>
						<p>
							Dashboard <i class="right fas fa-angle-left"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="./index.html"
							class="nav-link active"> <i class="far fa-circle nav-icon"></i>
								<p>Dashboard v1</p>
						</a></li>
						<li class="nav-item"><a href="./index2.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>Dashboard v2</p>
						</a></li>
						<li class="nav-item"><a href="./index3.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>Dashboard v3</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="pages/widgets.html"
					class="nav-link"> <i class="nav-icon fas fa-th"></i>
						<p>
							Widgets <span class="right badge badge-danger">New</span>
						</p>
				</a></li>
				
				
				<!-- //////////// 공통 코드 관리 시작 //////////// -->
				<li class="nav-item">
					<a href="#" class="nav-link">
						<i class="nav-icon fas fa-copy"></i>
						<p>
							공통 코드 관리
						</p>
					</a>
					<ul class="nav nav-treeview">
						<li class="nav-item">
							<a href="/comCOdeInfo/create" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>공통 코드 목록</p>
							</a>
						</li>
						<li class="nav-item">
							<a href="/comCOdeInfo/list" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>공통 코드 목록</p>
							</a>
						</li>
					</ul>
				</li>
				<!-- //////////// 공통 코드 관리 끝 //////////// -->
				
				
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-copy"></i>
						<p>
							Layout Options <i class="fas fa-angle-left right"></i> <span
								class="badge badge-info right">6</span>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/layout/top-nav.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Top Navigation</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/layout/top-nav-sidebar.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Top Navigation + Sidebar</p>
						</a></li>
						<li class="nav-item"><a href="pages/layout/boxed.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Boxed</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/layout/fixed-sidebar.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Fixed Sidebar</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/layout/fixed-sidebar-custom.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>
									Fixed Sidebar <small>+ Custom Area</small>
								</p>
						</a></li>
						<li class="nav-item"><a href="pages/layout/fixed-topnav.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Fixed Navbar</p>
						</a></li>
						<li class="nav-item"><a href="pages/layout/fixed-footer.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Fixed Footer</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/layout/collapsed-sidebar.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>Collapsed Sidebar</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-chart-pie"></i>
						<p>
							Charts <i class="right fas fa-angle-left"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/charts/chartjs.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>ChartJS</p>
						</a></li>
						<li class="nav-item"><a href="pages/charts/flot.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Flot</p>
						</a></li>
						<li class="nav-item"><a href="pages/charts/inline.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Inline</p>
						</a></li>
						<li class="nav-item"><a href="pages/charts/uplot.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>uPlot</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-tree"></i>
						<p>
							UI Elements <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/UI/general.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>General</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/icons.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Icons</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/buttons.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Buttons</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/sliders.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Sliders</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/modals.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Modals & Alerts</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/navbar.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Navbar & Tabs</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/timeline.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Timeline</p>
						</a></li>
						<li class="nav-item"><a href="pages/UI/ribbons.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Ribbons</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-edit"></i>
						<p>
							Forms <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/forms/general.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>General Elements</p>
						</a></li>
						<li class="nav-item"><a href="pages/forms/advanced.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Advanced Elements</p>
						</a></li>
						<li class="nav-item"><a href="pages/forms/editors.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Editors</p>
						</a></li>
						<li class="nav-item"><a href="pages/forms/validation.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Validation</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-table"></i>
						<p>
							Tables <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/tables/simple.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Simple Tables</p>
						</a></li>
						<li class="nav-item"><a href="pages/tables/data.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>DataTables</p>
						</a></li>
						<li class="nav-item"><a href="pages/tables/jsgrid.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>jsGrid</p>
						</a></li>
					</ul></li>
				<li class="nav-header">EXAMPLES</li>
				<li class="nav-item"><a href="pages/calendar.html"
					class="nav-link"> <i class="nav-icon far fa-calendar-alt"></i>
						<p>
							Calendar <span class="badge badge-info right">2</span>
						</p>
				</a></li>
				<li class="nav-item"><a href="pages/gallery.html"
					class="nav-link"> <i class="nav-icon far fa-image"></i>
						<p>Gallery</p>
				</a></li>
				<li class="nav-item"><a href="pages/kanban.html"
					class="nav-link"> <i class="nav-icon fas fa-columns"></i>
						<p>Kanban Board</p>
				</a></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon far fa-envelope"></i>
						<p>
							Mailbox <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/mailbox/mailbox.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Inbox</p>
						</a></li>
						<li class="nav-item"><a href="pages/mailbox/compose.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Compose</p>
						</a></li>
						<li class="nav-item"><a href="pages/mailbox/read-mail.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Read</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-book"></i>
						<p>
							Pages <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/examples/invoice.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Invoice</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/profile.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Profile</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/e-commerce.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>E-commerce</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/projects.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Projects</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/examples/project-add.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Project Add</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/examples/project-edit.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Project Edit</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/examples/project-detail.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Project Detail</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/contacts.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Contacts</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/faq.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>FAQ</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/contact-us.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Contact us</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon far fa-plus-square"></i>
						<p>
							Extras <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="#" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>
									Login & Register v1 <i class="fas fa-angle-left right"></i>
								</p>
						</a>
							<ul class="nav nav-treeview">
								<li class="nav-item"><a href="pages/examples/login.html"
									class="nav-link"> <i class="far fa-circle nav-icon"></i>
										<p>Login v1</p>
								</a></li>
								<li class="nav-item"><a href="pages/examples/register.html"
									class="nav-link"> <i class="far fa-circle nav-icon"></i>
										<p>Register v1</p>
								</a></li>
								<li class="nav-item"><a
									href="pages/examples/forgot-password.html" class="nav-link">
										<i class="far fa-circle nav-icon"></i>
										<p>Forgot Password v1</p>
								</a></li>
								<li class="nav-item"><a
									href="pages/examples/recover-password.html" class="nav-link">
										<i class="far fa-circle nav-icon"></i>
										<p>Recover Password v1</p>
								</a></li>
							</ul></li>
						<li class="nav-item"><a href="#" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>
									Login & Register v2 <i class="fas fa-angle-left right"></i>
								</p>
						</a>
							<ul class="nav nav-treeview">
								<li class="nav-item"><a href="pages/examples/login-v2.html"
									class="nav-link"> <i class="far fa-circle nav-icon"></i>
										<p>Login v2</p>
								</a></li>
								<li class="nav-item"><a
									href="pages/examples/register-v2.html" class="nav-link"> <i
										class="far fa-circle nav-icon"></i>
										<p>Register v2</p>
								</a></li>
								<li class="nav-item"><a
									href="pages/examples/forgot-password-v2.html" class="nav-link">
										<i class="far fa-circle nav-icon"></i>
										<p>Forgot Password v2</p>
								</a></li>
								<li class="nav-item"><a
									href="pages/examples/recover-password-v2.html" class="nav-link">
										<i class="far fa-circle nav-icon"></i>
										<p>Recover Password v2</p>
								</a></li>
							</ul></li>
						<li class="nav-item"><a href="pages/examples/lockscreen.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Lockscreen</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/examples/legacy-user-menu.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>Legacy User Menu</p>
						</a></li>
						<li class="nav-item"><a
							href="pages/examples/language-menu.html" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Language Menu</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/404.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Error 404</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/500.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Error 500</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/pace.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Pace</p>
						</a></li>
						<li class="nav-item"><a href="pages/examples/blank.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Blank Page</p>
						</a></li>
						<li class="nav-item"><a href="starter.html" class="nav-link">
								<i class="far fa-circle nav-icon"></i>
								<p>Starter Page</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-search"></i>
						<p>
							Search <i class="fas fa-angle-left right"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="pages/search/simple.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Simple Search</p>
						</a></li>
						<li class="nav-item"><a href="pages/search/enhanced.html"
							class="nav-link"> <i class="far fa-circle nav-icon"></i>
								<p>Enhanced</p>
						</a></li>
					</ul></li>
				<li class="nav-header">MISCELLANEOUS</li>
				<li class="nav-item"><a href="iframe.html" class="nav-link">
						<i class="nav-icon fas fa-ellipsis-h"></i>
						<p>Tabbed IFrame Plugin</p>
				</a></li>
				<li class="nav-item"><a href="https://adminlte.io/docs/3.1/"
					class="nav-link"> <i class="nav-icon fas fa-file"></i>
						<p>Documentation</p>
				</a></li>
				<li class="nav-header">MULTI LEVEL EXAMPLE</li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="fas fa-circle nav-icon"></i>
						<p>Level 1</p>
				</a></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon fas fa-circle"></i>
						<p>
							Level 1 <i class="right fas fa-angle-left"></i>
						</p>
				</a>
					<ul class="nav nav-treeview">
						<li class="nav-item"><a href="#" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Level 2</p>
						</a></li>
						<li class="nav-item"><a href="#" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>
									Level 2 <i class="right fas fa-angle-left"></i>
								</p>
						</a>
							<ul class="nav nav-treeview">
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-dot-circle nav-icon"></i>
										<p>Level 3</p>
								</a></li>
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-dot-circle nav-icon"></i>
										<p>Level 3</p>
								</a></li>
								<li class="nav-item"><a href="#" class="nav-link"> <i
										class="far fa-dot-circle nav-icon"></i>
										<p>Level 3</p>
								</a></li>
							</ul></li>
						<li class="nav-item"><a href="#" class="nav-link"> <i
								class="far fa-circle nav-icon"></i>
								<p>Level 2</p>
						</a></li>
					</ul></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="fas fa-circle nav-icon"></i>
						<p>Level 1</p>
				</a></li>
				<li class="nav-header">LABELS</li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon far fa-circle text-danger"></i>
						<p class="text">Important</p>
				</a></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon far fa-circle text-warning"></i>
						<p>Warning</p>
				</a></li>
				<li class="nav-item"><a href="#" class="nav-link"> <i
						class="nav-icon far fa-circle text-info"></i>
						<p>Informational</p>
				</a></li>
			</ul>
		</nav>
		<!-- /.sidebar-menu -->
	</div>
	<!-- /.sidebar -->
</aside>

list

ComCodeInfoController.java

list 부분 수정

//목록 뷰
@GetMapping("/list")
public String list(Map<String, Object> map, Model model) {
    List<ComCodeInfoVO> comCodeInfoVOList
        = this.comCodeInfoService.list(map);
    log.info("list->comCodeInfoVOList : " + comCodeInfoVOList);

    model.addAttribute("comCodeInfoVOList", comCodeInfoVOList);

    //forwarding
    return "comCodeInfo/list";
}

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<h3>공통코드</h3>
<div class="row">
	<div class="col-md-6">
		<form action="/comCodeInfo/createPost" method="post">
			<div class="card card-primary">
				<div class="card-header">
					<h3 class="card-title">공통코드</h3>
				</div>
				<div class="card-body">
					<!-- ////// 공통 코드 목록 시작 ////// -->
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>공통 코드</th>
								<th>공통 코드 명</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach var="comCodeInfoVO" items="${comCodeInfoVOList}"
								varStatus="stat">
								<tr>
									<td>${comCodeInfoVO.comCode}</td>
									<td>${comCodeInfoVO.comCodeNm}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<!-- ////// 공통 코드 목록 끝 ////// -->
				</div>
				<div class="card-footer">
					<button type="submit" class="btn btn-primary">공통 코드 등록</button>
				</div>
			</div>
			<sec:csrfInput/>
		</form>
	</div>
	<div class="col-md-6">
		<div class="card card-info">
			<div class="card-header">
				<h3 class="card-title">공통 상세 코드</h3>
			</div>
			<div class="card-body">
				<!-- ////// 공통 상세 코드 목록 시작 ////// -->
				<table class="table table-bordered">
						<thead>
							<tr>
								<th>공통 상세 코드</th>
								<th>공통 상세 코드 명</th>
								<th>공통 코드</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>HBY01001</td>
								<td>영화감상</td>
								<td>HBY01</td>
							</tr>
						</tbody>
					</table>
				<!-- ////// 공통 상세 코드 목록 끝 ////// -->
			</div>
			<div class="card-footer">
				<button type="submit" class="btn btn-primary">공통 상세 코드 등록</button>
			</div>
		</div>
	</div>
</div>

공통 상세 코드

ComDetCodeInfoController.java

package kr.or.ddit.controller;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.or.ddit.service.ComDetCodeInfoService;
import kr.or.ddit.vo.ComDetCodeInfoVO;
import lombok.Getter;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@RequestMapping("/comDetCodeInfo")
@Controller
public class ComDetCodeInfoController {

	@Autowired
	ComDetCodeInfoService comDetCodeInfoService;
	
	//등록 뷰
	@GetMapping("/create")
	public String create() {
		//forwarding
		return "comCodeInfo/create";
	}
	
	//입력 실행
	@PostMapping("/createPost")
	public String createPost(ComDetCodeInfoVO comDetCodeInfoVO) {
		log.info("createPost->ComDetCodeInfoVO : " + comDetCodeInfoVO);
		
		int result = this.comDetCodeInfoService.createPost(comDetCodeInfoVO);
		log.info("createPost->result : " + result);
		
		//입력 후 상세로 이동
		return "redirect:/comCodeInfo/detail?comCode=" + comDetCodeInfoVO.getComCode();
	}
	
	//상세 뷰
	@GetMapping("/detail")
	public String detail(ComDetCodeInfoVO comDetCodeInfoVO) {
		//forwarding
		return "comCodeInfo/detail";
	}
	
	//수정 실행
	@PostMapping("/updatePost")
	public String updatePost(ComDetCodeInfoVO comDetCodeInfoVO) {
		//수정 후 상세로 이동
		return "redirect:/comCodeInfo/detail?comCode="+comDetCodeInfoVO.getComCode();
	}
	
	//삭제 실행
	@PostMapping("/deletePost")
	public String deletePost(ComDetCodeInfoVO comDetCodeInfoVO) {
		//삭제 후 목록으로 이동
		return "redirect:/comCodeInfo/list";
	}
	
	//목록 뷰
	@GetMapping("/list")
	public String list(Map<String, Object> map, Model model) {
		List<ComDetCodeInfoVO> comDetCodeInfoVOList
			= this.comDetCodeInfoService.list(map);
		log.info("list->ComDetCodeInfoVOList : " + comDetCodeInfoVOList);
		
		model.addAttribute("ComDetCodeInfoVOList", comDetCodeInfoVOList);
		
		//forwarding
		return "comCodeInfo/list";
	}
	
	//요청 파라미터 : {"comCode":"HBY01"}
	//기본키+1
	@ResponseBody
	@PostMapping("/getNextComDetCode")
	public String getNextComDetCode(@RequestBody ComDetCodeInfoVO comDetCodeInfoVO) {
		log.info("getNextComDetCode->comDetCodeInfoVO : " + comDetCodeInfoVO);
		
		String comDetCode = 
			this.comDetCodeInfoService.getNextComDetCode(comDetCodeInfoVO);
		log.info("comDetCode : " + comDetCode);
		
		return comDetCode;
	}
	
}

ComDetCodeInfoService.java

package kr.or.ddit.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.ComDetCodeInfoVO;

public interface ComDetCodeInfoService{
	
	//등록 뷰
	public List<ComDetCodeInfoVO> create();
	
	//입력 실행 
	public int createPost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//상세 뷰 
	public ComDetCodeInfoVO detail(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//수정 실행 
	public int updatePost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//삭제 실행 
	public int deletePost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//목록 뷰 
	public List<ComDetCodeInfoVO> list(Map<String, Object> map);

	//기본키+1
	public String getNextComDetCode(ComDetCodeInfoVO comDetCodeInfoVO);
}

ComDetCodeInfoServiceImpl.java

package kr.or.ddit.service.impl;

import java.util.List;
import java.util.Map;

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

import kr.or.ddit.mapper.ComCodeInfoMapper;
import kr.or.ddit.mapper.ComDetCodeInfoMapper;
import kr.or.ddit.service.ComCodeInfoService;
import kr.or.ddit.service.ComDetCodeInfoService;
import kr.or.ddit.vo.ComDetCodeInfoVO;

@Service
public class ComDetCodeInfoServiceImpl implements ComDetCodeInfoService{
	
	@Autowired
	ComDetCodeInfoMapper comDetCodeInfoMapper;
	
	//등록 뷰
	public List<ComDetCodeInfoVO> create(){
		return this.comDetCodeInfoMapper.create();
	}
	
	//입력 실행 
	public int createPost(ComDetCodeInfoVO comDetCodeInfoVO) {
		return this.comDetCodeInfoMapper.createPost(comDetCodeInfoVO);
	}
	
	//상세 뷰 
	public ComDetCodeInfoVO detail(ComDetCodeInfoVO comDetCodeInfoVO) {
		return this.comDetCodeInfoMapper.detail(comDetCodeInfoVO);
	}
	
	//수정 실행 
	public int updatePost(ComDetCodeInfoVO comDetCodeInfoVO) {
		return this.comDetCodeInfoMapper.updatePost(comDetCodeInfoVO);
	}
	
	//삭제 실행 
	public int deletePost(ComDetCodeInfoVO comDetCodeInfoVO) {
		return this.comDetCodeInfoMapper.deletePost(comDetCodeInfoVO);
	}
	
	//목록 뷰 
	public List<ComDetCodeInfoVO> list(Map<String, Object> map){
		return this.comDetCodeInfoMapper.list(map);
	}

	//기본키+1
	@Override
	public String getNextComDetCode(ComDetCodeInfoVO comDetCodeInfoVO) {
		return this.comDetCodeInfoMapper.getNextComDetCode(comDetCodeInfoVO);
	}
}

ComDetCodeInfoMapper.java

package kr.or.ddit.mapper;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.ComDetCodeInfoVO;

public interface ComDetCodeInfoMapper {
	
	//등록 뷰
	public List<ComDetCodeInfoVO> create();
	
	//입력 실행 
	public int createPost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//상세 뷰 
	public ComDetCodeInfoVO detail(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//수정 실행 
	public int updatePost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//삭제 실행 
	public int deletePost(ComDetCodeInfoVO comDetCodeInfoVO);
	
	//목록 뷰 
	public List<ComDetCodeInfoVO> list(Map<String, Object> map);

	//기본키+1
	public String getNextComDetCode(ComDetCodeInfoVO comDetCodeInfoVO);
}

comDetCodeInfo_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="kr.or.ddit.mapper.ComDetCodeInfoMapper">

	<!-- 등록 뷰 -->
	<select id="create" resultType="comDetCodeInfoVO">
		SELECT COM_DET_CODE, COM_CODE
			, COM_DET_CODE_nm, DESCRIPTIONS
		FROM COM_DET_CODE_INFO
	</select>
	
	<!-- 입력 실행 -->
	<insert id="createPost" parameterType="comDetCodeInfoVO">
		INSERT INTO COM_DET_CODE_INFO(COM_DET_CODE, COM_CODE
			, COM_DET_CODE_NM
			<if test="descriptions!=null and descriptions!=''">
			, DESCRIPTIONS
			</if>
			)
		VALUES(#{comDetCode}, #{comCode}, #{comDetCodeNm}
			<if test="descriptions!=null and descriptions!=''">
			, #{descriptions}
			</if>
			)
	</insert>
	
	<!-- 상세 뷰 -->
	<select id="detail" parameterType="comDetCodeInfoVO" 
		resultType="comDetCodeInfoVO">
		SELECT COM_DET_CODE, COM_CODE
			, COM_DET_CODE_NM, DESCRIPTIONS
		FROM COM_DET_CODE_INFO
		WHERE COM_DET_CODE = #{comDetCode}
	</select>
	
	<!-- 수정 실행 -->
	<update id="updatePost" parameterType="comDetCodeInfoVO">
		UPDATE COM_DET_CODE_INFO
		SET COM_DET_CODE_NM = #{comDetCodeNm}
		<if test="descriptions!=null and descriptions!=''">
		    , DESCRIPTIONS = #{descriptions} 
		</if>
		WHERE COM_DET_CODE = #{comDetCode} 
	</update>
	
	<!-- 삭제 실행 -->
	<delete id="deletePost" parameterType="comDetCodeInfoVO">
		DELETE FROM COM_DET_CODE_INFO
		WHERE COM_DET_CODE = #{comDetCode}
	</delete>
	
	<!-- 목록 뷰 -->
	<select id="list" parameterType="hashMap" resultType="comDetCodeInfoVO">
		SELECT COM_DET_CODE, COM_CODE
			, COM_DET_CODE_nm, DESCRIPTIONS
		FROM COM_DET_CODE_INFO
	</select>
	
	<!-- 기본키+1 -->
	<!-- comDetCodeInfoVO{..comCode=HBY01..} -->
	<select id="getNextComDetCode" parameterType="comDetCodeInfoVO" resultType="String">
		SELECT NVL(SUBSTR(MAX(COM_DET_CODE),1,5)
			|| TRIM(TO_CHAR(SUBSTR(MAX(COM_DET_CODE),6) + 1,'000')),#{comCode}||'001')
		FROM    COM_DET_CODE_INFO
		WHERE  COM_CODE = #{comCode}
	</select>
</mapper>

ComCodeInfoController.java
입력 뷰(등록 뷰) 수정

//입력 뷰
@GetMapping("/create")
public String create(Model model) {
    List<ComCodeInfoVO> comCodeInfoVOList
        = this.comCodeInfoService.create();

    model.addAttribute("comCodeInfoVOList", comCodeInfoVOList);

    //forwarding
    return "comCodeInfo/create";
}

create.jsp
공통 상세 코드에서 select 추가

<div class="card-body">
    <div class="form-group">
        <label for="selcomCode">공통 코드</label>
        <select id="selcomCode" name="comCode" class="form-control custom-select">
            <option selected disabled>공통 코드 선택</option>
            <c:forEach var="comCodeInfoVO" items="${comCodeInfoVOList}" varStatus="">
                <option value="${comCodeInfoVO.comCode}">${comCodeInfoVO.comCodeNm}</option>
            </c:forEach>
        </select>
    </div>

자바 스크립트 추가(ajax)

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#selComCode").on("change",function(){
		let comCode = $(this).val();
		console.log("comCode : " + comCode);
		
		let data = {
			"comCode":comCode
		};
		
		console.log("data : ", data);
		
		$.ajax({
			url:"/comDetCodeInfo/getNextComDetCode",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(data),
			type:"post",
			dataType:"text", //응답 타입
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},
			success:function(result){
				console.log("result : ", result);
				
				$("#comDetCode").val(result);
			}
		});
	});
});
</script>

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장 (0)	2024.05.21
[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조 (0)	2024.05.20
[스프링 프레임워크] 29장 자동 로그인, 스프링 시큐리티 애너테이션 (1)	2024.05.20
[스프링 프레임워크] 28장 스프링 시큐리티2 (0)	2024.05.17
[스프링 프레임워크] 27장 스프링 시큐리티1 (0)	2024.05.16

스프링 프레임워크

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장

2024. 5. 21. 14:22

sweetalert

css와 js 파일 집어 넣기

다운로드

create.jsp
상단에 경로 추가 (css 파일, js 파일이 있는 위치로 변경해야함)

<link rel="stylesheet" href="/resources/css/sweetalert2.min.css">
<script type="text/javascript" src="/resources/js/sweetalert2.min.js"></script>

기존 스크립트에 수정

	$("#btnPost").on("click",function(){
		new daum.Postcode({
			//다음 창에서 검색이 완료되면 콜백함수에 의해 결과 데이터가 data 객체로 들어옴
			oncomplete:function(data) {
				$("#postNum").val(data.zonecode);
				$("input[name='empAddress']").val(data.address);
				$("#empAddress2").val(data.buildingName);
				
				//sweetalert 띄우기 (3초간)
				var Toast = Swal.mixin({
					//환경설정
					toast:true,
					position:"top-end",
					showConfirmButton:false, //확인 버튼 -> 확인 받을 필요가 있는지
					timer:3000
				});
				Toast.fire({
					//success, error, warning, info, question 등등
					icon:"success", //녹색
					title:"우편번호가 검색되었습니다.", //내용
				});
			}
		}).open();
	});

모달 이용

모달 html 파일

다운로드

<!-- 모달을 띄우는 방법
1. button으로 띄우기
<button type="button" class="btn btn-default" 
data-toggle="modal" data-target="#modal-default">
Launch Default Modal
</button>

2. a 태그로 띄우기
<a data-toggle="modal" href="#modal-default">Open Modal</a>

3. 기타 요소로 띄우기
<p data-toggle="modal" data-target="#modal-default">Open Modal</p>
 -->
<!-- bookVO -> attachVOList 멤버변수 -> List<AttachVO> 
JSTL누적 : 

c set var="auth" value=""

c set var="auth" value="달러{auth += ' ' += 누적할값}
-->

$('#id').modal('show');
$('#id').modal('hide');

실습

list.jsp
하단에 추가

	<!-- 3. 기타 요소로 띄우기 -->
	<p data-toggle="modal" data-target="#modal-lg">Open Modal</p>
	<!-- ////// 직원 상세 모달 시작 ////// -->
	<div class="modal fade" id="modal-lg">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Large Modal</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ////// 직원 상세 모달 끝 ////// -->

테이블 부분 수정

	<table border="1">
		<thead>
			<tr>
				<th>직원 번호</th><th>직원 명</th><th>직원 주소</th>
				<th>직원 연락처</th><th>직원 급여</th><th>파일 이름</th>
			</tr>
		</thead>
		<tbody id="trShow">
			<c:forEach var="employeeVO" items="${articlePage.content}" varStatus="stat">
				<tr>
					<td data-toggle="modal" data-target="#modal-lg">${employeeVO.empNo}</td>
<%-- 					<td><a href="/employee/detail?empNo=${employeeVO.empNo}">${employeeVO.empNo}</a></td> --%>
					<td>${employeeVO.empName}</td>
					<td>${employeeVO.empAddress}</td>
					<td>${employeeVO.empTelno}</td>
					<td>${employeeVO.empSalary}</td>
					<td>${employeeVO.filename}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

현재 list.jsp 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>직원 목록</title>
<script type="text/javascript">
$(function(){
	$("#btnSearch").on("click",function(){
		let keyword = $("input[name='keyword']").val();
		
// 		$(this).parent().submit();

		//json 오브젝트
		let data = {
			"keyword":keyword
		};
		
		console.log("data : ", data);
		
		getList(keyword,1);
	});
	
	$("#btnSearchAll").on("click",function(){
		getList("",1);
	});
	
	getList("");
});

function getList(keyword, currentPage) {
	let data = {
		"keyword":keyword,
		"currentPage":currentPage
	};
	
	$.ajax({
		url:"/employee/listAjax",
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(data),
		type:"post",
		dataType:"json",
		success:function(result){
			console.log("result.content : ", result.content);
			
			let str = "";
			
			$.each(result.content, function(idx, employeeVO){
				str += "<tr>";
				str +="<td><a href='/employee/detail?empNo=" + employeeVO.empNo + "'>" + employeeVO.empNo + "</a></td>";
				str +="<td>" + employeeVO.empName + "</td>";
				str +="<td>" + employeeVO.empAddress + "</td>";
				str +="<td>" + employeeVO.empTelno + "</td>";
				str +="<td>" + employeeVO.empSalary + "</td>";
				str +="<td>" + employeeVO.filename + "</td>";
				str += "</tr>";
			});
			$(".clsPagingArea").html(result.pagingArea);
			
			$("#trShow").html(str);
		}
	});
}
</script>
</head>
<body>
	<h3>직원 목록</h3>
	
	<p>
	<form>
		<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요"/>
		<!-- submit / button / reset -->
			<button type="button" id="btnSearch">검색</button>
			<button type="button" id="btnSearchAll">전체보기</button>
		</form>
		<a href="/create">도서 등록</a>
	</p>
	
	<table border="1">
		<thead>
			<tr>
				<th>직원 번호</th><th>직원 명</th><th>직원 주소</th>
				<th>직원 연락처</th><th>직원 급여</th><th>파일 이름</th>
			</tr>
		</thead>
		<tbody id="trShow">
			<c:forEach var="employeeVO" items="${articlePage.content}" varStatus="stat">
				<tr>
					<td data-toggle="modal" data-target="#modal-lg">${employeeVO.empNo}</td>
<%-- 					<td><a href="/employee/detail?empNo=${employeeVO.empNo}">${employeeVO.empNo}</a></td> --%>
					<td>${employeeVO.empName}</td>
					<td>${employeeVO.empAddress}</td>
					<td>${employeeVO.empTelno}</td>
					<td>${employeeVO.empSalary}</td>
					<td>${employeeVO.filename}</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

	<!-- 3. 기타 요소로 띄우기 -->
	<p data-toggle="modal" data-target="#modal-lg">Open Modal</p>
	<!-- ////// 직원 상세 모달 시작 ////// -->
	<div class="modal fade" id="modal-lg">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Large Modal</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>One fine body&hellip;</p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ////// 직원 상세 모달 끝 ////// -->


	<hr />
	<div class="row clsPagingArea">
		${articlePage.pagingArea}
	</div>
</body>
</html>

직원 상세 보기 기능 넣기

list.jsp

class 추가 및 변경

<td class="clsEmpNo" data-toggle="modal" data-target="#modal-lg"
    data-emp-no="${employeeVO.empNo}">${employeeVO.empNo}</td>

자바 스크립트에 추가

$(function(){
	//모달로 직원 상세 보기
	$(".clsEmpNo").on("click",function(){
		console.log("clsEmpNo에 왔다");
		
		//data-emp-no="A014"
		//this : 동일 클래스 속성의 오브젝트 배열 중에서 클릭한 바로 그 오브젝트 
		//<td class="clsEmpNo" data-toggle="modal" data-target="#modal-lg" data-emp-no="A511">A511</td>
		let empNo = $(this).data("empNo");
		console.log("empNo : ", empNo);
	});
});

비동기 통신

EmployeeController.java

새로 추가

/*
요청 URI : /employee/detailAjax
요청 파라미터(JSON.stringify) : {"empNo" : "A013"}
요청 방식 : post
 */

//비동기(Asynchronous) : 1) RequestBody(JSON.stringify받음) / ResponseBody(JSON보냄)
@ResponseBody
@PostMapping(value="/detailAjax")
public EmployeeVO detailAjax(@RequestBody EmployeeVO employeeVO) {
    log.info("detailAjax->employeeVO : " + employeeVO);

    employeeVO = this.employeeService.detail(employeeVO);
    log.info("detailAjax->employeeVO : " + employeeVO);

    //2) return 데이터
    return employeeVO;
}

list.jsp

ajax 추가

$(function(){
	//모달로 직원 상세 보기
	$(".clsEmpNo").on("click",function(){
		console.log("clsEmpNo에 왔다");
		
		//data-emp-no="A014"
		//this : 동일 클래스 속성의 오브젝트 배열 중에서 클릭한 바로 그 오브젝트 
		//<td class="clsEmpNo" data-toggle="modal" data-target="#modal-lg" data-emp-no="A511">A511</td>
		let empNo = $(this).data("empNo");
		console.log("empNo : ", empNo);
		
		//JSON 오브젝트
		let data = {
			"empNo":empNo
		};
		
		console.log("data : ", data);
		
		/*
		요청 URI : /employee/detailAjax
		요청 파라미터(JSON.stringify) : {"empNo" : "A013"}
		요청 방식 : post
		 */
		 //아작나써유..(피)씨다타써.
		 $.ajax({
			url:"/employee/detailAjax",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(data),
			type:"post",
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},
			success:function(result){
				console.log("result : ", result);
			}
		 });
	});
});

모달 창 안에 값 출력

list.jsp

모달 부분 수정

	<!-- 3. 기타 요소로 띄우기 -->
	<p data-toggle="modal" data-target="#modal-lg">Open Modal</p>
	<!-- ////// 직원 상세 모달 시작 ////// -->
	<div class="modal fade" id="modal-lg">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Large Modal</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p><input type="text" name="empNo" placeholder="직원 번호" /></p>
					<p><input type="text" name="empName" class="formdata" placeholder="직원 명" /></p>
					<p><input type="text" name="empAddress" class="formdata" placeholder="직원 주소" /></p>
					<p><input type="text" name="empTelno" class="formdata" placeholder="직원 연락처" /></p>
					<p><input type="number" name="empSalary" class="formdata" placeholder="직원 급여" /></p>
					<p>
						<img src="" name="filename" class="formdata" />
					</p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ////// 직원 상세 모달 끝 ////// -->

스크립트 부분(ajax) 수정

 //아작나써유..(피)씨다타써.
 $.ajax({
    url:"/employee/detailAjax",
    contentType:"application/json;charset=utf-8",
    data:JSON.stringify(data),
    type:"post",
    beforeSend:function(xhr){
        xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
    },
    success:function(result){
        console.log("result : ", result);

        $("input[name='empNo']").val(result.empNo);
        $("input[name='empName']").val(result.empName);
        $("input[name='empAddress']").val(result.empAddress);
        $("input[name='empTelno']").val(result.empTelno);
        $("input[name='empSalary']").val(result.empSalary);
// 		$("img[name='filename']").attr("src","/resources/upload"+result.filename);
        // 위의 것과 같이 쓸 수 있음
        document.getElementsByName("filename")[0].src = "/resources/upload" + result.filename;
    }
 });

+다른 예시

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>도서 목록</title>
<script type="text/javascript">
$(function(){
	//도서 상세 모달
	$(".clsBookId").on("click",function(){
		let bookId = $(this).data("bookId"); //135
		console.log("bookId : ", bookId);
		
		let data = {
			"bookId":bookId
		};
		
		//아작나써유..(피)씨다타써
		//contentType : 보내는 타입
		$.ajax({
			url:"/detailAjax",
			contentType:"application/json;charset=utf-8",
			data: JSON.stringify(data),
			type:"post",
			dataType:"json",
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},
			success:function(result) {
				console.log("result : ", result);
				
				$("#modalBookTitle").html(result.title);
				$("#modalCategory").val(result.category);
				$("#modalPrice").val(result.price);
				$("#modalInsertDate").val(result.insertDatestr);
				
			}
		});
	});
	
	
	$("#btnSearch").on("click",function(){
		let keyword = $("input[name='keyword']").val();
		
		//json오브젝트
		let data = {
			"keyword":keyword
		};
		
		console.log("data : ", data);
		
 		//$(this).parent().submit();
 		//새롭게 검색 : 1페이지로 초기화
		getList(keyword,1);
	});
	
	// 전체 보기
	$("#btnSearchAll").on("click",function(){
		getList("",1);
	});
	
	
	// 목록 함수 호출
// 	getList("");
});

// 목록
function getList(keyword, currentPage) {
	
	// JSON 오브젝트
	let data = {
		"keyword":keyword,
		"currentPage":currentPage
	};
	// data : {"keyword":"알탄","currentPage":"1"}
	console.log("data : ", data);
	
	//아작나써유..(피)씨다타써...
	$.ajax({
		url: "/listAjax",
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(data),
		type:"post",
		dataType:"json",
		success:function(result){
			// result : articlePage
			// result.content : List<BookVO>
			console.log("result.content : ", result.content);
			
			let str = "";
			
			$.each(result.content, function(idx, bookVO){
				str += "<tr>";
				str += "<td>" + (idx+1) + "</td>";
				str += "<td><a href='/detail?bookId=" + bookVO.bookId + "'>" + bookVO.title + "</a></td>";
				str += "<td>" + bookVO.category + "</td>";
				str += "<td>" + bookVO.price + "원</td>";
				str += "</tr>";
			});
			
			$(".clsPagingArea").html(result.pagingArea);
			
			$("#trShow").html(str);
		}
	});
}

</script>
</head>
<body>
<h3>도서 목록</h3>
<p>
	<!-- action속성 및 값이 생략 시, 현재 URI(/list)를 재요청. 
		method는 GET(form 태그의 기본 HTTP 메소드는 GET임) 
	param : keyword=알탄
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄
	요청방식 : get
	-->
	<form>
		<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요"/>
		<!-- submit / button / reset -->
		<button type="button" id="btnSearch">검색</button>
		<button type="button" id="btnSearchAll">전체보기</button>
	</form>
	<a href="/create">도서 등록</a>
</p>
<!-- mav.addObject("bookVOList", bookVOList) -->
<%-- <p>${bookVOList}</p> --%>
<table border="1">
	<thead>
		<tr>
			<th>번호</th><th>제목</th><th>카테고리</th><th>가격</th>
		</tr>
	</thead>
	<tbody id="trShow">
		<!-- 
		forEach 태그? 배열(String[], int[][]), Collection(List, Set) 또는 
		Map(HashTable, HashMap, SortedMap)에 저장되어 있는 값들을 
		순차적으로 처리할 때 사용함. 자바의 for, do~while을 대신해서 사용함
		var : 변수
		items : 아이템(배열, Collection, Map)
		varStatus : 루프 정보를 담은 객체 활용
		   - index : 루프 실행 시 현재 인덱스(0부터 시작)
		   - count : 실행 회수(1부터 시작. 보통 행번호 출력)
		 -->
		<!-- data : mav.addObject("articlePage", 페이지네이션객체); -->
		<!-- articlePage.content => List<BookVO> -->
		<!-- row : bookVO 1행 -->
		<c:forEach var="bookVO" items="${articlePage.content}" varStatus="stat">
			<tr>
				<td class="clsBookId" data-toggle="modal" data-target="#modalBook"
					data-book-id="${bookVO.bookId}">${bookVO.rnum}</td>
				<td><a href="/detail?bookId=${bookVO.bookId}">${bookVO.title}</a></td>
				<td>${bookVO.category}</td>
				<td><fmt:formatNumber value="${bookVO.price}" pattern="#,###" />원</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<hr />
<div class="row clsPagingArea">
	${articlePage.pagingArea}
</div>

	<!-- ////// 상세 모달 시작 ////// -->
	<div class="modal fade" id="modalBook">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modalBookTitle"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body" id="modalBookBody">
					<p>카테고리 : <input type="text" id="modalCategory" readonly /></p>
					<p>가&nbsp;&nbsp;&nbsp;격 : <input type="text" id="modalPrice" readonly /></p>
					<p>등&nbsp;록&nbsp;일 : <input type="text" id="modalInsertDate" readonly /></p>
				</div>
				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
	<!-- ////// 상세 모달 끝 ////// -->

</body>
</html>

BookController.java

package kr.or.ddit.controller;

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

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.annotation.Secured;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


import kr.or.ddit.service.BookService;
import kr.or.ddit.utils.ArticlePage;
import kr.or.ddit.vo.BookVO;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class BookController {
	
	@Autowired
	BookService bookService;
	
	/*
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄 or 없음
	요청방식 : get
	
	required=false : 선택사항. 파라미터가 없어도 무관
	*/
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav, 
			@RequestParam(value="currentPage",required=false,defaultValue="1") int currentPage,
			@RequestParam(value="keyword",required=false,defaultValue="") String keyword) {
		log.info("list에 왔다");
		log.info("list->keyword : " + keyword);
		
		//map{"keyword":"알탄"}
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("keyword", keyword);
		map.put("currentPage", currentPage);
		
		
		//도서 전체 행수
		int total = this.bookService.getTotal(map);
		log.info("list->total : " + total);
		
		
		//도서 목록 map{"keyword":"알탄"}
		List<BookVO> bookVOList = this.bookService.list(map);
		log.info("list->bookVOList : " + bookVOList);
		
		//Model : 데이터
		mav.addObject("articlePage", new ArticlePage<BookVO>(total, currentPage, 10, bookVOList, keyword));
		
		//View : jsp
		//forwarding : 데이터가 넘어감
		mav.setViewName("book/list");
		
		return mav;
	}
    
	//비동기 :	1) RequestBody로 JSON 받기
	//			2) ResponseBody로 JSON 보내기
	@ResponseBody
	@PostMapping(value="/detailAjax")
	public BookVO detailAjax(@RequestBody BookVO bookVO) {
		log.info("detailAjax->bookVO : " + bookVO);
		
		//호출 전 : {"bookId":"3","title":null,"category":null,"price":0,"insertDate":null}
		//도서 상세
		bookVO = this.bookService.detail(bookVO);
		
		SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
		bookVO.setInsertDatestr(formatter.format(bookVO.getInsertDate()));
		
		return bookVO;
	}
}

BookVO.java

package kr.or.ddit.vo;

import java.util.Date;

import org.springframework.web.multipart.MultipartFile;

import lombok.Data;

@Data
public class BookVO {
	private int rnum;
	private int bookId;
	private String title;
	private String category;
	private int price;
	private Date insertDate;
	private String insertDatestr;
	
	//BOOK : ATTACH = 1 : N
	private MultipartFile[] pictures;
}

수정 기능 추가

list.jsp
모달 부분 추가

<!-- ////// 상세 모달 시작 ////// -->
<div class="modal fade" id="modalBook">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalBookTitle"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalBookBody">
                <p>카테고리 : <input type="text" class="form-control clsInput" id="modalCategory" readonly /></p>
                <p>가&nbsp;&nbsp;&nbsp;격 : <input type="text" class="form-control clsInput" id="modalPrice" readonly /></p>
                <p>등&nbsp;록&nbsp;일 : <input type="text" class="form-control clsInput" id="modalInsertDate" readonly /></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btnEdit" id="btnModify">수정</button>
                <button type="button" class="btn btn-success btnConfirm" style="display:none;" id="btnOk">확인</button>
                <button type="button" class="btn btn-warning btnConfirm" style="display:none;" id="btnCancel">취소</button>
            </div>
        </div>
    </div>
</div>
<!-- ////// 상세 모달 끝 ////// -->

테이블 부분의 data-book-id 추가 및 수정

<table border="1">
	<thead>
		<tr>
			<th>번호</th><th>제목</th><th>카테고리</th><th>가격</th>
		</tr>
	</thead>
	<tbody id="trShow">
		<!-- 
		forEach 태그? 배열(String[], int[][]), Collection(List, Set) 또는 
		Map(HashTable, HashMap, SortedMap)에 저장되어 있는 값들을 
		순차적으로 처리할 때 사용함. 자바의 for, do~while을 대신해서 사용함
		var : 변수
		items : 아이템(배열, Collection, Map)
		varStatus : 루프 정보를 담은 객체 활용
		   - index : 루프 실행 시 현재 인덱스(0부터 시작)
		   - count : 실행 회수(1부터 시작. 보통 행번호 출력)
		 -->
		<!-- data : mav.addObject("articlePage", 페이지네이션객체); -->
		<!-- articlePage.content => List<BookVO> -->
		<!-- row : bookVO 1행 -->
		<c:forEach var="bookVO" items="${articlePage.content}" varStatus="stat">
			<tr>
				<td class="clsBookId" data-toggle="modal" data-target="#modalBook"
					data-book-id="${bookVO.bookId}">${bookVO.rnum}</td>
				<td><a href="/detail?bookId=${bookVO.bookId}">${bookVO.title}</a></td>
				<td>${bookVO.category}</td>
				<td><fmt:formatNumber value="${bookVO.price}" pattern="#,###" />원</td>
			</tr>
		</c:forEach>
	</tbody>
</table>

스크립트 부분 추가

$(function(){
	//수정 버튼 클릭
	$("#btnModify").on("click", function(){
		$(".btnEdit").css("display", "none");
		$(".btnConfirm").css("display", "block");
		
		$(".clsInput").removeAttr("readonly");
		
		//sessionStorage(자바스크립트의 세션)에 변경 전 데이터를 저장함
		sessionStorage.setItem("category",$("#modalCategory").val());
		sessionStorage.setItem("price",$("#modalPrice").val());
		sessionStorage.setItem("insertDate",$("#modalInsertDate").val());
	});
	
	$("#btnCancel").on("click", function(){
		$(".btnEdit").css("display", "block");
		$(".btnConfirm").css("display", "none");
		
		$(".clsInput").attr("readonly",true);
		
		//변경 전 저장된 sessionStorage(자바스크립트의 세션) 데이터를 블러옴
		$("#modalCategory").val(sessionStorage.getItem("category"));
		$("#modalPrice").val(sessionStorage.getItem("price"));
		$("#modalInsertDate").val(sessionStorage.getItem("insertDate"));
	});
	
	$("#btnOk").on("click",function(){
		let category = $("#modalCategory").val();
		let price = $("#modalPrice").val();
		let insertDate = $("#modalInsertDate").val();
		
		let data = {
			"bookId":sessionStorage.getItem("bookId"),
			"category":category,
			"price":price,
			"insertDate":insertDate
		};
		console.log("data : ", data);
		
		
		//아작나써유..(피)씨다타써
		//contentType : 보내는 타입
		$.ajax({
			url:"/updataAjax",
			contentType:"application/json;charset=utf-8",
			data: JSON.stringify(data),
			type:"post",
			dataType:"json",
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},
			success:function(result) {
				console.log("result : ", result);
				
				$(".btnEdit").css("display","none");
				$(".btnConfirm").css("display","block");
				$(".clsInput").removeAttr("readonly");
   
				var Toast = Swal.mixin({
					toast: true,
					position: 'top-end',
					showConfirmButton: false,
					timer: 3000
				});

				Toast.fire({
					icon : 'success',
					title: '변경되었습니다.'
				});
   
				//목록 불러오기
				getList("",1);
				
				//모달닫기
				$ ("#modalBook").modal("hide");
			}
		});
	});
	
	
	//도서 상세 모달
	$(".clsBookId").on("click",function(){
		let bookId = $(this).data("bookId"); //135
		console.log("bookId : ", bookId);
		
		sessionStorage.setItem("bookId",bookId);
		
		let data = {
			"bookId":bookId
		};
		
		//아작나써유..(피)씨다타써
		//contentType : 보내는 타입
		$.ajax({
			url:"/detailAjax",
			contentType:"application/json;charset=utf-8",
			data: JSON.stringify(data),
			type:"post",
			dataType:"json",
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},
			success:function(result) {
				console.log("result : ", result);
				
				$("#modalBookTitle").html(result.title);
				$("#modalCategory").val(result.category);
				$("#modalPrice").val(result.price);
				$("#modalInsertDate").val(result.insertDatestr);
			}
		});
	});
});

상단에 스크립트와 link 추가

<link rel="stylesheet" src="/resources/css/sweetalert2.min.css"></script>
<script type="text/javascript" src="/resources/js/sweetalert2.min.js"></script>

사진 파일 D드라이브에 저장

servlet-context.xml

</beans:beans> 안에 추가

<!-- 첨부파일 전용 폴더 매핑 -->
<resources mapping="/upload/**" location="file:///D:/upload" />

스프링 시큐리티에서 submit할 때 파일 업로드 시

?${_csrf.parameterName}=${_csrf.token}

를 뒤에 추가하지 않으면 파일이 올라가지 않음

create.jsp
ClassicEditor 부분에 추가

ClassicEditor.create(document.querySelector('#ckMessage'),{ckfinder:{uploadUrl:'/image/upload?${_csrf.parameterName}=${_csrf.token}'}})
   .then(editor=>{window.editor=editor;})
   .catch(err=>{console.error(err.stack);});

파일 업로드 기능

create.jsp

상단에 추가

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>

</form> 안에 추가

<sec:csrfInput/>

form 태그 변경

action의 뒤에 ?${_csrf.parameterName}=${_csrf.token} 가 추가되어야 함

<form id="frm" name="frm" action="/contUs/createPost?${_csrf.parameterName}=${_csrf.token}" method="post" enctype="multipart/form-data">

TIP

[스프링시큐리티 및 csrf토큰 비활성화 방법]

1. web.xml의 filter, contextConfigLocation
2. security-context.xml에서 <security:csrf disabled="true" />

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 32장 연습 (0)	2024.05.22
[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조 (0)	2024.05.20
[스프링 프레임워크] 29장 자동 로그인, 스프링 시큐리티 애너테이션 (1)	2024.05.20
[스프링 프레임워크] 28장 스프링 시큐리티2 (0)	2024.05.17
[스프링 프레임워크] 27장 스프링 시큐리티1 (0)	2024.05.16

스프링 프레임워크

[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조

2024. 5. 20. 17:02

다음 우편번호, 주소 가져오기

create.jsp
중간에 우편번호, 상세 주소 추가

	<p>
		<input type="text" name="postNum" id="postNum" readonly placeholder="우편번호" />
		<button type="button" id="btnPost">우편번호 검색</button>
	</p>
	<p>
		<input type="text" name="empAddress" id="empAddress" placeholder="직원 주소" />
		<code><form:errors path="empAddress" /></code>
	</p>
	<p>
		<input type="text" name="empAddress2" id="empAddress2" placeholder="직원 상세 주소" />
	</p>

상단에 script 추가

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>

script에 추가

$(function(){
	//다음 우편번호 검색
	$("#btnPost").on("click",function(){
		new daum.Postcode({
			//다음 창에서 검색이 완료되면 콜백함수에 의해 결과 데이터가 data 객체로 들어옴
			oncomplete:function(data) {
				$("#postNum").val(data.zonecode);
				$("input[name='empAddress']").val(data.address);
				$("#empAddress2").val(data.buildingName);
			}
		}).open();
	});
});

오라클 계층형 쿼리

예시1

테이블 생성 및 데이터 삽입

--계층형 쿼리 연습
CREATE TABLE BOM (
     ITEM_ID INTEGER NOT NULL, -- 품목식별자
     PARENT_ID INTEGER, -- 상위품목 식별자
     ITEM_NAME VARCHAR2(20) NOT NULL, -- 품목이름
     ITEM_QTY INTEGER, -- 품목 개수
     PRIMARY KEY (ITEM_ID)
);

INSERT INTO BOM VALUES ( 1001, NULL, '컴퓨터', 1);
INSERT INTO BOM VALUES ( 1002, 1001, '본체', 1);
INSERT INTO BOM VALUES ( 1003, 1001, '모니터', 1);
INSERT INTO BOM VALUES ( 1004, 1001, '프린터', 1);

INSERT INTO BOM VALUES ( 1005, 1002, '메인보드', 1);
INSERT INTO BOM VALUES ( 1006, 1002, '랜카드', 1);
INSERT INTO BOM VALUES ( 1007, 1002, '파워서플라이', 1);
INSERT INTO BOM VALUES ( 1008, 1005, 'CPU', 1);
INSERT INTO BOM VALUES ( 1009, 1005, 'RAM', 1);
INSERT INTO BOM VALUES ( 1010, 1005, '그래픽카드', 1);
INSERT INTO BOM VALUES ( 1011, 1005, '기타장치', 1);

SELECT ITEM_ID, PARENT_ID, ITEM_NAME, ITEM_QTY
FROM BOM
START WITH PARENT_ID IS NULL
CONNECT BY PRIOR ITEM_ID = PARENT_ID;

--TREE JS
SELECT ITEM_ID, PARENT_ID, 
        LEVEL,
        LPAD('ㄴ',LEVEL) LVL,
        ITEM_NAME, ITEM_QTY
FROM BOM
START WITH PARENT_ID IS NULL
CONNECT BY PRIOR ITEM_ID = PARENT_ID;

예시2

테이블 생성 및 데이터 삽입

CREATE TABLE FREE_BOARD(
    NO NUMBER,
    TITLE VARCHAR2(90),
    WRITER VARCHAR2(60),
    P_NO NUMBER,
    CONSTRAINT PK_FB PRIMARY KEY(NO)
);

Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (1,'여름은 더워','홍길동',null);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (2,'맞아 더워','김철수',1);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (3,'그래서 여름이지','홍길동',1);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (5,'정말 그래','노홍철',3);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (8,'그래 정말','지상철',4);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (9,'말장난 하지마','노홍철',4);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (10,'말장난 좋은걸','지상철',4);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (6,'그러게','하정우',3);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (7,'가을아 와라','김진수',3);
Insert into FREE_BOARD (NO,TITLE,WRITER,P_NO) values (4,'그래도 여름이 좋아','박명수',1);

SELECT NO
    , LPAD('ㄴ',2*(LEVEL-1)) || TITLE
    , WRITER, P_NO
FROM FREE_BOARD
START WITH P_NO IS NULL
CONNECT BY PRIOR NO = P_NO;
--CONNECT BY PRIOR 자식 컬럼 = 부모 컬럼 : 부모 → 자식 순방향 전개

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 32장 연습 (0)	2024.05.22
[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장 (0)	2024.05.21
[스프링 프레임워크] 29장 자동 로그인, 스프링 시큐리티 애너테이션 (1)	2024.05.20
[스프링 프레임워크] 28장 스프링 시큐리티2 (0)	2024.05.17
[스프링 프레임워크] 27장 스프링 시큐리티1 (0)	2024.05.16

1 2 3 4 ··· 11

[스프링 프레임워크] 32장 연습

[스프링 프레임워크] 32장 연습

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장

[스프링 프레임워크] 31장 sweetalert, 모달, 사진 파일 D드라이브에 저장

[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조

[스프링 프레임워크] 30장 다음 우편번호, 주소 가져오기, 계층형 구조

'스프링 프레임워크' 카테고리의 다른 글

'스프링 프레임워크' 카테고리의 다른 글

'스프링 프레임워크' 카테고리의 다른 글

티스토리툴바