본문 바로가기
ICIA 수업일지

2021.08.09 수업일지(Mysql, node.js, html, css)

by 주성씨 2021. 8. 9.

https://becomefullstackdev.tistory.com/47

 

 

1. node. js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 홈페이지에 들어가서 자신의 운영체제에 맞는 버젼을 다운받아서..

becomefullstackdev.tistory.com

 

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

// 2021.08.09 라우터 지정 경로
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 라우터 지정문
app.use('/', indexRouter);
app.use('/users', usersRouter);

 

C:\data\node\ex05\public\images

ex02에서 했던 이미지 복사

foods.zip
0.37MB

 

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

<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="container">
    <div id="header">
      <h1>오늘의 PJ 제목</h1>
    </div>
    <div id="content">오늘의 PJ 메인</div>
    <div id="footer">
      <h3>Copyright. 오늘의 PJ는 뭘까요.</h3>
    </div>
  </div>
</body>

</html>

 

[new] C:\data\node\ex05\public\stylesheets\style.css

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

#header {
  padding: 20px;
  border: 1px solid green;
  margin-bottom: 10px;
}

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

#footer {
  padding: 20px;
  border: 1px solid green;
}

 

- Go to Mysql

- DB 및 유저 생성, 권한 부여

#2021.08.09
#데이터 베이스 생성
create database fooddb;
#유저 생성
create user 'food'@'localhost' identified by 'pass';
#유저에게 데이터베이스 권한 부여
grant all privileges on fooddb.* to 'food'@'localhost';

 

- 테이블 생성

create table product(
   id int auto_increment primary key,
    title varchar(100),
    price int,
    image varchar(100)
);

desc product;

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');

 

- back vsc

- 라우터 등록

// 2021.08.09 라우터 지정 경로
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/product'); // new
// 라우터 지정문
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/product', productRouter); // new

 

- DB 연결_1

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

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

 

- DB 연결_2

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

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

 

[new] C:\data\node\ex05\routes\product.js

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var sql = 'select * from product limit 0,4;';
    db.get().query(sql,[],function(err,rows){
        var data = rows;
        sql = 'select count(*) cnt from product;';
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

 

- back mysql

- 더미 데이터를 만들어준다.

insert into product(title, price, image)
select title, price, image from product;

확인

 

확인

 

- Back to VSC

- 4, 8, 12, 16 순으로 정렬 및 버튼 활성화 비활성화 page값 변경

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

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

#header {
  padding: 20px;
  border: 1px solid green;
  margin-bottom: 10px;
}

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

#footer {
  padding: 20px;
  border: 1px solid green;
}

h3{
  text-align: center;
}

#product {
  width: 900px;
  margin: 0px auto;
  overflow: hidden;
}

.box {
  width: 200px;
  float: left;
  margin-left: 10px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid green;
}

.box .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
  font-size: 18px;
}

 

C:\data\node\ex05\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">
      <img src="/images/download.jpg" width=900>
    </div>
    <div id="content">
      <h3>상품목록</h3>
      <div style="width: 900px; padding: 10px; border: 1px solid green; margin-bottom: 10px;">
        <select id="number" style="height: 25px;">
          <option value=4>4개씩출력</option>
          <option value=8>8개씩출력</option>
          <option value=12>12개씩출력</option>
          <option value=16>16개씩출력</option>
        </select>
        <span id="count"></span>
      </div>
      <div id="product"></div>
    </div>
    <div id="footer">
      <h3>Copyright. 인공별곡. All rights reserved</h3>
    </div>
  </div>
</body>
<script>
  getList();

  function getList() {
    $.ajax({
      type: 'get',
      url: '/product',
      dataType: 'json',
      success: function (data) {
        var str = "";
        $(data.rows).each(function () {
          var id = this.id;
          var title = this.title;
          var price = this.fprice;
          var image = this.image;
          str += `<div class=box>`;
          str += `<img src="${image}" width=170 height=170/>`;
          str += `<div class="title">${title}</div>`;
          str += `<div class="price">${price}</div>`;
          str += `</div>`;
        });
        $('#product').html(str);
        var count = data.count;
        $('#count').html(`전체상품의 수는 : <b>${count}</b>`);
      }
    });
  };
</script>

</html>

 

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

