게시판 만들기 delete


안녕하세요.
고코더 입니다. 


이번 시간에는 상세보기 페이지에서 글을 삭제할때에 
해당 비밀번호가 맞다면 해당 글을 수정하는 페이지를 만들어 보겠습니다.


 1. '/delete' board.js 글 삭제 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. 상세보기를 표현할 라우터를 추가합니다. 
router.post('/delete',function(req,res,next)
{
    var idx = req.body.idx;
    var passwd = req.body.passwd;
    var datas = [idx,passwd];


    var sql = "delete from board where idx=? and passwd=?";
    conn.query(sql,datas, function(err,result)
    {
        if(err) console.error(err);
        if(result.affectedRows == 0)
        {
            res.send("<script>alert('패스워드가 일치하지 않습니다.');history.back();</script>");
        }
        else
        {
            res.redirect('/board/list/');
        }
    });
});


 1-2. 소스 설명 
  • 87번 라인 
    • post로 넘어오는 /delete URI를 바인딩 합니다.
  • 91번 라인
    • 변수로 넘어온 데이터를 배열로 합칩니다. 
  • 93번 라인
    • update 쿼리를 작성 합니다. 글 고유번호와 비밀번호를 조건절로 걸었습니다.
  • 97번 라인
    • affectedRows - 해당 쿼리로 변경된 수에 행을 불러옵니다. 0이면 업데이트가 되지 않았으므로 비밀번호가 틀린 것입니다.
  • 99번 라인
    • 패스워드가 틀렸다면 send로 이전 페이지로 다시 보냅니다.
  • 106번 라인
    • 수정 성공후에 다시 원래 상세 페이지로 이동시킵니다.


삭제는 delete로 글을 완전히 삭제하는 기능입니다. 수정과 거의 동일한 로직이입니다.
상세 페이지에서 요즘은 하나에 페이지에서 가능하도록 개발하는 추세 입니다.


마무리


수정과 너무 비슷해서 글을 안썼는데 요청하는 분이 계시네요.


아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요


게시판 만들기 page


안녕하세요.
고코더 입니다.


이번 시간에는 게시판에 간단한 페이징을 구현합니다. 기존에 만든 리스트 페이지는 글이 추가되면 페이징 없이 아래로 노출되는 기본방식 입니다. 
오늘은 다시 리스트 페이지에 페이징을 추가해볼려고 합니다. 
처음 개발시에 페이징 구현을 하지 않는건 생각보다 많은 로직이 들어가는 기능 입니다. 리스트 개발시에 페이징을 함께 하면 개인적인 경험에서는 지치기 때문에 노드를 조금 익숙하게 받아들인 후에 살펴보는 것이 낫습니다.



 1. board.js 페이징 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. board.js에 아래 코딩을 추가합니다. 
기존 list는 그대로 두고 page 라는 페이지를 새로 만들어 페이징을 구현합니다. 
게시판 기능을 여러가지로 추가하면서 개선해 나가는 개발 습관을 길러보세요.
router.get('/page/:page',function(req,res,next)
{
    var page = req.params.page;
    var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
        "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board";
    conn.query(sql, function (err, rows) {
        if (err) console.error("err : " + err);
        res.render('page', {title: ' 게시판 리스트', rows: rows, page:page, length:rows.length-1, page_num:10, pass:true});
        console.log(rows.length-1);
    });
});

 1-2. 소스 설명 
  • 75번 라인 
    • page라는 URI 접속 경로를 추가 합니다. 이 페이지는 기존 리스트에 페이징이 추가된 기능입니다.
  • 77번 라인
    • 현재 페이지를 req객체를 통해 가져옵니다/
  • 78번 라인 
    • 기존에 사용한 select 구절 그대로 입니다.
  • 82번 라인
    • rows : 데이터베이스 쿼리에 데이터를 랜더링 합니다.
    • page : 현재 페이지를 랜더링 합니다.
    • length : 데이터에 전체 길이를 랜더링 합니다. -1을 한 이유는 DB에 행에 전체는 1부터 시작이지만 for문은 0부터 시작이기 때문에 -1을 합니다.
    • page_num : 한 페이지에 보여줄 행에 갯수를 말합니다.





 2. page.ejs 파일 추가


 2-1. 페이징 ejs 파일을 생성 합니다.
