게시판 만들기 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를 전송합니다. 


상세 페이지를 조회 하는 예제 입니다. 개발하기 가장 쉬운 페이지입니다. 




마무리


처음 제안처럼 혼자 개발 해보셨나요?
역시 해내셨군요!




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



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



댓글을 달아 주세요