티스토리 뷰

Django

[Django App 1-3] 북마크 애플리케이션 개발(2)

Liiot 2020. 1. 1. 23:01

이번 글에서는 저번 글과 이어서 북마크 애플리케이션을 개발합니다.

2020/01/01 - [전체보기] - 4. 북마크 애플리케이션 개발(1)

 

4. 북마크 애플리케이션 개발(1)

이번 글에서는 저번 글에서 설계한 흐름에 따라 북마크 애플리케이션을 개발합니다. 북마크 애플리케이션 개발 ① 애플리케이션 뼈대 만들기 ①-1 애플리케이션 생성 다음의 명령으로 애플리케이션을 생성합니다...

chagokx2.tistory.com

북마크 애플리케이션 개발

④ View 코딩

  • view

    • URLConf에 매핑된 Callable Object
    • 첫번째 인자로 HttpRequest 인스턴스를 받는다.
    • 필히 HttpResponse 인스턴스를 리턴 해야함
    • 크게 Function Based View (FBV)와 Class Based View (CBV)로 구분

이번에는 각 url pattern에 매핑될 view를 코딩할 차례입니다. Django에서는 클래스형 뷰와 함수형 뷰

총 2가지 형태의 뷰를 사용해서 개발할 수 있는데 여기서는 함수형 뷰를 사용할 것입니다.

views.py를 열어 다음과 같이 작성합니다.

from django.shortcuts import render, get_object_or_404
# Bookmark 테이블의 데이터를 가져오기 위해 models.py에서 Bookmark 클래스를 import
from .models import Bookmark

# Create your views here.
def BookmarkListView(request):
    # Bookmark 테이블의 모든 Row를 가져옴. list 형태로 저장됨
    bookmarks = Bookmark.objects.all()

    # 데이터 확인용
    for bookmark in bookmarks:
        print("ID : {}, Name : {}, URL : {}".format(bookmark.id, bookmark.name, bookmark.url))

    return render(request, 'bookmark_list.html', {'bookmarks': bookmarks})


def BookmarkDetailView(request, pk):
    """
    Bookmark 테이블의 특정 Row만 가져오는 방법 두 가지
    1. get_object_or_404(): 객체가 존재하지 않을 때 Http 404 예외를 발생
    - 하나의 오브젝트만 받을 수 있으므로 주의
    -  Django 모델을 첫번째 인자로 받고, 키워드 인수들을 모델 관리자의 get() 함수에 넘김

    2. models.py에 정의된 모델 클래스를 직접 사용
    """
    # 인자로 들어온 pk값과 테이블의 pk값이 같은 행만 가져옴
    bookmark1 = get_object_or_404(Bookmark, pk=pk)
    bookmark2 = Bookmark.objects.get(pk=pk)

    # 데이터 확인용
    print("ID : {}, Name : {}, URL : {}".format(bookmark1.id, bookmark1.name, bookmark1.url))
    print("ID : {}, Name : {}, URL : {}".format(bookmark2.id, bookmark2.name, bookmark2.url))

    return render(request, 'bookmark_detail.html', {'bookmark': bookmark2})

  • BookmarkListView(request)

    : 모든 북마크들을 보여줘야 하므로 Bookmark 테이블에 저장된 모든 데이터를 가져옴.

  • BookmarkDetailView(request, pk)

    : 사용자가 선택한 북마크에 대한 것만 보여줘야 함. 따라서, 사용자로부터 온 url의 pk 인자를 가져

    와 이 값과 일치하는 pk 값을 가진 row만 가져옴.

  • render(request, template_name, context)

    : 템플릿에 context를 채워넣어 표현한 결과를 HttpResponse 객체와 함께 돌려주는 함수

    • 여기서 context는 템플릿에 전달할 데이터이며, Dict 형태로 전달해야 함
    • {템플릿에서 사용할 변수명: 뷰에서 정의된 변수명,}

 

 

⑤ Template 코딩

이제 마지막으로 북마크 리스트 페이지와 북마크 상세페이지의 템플릿 파일을 코딩합니다.

각 페이지 별로 템플릿 파일이 하나씩 필요하므로 이들을 한 곳에 모아두기 위한 템플릿 디렉토리가

필요합니다. 다음과 같이 자신이 만들고 있는 애플리케이션 디렉토리 하위에 템플릿 디렉토리를

생성합니다.

다음과 같은 창이 뜨면 디렉토리 이름을 templates 로 입력하여 생성합니다.

그 후 templates 디렉토리 하위에 HTML 파일을 새로 생성합니다.

 

