๊ณ ๋ช
ํฐ์ฝ์ด๋ผ๊ณ ์ธ๋๊ฐ ๋ณด๋ด์ค ์ฌ์งใ
ใ
ใ
ใ
ใ
ใ
ใ
ใ
๊ท์ฝ๊ตฐ....
๋ฒจ๋ก๊ทธ์ ์์์ ๊ณ ๋ช
์ด ์ฌ์ง์ผ๋ก ํ๋๊น ๊ท์ฌ์์ ์ฐ๋๋ง์ด ๋๋ค........
์ด๋ฒํ๋์์๋ Todo List๋ฅผ ๊ตฌํํ๋ ํ๋์ ํ๋๋ฐ ์๊ฐ์ด ๋ถ์กฑํด์ ์์ธ์กฐํ ํ
ํ๋ฆฟ์ ์ฐ๊ฒฐํ๋ ๊ฒ๊น์ง ์งํํ๋ค... ๋ค์ ํ๋๋ถํฐ๋ ๋นก์ธ๊ฒ ๋๊ฐ์ผ์ฅ..
pip install django
django-admin startproject mytodo .
์ ๋ช
๋ น์ด๋ฅผ ์
๋ ฅํ๋ฉด mytodo
๋ผ๋ ํด๋์ ํจ๊ป manage.py
ํ์ผ์ด ๊ฐ์ด ์๊ธด๋ค!
python manage.py startapp todo .
์ ๋ช
๋ น์ด๋ฅผ ์
๋ ฅํ๋ฉด todo ํด๋๊ฐ ์์ฑ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค!
์ฐ๋ฆฌ๊ฐ ๋ง๋ ํ๋ก์ ํธ์ ๊ธฐ๋ณธ์ ์ผ๋ก settings.py
ํ์ผ์ด ์ถ๊ฐ๋์ด์๋ค. ์ฌ๊ธฐ์ ๋ค์ํ ์ค์ ์ ํ ์ ์๋๋ฐ INSTALLED_APPS
๊ฐ์ ๋ง์ง๋ง ๋ถ๋ถ์ ๋ฐฉ๊ธ ๋ง๋ todo ์ฑ์ ์ถ๊ฐํด์ค๋ค
์๋ ๊ฒ!
์ฐ๋ฆฌ๊ฐ todo๋ฅผ ๋ฑ๋กํ๋ฉด ๋ฑ๋กํ ์๊ฐ์ ์ฐ๋ฆฌ๋๋ผ ๊ธฐ์ค์ผ๋ก ์ค์ ํ๊ธฐ ์ํด settings.py
์ TIME_ZONE
์ Asia/Seoul๋ก ๋ฐ๊ฟ์ค๋ค
todoList๋ฅผ ๊ด๋ฆฌํ๋ ๊ด๋ฆฌ์ ๊ณ์ ์ ์์ฑํด์ค๋ค. ๊ด๋ฆฌ์ ํ์ด์ง์ ๋ค์ด๊ฐ์ ๋ก๊ทธ์ธ ํ ๋ ํ์ํ ๊ณ์ ์ด๋ค.
python manage.py createsuperuser
todoํด๋ ์์ ์๋ models.py
์ ์์ฑํ ๋ชจ๋ธ์ ๋ง๋ค์ด์ค๋ค. ๋ชจ๋ธ์ ํด๋์ค๋ก ๋ง๋ค์ด์ฃผ๋๋ฐ django์ db์ ์๋ modelํด๋์ค๋ฅผ ์์๋ฐ์ ๋ง๋ ๋ค.
todo์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ค์ด๊ฐ์ผํ๋ ํ๋๋ฅผ ์ ๋ชฉ๊ณผ ์ค๋ช
, ์์ฑ๋ ์ง, ์๋ฃ์ฌ๋ถ, ์ค์๋ ๋ฑ์ผ๋ก ์ ํด์ฃผ์๋ค.
class Todo(models.Model):
title = models.CharField(max_length=50)
description = models.TextField(blank=True)
created = models.DateTimeField(auto_no_add=True)
complete = models.BooleanField(default=False)
important = models.BooleanField(default=False)
def __str__(self):
return self.title
์๋ฃ์ฌ๋ถ๋ ๋์ค์ todo์์ ์๋ฃ๋ฅผ ๋๋ฅด๋ฉด ์๋ฃ๋ชฉ๋ก์ผ๋ก ๋ฐ๋ก ๋๊ธธ ์์ ์ด๋ค
์๋ฃ์ฌ๋ถ์ ์ค์๋๋ todo๋ฅผ ๋ฑ๋กํ ๋ ์ค์ ํ ์ ์๋๋ก ๊ธฐ๋ณธ๊ฐ์ False๋ก ์ง์ ํด์ค๋ค
__str__
ํจ์๋ ํด๋น todo์ title(๋ฌธ์์ด)๋ก ๋ฆฌํดํด์ฃผ๋ ํจ์๋ค
๋ชจ๋ธ์ ๋ง๋ค์ด์ฃผ์์ผ๋ฉด ์ด ๋ชจ๋ธ์ ๊ด๋ฆฌ์๊ฐ ๊ด๋ฆฌํ ์ ์๋๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ด๊ธฐํ ํ๊ณ ๊ธฐ๋กํด์ฃผ์ด์ผํ๋ค. ์ด ์์ ์ ๋ง์ด๊ทธ๋ ์ด์ /๋ง์ด๊ทธ๋ ์ดํธ ๋ผ๊ณ ๋ถ๋ฅธ๋ค
python manage.py makemigrations
๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ด๊ธฐํํ๋ค. db.sqlite3 ํ์ผ์ ๋ณ๊ฒฝ์ฌํญ์ ๊ธฐ๋กํ๋ค.
python manage.py migrate
๋ณ๊ฒฝ์ฌํญ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ํ๋ค.
๊ด๋ฆฌ์ ํ์ด์ง์์ ๋ฐฉ๊ธ ๋ง๋ ๋ชจ๋ธ์ ํ์ธํ ์ ์๋๋ก Todo ๋ชจ๋ธ์ ๋ฑ๋กํด์ผํ๋ค.
todo
ํด๋์์ admin.py
์ ๋ชจ๋ธ์ ๋ฑ๋กํด์ค๋ค.
from .models import Todo
ํ์ฌ ํด๋์์ ์๋ models.py์ ์๋ Todo ํด๋์ค๋ฅผ ํธ์ถํ๋ค.
admin.site.register(Todo)
๊ด๋ฆฌ์ ์ฌ์ดํธ์ ๋ชจ๋ธ Todo๋ฅผ ๋ฑ๋กํ๋ค.
ํ๋ก์ ํธ ํด๋์ธ mytodo
์์ ์๋ urls.py
์ ๊ด๋ฆฌ์ ํ์ด์ง๋ฅผ ์ฐ๊ฒฐํด์ค๋ค.
๋ณดํต ๊ธฐ๋ณธ์ ์ผ๋ก ๊ด๋ฆฌ์ ํ์ด์ง์ path๋ ๋ฑ๋ก๋์ด์๋๋ฐ ํน์ ๋ชจ๋ฅด๋ ํ์ธ ํด์ค๋ค.
urlpattern = [
path('admin/', admin.site.urls),
]
๋๋ ์ฅ๊ณ ์ MTVํจํด์ ๋ฐ๋ผ์ Model-Template-View ์์๋ก ํ๋ก๊ทธ๋๋ฐ์ ํ ๊ฒ์ด๋ค.
์๋ฃ๋์ง์์ Todo๋ง ๋ณด์ฌ์ฃผ๋๋ก ๊ตฌํํ ์์ ์ด๋ค. ๋จผ์ Todo ์ ์ฒด ์กฐํ ํ์ด์ง๋ฅผ ๋ํ๋ด๋ ํ
ํ๋ฆฟ์ ์์ฑํ๋ค.
๋จผ์ todo์ฑ ์์ templates
ํด๋๋ฅผ ๋ง๋ค๊ณ ๊ทธ ์์ ๋ค์ todo ํด๋๋ฅผ ๋ง๋ค์ด todo_list.html
ํ์ผ์ ์์ฑํ๋ค.
<todo_list.html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/boot-strap-icons.css">
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<p>
<a href=""><i class="bi-plus">Add Todo</i></a>
<a href="" class="btn btn-primary" style="float:right">์๋ฃํ Todo ๋ชฉ๋ก</a>
</p>
<ul class="list-group">
{% for todo in todos %}
<li class="list-group-item">
<a href="">{{todo.title}}</a>
{% if todo.important %}
<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">์์ ํ๊ธฐ</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
์ด๋ฒ TodoList ํ๋ก์ ํธ์์๋ ๊ฐ์ฅ ์ ๋ช
ํ๊ณ ์ค๋๋ CSS ํ๋ ์์ํฌ์ธ Bootstrap์์ฌ์ฉํ๋ค
๋ฏธ๋ฆฌ ์คํ์ผ์ด ์ ์๋์ด์๊ณ ์ฌ์ฉ๋ฒ์ด ๊ฐ๋จํด์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ด ์ ์ฉ๋ TodoList๋ฅผ ๋ง๋ค ์ ์์๋ค
Bootstrap์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๊ฐ์ง๊ฐ ์๋๋ฐ
1. css ํ์ผ์ ๋ฐ์์ ํ๋ก์ ํธ ํด๋์ ์ง์ด๋ฃ๋ ๋ฐฉ์
2. ์น ๋งํฌ ํํ๋ก ์ ๊ณต๋๋ css ํ์ผ์ ๊ฐ์ ธ๋ค ์ฐ๋๋ก ์ฐธ์กฐ ํ๋ ๋ฐฉ์์ด ์๋ค
๋ฏธ๋ฆฌ ์์ฑ๋ css์ด๋ฏ๋ก ๊ธฐ๋ณธ์์ฑ๋จ์์ธ class๋ฅผ ๋ฐ๋ฅด๋๋ฐ class์ ์ด๋ฆ์ Bootstrap์ด ๋ฏธ๋ฆฌ ์ ์ํด๋์ ๊ฒ์ด๋ฏ๋ก ์ด๋ฆ์ ์ ๋ณด๊ณ ์์ฑํด์ผํ๋ค
Todo ๋ฐ์ดํฐ๋ฅผ ํ ํ๋ฆฟ์ผ๋ก ๋๊ฒจ์ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ๋ด๋นํ๋ค.
from .models import Todo
def todo_list(request):
todos = Todo.objects.filter(complete=False)
return render(request, 'todo/todo_list.html', {'todos':todos})
์๋ฃ๋์ง์์ Todo๋ง ์ ์ฒด ๋ชฉ๋ก ํ๋ฉด์ ์ ๋ฌํ๊ธฐ ์ํด complete=False๋ก ํํฐ๋งํด์ค๋ค
todoํด๋์์ ์๋ todo_list.html๋ก ํ๋ฉด์ ๋๊ฒจ์ค๋ค
๋ฉ์ธ ํ์ด์ง์์ Todo ์ ์ฒด ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด URL์ ์ฐ๊ฒฐํด์ค๋ค. todo ํด๋ ์์ ์๋ urls.py
์ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ๋ค.
from . import views
urlpatterns = [
path('', views.todo_list, name='todo_list'),
]
ํ์ฌ ํด๋์ views.py๋ฅผ ํธ์ถํ๋ค
path์ ''๊ฒฝ๋ก๋ฅผ ์ง์ ํด ๋ฉ์ธํ๋ฉด์ todo_list๋ทฐ๋ฅผ ์ฐ๊ฒฐํ๋ค
todo ์ฑ URL์ ํ๋ก์ ํธ์ URL์ ์ฐ๊ฒฐํด์ค๋ค. mytodoํด๋ ์์ ์๋ urls.py์ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ๋ค.
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todo.urls')),
]
๋ฉ์ธํ๋ฉด(์ฒซ ํ๋ฉด)์ ์ ์ฒด ์กฐํ ํ ํ๋ฆฟ์ด ๋ณด์ด๋๋ก ํ๋ค
์ฐ๋ฆฌ๊ฐ todo๋ฅผ ๋ฑ๋กํ๋ฉด ๋ฉ์ธํ๋ฉด์๋ Todo์ title, ์ ๋ชฉ์ด ๋ณด์ด๊ฒ๋๋ค. ์ด ์ ๋ชฉ์ ๋๋ ์๋ ์ด todo์ description, ์ ๋ก๋ํ ๋ ์ง, ๋ชฉ๋ก์ผ๋ก ๋ฒํผ์ด ์๋ ์์ธ ์ ๋ณด๊ฐ ๋ณด์ฌ์ง๋๋ก ์์ธ ์กฐํ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค.
๋จผ์ ์์ธ์กฐํ ํ
ํ๋ฆฟ์ ๋ง๋ ๋ค. todoํด๋ ์์ templates ํด๋ ์์ todo ํด๋์์ todo_detail.html
ํ์ผ์ ๋ง๋ ๋ค.
<todo_detail.html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/boot-strap-icons.css">
</head>
<body>
<div class="container">
<h1>Todo Detail</h1>
<div class="container">
<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-text">{{todo.description}}</p>
<p style="float:right">{{todo.created}}</p>
<a href="{% url 'todo_list' %}" class="btn btn-primary">๋ชฉ๋ก์ผ๋ก</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
๋ชฉ๋ก์ผ๋ก ๋ฒํผ์ ๋๋ ์๋ ๋ฉ์ธํ๋ฉด์ผ๋ก ๋ค์ ๋๊ฒจ์ง๋๋ก ํ ํ๋ฆฟํ๊ทธ๋ฅผ ์ด์ฉํด name='todo_list'๋ก ๋ฑ๋ก๋ url์ ๋๊ฒจ ํด๋น๋ทฐ๋ฅผ ํธ์ถํ๋ค
์ ํ๋ todo์ pk์ธ id๋ฅผ ๊ธฐ๋ฐ์ผ๋ก Todo ๊ฐ์ฒด๋ฅผ ์์ธ์กฐํ ํ ํ๋ฆฟ์ผ๋ก ์ ๋ฌํ๋ค. ์ฆ, ๋ฑ๋กํด๋์ todo๊ฐ ์ฌ๋ฌ๊ฐ ์์๋ ์์ธ์กฐํ๋ก ๋๊ธธ todo๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ํด์ ์ ์ํ ๋ณ์ pk๋ฅผ ์ด์ฉํ๋ค.
def todo_detail(request, pk):
todo = Todo.objects.get(id=pk)
return render(request, 'todo/todo_detail.html', {'todo':todo})
todo = Todo.objects.get(id=pk)
todo ๋ณ์์ Todo ๋ชจ๋ธ๋ก ๋ค์ด์ค๋ ๋ฐ์ดํฐ๋ฅผ id๋ก ๊ตฌ๋ถํด ํ๋์ฉ ๊ฐ์ ธ์์ ์ ์ฅํ๋ค
url์ /pk/๋ก ์ค์ ํด์ ํด๋นํ๋ pk์ todo๋ฅผ ์ฐ๊ฒฐํ๋ค.
todo ํด๋์์ ์๋ urls.py
ํ์ผ์ ๊ฒฝ๋ก๋ฅผ ์ง์ ํด์ค๋ค.
path('<int:pk>/', views.todo_Detail, name='todo_detail'),
pk๋ ์ ์ํ์ผ๋ก ๋ฐ์์ค๊ธฐ์ํด int๋ก ์ฃผ์๋ค. pk๋ ๋ช๋ฒ์งธ todo์ธ์ง ๊ตฌ๋ถํ๊ธฐ ์ํ ๋ณ์๋ค.
todo_list.html
์์ todo์ title์ ํด๋ฆญํ๋ฉด ์์ธ ์กฐํ ํ์ด์ง๋ก ๋๊ฒจ์ง ์ ์๋๋ก<a>
ํ๊ทธ ์์ todo_detail url์ ํ
ํ๋ฆฟ ํ๊ทธ๋ฅผ ์ด์ฉํด ๋ฑ๋กํด์ค๋ค.
<a href="{% url 'todo_detail' pk=todo.pk %}">{{todo.title}}</a>
todo์ title์ ๋๋ฅด๋ฉด todo_detail name์ ๊ฐ์ง url์ ํธ์ถํด์
views.py
์ ์๋ todo_detail ํจ์๋ฅผ ํธ์ถํ๋ค. pk๋ก ์ด๋ค todo์ธ์ง ๊ตฌ๋ถํ๋ค.
์ฌ๊ธฐ๊น์ง๊ฐ ์ด๋ฒ ํ๋๋ ์งํํ ๋ด์ฉ์ด๋ค!!! ์์ง๊น์ง๋ ์ ๋ฒ์ ์งํํ๋ ํฌํ ์ฑ๊ณผ ๋งค์ฐ ๋น์ทํด์.... ๋ค๋ค ์ง๋ฃจํ์์ง์์๊น.. ์ด์ง ๊ฑฑ์ ์ด๊ธดํ๋ฐ..... ๊ทธ๋๋ ๊ธฐ์ด๋ฅผ ๋ค์ง์๋ก ๋ ์ข์ง์์๊น ์ถ์ผ๋...... ๊ทธ๋๋ ๋ค์ ํ๋ก์ ํธ๋ฅผ ๊ณ์ ๋๊ฐ์ผํ๋๊น ํธ๋ค๋ฅ ์งํํด์ผ์ฅ...!!!