본문 바로가기
ICIA 수업일지

2021.08.11 수업일지(Mysql, node.js)

by 주성씨 2021. 8. 11.

- VSC 터미널 명령어 순서

1. express -e (프로젝트명)
2. npm install
3. cd (프로젝트명) -> 프로젝트 폴더로 이동
4. npm install nodemon -g
5. npm install mysql
6. nodemon

 

- 웹 구현물 만들기

- 메뉴란을 생성하고 회사소개를 info.ejs를 만들어 보자.

C:\data\node\ex07\views\index.ejs

<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <div id="container">
    <div id="header">
      <h2>쇼핑몰관리자</h2>
    </div>
    <div id="menu">
      <ul>
        <li>공지사항</li>
        <li>상품관리</li>
        <li>회원관리</li>
      </ul>
    </div>
    <div id="content"></div>
    <div id="footer">
      <h3>Copyright. LJS. All rights reserved.</h3>
    </div>
  </div>
</body>

</html>

 

[new] C:\data\node\ex07\views\info.ejs

<h3>회사소개</h3>
<p>가슴에 할지니, 위하여 풍부하게 인생을 것이다. 군영과 오직 피가 열락의 보라. 끝에 크고 트고, 두손을 갑 것이다. 풀밭에 품고 눈에 위하여서. 날카로우나 더운지라 별과 끓는다. 되려니와, 소담스러운 그들의
    청춘 길을 목숨을 기관과 하였으며, 아니다. 같지 물방아 힘차게 끝에 듣는다. 가슴이 영락과 발휘하기 소담스러운 인도하겠다는 사막이다. 품었기 청춘 있음으로써 보이는 원대하고, 얼마나 인생의 교향악이다.
    무엇을 얼마나 평화스러운 물방아 인류의 같이, 있는가?</p>
<p>우리 아니더면, 어디 보이는 싶이 뛰노는 커다란 용기가 있다. 청춘이 그것을 보는 무엇이 위하여서. 그러므로 밝은 우리의 더운지라 방황하여도, 부패뿐이다. 그들은 우리의 있으며, 피어나기 같으며, 칼이다. 온갖
    것이 대중을 날카로우나 너의 있을 사막이다. 황금시대의 위하여서, 속에 청춘이 그들의 이것은 같이, 있다. 이 능히 새가 트고, 철환하였는가? 인생에 부패를 일월과 살았으며, 아름다우냐? 들어 이상 방지하는
    보내는 찬미를 인간의 발휘하기 있는가? 황금시대의 역사를 만천하의 과실이 못할 것은 눈에 산야에 것이다. 같으며, 무엇을 반짝이는 갑 아름다우냐?</p>
<p>오아이스도 현저하게 수 봄바람이다. 속잎나고, 무엇이 공자는 속에 힘있다. 따뜻한 같은 것은 품에 것이다. 긴지라 인간에 피부가 살았으며, 이상을 것은 대고, 끝에 보이는 봄바람이다. 충분히 그들은 꽃이 것은
    이는 말이다. 노년에게서 낙원을 끓는 어디 그들에게 보라. 우리 눈이 때까지 사막이다. 가치를 것이다.보라, 봄바람을 별과 아니다. 이상의 할지라도 그러므로 청춘에서만 이상의 것이다. 창공에 목숨이 찾아
    뜨고, 간에 열매를 심장의 인도하겠다는 그들에게 있다.</p>
<p>보이는 미묘한 크고 있다. 살았으며, 모래뿐일 이것이야말로 할지니, 사막이다. 그들은 때까지 할지니, 소리다.이것은 위하여 위하여 무엇을 이것이다. 어디 같이, 평화스러운 광야에서 그들의 작고 열락의 인간은
    그리하였는가? 굳세게 구하기 돋고, 얼마나 하여도 품었기 뭇 커다란 귀는 있으랴? 긴지라 따뜻한 인간의 그들의 위하여, 천자만홍이 교향악이다. 인간에 얼마나 청춘은 것이다. 그들은 위하여 투명하되 끓는 곳으로
    가치를 힘있다. 지혜는 천자만홍이 든 동산에는 이성은 행복스럽고 청춘의 때문이다.</p>

 

