게시판 만들기 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 기본편



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





댓글을 달아 주세요

  • 코딩입문자 2020.05.04 22:56  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 코딩입문자입니다.
    우선, 고코더님께서 이렇게 좋은 정보 같이 공유해주셔서 진심으로 감사드립니다. 정말 이해하기 쉽게 설명해주신 것 같아요.
    잘 따라했지만, 막히는부분이 있어서 몇가지 질문이 있어서 댓글남깁니다.

    우선 첫번째로, 이전 리스트 페이지에서 404 에러때문에 redirect를 설정해줬는데요.
    http://localhost:3000/board/list <- 현재 여기로 접속하면 http://localhost:3000/board/list/1 <-이렇게 바뀌는게 맞지 않나요?
    http://localhost:3000/board/list <- 여기로 접속이 안됩니다..
    위에 설명 보면 http://localhost:3000/board/list/ <-여기에서 글쓰기 누르라고 설명이 되어있어서요, 조금 이해가 되지않네요 ㅠㅠ

    그리고 두번째는, http://localhost:3000/board/write <에서 게시판 글쓰기(작성자,제목, 내용, 패스워드 입력후) 누르면
    TypeError: Cannot read property 'name' of undefined <- 이런 에러가 나오네요. 왜그런걸까요?
    제가 http://127.0.0.1/phpmyadmin <-에서 db값을 insert로 임의의 값을 넣어줬을때는 리스트에 잘 반영이 됩니다. ㅠㅠ

    도움 부탁드리겠습니다.

  • 이상하네요 2020.05.05 15:52  댓글주소  수정/삭제  댓글쓰기

    입력한 데이터가 리스트페이지에 올라오지 않네요 ㅠ