[유튜브 클론코딩] 2.25 More Controllers

2.25 More Controllers

비디오를 클릭하면 비디오 상세 페이지로 이동하도록 하기

누군가가 비디오를 클릭하면 비디오 상세 페이지로 보이도록 하고 싶다. mixin을 수정한다.

 

mixin videoBlock(video = {})

    .videoBlock

        a(href=routes.videoDetail(video.id))

            video.videoBlock__thumbnail(src=video.videoFile, controls=true, autoplay=true)

            h4.videoBlock__title=video.title

            h6.videoBlock__views=video.views 

↑ videoBlock.pug

이제 videoBlock을 사용하는 곳에서 인자를 입력할 때 id: video.id를 추가로 보내준다.

 

extends layouts/main

include mixins/videoBlock

block content 

    .videos 

        each video in videos 

            +videoBlock({

                id: video.id,

                title: video.title,

                views: video.views,

                videoFile: video.videoFile

            })

↑ home.pug

 

이제 이렇게하면

이 링크를 누르면 videoDetail로 이동하게 된다.

 

 

로그아웃 버튼을 누르면 home 페이지로 이동하게 하기

이제 로그아웃을 보자. 로그아웃을 클릭하면 Log Out 페이지로 가는 것 대신에, 로그아웃 처리를 한 후에 home 페이지로 redirect 되도록 하고 싶다.

userController에서 logout을 보자.

 

export const logout = (req,res) => {

    //To Do : Process Log Out(로그 아웃 처리)

    res.redirect(routes.home);

}

↑userController.js

 

그리고 logout.pug 파일은 필요 없으니까 삭제한다.

이제 logout을 누르면 home으로 돌아온다.

 

upload 링크를 누르면 오류가 난다. 경로가 /videos/upload로 되어있어야 하는데 /upload로만 되어있기 때문

 

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .header__column

        form(action=routes.search, method="get")

            input(type="text", placeholder="Search by term...", name="term")

    .header__column

        ul

            if !user.isAuthenticated

                li

                    a(href= routes.join) Join

                li

                    a(href= routes.login) Log In

            else

                li

                    a(href= `/videos${routes.upload}`) Upload

                li

                    a(href= routes.userDetail(user.id)) Profile 

                li

                    a(href= routes.logout) Logout      

↑ header.pug

다음과 같이 수정한다.

 

upload - getUpload, postUpload 만들기

upload도 getUpload와 postUpload가 필요하다. videoController에 작업해야겠지

export const getUpload = (req, res) => res.render("upload", {pageTitle: "Upload"});

export const postUpload = (req, res) => {

    const{body: {file,title,description}} = req;

    //To Do: Upload and save video

};

↑ videoController.js

 

비디오를 업로드한다고 생각해보면,

업로드 후에 새로 생성된 비디오의 id에 해당하는 videoDetail 페이지로 redirect 할 것이다.

videoDetail 함수의 인자로 이 비디오의 id를 입력하자.(db.js에 있는 id)

이건 가짜 데이터의 id이다

. 걱정하지 않아도 된다.

export const getUpload = (req, res) => res.render("upload", {pageTitle: "Upload"});

export const postUpload = (req, res) => {

    const{body: {file,title,description}} = req;

    //To Do: Upload and save video

    res.redirect(routes.videoDetail(324393));

};

↑ videoController.js

마찬가지로 videoRouter로 가서 getUpload, postUpload 부분을 수정해준다.

이제 잘 뜨는 것을 볼수가 있다.

 

보안 신경쓰기(required = true)

이제 보안을 신경써보자. 정보를 아무것도 입력하지 않고 upload를 클릭해도 비디오 상세 페이지로 이동한다. 이건 잘못된 것이다.

 

extends layouts/main

block content 

    .form-container 

        form(action=`/videos${routes.upload}`, method="post")

            label(for="file") Video File

            input(type="file", id="file", name="file" required=true)

            input(type="text",name="title", placeholder="Name" required=true)

            textarea(name="description", placeholder="Description" required=true)

            input(type="submit", value="Upload Video")

↑ upload.pug

input에 모두 required=true를 주었다.

join과 login페이지에도 같은 작업을 해준다.