이번 시간에는 django를 이용해 Todolist 프로젝트를 실행할 것이다!
우선 프로젝트를 실행하기 전 CRUD에 대해 짚고 가자
0.CRUD
- C: Create
- R: Read
- U: Update
- D: Delete
- 데이터 관련 처리 기본 기능 모두를 포함하고 직관적이고 간단하다
- Todolist 프로젝트는 모든 프레임워크를 공부할 때 가장 대표적인 예제다
그러므로 이제 Todolist 프로젝트를 생성하겠다~
1. 가상 환경 세팅
프로젝트를 생성한 뒤 Terminal에
python --version 을 입력해 파이썬 버전 확인!
버전 확인이 완료됐다면, 장고를 설치해야 하므로 pip install django 입력
장고 프로젝트 생성을 위한 django-admin startproject mytodo . 입력
todo 앱 생성을 위한 python manage.py startapp todo 입력
위처럼 mytodo 폴더와 todo 폴더가 만들어졌다면 성공!
2. 프로젝트 설정
이제 Todo 프로젝트를 위한 설정을 해 줄 것이다
우선 mytodo > setting.py 파일로 가서
INSTALLED_APPS 부분에 'todo' 를 추가해 준다
그리고 시간대를 서울로 바꿔주야 하므로 똑같이 setting.py 파일에서
TIME_ZONE = 'UTC' 를 TIME_ZONE = 'Asia/Seoul'로 변경해 준다!
그리고 위 사진처럼 todo 폴더 안에 templates > todo 폴더를 만들어 주고,
todo 폴더에는 노란색으로 칠한 파일들을 만들어 준다
이제 관리자 계정을 만들어줘야 하므로 Terminal에
python manage.py createsuperuser 입력!
(오류가 뜨면 python manage.py migrate를 입력해 보자)
차례대로 username, Email, password를 입력하고 y를 입력하면 관리자 계정 생성 완료!
3. 프로젝트 모델 생성
todo > models.py 파일에 코드 작성!
지난번 PhotoApp 프로젝트와 비슷하다고 보면 된다!
class 명을 Todo로 지은 뒤 Models의 Model을 상속받고 Todolist를 사용할 때
작성할 목록들을 나열한다
title:제목, description:설명, created:생성날짜, complete:완료, important:중요
그리고 각각의 필드와 제한 조건들을 준다!
CharField(max_length=100) - 문자열 필드 (최대 길이 100)
TextField(blank=True) - 문자 필드 (빈칸 가능)
DateTimeField(auto_now_add=True) - 날자 필드 (자동 추가)
BooleanField(default=False) - 불린 필드 (기본값=거짓)
그리고 마지막 def 함수는 title을 리턴하는 함수이다!
이렇게 모델을 작성했으면 마이그레이션을 진행해줘야 한다!
왜냐면 프로젝트 실행 후 최초의 마이그레이션이므로
Terminal에 python manage.py makemigrations 입력하고
python manage.py migrate 를 입력한다
이제 관리자 페이지에서 모델을 관리할 수 있도록 todo > admin.py 파일에
이렇게 코드를 작성해 준다!
.models = 현재 파일에서 models 파일의 import Todo = Todo 함수를 가져온다
admin.site = 관리자 페이지에
register(Todo) = Todo 모델을 등록한다
그 후 mytodo > urls.py 파일에 가서 관리자 페이지에 접속하기 위한 url 설정을 해 준다
위와 같이 작성해 준 뒤 Terminal에 python manage.py runserver 입력
주소 맨 뒤에 /admin 추가로 입력해 이동했을 때
위와 같은 창이 떴다면 성공~!
4. Todo 전체 조회
todo > templates > todo 폴더에 todo_list.html 파일을 만들어 준다
우선 Todo 전체를 조회할 수 있는 템플릿을 작성해 줄 것이다
(이때 완료되지 않은 Todo만 조회할 수 있도록 할 것이다)
사실 html 같은... 프론트 부분은 잘 모른다 ㄱ-
그래서 자세한 설명이 불가능하다...
다만 head 부분에서 link 태그를 보면 stylesheet 로 스타일을 불러온 곳이 있는데
이는 Bootstrap 홈페이지에서 4.6 버전의 css를 가져온 것이다
Bootstrap 4.6 CSS 여기를 클릭하면 해당 페이지로 이동할 수 있다
우선 이렇게 템플릿을 작성했으니 다음은 데이터를 템플릿으로 넘겨주는 뷰를 생성할 차례다
todo > views.py 파일로 들어가서 코드 작성!
이 역시 현재 파일에 models 의 Todo 함수를 가져오는 코드를 적어주고
def 함수를 이용해 todo_list를 작성해준다
이때 완료되지 않은 todo만 보여줘야 하므로 complete=False 값을 주었다
그리고 템플릿 태그 안의 todos를 사용해 완료되지 않은 todo를 모두 가져와 템플릿으로 전달
후에 todo_list.html (템플릿 파일)이 웹에 보여질 수 있도록 가공하는 렌더링 값을 return!
뷰를 작성한 뒤에는 url을 작성해야 한다!
todo > urls.py 파일로 들어가서
이렇게 코드를 작성한다.
이는 메인 화면에서 todo 목록을 보여주기 위해 이렇게 연결했다
그리고 todo 앱 url을 프로젝트 url에 연결해 주기 위해
mytodo > urls.py 파일에 들어가
코드를 추가해 준다!
todo 폴더의 urls.py 파일을 연결한다는 의미이다!
그리고 Terminal에서 runserver를 해 주면
이런 식으로 뜬다면 완성이다!
(완료하지 않은 todo만 보이도록 해 놨기 때문에 완료되지 않은 todo만 보이는 중)
5. Todo 상세 조회
todo > templates > todo 폴더에 todo_detail.html 파일을 만들고
위와 같이 코드를 작성한다.
todo_list.html에 작성했던 것처럼 부트스트랩에서 스타일 시트를 가져왔다.
그리고 상세정보에서 메인 화면인 목록으로 돌아가는 버튼과 기능을 넣었다!
템플릿 파일을 작성했으니 이제 뷰를 만들어보자
todo > views.py 파일에서 코드 작성
todo_list 와 비슷한데 다른 점이 있다면 상세 보기는 todo를
하나씩 클릭해서 보는 거이므로 id=pk 값이 추가된다.
이는 Todo 모델로 들어오는 데이터를 id로 구분해서 하나씩 가져와
변수 todo에 저장한다는 의미이다.
id로 하나씩 가져온 데이터를 todo_detail.html 템플릿 파일에 적용시킨다고 보면 된다
이제 url을 작성하러 todo > urls.py 파일로 이동!
PhotoApp의 url을 지정했던 것처럼 todo_detail도 url을 지정해준다!
그리고 todo_list.html 파일로 이동해서
빨간색 밑줄 친 부분을 추가해 준다!
이는 todo_list (메인 화면)에서 todo의 title(=제목)을 클릭했을 때,
상세 보기 페이지로 넘어갈 수 있도록 url을 지정해 주는 것이다!
그리고 또 runserver를 입력해서 페이지를 들어가면
todo 목록에서 todo 제목을 입력했을 때 위와 같은 상세보기 창으로 넘어간다면 성공!
이번 시간은 여기까지 공부했으니 다음 부분은 다음 시간에 마저 진행하겠다!
PotoApp 프로젝트를 생성했을 때와 비슷한 부분들이라서 아직까지는 어려움이 없었다
그럼 이번 동아리 과제는 끝~
