Develop/Django(Exercise)_v1

7. 사진 게시물 수정 기능 만들기

보보트레인 2023. 9. 17. 22:49

1. 템플릿 

기존 photo_post.html 그대로 이용.

 

2. 뷰 

def photo_edit(request, pk):
    photo = get_object_or_404(Photo, pk=pk)
    if request.method == "POST":
        form = PhotoForm(request.POST, instance=photo)
        if form.is_valid():
            photo = form.save(commit=False)
            photo.save()
            return redirect('photo_detail', pk=photo.pk)
    else:  
        form = PhotoForm(instance=photo)
    return render(request, 'photo/photo_post.html', {'form': form})

설명 : 먼저 수정할 대상을 pk로 찾아온다. 여기서 세부 화면을 만들 때 사용했던 get_object_or_404()를 다시한번 사용.

이후 PhotoForm의 instance를 photo로 설정해주어 수정 대상이 될 데이터를 설정한다.

 

GET요청이 들어오더라도 photo데이터를 폼에 담아서 photo_post.html에 넘겨주어 기존 데이터를 수정할 수 있도록 추가처리 하였다.

3. url

from . import views

urlpatterns = [
    path('', views.photo_list, name='photo_list'),
    path('photo/<int:pk>', views.photo_detail, name='photo_detail'),
    path('photo/new/', views.photo_post, name='photo_post'),
    path('photo/<int:pk>/edit', views.photo_edit, name='photo_edit'),
]

마찬가지로 pk값을 URL에 넣어 구분하는것을 확인할 수 있음.

4.템플릿 추가 수정 ( photo_detail.html )

<html>
    <head>
        <title>Photo App</title>
    </head>
    <body>
        <h1>{{ photo.title }}</h1>
        <h3><a href="{% url 'photo_edit' pk=photo.pk %}">Edit Photo</a></h3>
        <section>
            <div>
                <img src="{{ photo.image }}" alt="{{photo.title}}" width="300" />
                <p>{{ photo.description }}</p>    
                <p>{{ photo.author }}, {{ photo.price }}원</p>    
            </div>
        </section>
    </body>
</html>

 

<결과화면>

edit을 누르면 입력하는 화면으로 이동
잘 이동하는 것 확인.

 

요약 : 순서를 간단히 요약하면 다음과 같다.

  1. photo_detail에서 edit_Photo 클릭
  2. pk를 받아 url photo_edit을 찾아가서 views.py의 photo_edit으로 이동
  3. photo_edit은 photo_post.html화면을 랜더링 하고있기에 똑같이 photo_post화면 ( 작성하기 )에 들어간것과 같은 결과를 낳는다.
  4. 이후는 모두 동일.
반응형