python(django) - 장고로 웹페이지 만들기, views (6)

이전 편에서는 django admin 페이지를 통해 db에 data를 넣는 것을 진행했다. 그럼 이제 넣은 data를 웹페이지에 출력하도록 하자.

 

기존 views.py를 보면 단순하게 html만 전송하고, data를 가져오는 절차가 없다. 이제 data를 넣어주는 절차를 추가해보자.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(
        request,
        'blog/base.html',
    )

 

 

FBV대신 CBV를 활용할거기 때문에 아래 처럼 단순하게 PostList Class를 사용한다. views.py를 열고 ListView, Post를 import하고 아래 내용을 추가하자.

*여기서 template_name을 따로 설정했는데 설정하지 않으면 기본 이름은 post_list.html이 된다. 해당 설정을 하지 않고 html 파일 이름을 post_list.html로 바꾸어도 된다.

from django.shortcuts import render
from django.views.generic import ListView
from .models import Post

def index(request):
    return render(
        request,
        'blog/base.html',
    )
    
class PostList(ListView):
    model = Post
    template_name = 'blog/base.html'
    ordering = '-pk'

 

 

그다음에는 무엇을 해야 할까? 이전에 index 함수를 보여주기 위해 url.py에 urlpatterns를 추가했었는데 이것을 아래처럼 변경해주자.

from django.urls import path
from . import views

urlpatterns = [
    # path('', views.index),
    path('', views.PostList.as_view()),
]

 

 

이제 다시 http://127.0.0.1:8000/blog/에 접속해보면 잘 된다. 그치만 아직 바뀐게 없다.

 

 

왜그럴까? html을 바꾸지 않았기 떄문이다. html을 변경해서 받은 data를 적용시켜 보자.

우선 기존 html에 아래 내용을 추가하고 웹을 확인해보자.

{{ post_list }}

 

그럼 아래처럼 이전에 admin page에서 작성한 data(post_list)를 그대로 확인할 수 있다.

 

모든 list를 불러와서 하나씩 적용하려면 for 구문을 사용해야 한다. html에 아래 내용을 붙여보자.

{% for p in post_list %}
    <h2> Title = {{ p.title }}</h2>
    <h5> Sub_Title = {{ p.hook_text }}</h5>
{% endfor %}

 

 

그럼 아래와 같이 내가 썼던 내용들을 확인할 수 있다.

 

 

그럼 이제 image를 출력하기 위한 설정을 하자. 프로젝트 폴더 (blog app 폴더가 아님)에 들어가서 urls.py에 아래 내용을 추가하자. 그럼 settings.py에 설정해두었던 MEDIA_URL 경로를 추가된 것이다.

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

 

이제 image 파일이 잘 출력되는지 확인하기 위해 html에 아래와 같이 내용을 추가한다.

 

{% for p in post_list %}
    <h2> Title = {{ p.title }}</h2>
    <h5> -Sub_Title = {{ p.hook_text }}</h5>
    {% if p.head_image %}
        <h5> -URL = {{ p.head_image.url }}</h5>
        <img class="card-img-top" src="{{ p.head_image.url }}" alt="{{ p }} head image">
    {% else %}
        <img class="card-img-top" alt="{{ p }} head image">
    {% endif %}
{% endfor %}

 

 

그럼 아래처럼 URL 주소도 확인할 수 있고, image가 잘 출력되는 것을 알 수 있다.

 

 

 

이제 어떤 식으로 동작하는지 원리를 알았으니 해당 내용을 이전 html format에 적용시켜 보자.

<section class="bg-light margin-for-footer">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Pymin Story</h1>
            </div>
        </div>
        <div class="row">
            {% for p in post_list %}
            <div class="col-lg-4">
                <div class="card">
                    {% if p.head_image %}
                    <img class="card-img-top" src="{{ p.head_image.url }}" alt="{{ p }} head image">
                    {% else %}
                    <img class="card-img-top" src="{% static 'blog/images/no_image.jpg' %}" alt="{{ p }} No image">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ p.title }}</h5>
                        {% if p.hook_text %}
                        <p>{{ p.hook_text }}</p>
                        {% endif %}
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_1">See Detail</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

 

 

그리고 다시 웹페이지에 접속하면 아래와 같이 database에 저장된 항목들이 나오게 된다. 한번 django admin 페이지에 가서 글을 더 써보자.

 

 

그럼 내가 쓴 글과 사진이 양식에 맞춰서 잘 나타나는 것을 알 수 있다.

 

 

 

1번째 글과 4번째 글에 간격이 있으면 좋겠다. 아래 마진을 4로 주자.

            <div class="col-lg-4 mb-4">

 

 

 

이제 1번쨰 글과 4번째 글에 간격이 생겨서 조금 더 보기 좋아졌다.

 

 

이제 남은 것은 See Detail 버튼을 누르면 modal로 상세 내용을 출력해주는 것이다. 다음 편에 할까 하다가 그냥 이것까지는 추가해야겠다.

modal은 data-target과 id를 맞춰주면 동작했었으니 이것을 맞춰줘야 한다. 고유키인 pk값으로 맞춰주도록 한다.

 

<변경전>

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_1">See Detail</a>

 

<변경후>

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_{{ p.pk }}">See Detail</a>

 

 

그리고 마찬가지로 modal 에도 아래와 같이 id에 pk값을 넣어주고 그 외 image와 content출력을 위한 정보로 변경한다.

<!-- Modal -->
{% for p in post_list %}
<div class="modal fade" id="Story_modal_{{ p.pk }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ p.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-lg-7">
                    {% if p.head_image %}
                    <img class="img-fluid" src="{{ p.head_image.url }}" alt="{{ p }} head image">
                    {% else %}
                    <img class="img-fluid" src="{% static 'blog/images/no_image.jpg' %}" alt="{{ p }} No image">
                    {% endif %}
                </div>
                <div class="col-lg-5">
                    <p>{{ p.content }}</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>
{% endfor %}

 

 

 

이렇게하면 modal이 잘 매핑이 되어서 See Detail을 누르면 상세 내용이 나타나게 된다. 4번째 글의 See Detail을 눌러보니 팝업창으로 상세 내용이 잘 출력되는것을 볼 수 있다.

 

 

이렇게 views와 html을 조금 수정해서 data들을 웹 화면에 출력하는 방법이 끝났다.

지난편에 올렸던 data추가하는 기능과 이번편의 data 출력하는 기능만 잘 인지하고 있으면 다른 부분에도 쉽게 응용이 가능하다. 

html이나 python의 내용을 하나하나 상세하게 적고 싶지만 시간이 너무 많이 걸려 우선 그대로 복사할 수 있도록 한다. 혹시 궁금한 사항이 있으면 언제든 댓글 남겨주세요. 금일 진행한 html은 첨부로 올립니다.