C:\data\node\ex07\views\index.ejs

    <div id="content">
      <%-include('info.ejs')%> <!--new-->
    </div>

ㄴ 추가

 

C:\data\node\ex07\public\stylesheets\style.css

@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body{
  font-family: 'Cafe24SsurroundAir';
}

#container {
  border: 1px solid greenyellow;
  width: 960px;
  padding: 20px;
  margin: 0px auto;
}

#header {
  border: 1px solid black;
  background-color: black;
  color: white;
  padding: 20px;
  margin-bottom: 10px;
}

#menu {
  border: 1px solid greenyellow;
  padding: 20px;
  margin-bottom: 10px;
}

#content {
  border: 1px solid greenyellow;
  padding: 20px;
  margin-bottom: 10px;
}

#footer {
  background-color: black;
  border: 1px solid black;
  color: white;
  padding: 20px;
}

 

 

- menu and content in center div
- menu 를 호버링 할 경우 CSS를 줘보자.

C:\data\node\ex07\views\index.ejs

    <div id="center">
      <div id="menu">
        <ul>
          <li>공지사항</li>
          <li>상품관리</li>
          <li>회원관리</li>
        </ul>
      </div>
      <div id="content">
        <%-include('info.ejs')%>
      </div>
    </div>

 

C:\data\node\ex07\public\stylesheets\style.css

@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body{
  font-family: 'Cafe24SsurroundAir';
}

#container {
  border: 1px solid rgb(0, 0, 77);
  width: 960px;
  padding: 20px;
  margin: 0px auto;
}

#header {
  border: 1px solid rgb(0, 0, 77);
  background-color: rgb(0, 0, 77);
  color: white;
  padding: 20px;
  margin-bottom: 10px;
}

#center {
  padding: 20px;
  border: 1px solid rgb(0, 0, 77);
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

#menu {
  margin-bottom: 10px;
  float: left;
  width: 150px;
}

#content {
  border-left: 1px solid rgb(0, 0, 77);
  padding: 20px;
  width: 700px;
  float: left;
}

h2, h3 {
  text-align: center;
}

li{
  padding: 10px;
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

li:hover{
  cursor: pointer;
  background-color: rgb(0, 0, 77);
  color: white;
  border-radius: 10px;
}

#footer {
  background-color: rgb(0, 0, 77);
  border: 1px solid rgb(0, 0, 77);
  color: white;
  padding: 20px;
}

 

 

- 메뉴 클릭시 컨텐츠 부분이 바뀌도록 해보자.

C:\data\node\ex07\routes\index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '쇼핑몰 관리', pageName: 'info.ejs' });
});

module.exports = router;

 

C:\data\node\ex07\views\index.ejs

      <div id="content">
        <%-include(pageName)%>
      </div>

 

- 공지사항을 뿌려줄(라우트) notice.js를 만들자.

[new] C:\data\node\ex07\routes\notice.js

var express = require('express');
var router = express.Router();

/* GET 공지사항. */
router.get('/', function (req, res, next) {
    res.render('index', {
        title: '공지사항',
        pageName: './notice/list.ejs' // new
    });
});

module.exports = router;

 

[new] C:\data\node\ex07\views\ [new] notice\list.ejs

<h3>공지사항목록</h3>

 

 

- 쇼핑몰관리자, 공지사항을 클릭하여 회사소개란과 공지사항란을 들어갈 수 있게 하자.

C:\data\node\ex07\views\index.ejs

