[모각코 5일차] article 구현하기 회고

최종목표 : Node.js로 충남대 커뮤니티 만들기

목표

• board page 구현하기
• Article을 쓰는 write page 구현하기
• Article을 보여주는 view page 구현하기

진행사항

• board page 구현하기

대학 게시판 page이다.

 

처음에는 list태그로 짜다가 리스트보다 각각 값을 주기 편한

 

table태그로 구현했다. 아직 db에서 값을 받아오지 않는다.

table(cellspacing="0") 
    thead
        tr.table_head
            th.id Index
            th.title 제목
            th.writer 글쓴이
            th.view 조회수
            th.date 날짜
    tbody
        tr.table_body
            td.id 10
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 9
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 8
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 7
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 6
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 5
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 4
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 3
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 2
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08
        tr.table_body
            td.id 1
            td.title
                a(href="../article/id=1") Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            td.writer alencion
            td.view 0
            td.date 2019-01-08..

 

 

Article을 쓰는 write page 구현하기

 

article을 쓰는 write 버튼을 눌렀을 시

 

로그인을 해야만 write 페이지에 들어갈 수 있도록

 

html에 script파일을 만들어주었다.

 

var isLoggedIn = document.getElementById("write-btn");
function btn(){
    if(document.getElementById("loggedin")) {
        window.location.href = '../article/write';
    }
    else
        alert('Need Sign In');
};

form태그을 이용하여 article write 페이지를 구현했다.

 

form.write(method="post" action="./write")
    input.title(type="text" name="title" placeholder="Title" required)
    textarea.descript(name="description" contenteditable="true")
    input.submit(type="submit")

 

 

 

 

Article을 보여주는 view page 구현하기

 

article view 페이지 이다.

 

조회수 생성날짜 저자 타이틀과 본문을

 

db에서 받아와서 구현하였다.

 

 

 

 

 

+ 추가 : 비밀번호 잊어버렸을시 이메일로 비밀번호 재설정하는 page 구현함.

 

 

 

회고

시간이 좀 남아서 기존의 sign-in page를 참고하여

 

패스워드 잃어버렸을 때의 page를 구현했다.