[생활코딩] Nodejs로 Database 다루기(3)

이번 수업에서는 저번 수업까지 짰던 코드에서 fs를 이용했던 부분을 database를 이용하도록 바꿀 것이다!

 

그전에 app_file.js의 복사본 app_mysql.js를 만들었는데 저번까지 짰던 코드와 달라서ㅜㅜ(multer 부분만) 따로 추가해줬다

 

추가한 multer 부분

let multer = require('multer');

let _storage =multer.diskStorage({
    description: function (req, file, cb){
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb){
        cb(null, file.originalname);
    }
})

let upload = multer({_storage: _storage})

 

그리고 database_mysql.js에서 만들었던 코드 중 일부분을 가져온다!

let mysql      = require('mysql');
let conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '비밀번호',
  database : 'o2'
});

conn.connect();

 

topic/:id로 들어갔을 때 fs가 아닌 DB를 이용하도록 하기 위해 코드를 수정해준다

app.get(['/topic', '/topic/:id'], function(req, res){ // get 방식으로 /topic 라우트
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, rows, fields){
        res.send(rows);
    });
})

이렇게 sql문을 작성하고 연결의 쿼리로 이용했을 때 id와 제목들이 제대로 전달되는 걸 볼 수 있다

 

다음으로 쿼리문 안에 render를 이용해서 view.pug로 정보를 보내준다

이때 저번까지 작성했던 코드와 조금 다르게 view.pug를 수정할 것이기 때문에 view_mysql이라는 폴더를 새로 만들어주고 그 폴더 안의 view.pug로 연결하기 위해 app.set 부분을 수정해준다

app.set('views', './views_mysql'); // 템플릿엔진을 views_mysql에 넣기

app.get(['/topic', '/topic/:id'], function(req, res){ // get 방식으로 /topic 라우트
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        res.render('view', {topics:topics});
    });
})

app.get 부분을 이렇게 수정해주면 아래와 같이 변경되는 것을 볼 수 있다

 

여기서 object로 뜨는 이유는 view,pug를 보았을 때 topic이 제대로 전달이 되지 않아서이고!

js 파일의 코드를 살펴보면 rows가 객체로 전달되기 때문이다

 

doctype html
html
    head
        meta(charset="UTF-8")
        title Document
    body
        h1 
            a(href='/topic') Server Side JavaScript
        ul
            each topic in topics
                li
                    a(href="/topic/"+topic.id)= topic.title
        article
            h2= title
            = description
        div 
            a(href='/topic/new') new

 

view.pug 파일의 a(href="/topic/"+topic.id)= topic.title  이 부분에서 id, title이라는 것을 명시해주면 리스트가 제대로 뜨는 것을 볼 수 있다!

 

각 리스트를 클릭하면 url이 topic/id값으로 변경된다! (여기서 id 값은 1, 2, 3과 같은 식별자!)

 

다음으로 로고를 클릭하면 환영 문구, 각 리스트를 클릭하면 설명이 나오도록 코드를 고칠 것이다

 

doctype html
html
    head
        meta(charset="UTF-8")
        title Document
    body
        h1 
            a(href='/topic') Server Side JavaScript
        ul
            each topic in topics
                li
                    a(href="/topic/"+topic.id)= topic.title
        article
            if topic 
                h2= title
                = description
            else 
                h2 Welcome 
                | This is tutorial.
        div 
            a(href='/topic/new') new

로고를 눌렀을 때는 topic에 아무것도 주지 않고 리스트의 항목을 클릭했을 때에는 id 값을 주어서 식별할 수 있도록 한다

(view.pug에서 topic이 없다면 환영문구가 뜨도록 코드를 수정했다)

 

app.get(['/topic', '/topic/:id'], function(req, res){ // get 방식으로 /topic 라우트
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        let id = req.params.id; //id 가져오기
        if(id){ // id가 있다면
            let sql ='SELECT * FROM topic WHERE id=?'; //치환자 사용
            conn.query(sql, [id], function(err, topics, fields){
                if(err){
                    console.log(err);
                }
                else{
                    res.render('view', {topics:topics, topic: topic[0]});
                }
            });
        }
        else{
            res.render('view', {topics:topics});
        }
        
    });
})

이때 밖의 topics가 안의 topics로 갱신되기 때문에 아래와 같이 뜰 수 있다

