본문 바로가기
ICIA 수업일지

2021.08.13 수업일지(Node.js, Mysql, multer)

by 주성씨 2021. 8. 13.

- 웹 구현물 작업을 위한 vsc 터미널 입력순서.

express -e ex09
npm install
npm install mysql
npm install --save multer // 사진 업로드를 위한 라이브러리
nodemon

node.js를 하는 이유는 웹 서버의 구조를 이해하기 위한 코드는 자바로 할것.

 

- 로그인한사람만 학사관리 시스템을 이용할 수 있는 프로그램을 만들어보도록 하자. 회원등록하고 회원삭제하는 기능도 넣도록 하자.

 

- db 연결을 위한 작업을 하도록 하자.

[new] C:\data\node\ex09\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\ex09\app.js

// 2021.08.13 라우터
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
app.use('/', indexRouter);
app.use('/users', usersRouter);

//2021.08.13
//데이타베이스 연결
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\ex09\views\index.ejs

<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<style>
  #container {
    width: 960px;
    border: 1px solid rgb(217, 217, 217);
    box-shadow: 5px 5px 5px black;
    padding: 20px;
    margin: 0px auto;
  }

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

  #center {
    border: 1px solid black;
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  #menu {
    border: 1px solid black;
    padding: 20px;
  }

  #content {
    border: 1px solid black;
    padding: 20px;
  }

  #footer {
    border: 1px solid black;
    padding: 20px;
  }
  h1,h3{
    text-align: center;
  }
</style>

<body>
  <div id="container">
    <div id="header">
      <h1>학사관리 시스템</h1>
    </div>
    <div id="center">
      <div id="menu"></div>
      <div id="content"></div>
    </div>
    <div id="footer">
      <h3>Copyright 2021. ICIA All Rights Reserved</h3>
    </div>
  </div>
</body>

</html>

 

- menu란을 따로 .ejs파일로 만들어준다.

[new] C:\data\node\ex09\views\menu.ejs

<div class="item">교수관리</div>
<div class="item">학생관리</div>
<div class="item">강좌관리</div>
<div class="item">수강신청</div>
<div class="item">로그인</div>

 

- 소개란도 만들어준다.

[new] C:\data\node\ex09\views\about.ejs

<h1>시스템 소개</h1>
<h2>KNU</h2>
<p>
    Kangwon National University (KNU) is a national university in Gangwon-do, South Korea. Established as Kangwon
    Provincial
    Chuncheon Agricultural College in 1947 in Chuncheon, it extended to a comprehensive university in 1978. KNU serves
    as
    the flagship educational institution representing Gangwon-do.
</p>

 

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

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

/* GET home page. */
router.get('/', function(req, res, next) {
  // 인덱스라는 페이지를 render한다.
  res.render('index', { title: '학사관리시스템', pageName:'./about.ejs' });
});

module.exports = router;

 

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

 

<body>
  <div id="container">
    <div id="header">
      <h1>학사관리 시스템</h1>
    </div>
    <div id="center">
      <div id="menu"><%-include('menu.ejs')%></div>
      <div id="content"><%-include(pageName)%></div>
    </div>
    <div id="footer">
      <h3>Copyright 2021. KNU All Rights Reserved</h3>
    </div>
  </div>
</body>

 

- member table을 이용해서 로그인 페이지를 만들고 로그인 기능을 추가해보자.

 

[new] C:\data\node\ex09\routes\member.js

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

/* 1. GET 로그인 페이지 출력. */
router.get('/login', function(req, res, next) {
  // 인덱스라는 페이지를 render한다.
  res.render('index', { title: '로그인', pageName:'./member/login.ejs' });
});

module.exports = router;

 

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

// 2021.08.13 라우터
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var memberRouter = require('./routes/member');
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/member', memberRouter);

 

C:\data\node\ex09\views\member\login.ejs

<h1>로그인</h1>

 

C:\data\node\ex09\views\menu.ejs - 누르면 이동하게

<div class="item">교수관리</div>
<div class="item">학생관리</div>
<div class="item">강좌관리</div>
<div class="item">수강신청</div>
<a href="/member/login"><div class="item">로그인</div></a>

 

C:\data\node\ex09\views\index.ejs - 누르면 이동하게

