🦁 멋사 7번째 활동

황다은·2023년 5월 19일

django

🦁 멋쟁이사자처럼

목록 보기

7/8

고명티콘이라고 언니가 보내준 사진ㅋㅋㅋㅋㅋㅋㅋㅋ 귀엽군....
벨로그의 시작을 고명이 사진으로 하니까 귀여워서 쓰는맛이 난다........

이번활동에서는 Todo List를 구현하는 활동을 했는데 시간이 부족해서 상세조회 템플릿을 연결하는 것까지 진행했다... 다음 활동부터는 빡세게 나가야쥐..

1. 프로젝트 생성

1.1 먼저 새로운 폴더(작업공간)를 만들어서 장고를 다운받는다

pip install django

1.2 mytodo 라는 장고 프로젝트를 현재 위치에 만들어준다

django-admin startproject mytodo .

위 명령어를 입력하면 mytodo 라는 폴더와 함께 manage.py 파일이 같이 생긴다!

1.3 프로젝트에서 기능을 담당할 todo 앱을 만들어준다

python manage.py startapp todo .

위 명령어를 입력하면 todo 폴더가 생성된 것을 확인할 수 있다!

2. 프로젝트 설정

2.1 앱을 만들었으니 앱을 프로젝트에 추가한다

우리가 만든 프로젝트에 기본적으로 settings.py 파일이 추가되어있다. 여기서 다양한 설정을 할 수 있는데 INSTALLED_APPS 값의 마지막 부분에 방금 만든 todo 앱을 추가해준다
요렇게!

2.2 시간대 바꾸기

우리가 todo를 등록하면 등록한 시간을 우리나라 기준으로 설정하기 위해 settings.py에 TIME_ZONE을 Asia/Seoul로 바꿔준다

이 부분은 필수는 아니다...!

2.3 관리자 계정 생성

todoList를 관리하는 관리자 계정을 생성해준다. 관리자 페이지에 들어가서 로그인 할 때 필요한 계정이다.

python manage.py createsuperuser

username(아이디), Email, password, password(again)을 입력하면 계정 생성 완료!
아이디와 비밀번호가 유사한지, 비밀번호가 짧은지까지 확인한다
비밀번호 입력시 커서가 움직이지않아 헷갈리므로 주의가 필요하다!

3. Todo 모델 생성

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(문자열)로 리턴해주는 함수다

3.1 생성한 모델을 데이터베이스에 반영한다

모델을 만들어주었으면 이 모델을 관리자가 관리할 수 있도록 데이터베이스에 초기화 하고 기록해주어야한다. 이 작업을 마이그레이션/마이그레이트 라고 부른다

python manage.py makemigrations

데이터베이스를 초기화한다. db.sqlite3 파일에 변경사항을 기록한다.

python manage.py migrate

변경사항을 데이터베이스에 반영한다.

3.2 Todo 모델 등록

관리자 페이지에서 방금 만든 모델을 확인할 수 있도록 Todo 모델을 등록해야한다.
todo폴더안에 admin.py에 모델을 등록해준다.

from .models import Todo

현재 폴더안에 있는 models.py에 있는 Todo 클래스를 호출한다.

admin.site.register(Todo)

관리자 사이트에 모델 Todo를 등록한다.

3.3 관리자페이지 URL 설정

프로젝트 폴더인 mytodo 안에 있는 urls.py에 관리자 페이지를 연결해준다.
보통 기본적으로 관리자 페이지의 path는 등록되어있는데 혹시 모르니 확인 해준다.

urlpattern = [
	path('admin/', admin.site.urls),
]

4. Todo 전체 조회 기능

나는 장고의 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이 미리 정의해놓은 것이므로 이름을 잘 보고 작성해야한다

4.1 Todo 전체 조회 뷰

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로 화면을 넘겨준다

4.2 Todo 전체 조회 URL 연결

메인 페이지에서 Todo 전체 목록을 보여주기 위해 URL을 연결해준다. todo 폴더 안에 있는 urls.py에 경로를 지정한다.

from . import views

urlpatterns = [
	path('', views.todo_list, name='todo_list'),
]

현재 폴더의 views.py를 호출한다
path에 ''경로를 지정해 메인화면에 todo_list뷰를 연결한다

4.3 프로젝트에 Todo 전체 조회 URL 연결

todo 앱 URL을 프로젝트의 URL에 연결해준다. mytodo폴더 안에 있는 urls.py에 경로를 지정한다.

from django.urls import path, include

urlpatterns = [
	path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]

메인화면(첫 화면)에 전체 조회 템플릿이 보이도록 한다

5. Todo 상세 조회 기능

우리가 todo를 등록하면 메인화면에는 Todo의 title, 제목이 보이게된다. 이 제목을 눌렀을때 이 todo의 description, 업로드한 날짜, 목록으로 버튼이 있는 상세 정보가 보여지도록 상세 조회 기능을 구현한다.

5.1 Todo 상세 조회 템플릿 생성

먼저 상세조회 템플릿을 만든다. 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을 넘겨 해당뷰를 호출한다

5.2 Todo 상세 조회 뷰 생성

선택된 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로 구분해 하나씩 가져와서 저장한다

5.3 Todo 상세 조회 URL 연결

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인지 구분한다.

여기까지가 이번 활동때 진행한 내용이다!!! 아직까지는 저번에 진행했던 포토앱과 매우 비슷해서.... 다들 지루하시지않을까.. 살짝 걱정이긴한데..... 그래도 기초를 다질수록 더 좋지않을까 싶으니...... 그래도 다음 프로젝트를 계속 나가야하니까 호다닥 진행해야쥐...!!!

황다은

BackEnd

이전 포스트

🦁 멋사 6번째 활동

다음 포스트