« 2025/01 »
일	월	화	수	목	금	토
			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	31

Tags more

Archives

Today

Total

관리 메뉴

Kim VamPa

[Spring][쇼핑몰 프로젝트][14] 작가등록 기능 구현 - 3 본문

스프링 프레임워크/쇼핑몰 프로젝트

[Spring][쇼핑몰 프로젝트][14] 작가등록 기능 구현 - 3

Kim VamPa 2021. 2. 10. 10:09

728x90

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

작가 등록 페이지 CSS 설정 추가 & 작가 등록 버튼 유효성 검사 적용

작가 등록 페이지 CSS 설정 추가와 사용자가 공란을 제출하지 못하도록 작가 등록 버튼에 유효성 검사를 적용하는 것을 목표로 합니다. 진행방식은 [Spring][쇼핑몰 프로젝트][6]회원가입 유효성 검사(1)~(3) 포스팅에서 작업한 것과 동일 합니다.

순서

0. CSS 설정 일부 수정

1. CSS 추가

2. 유효성 검사 적용

3. 테스트

0. CSS 설정 일부 수정

resources/css/admin 경로에 있는 main.css 파일을 제외한 모든 css 파일(authorEnroll.css, authorManage.css, goodsEnroll.css, goodsManage.css) 에서 적용된 .admin_content_wrap 식별자의 height:700px 속성값을 삭제하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 
/* 변경 전 */
/* 관리자페이지 컨텐츠 영역 */
.admin_content_wrap{
    width: 80%;
    float:left;
    height: 100%;
    height: 700px;    
}
 
/* 변경 후 */
/* 관리자페이지 컨텐츠 영역 */
.admin_content_wrap{
    width: 80%;
    float:left;
    height: 100%;    
}


 

1. CSS 추가

저번 포스팅에서 새로 작성한 태그들의 css 설정을 추가하였습니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/* 관리자 컨텐츠 메인 영역 */
.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 select{
    width: 98%;
    height: 35px;
    font-size: 20px;
    text-align-last: center;
}
 
/* 입력란 공란 경고 태그 */
.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;
}
.enroll_btn{
    background-color: #dbdde2;
    margin-left:15px;
}
Colored by Color Scripter

authorEnroll.css 전체

@charset "UTF-8";
*{
	margin: 0;
	padding:0;
}
a{
	text-decoration: none;
}
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_navi_wrap li a:link {color: black;}
.admin_navi_wrap li a:visited {color: black;}
.admin_navi_wrap li a:active {color: black;}
.admin_navi_wrap li a:hover {color: black;}
 
.admin_list_03{
    background-color: #c8c8c8;
} 


/* 관리자페이지 컨텐츠 영역 */
.admin_content_wrap{
    width: 80%;
    float:left;
    height: 100%;

    
}
/* 관리자 컨텐츠 제목 영역 */
.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 select{
	width: 98%;
    height: 35px;
    font-size: 20px;
    text-align-last: center;
}

/* 입력란 공란 경고 태그 */
.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;
}
.enroll_btn{
	background-color: #dbdde2;
	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;
}

2. 유효성 검사 적용

먼저 경고 문구가 적힌 sapn태그를 추가하겠습니다. 아래 3개의 span 태그를 class속성 값 "form_section_content"인 <div> 태그에 내부 제일 하단에 각각 추가합니다.

1
2
3
4
5

 
    <span id="warn_authorName">작가 이름을 입력 해주세요.</span>
    <span id="warn_nationId">소속 국가를 선택해주세요.</span>
    <span id="warn_authorIntro">작가 소개를 입력 해주세요.</span>
 
Colored by Color Scripter

authorEnroll.css 파일에 새로 추가한 <span> 태그에 css설정을 추가합니다.

1
2
3
4
5
6
7
8
9
10

 
/* 입력란 공란 경고 태그 */
.form_section_content span{    
    display: block;
    padding-top: 10px;
    text-align: center;
    color: #e05757;
    font-weight: 300;    
}
 

적용된 것을 확인하였으니 해당 <span>태그이 css 설정중 display 속성 값을 'none'으로 변경하여 태그를 숨깁니다.

지금부터는 자바스크립트 작업을 합니다. 등록 버튼(enrollBtn) 클릭 메서드 내부에 '검사 통과 유무 변수'를 추가합니다. 해당 변수들은 의도적으로 메서드 내부에 선언하였습니다. 해당 변수를 메서드 내부에 선언함으로써 지역변수 규칙(변수가 선언된 블록 내에서만 유효하며, 블록이 종료되면 메모리에서 사라짐 )으로 인해 메서드가 실행될 때마다 변수가 새롭게 선언되어 기본적으로 값이 'false'인 상태가 되도록 하기 위함입니다.

해당 변수들은 각 입력란에 공란인지 확인한 뒤, 공란이면 false를 공란이 아니면 true를 대입될 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 변경 전  */
/* 등록 버튼 */
$("#enrollBtn").click(function(){    
    $("#enrollForm").submit();
});
 
/* 변경 후 */
/* 등록 버튼 */
$("#enrollBtn").click(function(){    
    /* 검사 통과 유무 변수 */
    let nameCheck = false;            // 작가 이름
    let nationCheck = false;        // 소속 국가
    let introCheck = false;            // 작가 소개    
    
    $("#enrollForm").submit();
});
 
Colored by Color Scripter

