본 게시물은 아래 링크를 정리한 내용입니다.
Coala Spring Study
A new tool for teams & individuals that blends everyday work apps into one.
eminent-track-b16.notion.site
1. 게시판 다듬기
1) board 폴더에 nav.jsp 파일 생성 후 아래 코드 추가
네비게이션 바 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div>
<div>
<a href="/board/list">목록</a>
<a href="/board/writeView">글 작성</a>
</div>
</div>
2) list.jsp, readView.jsp, updateView.jsp, writeView.jsp 파일에 기존의 <nav> 태그를 지우고 아래 코드 추가
<div>
<%@include file="nav.jsp" %>
</div>
2. 벨리데이션 체크하기
1) readView.jsp에 삭제 버튼에 confirm 기능 추가
// 삭제
$(".delete_btn").on("click", function(){
var deleteYN = confirm("삭제하시겠습니가?");
if(deleteYN == true){
formObj.attr("action", "/board/delete");
formObj.attr("method", "post");
formObj.submit();
}
})
2) writeView.jsp에 아래 빨간 박스부분 추가
작성 버튼을 클릭시 벨리데이션을 체크하기 위한 함수로
chk라는 클래스의 i 번째가 공백이거나 null일 경우 alert로 i 번째 타이틀을 출력하는 함수다.
<meta charset="UTF-8">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>게시판</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
var formObj = $("form[name='writeForm']");
$(".write_btn").on("click",function(){
if(fn_valiChk()){
return false;
}
formObj.attr("action","/board/write");
formObj.attr("method","post");
formObj.submit();
});
})
function fn_valiChk(){
var regForm = $("form[name='writeForm'] .chk").length;
for(var i = 0;i<regForm;i++){
if($(".chk").eq(i).val()==""|| $(".chk").eq(i).val() == null){
alert($(".chk").eq(i).attr("title"));
return true;
}
}
}
</script>
3) writeView.jsp에서 아래 코드처럼 수정
4) updateView.jsp에서 아래 코드 추가
<script type="text/javascript">
$(document).ready(function(){
var formObj = $("form[name='updateForm']");
$(".cancel_btn").on("click", function(){
event.preventDefault();
location.href = "/board/list";
})
$(".update_btn").on("click", function(){
if(fn_valiChk()){
return false;
}
formObj.attr("action", "/board/update");
formObj.attr("method", "post");
formObj.submit();
})
})
function fn_valiChk(){
var updateForm = $("form[name='updateForm'] .chk").length;
for(var i = 0; i<updateForm; i++){
if($(".chk").eq(i).val() == "" || $(".chk").eq(i).val() == null){
alert($(".chk").eq(i).attr("title"));
return true;
}
}
}
</script>
5) updateView.jsp에 아래 코드로 수정
3. 확인하기
1) 서버 실행 및 localhost:8080/board/list 접속
2) 네비게이션바 생성 확인
3) 글 작성시 벨리데이션 확인
4) 글 수정시 벨리데이션 확인
'프로그래밍 > Spring' 카테고리의 다른 글
| [게시판] 10. 검색 기능 구현 (0) | 2022.01.01 |
|---|---|
| [게시판] 9. 페이징 구현 (0) | 2021.12.16 |
| [게시판] 7. 게시판 글 수정 및 삭제 (0) | 2021.12.14 |
| [게시판] 6. 게시판 조회 기능 구현 (0) | 2021.12.12 |
| [게시판] 5. 게시판 목록 기능 구현 (0) | 2021.12.11 |