<body>
  <div id="container">
    <div id="header"><a href="/"> <!--new-->
      <h2>쇼핑몰관리자</h2></a>
    </div>
    <div id="center">
      <div id="menu">
        <ul>
          <a href="/notice"><li>공지사항</li></a> <!--new-->
          <li>상품관리</li>
          <li>회원관리</li>
        </ul>
      </div>
      <div id="content">
        <%-include(pageName)%>
      </div>
    </div>
    <div id="footer">
      <h3>Copyright. LJS. All rights reserved.</h3>
    </div>
  </div>
</body>

 

[new] C:\data\node\ex07\db.js

var mysql = require('mysql');
var conn;
exports.connect = function () {
    conn = mysql.createPool({
        connectionLimit: 100,
        host: 'localhost',
        user: 'shopping',
        password: 'pass',
        database: 'shoppingdb'
    });
}
exports.get = function () {
    return conn;
};

 

C:\data\node\ex07\app.js

//2021.08.10
//데이타베이스 연결
var db = require('./db');
db.connect(function(err){
  if(err){
    console.log('DB error.......');
    process.exit(1);
  }else{
    console.log('DB Success......');
  }
});

 

C:\data\node\ex07\routes\notice.js

var express = require('express');
var router = express.Router();
var db = require('../db.js')

/* GET 공지사항 목록. */
router.get('/', function (req, res, next) {
    res.render('index', {
        title: '공지사항',
        pageName: './notice/list.ejs'
    });
});

// 공지사항 목록데이터
router.get('/list.json',function(req,res){
    var sql = 'select * from notice order by no desc limit 0,5;';
    db.get().query(sql, [], function(err, rows){
        res.send(rows);
    });
});

module.exports = router;

 

구현물

 

공지사항 목록데이터를 send하여 위와 같이 출력할 수 있다.

 

 

- 공지사항목록을 출력하고 CSS를 넣어보자.

C:\data\node\ex07\views\index.ejs

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <!--new-->
</head>

 

C:\data\node\ex07\views\notice\list.ejs

<h3>공지사항목록</h3>
<table id="tbl"></table>
<style> <!--new-->
    #tbl {
        width: 750px;
        border: 1px solid rgb(0, 0, 77);
        padding: 10px;
    }

    #tbl .row {
        border-bottom: 1px solid rgb(0, 0, 77);
        margin-bottom: 10px;
        cursor: pointer;
        padding: 10px;
    }

    #tbl .row:hover {
        background-color: rgb(230, 238, 255);
    }

    #tbl .title {
        width: 500px;
        text-overflow: ellipsis;
        padding: 10px;
    }
</style>

<script> <!--new-->
    getList();

    function getList() {
        $.ajax({
            type: 'get',
            url: '/notice/list.json',
            dataType: 'json',
            success: function (data) {
                var str = '';
                $(data).each(function () {
                    var no = this.no;
                    var title = this.title;
                    var date = this.fdate;
                    str += `<tr class="row">`;
                    str += `<td><div class="title">[${no}] ${title}</div></td>`;
                    str += `<td><div class="date">${date}</div></td>`;
                    str += `</tr>`;
                });
                $('#tbl').html(str);
            }
        });
    };
</script>

 

C:\data\node\ex07\routes\notice.js

var express = require('express');
var router = express.Router();
var db = require('../db.js')

/* GET 공지사항 목록. */
router.get('/', function (req, res, next) {
    res.render('index', {
        title: '공지사항',
        pageName: './notice/list.ejs'
    });
});

// 공지사항 목록데이터
router.get('/list.json',function(req,res){
    var sql = 'select *,date_format(wdate,"%Y-%m-%d %h:%i:%s") fdate  from notice order by no desc limit 0,5;'; //new
    db.get().query(sql, [], function(err, rows){
        res.send(rows);
    });
});

module.exports = router;

 

 

- CRUD 작업을 해보자.

C:\data\node\ex07\views\notice\list.ejs

<h3>공지사항목록</h3>
<a href="/notice/insert">글쓰기</a>
<table id="tbl"></table>
<style>

 

C:\data\node\ex07\routes\notice.js