기존에 리스트 페이지를 수정해서 페이징 기능이 가능하도록 만들 것입니다. 


 2-2. 파일안에 내용을 아래처럼 채워주세요.
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
<a href="/board/write">글쓰기</a>
<table border="1">
    <tr>
        <td>번호</td>
        <td>작성자</td>
        <td>제목</td>
        <td>조회수</td>
        <td>수정일</td>
        <td>등록일</td>
    </tr>
    <%
    for(var i = (page * page_num) - page_num; i < (page * page_num); i++) {
    if(i > length){
        i++;
    }else{
        var data = rows[i]
    %>
    <tr>
        <td><%= i + 1 %></td>
        <td><%= data.name %></td>
        <td><a href="/board/read/<%= data.idx %>"><%= data.title %></a></td>
        <td><%= data.hit %></td>
        <td><%= data.modidate %></td>
        <td><%= data.regdate %></td>
    </tr>
    <% }
    }
    %>
    <tr>
        <td colspan="6">
            <%
            for(var j = 0; j < rows.length / page_num; j++){
            %>
            [<a href="/board/page/<%= j + 1 %>"><%= j + 1 %></a>]
            <%
            }
            %>
        </td>
    </tr>
</table>
</body>
</html>

 2-3. 상단 노출 소스 설명
  • 20번 라인
    • (page * page_num) - page_num : 처음 보여줘야 할 게시물을 찾습니다. 2페이지면 "(2*10)-10=10" 10번째 데이터부터 노출 합니다.
    • page * page_num : 마지막으로 보여질 게시물 번호를 찾습니다. "2*10=20" 20번쨰 데이터까지 노출 합니다. 
  • 21번 라인
    • 현재데이터가 전체보다 크면 i 값을 늘려 종료 합니다.
  • 24번 라인
    • i값이 아직 전체 데이터보다 작다면 data를 담아서 리스트에 노출 합니다. 


 2-4. 하단 페이징 소스 설명
  • 40번 라인
    • length / page_num : 전체 갯수와 페이지 노출 갯수를 나누어 총 페이지를 계산 합니다.
  • 42번 라인
    • 계산된 페이지 만큼 노출 합니다. 




 3. 결과 화면 


 3-1. 게시판에 페이징이 추가되어 페이지를 이동하여 원하는 데이터를 한눈에 볼수 있게 되었습니다.


 3-2. 페이지 이동시에 URI에는 맨뒤에 숫자에 따라 페이지가 나타나고 번호도 순서에 따라 노출합니다. 



마무리


간단한 페이징 방법까지 배워봤습니다.




아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요


게시판 만들기 write 


안녕하세요.
고코더 입니다.


이전 시간에 게시판 리스트를 개발하였습니다.
이제는 이 리스트에 내용을 추가 할 수 있는
글쓰기 기능을 만들어보려고 합니다.

데이터베이스에 insert 하는 구문도 노드에서는
보기 쉽고 간단하게 구현이 가능합니다.



 1. '/wirte' board.js 글쓰기 코딩 추가 


 1-1. 저희가 이전 시간부터 만들어놓은
board.js에 코딩을 추가합니다. 


 1-2. 글쓰기 입력을 받을 폼을 표현할 라우터를 추가합니다. 
1
2
3
router.get('/write'function(req,res,next){
    res.render('write',{title : "게시판 글 쓰기"});
});
cs

 1-2. 소스 설명 
  • 21번 라인 
    • 글쓰기  write.ejs 를 랜더링 합니다. 




 2. write.ejs 파일 추가


 2-1. 글쓰기 뷰 파일을 생성합니다. 
ejs파일로 wirte란 이름으로 생성합니다. 
이곳은 프론트에 글쓰기 데이터를 입력 받을 페이지입니다.


 2-2. 글쓰기 내용 입력
입력할 HTML 내용은 기본 글쓰기 포맷입니다.
그대로 복사해서 페이지를 만들어 주세요. 
노드 소스가 없는 단순 HTML 페이지 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
 
 
<form action="/board/write" method="post">
    <table border="1">
        <tr>
            <td>작성자</td>
            <td><input type="text" name="name" id="name" required/></td>
        </tr>
        <tr>
            <td>제목</td>
            <td><input type="text" name="title" id="title" required/></td>
        </tr>
        <tr>
            <td>내용</td>
            <td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td>
        </tr>
        <tr>
            <td>패스워드</td>
            <td><input type="password" name="passwd" id="passwd" required/></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">글쓰기</button>
            </td>
        </tr>
    </table>
