작업 노트

게시판 예제 본문

javascript/w3schools nodejs

게시판 예제

달빛가면 2017. 2. 23. 10:57

1. URL 설계


(1) Get 메소드로 URL 호출


1. 게시판 글 목록 표시 화면

http://localhost/board/list/?page=1


2. 게시판 글 조회 화면

http://localhost/board/read/?idx=1


3. 게시판 글 쓰기 화면

http://localhost/board/write


3. 게시판 글 수정 화면

http://localhost/board/modify


(2) Post 메소드로 URL 호출


1. 게시판 글 쓰기 액션

http://localhost/board/write


2. 게시판 글 수정 액션

http://localhost/board/modify


2. 단계적 구현


1단계

게시판 글 전체 목록 표시, 게시판 글 쓰기


2단계

게시판 글 조회 화면, 게시판 글 수정


3단계

게시판 페이지 인디케이터 처리





3. 코딩 시작~


(1) 라우팅 설정

app.js 파일 수정

routes 모듈을 통해 'http://localhost/board/list/?page=1' 연결 설정


app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var routes = require('./routes/index');
var users = require('./routes/users');
var board = require('./routes/board');    //<--------------- 추가

var app = express();

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

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/board', board);         // <-----------------------  추가



(2) DB 커넥션 및 글 가져오기

board.js 파일을 생성한다. (users.js 파일과 같은 routes 폴더 안에 둔다)

users.js 파일을 베끼고, node-mysql 의 샘플 중 pool 쪽을 베껴서 순식간에 작성 가능


board.js

 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
var express = require('express');
var router = express.Router();

//   MySQL 로드
var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit: 3,
    host: 'localhost',
    user: 'guestmember',
    database: 'test',
    password: '1234'
});

/* GET users listing. */
router.get('/', function(req, res, next) {
    // 그냥 board/ 로 접속할 경우 전체 목록 표시로 리다이렉팅
    res.redirect('/board/list/1');
});

router.get('/list/:page', function(req,res,next){

    pool.getConnection(function (err, connection) {
        // Use the connection
        var sqlForSelectList = "SELECT idx, creater_id, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate,hit FROM board";
        connection.query(sqlForSelectList, function (err, rows) {
            if (err) console.error("err : " + err);
            console.log("rows : " + JSON.stringify(rows));

            res.render('list', {title: ' 게시판 전체 글 조회', rows: rows});
            connection.release();

            // Don't use the connection here, it has been returned to the pool.
        });
    });
});

module.exports = router;



(3) 전체 글 리스트의 html 파일을 ejs 로 작성

list.ejs 파일을 views 폴더에 생성한다.

역시 index.ejs 파일을 베껴서 작성하면 금방 작성할 수 있다.


list.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
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>

<a href="/board/write">글쓰기로 이동</a>
<br>
<br>

<table border="1">
    <tr>
        <td>번호</td>
        <td>작성자</td>
        <td>제목</td>
        <td>조회수</td>
        <td>변경일</td>
    </tr>

<%
     for(var i=0; i<rows.length; i++)
     {
        var oneItem = rows[i];
%>
    <tr>
        <td><%=oneItem.idx%></td>
        <td><%=oneItem.creater_id%></td>
        <td><%=oneItem.title%></td>
        <td><%=oneItem.hit%></td>
        <td><%=oneItem.modidate%></td>
    </tr>

<%
     }
%>
</table>

</body>
</html>







(4) jquery 다운로드 및 적용

클라이언트 사이드 자바스크립트 작성의 생산성을 위해 jquery를 사용한다.

>> jquery 사이트에서 다운로드<<


다운로드 후 public 폴더 내의 javascripts 폴더에 두도록 하자




(5) 글쓰기 화면인 write.ejs 파일을 views 폴더에 생성

역시 기존에 존재하는 ejs 파일을 복붙으로 쉽게 만들 수 있다.

