HTML -상품관리2

2022-01-18

음식에 관련된 상품관리이다. 상품을 등록하고 상품수정하고 아래는 상품에 대한 리뷰도 등록할수있고 삭제할수있다.

1. 상품목록 (메인페이지)

상품들을 보여주고 이름과 가격을 나타낸다. 그리고 아래에는 페이지이동 버튼이있어서 이동이 가능하고 존재하는 페이지 만큼만 이동한다. 이동할수없으면 빨간색 버튼으로 표시해두었다.

list.ejs

<div id ="container"></div>
<script id="temp" type="text/x-handlebars-template">
    
    <div class = "box">
       
        <img src ="" width=190 onclick = "location.href='/food/read?code='">
        <div id ="title" >:</div>
        <div id ="title" >원</div>
    
    </div>
    
</script>
<div id = "buttons">
    <button id ="prev">이전</button>
    <span id = "curpage"></span>
    <button id = "next">다음</button>
</div>
<script>
    var 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},
            success:function(data){
                let template = Handlebars.compile($("#temp").html());
                $("#container").html(template(data));
                var total = data.total;
                var lastPage=Math.ceil(total/4);
                $("#curpage").html(page +"/"+lastPage);
                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>

class box를 만들어서 이미지와 이미지 코드와이름 그리고 가격을 안에다 두고 배치했다.
다음과 이전으로 가는 버튼이있고 최소,최대값에 도달하면 넘어가지않는 if문도 구현했다.

food.js

/* 상품목록. */
router.get('/list', function(req, res, next) {
  var page = req.query.page;
  var start = (page-1)*4;
  var sql = 'select count(*) total from tbl_food'; //전체데이터갯수
  db.get().query(sql, function(err,rows){
    var total = rows[0].total; //전체데이터를 넣어줬다.
    var sql ='select *,format(price,0) fprice from tbl_food order by code desc limit ?,4';
    db.get().query(sql, [start], function(err, rows){
        res.send({rows:rows , total:total}); 
    });
  });
});

상품목록을 보여주는 spl 문

밀키트

2. 상품등록

insert.ejs

<form name= "frm" method ="post" action="insert" enctype="multipart/form-data">

    <table>
        <tr>
            <td width =100 class ="title">상품이름</td>
            <td width =500><input type ="text" name ="title"></td>
        </tr>
        <tr>
            <td width =100 class ="title">상품상품가격</td>
            <td width =500><input type ="text" name ="price" size=3>원</td>
        </tr>
        <tr>
            <td width =100 class ="title">이미지</td>
            <td>    
                <img src ="http://placehold.it/250x270" id ="image" style=" cursor: pointer;">  
                <input type ="file" name ="image" style="display:none;" ></td>
        </tr>
    </table>
 
    <div id ="buttons">
        <input type ="submit" value="상품등록" class="button">
        <input type ="reset" value="등록취소" class="button">
        <input type ="button" value="목록" class="button" onclick="location.href='/'">
    </div>
</form>
<script>

    //submit 버튼을 클릭한경우
    $(frm).on("submit", function(e){
        e.preventDefault();
        var title=$(frm.title).val();
        var price=$(frm.price).val();
        var image=$(frm.image).val();
        if(title==""){
            alert("상품이름을 입력하세요!");
            $(frm.title).focus();
        }else if(price==""){
            alert("상품가격을 입력하세요!");
            $(frm.price).focus();
        }else if(image==""){
            alert("상품이미지를 선택하세요!");
        }else {
            if(!confirm("상품을 등록하실래요?")) return;
            frm.submit();
        }
    });
    //이미지를 클릭한경우
    $("#image").on("click",function(){
        $(frm.image).click();
    });

    //이미지 미리보기
    $(frm.image).on("change", function(){
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload=function(e){
            $("#image").attr("src", e.target.result);
        }
    });
</script>

이미지를 클릭한경우 이미지를 보여준다.

food.js

// 상품등록 페이지
router.get('/insert', function(req,res){
  res.render('index', {title:'상품등록', pageName:'insert.ejs'});
});

//파일업로드
var multer=require('multer');
var path='./public/images';
var upload=multer({
    storage:multer.diskStorage({
        destination:(req, file, done)=>{
            done(null, path);
        },
        filename:(req, file, done)=>{
            done(null, Date.now() + "_" + file.originalname);
        }
    })
});

//db에 상품등록
router.post('/insert',upload.single('image'), function(req,res){
  var title = req.body.title;
  var price = req.body.price;
  var image='/images/' + req.file.filename;
  var sql = 'insert into tbl_food(title,price,image) values(?,?,?)';
  db.get().query(sql, [title,price,image], function(err,rows){
    res.redirect('/');
  })
});

상품등록하는 sql 문 / 파일 업로드 multer

밀키트2

3. 상품정보

<form name= "frm" method ="post" action="update" enctype="multipart/form-data">

    <table>
        <tr>
            <td width =100 class ="title">상품코드</td>
            <td width =500><input type ="text" name ="code" size =3 value="<%=vo.code%>" readonly></td>
        </tr>
        <tr>
            <td width =100 class ="title">상품이름</td>
            <td width =500><input type ="text" name ="title" size=30 value="<%=vo.title%>"></td>
        </tr>
        <tr>
        <tr>
            <td width =100 class ="title">상품가격</td>
            <td width =500><input type ="text" name ="price" size=10 value="<%=vo.price%>">원</td>
        </tr>
        <tr>
        <td width =100 class ="title">이미지</td>
        <td>    
            <img src ="<%=vo.image%>" id ="image" style=" cursor: pointer;">  
            <input type ="file" name ="image"  style="display:none;"></td>
            <input type ="hidden" name ="oldImage" value="<%=vo.image%>">
        </tr>
    </table>
 
    <div id ="buttons">
        <input type ="submit" value="상품수정" class="button">
        <input type ="button" value="상품삭제" class ="button" id ="btnDelete">
        <input type ="reset" value="등록취소" class="button">
        <input type ="button" value="목록" class="button" onclick="location.href='/'">

    </div>
</form>
<script>
    var code = "<%=vo.code%>";

    //삭제버튼을 누른경우
    $("#btnDelete").on("click", function(){
        var name =$(frm.name).val();
        var code =$(frm.code).val();
        var image ="<%=vo.image%>";
        if(!confirm(`${name}을(를) 삭제하실래요?`)) return;
        location.href=`/food/delete?code=${code}&image=${image}`;
    });

    //submit 버튼을 클릭한경우
    $(frm).on("submit", function(e){
        e.preventDefault();
        var title=$(frm.title).val();
        var price=$(frm.price).val();
        var image=$(frm.image).val();
        if(title==""){
            alert("상품이름을 입력하세요!");
            $(frm.title).focus();
        }else if(price==""){
            alert("상품가격을 입력하세요!");
            $(frm.price).focus();
        }else {
            if(!confirm("상품을 수정하실래요?")) return;
            frm.submit();
        }
    });
    //이미지를 클릭한경우
    $("#image").on("click",function(){
        $(frm.image).click();
    });

    //이미지 미리보기
    $(frm.image).on("change", function(){
        var reader = new FileReader();
        reader.readAsDataURL(this.files[0]);
        reader.onload=function(e){
            $("#image").attr("src", e.target.result);
        }
    });
</script>

상품목록에서 사진을 클릭하면 보이는 상품정보이다.
버튼으로 수정과 삭제가가능하고 목록으로 돌아갈수도있다.

food.js

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

var fs = require('fs');
//DB에 상품정보 수정
var fs=require('fs');
router.post('/update', upload.single('image'), function(req, res){
    var code=req.body.code;
    var title=req.body.title;
    var price=req.body.price;
    var image=req.body.oldImage;
    
    if(req.file!=null){ //새로운 이미지로 바뀐경우
        fs.unlink('./public' + image, function(err){ //예전이미지 삭제
            if(err) throw err;
        });
        image='/images/' + req.file.filename;
    }

    var sql='update tbl_food set title=?,price=?,image=? where code=?';
    db.get().query(sql,[title,price,image,code], function(err, rows){
        res.redirect('/');
    });
});

//DB에서 상품정보 삭제
router.get('/delete', function(req,res){
  var code =req.query.code;
  var image=req.query.image;
  if(image!=''){
    fs.unlink('./public' + image, function(err){ //예전이미지 삭제
      if(err) throw err;
  });
  }
  var sql ='delete from tbl_food where code=?';
  db.get().query(sql, [code], function(err,rows){
    res.redirect('/');
  });
});

밀키트3

4. 리뷰등록

read.ejs

<hr/>
<h3><%=vo.title%>의 상품 리뷰</h3>
<center>
<table>
    <tr>
        <td width=700>
            <textarea rows="4" cols="90" id ="text"></textarea>
            <button id ="btnInsert">전송</button>
        </td> 
    </tr>
</table>

<table id ="review"></table>
</center>
<script id="temp" type="text/x-handlebars-template">
    
        <tr>
            <td width= 100  class = "title">작성자</td>
            <td width=200></td>
            <td width= 100  class = "title">작성일</td>
            <td width=200></td>
        </tr>
        <tr class ="row">
            <td colspan= "4">
                <span style="font-weight: bolder;">[]</span>
                
                <button class ="small" rid="" style ="float: right;">삭제</button>
            </td>
        </tr>
        
</script>
</div>
<script>
var code = "<%=vo.code%>";
    //삭제버튼을 클릭한경우 
    $("#review").on("click", "tr .small", function(){
        var id =$(this).attr("rid");
        if(!confirm(`${id}을 삭제하실래요?`)) return;
        $.ajax({
            type :"get",
            url: "/review/delete",
            data: {id:id},
            success:function(){
                alert("리뷰삭제 성공!");
                getReview();
            }
        });
    });

    $("#btnInsert").on("click",function(){
        var text = $("#text").val();
        var uid = "user03";   //원래는 로그인하는걸로해야하는데 임의로 지정
        if(text==""){
            alert("내용을 입력하세요!")
            $("#text").focus();
        }else {
            if(!confirm("리뷰를 등록하실래요?")) return;
            $.ajax({
                type: "post",
                url : "/review/insert",
                data : {code:code, uid:uid, text:text},
                success:function(){
                    alert("리뷰등록성공");
                    getReview();
                    $("#text").val("");
                    alert(`${text}`);
                }
            });
        }
    });

    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>

review.js

/* 리뷰목록 */
router.get('/list', function(req, res, next) {
  var code =req.query.code;
  var sql ='select *,date_format(date,"%Y-%m-%d") 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);  //성공이라는뜻
  });
});

//DB리뷰삭제
router.get('/delete',function(req,res){
  var id = req.query.id;
  var sql ='delete from tbl_review where id=?';
  db.get().query(sql,[id], function(err,rows){
    res.sendStatus(200);
  });

});

uid는 원래는 로그인하는걸로해야하는데 일단 임의로 지정 해뒀다.

밀키트4

Twitter Facebook LinkedIn

KangKkaem

HTML -상품관리2

1. 상품목록 (메인페이지)

2. 상품등록

3. 상품정보

4. 리뷰등록

공유하기

댓글남기기

참고

CSS - Grid

CSS - Flex

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

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