Django Project ToDoList - 2

Python, Django, 장고
Page content

개요

  • Django 한 그릇 뚝딱 교재의 내용에서 멀티캠퍼스 강의에 맞게 일부 수정함
  • 2019년 버전이고 현재는 2023년이기 때문에 소스코드 변경 사항이 필요할 거 같아서 글을 남김

교재 홍보

Untitled

Step 01 - 이전 내용 확인

Step 02 - HTML 템플릿 사용

  • HTML과 CSS가 적용된 기본 템플릿은 다음 github 저장소에서 다운로드 받을 수 있다.

  • my_to_do_app 폴더에 가면 templates 폴더는 처음에는 존재하지 않는다. 따라서, 새로운 폴더를 생성하여 폴더명을 templates라고 명명한다.

    • 폴더 생성 전
    $ ls
__init__.py  __pycache__/  admin.py  apps.py  migrations/  models.py  tests.py  urls.py  views.py
    • 폴더 생성 후
    $ ls
__init__.py  __pycache__/  admin.py  apps.py  migrations/  models.py  templates/  tests.py  urls.py  views.py

  • templates 폴더 안에 다시 my_to_do_app 폴더를 만들고 그 안 index.html 파일을 생성 후, 아래코드를 복사하여 붙여 넣는다.

    • 이 때, 부트스트랩 버전에 유의한다.
    • 주의! 교재에 나와있는 버전 대신, 최신버전을 사용하려면 관련 스타일을 모두 변경해야 한다. 여기에서는 이 과정은 생략한다.
    • 파일 경로 확인 : ToDoList/my_to_do_app/templates/my_to_do_app/index.html
    <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="" 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">

                    <form action="" method="GET">
                        <div class="input-group" name='todo1'>
                            <li class="list-group-item">메모한 내용은 여기에 기록될 거에요</li>
                            <input type="hidden" id="todoNum" name="todoNum" value="1"></input>
                            <span class="input-group-addon">
                                <button type="submit" class="custom-btn btn btn-danger">완료</button>
                            </span>
                        </div>
                    </form>

                </ul>
            </div>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project1-TodoList
        </div>
    </div>
</body>
</html>

    Untitled

Step 03 - views.py 파일 수정

  • 기존 HttpResponse 코드 영역을 아래와 같이 재 수정한다.
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
# before
'''
def index(request):
   return HttpResponse("My_to_do_app first page")
'''

# after
def index(request):
    return render(request, "my_to_do_app/index.html")

Step 04 - 확인

  • 다시 manage.py 를 실행하여 정상적으로 웹에서도 구동이 되는지 확인한다.
python manage.py runserver

Untitled