[Django web app 생성] 5. django로 web application 삭제, 수정 기능(delete, update) 구현

✅ 목표
1. 파이썬을 활용해 사용자의 요청이 들어올 때마다  웹페이지를 찍어내는 공장을 만들자
2. 사용자로부터 투고를 받아 페이지를 생성하거나, 사용자마다 다른 페이지를 보여주는 개인화

 

* windows conda 가상환경에서 cmd와 vsc로 실행

5. Web Application delete, update 기능 구현

1) 삭제(delete) 기능 구현

(1) read page(상세정보 페이지)에 delete 버튼 만들기

homepage에서는 안보이나 상세정보 페이지를 접속하면 delete 버튼이 나타나게끔 만들자.

index page(홈페이지) 접속 시에는 id 값이 없으므로 이 id값을 인자로 넣어줄 때만 버튼이 등장하게끔 만들자.

 

read/1/ 과 같이 상세 정보 페이지로 접속 시 HTMLTemplate에 의해 html 코드가 완성된다.

이때 contextID라는 변수를 만들고 id가 있을 때만, 즉 상세정보 페이지에 접속했을 때만 delete 버튼이 등장하도록 하자.

이때 input type='hidden' 은 보이지는 않지만 form으로 전달할 정보를 넣어두는 태그로써, id 정보를 가져갈 수 있게 한다.

상세정보 페이지 내에 delete 버튼이 생성되었다.

 

이제 버튼을 누르면 삭제하라는 명령을 서버에 전달할 수 있다.

(2) delete 기능 구현

서버에서 이 명령을 전달 받기 위해 myapp.urls.py와 myapp.views.py를 수정하자.

위 HTMLTemplate 함수 내에 contextUI 변수에 delete라는 버튼을 클릭 시 POST 방식으로 delete 경로로 접속한다.

따라서 이 경로를 향한 라우팅을 urls.py에서 해줘야한다.

myapp.urls.py에 path 함수로 delete 경로를 넣어주었다.

 

이제 delete 경로 접속 시 views.py의 delete 함수가 작동한다.

 

delete 버튼을 누르면 post 방식으로 delete 경로로 이동하여 서버의 데이터를 수정하므로,

csrf 우회가 우선 필요하다. 이후 if문을 통해 post방식 접근을 확인하고, 상세정보 페이지의 id를 받아온다.

그리고 전역변수인 topics 중에서 해당 id와 일치하지 않는 것만 newTopics에 담아준 뒤에 다시 topics 함수에 newTopics 변수를 초기화 시켜주고, 홈페이지로 재접속한다.

nembizzang 페이지가 delete로 인해 삭제되었다.

 

2) 수정(update) 기능 구현

(1) read page(상세정보 페이지)에 update 버튼 만들기

homepage에서는 안보이나 상세정보 페이지를 접속하면 update 버튼이 나타나게끔 만들자.

 

delete 버튼과 마찬가지로 if문과 contextUI를 활용해 id가 있는 상세페이지를 접속했을 경우에만 버튼이 등장하게끔 하였으며, update 버튼 클릭시 update 페이지로 이동한다.

상세 정보 페이지에 등장한 update 버튼, 버튼을 누르면 수정 양식으로 접속된다.

(2) update 기능 구현

페이지 이동 역시 delete와 마찬가지로 urls.py에서 views.py의 update 함수를 작동하도록 라우팅해준다.

myapp.urls.py에 path 함수로 update 경로를 넣어주었다.

 

이제 update 경로 접속 시 views.py의 update 함수가 작동한다.

 

- 만약 get 방식으로 접속하였다면(상세정보 페이지에서 update 버튼 클릭 시) : 

제목과 내용을 수정할 수 있는 양식(input 태그와 textarea 태그)을 띄운다.

이때 원래 저장된 내용을 불러오기 위해 topics 내에서 동일한 id를 가진 topic의 title과 body를 가져와서 selectedTopic 이라는 변수에 담아준다.

그리고 title을 수정할 input tag에는 원래의 title을 value로 미리 넣어두고, body를 수정할 textarea에는 원래의 body를 미리 넣어둔다.

- POST 방식으로 접속하였다면(update 양식을 수정 후 제출 버튼 클릭 시) : 

전역변수인 topic의 title과 body를 수정한 값으로 변경해준 뒤, read/id 경로로 재접속한다.

nembizzang에서 nembizzang2로 수정이 되었다.

 

6. 추가로 공부해야할 것

- 생성한 데이터를 반영구적으로 보관할 Database

- Database에 접속해 데이터를 가져올 django model 기능

- 접속자가 서버에서 원하는 기능 외 다른 기능을 사용하지 못하게 할 웹 보안

- views.py에서 python 코드와 html 코드를 분리하기 위한 template engine