상세페이지에서 주문페이지로 db 화면을 전환

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글
2022년 4월 2일 19:59 #30939

서영석
참가자

상세페이지 코드입니다.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/public/main.css">
<title>블루밍 주문 페이지</title>
</head>
<body>
<%- include('nav.html') %>

<div id ="container">
<form name= product method="post">
<tableborder=2 cellpadding=10 style="font-size:10pt;font-family:맑은 고딕">
<tr>
<tdalign=left width=100><fontsize=2><b>   상품이름:<%=data._상품이름%></b></fontsize=2></tdalign=left>
<td colspan=2 width=100><input type=hidden name="productname" value="productname"><size=2><%=data.상품이름%></size=2></td>
</tr>
<tr>
<tdalign=left width=100><fontsize=2><b>   판매가격:</b></fontsize=2></tdalign=left>
<td colspan=2 width=100><input type=hidden name="productprice" value="productprice"><size=2><%=data.판매가격%></size=2></td>
</tr>
<tr>

<td width=100 ><size=2><b>   상품수량:</b></size=2></td>
<td width=60 ><input type=text name="productcount" size=7 value="1" style="width:40;height:20" onblur="javascript:amountCheck();"> 개</td>
<td width=240 >
<input type=button value="▲" onClick="amountPlus();" style="width:18;height:16;"><br>
<input type=button value="▼" onClick="amountMinus();" style="width:18;height:16;" >
</td>
<button type="button" onclick="location.href='order';" class="btn btn-danger">장바구니</button>
<button type="button" onclick="submit" class="btn btn-danger">구매</button>
</tr>

</tableborder=2>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>



<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

주문페이지

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 주문서 작성하기</title>
<style>
.container { width:600px; margin:0 auto; }
ul { /* 순서없는 목록에 적용할 스타일 */ list-style-type: none; /* 불릿 없앰 */ }
label.title { /* class=title인 label에 적용할 스타일 */ font-weight: bold; /* 굵은 글자 */ width: 80px; /* 너비 80px */ float: left; /* 왼쪽부터 배치 */ }
div.centered { /* class=centered인 div에 적용할 스타일 */ text-align: center; /* 가운데 정렬 */ }
fieldset { /* 필드셋에 적용할 스타일*/ margin: 15px 10px; /* 상하 마진 15xp, 좌우 마진 10px */ }
fieldset legend { /* 필드셋의 제목 */ font-weight: bold; /* 굵은 글자 */ font-size: 18px; /* 글자 크기 18px */ color: purple; /* 글자색 자주 */ }
ul li { /* 목록의 각 항목 */ margin-bottom: 10px; /* 아래 마진 10px */ }
</style>
</head>
<body>
<div class="container">
<h1>상품 주문서</h1>
<form action="checklist" method="post" name="chlist_form">
<div class="form-group">
<label>이름</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label>연락처</label>
<input type="text" class="form-control" name="ph" id="ph">
</div>
<div class="form-group">
<label>배송주소</label>
<input type="text" class="form-control" name="addr" id="addr">주소만 입력
</div>
<div class="form-group">
<label>메모</label>
<input type="text" class="form-control" name="comment" id="comment">4~12자의 영문 대소문자와 숫자로만 입력
</div>
<div class="form-group">
<label>향수선택</label>
<input type="radio" name="good" value="mperfume" id="mperfume">남자향수
<input type="radio" name="good" value="wperfume" id="wperfume">여자향수
</div>
</div>
<div class="form-group">
<label>결제수단</label>
<input type="radio" name="pay" value="card" id="card">카드
<input type="radio" name="pay" value="cash" id="cash">현금
</div>
</div>
<div class="centered">
<button type="button" onclick="chlistform_check();" class="btn btn-danger">구입하기</button>
<input type="reset" value="다시 작성">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/JavaScript">
function chlistform_check() {
var name = document.getElementById("name");
var ph = document.getElementById("ph");
var addr = document.getElementById("addr");
var comment = document.getElementById("comment");
var mperfume = document.getElementById("mperfume");
var wperfume = document.getElementById("wperfume");
var card = document.getElementById("card");
var cash = document.getElementById("cash");
// var agree = document.getElementById("agree");

if (name.value == "") { //해당 입력값이 없을 경우 같은말: if(!uid.value)
alert("이름를 입력하세요.");
name.focus(); //focus(): 커서가 깜빡이는 현상, blur(): 커서가 사라지는 현상
return false; //return: 반환하다 return false: 아무것도 반환하지 말아라 아래 코드부터 아무것도 진행하지 말것
};

if (ph.value == "") {
alert("연락처를 입력하세요.");
ph.focus();
return false;
};

//핸드폰번호 첫/두번째 자리는 01로 시작하며 세번째 자리는 01+0/1/6/7/8/9 가 될 수 있다.
// 번호 사이사이 대쉬('-')는 사용자가 작성하든 안하든 무시한다.
// 번호 두번째 마디는 3-4자리가 가능하며 숫자는 0-9까지 들어올 수 있다.
// 마지막 마디는 마찬가지로 0-9까지 가능하며 4자리만 가능하다.정규식
var phCheck = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

if (!phCheck.test(ph.value)) {
alert("핸드폰번호 첫/두번째 자리는 01로 시작하며 세번째 자리는 01+0/1/6/7/8/9 가 될 수 있다.");
phCheck.focus();
return false;
};

if (addr.value == "") {
alert("배송주소을 입력하세요.");
addr.focus();
return false;
};

if (comment.value == "") {
alert("배송주소을 입력하세요.");
comment.focus();
return false;
};

if (!mperfume.checked && !wperfume.checked) { //둘다 미체크시
alert("향수을 선택해 주세요.");
mperfume.focus();
return false;
}

if (!card.checked && !cash.checked) { //둘다 미체크시
alert("결제을 선택해 주세요.");
female.focus();
return false;
}

// 입력 값 전송
document.chlist_form.submit(); //유효성 검사의 포인트
}

