포토앱을 다음으로 투두앱을 만들기로 했다.
00. CRUD
시작하기 전 crud가 무엇인지는 알고 시작해야한다.
C : CREATE
R : READ
U : UPDATE
D : DELETE
대부분의 사이트는 CRUD 기능이 있다. 오늘 만들 사이트는 이의 대표적인 예제이다.
01. 가상 환경 세팅
- 파이썬 버전 및 가상환경 실행 확인
python --version- 장고 설치
pip install django- 장고 프로젝트 생성
django-admin startproject mytodo .- todo 앱 생성
python manage.py startapp todo02. Todo 프로젝트 설정
- settings.py에 설치한 앱 추가
- 시간대를 서울로 바꾸기 (선택)
TIME_ZONE = 'Asia/Seoul'- todo/templates/todo 디렉터리 생성
- todo 폴더 안에 forms.py, models.py, urls.py 생성
- 관리자 계정 생성
python manage..py createsuperuser03. Todo 모델 생성
- 모델 생성 (todo/models.py)
from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=100)
description = models.TextField(blank=True)
created = models.DateTimeField(auto_now_add=True)
complete = models.BooleanField(default=False)
important = models.BooleanField(default=False)
def __str__(self):
return self.title- 마이그레이션 진행
python manage.py makemigrations- 마이그레이트 진행
python manage.py migrate- 관리자에 Todo 등록 (todo/admin.py)
from django.contrib import admin
from .models import Todo
admin.site.register(Todo)
- 관리자 페이지에 접속하기 위해 url 설정 (mytodo/urls.py)
(기본적으로 되어있으니 확인만)
urlpatterns = [ path('admin/', admin.site.urls),04. TodoList
결과 미리보기
- todo 목록 조회 기능
todo /templates/todo/todo_list.html (bootstrap 적용을 한 상태이다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Todo List</title>
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<p>
<a href=""><i class="bi-plus"></i>Add Todo</a>
<a href="" class="btn btn-primary" style="float:right">완료한 Todo List</a>
</p>
<ul class="list-group">
{% for todo in todos %}
<li class="list-group-item">
<a href="">{{todo.title}}</a>
{% if todo.important %}
<!-- 4.xx 버전에서만 보인다 -->
<span class="badge badge-danger">!</span>
{% endif %}
<div style="float:right">
<a href="" class="btn btn-danger">완료</a>
<a href="" class="btn btn-outline-primary">Edit Todo</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>- Todo 전체 조회 뷰 생성
todo/views.py
from django.shortcuts import render, redirect
from .models import Todo
def todo_list(request):
todos = Todo.object.filter(complete=False)
return render(request, 'todo/todo_list.html', {'todos' : todos})- Todo 전체 조회 URL 연결
todo/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.todo_list, name='todo_list'),
]mytodo/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todo.urls')),
]05. TodoDetail
결과 미리보기
- Todo 상세 조회 기능
todo/templates/todo/todo_detail.html
(div 태그 확인하자)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<div class="container">
<h1>Todo Detail</h1>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{todo.title}}</h5>
<p class="card-test">{{todo.description}}</p>
<a href="{% url 'todo_list' %}" class="btn btn-primary">목록으로</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>- Todo 상세 조회 뷰 생성
todo/views.py
def todo_detail(request,pk) :
todo = Todo.objects.get(id=pk)
return render(request, 'todo/todo_detail.html',{'todo':todo})- Todo 상세 조회 URL 연결
todo/urls.py
path('<int:pk>/', views.todo_detail, name='todo_detail'),todo_list.html
<a href = "{% url 'todo_detail' pk=todo.pk %}">{{ todo.title }}</a>
천천히 꾸준히 하는 블로그