게시판 만들기 read
안녕하세요.
고코더 입니다.
이번 시간에는 리스트에 있는 글에
내용을 확인하는 상세 페이지를 개발 합니다.
지금까지 강의를 잘 따라오신 분들이라면
이 글을 안보고도 개발이 가능합니다.
지금 내가 어느정도 노드가 자신있는지 테스트 해보실려면
이 강의 전에 읽기 페이지를 한번 스스로 만들어보세요.
● 1. '/read' board.js 상세보기 코딩 추가
● 1-1. board.js에 코딩을 추가합니다.
● 1-2. 상세보기를 표현할 라우터를 추가합니다.
1 2 3 4 5 6 7 8 9 10 11 | router.get('/read/:idx',function(req,res,next) { var idx = req.params.idx; var sql = "select idx, name, title, content, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " + "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board where idx=?"; conn.query(sql,[idx], function(err,row) { if(err) console.error(err); res.render('read', {title:"글 상세", row:row[0]}); }); }); | cs |
● 1-2. 소스 설명
- 39번 라인
- read라는 uri 뒤에 idx 게시글의 고유번호를 받습니다.
- 42번 라인
- 쿼리를 작성합니다. 한개에 글만 조회 하기 때문에 마지막 idx 에 매개변수를 받습니다.
- 44번 라인
- 매겨변수에 idx를 전달 합니다.
- 47번 라인
- row[0]에 데이터를 랜더링 합니다. 한개에 데이터만을 가져오도록 첫번째 행만 요청합니다.
쿼리에 idx만 조회 하고 하나에 데이터를 가져오는거 빼고는 글 리스트와 거의 동일한 구조입니다.
● 2. read.ejs 파일 추가
● 2-1. 글을 확인하는 글 상세 파일을 생성합니다.
read.ejs 이름으로 생성합니다.
리스트에 데이터를 클릭할때 자세히 확인할 수 있는 페이지입니다.
● 2-2. 글 상세 페이지 내용 입력
상세 내역 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 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css'/> </head> <body> <h1><%= title %></h1> <form action="/board/update" method="post"> <table border="1"> <input type="hidden" name="idx" value="<%=row.idx%>"/> <tr> <td>작성자</td> <td><input type="text" name="name" id="name" value="<%=row.name%>" required/></td> </tr> <tr> <td>제목</td> <td><input type="text" name="title" id="title" value="<%=row.title%>" required/></td> </tr> <tr> <td>내용</td> <td><textarea name="content" id="content" cols="30" rows="10" required><%=row.content%></textarea></td> </tr> <tr> <td>패스워드</td> <td><input type="password" name="passwd" id="passwd" required/></td> </tr> <tr> <td>변경일</td> <td><%=row.modidate%></td> </tr> <tr> <td>등록일</td> <td><%=row.regdate%></td> </tr> <tr> <td>조회수</td> <td><%=row.hit%></td> </tr> <tr> <td colspan="2"> <button type="submit">글 수정</button> <a href="/board/list">목록</a> </td> </tr> </table> </form> </body> </html> | cs |
● 2-3. 소스 설명
- 10번 라인
- post로 꼭 method를 지정해줘야 합니다.
- 폼은 /board/upate로 전송해서 수정 기능으로 보냅니다.
● 2-4. 개발 완료된 HTML 화면입니다.
글쓰기 버튼을 클릭시 로 '/board/update'로 post를 전송합니다.
상세 페이지를 조회 하는 예제 입니다. 개발하기 가장 쉬운 페이지입니다.
마무리
처음 제안처럼 혼자 개발 해보셨나요?
역시 해내셨군요!
'IT_Developers > Node.js' 카테고리의 다른 글
| Node.js - express 게시판 만들기 / 페이징 개발/ page (0) | 2019.08.02 |
|---|---|
| Node.js - express 게시판 만들기 / 글 수정 / Update (0) | 2019.08.01 |
| Node.js - express 게시판 만들기 / 글쓰기 / insert / (3) | 2019.08.01 |
| Node.js - express 게시판 만들기 / 리스트페이지 / select / (15) | 2019.08.01 |
| Node.js - express 라우터 req res, uri 설명 (0) | 2019.07.31 |
댓글