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

base.html

0.00MB

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

 

2022.11.10 - [Python/Do something] - python(django) - 장고로 웹페이지 만들기, models, database (5)

 

 

기존 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은 첨부로 올립니다.