</form>
 
 
</body>
</html>
 
cs

 2-3. 소스 설명
  • 10번 라인
    • post로 꼭 method를 지정해줘야 합니다. 
    • 폼은 /board/write 로 전송합니다. 


 2-4. 개발 완료된 HTML 화면입니다.
글쓰기 버튼을 클릭시 로 '/board/write' post로 전송합니다. 




 3. '/write' post로 입력 받아 데이터를 DB에 입력 


 3-1. 게시판 글쓰기 화면에서'글쓰기' 버튼을 누른 후에 post로 
전송 받은 데이터를 데이터베이스에 입력하는 부분을 코딩할 것입니다.

 3-2. board.js에 소스를 추가 코딩 해주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
router.post('/write'function(req,res,next){
    var name = req.body.name;
    var title = req.body.title;
    var content = req.body.content;
    var passwd = req.body.passwd;
    var datas = [name,title,content,passwd];
 
 
    var sql = "insert into board(name, title, content, regdate, modidate, passwd,hit) values(?,?,?,now(),now(),?,0)";
    conn.query(sql,datas, function (err, rows) {
        if (err) console.error("err : " + err);
        res.redirect('/board/list');
    });
});
cs
 3-3. 소스설명
  • 25번 라인 
    • post로 /write로 들어올때 진입하게 됩니다.
  • 26~29번 라인
    • req 객체로 body 속성에서 input name 파라미터를 가져올 수 있습니다. 
  • 30번 라인
    • 모든 데이터를 배열로 묶습니다. 
  • 32번 라인
    • insert 쿼리문을 작성합니다. '?' 매개변수로 배열에 있는 데이터와 순서대로 맵핑되어 입력 됩니다.
  • 33번 라인 
    • query 함수로 sql를 실행하고 datas로 매개변수로 데이터를 입력합니다. 
  • 35번 라인
    • 오류 없이 데이터가 입력되면 다시 list 페이지로 이동 합니다. 




 4. 결과 화면 


 4-1. 리스트 에서 글쓰기를 클릭 합니다.


 4-2. 글쓰기에서 내용을 입력하고 글쓰기 버튼을 누릅니다.


 4-3. 글쓰기가 완료되면 다시 리스트 페이지로 돌아와서 입력된 데이터를 확인 가능합니다.


가장 기초적인 데이터로 만드는 예제 입니다.
컬럼을 추가하거나 유효성 체크를 추가해서 개인실습을 해보세요.


마무리


어느덧 글쓰기까지 완료 되었네요


아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.





댓글을 달아 주세요


게시판 만들기 LIST 


안녕하세요.
고코더 입니다.


오늘부터 기초적인 예제를 마무리 하고 게시판 만들기로 실전을 다져볼려고 합니다. 
기본예제에서 배우지 못한 소스들이 나온다고 해도 긴장하지 마시고
천천히 한줄한줄 고민하면서 따로오시면 금방 노드가 머리속에 익혀질거라 생각 됩니다. 



 1. 들어가기전에 체크 해야 할 사항


 1-1. 데이터베이스 참조파일 생성이 되어 있는지 확인
이전에 require()로 DB 소스를 참조로 사용하는 방법을 배웠습니다.
해당 DB폴더가 자신에 로컬에 설치되어 있고 mysql에 정상 접속 되는지 확인해보세요.


 1-2. 로컬에 Mysql이 설치 되어 있는지 확인해보세요.
이제는 데이터베이스와 연동하여 작업을 해야 합니다. 로컬에 mysql 설치가 필수 입니다.
-> 
제 데이터베이스 설정은 이렇습니다.
스키마 : nodedb
테이블 : board

 1-3. 해당 sql 문을 실행 하여 테이블과 데이터 하나를 생성 해주세요.
use nodedb;


CREATE TABLE `board` (
  `idx` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `title` varchar(50) NOT NULL,
  `content` mediumtext NOT NULL,
  `regdate` datetime NOT NULL,
  `modidate` datetime NOT NULL,
  `passwd` varchar(50) NOT NULL,
  `hit` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`idx`)
);