// 공지사항 글쓰기 화면 출력
router.get('/insert',function(req,res){
    res.render('index',{title:'공지사항입력', pageName:'./notice/insert.ejs'})
});

 

[new] C:\data\node\ex07\views\notice\insert.ejs

<h3>공지사항입력</h3>
<form name="frm">
    <table style="width: 750px; margin-left: auto;">
        <tr>
            <td><input type="text" name="title" placeholder="제목을 입력하세요." size="70"></td>
        </tr>
        <tr>
            <td><textarea name="content" placeholder="내용을 입력하세요." rows="15" cols="72"></textarea></td>
        </tr>
    </table>
    <div style="width: 500px; margin: 0px auto; text-align: center;">
        <input type="submit" value="공지사항등록"/>
        <input type="reset" value="공지등록취소">
    </div>
</form>
<script>
    $(frm).on('submit',function(e){
        e.preventDefault();
        var title = $(frm.title).val();
        if(title==''){
            alert('제목을 입력하세요.');
            $(frm.title).focus();
            return;
        };
        
        var content = $(frm.content).val();
        if(content==''){
            alert('내용을 입력하세요.');
            $(frm.content).focus();
            return;
        };

        if(!confirm('공지를 등록하시겠습니까?')){
            return;
        };
    });
</script>

 

- 공지사항 등록하는 라우터 만들기

C:\data\node\ex07\routes\notice.js

// post로 공지사항 등록하는 라우터 만들기
router.post('/insert', function(req,res){
    var title = req.body.title;
    var content = req.body.content;
    var sql = 'insert into notice(title, content) values(?,?);';
    db.get().query(sql,[title, content],function(err,rows){
        res.sendStatus(200);
    });
});

 

C:\data\node\ex07\views\notice\insert.ejs

        // 공지사항등록
        $.ajax({
            type:'post',
            url:'/notice/insert',
            data:{'title':title, 'content':content},
            success:function(){
                alert('등록완료');
                location.href='/notice';
            }
        })

 

 

- row 클릭하여 글로 들어가기

C:\data\node\ex07\views\notice\list.ejs

<script>
    getList();

    function getList() {
        $.ajax({
            type: 'get',
            url: '/notice/list.json',
            dataType: 'json',
            success: function (data) {
                var str = '';
                $(data).each(function () {
                    var no = this.no;
                    var title = this.title;
                    var date = this.fdate;
                    str += `<tr class="row" onClick="location.href='/notice/read?no=${no}'">`;
                    str += `<td><div class="title">[${no}] ${title}</div></td>`;
                    str += `<td><div class="date">${date}</div></td>`;
                    str += `</tr>`;
                });
                $('#tbl').html(str);
            }
        });
    };
</script>

 

C:\data\node\ex07\routes\notice.js

// get 공지사항 read페이지
router.get('/read',function(req,res){
    var no = req.query.no;
    var sql=`select * from notice where no=?`;
    db.get().query(sql,[no],function(err,rows){
        res.send(rows[0]);
    });
});

 

C:\data\node\ex07\routes\notice.js

// get 공지사항 read페이지
router.get('/read', function (req, res) {
    var no = req.query.no;
    var sql = `select * from notice where no=?`;
    db.get().query(sql, [no], function (err, rows) { // new
        res.render('index', {
            title: '공지사항정보',
            pageName: './notice/read.ejs',
            notice: rows[0]
        });
    });
});

 

[new] C:\data\node\ex07\views\notice\read.ejs -> insert.ejs를 복사한다.

<h3>공지사항정보</h3>
<form name="frm">
    <table style="width: 750px; margin-left: auto;">
        <tr>
            <td><input type="text" name="title" value="<%=notice.title%>" size="70"></td>
        </tr>
        <tr>
            <td><textarea name="content" rows="15" cols="72"><%=notice.content%></textarea>
            </td>
        </tr>
    </table>

 

공지사항 클릭 출력물

 

