코드로 배우는 스프링 웹 프로젝트 Part3 (ch11끝)

게시판 간단한 형태는 끝이났다.

앞으로 배울 내용은 페이징처리라 잠시 끊어갈까한다.

 

 

제이쿼리를 배우지 못하니 jsp 파일 작성시 내용 이해가 다소 어려웠다.

 

 

---

$() 함수 

:$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해줍니다.

$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있습니다.

이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 합니다.

 

 

---

self.location.href = url; 

현재페이지를  다른 페이지로 이동 시킨다.

---

.attr()

: .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다.

 

---

<c:out value="${어쩌고저쩌고}"/>

 

EL 태그 ${} 보다 c:out을 사용해야 하는 이유

앞서 배운 것처럼 보안성의 문제입니다. Cross-site Scripting 공격은 스크립트를 주입시켜서 사이트를 침입합니다. 그렇기 때문에 EL 태그보다 c:out 태그를 사용할 시에 좀 더 안전하게 페이지를 만들 수 있습니다.  

 

---

 

 

 

 

 

 

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri = "
http://java.sun.com/jsp/jstl/core"
 prefix = "c" %>
<%@ taglib uri = "
http://java.sun.com/jsp/jstl/fmt"
 prefix = "fmt" %>

<%@include file = "../includes/header.jsp" %>

            <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 class="form-control" name="bno" readonly = "readonly" value='<c:out value="${board.bno}"/>'> 
                            </div>
                            
                            <div class="form-group">
                                <label>Title</label>
                                <input class="form-control" name="title"  value='<c:out value="${board.title}"/>'> 
                            </div>
                            <div class="form-group">
                                <label>Content</label>
                                <textarea rows="5" cols="50" name = "content" class="form-control"> <c:out value="${board.content}"/> </textarea>
                            </div>
                            <div class="form-group">
                                <label>Writer</label>
                                <input class="form-control" name="writer" value = '<c:out value="${board.title}"/>'>
                            </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>
            <!-- /.row -->
          
          
<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> 
      
            
            
<%@include file = "../includes/footer.jsp" %>
       

 

 

 

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri = "
http://java.sun.com/jsp/jstl/core"
 prefix = "c" %>
<%@ taglib uri = "
http://java.sun.com/jsp/jstl/fmt"
 prefix = "fmt" %>

<%@include file = "../includes/header.jsp" %>

            <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 class="form-control" name="title" readonly = "readonly" value='<c:out value="${board.bno}"/>'> 
                            </div>
                            <div class="form-group">
                            
                         <div class="form-group">
                                <label>Title</label>
                                <input class="form-control" name="title" readonly = "readonly" value='<c:out value="${board.title}"/>'> 
                            </div>
                            <div class="form-group">
                                <label>Content</label>
                                <textarea rows="5" cols="50" name = "content" class="form-control"> <c:out value="${board.content}"/> </textarea>
                            </div>
                            <div class="form-group">
                                <label>Writer</label>
                                <input class="form-control" name="writer" value = '<c:out value="${board.title}"/>'>
                            </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="${board.bno}"/>'>Modify</a></button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
           
          
            
            
<%@include file = "../includes/footer.jsp" %>