본문 바로가기
○ WEB/21.02 CodeLion_Django Web

[장고 실전3] 2. 커뮤니티 : 디테일 페이지

by 0ver-grow 2021. 3. 27.
반응형

A. 작성글 홈화면에 띄우기

1. views.py : 메인화면에 작성글 띄우는 함수작성


※ Post클래스 활용과정

1-1. 앱 models.py > Post 클래스

1-2. 앱 views. py에서 posts 쿼리셋으로 선언. 

posts는 Post클래스의 변수(title,body,date) 사용가능

쿼리셋에 다음과 같이 작성글이 저장되어 있음


from django.shortcuts import render, redirect
from .forms import PostForm # forms.py의 PostForm객체 불러오기
from .models import Post # models.py로 부터 쿼리셋형태로 Post목록가져옴

def home(request) :
    # 글목록 출력
    # posts는 쿼리셋 객체
    posts = Post.objects.filter().order_by('date') # models.py의 date 오름차순
    # posts = Post.objects.filter().order_by('-date') # models.py의 date 내림차순
    # posts = Post.objects.all() 
    return render(request, 'index.html', {'posts':posts})

def postcreate(request) : 
    # request method가 POST
    if request.method == 'POST' :
        # 입력값 저장
        form = PostForm(request.POST, request.FILES)
        if form.is_valid() :
            form.save()
            return redirect('home') # 저장후 home으로 url이동

    # request method가 GET
    # form 입력 html 띄우기
    else : 
        form = PostForm() # forms.py의 PostForm객체클래스
    return render(request, 'post_form.html', {'form':form})

2. index.html : 메인화면을 게시판 형태로 수정

 

템플릿언어로 반복문 작성

 


※ Post클래스 활용과정

1-1. 앱 models.py > Post 클래스

1-2. 앱 views. py에서 posts 쿼리셋으로 정의

posts는 Post클래스의 변수(title,body,date) 사용가능

쿼리셋에 다음과 같이 작성글이 저장되어 있음

1-3. posts를 index.html에서 post로 하나씩 변환

+. 반복문으로 하나씩 뽑지 않고 {% posts %} 만을 불러오면 화면에 쿼리셋 형태로 나타나기만 함


index.html

{% extends 'base.html' %}

{% block content %}
                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <!-- Page Heading -->
                    <h1 class="h3 mb-2 text-gray-800">Tables</h1>
                    <p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below.
                        For more information about DataTables, please visit the <a target="_blank"
                            href="https://datatables.net">official DataTables documentation</a>.</p>

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>글제목</th>
                                            <th>작성 날짜</th>
                                            <th>작성자</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- views.py의 posts(쿼리셋객체)로 반복 -->
                                        {% for post in posts %}
                                        <tr>
                                            <!-- models.py > Post 클래스 > views.py에서 posts 쿼리셋으로 변환
                                                posts이 Post클래스의 변수(title.body,date)사용-->
                                            <td>{{ post.title }}</td>
                                            <td>{{ post.date }}</td>
                                            <td>작성자</td>
                                        </tr>
                                        {% endfor %} 
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
                        <div class="card-body">
                            <a href="{% url 'postcreate' %}" class="btn btn-primary btn-icon-split">
                                <span class="icon text-white-50">
                                    <i class="fas fa-flag"></i>
                                </span>
                                <span class="text">새글쓰기</span>
                            </a>
                        </div>        
{% endblock %}

B. 제목클릭시 작성글화면으로 이동

1. index.html : 프라이머리키로 링크연결


※ Post클래스 활용과정

1-4. post.id 에 주목할 것

링크를 클릭하면 > post.id값이 url에 전달


<td><a href="{% url 'detail' post.id %}">{{ post.title }}</a></td>

2. urls.py : detail이라는 name을 가진 url 생성

※ Post클래스 활용과정

1-5. post_id는 index.html > post.id를 받게됨

어디서? views.py의 detail함수로 전달됨

 

path('detail/<int:post_id>', views.detail, name='detail'),

3. views.py : detail함수

※ Post클래스 활용과정

1-6. detail함수에서 post_id가 index.html > post.id를 받도록 만들자.

어떻게? pk=post_id 로 실현

from django.shortcuts import render, redirect, get_object_or_404

def detail(request, post_id) : 
    post_detail = get_object_or_404(Post, pk=post_id)
    return render(request, 'detail.html', {'post_detail':post_detail})

4. detail.html : detail함수에서 렌더링될 페이지


※ Post클래스 활용과정

1-1 ~ 1-6까지 요약 정리

1. 앱 models.py의 Post클래스(title,body,date변수)

2. 앱 views.py의 home함수의 posts 쿼리셋에서 Post클래스 

3. 앱 index.html의 post변수로 순회하며 post.id로 연결

4. 앱 views.py의 detail함수의 pk값을 통해 post_id로 연결 > post_detail 변수로 정의


1-7. views.py의 detail함수의 post_detail로 활용

즉. models.py의 Post클래스의 title,body,date변수를 post_detail에서 사용가능

{% extends 'base.html' %}

{% block content %}

<h1> 제목 : {{ post_detail.title }} </h1>
<h2> 작성일 : {{ post_detail.date }} </h2>
<p> {{ post_detail.body }} </p>

{% endblock %}

 

2번째 작성된 게시글 클릭시 url

 

반응형