- 2.4. 실전 예제 해결하기(2)
1. Models.py 파일에 Todo 모델을 class로 만들어 두었다. 해당 Todo class에는 content 값만 존재하게 되는데, 'isDone'이란 값을 models, BooleanField 데이터 타입으로 갖자. 이때 defaylt 값은 False로 설정한다.
2. 데이터베이스에 반영
3. 이후 사용자가 완료 버튼을 눌렀을 때 서버에서는 해당 todo의 id값이 넘어오는데, 해당 id 값으로 데이터를 삭제하는 것이 아니라, 해당데이터의 isDone 값을 True로 만들자.
4. 메인 화면에서는 서버에서 모든 todo를 가져오는데, 이때 해당 todo의 isDone값을 if문으로 체크해 isDone 값이 False일 때만 보여주자.
출처: www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791190014571
- 해결과정
새로운 데이터 필드를 만드는 것은 알고있었지만, default 값에 대한 문법은 알지 못했기에 검색을 통해 찾아보았다. 'How to set BooleanField default value in django' 라는 검색어로 구글에 검색해보니 다음과 같은 자료를 찾을 수 있었다.
자료 주소: stackoverflow.com/questions/5190313/how-to-set-true-as-default-value-for-booleanfield-on-django
영문으로 된 문서이긴 하지만 설명이 간략해서 이해하기 쉽다. Todo의 데이터베이스 코드를다음과 같이 바꿨다.
- models.py
from django.db import models
# Create your models here.
class Todo(models.Model):
content = models.CharField(max_length = 255)
isDone = models.BooleanField(default = False)
해당 데이터의 isDone값을 True로 만드는 과정은 간단하였다. 객체지향언어인 Python으로 이루어져서인지 모르겠지만 파리미터의 값만을 바꿔주면 됐다. 다음은 나의 코드이다.
def deleteTodo(request):
done_todo_id = request.GET['todoNum']
print("완료한 todo의 id",done_todo_id)
todo = Todo.objects.get(id = done_todo_id)
todo.isDone = True
todo.save()
return HttpResponseRedirect(reverse('index'))
다음은 index.html 파일이다. 사실 이건 답을 봤다. 아직 html에서 python코드를 사용하는 것은 어려운 것 같다. 다음은 소스 코드이다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- Boot strap -->
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style>
.content{
height: 75%;
}
.messageDiv{
margin-top: 20px;
margin-bottom: 50px;
}
.toDoDiv{
}
.custom-btn{
font-size: 10px;
}
.panel-footer{
height:10%;
color:gray;
}
</style>
<title>To-Do</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="page-header">
<h1>To-do List <small>with Django</small></h1>
</div>
</div>
<div class="content">
<div class="messageDiv">
<form action="./createTodo/" method="POST">{% csrf_token %}
<div class="input-group">
<input id="todoContent" name="todoContent" type="text" class="form-control" placeholder="메모할 내용을 적어주세요">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">메모하기!</button>
</span>
</div>
</form>
</div>
<div class="toDoDiv">
<ul class="list-group">
{% for todo in todos %}
{% if todo.isDone == False%}
<form action="./deleteTodo/" method="GET">
<div class="input-group" name='todo1'>
<li class="list-group-item">{{todo.content}}</li>
<input type="hidden" id="todoNum" name="todoNum" value="{{todo.id}}"></input>
<span class="input-group-addon">
<button type="submit" class="custom-btn btn btn-danger">완료</button>
</span>
</div>
</form>
{% else %}
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="panel-footer">
실전예제로 배우는 Django. Project1-TodoList
</div>
</div>
</body>
</html>
git: github.com/agape1225/ToDo-List-with-Django.git
'programming > 웹프로그래밍' 카테고리의 다른 글
[spring] Interceptor와 Session의 개념과 구현, Clone Coding (0) | 2021.05.05 |
---|---|
[spring] 로컬 파일에 이미지 저장과 예외처리 - (SimpleDateFormat), Clone Coding (0) | 2021.04.10 |
[spring] 로컬 파일에 Img 저장하기! - (ServletContext), Clone Coding (0) | 2021.03.22 |
[Django] Django 한그릇 뚝딱 필기 #1 (0) | 2021.02.14 |