게시판 만들기 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. 글쓰기가 완료되면 다시 리스트 페이지로 돌아와서 입력된 데이터를 확인 가능합니다.
가장 기초적인 데이터로 만드는 예제 입니다.
컬럼을 추가하거나 유효성 체크를 추가해서 개인실습을 해보세요.
마무리
어느덧 글쓰기까지 완료 되었네요
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - express 게시판 만들기 / 글 수정 / Update (0) | 2019.08.01 |
|---|---|
| Node.js - express 게시판 만들기 / 글 상세페이지 / select / (0) | 2019.08.01 |
| Node.js - express 게시판 만들기 / 리스트페이지 / select / (15) | 2019.08.01 |
| Node.js - express 라우터 req res, uri 설명 (0) | 2019.07.31 |
| Node.js - require()을 이용한 외부파일 참조 (5) | 2019.07.31 |
댓글