다음은 bookmark_list.html 파일 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Bookmark List</title>
</head>
<body>

<div>
    <h1>Bookmark List</h1>
    <ul>
        {% for bookmark in bookmarks %}
            <li><a href="{% url 'detail' bookmark.id %}"> {{bookmark}} </a></li>
        {% endfor %}
    </ul>
</div>


</body>
</html>

템플릿은 순수하게 HTML로만 쓰여질 수도 있지만, 대부분의 경우 뷰로부터 데이터를 전달받아

이를 템플릿 파일 안에 동적으로 적용합니다. 또한 Django 템플릿 태그를 사용하여 HTML 파일에

다양한 로직과 함께 뷰에서 전달받은 데이터를 템플릿에서 편리하게 사용할 수 있습니다.

 

 <a href="{% url 'detail' bookmark.id %}"> {{bookmark}} </a>

이 코드를 보면 url 주소를 써야하는 부분에 {% url %} 를 이용하여 작성되어 있습니다.

여기서 'detail'은 urls.py에 명명된 url pattern 이름(name)에 해당됩니다.

우리는 'detail' url pattern 에서 pk 값을 받아오기로 정의했기 때문에 어떠한 값을 url에 넣어 보내줘야

합니다. 이를 위해 bookmark.id 값을 받아 url이 '/bookmark/1/' 로 재구성되어 request가 서버로 보내집니다.

이렇게 url 태그를 이용하면 url을 하드코딩할 필요가 없기 때문에 더 편리하고 유지보수에도 좋습니다.

 

 

{% for bookmark in bookmarks %}
    <li><a href="{% url 'detail' bookmark.id %}"> {{bookmark}} </a></li>
{% endfor %}

여기서 {{bookmark}}는 Bookmark 테이블에서 가져온 여러 row 중 하나의 row의 정보를 담은 객체입니다.

따라서 bookmark.id, bookmark.title, bookmark.url 이런 방식으로 각 row에 대한 컬럼 값을 접근할 수 있습니다.

그런데 {{ bookmark }} 는 특정 컬럼을 지정하지 않고 변수 안에 들어 있는 값을 출력하라고만 코딩이 되어 있습니다.

이 경우 우리가 Bookmark 모델에서 정의했던 str() fuction을 내부적으로 call 합니다.

그래서 결과 화면에 해당 row의 name 값이 보여지는 것입니다.

 

 

북마크 상세페이지의 템플릿 파일도 다음과 같이 코딩합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Bookmark Detail</title>
</head>
<body>

<div>
    <h1>{{bookmark}}</h1>

    <ul>
        <li> URL :  <a href= '{{bookmark.url}}'>{{bookmark.url}}</a></li>
    </ul>
</div>

</body>
</html>

 

 

⑥ 결과 화면 확인하기

테스트 서버를 실행시켜 북마크 페이지가 제대로 구현되었는지 확인합니다.

  • 북마크 리스트 페이지

  • 북마크 상세페이지

 

 

 

참고 자료

 

Django 기본 03 - Function Based View 응답예시 (JSON, 파일다운, 템플릿) · 초보몽키의 개발공부로그

AskDjango 수업을 듣고 중요한 내용을 정리하였습니다.

wayhome25.github.io

 

첫 번째 장고 앱 작성하기, part 3 | Django 문서 | Django

Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate

docs.djangoproject.com

 

Django Tutorial Part 5: Creating our home page

우리는 이제 첫 전체 페이지를 보여주는 코드를 추가할 때가 되었습니다 — LocalLibrary website를 위한 홈페이지를요. 이 홈페이지는 각각의 모델 타입마다 갖고 있는 레코드들의 숫자를 보여주고, 우리의 다른 페이지들로 이동할 수 있는 사이드바 내비게이션 링크들을 제공합니다. 이 섹션에서 우리는 기본 URL 맵과 뷰들을 작성하고, 데이터베이스에서 레코드들을 가져오고 그리고 탬플릿을 사용하는 것에 대한 연습 경험을 가질 수 있습니다.

developer.mozilla.org

 

'Django' 카테고리의 다른 글

[Django App 2-2] Django와 MySQL 연동하기  (0) 2020.01.07
[Django App 2-1] 북스토어 애플리케이션 개발  (0) 2020.01.07
[Django App 1-2] 북마크 애플리케이션 개발(1)  (0) 2020.01.01
[Django App 1-1] 북마크 애플리케이션 설계  (0) 2019.12.29
[Django Basic 03] Django 프로젝트 생성(2)  (0) 2019.12.18
댓글