DjangoTube: 비디오 상세보기

View 추가하기

먼저 video 폴더 안의 views.py 에 코드를 추가해 볼게요.

# video/views.py
# 기존 코드 아래에 다음 코드를 작성해주세요

def video_detail(request, video_id):
    video = Video.objects.get(id=video_id)
    return render(request, 'video/video_detail.html', {'video': video})

이 코드의 의미는 video_id 라는 이름을 가진 값을 인자로 받아, 그 값을 id 로 가지는 video 데이터를 불러와주는 것이랍니다.

URL 추가하기

이 video_id 은 urls.py 에서 넘어옵니다. 그럼 video 폴더 안의 urls.py 에도 추가해 볼게요.

# video/urls.py
from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.video_list, name='list'),
    url(r'^new$', views.video_new, name='new'),
    # 이 코드를 추가해 주세요
    url(r'^(?P<video_id>\d+)/$', views.video_detail, name='detail'),
]

이렇게 작성해주시면 됩니다.

역시 url 끝에 콤마(,) 찍는 것 잊지마세요!

맨 아래에서 이러한 부분이 추가가 되었는데,

url(r'^(?P<video_id>\d+)/$', views.video_detail, name='detail')

이 부분의 의미는 video_id 라는 숫자로 이루어진 값을 받아서 video_detail 라는 뷰에 인자로 넘겨주겠다는 의미랍니다. 따라서 우리는 video_detail 함수에서 video_id 라는 인자를 받아서 사용했어요.

Template 추가하기

그럼 이제 video/views.py 에서 지정했던 video/templates/video/video_detail.html 파일을 만들어볼게요.

폴더 위치를 잘 확인하고, 새로운 파일을 만들어주세요!

{% load staticfiles %}

<html>
<head>
    <title>Video Detail</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="content container">
    <header class="page-header">
        <h1>Video Detail</h1>
    </header>
    <div class="row">
        <div class="col-md-16">
            <div id="player"></div>
        </div>
    </div>
</div>
</body>
<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";

    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: '{{ video.video_key }}'
        });
    }
</script>
</html>

이렇게 작성해 보세요. 우선, 아래쪽의 <script> 태그쪽은 Youtube Player를 부르기 위해서 작성해놓은 API 부분입니다. 이 부분은 Django에 관한 내용은 아니니 지금은 최대한 Django 부분에만 집중 하도록 할게요!

<script> 태그쪽에서 video.video_key라는 부분을 보실 수 있을거에요.이 부분은 저희가 New Video 페이지에서 입력했던 것을 Youtube API를 통해서 넘겨주는 부분입니다. Youtube API는 그 Key를 가지고 저희가 원했던 동영상을 가져와 id가 player 인 <div> 태그에 렌더링 해주게 됩니다.

이제 아래 사진처럼 원하는 페이지를 볼 수 있게 됐습니다!

와! 모든 과정을 마치셨어요! 축하합니다! 비록 짧은 시간이었지만 Django의 기초가 되는 내용을 훑어보는 시간을 가졌어요. 시간이 짧아서배포 와 같은 좀 더 다양한 내용을 다루지는 못했지만 더 배우시고 싶으시면 장고걸스 튜토리얼을 찾아주세요!!

PreviousDjangoTube: 비디오 추가하기2 (Django)Next더 나아가기

Last updated 6 years ago