HTML -밀키트 쇼핑몰
밀키트를 판매하는 쇼핑몰을 만들었다. 로그인 로그아웃이 가능하고 로그인한 아이디로 상품후기를 작성할수있다.
1. 메인페이지
list.ejs
<div id ="condition">
<input type ="text" placeholder="검색어" id ="word">
<button id ="search">검색</button>
▶검색데이터: 총<span id ="total"></span>건
</div>
<div id = "container"></div>
<script id="temp" type="text/x-handlebars-template">
<center>
<div class ="box">
<img src ="/images/" onclick="location.href='food/read?code='">
<div>[]</div>
<div>원</div>
</div>
</center>
</script>
<div id ="buttons" style="margin-top: 20px;">
<button id ="prev">이전</button>
<span id="curpage"></span>
<button id ="next">다음</button>
</div>
<script>
var page=1;
var word=$("#word").val();
getFood();
$("#word").on('keydown', function(e){
if(e.keyCode==13) $("#search").click();
});
$("#search").on("click", function(){
word=$("#word").val();
page=1;
getFood();
});
$("#prev").on("click",function(){
page--;
getFood();
});
$("#next").on("click",function(){
page++;
getFood();
});
function getFood(){
$.ajax({
type:"get",
dataType:"json",
url:"/food/list",
data:{page:page, word:word},
success:function(data){
var template = Handlebars.compile($("#temp").html());
$("#container").html(template(data));
var lastPage=Math.ceil(data.total/8);
$("#curpage").html(page + "/" + lastPage);
$("#total").html(data.total);
if(page==1){
$("#prev").attr("disabled",true);
}else{
$("#prev").attr("disabled",false);
}
if(page==lastPage){
$("#next").attr("disabled",true);
}else{
$("#next").attr("disabled",false);
}
}
})
}
</script>
sql
/* 상품목록 */
router.get('/list', function(req, res, next) {
var page=req.query.page;
var start=(page-1)*8;
var word='%' + req.query.word + '%';
var sql="select count(*) total from tbl_food where title like ?";
db.get().query(sql, [word],function(err, rows){
var total=rows[0].total;
var sql='select *,format(price,0) fprice from tbl_food where title like ? order by code desc limit ?,8';
db.get().query(sql,[word,start],function(err, rows){
res.send({rows:rows, total:total});
});
});
});
- 총 검색데이터 갯수를 보여주고 상품을 검색해볼수도있다.
- 페이지 이동은 마지막수를 넣어서 lastPage를 보여주고 page==1을했고 lastPage 에서는 이동할수없게 설정해두었다.
2. 로그인 페이지
- 새로배우게된 내용 로그인 페이지이다.
login.ejs
<form name ="frm">
<table>
<tr>
<td class ="title" colspan="2">
<h1>로그인</h1>
</td>
</tr>
<tr>
<td class ="title" width=100>아이디</td>
<td width=300><input type="text" name ="id"></td>
</tr>
<tr>
<td class ="title" width=100>비밀번호</td>
<td width=300><input type="password" name ="pass"></td>
</tr>
</table>
<center>
<div id ="bottons">
<input type ="submit" value ="로그인" class ="botton">
</div>
</center>
</form>
<script>
$(frm).on("submit", function(e){
e.preventDefault();
var id = $(frm.id).val();
var pass = $(frm.pass).val();
if(id==""){
alert("아이디를 입력하세요!")
$(frm.id).focus();
}else if (pass ==""){
alert("비밀번호를 입력하세요!")
$(frm.pass).focus();
}else {
//로그인 체크
$.ajax({
type :"post",
dataType: "json",
url : "/users/login",
data: {id:id , pass:pass},
success:function(data){
if(data.result==0){
alert("아이디가 존재하지않습니다.");
$(frm.id).focus();
}else if (data.result==2){
alert("비밀번호가 일치하지않습니다!");
$(frm.pass).focus();
}else{
location.href="/";
}
}
})
}
});
</script>
sql user.js
/* GET users listing. */
router.get('/login', function(req, res, next) {
res.render('index', {pageName:'login.ejs', userid:req.session.userid});
});
//로그인 체크
router.post('/login', function(req,res){
var result=0; //아이디가 존재하지않음
var id =req.body.id;
var pass = req.body.pass;
var sql = 'select * from tbl_user where id=?';
db.get().query(sql,[id],function(err,rows){
if(rows.length==1 ){ //아이디가 존재함
if(rows[0].pass==pass){
result = 1; //성공
req.session.userid=id;
}else {
result =2; //실패 (비밀번호가 일치하지않음)
}
}
res.send({result:result});
});
});
//로그아웃
router.get('/logout', function(req,res){
req.session.destroy();
res.redirect('/');
});
- if 문을 짜서 아이디가 존재하고 결과가 1이면 로그인이 성공이고, 결과가 2이면 비밀번호가 일치하지않다고 alert를 띄어준다.
3. 상품정보 페이지
- 밀키트 판매 상품에대한 정보 페이지이다. 가격과 설명 그리고 장바구니 찜하기 바로구매 버튼이 구현되어있는데 실제로 클릭은 되지않는다. 그리고 상품정보 밑에는 리뷰목록들이 보여진다.
read.js
<div id ="box">
<div id ="left1">
<div id ="image">
<img src="/images/<%=vo.image%>">
</div>
</div>
<div id ="right1">
<div id ="info">
<p style="padding: 10px; font-size: large; font-family: 'IBMPlexSansKR-Regular'; font-weight: bold;">[밀키트도시락] <%=vo.title%></p>
<hr>
<p style=" margin-top :6px; font-family: 'IBMPlexSansKR-Regular'; font-size: small;">설명  통통한 새우와 올리브오일에 찍어 먹는 색다른 맛의 스페인 까수엘라 매력</p>
<p style=" margin-top :6px; font-family: 'IBMPlexSansKR-Regular'; font-size: small;">정가  <span style=" text-decoration: line-through;">22,000원</span></p>
<p style=" margin-top :6px; font-family: 'IBMPlexSansKR-Regular'; font-size: small;">정가  <%=vo.fprice%>원</p>
<div id ="price" >
<div style="float:left;">
<p id ="m">[밀키트도시락] <%=vo.title%><button style="width:50px;background: orange; border-radius: 0px; font-size: 10px;">쿠폰적용</button></div>
<div style="float : right; padding: 9px;">
 <%=vo.fprice%>원