이 때 안의 topics를 topic으로 바꿔주면 제대로 작동한다!

 

app.get(['/topic', '/topic/:id'], function(req, res){ // get 방식으로 /topic 라우트
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        let id = req.params.id; //id 가져오기
        if(id){ // id가 있다면
            let sql ='SELECT * FROM topic WHERE id=?'; //치환자 사용
            conn.query(sql, [id], function(err, topic, fields){
                if(err){
                    console.log(err);
                }
                else{
                    res.render('view', {topics:topics, topic: topic[0]});
                }
            });
        }
        else{
            res.render('view', {topics:topics});
        }
        
    });
})

 

 

article
            if topic 
                h2= topic.title
                = topic.description

그리고 view.pug를 이렇게 수정해주면 topic/:id로 접근했을 때 설명이 제대로 보인다

 

저자까지 추가!

doctype html
html
    head
        meta(charset="UTF-8")
        title Document
    body
        h1 
            a(href='/topic') Server Side JavaScript
        ul
            each topic in topics
                li
                    a(href="/topic/"+topic.id)= topic.title
        article
            if topic 
                h2= topic.title
                = topic.description
                div= 'by '+topic.author
            else 
                h2 Welcome 
                | This is tutorial.
        div 
            a(href='/topic/new') new

 

 

글 추가

 

글을 추가해줄 때 new가 아닌 add로 바꾸기 위해 views_mysql 디렉토리 아래의 new.pug를 add.pug로 변경해준다

 

app_mysql.js 또한 수정해준다

app.get('/topic/add', function(req, res){ //form을 topic/new로
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        res.render('add', {topics:topics});
    })
})

 

add.pug의 topic의 제목을 가져오는 부분을 topic.title로 바꿔준다

        ul 
            each topic in topics 
                li 
                    a(href="/topic/"+topic.id)= topic.title

 

view.pug에서도 new를 add로, 주소 또한 /topic/new에서 /topic/add로 바꿔준다

div 
            a(href='/topic/add') add

 

새로운 data를 add 할 때 post 방식을 사용하기 위해 기존 js 파일의 /topic 부분을 /topic/add로 수정해준다

app.post('/topic/add', function(req, res){ //post 방식으로 /topic 라우트
    let title = req.body.title;
    let description = req.body.description;
    let author = req.body.author;
    
    let sql='INSERT INTO topic (title, description, author) VALUES(?,?,?)';

    conn.query(sql, [title, description, author], function(err, rows, fields){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        else{
            res.redirect('/topic/'+rows.insertId); // 글 작성, 추가 후 사용자에게 보여주기 위해
        }
    })
})

 

 

글 수정 기능

 

수정 버튼을 추가해주기 위해 view.pug 파일에 edit를 list 형식으로 추가시켜준다

        ul 
            li 
                a(href='/topic/add') add 
            if topic 
                li 
                    a(href='/topic/'+topic.id+'/edit') edit

 

js 파일에 수정을 get 방식으로 받는 라우터를 만들어준다

app.get(['/topic/:id/edit'], function(req, res){ // 수정
    let sql ='SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        let id = req.params.id; //id 가져오기
        if(id){ // id가 있다면
            let sql ='SELECT * FROM topic WHERE id=?'; //치환자 사용
            conn.query(sql, [id], function(err, topic, fields){ // 해당 id의 정보를 읽음
                if(err){
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                else{
                    res.render('edit', {topics:topics, topic: topic[0]}); // edit 사용
                }
            });
        }
        else{
            console.log('There isn"t id.');
            res.status(500).send('Internal Server Error');
        }
        
    });
})

 

앞에서 작성했던 것처럼 정보를 읽어오고, 해당 아이디의 정보를 읽어서 edit.pug 파일로 보내준다

글을 수정할 때 id가 없다면 오류이기 때문에 오류 메시지를 작성해준다

 

edit.pug 생성!

doctype html
html
    head
        meta(charset="UTF-8")
        title Document
    body
        h1 
            a(href='/topic') Server Side JavaScript
        ul
            each topic in topics
                li
                    a(href="/topic/"+topic.id)= topic.title
        article
            form(action="/topic/"+topic.id+"/edit" method="post")
                p 
                    input(type="text" name="title" placeholder="title" value=topic.title)
                p 
                    textarea(name="description" placeholder="description")
                        =topic.description
                p 
                    input(type="text" name="author" placeholder="author" value=topic.author)
                p 
                    input(type="submit")
        ul 
            li 
                a(href='/topic/add') add

