[Django]_ToDoList 만들기 (3) HTML 템플릿 사용하기 & 테이블 사용하기

 

오늘은 웹 페이지를 꾸며보겠습니다. 

이렇게 웹 페이지를 꾸미기 위해서는 HTML, CSS, Javascript를 이용할 수 있습니다. 하지만 우리는 아직 이것들에 대해 익숙하지 않으므로, 책의 저자가 제공하는 기본 템플릿을 이용해보겠습니다. 

 

template 사용을 위한 폴더 만들기

• 왼쪽 바에서 my_to_do_app 폴더 안에 templates 폴더를 만듭니다.
• 그리고 그 폴더 안에 my_to_do_app 폴더를 만듭니다.
• 그리고 그 폴더 안에 index.html 파일을 만듭니다.

html파일을 사용할 때에는 항상 app 내부에 templates 폴더를 만들고, 그 안에 app 이름과 동일한 폴더를 만든 후, 그 안에 html 파일이 존재해야 합니다. django는 우리가 html파일을 템플릿으로 쓰려고 할 때 이와 같은 경로로 불러오기 때문입니다.

그럼 이와 같은 경로를 가지는 것을 확인할 수 있습니다.

https://github.com/doorBW/Django_with_PracticeExamples

GitHub - doorBW/Django_with_PracticeExamples: "실전 예제로 배우는 Django" 서적에 대한 예제 문제들 및 코드

책의 저자가 제공하는 템플릿을 다운 받아 이용합니다. Project > ToDoList > index_init.html 파일을 복사하여 index.html에 붙여넣기를 합니다.

 

저장한 후, [Go Live]를 하면 다음과 같은 화면이 나옵니다.

우리는 runserver를 한 후 이와 같은 화면이 나오도록 하는 것이 목표입니다.

 

그러기 위해서 우리는 어느 파일로 가야 할까요? 그렇죠, 구현되는 것과 관련된 views.py로 가서 코드 수정을 하겠습니다.

 

HTML 템플릿 구현하기

 

• 우선 우리가 아까 작업했었던 첫 웹 페이지는 주석처리를 하겠습니다. 그리고 다음과 같이 입력합니다.

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

• 다시 한 번 서버링크를 열어준다면 

 

 

지금까지 우리는 사용자에게 첫 화면을 보여 줄 URL을 설정했습니다.

이제 메모한 내용을 기록해보는 작업을 해보겠습니다. 

 

테이블(table) 사용하기

 

데이터베이스에 데이터가 저장될 때에는 테이블(table)이라고 하는 특정 형태의 묶음 단위로 저장이 됩니다. 테이블은 Django에서 model.py에서 정의합니다. 우리는 python에 기본으로 설정된 SQLite를 이용하겠습니다. 

 

• ToDoList > my_to_do_app > model.py로 이동합니다.
• # Create~ 아래에 다음 코드를 입력합니다.

class Todo(models.Model):
    content = models.CharField(max_length=255)

• 이렇게 수정한 것을 django서버에 적용하겠습니다. 그러기 위해서는 테이블을 만들어 주어야 합니다.

python manage.py makemigrations

• 그럼 결과가 다음과 같이 나올 것입니다. 이렇게 우리는 Todo 라는 클래스를 생성했습니다. 그리고 my_to_do_app 폴더 안에 migrations 폴더가 생성되었고, 그 안에 0001_initial.py 파일이 생성되었습니다. 

• 데이터베이스가 실제로 테이블을 만들도록 명령어를 입력하겠습니다.

python manage.py migrate

• 이제 프로젝트 데이터베이스에 접근해보겠습니다. 아래와 같은 결과를 받았다면 정상적으로 접근한 것입니다. 

python manage.py dbshell

 

• 해당 데이터베이스에 존재하는 테이블을 확인해보겠습니다. .table을 입력해봅시다. 오른쪽 하단에 우리가 만든 테이블 보이시나요?

 

• PRAGMA table_info(my_to_do_app_todo); 를 입력하면 테이블의 정보를 볼 수 있습니다.

출력 결과가 의미하는 건 다음과 같습니다. 순서(단순 숫자임) | 이름 | 형태 | notnull여부 | pk여부

 

• 이제 해당 테이블 안에 어떠한 데이터가 있는지 확인해보겠습니다.  SELECT * FROM my_to_do_app_todo;

    아무것도 출력된 것이 없습니다. 우리가 아직 아무 데이터도 입력하지 않았기 때문입니다.

 

 

 

여기까지 정말 수고 많으셨습니다. 다음 포스팅에서는 사용자가 입력한 텍스트를 서버를 통해 데이터베이스에 저장하도록 코드를 입력해보겠습니다.  감사합니다.