작정하고 Django (35) - Articleapp 구현

articleapp 모델 생성

created_at은 언제 만들어진것 인지에 대한 정보

form 작성

후, python manage.py makemigrations 진행 ,
python manage.py migrate 진행

-> DB에 반영

views.py 작성

from audioop import reverse

from django.contrib.auth.decorators import login_required
from django.shortcuts import render
from django.utils.decorators import method_decorator
from django.views.generic import CreateView, DetailView

from articleapp.forms import ArticleCreationForm
from articleapp.models import Article


# Create your views here.

@method_decorator(login_required, 'get')
@method_decorator(login_required, 'post')
class ArticleCreateView(CreateView):
    model = Article
    form_class = ArticleCreationForm
    template_name = 'articleapp/create.html'

    def form_valid(self,form):
        temp_article = form.save(commit=False)
        temp_article.writer = self.request.user
        temp_article.save()
        return super().form_valid(form)
    def get_success_url(self):
        return reverse('articleapp:detail',kwargs={'pk': self.object.pk})


class ArticleDetailView(DetailView):
    model = Article
    context_object_name = 'target_article'
    template_name = 'articleapp/detail.html'

ceate.html 과 detail.html 을 accountapp 에서 가져오기

• create.html 작성

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}


<div style="text-align: center; max-width: 500px; margin: 4rem auto">
    <div class="mb-4">
        <h4>Article Create</h4>
    </div>
    <form action="{% url 'articleapp:create' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form form %}
        <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
    </form>
</div>

{% endblock %}

• detail.html 작성

{% extends 'base.html' %}


{% block content %}


  <div>
    <div style="text-align: center; max-width: 500px; margin: 4rem auto;">

      <h1>
        {{ target_article.title }}
      </h1>

      <img src="{{ target_article.image.url }}" alt="">

      <p>
        {{ target_article.content }}
      </p>

    </div>
  </div>

{% endblock %}

네비게이션 bar + 글쓰기 버튼 추가

header.html 수정

<div class="euichan_header">
    <div>
        <h1 class="euichan_logo">Euichan</h1>
    </div>
    <div>
        <a href="{% url 'articleapp:list' %}">
            <span>Articles</span>
        </a>
        <span>nav2</span>
        <span>nav3</span>

        {% if not user.is_authenticated %}
        <a href="{% url 'accountapp:login' %}?next={{ request.path }}">
            <span>login</span>
        </a>

        <a href="{% url 'accountapp:create' %}">
            <span>SignUp</span>
        </a>

        {% else %}
        <a href ="{% url 'accountapp:detail' pk=user.pk %}">
            <span>Mypage</span>
        </a>

        <a href ="{% url 'accountapp:logout' %}?next={{ request.path }}">
            <span>logout</span>
        </a>

        {% endif %}
    </div>
</div>

list.html 수정

{% extends 'base.html' %}
{% load static %}

{% block content %}
<style>

.container div {
  width: 250px;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}

  .container img {
  width: 100%;
  }


</style>

    <div class="container">
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/340">
      </div>
      <div>
        <img src="https://picsum.photos/200/280">
      </div>
      <div>
        <img src="https://picsum.photos/200/390">
      </div>
      <div>
        <img src="https://picsum.photos/200/200">
      </div>
      <div>
        <img src="https://picsum.photos/200/500">
      </div>
      <div>
        <img src="https://picsum.photos/200/100">
      </div>
      <div>
        <img src="https://picsum.photos/200/250">
      </div>
      <div>
        <img src="https://picsum.photos/200/320">
      </div>
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/270">
      </div>
      <div>
        <img src="https://picsum.photos/200/330">
      </div>

    </div>

    <div>
      <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3">
          Create Article
      </a>
    </div>

    <script src="{% static 'js/magicgrid.js' %}"></script>
{% endblock %}

url 등록

from django.urls import path
from django.views.generic import TemplateView

from articleapp.views import ArticleCreateView, ArticleDetailView

app_name = 'articleapp'

urlpatterns = [
    path('list/', TemplateView.as_view(template_name='articleapp/list.html'),name='list'),


    path('create/', ArticleCreateView.as_view(),name='create'),
    path('detail/<int:pk>/', ArticleDetailView.as_view(),name='detail'),


]

결과

Create Article 을 눌러보게 되면

다음과 같이 게시글을 쓸 수 있게 된다.

ArticleUpdateView 작성

decorator 사용

detail.html 수정

{% extends 'base.html' %}


{% block content %}


  <div>
    <div style="text-align: center; max-width: 500px; margin: 4rem auto;">

      <h1>
        {{ target_article.title }}
      </h1>

      <img src="{{ target_article.image.url }}" alt="">

      <p>
        {{ target_article.content }}
      </p>

      <a href="{% url 'articleapp:update' pk=target_article.pk %}">
        <p>Update Article</p>
      </a>

    </div>
  </div>

{% endblock %}

url 등록

update.html 작성

views.py 에 한줄 추가

context_object_name = 'target_article' 추가

결과화면

Update Article : 업데이트 할 수 있는 부분 추가

누르게 되면

다음과 같이 update 할 수 있게 되고

제출하게 된다면

제대로 반영된다.

ArticleDeleteView 작성

detail.html 추가

url 등록

delete.html 작성

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}


<div style="text-align: center; max-width: 500px; margin: 4rem auto">
    <div class="mb-4">
        <h4>Delete Article : {{ target_article.title }}</h4>
    </div>
    <form action="{% url 'articleapp:delete' pk=target_article.pk %}" method="post">
        {% csrf_token %}

        <input type="submit" class="btn btn-danger rounded-pill col-6 mt-3">
    </form>
</div>

{% endblock %}

결과

delete 수행

완료

gitignore 수행