본문 바로가기

programming/웹프로그래밍

[Django] Django 한그릇 뚝딱 Chapter2 실전 예제 해결

반응형

- 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

 

Django 한 그릇 뚝딱 - 교보문고

이 책에서는 빠른 생산성과 쉬운 내용으로 주목받고 있는 언어인 파이썬 그리고 파이썬을 기반으로 한 웹 프레임워크인 Django를 ToDoList 사이트, 맛집 공유 사이트, 엑셀 계산 사이트, 파일 저장

www.kyobobook.co.kr


- 해결과정

 

 새로운 데이터 필드를 만드는 것은 알고있었지만, default 값에 대한 문법은 알지 못했기에 검색을 통해 찾아보았다. 'How to set BooleanField default value in django' 라는 검색어로 구글에 검색해보니 다음과 같은 자료를 찾을 수 있었다.

 

자료 주소: stackoverflow.com/questions/5190313/how-to-set-true-as-default-value-for-booleanfield-on-django

 

How to set True as default value for BooleanField on Django?

I am using BooleanField in Django. By default, the checkbox generated by it is unchecked state. I want the state to be checked by default. How do I do that?

stackoverflow.com

 영문으로 된 문서이긴 하지만 설명이 간략해서 이해하기 쉽다. 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

 

agape1225/ToDo-List-with-Django

Make some web page with Django. Contribute to agape1225/ToDo-List-with-Django development by creating an account on GitHub.

github.com

 

반응형