| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- spring 프로젝트
- 스프링 쇼핑몰 프로젝트
- 스프링 쇼핑몰
- 로그아웃 기능 구현
- 쇼핑몰 프로젝트
- 스프링 게시판 구현
- BCrypt 적용
- 스프링 프로젝트 기본 설정
- 스프링 업로드
- 스프링 프로젝트
- 스프링 이미지
- 스프링 메일 전송
- Bcrypt
- ResponseEntity
- 회원가입 기능
- 이미지 출력
- 파일 업로드
- 스프링 포트폴리오
- 스프링 프로젝트 설정
- arraylist
- 정규표현식
- oracle 설치방법
- 로그인 기능
- 인증번호 전송
- 스프링 게시판
- 삭제 구현
- 스프링 파일 삭제
- 쇼핑몰 포트폴리오
- spring 쇼핑몰
- 스프링 HikariCP
- Today
- Total
Kim VamPa
[Spring][쇼핑몰 프로젝트][17] 작가 수정 페이지 - 1 본문
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188
목표
작가 수정 페이지 구현
이번 포스팅에선 작가 '수정 페이지(authorModify.jsp)'를 구현합니다. 서버단에서 작가 정보 수정 기능은 다음 포스팅에서 진행합니다.
순서
1. 수정 페이지 이동 메서드(AdminController.java)
2. View처리(authorModify.jsp)
1. 수정 페이지 이동 메서드(AdminController.java)
수정 페이지도 동일하게 작가 한 명의 데이터 즉, vam_author테이블의 하나의 행 데이터를 가져와야 합니다. 이는 저번 포스팅에서 '작가 상세 페이지(authorDetail.jsp)' 처리한 것과 동일합니다. 따라서 다시 일일이 Mapper, Service, Controller 메서드를 작성하지 않고 기존 '작가 상세 페이지'의 url 매핑 메서드인 authorGetInfoGET()을 활용하겠습니다.
@GetMapping과 @PostMapping 등은 URL을 배열로 처리할 수 있습니다. 따라서 기존의 @GetMapping 코드를 아래와 같이 수정합니다.
// 기존
@GetMapping("/authorDetail")
// 수정 후
@GetMapping({"/authorDetail", "/authorModify"})
2. View 처리(authorModify.jsp)
views/admin 경로와 resources/css/admin경로에 'authorModify.jsp', 'authorModify.css' 파일을 각각 생성합니다. 디자인과 출력할 데이터 큰 틀이 '작가 상세 페이지(authorDetail.jsp)'와 거의 비슷하기 때문에 'authorDetail.jsp'와 'authorDetail.css'의 코드를 복사하여 일부를 수정하는 방식으로 'authorModify' jsp, css 파일을 작성하였습니다.
authorModify.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 prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../resources/css/admin/authorModify.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<%@include file="../includes/admin/header.jsp" %>
<div class="admin_content_wrap">
<div class="admin_content_subject"><span>작가 상세</span></div>
<div class="admin_content_main">
<form id="modifyForm" action="/admin/authorModify" method="post">
<div class="form_section">
<div class="form_section_title">
<label>작가 번호</label>
</div>
<div class="form_section_content">
<input class="input_block" name="authorId" readonly="readonly" value="<c:out value='${authorInfo.authorId }'></c:out>">
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>작가 이름</label>
</div>
<div class="form_section_content">
<input name="authorName" value="<c:out value='${authorInfo.authorName }'></c:out>" >
<span id="warn_authorName">작가 이름을 입력 해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>소속 국가</label>
</div>
<div class="form_section_content">
<select name="nationId" >
<option value="none" disabled="disabled">=== 선택 ===</option>
<option value="01" <c:out value=" ${authorInfo.nationId eq '01' ?'selected':''}"/>>국내</option>
<option value="02" <c:out value=" ${authorInfo.nationId eq '02' ?'selected':''}"/>>국외</option>
</select>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>작가소개</label>
</div>
<div class="form_section_content">
<textarea name="authorIntro" ><c:out value='${authorInfo.authorIntro }'/></textarea>
<span id="warn_authorIntro">작가 소개를 입력 해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>등록 날짜</label>
</div>
<div class="form_section_content">
<input class="input_block" type="text" readonly="readonly" value="<fmt:formatDate value="${authorInfo.regDate}" pattern="yyyy-MM-dd"/>">
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>수정 날짜</label>
</div>
<div class="form_section_content">
<input class="input_block" type="text" readonly="readonly" value="<fmt:formatDate value="${authorInfo.updateDate}" pattern="yyyy-MM-dd"/>">
</div>
</div>
<div class="btn_section">
<button id="cancelBtn" class="btn">취소</button>
<button id="modifyBtn" class="btn modify_btn">수 정</button>
</div>
</form>
</div>
</div>
<form id="moveForm" method="get">
<input type="hidden" name="authorId" value='<c:out value="${authorInfo.authorId }"/>'>
<input type="hidden" name="pageNum" value='<c:out value="${cri.pageNum }"/>'>
<input type="hidden" name="amount" value='<c:out value="${cri.amount }"/>' >
<input type="hidden" name="keyword" value='<c:out value="${cri.keyword }"/>'>
</form>
<%@include file="../includes/admin/footer.jsp" %>
</body>
</html>
authorModify.css
@charset "UTF-8";
*{
margin: 0;
padding:0;
}
a{
text-decoration: none;
}
a:link {color: black;}
a:visited {color: black;}
a:active {color: black;}
a:hover {color: black;}
ul{
list-style: none;
}
/* 화면 전체 렙 */
.wrapper{
width: 100%;
}
/* content 랩 */
.wrap{
width : 1080px;
margin: auto;
}
/* 홈페이지 기능 네비 */
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #f0f0f1;
position:relative;
}
.top_gnb_area .list{
position: absolute;
top: 0px;
right: 0;
}
.top_gnb_area .list li{
list-style: none;
float : left;
padding: 13px 15px 0 10px;
font-weight: 900;
cursor: pointer;
}
/* 관리제 페이지 상단 현페이지 정보 */
.admin_top_wrap{
height:110px;
line-height: 110px;
background-color: #5080bd;
margin-bottom: 15px;
}
.admin_top_wrap>span{
margin-left: 30px;
display:inline-block;
color: white;
font-size: 50px;
font-weight: bolder;
}
/* 관리자 wrap(네비+컨텐츠) */
.admin_wrap{
}
/* 관리자페이지 네비 영역 */
.admin_navi_wrap{
width: 20%;
height: 300px;
float:left;
height: 100%;
}
.admin_navi_wrap li{
display: block;
height: 80px;
line-height: 80px;
text-align: center;
}
.admin_navi_wrap li a{
display: block;
height: 100%;
width: 95%;
margin: 0 auto;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
}
.admin_list_04{
background-color: #c8c8c8;
}
/* 관리자페이지 컨텐츠 영역 */
.admin_content_wrap{
width: 80%;
float:left;
min-height:700px;
}
/* 관리자 컨텐츠 제목 영역 */
.admin_content_subject{
font-size: 40px;
font-weight: bolder;
padding-left: 15px;
background-color: #6AAFE6;
height: 80px;
line-height: 80px;
color: white;
}
/* 관리자 컨텐츠 메인 영역 */
.form_section{
width: 95%;
margin-left: 2%;
margin-top: 20px;
border: 1px solid #dbdde2;
background-color: #efefef;
}
.form_section_title{
padding: 20px 35px;
}
.form_section_title label{
display: block;
font-size: 20px;
font-weight: 800;
}
.form_section_content{
padding: 20px 35px;
border-top: 1px solid #dbdde2;
}
.form_section_content input{
width: 98%;
height: 25px;
font-size: 20px;
padding: 5px 1%;
}
.form_section_content textarea{
width: 98%;
height: 170px;
font-size: 20px;
}
.form_section_content select{
width: 98%;
height: 35px;
font-size: 20px;
text-align-last: center;
}
.input_block{
background-color:#f9f9f9;
}
/* 입력란 공란 경고 태그 */
.form_section_content span{
display: none;
padding-top: 10px;
text-align: center;
color: #e05757;
font-weight: 300;
}
/* 버튼 영역 */
.btn_section{
text-align: center;
margin: 80px 0;
}
.btn{
min-width: 180px;
padding: 4px 30px;
font-size: 25px;
font-weight: 600;
line-height: 40px;
}
.modify_btn{
background-color: #b8d3e8;
margin-left:15px;
}
/* footer navai 영역 */
.footer_nav{
width:100%;
height:50px;
}
.footer_nav_container{
width: 100%;
height: 100%;
background-color:#8EC0E4;
}
.footer_nav_container>ul{
font-weight : bold;
float:left;
list-style:none;
position:relative;
padding-top:10px;
line-height: 27px;
font-family: dotum;
margin-left: 10px;
}
.footer_nav_container>ul>li{
display:inline;
width: 45px;
height: 19px;
padding: 10px 9px 0 10px;
}
.footer_nav_container>ul>span{
margin: 0 4px;
}
/* footer 영역 */
.footer{
width:100%;
height:130px;
background-color:#D4DFE6;
padding-bottom : 50px;
}
.footer_container{
width: 100%;
height: 100%;
margin: auto;
}
.footer_left>img {
width: 150%;
height: 130px;
margin-left: -20px;
margin-top: -12px;
}
.footer_left{
float :left;
width: 170px;
margin-left: 20px;
margin-top : 30px;
}
.footer_right{
float :left;
width: 680px;
margin-left: 70px;
margin-top : 30px;
}
/* float 속성 해제 */
.clearfix{
clear: both;
}
수정된 코드 혹은 남겨둔 코드들 중 주요하게 바야할 코드를 소개합니다.
먼저 작가 정보를 출력하고 저장하는 <input>태그 전체를 <form> 태그로 감 쌓습니다. 해당 <form> 태그는 작가 정보 수정을 처리하는 메서드에 데이터를 전달하기 위한 용도로 작성하였습니다.
사용자가 수정 할 수 있는 데이터는 작가 이름(authorName), 작가 국가(nationId), 작가 소개(authorIntro)입니다. 따라서 해당 <input>, <textarea>, <option> 태그에 "readonly"속성과 "disabled"속성을 지우고 class 속성 또한 지워줍니다. (class 속성은 색상을 제거하기 위해 지웠습니다.)
Criteria(pageNum, amount, keyword) 데이터를 저장하고 있는 기존의 <form> 태그를 그대로 남겨두었습니다. 왜냐하면 '작가 수정 페이지(authorModify.jsp)'에서 다시 '작가 상세 페이지(authorDetail.jsp)' 이동을 할 수 있도록 설계를 하였는데 '작가 상세 페이지'에서 만약 다시 '작가 관리 페이지(authorManage.jsp)'로 이동을 할 경우 Criteria 데이터가 필요로 하기 때문입니다.
작가 이름, 작가 소개 <div>태그 내부에 <span> 태그와 경고 문구를 추가하였습니다. 이는 수정 버튼을 눌러 서버에 수정 요청을 하기 전 빈 데이터를 전송하지 않기 위해서 유효성 체크를 할 때 빈 데이터일 경우 경구 문구를 띄우기 위한 용도입니다.
<span>태그는 일반적 상황에서 보이지 않도록 하기 위해 css 설정을 추가하였습니다.
버튼의 경우 '작가 상세 페이지(authorManage.jsp)'를 이동하는 버튼과 작가 정보 수정을 요청하는 버튼을 작성하였습니다.
JS코드 추가
작성한 두개의 버튼이 동작하도록 페이지 파단에 <script> 태그를 작성하여 태그 내부에 아래의 코드를 추가하였습니다.
let moveForm = $("#moveForm");
let modifyForm = $("#modifyForm");
/* 작가 상세 페이지 이동 버튼 */
$("#cancelBtn").on("click", function(e){
e.preventDefault();
moveForm.attr("action", "/admin/authorDetail")
moveForm.submit();
});
/* 작가 수정 버튼 작동 및 유효성 검사 */
$("#modifyBtn").on("click", function(e){
let authorName = $(".form_section_content input[name='authorName']").val();
let authorIntro = $(".form_section_content textarea").val();
let nameCk = false;
let introCk = false;
e.preventDefault();
if(!authorName){
$("#warn_authorName").css("display", "block");
} else {
$("#warn_authorName").css("display", "none");
nameCk = true;
}
if(!authorIntro){
$("#warn_authorIntro").css("display", "block");
} else {
$("#warn_authorIntro").css("display", "none");
introCk = true;
}
if(nameCk && introCk ){
modifyForm.submit();
} else {
return false;
}
});
작가 정보 수정 버튼의 경우는 먼저 anmeCk와 introCk 변수를 선언하여 기본적으로 false 값으로 초기화를 합니다. 그리고 작가 이름, 작가 소개 <input> 태그가 공란이 아닌지 if문을 통해 체크하여 공란일 경우 Ck값을 false를 대입 및 <span> 태그 노출시키고 공란이 아닐 경우 Ck값을 true로 대입 및 <span> 태그를 숨깁니다. 마지막 최종적으로 Ck값이 모드 true일 때 작가 정보 데이터가 담긴 <form>이 서버에 전송되도록 하였습니다.
다음 포스팅에서 뷰에서 전송받은 '수정된 작가 정보 데이터'를 통해 작가 정보를 수정하는 기능을 구현하겠습니다.
REFERENCE
DATE
- 2020.03.17
'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글
| [Spring][쇼핑몰 프로젝트][18] 상품 등록 - 테이블 생성 (6) | 2021.03.22 |
|---|---|
| [Spring][쇼핑몰 프로젝트][17] 작가 수정 페이지 - 2 (2) | 2021.03.18 |
| [Spring][쇼핑몰 프로젝트][16] 작가 상세 페이지 (6) | 2021.03.16 |
| [Spring][쇼핑몰 프로젝트][15] 작가목록 기능 구현 - 4 (1) | 2021.03.15 |
| [스프링]쇼핑몰 프로젝트 색인(index) (6) | 2021.03.12 |
