form, input, get, post

---

들어가기
1. pug에서 form을 만드는 방법을 알아본다
2. form에 들어가는 input, submit등을 알아본다
3. form에서 POST로 data를 보내는 방법을 알아본다.
4. GET으로 data를 받는 방법을 알아본다.

---

1. src/routes/videoRouter.js

import express from 'express'  ///무조건 들어가야 함.
import {
  getEdit,
  getUpload,
  postEdit,
  postUpload,
  removeVideo,
  seeVideo,
} from '../controllers/videoController'

const videoRouter = express.Router()

videoRouter.route('/upload').get(getUpload).post(postUpload)
--->하나의 url에서 get, post 2개를 모두 받는 경우, 위와 가티 작성
--->대신 method에 따라, 사용되는 controller는 다르니까,
--->다르게 적어주고 만든다(getUpload, postUpload)
videoRouter.route('/:id(\\d+)').get(seeVideo)
//videoRouter.get('/:id(\\d+)', seeVideo)
--->하나의 url에 get만 있는경우, 위의 두가지 방법 모두 가능하다.
videoRouter.route('/:id(\\d+)/edit').get(getEdit).post(postEdit)
// videoRouter.get('/:id(\\d+)/edit', getEdit)
// videoRouter.post('/:id(\\d+)/edit', postEdit)
--->따로 적어도 되고, 하나로 적어도 되고, 하나의 문장이 깔끔함.
videoRouter.get('/:id(\\d+)/remove', removeVideo)

export default videoRouter

2. src/controllers/videoContoroller.js

const fakeUser = {
  username: 'jinyinshu',
  loggedIn: false,
}

///여러 controller에서 사용될 data라 controller바깥으로 꺼집어냄.
///여기에 data를 입력하고, edit할 거라서 let으로 만듬.
let videos = [
  {
    title: 'hello1',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 59,
    id: 1,
  },
  {
    title: 'hello222',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 59,
    id: 2,
  },
  {
    title: 'hello333',
    rating: 5,
    comments: 2,
    createdAt: '2min ago',
    views: 1,
    id: 3,
  },
]

export const trending = (req, res) => {
  const videoss = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  return res.render('home', {
    pageTitle: 'home',
    fakeUser: fakeUser,
    videos,
    videoss,
  })
}
///home.pug를 rendering하고, props로 
///pageTitle, fakeUser, video, videoss등을 보내줌.

export const search = (req, res) => res.send('search')

export const seeVideo = (req, res) => {
  const { id } = req.params
  console.log('show video', id)
  const video = videos[id - 1]
  return res.render('watch', { pageTitle: `Watch ${video.title}`, video })
}
///req.params로 클릭한 data의 id를 받아옴.
///아이디 3을 받아왔다면, data에서는 video[2](videos의 두번째)가
///그 data임.
///배열은 0부터 시작되기 때문
///watch.pug를 rendering해 주고, watch에 
///pageTitle과 video를 props로 보내줌.

export const getEdit = (req, res) => {
  const { id } = req.params
  const video = videos[id - 1]
  return res.render('edit', { pageTitle: `Editing ${video.title}`, video })
}
///req.params로 클릭한 data의 id를 받아옴.
///아이디 3을 받아왔다면, data에서는 video[2](videos의 두번째)가
///그 data임.
///배열은 0부터 시작되기 때문
///edit.pug를 rendering해 주고, edit 
///pageTitle과 video를 props로 보내줌.

export const postEdit = (req, res) => {
  const { id } = req.params
  const { title } = req.body
  videos[id - 1].title = title
  return res.redirect(`/videos/${id}`)
}
///req.params로 id를 받아옴.
///edit.pug파일에서 만든 form(input)에서 입력한
///data를 req.body로 받아서 기존 data를 edit해 준 다음,
///`/videos/${id}` page로 redirect함.
///참고로 getEdit나 postEdit나 이용되는 page는 edit.pug로 같음.
///한 page에서 get, post 둘다 적용됨.

export const removeVideo = (req, res) => res.send('remove')

export const getUpload = (req, res) => {
  return res.render('upload', { pageTitle: 'Upload Video' })
}
///upload path로 req가 왔을떄, upload.pug를 rendering하고,
///pageTitle을 props로 보내줌.

export const postUpload = (req, res) => {
  console.log(req.body)
  const { title } = req.body
///upload path에서 POST요청을 할때~
///upload.pug에서 form(input)에서 title만 입력해서
///new video를 만듬.
///upload page에서 form(input)을 만들어서 title을 입력함
///그 title을 req.body로 받음.

  const newVideo = {
    title,
    rating: 5,
    comments: 2,
    createdAt: '1min ago',
    views: 1,
    id: videos.length + 1,
  }
  ///위에서 req.body로 받은 title을 newVideo에 넣어서
  ///새로운 newVideo라는 data를 만든 다음,
  ///videos에 넣어줌, 그런 다음 home으로 redirect함
  ///그래서 videos를 let으로 만들어 놓은 것 임.
  
  videos.push(newVideo)
  return res.redirect('/')
}

3. src/views/edit.pug

extends base.pug
///기본적으로 사용될 pug

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

block content 
    h4 Change Title of video
    ///여기서부터 pug에서 form을 만드는 방법
    form(method="POST") ///method는 POST로 설정
        input(name="title",placeholder="Video Title", value=video.title, required)
        ///input에 반드시 name이 들어갸야됨.
        ///req.body에 {title: ~~~~}이런 식으로 찍히기 때문에.
        ///value는 controller에서 video data를 props로 보내줬음.
        input(value='Save', type="submit")
        ///submit은 input으로 만듬. value값도 적어줄것!!

4. src/views/upload.pug

extends base.pug

block content 
 h3 hello from upload
 form(method="POST")
     input(name="title", placeholder='Title',required, type='text')
     ///type은 text이고, name반드시 들어갈것!
     input(type='submit', value='Upload Video')
     ///submit은 input으로, value값 넣어줄것!

5. src/server.js

import express from 'express'
import morgan from 'morgan'
import globalRouter from './routes/globalRouter'
import userRouter from './routes/userRouter'
import videoRouter from './routes/videoRouter'

const PORT = 4000
const app = express()
const logger = morgan('dev')

app.set('view engine', 'pug')
app.set('views', process.cwd() + '/src/views')
app.use(logger)
app.use(express.urlencoded({ extended: true }))
///req.body를 받기 위해서 반드시 적어주어야 됨. 매우 중요!!!!!

app.use('/', globalRouter)
app.use('/videos', videoRouter)
app.use('/users', userRouter)

app.listen(PORT, () => console.log('Server start in 4000'))

NOTICE!!!
아직 DB를 연결하지 않아서 fake data로 post, get, input, submit등을 알아봄.
다음 POST에서 mongoDB에 연결해서 실제 data를 사용해 볼 예정임.