HTML - 상품관리 프로그램
상품관리하는 프로그램이다. 상품 등록, 목록, 수정, 삭제 CURD 의 작업을 할수있다.
사전작업
- 먼저 mysql 에서 테이블을 만들고 값을 넣는다. ```sql use shopdb;
create table tbl_product( code char(4) primary key not null, name varchar(100) not null, price int default 0, image varchar(100) );
insert into tbl_product(code, name, price, image) values(‘P001’, ‘5단서랍장’, 50000, ‘img01.jpg’); insert into tbl_product(code, name, price, image) values(‘P002’, ‘원목싱글침대’, 800000, ‘img02.jpg’); insert into tbl_product(code, name, price, image) values(‘P003’, ‘싱글침대’, 800000, ‘img03.jpg’); insert into tbl_product(code, name, price, image) values(‘P004’, ‘4인용 가죽 쇼파’, 1800000, ‘img04.jpg’);
select * from tbl_product;
2. express -e ex06 파일을 생성한다.
3. mysql과 db를 연결하기 위한 파일을 생성한다.
db.js
```js
var mysql = require('mysql');
var conn;
exports.connect=function() {
conn=mysql.createPool({
connectionLimit:100,
host:'localhost',
user:'shop',
password:'pass',
database:'shopdb'
});
}
exports.get=function(){
return conn;
};
- app.js 에서 내가 만들 sql문 파일과 연결한다.
app.use('/product', require('./routes/product'));
db연결을위한 것도추가한다.
//db 연결
var db= require('./db')
db.connect(function(err){
console.log('DB연결완료');
});
1. 상품목록 (메인페이지)
- 메인페이지 ```js var express = require(‘express’); var router = express.Router();
/* GET home page. */ router.get(‘/’, function(req, res, next) { res.render(‘index’, { title: ‘상품관리’, pageName:’list.ejs’}); });
module.exports = router;
-> 상품관리하는 페이지로 목록을 보여준다.
```js
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/common.css' />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
</head>
<body>
<div id = "page">
<div id ="top">
<h1><%=title%></h1>
<img src="/images/back.jpg" id = "img" >
<center>
<div id = "menu">
<a href= "/" style="color: black ;">HOME |</a>
<a href="/product/insert" style="color: black ;">상품등록</a>
</div>
</center>
</div>
<div id = "center">
<%-include(pageName)%>
</div>
<div id = "bottom">
<h5>CopeyRight 2022. KangKkaem All Rights Reserved.</h5>
</div>
</div>
</body>
</html>
- 외부소스코드를 삽입하기위해서 center에 include 메서드를 넣어준다.
- 상품목록
list.ejs
<div id ="container"></div>
<script id="temp" type="text/x-handlebars-template">
<center>
<div class = "box">
<img src="" width =140 style=" margin-bottom: 4px;"
onclick="location.href='/product/read?code='">
<div></div>
<div></div>
<div>원</div>
</div>
</center>
</script>
<script>
Handlebars.registerHelper("getSrc", function(image){
if(image){
return "/upload/" + image;
}else {
return "http://placehold.it/170x130";
}
});
</script>
<div id ="buttons">
<button id = "prev">이전</button>
<span id ="curpage">1</span>
<button id = "next">다음</button>
</div>
<script>
var page = 1;
getProduct();
//이전버튼을 클릭한경우
$("#prev").on("click",function(){
page--;
getProduct();
});
//다음버튼을 클릭한경우.
$("#next").on("click",function(){
page++;
getProduct();
});
function getProduct(){
$.ajax({
type : "get",
dataType :"json",
url: "/product/list",
data:{page:page},
success:function(data){
var template = Handlebars.compile($("#temp").html());
$("#container").html(template(data));
//마지막페이지
var lastPage = Math.ceil(data.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>
- 만약에 파일이 있으면 선택한 파일을 출력하고 파일을 넣지않으면 placehold에서 불러온 사진을 보여줄것이다.
- 이전페이지와 다음페이지도 구현했다. sql문 limit 을 써서 사용했다. 만약에 페이지가 1이거나 lastpage와 같다면 넘어가지못하게 된다.
- 상품목록 sql
/* 상품목록 */
router.get('/list', function(req, res, next) {
var page =req.query.page;
var start =(page-1)*4;
//전체데이타갯수
var sql ='select count(*) total from tbl_product';
db.get().query(sql, function(err,rows){
var total = rows[0].total;
var sql = `select *, format(price,0) fprice from tbl_product order by code desc limit ${start},4`;
db.get().query(sql, function(err,rows){
res.send({rows:rows, total:total});
});
});
});
- limit으로 4페이지만 보여지게 했다. limit(시작점(나는 1로줬으니 0부터시작이다.), 갯수);
![상품관리]](/assets/images/상품관리.JPG)
2. 상품등록
- 상품등록페이지
<form name = "frm" method="post" action ="insert" enctype="multipart/form-data">
<table>
<tr>
<td class = "title" width=100>상품코드</td>
<td width = 500><input type = "text" name ="code" size=3 value=<%=code%> ></td>
</tr>
<tr>
<td class = "title" width=100>상품이름</td>
<td width = 500><input type = "text" name ="name" size=40></td>
</tr>
<tr>
<td class = "title" width=100>상품가격</td>
<td width = 500><input type = "text" name ="price" size=5>원</td>
</tr>
<tr>
<td class = "title" width=100>상품이미지</td>
<td width = 500>
<img src="http://placehold.it/170x150" width=150 id ="image">
<input type = "file" name ="image" size=50 style="display: none;">
</tr>
</table>
<div id = "buttons">
<input type = "submit" value="상품등록" class="button">
<input type = "reset" value="등록취소" class="button">
<input type = "button" value="목록" class="button">
</div>
</form>
<script>
var code=$(frm.code).val();
// submint 버튼을 클릭한경우
$(frm).on("submit", function(e){
e.preventDefault();
var name=$(frm.name).val();
var price=$(frm.price).val();
var image=$(frm.image).val();
if(name ==""){
alert("상품명을 입력하세요");
$(frm.name).focus();
}else if( price ==""){
alert("가격을 입력하세요");
$(frm.price).focus();
}else if( image ==""){
alert("이미지를 선택하세요");
}else {
alert(`${code}/${name}/${price}`);
if(!confirm("상품을 등록하실래요?")) return;
frm.submit();
}
});
//이미지 상자를 클릭한 경우
$("#image").on("click", function(){
$(frm.image).click();
});
</script>
<script>
//이미지 미리보기
$(frm.image).on("change", function(e){
var reader=new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload=function(e){
$("#image").attr("src", e.target.result);
}
});
</script>
- 상품이미지의 이미지 박스를 클릭하게되면 이미지 등록이 가능하게되어있다.
- 누르게되면 이미지 미리보게하는 기능도 구현되어있다.
- 수정 데이터를 적고 상품등록을 하게되면 목록에 상품이 보여진다.
- 목록 버튼은 메인페이지로 넘어가게된다.
sql문
//상품 등록 페이지 이동
router.get('/insert', function(req,res){
var sql = "select max(code) mcode from tbl_product";
db.get().query(sql, function(err,rows){
var mcode =rows[0].mcode;
var code='P' + (parseInt(1+mcode.substr(2))+1);
res.render('index', {title: '상품등록', pageName: 'insert.ejs', code:code});
});
});
//파일업로드
var multer = require('multer');
var path='./public/upload';
var upload=multer({
storage:multer.diskStorage({
destination:(req,res,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 code=req.body.code;
var price=req.body.price;
var name=req.body.name;
var image= req.file.filename;
var sql='insert into tbl_product(code,price,name,image) value(?,?,?,?)';
db.get().query(sql,[code,price,name,image], function(err,rows){
res.redirect('/');
});
});
- 상품 코드는 mcode 로 자동으로 1씩 더해질것이다.
3. 상품정보
- 상품정보 ```js
- 상품페이지 이동 sql
```js
//상품정보페이지 이동
router.get('/read', function(req,res){
var code =req.query.code;
var sql = 'select * from tbl_product where code=?';
db.get().query(sql, [code], function(err,rows){
res.render('index', {title:'상품정보', vo:rows[0], pageName:'read.ejs'});
});
});
- 메인페이지에서 상품 사진을 클릭하게 되면 나오게되는 상품정보페이지이다.
- 상품수정
// submint 버튼을 클릭한경우
$(frm).on("submit", function(e){
e.preventDefault();
var name=$(frm.name).val();
var price=$(frm.price).val();
if(name ==""){
alert("상품명을 입력하세요");
$(frm.name).focus();
}else if( price ==""){
alert("가격을 입력하세요");
$(frm.price).focus();
}else {
alert(`${code}/${name}/${price}`);
if(!confirm("상품을 수정하실래요?")) return;
frm.submit();
}
});
//이미지 상자를 클릭한 경우
$("#image").on("click", function(){
$(frm.image).click();
});
</script>
<script>
//이미지 미리보기
$(frm.image).on("change", function(e){
var reader=new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload=function(e){
$("#image").attr("src", e.target.result);
}
});
</script>
- 수정 sql
//DB에 상품정보 수정 var fs =require('fs'); router.post('/update',upload.single('image'), function(req,res){ var code = req.body.code; var name = req.body.name; var price = req.body.price; var image=req.body.oldImage; if(req.file!=null){ // 이미지가 바뀐경우 image= req.file.filename; //기존이미지가 있으면 삭제 if(req.body.oldImage!=''){ fs.unlink(path + '/'+ req.body.oldImage, function(err,rows){ if(err) throw err; }); } } var sql = 'update tbl_product set name=?, price=?, image=? where code=?'; db.get().query(sql, [name,price,image,code], function(err,rows){ res.redirect('/'); }); });
- 상품 삭제
<script>
//삭제버튼을 누른경우
$("#btnDelete").on("click", function(){
var name =$(frm.name).val();
var code =$(frm.code).val();
var image =$(frm.oldImage).val();
if(!confirm(`${name}을(를) 삭제하실래요?`)) return;
location.href=`/product/delete?code=${code}&image=${image}`;
});
- sql
댓글남기기