- 삭제 버튼으로 글 삭제하기

C:\data\node\ex07\views\notice\read.ejs

        <input type="button" value="삭제" id="btnDelete"> <!--new-->
    </div>
</form>
<script> // new
    var no ="<%=notice.no%>";
    $('#btnDelete').on('click',function(){
        if(!confirm(no+'을(를) 삭제하시겠습니까?')){
            return;
        };
    });

 

C:\data\node\ex07\routes\notice.js

// post 공지사항 delete
router.post('/delete', function(req,res){
    var no = req.body.no;
    var sql = 'delete from notice where no=?;';
    db.get().query(sql,[no],function(err,rows){
        res.sendStatus(200);
    });
});

 

C:\data\node\ex07\views\notice\read.ejs

<script>
    var no ="<%=notice.no%>";
    $('#btnDelete').on('click',function(){
        if(!confirm(no+'을(를) 삭제하시겠습니까?')){
            return;
        };
        $.ajax({ // new
            type:'post',
            url:'/notice/delete',
            data:{'no':no},
            success:function(){
                alert('삭제가 완료되었습니다.');
                location.href='/notice';
            }
        });
    });

 

- submit 을 통해서 수정버튼을 클릭하여 제목 내용을 수정하도록 하자.

C:\data\node\ex07\views\notice\read.ejs

    <div style="width: 500px; margin: 0px auto; text-align: center;">
        <input type="submit" value="수정" /> <!--new-->
        <input type="reset" value="취소">
        <input type="button" value="삭제" id="btnDelete">
    </div>
<script>
    var no ="<%=notice.no%>";
    $('#btnDelete').on('click',function(){
        if(!confirm(no+'을(를) 삭제하시겠습니까?')){
            return;
        };
        $.ajax({
            type:'post',
            url:'/notice/delete',
            data:{'no':no},
            success:function(){
                alert('삭제가 완료되었습니다.');
                location.href='/notice';
            }
        });
    });

    $(frm).on('submit', function (e) { // renew
        e.preventDefault();
        var title = $(frm.title).val();
        if (title == '') {
            alert('제목을 입력하세요.');
            $(frm.title).focus();
            return;
        };

        var content = $(frm.content).val();
        if (content == '') {
            alert('내용을 입력하세요.');
            $(frm.content).focus();
            return;
        };

        if (!confirm('공지를 수정하시겠습니까?')) {
            return;
        };

        // 공지사항수정 // new
        $.ajax({
            type: 'post',
            url: '/notice/update',
            data: {
                'no':no,
                'title': title,
                'content': content
            },
            success: function () {
                alert('수정완료');
                location.href = '/notice';
            }
        })
    });
</script>

 

C:\data\node\ex07\routes\notice.js

// post 공지사항 update
router.post('/update', function(req,res){
    var no = req.body.no;
    var title = req.body.title;
    var content = req.body.content;
    var sql = 'update notice set title=?, content=? where no=?;';
    db.get().query(sql,[title,content,no],function(err,rows){
        res.sendStatus(200);
    });
});

 

 

- 상품 테이블 만들고 상품관리란 활성화 시키기.

- back to mysql

-- 2021.08.11 테이블 만들기
create table product(
   id int auto_increment primary key,
    title varchar(100),
    price int,
    image varchar(100)
);

insert into product(title,price,image)
values('명태냉면1인분', 8700, '/images/img01.jpg');
insert into product(title,price,image)
values('오징어볶음1인분', 8900, '/images/img02.jpg');
insert into product(title,price,image)
values('채끝 찹스테이크', 9100, '/images/img03.jpg');
insert into product(title,price,image)
values('플랫브레드루꼴라피자1인분', 8900, '/images/img04.jpg');
insert into product(title,price,image)
values('불락전골1인분', 10900, '/images/img05.jpg');
insert into product(title,price,image)
values('닭볶음탕1인분', 7800, '/images/img06.jpg');
insert into product(title,price,image)
values('자장밥1인분', 2800, '/images/img07.jpg');
insert into product(title,price,image)
values('황태양념구이1인분', 7800, '/images/img08.jpg');