>>>>개발자에게 가장 필요한 단축키는 바로 복붙이다<<<


write.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
36
<!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="creator_id" id="creator_id"/></td>
        </tr>
        <tr>
            <td>제목</td>
            <td><input type="text" name="title" id="title"/></td>
        </tr>
        <tr>
            <td>내용</td>
            <td><textarea name="content" id="content" cols="30" rows="10"></textarea></td>
        </tr>
        <tr>
            <td>패스워드</td>
            <td><input type="password" name="passwd" id="passwd"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">글쓰기</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>



jquery 를 통해서 유효성 검사를 살짝 추가해보자 body 가 끝나기 바로 전에 삽입하다


write.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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
    <script src="/javascripts/jquery-1.11.2.min.js"></script>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>

<form action="/board/write" method="post" onsubmit="return onWriteSubmit()">
    <table border="1">
        <tr>
            <td>작성자</td>
            <td><input type="text" name="creator_id" id="creator_id" 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>

<script>
    function onWriteSubmit()
    {
        if ( $("#creator_id").val().trim() == "" )
        {
            var message = "아이디를 입력해 주세요";
            $("#creator_id").val("");
            $("#creator_id").focus();
            alert(message);
            return false;
        }

        if ( $("#title").val().trim() == "" )
        {
            var message = "제목을 입력해 주세요";
            $("#title").val("");
            $("#title").focus();
            alert(message);
            return false;
        }

        if ( $("#content").val().trim() == "" )
        {
            var message = "본문 내용을 입력해 주세요";
            $("#content").val("");
            $("#content").focus();
            alert(message);
            return false;
        }

        if ( $("#passwd").val().trim() == "" )
        {
            var message = "패스워드를 입력해 주세요";
            $("#passwd").val("");
            $("#passwd").focus();
            alert(message);
            return false;
        }
    }
</script>

</body>
</html>




(6) board.js 파일에 write.ejs 파일 연결


board.js

1
2
3
4
// 글쓰기 화면 표시 GET
router.get('/write', function(req,res,next){
    res.render('write',{title : "게시판 글 쓰기"});
});



연결 확인





(7) board/write 로 post 통신 요청 시 처리로직 작성


board.js

 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
// 글쓰기 로직 처리 POST
router.post('/write', function(req,res,next){

    var creator_id = req.body.creator_id;
    var title = req.body.title;
    var content = req.body.content;
    var passwd = req.body.passwd;
    var datas = [creator_id,title,content,passwd];

    pool.getConnection(function (err, connection)
    {
        // Use the connection
        var sqlForInsertBoard = "insert into board(creator_id, title, content, passwd) values(?,?,?,?)";
        connection.query(sqlForInsertBoard,datas, function (err, rows) {
            if (err) console.error("err : " + err);
            console.log("rows : " + JSON.stringify(rows));

            res.redirect('/board');
            connection.release();

            // Don't use the connection here, it has been returned to the pool.
        });
    });

});


쿼리에 들어가는 ? 구문은 datas 배열에 순서대로 넣어서 전달한다.



http://localhost:3000/board/write 에 접속하여, 게시판 글을 쓰고 '글쓰기' 버튼 클릭


DB 값 삽입 확인





출처: http://devlecture.tistory.com/entry/06-express-본격-게시판-코딩-13 [재미있는 개발 이야기]

게시판소스.zip


저작자표시

'javascript > w3schools nodejs' 카테고리의 다른 글

게시판 시작해 봅시다 - 1  (0) 2017.02.23
게시판 요기 괜찮네 ㅋ  (0) 2017.02.23
[Node.js 강좌] 게시판 페이지 기능 추가  (0) 2016.10.28
Node.js + MySQL 데이터베이스를 통한 게시판  (0) 2016.10.28
Node.js 참고 사이트  (0) 2016.06.24
공유하기 링크
'javascript/w3schools nodejs' Related Articles more
Comments