게시물 수정, 게시물 삭제 기능은 게시물 작성만큼 중요하다. 장고 개발 패턴을 연습할 수 있는 좋은 기회이므로 실습을 이해하며 따라가 보자.
모델 수정하기
(1단계) Question, Answer 모델에 modify_date 필드 추가
질문, 답변을 언제 수정했는지 확인할 수 있도록 Question 모델과 Answer 모델에 수정일시를 의미하는 modify_date 필드를 추가한다.
| # D:\projects\mysite\pybo\models.py (...생략...) class Question(models.Model): subject = models.CharField(max_length=200) content = models.TextField() create_date = models.DateTimeField() author = models.ForeignKey(User, on_delete=models.CASCADE) modify_date = models.DateTimeField(null=True, blank=True) def __str__(self): return self.subject class Answer(models.Model): question = models.ForeignKey(Question, on_delete=models.CASCADE) content = models.TextField() create_date = models.DateTimeField() author = models.ForeignKey(User, on_delete=models.CASCADE) modify_date = models.DateTimeField(null=True, blank=True) |
null=True는 modify_date 컬럼이 null을 허용한다는 의미이고, blank=True는 form.is_valid() 통한 입력값 체크 시 값이 없어도 된다는 의미이다.
(2단계) makemigrations, migrate 명령 수행하기
모델이 변경되었으므로 makemigrations, migrate 명령을 수행한다.
(mysite) D:\projects\mysite>python manage.py makemigrations Migrations for 'pybo': pybo\migrations\0004_auto_20220919_0923.py - Add field modify_date to answer - Add field modify_date to question (mysite) D:\projects\mysite>python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, pybo, sessions Running migrations: Applying pybo.0004_auto_20220919_0923... OK (mysite) D:\projects\mysite> |
질문수정 기능 추가
(1단계) 질문수정 버튼 추가 (question_detail.html)
질문상세 화면에 질문수정 버튼을 추가한다.
| # D:\projects\mysite\templates\pybo\question_detail.html {% extends 'base.html' %} {% block content %} <div class="container my-3"> <h2 class="border-bottom py-2">{{ question.subject }}</h2> <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ question.content }} </div> <div class="d-flex justify-content-end"> <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ question.author.username }}</div> <div>{{ question.create_date }}</div> </div> </div> {% if request.user == question.author %} <div class="my-3"> <a href="{% url 'pybo:question_modify' question.id %}" class="btn btn-sm btn-outline-secondary">수정</a> </div> {% endif %} </div> </div> <h5 class="border-bottom my-3 py-2"> {{ question.answer_set.count }} 개의 답변이 있습니다. </h5> {% for answer in question.answer_set.all %} <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ answer.content }} </div> <div class="d-flex justify-content-end"> <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ answer.author.username }}</div> <div>{{ answer.create_date }}</div> </div> </div> </div> </div> {% endfor %} <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3"> {% csrf_token %} <!-- 오류 표시 Start --> {% if form.errors %} <div class="alert alert-danger" role="alert"> {% for field in form %} {% if field.errors %} <strong>{{ field.label }}</strong> {{ field.errors }} {% endif %} {% endfor%} </div> {% endif %} <!-- 오류 표시 End --> <div class="form-group"> <textarea name="content" id="content" {% if not user.is_authenticated %} disabled {% endif %} class="form-control" rows="10"></textarea> </div> <input type="submit" value="답변등록" class="btn btn-primary"> </form> </div> {% endblock %} |
질문수정 버튼은 로그인한 사용자와 글쓴이가 같은 경우에만 보여야 하므로 {% if request.user == question.author %}와 같이 추가했다.
(2단계) 질문수정 버튼의 URL 매핑 추가 (urls.py)
{url 'pybo:question_modify' question.id } URL이 추가되었으니 pybo/urls.py 파일을 수정하여 URL 매핑을 추가해야 한다.
| # D:\projects\mysite\pybo\urls.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('<int:question_id>/', views.detail, name='detail'), path('answer/create/<int:question_id>/', views.answer_create, name='answer_create'), path('question/create/', views.question_create, name='question_create'), path('question/modify/<int:question_id>/', views.question_modify, name='question_modify') ] |
(3단계) 질문수정 함수 추가 (views.py)
URL 매핑에 등록한 views.quesiton_modify 함수를 추가한다.
| # D:\projects\mysite\pybo\views.py from django.shortcuts import render, get_object_or_404, redirect from .models import Question from django.utils import timezone from .forms import QuestionForm, AnswerForm from django.core.paginator import Paginator from django.contrib.auth.decorators import login_required from django.contrib import messages # Create your views here. (... 맨 하단에 추가...) @login_required(login_url='common:login') def question_modify(request, question_id): """ 질문수정 """ question = get_object_or_404(Question, pk=question_id) if request.user != question.author: messages.error(request, '수정권한이 없습니다') return redirect('pybo:detail', question_id=question_id) if request.method == "POST": form = QuestionForm(request.POST, instance=question) if form.is_valid(): question = form.save(commit=False) question.author = request.user question.modify_date = timezone.now() #수정일시 저장 question.save() return redirect('pybo:detail', question_id=question_id) else: form = QuestionForm(instance=question) context = {'form': form} return render(request, 'pybo/question_form.html', context) |
question_modify 함수는 로그인한 사용자(request.user)와 수정하려는 글쓴이(question.author)가 다르면 '수정권한이 없습니다'라는 오류가 발생하도록 작성했다.
※ messages 모듈
장고가 제공하는 기능으로 오류를 임의로 발생시키고 싶은 경우 사용한다. 이때 임의로 발생시킨 오류는 폼 필드와 관련이 없으므로 넌필드 오류에 해당한다.
질문상세 화면에서 [수정]을 클릭하면 /pybo/question/modify/2/ 페이지가 GET방식으로 호출되어 질문 수정 화면이 나타나고, 질문수정 화면에서 [저장하기]를 누르면 /pybo/question/modify/2/ 페이지가 POST 방식으로 호출되어 데이터 수정이 이루어진다.
이때 GET 요청으로 질문수정 화면이 나타날 때 기존에 저장되어 있던 제목, 내용이 반영된 상태에서 수정을 시작할 수 있도록 다음과 같이 폼을 생성했다.
질문수정 화면에 기존 제목, 내용 반영
form = QuestionForm(instance=question)
이처럼 instance 매개변수에 question을 지정하면 기존 값을 폼에 채울 수 있다. 그러면 사용자는 질문수정 시 제목, 내용이 채워진 상태의 폼에서 수정을 시작할 수 있다. POST 요청으로 수정 내용을 반영하는 경우에는 다음과 같이 폼을 생성해야 한다.
질문 수정일시를 현재일시로 저장
question.modify_date = timezone.now()
(4단계) 질문 수정 확인하기
이제 로그인 사용자와 글쓴이가 같으면 질문 상세 화면에 [수정] 버튼이 보일 것이다. 수정 기능이 잘 작동하는지 확인해 보자.
질문삭제 기능 추가
(1단계) 질문삭제 버튼 추가
[수정] 버튼 바로 옆에 [삭제] 버튼을 추가한다.
| {% extends 'base.html' %} {% block content %} <div class="container my-3"> <h2 class="border-bottom py-2">{{ question.subject }}</h2> <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ question.content }} </div> <div class="d-flex justify-content-end"> <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ question.author.username }}</div> <div>{{ question.create_date }}</div> </div> </div> {% if request.user == question.author %} <div class="my-3"> <a href="{% url 'pybo:question_modify' question.id %}" class="btn btn-sm btn-outline-secondary">수정</a> <a href="#" class="delete btn btn-sm btn-outline-secondary" data-uri="{% url 'pybo:question_delete' question.id %}">삭제</a> </div> {% endif %} </div> </div> (...생략...) |
[삭제] 버튼은 [수정] 버튼과는 달리 href 속성값을 "#"로 설정했다. 그리고 삭제를 실행할 URL을 얻기 위해 data-uri 속성을 추가하고, 삭제 함수가 실행될 수 있도록 class 속성에 "delete" 항목을 추가해 주었다.
※ data-uri 속성은 제이쿼리에서 $(this).data('uri')와 같이 사용하여 그 값을 얻을 수 있다.
(2단계) 질문삭제 버튼에 jQuery 사용하기
[삭제] 버튼을 구현할 때 '정말로 삭제하시겠습니까?" 와 같은 확인 창을 보여주어야 한다. 이를 구현하려면 다음과 같은 코드가 필요하다. 제이쿼리 코드를 적용했다.
삭제 기능을 위한 제이쿼리 코드
<script type='text/javascript'>
$(document).ready( function(){
$(".delete").on('click', function(){
if(confirm("정말로 삭제하시겠습니까?")){
location.href = $(this).data('uri');
}
});
});
</script>
[삭제] 버튼을 클릭하면 확인 창이 나타나고, 확인 창에서 [확인] 버튼을 클릭하면 앞서 입력했던 data-uri 속성값으로 URL이 호출된다. [취소] 버튼을 클릭하면 아무 일도 발생하지 않는다.
(3단계) jQuery 실행을 위해 pybo/base.html 파일 수정
제이쿼리를 이용하여 자바스크립트를 작성하기 위해서는 제이쿼리 라이브러리 파일을 먼저 로드해야 한다. base.html 파일에 이미 제이쿼리 라이브러리를 로드하는 코드가 이미 추가되어 있으므로 모든 템플릿에서 제이쿼리 라이브러리를 사용하기 위해서는 다음처럼 base.html 파일을 수정해야 한다.
| # D:\projects\mysite\templates\base.html {% load static %} <html lang="ko"> <head> <!--Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"> <!-- pybo CSS --> <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> <title>Hello, pybo!</title> </head> <body> {% include "navbar.html" %} <!-- 기본 템플릿 안에 삽입될 내용 Start --> {% block content %} {% endblock %} <!-- 기본 템플릿 안에 삽입될 내용 end --> <!-- jQuery JS --> <script src="{% static 'jquery-3.6.1.min.js' %}"></script> <!-- Bootstrap JS --> <script src="{% static 'bootstrap.min.js' %}"></script> <!-- 자바스크립트 Start --> {% block script %} {% endblock%} <!-- 자바스크립트 End --> </body> </html> |
이렇게 하면 base.html 파일을 상속받는 템플릿이 이 블록을 구현하여 제이쿼리를 사용한 코드를 작성할 수 있다.
(4단계) 질문 템플릿에 삭제 알림 창 기능 추가
이제 quesiton_detail.html 파일 아래 {% block script %} {% endblock%} 를 추가하고 질문을 삭제할 수 있도록 코드를 추가한다.
| # D:\projects\mysite\templates\pybo\question_detail.html (...맨 하단에 추가...) {% block script %} <script type='text/javascript'> $(document).ready(function(){ $(".delete").on('click', function(){ if(confirm("정말로 삭제하시겠습니까?")){ location.href = $(this).data('uri'); } }); }); </script> {% endblock%} |
(5단계) 질문삭제 URL 매핑 추가 (urls.py)
data-uri 속성에 {% url 'pybo:question_delete' question.id %} 이 추가되었으므로 pybo/urls.py 파일에 URL 매핑을 추가한다.
| # D:\projects\mysite\pybo\urls.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('<int:question_id>/', views.detail, name='detail'), path('answer/create/<int:question_id>/', views.answer_create, name='answer_create'), path('question/create/', views.question_create, name='question_create'), path('question/modify/<int:question_id>/', views.question_modify, name='question_modify'), path('question/delete/<int:question_id>/', views.question_delete, name='question_delete') ] |
(6단계) 질문삭제 함수 추가 (views.py)
URL 매핑에 추가한 views.question_delete 함수를 작성하자.
| # (... 맨 하단에 추가...) @login_required(login_url='common:login') def question_delete(request, question_id): """ 질문삭제 """ question = get_object_or_404(Question, pk=question_id) if request.user != question.author: messages.error(request, '삭제권한이 없습니다') return redirect('pybo:detail', question_id=question.id) question.delete() return redirect('pybo:index') |
질문 글쓴이와 로그인 사용자가 동일하면 질문상세 화면에 이제 [삭제] 버튼이 나타날 것이다. 삭제가 잘 실행되는지 확인해 보자.
답변 수정 & 답변삭제 기능 추가
답변 수정 및 삭제도 질문 수정 & 삭제와 비슷한 구성으로 구현하면 된다. 다만 답변 수정은 답변 등록 템플릿이 따로 없으므로 수정에 사용할 템플릿이 추가로 필요하다.
(1단계) 답변수정 버튼 추가 (quesiton_detail.html)
답변 목록이 출력되는 부분에 [답변수정] 버튼을 추가하자.
| # D:\projects\mysite\templates\pybo\quesiton_detail.html (...생략...) {% for answer in question.answer_set.all %} <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ answer.content }} </div> <div class="d-flex justify-content-end"> <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ answer.author.username }}</div> <div>{{ answer.create_date }}</div> </div> </div> {% if request.user == answer.author %} <div class="my-3"> <a href="{% url 'pybo:answer_modify' answer.id %}" class="btn btn-sm btn-outline-secondary">수정</a> </div> {% endif %} </div> </div> {% endfor %} (...생략...) |
(2단계) 답변수정 URL 매핑 추가 (urls.py)
{% url 'pybo:answer_modify' answer.id %} 가 추가되었으므로 pybo/urls.py 파일에 URL 매핑을 추가한다.
| # D:\projects\mysite\pybo\url.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('<int:question_id>/', views.detail, name='detail'), path('answer/create/<int:question_id>/', views.answer_create, name='answer_create'), path('question/create/', views.question_create, name='question_create'), path('question/modify/<int:question_id>/', views.question_modify, name='question_modify'), path('question/delete/<int:question_id>/', views.question_delete, name='question_delete'), path('answer/modify/<int:answer_id>/', views.answer_modify, name='answer_modify') ] |
(3단계) 답변수정 함수 추가 (views.py)
views.answer_modify 함수를 추가하자.
| # D:\projects\mysite\pybo\views.py from django.shortcuts import render, get_object_or_404, redirect from .models import Question, Answer from django.utils import timezone from .forms import QuestionForm, AnswerForm from django.core.paginator import Paginator from django.contrib.auth.decorators import login_required from django.contrib import messages # Create your views here. (... 생략 ...) @login_required(login_url='common:login') def answer_modify(request, answer_id): """ 답변수정 """ answer = get_object_or_404(Answer, pk=answer_id) if request.user != answer.author: messages.error(request, '수정권한이 없습니다') return redirect('pybo:detail', question_id=answer.question.id) if request.method == "POST": form = AnswerForm(request.POST, instance=answer) if form.is_valid(): answer = form.save(commit=False) answer.author = request.user answer.modify_date = timezone.now() # 수정일시 저장 answer.save() return redirect('pybo:detail', question_id=answer.question.id) else: form = AnswerForm(instance=answer) context = {'answer': answer, 'form': form} return render(request, 'pybo/answer_form.html', context) |
(4단계) 답변 수정 폼 작성하기
답변 수정을 위한 템플릿 answer_form.html 파일은 별도로 만들어야 한다. 파일 생성 후 다음과 같은 코드를 입력하자.
| # D:\projects\mysite\templates\pybo\answer_form.html (New) {% extends 'base.html' %} {% block content %} <div class="container my-3"> <form method="post" class="post-form"> {% csrf_token %} {% include "form_errors.html" %} <div class="form-group"> <label for="content">답변내용</label> <textarea class="form-control" name="content" id="content" rows="10"> {{ form.content.value|default_if_none:'' }}</textarea> </div> <button type="submit" class="btn btn-primary">저장하기</button> </form> </div> {% endblock %} |
답변수정 기능도 질문수정 기능과 마찬가지로 답변등록 사용자와 로그인 사용자가 동일할 경우만 [수정] 버튼이 나타난다. 답변 수정 기능이 잘 작동되는지 확인해보자.
(5단계) 답변삭제 버튼 추가 (quesiton_detail.html)
질문상세 화면에서 답변 삭제 버튼을 추가한다.
| # D:\projects\mysite\templates\pybo\quesiton_detail.html (...생략...) {% for answer in question.answer_set.all %} <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ answer.content }} </div> <div class="d-flex justify-content-end"> <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ answer.author.username }}</div> <div>{{ answer.create_date }}</div> </div> </div> {% if request.user == answer.author %} <div class="my-3"> <a href="{% url 'pybo:answer_modify' answer.id %}" class="btn btn-sm btn-outline-secondary">수정</a> <a href="#" class="delete btn btn-sm btn-outline-secondary" data-uri="{% url 'pybo:answer_delete' answer.id %}">삭제</a> </div> {% endif %} </div> </div> {% endfor %} (...생략...) |
(6단계) 답변삭제 URL 매핑 추가 (urls.py)
{% url 'pybo:answer_delete' answer.id %} 가 추가되었으므로 pybo/urls.py 파일에 URL 매핑을 추가한다.
| # D:\projects\mysite\pybo\url.py from django.urls import path from . import views app_name = 'pybo' urlpatterns = [ path('', views.index, name='index'), path('<int:question_id>/', views.detail, name='detail'), path('answer/create/<int:question_id>/', views.answer_create, name='answer_create'), path('question/create/', views.question_create, name='question_create'), path('question/modify/<int:question_id>/', views.question_modify, name='question_modify'), path('question/delete/<int:question_id>/', views.question_delete, name='question_delete'), path('answer/delete/<int:answer_id>/', views.answer_delete, name='answer_delete') ] |
(7단계) 답변삭제 함수 추가 (views.py)
URL 매핑에 의해 실행될 views.answer_delete 함수를 추가한다.
| # D:\projects\mysite\pybo\views.py from django.shortcuts import render, get_object_or_404, redirect from .models import Question, Answer from django.utils import timezone from .forms import QuestionForm, AnswerForm from django.core.paginator import Paginator from django.contrib.auth.decorators import login_required from django.contrib import messages # Create your views here. (... 생략 ...) @login_required(login_url='common:login') def answer_delete(request, answer_id): """ 답변삭제 """ answer = get_object_or_404(Answer, pk=answer_id) if request.user != answer.author: messages.error(request, '삭제권한이 없습니다') else: answer.delete() return redirect('pybo:detail', question_id=answer.question.id) |
이제 질문상세 화면에서 답변을 작성한 사용자의 로그인한 사용자가 같으면 [삭제] 버튼이 나타날 것이다. 잘 작동하는지 확인해 보자.
수정일시 표시하기
마지막으로 질문상세 화면에서 수정일시를 확인할 수 있도록 템플릿을 수정한다.
| # D:\projects\mysite\templates\pybo\quesiton_detail.html {% extends 'base.html' %} {% block content %} <div class="container my-3"> <h2 class="border-bottom py-2">{{ question.subject }}</h2> <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ question.content }} </div> <div class="d-flex justify-content-end"> {% if question.modify_date %} <div class="badge badge-light p-2 text-left mx-3"> <div class="mb-2">modified at</div> <div>{{ question.modify_date }}</div> </div> {% endif %} <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ question.author.username }}</div> <div>{{ question.create_date }}</div> </div> </div> {% if request.user == question.author %} <div class="my-3"> <a href="{% url 'pybo:question_modify' question.id %}" class="btn btn-sm btn-outline-secondary">수정</a> <a href="#" class="delete btn btn-sm btn-outline-secondary" data-uri="{% url 'pybo:question_delete' question.id %}">삭제</a> </div> {% endif %} </div> </div> <h5 class="border-bottom my-3 py-2"> {{ question.answer_set.count }} 개의 답변이 있습니다. </h5> {% for answer in question.answer_set.all %} <div class="card my-3"> <div class="card-body"> <div class="card-text" style="white-space: pre-line;"> {{ answer.content }} </div> <div class="d-flex justify-content-end"> {% if answer.modify_date %} <div class="badge badge-light p-2 text-left mx-3"> <div class="mb-2">modified at</div> <div>{{ answer.modify_date }}</div> </div> {% endif %} <div class="badge badge-light p-2 text-left"> <div class="mb-2">{{ answer.author.username }}</div> <div>{{ answer.create_date }}</div> </div> </div> {% if request.user == answer.author %} <div class="my-3"> <a href="{% url 'pybo:answer_modify' answer.id %}" class="btn btn-sm btn-outline-secondary">수정</a> <a href="#" class="delete btn btn-sm btn-outline-secondary" data-uri="{% url 'pybo:answer_delete' answer.id %}">삭제</a> </div> {% endif %} </div> </div> {% endfor %} <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3"> {% csrf_token %} <!-- 오류 표시 Start --> {% if form.errors %} <div class="alert alert-danger" role="alert"> {% for field in form %} {% if field.errors %} <strong>{{ field.label }}</strong> {{ field.errors }} {% endif %} {% endfor%} </div> {% endif %} <!-- 오류 표시 End --> <div class="form-group"> <textarea name="content" id="content" {% if not user.is_authenticated %} disabled {% endif %} class="form-control" rows="10"></textarea> </div> <input type="submit" value="답변등록" class="btn btn-primary"> </form> </div> {% endblock %} {% block script %} <script type='text/javascript'> $(document).ready(function(){ $(".delete").on('click', function(){ if(confirm("정말로 삭제하시겠습니까?")){ location.href = $(this).data('uri'); } }); }); </script> {% endblock%} |
이제 질문이나 답변을 수정하면 다음처럼 수정일시가 표시될 것이다.
여기까지.
댓글