edit.pug 파일을 생성해주고 edit 버튼을 없애고 data를 보여주는 부분 대신 add.pug의 글 작성 부분을 가져온 후 해당 id값에 해당하는 data의 정보를 그대로 가져온다

 

 

이 부분까지 했다면! 정보를 수정한 후 제출 버튼을 누르면 post 방식으로 data를 전달하기 위해서 글 수정의 post 방식 또한 라우트 해주어야 한다

 

app.post('/topic/:id/edit', function(req, res){
    let title= req.body.title;
    let description= req.body.description;
    let author= req.body.author;
    let id=req.params.id;

    let sql= 'UPDATE topic SET title=?, description=?, author=? WHERE id=?';
    conn.query(sql, [title, description,author, id], function(err, rows, fields){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        else{
            res.redirect('/topic/'+id);
        }
    })
})

모든 data를 가져온 후 update를 사용해서 sql문을 작성하고 제출을 누르면 해당 아이디의 세부 페이지로 이동하도록 한다

 

 

수정하는 중

수정 후 해당 세부 페이지로 이동

 

 

글 삭제 기능

 

view.pug에 delete 버튼 생성!

 

get 방식으로 del 라우트 해주기!

app.get('/topic/:id/del', function(req, res){
    let sql ='SELECT id, title FROM topic';
    let id=req.params.id;
    conn.query(sql, function(err, topics, fields){
        let sql ='SELECT * FROM topic WHERE id=?';
        conn.query(sql, [id], function(err, rows, fields){
            if(err){
                console.log(err);
                res.status(500).send('Internal Server Error');
            }
            else{
                if(rows.length ===0){ // data가 없다면
                    console.log('There isn"t record.');
                    res.status(500).send('Internal Server Error');
                }
                else{
                    res.render('delete', {topics: topics, topic: rows[0]});
                    // rows는 배열이기 때문에 [0]을 꼭 써줘야함
                }
                
            }
        })
        
    })
})

id를 params를 이용해 가져온 후 해당 아이디를 가진 data를 읽고 data가 없다면 오류처리, 있다면 delete.pug로 렌더 해준다

 

 

delete.pug 생성!

doctype html
html
    head
        meta(charset="UTF-8")
        title Document
    body

        h1 
            a(href='/topic') Server Side JavaScript

        ul 
            each topic in topics 
                li 
                    a(href="/topic/"+topic.id)= topic.title
        
        article 
            h1= 'Delete? '+topic.title
            form(action='/topic/'+topic.id+'/del' method='post')
                p 
                    input(type='submit' value='YES')
            a(href='/topic/'+topic.id) NO

삭제를 할 땐 get 방식이 아닌 post 방식으로 해주어야 한다

만약 미리 링크를 방문하여 빠르게 data를 제공해주는 플러그인을 사용한다면 플러그인으로 인해 data가 바로 삭제될 수도 있기 때문이다!

 

삭제한다면 post를 이용하여 메인 페이지로 이동하고 삭제하지 않는다면 해당 id의 페이지로 돌아간다

 

 

post 방식으로 라우트 해주기

 

app.post('/topic/:id/del', function(req, res){
    let sql ='DELETE FROM topic WHERE id=?';
    let id=req.params.id;
    conn.query(sql, [id], function(err, topics, fields){
       res.redirect('/topic/');        
    })
})

해당 id의 값을 삭제하고 메인 페이지로 이동한다

 

 

↓↓↓ 그 결과

글 상세 페이지

delete를 누른 경우

NO를 누르면 다시 상세 페이지로 이동!

 

YES를 누르면! 리스트에서 해당 글이 삭제되고 메인 페이지로 이동!

 

---

휴우... 다 들었다...

 

듣기는 다 들었으니까 내일 다시 한 번 정리해야겠다 ;ㅅ;

오늘은 글이 좀 길어서 내일 정리하면서 다시 수정하는 걸로!! 

 

오늘부터 다시 공부 시작! 💚🍏🧤🔫🩲🧃☘