</script>
</body>
</html>

여기로 화면을 바꾸려면

app.get('/shop/:id/order', function(요청, 응답){
db.collection('product').findOne({_id : parseInt(요청.params.id)}, function(에러,결과){
console.log(결과);
응답.render('shop.ejs',{ data : 결과})
})
});

이렇게 하는게 맞는건가요?

TypeError: C:\Users\sys69\Desktop\appfume\views\shop.ejs:19
17| <tableborder=2 cellpadding=10 style="font-size:10pt;font-family:맑은 고딕">

18| <tr>

>> 19| <tdalign=left width=100><fontsize=2><b>   상품이름:<%=data._상품이름%></b></fontsize=2></tdalign=left>

20| <td colspan=2 width=100><input type=hidden name="productname" value="productname"><size=2><%=data.상품이름%></size=2></td>

21| </tr>

22| <tr>

Cannot read properties of null (reading '_상품이름')
at eval ("C:\\Users\\sys69\\Desktop\\appfume\\views\\shop.ejs":15:30)
at shop (C:\Users\sys69\Desktop\appfume\node_modules\ejs\lib\ejs.js:692:17)
at tryHandleCache (C:\Users\sys69\Desktop\appfume\node_modules\ejs\lib\ejs.js:272:36)
at View.exports.renderFile [as engine] (C:\Users\sys69\Desktop\appfume\node_modules\ejs\lib\ejs.js:489:10)
at View.render (C:\Users\sys69\Desktop\appfume\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\sys69\Desktop\appfume\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\sys69\Desktop\appfume\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\sys69\Desktop\appfume\node_modules\express\lib\response.js:1017:7)
at C:\Users\sys69\Desktop\appfume\app.js:162:6
at C:\Users\sys69\Desktop\appfume\node_modules\mongodb\lib\utils.js:510:9

이렇게 오류가 발생하여 질문을 남기게되었습니다.

2022년 4월 2일 23:41 #30963

codingapple
키 마스터

폼이 전송되면 /checklist로 post요청이 되는거같은데

서버에서 /checklist로 post요청오면 ejs파일 보내달라고 코드짜면 새로운 페이지 보여줄 수 있을듯요
글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

상세페이지에서 주문페이지로 db 화면을 전환

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png