<body>
  <div id="container">
    <div id="header">
      <a href="/"><h1>학사관리 시스템</h1></a>
    </div>
    <div id="center">
      <div id="menu"><%-include('menu.ejs')%></div>
      <div id="content"><%-include(pageName)%></div>
    </div>
    <div id="footer">
      <h3>Copyright 2021. KNU All Rights Reserved</h3>
    </div>
  </div>
</body>

 

 

- 로그인 할 수 있게 input 할 수 있는 틀을 만들자.

<style>
    #login{
        width: 300px;
        margin: 0px auto;
        margin-top: 100px;
        margin-bottom: 300px;
        border:1px solid rgb(51, 102, 204);
        padding: 20px;
    }
    
</style>
<div id="login">
    <h1>로그인</h1>
    <form name="frm">
        <div>ID : <input type="text" name="id"/></div>
        <div>PW : <input type="password" name="pass"/></div>
    </form>
</div>

 

 

- submit이 발생했을시 아이디, 비밀번호를 체크해주도록 하자.

C:\data\node\ex09\views\member\login.ejs

<style>
    #login {
        width: 300px;
        margin: 0px auto;
        margin-top: 100px;
        margin-bottom: 300px;
        border: 1px solid rgb(51, 102, 204);
        padding: 20px;
        background-color: rgb(51, 102, 204);
        color: white;
    }

    input[type=text],
    input[type=password] {
        border: 1px solid rgb(51, 102, 204);
        height: 25px;
        margin-bottom: 5px;
    }

    form {
        text-align: center;
    }

    #message {
        display: none;
        color: red;
        margin: 0px auto;
        text-align: center;
        font-size: 20px;
        background-color: white;
        padding: 10px;
        margin-top: 10px;
    }
</style>
<div id="login">
    <h1>로그인</h1>
    <form name="frm">
        <div style="margin-left: 8.5px;">ID : <input type="text" name="id" placeholder="아이디입력" /></div>
        <div>PW : <input type="password" name="pass" placeholder="비밀번호입력" /></div>
        <hr>
        <div><input type="submit" value="로그인" /></div>
    </form>
    <!-- alert 대신에 메시지 창에 넣어주도록 하자. -->
    <!-- err 시에만 보이도록 하자. -->
    <div id="message">메시지출력</div>
</div>
<script>
    // submit
    $(frm).on('submit', function (e) {
        // 처음에는 submit을 막아주고 확인하는 작업을 추가한다.
        e.preventDefault();
        var id = $(frm.id).val();
        if (id == "") {
            $('#message').html("<b>아이디를 입력하세요!!!</b>");
            $('#message').show(); // 숨겨뒀던 message창을 보여준다.
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };
        
        var pass = $(frm.pass).val();
        if (pass == "") {
            $('#message').html("<b>비밀번호를 입력하세요!!!</b>");
            $('#message').show(); // 숨겨뒀던 message창을 보여준다.
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };
    });
</script>

 

- 로그인 체크하는 라우터는 멤버 js

1. 아이디 체크

C:\data\node\ex09\routes\member.js

var express = require('express');
var router = express.Router();
var db = require('../db'); // db는 하나 위에

// 2. POST 로그인 체크 라우터
// POST는 웹에서 확인하지 못하니 get으로 잠시 바꿔줘서 확인해보자.
router.post('/login',function(req,res){
  var id = req.body.id;
  var sql = 'select * from member where id=?;';
  db.get().query(sql,[id],function(err,rows){
    var result = 0;
    if(rows.length==1){
      result=1;
    }else{
      result=0;
    };
    res.send({result:result});
  });
});

 

C:\data\node\ex09\views\member\login.ejs

