목표
사용자가 '상품 등록'을 눌렀을 때 공란이 있는지 없는지 확인 후, 공란이 있을 시 해당 공란에 대한 경고 표시와 '상품 등록'실행을 막는 유효성 검사 구현을 목표로 합니다.
추가 수정 사항으로 할인율 입력란을 소수를 입력을 해야 에러가 나지 않습니다. 하지만 일반 사용자는 정수를 입력하는 것이 편할 수 있습니다. 따라서 사용자가 입력은 정수를 입력하고 서버에 전송할 때는 해당 값을 소수로 변경되도록 만들고자 합니다. 더불어서 사용자가 제품 가격과 할인율을 입력하였을 때 할인된 가격이 얼마인지 볼 수 있도록 구현할 것입니다.
상품 등록 기능을 완성하여 개발 편의를 위해서 부여하지 않은 상품 테이블, 작가 테이블 외래 키를 부여해주는 작업을 할 것입니다.
1. <span> 태그 추가
공란 시 경고글 역할을 할 <span>태그를 추가합니다. 위치는 class 속성 값이 'form_section_content'인 <div> 태그 내부 제일 마지막 공간입니다.
각 <span>태그의 속성명에는 공통적으로 적용될 'ck_warn'값과 각 <span>태그를 구분해줄 '항목명_warn'값을 추가하였습니다.
<span class="ck_warn bookName_warn">책 이름을 입력해주세요.</span>
<span class="ck_warn authorId_warn">작가를 선택해주세요</span>
<span class="ck_warn publeYear_warn">출판일을 선택해주세요.</span>
<span class="ck_warn publisher_warn">출판사를 입력해주세요.</span>
<span class="ck_warn cateCode_warn">카테고리를 선택해주세요.</span>
<span class="ck_warn bookPrice_warn">상품 가격을 입력해주세요.</span>
<span class="ck_warn bookStock_warn">상품 재고를 입력해주세요.</span>
<span class="ck_warn bookDiscount_warn">상품 할인율을 입력해주세요.</span>
<span class="ck_warn bookIntro_warn">책 소개를 입력해주세요.</span>
<span class="ck_warn bookContents_warn">책 목차를 입력해주세요.</span>"goodsEnroll.css"파일에 추가한 <span>태그에 대한 css설정 코드를 추가합니다.
.ck_warn{ /* 입력란 공란 경고 태그 */
display: none;
padding-top: 10px;
text-align: center;
color: #e05757;
font-weight: 300;
}2. 변수선언
'상품 등록' 동작 Javascript 메서드에 2가지의 변수를 선언해줍니다. 첫 번째 변수는 각 항목의 통과 여부를 의미하는 변수입니다. 두번째 변수는 각 항목의 <input>태그에 쉽게 접근하기 위해 변수를 선언 및 초기화하였습니다.
/* 체크 변수 */
let bookNameCk = false;
let authorIdCk = false;
let publeYearCk = false;
let publisherCk = false;
let cateCodeCk = false;
let priceCk = false;
let stockCk = false;
let discountCk = false;
let introCk = false;
let contentsCk = false;
/* 체크 대상 변수 */
let bookName = $("input[name='bookName']").val();
let authorId = $("input[name='authorId']").val();
let publeYear = $("input[name='publeYear']").val();
let publisher = $("input[name='publisher']").val();
let cateCode = $("select[name='cateCode']").val();
let bookPrice = $("input[name='bookPrice']").val();
let bookStock = $("input[name='bookStock']").val();
let bookDiscount = $("input[name='bookDiscount']").val();
let bookIntro = $(".bit p").html();
let bookContents = $(".bct p").html(); 3. 각 항목 확인
각 항목을 빈 공란인지 확인하는 if문 코드를 작성합니다. 해당 if문은 공란일 경우 <span>태그를 보이도록하고 '체크 변수'에 false값을 대입합니다. 공란이 아닐경우 <span>태그를 숨기고 '체크 변수'에 true값을 대입합니다.
/* 공란 체크 */
if(bookName){
$(".bookName_warn").css('display','none');
bookNameCk = true;
} else {
$(".bookName_warn").css('display','block');
bookNameCk = false;
}
if(authorId){
$(".authorId_warn").css('display','none');
authorIdCk = true;
} else {
$(".authorId_warn").css('display','block');
authorIdCk = false;
}
if(publeYear){
$(".publeYear_warn").css('display','none');
publeYearCk = true;
} else {
$(".publeYear_warn").css('display','block');
publeYearCk = false;
}
if(publisher){
$(".publisher_warn").css('display','none');
publisherCk = true;
} else {
$(".publisher_warn").css('display','block');
publisherCk = false;
}
if(cateCode != 'none'){
$(".cateCode_warn").css('display','none');
cateCodeCk = true;
} else {
$(".cateCode_warn").css('display','block');
cateCodeCk = false;
}
if(bookPrice != 0){
$(".bookPrice_warn").css('display','none');
priceCk = true;
} else {
$(".bookPrice_warn").css('display','block');
priceCk = false;
}
if(bookStock != 0){
$(".bookStock_warn").css('display','none');
stockCk = true;
} else {
$(".bookStock_warn").css('display','block');
stockCk = false;
}
if(bookDiscount < 1 && bookDiscount != ''){
$(".bookDiscount_warn").css('display','none');
discountCk = true;
} else {
$(".bookDiscount_warn").css('display','block');
discountCk = false;
}
if(bookIntro != '<br data-cke-filler="true">'){
$(".bookIntro_warn").css('display','none');
introCk = true;
} else {
$(".bookIntro_warn").css('display','block');
introCk = false;
}
if(bookContents != '<br data-cke-filler="true">'){
$(".bookContents_warn").css('display','none');
contentsCk = true;
} else {
$(".bookContents_warn").css('display','block');
contentsCk = false;
}앞의 if문들을 통해서 각 항목의 상태에 따라 '체크 변수'값들이 대입되어 있습니다. 해당 '체크 변수'들이 모두 true일 때 <form>태그를 전송하는 코드가 동작하고, 한 항목이라도 false일 시 '상품 등록'버튼 메서드가 종료되도록 아래의 코드를 추가합니다. 기존의 <form> 전송 코드는 삭제합니다.
if(bookNameCk && authorIdCk && publeYearCk && publisherCk && cateCodeCk && priceCk && stockCk && discountCk && introCk && contentsCk ){
enrollForm.submit();
} else {
return false;
}4. 할인율 <input> 태그 수정
먼저 기존의 서버에 전송될 할인율 값을 저장할 <input>태그는 속성 값이 hidden인 type속성을 부여합니다. 그리고 사용자가 할인율 정수를 입력할 <input>태그를 추가합니다. 사용자가 입력을 위해 추가한 <input>태그엔 1~99값만 작성하도록 maxlength 속성을 부여하였습니다.
<input id="discount_interface" maxlength="2" value="0">
<input name="bookDiscount" type="hidden" value="0">사용자가 입력할 수 있는 input에 값이 입력되었을 때 바로 숨겨진 할인율 <input>태그에 소수의 값이 입력되도록 <script>태그 내에 아래의 코드를 추가해줍니다.
/* 할인율 Input 설정 */
$("#discount_interface").on("propertychange change keyup paste input", function(){
let userInput = $("#discount_interface");
let discountInput = $("input[name='bookDiscount']");
let discountRate = userInput.val(); // 사용자가 입력할 할인값
let sendDiscountRate = discountRate / 100; // 서버에 전송할 할인값
discountInput.val(sendDiscountRate);
});5. 할인 가격 출력
할인가격은 다음과 같은 식의 결과입니다.
상품 가격 * (1 - (할인율 / 100))
사용자가 상품의 가격과 상품의 할인율을 입력하였을 때 할인된 가격이 출력되도록 구현해보겠습니다. 먼저 할인 가격을 출력할 태그와 문자를 할인율 <input>태그 바로 아래 공간에 추가합니다.
<span class="step_val">할인 가격 : <span class="span_discount"></span></span><input>태그와 약간의 간격을 주기 위해 css파일에 아래의 코드를 추가하였습니다.
.step_val{ /* 할인 가격 문구 */
display: block;
padding-top: 5px;
font-weight: 500;
}- 할인율 입력란에 입력할 때 할인 가격이 출력되어야 하기 때문에 앞에서 추가한 메서드에 위의식을 활용하여 할인 가격이 출력되도록 코드를 작성합니다.
- '상품 가격', '상품 할인율'순으로 입력을 했다가 다시 '상품 가격'을 수정하는 경우도 있습니다. 이러한 상황에도 '할인 가격'을 바로 볼 수 있도록 메서드와 코드를 추가해줍니다.
let goodsPrice = $("input[name='bookPrice']").val(); // 원가
let discountPrice = goodsPrice * (1 - sendDiscountRate); // 할인가격
$(".span_discount").html(discountPrice);
$("input[name='bookPrice']").on("change", function(){
let userInput = $("#discount_interface");
let discountInput = $("input[name='bookDiscount']");
let discountRate = userInput.val(); // 사용자가 입력한 할인값
let sendDiscountRate = discountRate / 100; // 서버에 전송할 할인값
let goodsPrice = $("input[name='bookPrice']").val(); // 원가
let discountPrice = goodsPrice * (1 - sendDiscountRate); // 할인가격
$(".span_discount").html(discountPrice);
});6. 할인율 유효성 체크 수정
기존의 할인율 유효성 체크를 하는 코드를 할인율 입력란에 문자가 입력되는지 확인하도록 수정하겠습니다. 먼저 기존의 경고 문장을 수정해줍니다.
<span class="ck_warn bookDiscount_warn">1~99 숫자를 입력해주세요.</span><input>태그 값에 접근을 쉽게 하기 위해 선언한 변수는 보이지 않는 <input>태그를 가리키고 있습니다. 해당 변수 값을 사용자가 입력하는 <input>태그를 가리키도록 변경합니다.
let bookDiscount = $("#discount_interface").val();기존의 할인율 입력란이 유효한지 체크하는 if문의 조건을 아래와 같이 변경해줍니다.
if(!isNaN(bookDiscount)){이럴 경우 할인 가격에 NaN이 출력되기 때문에 할인 가격을 출력하는 코드에도 isNan을 사용하는 조건문을 가진 if문으로 감싸줍니다.
if(!isNaN(discountRate)){
}7. 외래키 추가
기존 테스트 편의를 위해서 '상품 테이블(test_book)'의 cateCode, authorId에 외래키를 추가하지 않았습니다. 기능을 완성했기 때문에 아래의 명령을 통해서 외래키 설정을 해줍니다. (아래의 코드를 실행 전 반드시 'test_bcate', 'test_author'에 없는 값을 가진 행은 삭제해야합니다.)
-- 외래키 추가
alter table test_book add foreign key (authorId) references test_author(authorId);
alter table test_book add foreign key (cateCode) references test_bcate(cateCode);8. 테스트
- 유효성 체크
- 할인율 유효성 체크
- 데이터 확인