</div>
</div>
<div id ="p1">
<div id ="left2">
<p style="padding: 10px; font-size:15px; margin-top: 10px; font-family: 'IBMPlexSansKR-Regular';">총 상품금액</p>
</div>
<div id ="right2" style="padding: 10px; font-size:15px; margin-top: 10px; font-family: 'IBMPlexSansKR-Regular';" >
<%=vo.fprice%>원
</div>
</div>
<hr>
<div id ="p1">
<div id ="left2">
<p style="padding: 10px; font-size:large; font-family: 'IBMPlexSansKR-Regular' ; font-weight: bold;">총 합계금액</p>
</div>
<div id ="right2" style="padding: 10px; font-size:large; font-family: 'IBMPlexSansKR-Regular' ; font-weight: bold;">
<%=vo.fprice%>원
</div>
</div>
<div id ="btn">
<button id ="btn1">장바구니</button>
<button id ="btn1">찜하기</button>
<button id ="btn2">바로구매</button>
</div>
</div>
</div>
</div>
<h2><%=vo.title%>의 리뷰 목록</h2>
<table>
<% if (userid==null){ %>
<tr>
<td><span id ="re">리뷰를 작성하시려면 <a href = "/users/login" style="color: red;">로그인</a>하세요!</span></td>
</tr>
<% }else { %>
<tr>
<td width =650>
<textarea rows="5" cols="90" id ="text"></textarea>
<button id ="btnInsert">글등록</button>
</td>
</tr>
<% } %>
</table>
<span style="float: left; height: 100px;">
<center>
<hr>
</center>
</div>
<table style="width: 100px;">
<tr>
<td id ="td1">
<span>상품후기</span>
</td>
</tr>
</table>
<center>
<hr style="width :70%">
</center>
<table id ="review"></table>
<script id="temp" type="text/x-handlebars-template">
<tr>
<td width =50 id ="td">★★★★★</td>
<td width =200 id ="td">
</td>
<td width=100 id ="td"></td>
<td width=200 id ="td"></td>
<td id ="td"> <button class ="small" rid="" style ="float: right;">삭제</button></td>
</tr>
</div>
</script>
<script>
var code = "<%=vo.code%>";
var uid="<%=userid%>";
getReview();
$("#btnInsert").on("click",function(){
var text = $("#text").val();
if(text==""){
alert("내용을 입력하세요!");
$("#text").focus();
}else {
if(!confirm("글을등록하실래요?")) return;
$.ajax({
type : "post",
data:{code:code, uid:uid, text:text},
url : "/review/insert",
success:function(){
$("#text").val("");
alert("글등록완료!");
getReview();
}
})
}
});
function getReview(){
$.ajax({
type:"get",
dataType: "json",
url:"/review/list",
data: {code:code},
success:function(data) {
var template = Handlebars.compile($("#temp").html());
$("#review").html(template(data));
}
});
}
</script>
sql (read)
//상품정보 페이지
router.get('/read', function(req,res){
var code= req.query.code;
var sql='select *, format(price,0) fprice from tbl_food where code=?';
db.get().query(sql,[code], function(err,rows){
var vo=rows[0];
res.render('index', {title:'상품정보',pageName:'read.ejs', vo:vo, userid:req.session.userid});
});
});
sql (review)
/* 리뷰목록 */
router.get('/list', function(req, res) {
var code =req.query.code;
var sql ='select *,date_format(date,"%Y-%m-%d-%T") fdate from tbl_review where code=?';
db.get().query(sql, [code], function(err,rows){
res.send(rows);
});
});
//db에 리뷰등록
router.post("/insert", function(req,res){
var code =req.body.code;
var uid = req.body.uid;
var text = req.body.text;
var sql ='insert into tbl_review(code,uid,text) values(?,?,?)';
db.get().query(sql,[code,uid,text],function(err,rows){
res.sendStatus(200);
});
});
학습내용
- 메인홈페이지에서 검색기능 , 총데이터 보여주는 기능
- 로그인 , 로그아웃 기능 ( 로그인한 아이디로 댓글작성가능)
- 페이지 이동 기능(최소,최대페이지 有)
- 상품정보
- 상품정보 안에서 리뷰목록
- 리뷰목록에서 로그인한 아이디로 글등록 가능 (삭제 미구현)
- 리뷰작성시 로그아웃상태에서 작성불가능하니 로그인하라는 메세지를 보여줌
댓글남기기