티스토리 뷰
0.들어가면서
기초 부분에서는 GET방식의 /article/pk/edit/로 수정 form을 보여주고 GET방식의 /article/pk/update/로 url을 바꾸는 방식으로 DB로 저장을 할것이다. 하지만 최종코드부분에서는 url은 같지만 DB저장 부분을 POST로 바꿔서 할것이다.
update 기초
수정하기를 누르면
기존의 게시물을 수정할 수 있는게 뜨고,
수정완료를 누르면
저장하는 로직을 만들어야한다.
detail.html
<a href="/articles/{{ article.pk }}/edit/">수정</a> :을 누르면 form을 보여주게우선하자.
urls.py
path("<int:pk>/edit/", views.edit)
views.py
def edit(request, pk):
context = {
'pk' : pk
}
return render(request, 'article/edit.html', context)
위 처럼 적어도 되지만 수정 시 원래 있던 글을 유지 시키기 위해서 아래처럼 다 보내준다
def edit(request, pk):
article = Article.objects.get(pk=pk)
context = {
'article' : article
}
return render(request, 'article/edit.html', context)
edit.html
<form action="/articles/{{ article.pk }}/update/">
<label for="title">제목</label>
<input type="text" name="title" id="title" value="{{ article.title }}" autofocus required>
<br>
<label for="content">내용 : </label>
<textarea name="content" id="content">{{ article.content }}</textarea>
<input type="submit" value="작성완료">
</form>
위의 굵은 글씨를 넣어줘야 적었던 글이 유지된다.
autofocus
정의 및 특징
<input> 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동된다.
autofocus 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
required
required를 적으면 input값을 입력하지 않고 제출을 누를 시 경고창이 뜬다.
name값이 일치하다면 하나의 input에만 required를 적으면된다.
urls
path('<int:pk>/update/', views.update)
views
def update(request, pk):
artielt = Article.objects.get(pk=pk)
article.title=request.POST.get('title')
article.content=request.POST.get('content')
article.save()
return redirect(f'/articles/{article.pk}/')
POST를 적는 이유는 아래의 링크를 참고하자.(GET사용시 발생하는 문제점)
Update최종
- GET, POST를 분기한다.
- ModelForm 만들 때, ArticleForm과 관련된 instance는 article이다. 즉, 수정 시에는 해당 article 인스스턴스를 넘겨 줘야한다. (그래야 아마도 수정되고 있던 내용이 유지 된다.)
detail.html
<button><a href="{% url 'articles:update' article.pk %}">수정</a></button>
urls.py
path('<int:pk>/update/', views.update, name='update'),
views.py(모델폼 적용)
def update(request, pk):
article = get_object_or_404(Article, pk=pk)
if request.method == 'POST':
form = ArticleForm(request.POST, instance=article)
if form.is_valid():
article = form.save()
return redirect('article:detail', article.pk)
else:
form = ArticleForm(instance=article)
context = {
'form':form
}
return render(request, 'articles/update.html', context)
update.html
<form action="" method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="수정">
</form>
views.py 추가
GET으로 들어오면 form = ArticleForm()으로 비어있는거 보내고 POST로 들어오면 post 처리하고 valid되면 return한다. 즉, POST는 form = ArticleForm(request.POST)로 적어주면된다. request.POST에는 유효한지 유효하지 않은지도 담겨있다.
+HTML 개발자 도구에서 input의 required를 지우고 실험해보면 된다.
그리고 CREATE와 UPDATE는 코드는 비슷하지만 받는 인자가 달라서 합치기는 힘들다.
update 같은 경우는 해당 내용도 전달해 줘야하기 때문에 article 인스턴스도 적어 줘야한다.
POST는 form = ArticleForm(request.POST, instance=article)이고 GET은 form = ArticleForm(instance=article)로 해주면 된다.
같은 FORM 쓰기(HTML)
CRUD완성 후
Create와 Update의 html이 form으로 비슷하다. 그래서 같이쓰자. form.html로 하나로 바꾸자.
이때 HTML의 분기를 해줘서 다른 글이 보이게 하면 된다.
url로 분기한다. 분기의 기준은 url_name으로 분기한다.
그리고 resolver를 쓰면 url이 아니라, url이름으로 분기가 가능하다.
https://docs.djangoproject.com/en/3.0/ref/request-response/
위의 공식 문서중 HttpRequest objects를 확인해 보면
.request.path_info 는 고정된 string url로 비교를 해준다. (이거 사용해도된다)
class ResolverMatch는 url의 name을 사용하는 것인데 우리는 이걸 사용한다.
html 분기
{% if request.resolver_match.url_name == 'create' %}
<h2>새글쓰기</h2>
{% else %}
<h2>수정하기</h2>
{% endif %}
이때 request를 바로 쓸 수 있는 이유는 settings.py에서 TEMPLATES안의 OPTIONS 안에 contenxt_precessors 안에 보면 자동으로 context로 넘어가면서 request 쓸 수 있게 설정이 되어있다.
'Web > Django' 카테고리의 다른 글
[Django] API (108) | 2020.07.20 |
---|---|
[Django] CRUD_DELETE (0) | 2020.07.16 |
[Django] CRUD_READ_목록페이지 구현 (0) | 2020.07.12 |
[Django] CRUD_CREATE (0) | 2020.07.10 |
[Django] URL 변수화 (0) | 2020.07.09 |
- Total
- Today
- Yesterday
- read_csv
- JavaScript
- nextjs autoFocus
- vuejs
- django
- 자연어처리
- next.config.js
- useHistory 안됨
- nodejs
- Deque
- useState
- pandas
- react
- Express
- NextJS
- mongoDB
- error:0308010C:digital envelope routines::unsupported
- logout
- TensorFlow
- react autoFocus
- UserCreationForm
- Queue
- login
- DFS
- Python
- 자료구조
- 클라우데라
- Vue
- typescript
- BFS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |