[Django] CRUD_READ_목록페이지 구현

0. 목록페이지 만들기

 게시판을 만든다고 생각하면 된다. 단계별로 구현 난의도가 올라가고 기능이 많아진다. 하나씩 순서대로 진행해 보자.

---

1. 1단계

1단계에서는 기본적인 흐름으로 화면에만 보이게 만드는 단계이다.

1.1 urls.py

from . import views

path('', views.index)

 

1.2 views.py

from .models import Article



def index(request):
    articles = Article.objects.all()
    context = {
    'articles' : articles
    }
    return render(request, 'articles/index.html', context)

if 아래와 같은 error가 발생한다면?

+ NameError at /articles/ 
name 'article' is not definde

=> models.py를 import 안 하면 오류 뜬다.

=> from .models import Article                                        : Article 클래스를 가져오겠다.

 

 

1.3 templates(articles/templates/articles/index.html)

{% for article in articles %}

<p>{{ article }}</p>                    : 이렇게 출력하면 해당 객체의 기본모습으로 출력된다.  (Article object (1))

{% endfor %}

 

---

2. 2단계

위와 다른점은 app이름을 등록 한 이후다.

 

2.1 urls.py

from . import views

app_name='articles'                                                                       :app name등록

path('', views.index, name='index')                                                     :url name 등록

 

2.2views.py

def index(request):

articles = Article.objects.order_by('-pk')                                              :최신이 위로가도록 내림차순 정렬하기

context = {

'articles' : articles

}

return render(request, 'articles/index.html', context)

 

2.3 index.html

{% for article in articles %}

<p>{{ article }}</p>                    : 이렇게 출력하면 해당 객체의 기본모습으로 출력된다.  (Article object (1))

{% endfor %}

 

 

 

+보통은 이렇게 만들고 admin.py가서 게시글 작성해서 작동 잘하나 확인한다.

 

 

---

3. 3단계(bootstrap 적용 후 최종)

bootstrap 설치는 form게시물의 마지막 부분 참고

 

detail.html 변경전

    <h2>게시판 목록</h2>
    <a href="{% url 'articles:create' %}">글 쓰기</a>
    {% for article in articles %}
        <h3>{{ article.pk }} : {{ article.title }}</h3>
        <p>{{ article.created_at }}</p>
        <a href="{% url 'articles:detail' article.pk %}">글 보기</a>
        <hr>
    {% endfor %}

detail.html 변경후

{% block body %}
    <h2>게시판 목록</h2>
    <a href="{% url 'articles:create' %}"><button class="btn btn-primary">글 쓰기</button></a>
    <table class="table">
      <thead class="thead-light">
        <tr>
          <th scope="col">#</th>
          <th scope="col">제목</th>
          <th scope="col">작성 시간</th>
        </tr>
      </thead>
      <tbody>
       {% for article in articles %}
        <tr>
          <th scope="row">{{ article.pk }}</th>
          <td><a href="{% url 'articles:detail' article.pk %}">{{ article.title }}</a></td>
          <td>{{ article.created_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock %}

{% block body %}가 위의 코드에 있다는 것은 탬플릿 확장을 하여 base.html의 공통의 틀을 만들어서 진행한 것이라고 생각하면 된다. 관련 내용은 아래의 링크를 타고가자

 

han-py.tistory.com/48

6-2. [DTL] 템플릿 확장(base.html)