작정하고 장고 - articleapp 구현

articleapp 구현

articleapp에 model을 만들어 준다.

class Article(models.Model):
    writer = models.ForeignKey(User, on_delete=models.SET_NULL, related_name='article', null=True )

    title = models.CharField(max_length=200, null=True)
    image = models.ImageField(upload_to='article/',null=False)
    content = models.TextField(null=True)

    created_at = models.DateField(auto_now_add=True, null=True)

class ArticleCreationForm(ModelForm):
    class Meta:
        model = Article
        fields = ['title', 'image', 'content']

form도 만들어준다.

python manage.py makemigrations
python manage.py migrate

명령어를 작성하면 db에 반영이 된것을 확인할 수 있다.

@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'

@method_decorator(article_ownership_required, 'get')
@method_decorator(article_ownership_required, 'post')
class ArticleUpdateView(UpdateView):
    model = Article
    context_object_name = 'target_article'
    form_class = ArticleCreationForm
    template_name = 'articleapp/update.html'

    def get_success_url(self):
        return reverse('articleapp:detail', kwargs={'pk': self.object.pk})

@method_decorator(article_ownership_required, 'get')
@method_decorator(article_ownership_required, 'post')
class ArticleDeleteView(DeleteView):
    model = Article
    context_object_name = 'target_article'
    success_url = reverse_lazy('articleapp:list')
    template_name = 'articleapp/delete.html'

Create, Detail, Update, Delete view를 만들어준다.

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'),
    path('update/<int:pk>', ArticleUpdateView.as_view(), name='update'),
    path('delete/<int:pk>', ArticleDeleteView.as_view(), name='delete'),

]

urls.py에서 url 설정을 해준다.

def article_ownership_required(func):
    def decorated(request, *args, **kwargs):
        article = Article.objects.get(pk=kwargs['pk'])
        if not article.writer == request.user:
            return HttpResponseForbidden()
        return func(request, *args, **kwargs)
    return decorated

Update, Delete view에 들어가는 decorator 코드이다.

<!-- 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 %}

하단에 다음과 같이 create article 버튼이 있고 누르면

위와 같이 article을 만들수 있다.

<!-- detail.html -->
{% extends 'base.html' %}

{% block content %}

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

    <h1>
      {{ target_article.title }}
    </h1>
    
    <img src="{{ target_article.image.url }}">

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

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

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

  </div>
</div>


{% endblock %}

article을 만들면 하단에 Update Article 버튼과 Delete Article 버튼이 있는데 해당 링크는 detail.html에서 만들었다.

<!-- update.html -->
{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

  <div style="text-align: center; max-width: 500px; margin: 4rem auto">
    <div class="mb-4">
      <h4>Atricle Update</h4>
    </div>
    <form action="{% url 'articleapp:update' pk=target_article.pk %}" method="post">
      {% csrf_token %}
      {% bootstrap_form form %}
      <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
    </form>
  </div>

{% endblock %}

Update Article을 누르면 위와 같은 화면이 나오는데 해당 화면에서 내용을 수정할 수 있다.

수정후 변경된것을 확인 할 수 있다.

<!-- 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 %}

해당 article을 삭제할 수 있다.