각 입력란의 값을 편하게 호출하기 위해서 입력값에 대한 변수를 선언 및 초기화하였습니다. 더불어 새로 추가한 <span>태그 접근을 용이하기위해서 각 <span>태그에 대한 변수또한 선언및 초기화 하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
/* 등록 버튼 */
$("#enrollBtn").click(function(){    
    /* 검사 통과 유무 변수 */
    let nameCheck = false;            // 작가 이름
    let nationCheck = false;        // 소속 국가
    let introCheck = false;            // 작가 소개    
 
    /* 입력값 변수 */
    let authorName = $('input[name=authorName]').val();        // 작가 이름
    let nationId = $('select[name=nationId]').val();        // 소속 국가
    let authorIntro = $('input[name=authorIntro]').val();    // 작가 소개
    /* 공란 경고 span태그 */
    let wAuthorName = $('#warn_authorName');
    let wNationId = $('#warn_nationId');
    let wAuthorIntro = $('#warn_authorIntro');    
    
    $("#enrollForm").submit();
});
 
Colored by Color Scripter

각 입력란에 '공란'을 확인하는 코드를 추가합니다. 해당 코드들은 입력란이 '공란'일 경우 경고 <span> 태그가 등장하도록 함과 동시에 해당 '검사 통과 유무 변수'에 false값을 대입합니다. 반대일 경우 <span> 태그를 숨기고 '검사 통과 유무 변수'에 true값을 대입합니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

 
/* 등록 버튼 */
$("#enrollBtn").click(function(){    
    /* 검사 통과 유무 변수 */
    let nameCheck = false;            // 작가 이름
    let nationCheck = false;        // 소속 국가
    let introCheck = false;            // 작가 소개    
 
    /* 입력값 변수 */
    let authorName = $('input[name=authorName]').val();        // 작가 이름
    let nationId = $('select[name=nationId]').val();        // 소속 국가
    let authorIntro = $('input[name=authorIntro]').val();    // 작가 소개
    /* 공란 경고 span태그 */
    let wAuthorName = $('#warn_authorName');
    let wNationId = $('#warn_nationId');
    let wAuthorIntro = $('#warn_authorIntro');    
    
    /* 작기 이름 공란 체크 */
    if(authorName ===''){
        wAuthorName.css('display', 'block');
        nameCheck = false;
    } else{
        wAuthorName.css('display', 'none');
        nameCheck = true;
    }
    
    /* 소속 국가 공란 체크 */
    if(nationId ==='none'){
        wNationId.css('display', 'block');
        nationCheck = false;
    } else{
        wNationId.css('display', 'none');
        nationCheck = true;
    }    
    
    /* 작가 소개 공란 체크 */
    if(authorIntro ===''){
        wAuthorIntro.css('display', 'block');
        introCheck = false;
    } else{
        wAuthorIntro.css('display', 'none');
        introCheck = true;
    }    
    
 
    $("#enrollForm").submit();    
    
});
 
 
Colored by Color Scripter

마지막 <form> 태그에 담긴 데이터를 전송하는 역할을 하는 코드 [$("#enrollForm"). submit();]을 if문으로 감싸줍니다. '검사 통과 유무 변수'가 모두 true값을 가질 때 서버에 데이터를 전송하고, 단 한 개라도 false인 경우 버튼 메서드를 벗어나도록 로직을 작성합니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

 
/* 등록 버튼 */
$("#enrollBtn").click(function(){    
    /* 검사 통과 유무 변수 */
    let nameCheck = false;            // 작가 이름
    let nationCheck = false;        // 소속 국가
    let introCheck = false;            // 작가 소개    
 
    /* 입력값 변수 */
    let authorName = $('input[name=authorName]').val();        // 작가 이름
    let nationId = $('select[name=nationId]').val();        // 소속 국가
    let authorIntro = $('input[name=authorIntro]').val();    // 작가 소개
    /* 공란 경고 span태그 */
    let wAuthorName = $('#warn_authorName');
    let wNationId = $('#warn_nationId');
    let wAuthorIntro = $('#warn_authorIntro');    
    
    /* 작기 이름 공란 체크 */
    if(authorName ===''){
        wAuthorName.css('display', 'block');
        nameCheck = false;
    } else{
        wAuthorName.css('display', 'none');
        nameCheck = true;
    }
    
    /* 소속 국가 공란 체크 */
    if(nationId ==='none'){
        wNationId.css('display', 'block');
        nationCheck = false;
    } else{
        wNationId.css('display', 'none');
        nationCheck = true;
    }    
    
    /* 작가 소개 공란 체크 */
    if(authorIntro ===''){
        wAuthorIntro.css('display', 'block');
        introCheck = false;
    } else{
        wAuthorIntro.css('display', 'none');
        introCheck = true;
    }    
    
    /* 최종 검사 */
    if(nameCheck && nationCheck && introCheck){
        $("#enrollForm").submit();    
    } else{
        return;
    }
    
});
Colored by Color Scripter

3. 테스트

작성한 스크립트가 정상적으로 작동하는지 테스트합니다.

REFERENCE

DATE

2020.02.09

728x90

저작자표시

'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글

[Spring][쇼핑몰 프로젝트][15] 작가목록 기능 구현 - 2 (0)	2021.03.11
[Spring][쇼핑몰 프로젝트][15] 작가목록 기능 구현 - 1 (0)	2021.03.10
[Spring][쇼핑몰 프로젝트][14] 작가등록 기능 구현 -2 (4)	2021.02.09
[Spring][쇼핑몰 프로젝트][14] 작가등록 기능 구현 -1 (2)	2021.02.08
[Spring][쇼핑몰 프로젝트][13] 작가 테이블 구성 & 기타 작업(로고,footer영역, 관리자 페이지) - 2 (10)	2021.02.05