select * from product;

 

- back to vsc

C:\data\node\ex07\app.js

// 2021.08.11 수업
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var noticeRouter = require('./routes/notice');
var productRouter = require('./routes/product');
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/notice', noticeRouter);
app.use('/product', productRouter);

 

new C:\data\node\ex07\routes\product.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '상품목록', pageName: './product/list.ejs' });
});

module.exports = router;

 

new C:\data\node\ex07\views\product\list.ejs

<h3>상품목록</h3>

 

C:\data\node\ex07\views\index.ejs

      <div id="menu">
        <ul>
          <a href="/notice" style="text-decoration: none;">
            <li>공지사항</li>
          </a>
          <a href="/product" style="text-decoration: none;">
            <li>상품관리</li>
          </a>
          <li>회원관리</li>
        </ul>
      </div>

출력물

 

C:\data\node\ex07\routes\product.js

- db에서 상품목록 get

var express = require('express');
var router = express.Router();
var db = require('../db'); // new

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '상품목록', pageName: './product/list.ejs' });
});

// 상품 목록 get // new
router.get('/list.json',function(req,res){
    var sql = 'select * from product';
    db.get().query(sql,[],function(err,rows){
        res.send(rows);
    });
});

module.exports = router;

 

- 웹에 출력

C:\data\node\ex07\views\product\list.ejs

<h3>상품목록</h3>
<div id="product"></div>

<script>
    getList();
    function getList(){
        $.ajax({
            type: 'get',
            url:'/product/list.json',
            dataType:'json',
            success:function(data){
                var str = '';
                $(data).each(function(){
                    var id = this.id;
                    var title = this.title;
                    var image = this.image;
                    var price = this.price;
                    str+=`<div class="item">`;
                    str+=`<img src="${image}" width=150 height=100/>`;
                    str+=`<div class="content">`;
                    str+=`<div class="id">${id}</div>`;
                    str+=`<div class="title">${title}</div>`;
                    str+=`<div class="price">${price}</div>`;
                    str+=`</div></div>`;
                });
                $('#product').html(str);
            }
        })
    }
</script>

 

CSS 전 출력물

 

<style>
    .item {
        overflow: hidden;
        box-shadow: 10px 10px 10px gray;
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 20px;
    }

    .item img {
        float: left;
    }

    .item .content {
        float: left;
        width: 300px;
        padding: 10px;
    }
</style>

 

 

- 최신상품 5개

C:\data\node\ex07\views\product\list.ejs

<script>
    getList();

    function getList() {
        $.ajax({
            type: 'get',
            url: '/product/list.json',
            dataType: 'json',
            success: function (data) {
                var str = '';
                $(data).each(function () {
                    var id = this.id;
                    var title = this.title;
                    var image = this.image;
                    var price = this.fprice; // new
                    str += `<div class="item">`;
                    str += `<img src="${image}" width=100px height=100px/>`;
                    str += `<div class="content">`;
                    str += `<div class="id">[${id}]</div>`;
                    str += `<div class="title">${title}</div>`;
                    str += `<div class="price">${price}원</div>`;
                    str += `</div></div>`;
                });
                $('#product').html(str);
            }
        })
    }
</script>

 

C:\data\node\ex07\routes\product.js

// 상품 목록 get // new
router.get('/list.json',function(req,res){
    var sql = 'select *,format(price, 0) fprice from product limit 0,5;'; // new
    db.get().query(sql,[],function(err,rows){
        res.send(rows);
    });
});

 

- 상품등록 테그 만들기

C:\data\node\ex07\views\product\list.ejs

<h3>상품목록</h3>
<a href="/product/insert">상품등록</a>
<div id="product"></div>

C:\data\node\ex07\routes\product.js

