TIL DAY 170
.jpg)
오늘 배운 일
✔️ Django 웹 개발
1. 포스트 삭제 구현하기
우리는 앞에서 Create, Read, Update 를 모두 구현해보았다.
마지막으로 삭제 기능을 만들어보겠다.
모든 기능의 시작은 URL 로 부터이니 urls.py 로 가서 마지막 코드를 주석 해제한다.
urls.py
전과 마찬가지로 name = post-delete 으로 적어준다.
다음으로 post_detail.html 로 가서 해당 코드에 삭제하기 버튼을 만들어준다.
수정하기 코드 밑에다가 div 태그를 만들어준다.
post_detail.html
그리고 div 태그 사이에 a 태그 하나를 넣어준다.
템플릿 태그를 사용해서 url 해주고 post-delete 한 다음에 삭제할 아이디를 넘겨준다.
다 완성되면 다음으로 뷰를 작성해준다.
views.py 로 가서 맨 아랫부분에 함수 post_delete 을 만들어준다.
views.py
인자로 request 와 post_id 를 넘겨준다.
그리고 다음과 같이 코드를 작성해준다.
post 라는 변수에 삭제할 글을 가져오는 get 을 이용해서 인자로 id=post_id 라고 해준다.
그리고 post.delete() 를 해서 삭제시켜준다.
다음으로 return 해서 redirect 해서 post-list 로 가게끔 해준다.
그럼 이제 서버를 켜서 확인해본다.
터미널에다가 다음과 같이 커맨드를 입력해서 서버를 실행시키고...
python3 manage.py runserver
삭제하기 버튼이 생겨져있다.
자 그럼 삭제하기 버튼을 누르면...
이렇게 맥북 프로에 관한 포스트는 없어졌다.
이렇게 사용해도 문제 없지만 한 번의 클릭으로 글이 날아가 버리는 것은 조금 아쉽다.
보통 글 삭제 기능은 한 번 더 물어봐 주는 세심함이 필요하다.
정말 글을 삭제하려는지 물어보고 네를 눌렀을 경우 삭제가 되도록 해보겠다.
그러면 우리는 새로운 템플릿을 만들어서 삭제를 한 번 더 확인하도록 해보겠다.
post_confirm_delete.html
{% extends './base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'posts/css/post_confirm_delete.css' %}">
{% endblock css %}
{% block content %}
<div class="confirm">
<p class="title">[{{post.title}}]</p>
<p>삭제하시겠습니까?</p>
<form method="POST">{% csrf_token %}
<div class="confirm_btn">
<input type="submit" value="삭제하기">
</div>
</form>
</div>
{% endblock content %}
코드를 보면 위에 기본적인 base.html 를 상속하고 CSS 도 적용해 줄 거니까 load static 도 있고 CSS 파일도 불러온다.
content 블록 안에 구현을 해보았는데 안에 div 태그를 하나 만들어주고 다음에 div 태그 안에 유저가 포스트를 삭제하겠다는 정보를 전달하기 때문에 이런 식으로 폼을 작성해보았다.
POST 방식으로 넘겨주었다.
그리고 폼 안에는 삭제하는지 확인하는 버튼이 있고 그리고 따로 필요한 필드가 없기 때문에 django 폼은 여기에서 필요하지 않는다.
그리고 윗 부분에는 삭제할 글의 제목을 보여주고 CSS 도 적용해주었다.
csrf_token 도 적용을 해주었고 그리고 삭제하기 버튼에 디자인도 입혀주었다.
그럼 다시 뷰를 작성해준다.
post_delete 함수를 수정해주는데 일단 삭제할 글을 들고 온 다음에 if request.method == 'POST' 라면 사용자가 삭제 버튼을 눌렀을 때니까 post.delete() 를 넣어준다.
다음에 return 해주고 redirect 해서 post-list 로 보내도록 해준다.
만약에 else 즉 GET 방식으로 요청이 들어왔을 때 우리가 작성한 post_confirm_delete 템플릿을 렌더해서 보여주면 된다.
views.py
그리고 세 번째 인자로 사전형 형태로 'post' 에다가 우리가 삭제를 위해 가져온 글을 넘겨주면 된다.
그럼 이제 완성했으니 서버를 실행해서 확인해준다.
아무 포스트를 클릭해서...
삭제하기 버튼을 눌러주고...
아 그리고 만들어준 CSS 를 복사해서 css 폴더에 붙여넣어준다.
post_confirm_delete.css
h1,h2,h3,p,a,ul,li{
margin: 0;
padding: 0;
font-family : 'NanumMyeongjo';
font-weight: 200;
list-style: none;
text-decoration: none;
outline: none;
color: black;
}
a:hover,a:active,button:hover {
text-decoration: none;
}
html{
position: relative;
min-height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
background: #2b2a2e;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
}
img {
margin: 0;
padding: 0;
border: 0;
}
#nav{
height: 60px;
}
#content{
margin-top: 160px;
margin-bottom: 300px;
}
#footer{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 75px;
background: rgba(41, 41, 44, 0.7);
}
.container{
width: 800px;
margin: 0 auto;
}
.logo{
width: 65%;
min-width: 899px;
margin: 0 auto;
padding-top: 17px;
}
.logo img{
width: 88px;
}
.confirm{
padding: 108px 0 124px;
text-align: center;
background: #fff;
}
p{
font-size: 17px;
color: #575362;
letter-spacing: -0.35px;
}
p.title{
padding-bottom: 8px;
font-size: 20px;
font-weight: bold;
color: #333236;
letter-spacing: -0.45px;
}
.confirm_btn{
padding-top: 46px;
}
.confirm_btn ul li{
display: inline-block;
}
.confirm_btn input{
display: inline-block;
margin-left: 18px;
padding: 10px 19px 11px;
font-size: 15px;
color: #69666d;
background: #f6f6f6;
border: none;
}
.confirm_btn a{
display: inline-block;
margin-left: 18px;
padding: 10px 19px 11px;
font-size: 15px;
color: #69666d;
background: #f6f6f6;
border: none;
}
.confirm_btn input:hover{
color: red;
transition: all .2s;
}
.footer{
width: 65%;
min-width: 899px;
margin: 0 auto;
}
.footer p{
text-align: right;
font-size: 20px;
line-height: 75px;
font-weight: 800;
letter-spacing: -0.85px;
color: #53534f;
}
이런 식으로 확인하는 페이지가 나오고 삭제 버튼을 누르면...
잘 삭제된 것을 확인할 수 있다.
끝으로 :
- 오늘은 삭제 기능을 구현해보았다.
- 마찬가지로 폼을 이용해서 리퀘스트에 메소드 별로 기능을 구현해 주면 된다.
- 우린 CRUD 를 모두 구현해보았으니 다음에는 블로그 웹 사이트를 완성시켜보겠다.