INSERT INTO `nodedb`.`board`(`name`,`title`,`content`,`regdate`,`modidate`,`passwd`,`hit`)
VALUES ('이진현','안녕하세요.','고코더입니다','2019-07-31 20:50:54','2019-07-31 20:50:54','1234',0);




 2. board.js 생성 그리고 list 라우터 코딩 


 2-1. 게시판을 실행할 파일을 생성 합니다. 게시판에 관련된 모든 동작인  파일에서 실행 합니다.


 2-1. list 페이지 내용을 코딩 합니다.  board.js를 생성하였으니 맨위에 4줄 참조와 데이터베이스 그리고 마지막줄에 exports는 공통으로 사용합니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var express = require('express');
var router = express.Router();
var mysql_odbc = require('../db/db_conn')();
var conn = mysql_odbc.init();
 
 
router.get('/list/:page'function(req, res, next) {
    var page = req.params.page;
    var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
        "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate from board";
    conn.query(sql, function (err, rows) {
        if (err) console.error("err : " + err);
        res.render('list', {title: '게시판 리스트', rows: rows});
    });
});
module.exports = router;

cs


 2-2. 소스 설명
  • 1~4번 라인 
    • express와 데이터베이스를 연결 하는 부분입니다. 
  • 6번 라인
    • uri를 '/list/:page' 형태로 받습니다. board/list/(페이지 숫자) 형식으로 게시판 리스트를 노출하는 방식입니다.
  • 7번 라인
    • uri 변수 ':page'로 맵핑된 page 값을 req 객체로 가져옵니다. 
    • 페이징 개발을 위해 미리 선언해놓습니다.
  • 8~9번 라인
    • sql문을 수행 합니다. 
  • 10번 라인
    • select된 행을 가져와서 rows변수에 담습니다.. 그리고 오류가 있다면 err에 담습니다.
  • 12번 라인
    • 수행된 SQL에 데이터를 list 뷰로 랜더링 합니다. 


라우터 파일에서 select 된 내용을 프론트에 노출하는 기본적인 예제 입니다. 
자바스크립트로 된 코딩으로 인해 코드가 한눈에 들어옵니다. 



 3. list.ejs 생성 


 3-1. board.js에서 list에서 랜더링한 데이터를 ejs에서 받아 처리 해야 합니다. 
랜더링 값을 list로 했기 때문에 list.ejs라는 파일을 생성 합니다. 


 3-2. 그리고 ejs안에 코딩을 채워넣어주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
<a href="/board/write">글쓰기</a>
<table border="1">
    <tr>
        <td>번호</td>
        <td>작성자</td>
        <td>제목</td>
        <td>조회수</td>
        <td>수정일</td>
        <td>등록일</td>
    </tr>
    <%
    for(var i=0; i<rows.length; i++)
    {
        var data = rows[i];
    %>
    <tr>
        <td><%=data.idx%></td>
        <td><%=data.name%></td>
        <td><a href="/board/read/<%=data.idx%>"><%=data.title%></a></td>
        <td><%=data.hit%></td>
        <td><%=data.modidate%></td>
        <td><%=data.regdate%></td>
    </tr>
    <%}%>
</table>
</body>
</html>

cs

 3-3. 소스설명
  • 20번 라인 
    • 랜더링 된 rows에 길이를 가져옵니다. for문으로 데이터에 행만큼 리스트를 출력 합니다.
  • 22번 라인
    • 데이터를 보기 쉽게 하기 위해 data 변수에 담습니다. 
  • 25~30번 라인 
    • data.변수로 해당 SQL문에 컬럼이름으로 가져옵니다. 
  • 32번 라인
    • 반복문을 종료합니다. 
    


mvc 패턴이 그렇지만 뷰 소스가 깔끔하게 나오는걸 확인 가능합니다.
노드 태그(<%%>) 속에 문법도 자바스크립트와 동일하여 퍼블리셔나 디자이너도
간단한 수정을 할 수 있는 구조 입니다. 



 4. /board/list 루트로 들어올때 페이지 이동


 4-1. 개발이 완료 된분중에  'http://localhost:3000/board/list/' 페이지로 접속 시도 하는 분들은
404오류가 보여서 난감하셨을거 같습니다. 저희가 코딩한 list 라우터를 보면 
/list/1 숫자까지 페이지가 있을때 바인드 됩니다. 
그럼 board/list/ 루트로 접속시에 어떻게 코딩을 추가 해야 할까요?

 4-2.정답은 board.js 코딩을 추가 합니다. 
1
2
3
router.get('/list'function(req, res, next) {
    res.redirect('/board/list/1');
});

