DB connection, mongose, mongoDB(2)

---

들어가기
controller에서 DB를 부르는
방법을 알아보았다.
이제 pug에 적용되는 부분을 확인한다.

---

0. src/views/base/pug

doctype html 
html(lang="ko")
    head 
        //block head
        title #{pageTitle} | JmTube
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
    body 
        header 
            h1=pageTitle
        nav 
            ul 
                li 
                    a(href='/videos/upload') Upload Video
                li    
                    a(href='/') Home
                li    
                    a(href='/search') Search
                if loggedIn 
                    li    
                        a(href='/logout') Logout
                    li    
                        a(href='/my-profile') #{loggedInUser.name}의 Profile
                else
                    li    
                        a(href='/join') Join
                    li    
                        a(href='/login') Login
        main
            block content
    include partials/footer.pug

1. src/views/upload.pug

extends base.pug

block content 
   h3 hello from upload
   if errorMessage 
       span=errorMessage ///postUpload controller에서 보낸 props.
   form(method="POST") ///method는 POST
       input(name="title", placeholder='Title',required, type='text', minLength=3)
       input(name="description", placeholder='description',required, type='text')
       input(name="hashtags", placeholder='hashtags',required, type='text')
       input(type='submit', value='Upload Video')

2. src/views/watch.pug

extends base.pug

//- block head 
//-     title Watch | JmTube

block content  ///seeVideo controller에서 video를 찾아서 prop으로 보냈음.
   h1=video.title
   p=video.description
   small=video.createdAt 
   each hashtag in video.hashtags  ///hashtags를 뿌려줌
           li=hashtag
   h3 #{video.views} #{video.views === 1 ? "view" : "views"}
   a(href=`${video.id}/edit`) Edit Video →
   ///`$ 앞에 /를 붙이면, localhost:4000이 날아가버림.
   br
   a(href=`${video.id}/delete`) Delete Video →

3. src/views/edit.pug

extends base.pug

//- block head 
//-     title Edit | JmTube

block content 
    h4 Update Video!
    form(method="POST") ///getEdit에서 video data를 찾아서 기본값으로 넣어줌
        input(name="title",placeholder="Video Title", value=video.title, required)
        input(name="description", placeholder='description',required, type='text', value=video.description)
        input(name="hashtags", placeholder='hashtags',required, type='text', value=video.hashtags.join())
        ///join()은 hashtags를 다시 하나로 만들어 줌, static 거치기 이전으로,
        input(value='Save', type="submit") 
 

4. src/views/search.pug

extends base.pug
include mixins/video

block content 
   form(method="GET")
       input(name="keyword", placeholder="Search by title", type=text)
       input(type='submit', value="Search Now")
   ///search는 GET요청임을 확인해둔다.
   ///seatch로 받아온 videos들을 mixins/video를 활용해서 뿌려준다
   
   each video in videos 
       +video(video)