HTML -도서구매쇼핑몰

2022-01-21

** 한빛 페이지를 보고 참고하여 만들었습니다. !!! **

1. 메인페이지

미구현된 버튼들이 많음.
제일 위에 메인페이지 이동키와 로그인페이지로 이동하는 메뉴목록이 있다.
책목록을 보여주고 검색어를 통해 책을 검색할수있다. 그리고 총검색데이터가 보여진다.
페이지를 이동할수있고 최소, 최대 페이지로 이동 불가능하다.

list.ejs

<div id ="condition">
    <input type ="text" placeholder="검색어" id ="word" style="margin-right: 10px;">
    <button id ="search" style="margin-right: 15px;">검색</button>
    ▶검색데이터: 총<span id ="total"></span>건
</div>
<div id ="container"></div>
<script id="temp" type="text/x-handlebars-template">
    
    <div class ="box">
        <img src = "/images/" onclick="location.href='book/read?code='">
        <div id= "ti" class ="title"></div>
        <div id="ti2">원</div>
    </div>
    
</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();
    getBook();

    
    $("#word").on('keydown', function(e){
        if(e.keyCode==13) $("#search").click();
    });

    $("#search").on("click", function(){
        word=$("#word").val();
        page=1;
        getBook();
    });

    
    $("#prev").on("click",function(){
        page--;
        getBook();
    });

    $("#next").on("click",function(){
        page++;
        getBook();
    });

    function getBook(){
        $.ajax({
            type:"get",
            dataType: "json",
            url : "/book/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_book 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_book where title like ? order by code desc limit ?,8';
    db.get().query(sql,[word,start], function(err,rows){
    res.send({rows:rows, total:total});
  });
  });
});

한빛미디어

2. 로그인

<form name ="frm">
    <table id = "tb">
        <tr>
            <td class ="title"  width =300 colspan="2">
                <h4 style="color: white;">로그인</h4>
            </td>
        </tr>
        <tr>
            <td class= "title" width=100>아이디</td>
            <td width=200><input type ="text" name ="id"></td>
        </tr>
        <tr>
            <td class ="title"  >비밀번호</td>
            <td width =200><input type = "password" name ="pass"></td>
        </tr>
    </table>
    <div id ="buttons">
        <input type ="submit" value ="로그인 " class ="button">
        <input type ="reset" value ="비밀번호 찾기 " class ="button">
        <input type ="reset" value ="회원가입 " class ="newUser">

    </div>
</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",
                data : {id:id, pass:pass},
                url : "/users/login",
                success:function(data){
                    if(data.result==0){
                        alert("아이디가 존재하지않습니다.");
                        $(frm.id).focus();
                    }else if(data.result==2){
                        alert("비밀번호가 일치하지않습니다.");
                        $(frm.pass).focus();
                    }else {
                        alert("로그인 성공!")
                        location.href="/";
                    }
                }
            })
        }
    })
</script>

sql (로그인,로그아웃)

/* 로그인페이지 */
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});
  });
});

로그인 페이지. 비번찾기 회원가입 버튼은 미구현상태이다.
존재하지않는 아이디 , 비밀번호불일치 할시 로그인이되지않는다.

로그인

3.정보 페이지

read.ejs

<div id ="box">
    <div id ="left1">
        <div id ="image">
            <img src="/images/<%=vo.image%>">
        </div>
    </div>
    <div id ="right1">
        <div id ="info">
            <div id ="tit">
                <p style="padding: 10px; font-size: large;  font-family: 'IBMPlexSansKR-Regular'; font-weight: bold;">[도서판매] <%=vo.title%></p>
                <p style=" padding: 10px; margin-top :4px; font-family: 'IBMPlexSansKR-Regular'; font-size: small;">부자들만 아는 6가지 기적의 아침 습관</p>
            </div>
            <hr>
            <ui id ="ui">
                <li>저자 : 할 엘로드 , 데이비드 오스본</li>
                <li>번역 : 이주만</li>
                <li>출간 : 2010-04-01</li>
                <li>페이지 : 360쪽</li>
            </ui>
            <hr>
             <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> 
             <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>
        
        </div>
        <div id ="buttons">
            <button>장바구니</button>
            <button>바로구매</button>
        </div>
    </div>
</div>
<div style ="width:800px; height: 60px; margin:0px auto; margin-top:20px;">
    <button id ="btnInsert" style="float: right; background: yellowgreen;">리뷰쓰기</button>
</div>
<div id ="review"></div>
<script id="temp" type="text/x-handlebars-template">
    
    <div id ="d">
        <p id ="d1"> | </p>
        <p id ="d2">★★★★★</p>
        <p id ="d3"></p>
        
    </div>
    
    
</script>

<script>
    var code ="<%=vo.code%>";
    getBook();
    function getBook(){
        $.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 (상품정보페이지) book.js

//상품정보 페이지
router.get('/read', function(req,res){
  var code= req.query.code;
  var sql='select *, format(price,0) fprice from tbl_book 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});
  });
});

도서목록에대한 정보를 보여주는 페이지이다. 저자랑, 번역, 출간 페이지쪽은 db데이터에 들어가있지않아서 직접 글로 썼다. 상품금액과 상품이름은 상품마다 보여진다.

sql(리뷰작성) reviews.js

/* 특정도서의리뷰목록 */
router.get('/list', function(req, res, next) {
  var code =req.query.code;
  var sql ='select *,date_format(date,"%Y-%m-%d %T") fdate from tbl_review where code=? order by id desc';
  db.get().query(sql, [code], function(err,rows){
      res.send(rows);
  })
});

특정도서에 대한 리뷰목록이다. 글작성부분은 아직 구현하지않아서 작동하지 않는다.
나중에 별점주는 부분도 구현하고싶다.

리뷰목록

학습내용

메뉴바에 홈으로 가는 버튼과 로그인버튼
책을 검색어로 검색가능 총데이터도같이출력
책이름과 이미지 가격을 8개씩출력
이전 다음 버튼 구현
상품정보페이지 도서네임, 금액 보여짐
정보밑에 리뷰목록 기능

추가되었으면 좋앗을 내용

메뉴 홈버튼 처럼 로고를 눌러도 메인페이지로 이동
로고 옆에 있는 버튼들 구현
장바구니에 담고 구매페이지로 이동
상품 수량을 더할수있는 버튼 구현
아이디로 리뷰작성 가능한 기능
검색해서 페이지이동가능한 기능

Twitter Facebook LinkedIn

KangKkaem

HTML -도서구매쇼핑몰

1. 메인페이지

2. 로그인

3.정보 페이지

학습내용

추가되었으면 좋앗을 내용

공유하기

댓글남기기

참고

CSS - Grid

CSS - Flex

[오류]Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

git - github에 파일올리고 내려받기