<script>
    // submit
    $(frm).on('submit', function (e) {
        // 처음에는 submit을 막아주고 확인하는 작업을 추가한다.
        e.preventDefault();
        var id = $(frm.id).val();
        if (id == "") {
            $('#message').html("<b>아이디를 입력하세요!!!</b>");
            $('#message').show(); // 숨겨뒀던 message창을 보여준다.
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        var pass = $(frm.pass).val();
        if (pass == "") {
            $('#message').html("<b>비밀번호를 입력하세요!!!</b>");
            $('#message').show(); // 숨겨뒀던 message창을 보여준다.
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        $.ajax({
            type: 'post',
            url: '/member/login',
            dataType: 'json',
            data: {
                id: id
            },
            success: function (data) {
                if (data.result == 0) {
                    $('#message').html('존재하지 않는 아이디입니다.')
                    $('#message').show(); // 숨겨뒀던 message창을 보여준다.
                };
            }
        });

        if (!confirm('로그인 하시겠습니까?')) {
            return;
        };
    });
</script>

 

2. 비밀번호 체크

C:\data\node\ex09\routes\member.js

// 2. POST 로그인 체크 라우터
// POST는 웹에서 확인하지 못하니 get으로 잠시 바꿔줘서 확인해보자.
router.post('/login', function (req, res) {
  var id = req.body.id;
  var pass = req.body.pass;
  var sql = 'select * from member where id=?;';
  db.get().query(sql, [id], function (err, rows) {
    var result = 0; // 아이디가 없는 경우
    if (rows.length == 1) {
      if (rows[0].pass == pass) { 
        result = 1; // 로그인 성공
      } else {
        result = 2; // 비밀번호 불일치
      }
    }
    res.send({
      result: result
    });
  });
});

 

C:\data\node\ex09\views\member\login.ejs

<script>
    // submit
    $(frm).on('submit', function (e) {
        // 처음에는 submit을 막아주고 확인하는 작업을 추가한다.
        e.preventDefault();
        $('#message').show(); // 숨겨뒀던 message창을 보여준다.
        var id = $(frm.id).val();
        if (id == "") {
            $('#message').html("<b>아이디를 입력하세요!!!</b>");
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        var pass = $(frm.pass).val();
        if (pass == "") {
            $('#message').html("<b>비밀번호를 입력하세요!!!</b>");
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        $.ajax({
            type: 'post',
            url: '/member/login',
            dataType: 'json',
            data: {
                id: id,
                pass:pass
            },
            success: function (data) {
                if (data.result == 0) {
                    $('#message').html('존재하지 않는 아이디입니다.')
                }else if(data.result==1){
                    $('#message').html('로그인 합니다.')
                }else{
                    $('#message').html('비밀번호가 일치하지 않습니다.')
                }
            }
        });

        if (!confirm('로그인 하시겠습니까?')) {
            return;
        };
    });
</script>

 

- 로그인 성공하면 메인으로

C:\data\node\ex09\views\member\login.ejs

<script>
    // submit
    $(frm).on('submit', function (e) {
        // 처음에는 submit을 막아주고 확인하는 작업을 추가한다.
        e.preventDefault();
        $('#message').show(); // 숨겨뒀던 message창을 보여준다.
        var id = $(frm.id).val();
        if (id == "") {
            $('#message').html("<b>아이디를 입력하세요!!!</b>");
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        var pass = $(frm.pass).val();
        if (pass == "") {
            $('#message').html("<b>비밀번호를 입력하세요!!!</b>");
            return; // 리턴하면 밑의 조건문은 실행하지 않는다.
        };

        $.ajax({
            type: 'post',
            url: '/member/login',
            dataType: 'json',
            data: {
                id: id,
                pass:pass
            },
            success: function (data) {
                if (data.result == 0) {
                    $('#message').html('존재하지 않는 아이디입니다.')
                }else if(data.result==1){
                    $('#message').html('로그인 합니다.')
                    location.href='/'; // new
                }else{
                    $('#message').html('비밀번호가 일치하지 않습니다.')
                }
            }
        });

        if (!confirm('로그인 하시겠습니까?')) {
            return;
        };
    });
</script>

 

- 익스프레스 세션을 깔아준다. 세션에다가 로그인정보를 넣어주기 위해서 라이브러리를 설치한것이다.

- 터미널에 아래와 같이 입력해준다.

C:\data\node\ex09>npm install express-session
+ express-session@1.17.2
added 6 packages from 6 contributors and audited 88 packages in 1.283s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities


C:\data\node\ex09>

 

C:\data\node\ex09\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 session = require('express-session'); // 순서 중요
var app = express();

// 세션 추가
app.use(session({
  secret:'myKey',
  resave:false,
  saveUninitialized:true
}));

 

C:\data\node\ex09\routes\member.js

로그인 성공했을때 정보를 세션에다가 저장해주도록 하자.

var express = require('express');
var router = express.Router();
var db = require('../db'); // db는 하나 위에

// 3. GET logout 페이지 만들기
router.get('/logout', function (req, res, next) {
  req.session.destroy(); // 로그인 세션정보를 디스트로이
  res.redirect('/'); // 로그아웃시 메인페이지로 이동
});

// 2. POST 로그인 체크 라우터
// POST는 웹에서 확인하지 못하니 get으로 잠시 바꿔줘서 확인해보자.
router.post('/login', function (req, res) {
  var id = req.body.id;
  var pass = req.body.pass;
  var sql = 'select * from member where id=?;';
  db.get().query(sql, [id], function (err, rows) {
    var result = 0; // 아이디가 없는 경우
    if (rows.length == 1) {
      if (rows[0].pass == pass) {
        result = 1; // 로그인 성공
        req.session.user=rows[0]; // 오브젝트로 가지고와서 따로 userid, name을 지정해주지 않아도 된다.
      } else {
        result = 2; // 비밀번호 불일치
      }
    }
    res.send({
      result: result
    });
  });
});

/* 1. GET 로그인 페이지 출력 라우터. */
router.get('/login', function (req, res, next) {
  // 인덱스라는 페이지를 render한다.
  res.render('index', {
    title: '로그인',
    pageName: './member/login.ejs',
    user:req.session.user,
  });
});

module.exports = router;

 

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

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

/* GET home page. */
router.get('/', function (req, res, next) {
  // 인덱스라는 페이지를 render한다.
  res.render('index', {
    title: '학사관리시스템',
    pageName: './about.ejs',
    user:req.session.user,
  });
});

module.exports = router;

ㄴ 인덱스 페이지에서도 유저아이디를 가지고 갈 수 있게 페이지 출력 라우터에 userid를 넣어준다.

 

[삭제] C:\data\node\ex09\views\menu.ejs

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

<body>
  <div id="container">
    <div id="header">
      <a href="/" style="text-decoration: none">
        <h1>학사관리 시스템</h1>
      </a>
    </div>
    <div id="center">
      <div id="menu">
        <div class="item">교수관리</div>
        <div class="item">학생관리</div>
        <div class="item">강좌관리</div>
        <div class="item">수강신청</div>
        <div class="title" style="float: right;">
          <% if(user==null) { %>
          <a href="/member/login">로그인</a>
          <% }else { %>
          <span><%=user.name%>님</span>
          <a href="/member/logout" style="text-decoration: none;">로그아웃</a>
          <%} %>
        </div>
      </div>
      <div id="content"><%-include(pageName)%></div>
    </div>
    <div id="footer">
      <h3>Copyright 2021. KNU All Rights Reserved</h3>
    </div>
  </div>
</body>

 

로그인 로그아웃

 

- 회원가입 만들기

C:\data\node\ex09\views\member\login.ejs

<div id="login">
    <h1>로그인</h1>
    <form name="frm">
        <div style="margin-left: 8px;">ID : <input type="text" name="id" placeholder="아이디입력" size="20" /></div>
        <div>PW : <input type="password" name="pass" placeholder="비밀번호입력" size="20" /></div>
        <hr>
        <div><input type="submit" value="로그인" />
        <a href="/member/insert">회원가입</a></div> <!--new-->
    </form>
    <!-- alert 대신에 메시지 창에 넣어주도록 하자. -->
    <!-- err 시에만 보이도록 하자. -->
    <div id="message">메시지출력</div>
</div>

 

C:\data\node\ex09\routes\member.js

// 4. GET 회원가입 페이지 이동 라우터 만들기
router.get('/insert',function(req,res){
  res.render('index',{title:"회원가입",pageName:"./member/insert.ejs",user:req.session.user})
})

 

[new] C:\data\node\ex09\views\member\insert.ejs

<style>
    input[type=text],
    input[type=password] {
        border: 1px solid rgb(51, 102, 204);
        height: 30px;
        margin-bottom: 5px;
    }

    form {
        text-align: center;
        background-color: rgb(234, 239, 250);
        padding: 30px;
    }

    /* #message {
        display: none;
        color: red;
        margin: 0px auto;
        text-align: center;
        font-size: 20px;
        background-color: white;
        padding: 10px;
        margin-top: 10px;
    } */
</style>

<h1>회원가입</h1>
<!-- 입력받는것은 form tag로 하자 -->
<!-- id가 아닌 name으로 하자. -->
<form name="frm">
    <div><input type="text" name="id" placeholder="아이디 입력" /></div>
    <div><input type="password" name="pass" placeholder="비밀번호 입력" /></div>
    <div><input type="text" name="name" placeholder="이름 입력" /></div>
    <div>
        <img src="http://placehold.it/200/200" width="200" id="photo">
        <br>
        <input type="file" name="photo">
    </div>
    <hr />
    <input type="submit" value="회원등록" />
    <input type="reset" value="등록취소" />
</form>
<script>

</script>

 

- 이미지 미리보기 스크립트

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

 

 

- 중복체크 버튼 만들기

 

<form name="frm">
    <div><input type="text" name="id" placeholder="아이디 입력" />
        <input type="button" value="중복체크" id="chkid"></div>

 

- 유효성 검사, 중복체크 스크립트 만들기

<script>
    // 3_1 변수 선언
    var ischk = false;

    // 4. 아이디가 변경될때마다 중복체크 확인
    $(frm.id).on('change',function(){
        ischk=false;
    });

    // 2. 유효성 검사
    $(frm).on('submit',function(e){
        e.preventDefault();
        var id = $(frm.id).val();
        if(id==''){
            alert('아이디를 기입하세요.')
            $(frm.id).focus();
            return;
        };
        if(!ischk){
            alert('아이디 중복확인을 하시기 바랍니다.')
            return;
        };
    });

    // 3. 아이디 중복체크
    $('#chkid').on('click',function(){
        ischk=true;
    })

 

C:\data\node\ex09\routes\member.js

var express = require('express');
var router = express.Router();
var db = require('../db'); // db는 하나 위에

// 5. 아이디 중복체크 라우터 만들기
router.get('/ischk',function(req,res){
  var id = req.query.id;
  var sql = 'select * from member where id=?';
  db.get().query(sql,[id],function(err,rows){
    var ischk=false;
    if(rows.length==1){
      ischk=true;
    }
    res.send({ischk:ischk});
  });
});

 

C:\data\node\ex09\views\member\insert.ejs

    // 3. 아이디 중복체크
    $('#chkid').on('click',function(){
        $.ajax({
            type:'get',
            url:'/member/ischk',
            data:{id:$(frm.id).val()},
            success:function(data){
                if(!data.ischk){
                    ischk=true;
                    alert('사용할 수 있는 아이디입니다.')
                }else{
                    alert('사용할 수 없는 아이디입니다.')
                }
            }
        });
    });

 

- 비밀번호, 이름, 사진 유효성 체크

C:\data\node\ex09\views\member\insert.ejs

    // 2. 아이디 유효성 체크
    // 5. 비밀번호, 이름, 사진 유효성 체크
    $(frm).on('submit',function(e){
        e.preventDefault();
        var id = $(frm.id).val();
        if(id==''){
            alert('아이디를 기입하세요.')
            $(frm.id).focus();
            return;
        };
        if(!ischk){
            alert('아이디 중복확인을 하시기 바랍니다.')
            return;
        };

        var pass = $(frm.pass).val();
        if(pass==''){
            alert('비밀번호를 기입하세요.');
            $(frm.pass).focus();
            return;
        }

        var name = $(frm.name).val();
        if(name==''){
            alert('이름을 기입하세요.');
            $(frm.name).focus();
            return;
        }

        var photo = $(frm.photo).val();
        if(photo==''){
            alert('사진을 등록하세요.');
            return;
        }

        if(!confirm('회원가입을 하시겠습니까?')){
            return;
        }
    });

 

- 사진을 업로드하고 내용을 인서트 하는 작업을 하도록 하자.

[new] C:\data\node\ex09\public\images\member -> 폴더를 만들어주자.

 

C:\data\node\ex09\routes\member.js

const {
  request
} = require('express');
var express = require('express');
var router = express.Router();
var db = require('../db.js');
var fs = require('fs'); // db는 하나 위에

// 7. 이미지 업로드
var multer = require('multer');
var uploadPath = './public/images/member';
var upload = multer({
  storage: multer.diskStorage({
    destination: (req, file, done) => {
      done(null, uploadPath);
    },
    filename: (req, file, done) => {
      done(null, Date.now() + '_' + file.originalname);
    }
  })
});

// 6. POST 회원등록 비밀번호 노출을 막는다.
router.post('/insert', upload.single('photo'), function (req, res) {
  var id = req.body.id;
  var pass = req.body.pass;
  var name = req.body.name;
  var photo = req.file.filename;
  var sql = 'insert into member(id, pass, name, photo) values(?,?,?,?);';
  db.get().query(sql,[id,pass,name,photo],function(err,rows){
    res.sendStatus(200); // ajax 이 시작했을때 success로 온다.
  });
});

 

C:\data\node\ex09\views\member\insert.ejs

<form name="frm" enctype="multipart/form-data">
        // 6. 회원등록
        var data = new FormData();
        data.append('id', id);
        data.append('pass', pass);
        data.append('name', name);
        data.append('photo', $(frm.photo)[0].files[0]);
        // string이 아닌 file의 형태이다.
        $.ajax({
            type: 'post',
            url: '/member/insert',
            data: data,
            processData: false,
            contentType: false,
            success: function () {
                alert('회원등록 성공');
                // 성공시 로그인 페이지로 이동
                location.href='/member/login';
            }
        });

 

db에서 인서트된 데이터를 확인할 수 있다.

 

확인해볼 수 있다.

 

- 마이페이지 만들기

C:\data\node\ex09\views\member\login.ejs -> insert복사해서 만든다.

 

C:\data\node\ex09\routes\member.js

// 8. GET 회원정보 페이지
router.get('/read', function (req, res) {
  var id = req.query.id;
  var sql = 'select * from member where id=?;';
  db.get().query(sql, [id], function (err, rows) {
    res.render('index', {
      title: '회원정보',
      pageName: './member/read.ejs',
      user: req.session.user
    })
  });
});

 

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

          <a href="/member/read?id=<%=user.id%>"><span><%=user.name%>님</span></a>

 

 

C:\data\node\ex09\views\member\read.ejs

<h1>회원정보</h1>
<!-- 입력받는것은 form tag로 하자 -->
<!-- id가 아닌 name으로 하자. -->
<form name="frm" enctype="multipart/form-data">
    <div><input type="text" name="id" value="<%=user.id%>" readonly/>
    <div><input type="password" name="pass" value="<%=user.pass%>" /></div>
    <div><input type="text" name="name" value="<%=user.name%>" /></div>
    <div>
        <img src="/images/member/<%=user.photo%>" width="200" id="photo">
        <br>
        <input type="file" name="photo">
    </div>
    <hr />
    <input type="submit" value="회원정보수정" />
    <input type="button" value="회원정보삭제" />
    <input type="reset" value="수정취소" />
</form>

 

- 회원정보 수정

C:\data\node\ex09\routes\member.js

// 9. POST 회원수정
// 회원을 수정할 경우에도 이미지가 chage될 수 있으므로 upload.single
router.post('/update', upload.single('photo'), function (req, res) {
  var id = req.body.id;
  var pass = req.body.pass;
  var name = req.body.name;
  var photo = req.body.oldPhoto; // 기존이미지

  if (req.file != null) { // 이미지가 바뀐경우
      photo = req.file.filename; // 바꾼이미지
      fs.unlink('./public' + req.body.oldPhoto, function (err) {});
  }
  var sql = 'update member set pass=?, name=?, photo=? where id=?;';
  db.get().query(sql, [pass, name, photo, id], function (err, rows) {
      res.sendStatus(200);
  });
});

 

C:\data\node\ex09\views\member\read.ejs

<form name="frm" enctype="multipart/form-data">
    <div><span>아이디 : </span><input type="text" name="id" value="<%=user.id%>" readonly />
        <div><span>비밀번호 : </span><input type="password" name="pass" value="<%=user.pass%>" /></div>
        <div><span>이름 : </span><input type="text" name="name" value="<%=user.name%>" /></div>
        <div>
            <img src="/images/member/<%=user.photo%>" width="200" id="photo">
            <br>
            <input type="file" name="photo" accept="image/*"/>
        </div>
        <hr />
        <input type="submit" value="회원정보수정" />
        <input type="button" value="회원정보삭제" />
        <input type="reset" value="수정취소" />
</form>

<script>
    // 3_1. 변수 선언
    var id = "<%=user.id%>";
    var pass = "<%=user.pass%>";
    var name = "<%=user.name%>";
    var oldPhoto = "<%=user.photo%>";

    // 2. 비밀번호, 이름, 사진 유효성 체크
    $(frm).on('submit', function (e) {
        e.preventDefault();

        var pass = $(frm.pass).val();
        if (pass == '') {
            alert('비밀번호를 기입하세요.');
            $(frm.pass).focus();
            return;
        };

        var name = $(frm.name).val();
        if (name == '') {
            alert('이름을 기입하세요.');
            $(frm.name).focus();
            return;
        };

        var photo = $(frm.photo).val();
        if (photo == '') {
            alert('사진을 등록하세요.');
            return;
        }

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

        // 3. 회원정보 수정
        var data = new FormData();
        data.append('id', id);
        data.append('pass', pass);
        data.append('name', name);
        data.append('photo', $(frm.photo)[0].files[0]);
        data.append('oldPhoto', oldPhoto);
        
        // string이 아닌 file의 형태이다.
        $.ajax({
            type: 'post',
            url: '/member/update',
            data: data,
            processData: false,
            contentType: false,
            success: function () {
                alert('회원정보를 수정하였습니다.');
                // 성공시 로그인 페이지로 이동
                location.href = '/member/logout';
                alert('다시 로그인 해주세요.')
            }
        });
    });

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

 

C:\data\node\ex09\views\member\read.ejs

<h1>회원정보</h1>
<!-- 입력받는것은 form tag로 하자 -->
<!-- id가 아닌 name으로 하자. -->
<form name="frm" enctype="multipart/form-data">
    <div><span>아이디 : </span><input type="text" name="id" value="<%=user.id%>" readonly />
        <div><span>비밀번호 : </span><input type="password" name="pass" value="<%=user.pass%>" /></div>
        <div><span>이름 : </span><input type="text" name="name" value="<%=user.name%>" /></div>
        <div>
            <img src="<%=user.photo%>" width="200" id="photo">
            <br>
            <input type="file" name="photo" accept="image/*"/>
        </div>
        <hr />
        <input type="submit" value="회원정보수정" />
        <input type="button" value="회원정보삭제" />
        <input type="reset" value="수정취소" />
</form>

<script>
    // 3_1. 변수 선언
    var id = "<%=user.id%>";
    var pass = "<%=user.pass%>";
    var name = "<%=user.name%>";
    var oldPhoto = "<%=user.photo%>";

    // 2. 비밀번호, 이름, 사진 유효성 체크 // renew
    $(frm).on('submit', function (e) {
        e.preventDefault();

        var pass = $(frm.pass).val();
        if (pass == '') {
            alert('비밀번호를 기입하세요.');
            $(frm.pass).focus();
            return;
        };

        var name = $(frm.name).val();
        if (name == '') {
            alert('이름을 기입하세요.');
            $(frm.name).focus();
            return;
        };

        var photo = $(frm.photo).val();
        if (photo == '') {
            alert('사진을 등록하세요.');
            return;
        }

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

        // 3. 회원정보 수정 // new
        var data = new FormData();
        data.append('id', id);
        data.append('pass', pass);
        data.append('name', name);
        data.append('photo', $(frm.photo)[0].files[0]);
        data.append('oldPhoto', oldPhoto);
        
        // string이 아닌 file의 형태이다.
        $.ajax({
            type: 'post',
            url: '/member/update',
            data: data,
            processData: false,
            contentType: false,
            success: function () {
                alert('회원정보를 수정하였습니다.');
                // 성공시 로그인 페이지로 이동
                location.href = '/member/logout';
                alert('다시 로그인 해주세요.')
            }
        });
    });

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

 

 

저작자표시

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

2021.08.18 수업일지(Spring, Servlet)  (0) 2021.08.18
2021.08.17 수업일지(JAVA, Servlet, Spring)  (0) 2021.08.18
2021.08.12 수업일지(MySQL, node.js, multer)  (0) 2021.08.12
2021.08.11 수업일지(Mysql, node.js)  (0) 2021.08.11
2021.08.10 수업일지(node.js, mysql)  (0) 2021.08.10

관련글

티스토리툴바