스프링 웹 프로젝트 12

organize/스프링

스프링 웹 프로젝트 12

001cloudid 2025. 1. 11. 16:28

728x90

SQL Developer를 종료하고 다시 시작하고난 뒤 sql_board.nextval로 bno값을 증가시켰을 때 bno값이 마지막 번호에서 증가되지 않는 문제가 발생 → Oracle의 시퀀스는 기본적으로 캐시 기능을 사용하는데, 시퀀스에서 생성되는 값을 미리 메모리에 저장해두고, 그 값을 반환함. 세션 종료와 캐시 SQL Developer를 종료하고 다시 시작하면, 캐시된 시퀀스 값들이 세션 종료와 함께 소멸됨. 즉 SQL Developer 세션이 종료될 때 메모리에서 캐시된 값들이 사라지고, 새로 시작된 세션에서 시퀀스가 처음부터 새로운 값을 생성하기 시작함. 이 과정에서 이미 캐시된 값들이 사려졌기 때문에 시퀀스가 값을 건너뛰는 현상이 발생할 수 있음

게시물 작업 이후 재전송

게시물의 틍록, 수정, 삭제의 경우에 해당
작업이 완료된 후에는 리스트 페이지로 다시 이동
BoardController에서는 RedirectAttributes의 addFlashAttribute()를 이용해서 단 한 번만 전송되는 데이터를 저장 후 전송
JSP 등의 화면에서는 JavaScript를 이용해서 경고창이나 모달창 등을 보여주는 형식

package org.zerock.controller;

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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)
	
	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		boardService.register(boardVO);
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result", boardVO.getBno()); // addFlashAttribute 잠깐 결과를 보내는 방식
		// ※ redirectAttributes.addAttribute("result", boardVO.getBno()) // 브라우저의 링크와 같이 연결, list?bno= 이런 형식으로 할 때 쓰임
		
		return "redirect:/board/list";
	}
}

Submit Button을 누르고 뒤로 가기

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<script>
$(document).ready(function(){
	${result}
});
</script>

<%@include file="../include/footer.jsp" %>

자바스크립트 문법상 에러 나는 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
});
</script>

<%@include file="../include/footer.jsp" %>

board/list에서 새로 고침을 하고 소스보기를 할 경우

이것을 가지고 작업을 했는지, 호출만 했는지를 구분 → 모달창

BoardController에서 특정한 데이터가 RedirectAttribute에 포함된 경우에 모달창
https://getbootstrap.com/docs/4.0/components/modal/ 코드를 복사

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	function checkModal(result){
		
		if(result ===''){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
});
</script>

<%@include file="../include/footer.jsp" %>

글 작성 후

이후 http://localhost:8080/board/list에서 새로고침을 하면 모달창이 뜨지 않음

글쓰기 버튼 추가 및 버튼 글쓰기 버튼 클릭시 링크 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
 (...생략...)
 
 
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><c:out value="${boardVO.title}" /></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){

(...생략...)

	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

조회 페이지와 이동

목록에서 특정 게시물 선택 후 이동 처리 (번호가 전달되어야함)
조회의 경우 반드시 GET 방식으로만 처리

package org.zerock.controller;

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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)
	
	@GetMapping("/get")
	public void get(@RequestParam("bno") Long bno,Model model) {
		model.addAttribute("boardVO", boardService.get(bno));
	}
	
}

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default">Submit Button</button>
                                <button type="reset" class="btn btn-default">Reset Button</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

list.jsp 에서 제목을 클릭하면 위의 조회 페이지를 볼 수 있게 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	function checkModal(result){
		
		if(result ===''){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

히스토리 클리어

list.jsp

(...생략...)

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

게시물의 수정/삭제 처리

게시물 조회 이후 수정/삭제 페이지로 이동
사용자의 선택에 따라서 작업을 처리
수정/삭제는 POST 방식으로 처리

BoardController의 get()메서드와 같기 때문에 똑같은 페이지를 만들 필요 없이 두 개의 링크를 처리할 수 있게

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno,Model model) {
		model.addAttribute("boardVO", boardService.get(bno));
	}

modify.jsp (get.jsp와 거의 유사하기 때문에 복사붙여넣기 후 이름만 수정)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default">Submit Button</button>
                                <button type="reset" class="btn btn-default">Reset Button</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

여기서 수정을 할 수 있는 것과 수정을 할 수 없는 것을 비교 ※링크 처리는 나중에

버튼먼저 변경

							 	<button class="btn btn-default">Modify</button>
                                <button class="btn btn-danger">Remove</button>
                                <button class="btn btn-info">List</button>

이벤트

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form action="">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form>
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove");
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

remove 버튼을 누르면

이어서 attr("method","post")를 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
(...생략...)
				formObj.attr("action", "/board/remove").attr("method","post");
			}
		})
	})
</script>

<%@include file="../include/footer.jsp" %>

submit만 해주면

(...생략...)
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

input 태그에 name에 bno가 아니라 title로 작성되어 있어 오류 발생 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form>
								<div class="form-group">
									<label>BNO</label> <input name="bno" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

Modal title이 비어있는 것을 수정

list.jsp

(...생략...)
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

modify.jsp에서 readonly 속성 제거

(...생략...)
								<div class="form-group">
									<label>BNO</label> <input name="bno" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
(...생략...)

modify.jsp

(...생략...)
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}else if(operation === 'modify'){
				formObj.attr("action", "/board/modify").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default"><a href="/board/list">List</a></button>
                                <button type="reset" class="btn btn-default"><a href="/board/modify?bno=<c:out value='${boardVO.bno }'/>">Modify</a></button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

728x90

'organize > 스프링' 카테고리의 다른 글

스프링 웹 프로젝트 14 (0)	2025.01.13
스프링 웹 프로젝트 13 (0)	2025.01.12
스프링 웹 프로젝트 11 (0)	2025.01.09
스프링 웹 프로젝트 10 (0)	2025.01.08
스프링 웹 프로젝트 9 (0)	2025.01.07

현재글스프링 웹 프로젝트 12

001cloudid