php+mysql 쇼핑몰 만들기 강좌 - #15. 제품 등록 시 Validation 체크 (필수값)

2022. 3. 31. 10:42

제품을 등록할때 꼭 입력해야하는 필수값이 있다. 기본적인 필수값은 html로 처리할 수 있고 어렵지 않으니 넘어가자. 한가지만 예를 보고.

<input type="text" class="form-control" name="name" id="name" required>

이렇게 간단하게 required 태그를이용해서 처리를 해줄수도 있다. 그 외에 제품을 등록할때 위 태그로 처리할 수 없는 validation 처리를 해보자.

/admin/product/product_up.php

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/header.php";

if(!$_SESSION['AUID']){

echo "<script>alert('권한이 없습니다.');history.back();</script>";

exit;

}

$query="select * from category where step=1";

$result = $mysqli->query($query) or die("query error => ".$mysqli->error);

while($rs = $result->fetch_object()){

$cate1[]=$rs;

}

<style>

.thst{

text-align: center;

vertical-align: middle;

}

</style>

<div style="text-align:center;padding:20px;"><H3>제품등록하기</H3></div>

<tbody>

<tr>

<th scope="row" class="thst">카테고리선택</th>

<td>

<?php

foreach($cate1 as $c){

<?php }?>

</select>

</div>

</select>

</div>

</select>

</div>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input class="form-check-input" type="checkbox" name="ismain" id="ismain" value="1">메인 

<input class="form-check-input" type="checkbox" name="isnew" id="isnew" value="1">신제품 

<input class="form-check-input" type="checkbox" name="isbest" id="isbest" value="1">베스트 

<input class="form-check-input" type="checkbox" name="isrecom" id="isrecom" value="1">추천 

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<th scope="row" class="thst">판매종료일</th>

<td>

</td>

</tr>

<tr>

<th scope="row" class="thst">제품상세설명</th>

<td>

</td>

</tr>

<tr>

</tr>

<th scope="row" class="thst">추가이미지</th>

<a href="javascript:;" onclick="jQuery('#upfile').click()" class="btn btn-primary">이미지선택</a>

</div>

</div>

</td>

</tr>

<tr>

</select>

</th>

<td>

<thead>

<tr>

</tr>

</thead>

</th>

<td>

</div>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</select>

</th>

<td>

<thead>

<tr>

</tr>

</thead>

</th>

<td>

</div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td>

</div>

</td>

</tr>

</tbody>

</table>

</form>