<script>
  getList();

  // id number 가 chage될때마다
  $('#number').on('change',function(){
    getList();
  });
  function getList() {
    var number=$('#number').val();
    $.ajax({
      type: 'get',
      url: '/product',
      dataType: 'json',
      data : {'number':number}, // new

 

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

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var number = parseInt(req.query.number);
    var sql = 'select *, format(price,0) fprice from product limit 0,?;';
    db.get().query(sql,[number],function(err,rows){
        var data = rows;
        sql = 'select count(*) cnt from product;';
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

 

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

<script>
  // 전역변수
  var page = 1; // 현재페이지
  var number=4; // 한페이지 출력갯수

  getList();

  // id number 가 chage될때마다
  $('#number').on('change',function(){
    page=1;
    getList();
  });

  // press prev button
  $('#prev').on('click',function(){
    page--;
    getList();
  });
  
  // press next button
  $('#next').on('click',function(){
    page++;
    getList();
  });

 

        $('#product').html(str); // 상품목록
        var count = data.count; // 상품수
        var lastPage=Math.ceil(count/number); // 전체페이지수
        $('#page').html(`${page}/${lastPage}`);
        $('#count').html(`전체상품의 수는 : <b>${count}</b>`);

        // 첫번째 페이지 마지마가 페이지 버튼 비활성화
        if(page==1)$('#prev').attr('disabled', true);
        else $('#prev').attr('disabled', false);

        if(page==lastPage)$('#next').attr('disabled', true);
        else $('#next').attr('disabled', false);

 

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

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var number = parseInt(req.query.number);
    var page = parseInt(req.query.page); // new
    var start = (page - 1)*number; // new
    var sql = 'select *, format(price,0) fprice from product limit ?,?;'; // new
    db.get().query(sql,[start, number],function(err,rows){ // new
        var data = rows;
        sql = 'select count(*) cnt from product;';
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

중간 산출물

 

- order by 정렬

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

        <span id="count"></span>
      </div>
      <div id="product"></div>
      <div style="width: 900px; text-align: center; margin: 10px;">
        <button id="prev" disabled="true">&lt;</button>
        <span id="page">1/25</span>
        <button id="next">&gt;</button>
      </div>
    </div>

 

  // id order 가 chage될때마다 1 page로
  $('#order').on('change',function(){
    page=1;
    getList();
  });

 

 function getList() {
    number=$('#number').val();
    order=$('#order').val(); // new
    $.ajax({
      type: 'get',
      url: '/product',
      dataType: 'json',
      data : {'number':number, 'page':page, 'order':order}, // new

 

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var number = parseInt(req.query.number);
    var page = parseInt(req.query.page);
    var start = (page - 1)*number;
    var order = req.query.order; // new
    var sql = `select *, format(price,0) fprice from product order by ${order} limit ?,?;`; // new
    db.get().query(sql,[start, number],function(err,rows){
        var data = rows;
        sql = 'select count(*) cnt from product;';
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

 

- 검색어를 입력하여 검색하고 페이지, 라스트페이지, 전체상품수 변경

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

        <span id="count"></span>
        <input type="text" id="search" placeholder="검색어를 입력하세요." style="float: right; height: 25px;">

 

  // 키를 눌렀을 때 페이지를 초기화 및 리스트 출력
  $('#search').on('keypress',function(e){
    if(e.keyCode==13){
      page=1;
      getList();
    }
  });

 

  function getList() {
    number=$('#number').val();
    order=$('#order').val();
    search=$('#search').val(); // new
    $.ajax({
      type: 'get',
      url: '/product',
      dataType: 'json',
      data : {'number':number, 'page':page, 'order':order, 'search':search}, // new

 

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var number = parseInt(req.query.number);
    var page = parseInt(req.query.page);
    var start = (page - 1)*number;
    var order = req.query.order;
    var search = `%${req.query.search}%`; // new
    var sql = `select *, format(price,0) fprice from product where title like ? order by ${order} limit ?,?;`; // new
    db.get().query(sql,[search, start, number],function(err,rows){ // new
        var data = rows;
        sql = 'select count(*) cnt from product where title like ?;';
        db.get().query(sql,[search],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

 

 

- best product

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

// get best product
router.get('/best',function(req,res){
    var sql = 'select *, format(price,0) fprice from product order by id limit 0, 8;';
    db.get().query(sql,[],function(err,rows){
        res.send(rows);
    });
});

 

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

      <hr>
      <h3>베스트 상품</h3>
      <div id="slider">
        <!--5개 출력 ; 보여지는 부분-->
        <div id="items"></div>
        <!--8개 출력-->
      </div>
      <div style="width: 660px; margin:0px auto; text-align: center; margin-top: 10px;">
        <button id="lt">&lt;</button>
        <button id="gt">&gt;</button>
      </div>

 


  // gt 방향으로 인터벌 이동
  var repeat = setInterval(() => {
    $('#gt').click();
  }, 2500);

  $('#gt').on('click', function () {
    clearInterval(repeat);
    $('#items .item:first').animate({
      marginLeft: -110
    }, 100, function () {
      $(this).appendTo($('#items')).css({
        marginLeft: 10
      });
    });
    repeat = setInterval(() => {
      $('#gt').click();
    }, 2500);
  });

  $('#lt').on('click', function () {
    clearInterval(repeat);
    $('#items .item:first').animate({
      marginLeft: 110
    }, 100, function () {
      $(this).before($('#items .item:last')).css({
        marginLeft: 10
      });
    });
    repeat = setInterval(() => {
      $('#gt').click();
    }, 2500);
  });

  // best 상품 출력
  $.ajax({
    type: 'get',
    url: '/product/best',
    dataType: 'json',
    success: function (data) {
      var str = "";
      $(data).each(function () {
        var image = this.image;
        var id = this.id;
        var title = this.title;
        var price = this.fprice;
        str += `<div class="item">`;
        str += `<img src="${image}" width=100 height=100/>`;
        str += `<div class="title">${id} : ${title}</div>`;
        str += `<div class="price">${price}원</div>`;
        str += `</div>`;
      });
      $('#items').html(str);
    }
  });

 

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

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

body{
  font-family: 'SF_HambakSnow';
}

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

#header {
  padding: 20px;
  border: 1px solid green;
  margin-bottom: 10px;
}

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

#footer {
  padding: 20px;
  border: 1px solid green;
}

h3{
  text-align: center;
}

#product {
  width: 900px;
  margin: 0px auto;
  overflow: hidden;
}

.box {
  width: 200px;
  float: left;
  margin-left: 10px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid rgb(226, 255, 226);
  background-color: rgb(226, 255, 226);
}

.box .title, .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
  font-size: 15px;
}

#slider {
  position: relative;
  overflow: hidden;
  width: 660px;
  height: 150px;
  background-color: rgb(226, 255, 226);
  margin: 0px auto;
}

#items {
  position: absolute;
  overflow: hidden;
  width: 880px;
}

#items .item {
  width: 100px;
  float: left;
  margin-left: 10px;
}

 

 

- 공지사항 추가

- back mysql

create table notice(
   no int auto_increment primary key,
    title varchar(200) not null,
    content varchar(2000),
    wdate datetime default now()
);

insert into notice(title, content)
values('안녕하세요 카카오입니다.','카카오 서비스를 이용해 주시는 회원 여러분께 감사드립니다.위치정보관리책임자 변경에 대해 안내드리기 위하여, 카카오 서비스 약관의 내용이 2021년 8월 9일자로 변경될 예정임을 안내드립니다.');
insert into notice(title, content)
values('위치기반서비스 이용약관 변경 안내','안녕하세요.카카오의 서비스를 이용해주시는 회원 여러분께 감사드리며, 위치기반서비스 이용약관 변경에 관한 안내 말씀 드립니다.');
insert into notice(title, content)
values('카카오 통합서비스약관, 카카오 서비스 약관, 카카오 통합 약관, 카카오 운영정책 변경 안내','안녕하세요 카카오입니다.카카오 서비스를 이용해 주시는 회원 여러분께 감사드립니다.카카오 통합서비스약관, 카카오 서비스 약관, 카카오 통합 약관, 카카오 운영정책의 내용이 2021년 7월 1일자로 변경될 예정임을 안내드립니다.분사로 인하여 카카오톡 채널의 카카오알림 카테고리에서 "멜론" 은 제외될 예정입니다.다만, 분사 이전에 카카오알림 채널 추가 및 광고메시지 수신에 동의하여 "멜론" 채널이 이미 추가된 경우에는 계속 유지됩니다. ');
insert into notice(title, content)
values('개인정보 처리방침 개정안내','안녕하세요. 카카오(이하 ‘회사’)입니다.서비스를 이용해 주시는 이용자 여러분께 감사드리며, 새로운 개인정보 처리방침 적용에 관한 안내 말씀 드립니다회사는 이용자 여러분의 개인정보를 무엇보다 소중하게 처리하고 있으며, 어떤 사안보다도 우선하여 안전하게 관리하고 있습니다.새롭게 변경될 개인정보 처리방침 내용을 확인하시고 서비스 이용에 참고하시기 바랍니다.');
insert into notice(title, content)
values('카카오 전자금융거래 이용약관 변경 사전 안내',' 변경 사전 안내 2019-10-25 안녕하세요. 카카오입니다.카카오 서비스를 이용해주시는 회원 여러분께 감사드립니다.건전한 상거래 환경 조성 및 고객의 안전한 결제서비스 이용을 위해 카카오 전자금융거래 이용약관의 내용이 2019년 12월 1일자로 변경될 예정입니다. ');

select * from notice;

insert into notice(title, content)
select title, content from notice;

select count(*) cnt from notice;

 

- back VSC

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

// 2021.08.09 라우터 지정 경로
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/product');
var noticeRouter = require('./routes/notice'); // new
// 라우터 지정문
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/product', productRouter);
app.use('/notice', noticeRouter); // new

 

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

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var page = parseInt(req.query.page);
    var start = (page - 1)*5;
    var sql = `select *, date_format(wdate,"%Y-%m-%d %h:%i:%s") fdate from notice order by no desc limit ?,5;`;
    db.get().query(sql,[start],function(err,rows){
        // 공지사항 갯수
        var data = rows;
        sql = `select count(*) cnt from notice`;
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

 

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

	// 베스트 상품 하단 
 	<hr>
      <h3>공지사항</h3>
      <div id="notice"></div>
      <span id="more" style="cursor: pointer; text-decoration: underline; color: green; padding: 10px;">더보기</span>
    </div>

 

// 초기 변수 선언
var nPage = 1;

// getNotice recall
getNotice();

  // # more click
  $('#more').on('click', function () {
    nPage++;
    getNotice();
  });

  $('#notice').on('click', '.row', function () {
    $('#notice .row .content').each(function () {
      $(this).hide();
    });
    $(this).find('.content').show();
  });

  // 공지사항 출력
  function getNotice() {
    $.ajax({
      type: 'get',
      url: '/notice',
      dataType: 'json',
      data: {
        'page': nPage
      },
      success: function (data) {
        var str = '';
        $(data.rows).each(function () {
          var no = this.no;
          var title = this.title;
          var content = this.content;
          var date = this.fdate;
          str += `<div class="row">`;
          str += `<span class="title">[${no}] ${title}</span>`;
          str += `<span class="date">${date}</span>`;
          str += `<div class="content" style="display:none">${content}</div>`;
          str += `</div>`;
        });
        $('#notice').append(str);
      }
    })
  };

 

 

- 최종본

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

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

body{
  font-family: 'SF_HambakSnow';
}

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

#header {
  padding: 20px;
  border: 1px solid green;
  margin-bottom: 10px;
}

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

#footer {
  padding: 20px;
  border: 1px solid green;
}

h3{
  text-align: center;
}

#product {
  width: 900px;
  margin: 0px auto;
  overflow: hidden;
}

.box {
  width: 200px;
  float: left;
  margin-left: 10px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid rgb(226, 255, 226);
  background-color: rgb(226, 255, 226);
}

.box .title, .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
  font-size: 15px;
}

#slider {
  position: relative;
  overflow: hidden;
  width: 660px;
  height: 150px;
  background-color: rgb(226, 255, 226);
  margin: 0px auto;
}

#items {
  position: absolute;
  overflow: hidden;
  width: 880px;
}

#items .item {
  width: 100px;
  float: left;
  margin-left: 10px;
}

#notice .row {
  border-bottom: 1px solid green;
  margin-bottom: 10px;
  cursor: pointer;
  padding: 10px;
}

#notice .row:hover{
  background-color: lemonchiffon;
}

#notice .title {
  display: inline-block;
  width: 730px;
}

#notice .content {
  margin: 20px 0px 20px 0px;
  background-color: rgb(226, 255, 226);
  padding: 20px;
}

 

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

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

/* GET users listing. */
router.get('/', function(req, res, next) {
    var page = parseInt(req.query.page);
    var start = (page - 1)*5;
    var sql = `select *, date_format(wdate,"%Y-%m-%d %h:%i:%s") fdate from notice order by no desc limit ?,5;`;
    db.get().query(sql,[start],function(err,rows){
        // 공지사항 갯수
        var data = rows;
        sql = `select count(*) cnt from notice`;
        db.get().query(sql,[],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

 

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

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

// get best product
router.get('/best',function(req,res){
    var sql = 'select *, format(price,0) fprice from product order by id limit 0, 8;';
    db.get().query(sql,[],function(err,rows){
        res.send(rows);
    });
});

/* GET users listing. */
router.get('/', function(req, res, next) {
    var number = parseInt(req.query.number);
    var page = parseInt(req.query.page);
    var start = (page - 1)*number;
    var order = req.query.order;
    var search = `%${req.query.search}%`;

    var sql = `select *, format(price,0) fprice from product where title like ? order by ${order} limit ?,?;`;
    db.get().query(sql,[search, start, number],function(err,rows){
        var data = rows;
        sql = 'select count(*) cnt from product where title like ?;';
        db.get().query(sql,[search],function(err,rows){
            var count = rows[0].cnt;
            res.send({'rows':data, 'count':count});
        });
    });
});

module.exports = router;

 

C:\data\node\ex05\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">
      <img src="/images/download.jpg" width=900>
    </div>
    <div id="content">
      <h3>상품목록</h3>
      <div style="width: 900px; padding: 10px; border: 1px solid green; margin-bottom: 10px;">
        <select id="number" style="height: 25px;">
          <option value=4>4개씩출력</option>
          <option value=8>8개씩출력</option>
          <option value=12>12개씩출력</option>
          <option value=16>16개씩출력</option>
        </select>
        <select id="order" style="height: 25px;">
          <option value="id">상품번호순</option>
          <option value="price desc">상품고가순</option>
          <option value="price">상품저가순</option>
          <option value="title">상품이름순</option>
        </select>
        <span id="count"></span>
        <input type="text" id="search" placeholder="검색어를 입력하세요." style="float: right; height: 25px;">
      </div>
      <div id="product"></div>
      <div style="width: 900px; text-align: center; margin: 10px;">
        <button id="prev" disabled="true">&lt;</button>
        <span id="page">1/25</span>
        <button id="next">&gt;</button>
      </div>
      <hr>
      <h3>베스트 상품</h3>
      <div id="slider">
        <!--5개 출력 ; 보여지는 부분-->
        <div id="items"></div>
        <!--8개 출력-->
      </div>
      <div style="width: 660px; margin:0px auto; text-align: center; margin-top: 10px;">
        <button id="lt">&lt;</button>
        <button id="gt">&gt;</button>
      </div>
      <hr>
      <h3>공지사항</h3>
      <div id="notice"></div>
      <span id="more" style="cursor: pointer; text-decoration: underline; color: green; padding: 10px;">더보기</span>
    </div>
    <div id="footer">
      <h3>Copyright. 인공별곡. All rights reserved</h3>
    </div>
  </div>
</body>
<script>
  // 전역변수
  var page = 1; // 현재페이지
  var number = 4; // 한페이지 출력갯수
  var nPage = 1;

  getList();
  getNotice();

  // # more click
  $('#more').on('click', function () {
    nPage++;
    getNotice();
  });

  $('#notice').on('click', '.row', function () {
    $('#notice .row .content').each(function () {
      $(this).hide();
    });
    $(this).find('.content').show();
  });

  // 공지사항 출력
  function getNotice() {
    $.ajax({
      type: 'get',
      url: '/notice',
      dataType: 'json',
      data: {
        'page': nPage
      },
      success: function (data) {
        var str = '';
        $(data.rows).each(function () {
          var no = this.no;
          var title = this.title;
          var content = this.content;
          var date = this.fdate;
          str += `<div class="row">`;
          str += `<span class="title">[${no}] ${title}</span>`;
          str += `<span class="date">${date}</span>`;
          str += `<div class="content" style="display:none">${content}</div>`;
          str += `</div>`;
        });
        $('#notice').append(str);
      }
    })
  };

  // gt 방향으로 인터벌 이동
  var repeat = setInterval(() => {
    $('#gt').click();
  }, 3000);

  $('#gt').on('click', function () {
    clearInterval(repeat); // 반복정지
    $('#items .item:first').animate({
      marginLeft: -110
    }, 100, function () {
      $(this).appendTo($('#items')).css({
        marginLeft: 10
      });
    });
    repeat = setInterval(() => {
      $('#gt').click();
    }, 3000);
  });

  $('#lt').on('click', function () {
    clearInterval(repeat); // 반복정지
    $('#items .item:first').animate({
      marginLeft: 110
    }, 100, function () {
      $(this).before($('#items .item:last')).css({
        marginLeft: 10
      });
    });
    repeat = setInterval(() => {
      $('#gt').click();
    }, 3000);
  });

  // best 상품 출력
  $.ajax({
    type: 'get',
    url: '/product/best',
    dataType: 'json',
    success: function (data) {
      var str = "";
      $(data).each(function () {
        var image = this.image;
        var id = this.id;
        var title = this.title;
        var price = this.fprice;
        str += `<div class="item">`;
        str += `<img src="${image}" width=100 height=100/>`;
        str += `<div class="title">${id} : ${title}</div>`;
        str += `<div class="price">${price}원</div>`;
        str += `</div>`;
      });
      $('#items').html(str);
    }
  });

  // 키를 눌렀을 때 페이지를 초기화 및 리스트 출력
  $('#search').on('keypress', function (e) {
    if (e.keyCode == 13) {
      page = 1;
      getList();
    }
  });

  // id order 가 chage될때마다 1 page로
  $('#order').on('change', function () {
    page = 1;
    getList();
  });

  // id number 가 chage될때마다 1 page로
  $('#number').on('change', function () {
    page = 1;
    getList();
  });

  // press prev button
  $('#prev').on('click', function () {
    page--;
    getList();
  });

  // press next button
  $('#next').on('click', function () {
    page++;
    getList();
  });

  function getList() {
    number = $('#number').val();
    order = $('#order').val();
    search = $('#search').val();
    $.ajax({
      type: 'get',
      url: '/product',
      dataType: 'json',
      data: {
        'number': number,
        'page': page,
        'order': order,
        'search': search
      },
      success: function (data) {
        var str = "";
        $(data.rows).each(function () {
          var id = this.id;
          var title = this.title;
          var price = this.fprice;
          var image = this.image;
          str += `<div class=box>`;
          str += `<img src="${image}" width=170px height=170px/>`;
          str += `<div class="title"><b>[${id}]</b> : ${title}</div>`;
          str += `<div class="price">${price}원</div>`;
          str += `</div>`;
        });
        $('#product').html(str); // 상품목록
        var count = data.count; // 상품수
        var lastPage = Math.ceil(count / number); // 전체페이지수
        $('#page').html(`${page}/${lastPage}`);
        $('#count').html(`전체상품의 수는 : <b>${count}</b>`);

        // 첫번째 페이지 마지마가 페이지 버튼 비활성화
        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>

</html>

 

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

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 2021.08.09 라우터 지정 경로
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/product');
var noticeRouter = require('./routes/notice');
// 라우터 지정문
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/product', productRouter);
app.use('/notice', noticeRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

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

module.exports = app;

 

C:\data\node\ex05\db.js

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

 

저작자표시

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

2021.08.11 수업일지(Mysql, node.js)  (0) 2021.08.11
2021.08.10 수업일지(node.js, mysql)  (0) 2021.08.10
2021.08.06 수업일지 {MySQL, html, css, java script(jQuery), node.js}  (0) 2021.08.07
2021.08.05 수업일지{html, css, java script(jQuery),MySql,node.js}  (0) 2021.08.07
2021.08.04 수업일지(node.js, MySQL, VSC)  (0) 2021.08.07

관련글

티스토리툴바