cs

 4-3. /list로 접근시에 res.redirect를 이용해 '/board/list/1' 페이지로 이동시킵니다. 



 5. 결과 화면 


 5-1.결과 화면은 게시판 리스트가 간단하게 생성 되었습니다. 아직은 게시글에 내용만 출력하는 단계이지만 
여기까지 따라오신 것 만으로도 노드에 맛을 조금 알았을거라 생각 합니다. 

 5-2.노출 화면은 기본 노드 css를 사용하여 기본 테이블 뼈대 입니다.
부트스트랩으로 멋들어지게 만들고 싶지만 node 강의이기에 기초 HTML로 개발 하였습니다. 




마무리


이해가 안되거나 어렵게 느껴진다면
다시 처음으로 돌아가 기초부터 반복으로 연습해보세요.



아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요

  • 송바 2019.09.29 07:37  댓글주소  수정/삭제  댓글쓰기

    4번이 잘 이해가 안됩니다. board.js의 6번 라인에 해당 구문을 추가하면 404에러가 뜨지 않는다는건가요..?

    • Favicon of https://gocoder.tistory.com 고코더 2019.09.29 08:39 신고  댓글주소  수정/삭제

      네 맞습니다 ! 저희는 /list라는 페이지가 없기에 res.redirect('/board/list/1'); 으로
      페이지를 리다이렉트 시키는 것입니다^^
      그래서 프론터가 /list으로 들어올떄때 404를 방지하기 위해 페이지 이동을 시키는 것입니다

    • 송바 2019.09.29 13:53  댓글주소  수정/삭제

      제가 잘 이해를 못하는 걸까요 ㅠㅠ
      router.get('/list', function(req, res, next) {
      res.redirect('/board/list/1');
      });
      구문을 board.js 파일 6번 라인에 추가하여도 3000/board/list/1로 접속 했을 때 똑같이 404 에러가 발생합니다 ㅠㅠ

    • Favicon of https://gocoder.tistory.com 고코더 2019.09.30 18:47 신고  댓글주소  수정/삭제

      ㅠㅠ404가 나오지 않도록
      넣는 코드인데
      혹시 그대로 붙혀넣어서
      한번 돌려보시겠어요?

      /list 로 들어올때
      /board/list/1로 보내는 구문 입니다.
      한번 천천히 보면서 다시 해보세요!

    • 송바 2019.09.30 21:41  댓글주소  수정/삭제

      board라는 폴더가 따로 있는건가요..! 아무리 해도 404에러가 뜨네요 ㅠ

    • Favicon of https://gocoder.tistory.com 고코더 2019.10.01 13:43 신고  댓글주소  수정/삭제

      몇일째 열공 모드시군요
      멋지십니다.
      댓글로 도움 드리자니 한계가 있네요

      흠 혹시 소스 한번 저에게 보내보시겠어요?
      여기에 있는 제안협찬 메일로
      소스 보내면 확인해볼게요^^

      https://gocoder.tistory.com/notice/682

  • 초보 2019.10.30 12:15  댓글주소  수정/삭제  댓글쓰기

    글 보다가 궁금한게 있어서 여쭤봅니다.

    서버에서 데이터값을 렌더링시키면 현재 선생님의 글을 보면 rows에 rows를 넣어서 rows가 배열로 렌더링 되는데 이것을 포문을 통하여 값을 저장했는데 이것을 pug에서 실행할려면 어떻게 해야 할까요 ?? 여기부분에서 막혀있어서 찾아봐도 없네요...

    • Favicon of https://gocoder.tistory.com 고코더 2019.10.30 16:39 신고  댓글주소  수정/삭제

      학습자님 안녕하세요!.
      jade로 개발중이시군요
      제 강의에서는 하필 ejs를 써서 헤매고 계시군요. jade를 요구하는 분도 많은거 같아 이 부분도 강의를 남겨보도록 노력하겠습니다 그 전에 댓글님에 답은 혹시
      여기에 답변을 나누면서 나오는 소스가 도움이 되지 않을까요?
      https://github.com/pugjs/pug/issues/909

  • 뉴비 2019.11.27 00:19  댓글주소  수정/삭제  댓글쓰기

    저도 위에 계신 분처럼 6번 라인에 추가해도 안되길래 뭐지하고 생각해봤는데 app.js에 추가해줘야할걸 안해줘서 그런거였네요
    좋은 강의 감사합니다