function wmsIns(){

$("#wmsArea").html("");

var addHtml="";

$(".opname1").each(function(idx){

var n1 = $(this).val();

$(".opname2").each(function(idx){

var n2 = $(this).val();

if(n1 && n2){

addHtml+='<li style="display:flex;padding-bottom:5px;">'+n1+' X '+n2+' <input type="text" class="form-control" style="max-width:100px;" name="wms[]" value="0">개</li>';

}else if(n1 && !n2){

addHtml+='<li style="display:flex;padding-bottom:5px;">'+n1+' <input type="text" class="form-control" style="max-width:100px;" name="wms[]" value="0">개</li>';

}else if(!n1 && n2){

addHtml+='<li style="display:flex;padding-bottom:5px;">'+n2+' <input type="text" class="form-control" style="max-width:100px;" name="wms[]" value="0">개</li>';

}else{

addHtml+='<li style="display:flex;padding-bottom:5px;"> <input type="text" class="form-control" style="max-width:100px;" name="wms[]" value="0">개</li>';

}

});

$("#wmsArea").append(addHtml);

}

function opt1cp(){

var addHtml=$("#optionTr1").html();

var addHtml="<tr>"+addHtml+"</tr>";

$("#option1").append(addHtml);

}

function opt2cp(){

var addHtml=$("#optionTr2").html();

var addHtml="<tr>"+addHtml+"</tr>";

$("#option2").append(addHtml);

}

function save(){

var markup = $('#summernote').summernote('code');

var contents=encodeURIComponent(markup);

$("#contents").val(contents);

if($('#summernote').summernote('isEmpty')) {

alert('상품 설명을 입력하세요.');

return false;

}

if(!$('#thumbnail').val()){

alert('썸네일을 등록하십시오.');

return false;

}

if(!$('#file_table_id').val()){

alert('추가 이미지를 최소한 한개 이상 등록하세요.');

return false;

}

var iswms=$("#wmsArea").find('li').length;

if(!iswms){

alert('재고를 입력하세요.');

return false;

}

var wmssum = 0;

$("input[name='wms[]']").each(function(){

wmssum = parseInt(wmssum) + parseInt($(this).val());

});

if(!wmssum){

alert('재고를 입력하세요.');

return false;

}

$(function(){

$('#summernote').summernote({

height: 300

});

$("#sale_end_date").datepicker({ dateFormat: 'yy-mm-dd' });

});

$("#cate1").change(function(){

var cate1 = $("#cate1 option:selected").val();

var data = {

cate1 : cate1

};

$.ajax({

async : false ,

type : 'post' ,

url : 'category2.php' ,

data : data ,

dataType : 'html' ,

error : function() {} ,

success : function(return_data) {

$("#cate2").html(return_data);

}

});

$("#cate2").change(function(){

var cate2 = $("#cate2 option:selected").val();

var data = {

cate2 : cate2

};

$.ajax({

async : false ,

type : 'post' ,

url : 'category3.php' ,

data : data ,

dataType : 'html' ,

error : function() {} ,

success : function(return_data) {

$("#cate3").html(return_data);

}

});

$("#upfile").change(function(){

var files = $('#upfile').prop('files');

for(var i=0; i < files.length; i++) {

attachFile(files[i]);

}

$('#upfile').val('');

});

function attachFile(file) {

var formData = new FormData();

formData.append("savefile", file);

$.ajax({

url: 'product_save_image.php',

data: formData,

cache: false,

contentType: false,

processData: false,

dataType : 'json' ,

type: 'POST',

success: function (return_data) {

if(return_data.result=="member"){

alert('로그인 하십시오.');

return;

}else if(return_data.result=="size"){

alert('10메가 이하만 첨부할 수 있습니다.');

return;

}else if(return_data.result=="image"){

alert('이미지 파일만 첨부할 수 있습니다.');

return;

}else if(return_data.result=="error"){

alert('첨부하지 못했습니다. 관리자에게 문의하십시오.');

return;

}else{

imgid = $("#file_table_id").val() + return_data.imgid + ",";

$("#file_table_id").val(imgid);

var html = "<div class='col' id='f_"+return_data.imgid+"'><div class='card h-100'><img src='/pdata/"+return_data.savename+"' class='card-img-top'><div class='card-body'><button type='button' class='btn btn-warning' onclick='file_del("+return_data.imgid+")'>삭제</button></div></div></div>";

$("#imageArea").append(html);

}

});

}

function file_del(imgid){

if(!confirm('삭제하시겠습니까?')){

return false;

}

var data = {

imgid : imgid

};

$.ajax({

async : false ,

type : 'post' ,

url : 'image_delete.php' ,

data : data ,

dataType : 'json' ,

error : function() {} ,

success : function(return_data) {

if(return_data.result=="member"){

alert('로그인 하십시오.');

return;

}else if(return_data.result=="my"){

alert('본인이 작성한 제품의 이미지만 삭제할 수 있습니다.');

return;

}else if(return_data.result=="no"){

alert('삭제하지 못했습니다. 관리자에게 문의하십시오.');

return;

}else{

$("#f_"+imgid).hide();

}

});

}

</script>

<?php

include $_SERVER["DOCUMENT_ROOT"]."/inc/footer.php";

하나씩 살펴보자. 우선 웹에디터인 섬머노트의 validation 처리부터 알아보자.

if($('#summernote').summernote('isEmpty')) {
            alert('상품 설명을 입력하세요.');
            return false;
        }

이 부분은 섬머노트의 고유기능이다. 저것말곤 방법이 없다. 그대로 따라한다.

그 다음은 썸네일 부분이다.

if(!$('#thumbnail').val()){
            alert('썸네일을 등록하십시오.');
            return false;
        }

특별한건 없지만 잘 모르고 있는 경우가 많다. 그냥 value가 있는지 확인하면 된다.

다음은 추가 이미지 부분이다.

if(!$('#file_table_id').val()){
            alert('추가 이미지를 최소한 한개 이상 등록하세요.');
            return false;
        }

추가 이미지를 등록하면 저 곳에 값을 저장한다. 저곳에 값이 없으면 등록하지 않은 것으로 판단한다. 물론 완전하진 않다. 이정도만 하도록 하자.

그 다음은 재고다. 재고는우선 재고입력이라는 버튼을 눌렀는지 부터 확인한다.

var iswms=$("#wmsArea").find('li').length;
        if(!iswms){
            alert('재고를 입력하세요.');
            return false;
        }

재고를 입력하는 부분에 html이 생성됐는지 확인한다.

그리고 재고가 최소 1개이상 입력됐는지 확인한다.

        var wmssum = 0;
        $("input[name='wms[]']").each(function(){
            wmssum = parseInt(wmssum) + parseInt($(this).val());
        });

        if(!wmssum){
            alert('재고를 입력하세요.');
            return false;
        }

재고값을 다 더해서 0보다 크지 않으면 재고를 입력하지 않은것으로 판단한다.

이 방법 말고도 있겠지만 나는 이렇게 했다. 따라해보고 더 좋은 방법도 찾아보자.

'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글

php+mysql 쇼핑몰 만들기 강좌 - #17. 엑셀파일을 이용해 제품 등록하기(옵션이 있는 경우) (0)	2022.04.08
php+mysql 쇼핑몰 만들기 강좌 - #16. 엑셀파일을 이용해 제품 등록하기(옵션이 없는 경우) (2)	2022.04.05
php+mysql 쇼핑몰 만들기 강좌 - #14 상품 등록시 트랜잭션 적용하기. (0)	2022.03.29
php+mysql 쇼핑몰 만들기 강좌 - #13 이미지 서버에 등록 feat. CDN (0)	2022.03.29
php+mysql 쇼핑몰 만들기 강좌 - #12 WMS 시스템 연동하기(재고관리) (0)	2022.03.26

아빠는개발자

php+mysql 쇼핑몰 만들기 강좌 - #15. 제품 등록 시 Validation 체크 (필수값)

'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글

+ Recent posts

티스토리툴바