/* GET 상품등록. */
router.get('/insert', function(req, res, next) {
  res.render('index', { title: '상품등록', pageName: './product/insert.ejs' }); // insert.ejs 만들기
});

 

[new] C:\data\node\ex07\views\product\insert.ejs

<style>
    input[type=text]{
        border: 2px solid rgb(0, 0, 77);
        height: 25px;
        /* outline-style: none; */
}
</style>

<h3>상품등록</h3>
<hr>
<form name="frm">
    <table>
        <tr>
            <td>
                <input type="text" name="title" placeholder="상품명입력" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="title" placeholder="상품가격" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://placehold.it/250/250" id="image"/><br>
                <input type="file" name="image" accept="image/*"> <!--이미지파일만 선택-->
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <input type="submit" value="상품등록">
        <input type="reset" value="등록취소">
    </div>
</form>
<script>
    // 이미지가 바뀔때 미리보기
    $(frm.image).on('change', function (e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#image').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    });
</script>

 

 

- 상품등록시 상품명, 가격에 대한 유효성 검사 진행

C:\data\node\ex07\views\product\insert.ejs

    // submit 등록할때
    $(frm).on('submit', function (e) {
        e.preventDefault();
        var title = $(frm.title).val()
        if (title == '') {
            alert('상품명을 입력하세요.');
            $(frm.title).focus();
            return;
        };

        var price = $(frm.price).val();
        if (price == '') {
            alert('가격을 입력하세요.');
            $(frm.price).focus();
            return;
        };

        if (price.replace(/[0-9]/g, '') || price == ""){
            alert('가격은 숫자만 입력하세요.');
            $(frm.price).focus();
            return;
        };

        if(!confirm('상품을 등록하시겠습니까?')){
            return;
        };
    });

 

 

- 상품등록 하는 코드

C:\data\node\ex07\views\product\insert.ejs

<style>
    input[type=text] {
        border: 2px solid rgb(0, 0, 77);
        height: 25px;
        /* outline-style: none; */
    }
</style>

<h3>상품등록</h3>
<hr>
<form name="frm" enctype="multipart/form-data">
    <table>
        <tr>
            <td>
                <input type="text" name="title" placeholder="상품명입력" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="price" placeholder="상품가격" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://placehold.it/250/250" id="image" width="250" /><br>
                <input type="file" name="image" accept="image/*">
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <input type="submit" value="상품등록">
        <input type="reset" value="등록취소">
    </div>
</form>
<script>
    // submit 등록할때
    $(frm).on('submit', function (e) {
        e.preventDefault();
        var title = $(frm.title).val()
        if (title == '') {
            alert('상품명을 입력하세요.');
            $(frm.title).focus();
            return;
        };

        var price = $(frm.price).val();
        if (price == '') {
            alert('가격을 입력하세요.');
            $(frm.price).focus();
            return;
        };

        var image = $(frm.image).val();
        if (image == '') {
            alert('이미지를 등록하세요.');
            $(frm.image).focus();
            return;
        };

        if (price.replace(/[0-9]/g, '') || price == "") {
            alert('가격은 숫자만 입력하세요.');
            $(frm.price).focus();
            return;
        };

        if (!confirm('상품을 등록하시겠습니까?')) {
            return;
        };

        // 상품등록
        var formData = new FormData();
        formData.append('title', title);
        formData.append('price', price);
        formData.append('image', $(frm.image)[0].files[0]);

        $.ajax({
            type: 'post',
            url: '/product/insert',
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                alert('상품등록 성공!');
                location.href = "/product";
            }
        });

    });

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

ㄴ 이미지 업로드할때 위와 같이 form tag에 enctype을 넣어줘야 한다.

 

- 터미널에서 다음과 같이 입력한다.

^C일괄 작업을 끝내시겠습니까 (Y/N)? y

C:\data\node\ex07>npm install multer
+ multer@1.4.3
added 18 packages from 12 contributors and audited 82 packages in 3.447s
found 0 vulnerabilities


C:\data\node\ex07>

 

C:\data\node\ex07\routes\product.js

const {
  request
} = require('express');
var express = require('express');
var router = express.Router();
var db = require('../db'); // new

// post 상품등록
var multer = require('multer');
var uploadPath = './public/upload';
var path = require('path');

var upload = multer({
  storage: multer.diskStorage({
    destination: (req, file, done) => {
      done(null, uploadPath);
    },
    filename: (req, file, done) => {
      var ext = path.extname(file.originalname);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  })
});

// 상품 이미지 받아서 라우팅하기
// upload 위의 multer 변수명, single은 파일갯수 한개만, filename은 위의 이미지 경로
// upload.single('image') 로 이미지 처리를 위한 미들웨어를 생성
router.post('/insert', upload.single('image'), function (req, res) {
  var title = req.body.title;
  var price = parseInt(req.body.price);
  var image = `/upload/${req.file.filename}`;
  var sql = 'insert into product(title,price,image) values(?,?,?);';
  db.get().query(sql, [title, price, image], function (err, rows) {
    res.sendStatus(200);
  });
});

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

/* GET 상품목록페이지 출력. */
router.get('/', function (req, res, next) {
  res.render('index', {
    title: '상품목록',
    pageName: './product/list.ejs'
  });
});

// 상품 목록 get // new
router.get('/list.json', function (req, res) {
  var sql = 'select *,format(price, 0) fprice from product order by id desc limit 0,5;';
  db.get().query(sql, [], function (err, rows) {
    res.send(rows);
  });
});

module.exports = router;

 

C:\data\node\ex07\views\product\insert.ejs

<style>
    input[type=text] {
        border: 2px solid rgb(0, 0, 77);
        height: 25px;
        /* outline-style: none; */
    }
</style>

<h3>상품등록</h3>
<hr>
<form name="frm" enctype="multipart/form-data">
    <table>
        <tr>
            <td>
                <input type="text" name="title" placeholder="상품명입력" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="price" placeholder="상품가격" size="50">
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://placehold.it/250/250" id="image" width="250" /><br>
                <input type="file" name="image" accept="image/*">
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <input type="submit" value="상품등록">
        <input type="reset" value="등록취소">
    </div>
</form>
<script>
    // submit 등록할때
    $(frm).on('submit', function (e) {
        e.preventDefault();
        var title = $(frm.title).val()
        if (title == '') {
            alert('상품명을 입력하세요.');
            $(frm.title).focus();
            return;
        };

        var price = $(frm.price).val();
        if (price == '') {
            alert('가격을 입력하세요.');
            $(frm.price).focus();
            return;
        };

        var image = $(frm.image).val();
        if (image == '') {
            alert('이미지를 등록하세요.');
            $(frm.image).focus();
            return;
        };

        if (price.replace(/[0-9]/g, '') || price == "") {
            alert('가격은 숫자만 입력하세요.');
            $(frm.price).focus();
            return;
        };

        if (!confirm('상품을 등록하시겠습니까?')) {
            return;
        };

        // 상품등록
        var formData = new FormData();
        formData.append('title', title);
        formData.append('price', price);
        formData.append('image', $(frm.image)[0].files[0]);

        $.ajax({
            type: 'post',
            url: '/product/insert',
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                alert('상품등록 성공!');
                location.href = "/product";
            }
        });

    });

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

 

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.08.13 수업일지(Node.js, Mysql, multer)  (0) 2021.08.13
2021.08.12 수업일지(MySQL, node.js, multer)  (0) 2021.08.12
2021.08.10 수업일지(node.js, mysql)  (0) 2021.08.10
2021.08.09 수업일지(Mysql, node.js, html, css)  (0) 2021.08.09
2021.08.06 수업일지 {MySQL, html, css, java script(jQuery), node.js}  (0) 2021.08.07

관련글

티스토리툴바