0203 / k_digital 40일차 / 웹 프로그래밍(Django)

0. 어제에 이어 Django 웹 프로그래밍.

   데이터를 다룰 때보다 눈에 보이는 결과물이 있어 한결 흥이 나는 편이다.

 

 

Django 프로세스

 예제. 로또 번호 자동 생성 사이트

 

어제 한 일 marune3.tistory.com/61

 1. 가상환경 만들기

 2. 프로젝트 생성

 3. 앱 생성

 

이어서 간다

 

4. 사이트 DB 설정 (models.py)

  웹 사이트에서 주로 활용할 데이터베이스의 구조와 조건 등을 설정한다.

 

  django에서 제공하는 Model 클래스를 상속받아 활용한다. from django.db import Model

   #Field : DB의 Feature에 해당한다 ; 열 이름과 데이터타입, 옵션 등을 설정

    ;CharField(문자), TextField(대용량 문자), ImageField(이미지), IntegerField(정수), FileField(파일) 등 다양한 필드 존재

   #Class를 활용하기에 객체, self 등을 이해해야 한다. 

 

Field들을 적용해 Table을 만드는 과정. class 아래에는 로또 번호를 생성하고 DB에 저장하는 generate 함수를 정의했다.

 이렇게 만든 DB Table을 실제로 적용해주자.

  명령프롬프트(관리자 권한)로 가서

  python manage.py makemigrations를 실행 => 함수를 적용할 준비

  python manage.py migrate를 실행 => DB 파일에 반영

  결과물로 프로젝트 메인 폴더 안 dblite3 파일에 무언가가 적힌 모습을 확인할 수 있다. 

makemigrations와 migrate 적용

 

5. 관리자(admin) 사이트
  python manage.py createsuperuser
  관리자 페이지를 설정해준다. 관리자 이름과 비밀번호를 입력한다. 메인 url/adimin으로 접속할 수 있다. DB 추가, 임의 데이터 추가, 페이지 관리, DB 확인, 관리자 권한 부여 등 다양한 일을 할 수 있다.

 

python manage.py createsuperuser하고 admin.py에서 models.py의 GuessNumber를 추가한 이후 들어간 관리자 페이지. 

6. Test

  1) tests.py에서 testcase 함수 설정 ; DB에서 설정한 클래스가 제대로 돌아가는지 결과가 나오도록 설정

  2) python manage.py test

   => cmd 내에서 제대로 출력값을 내보내는지 살핀다.

test.py에 집어넣은 test용 클래스. cmd에서 확인해보자. 

$$ TDD(Test-driven development) 테스트 주도 개발

테스트 케이스를 먼저 만들고 함수를 만들어가는 방식 ; 테스트할 결과물을 먼저 마련해두고 이에 맞춰 개발한다
#TDD 장단점에 대한 의견은 갈리지만, TestCase를 쓰면서 나아가는 것은 해야한다

 

 7. Shell

 

  파이썬 콘솔 같은 기능 : 코드 값을 곧바로 확인
 

  python manage.py shell

다양한 명령어를 써서 한 문장씩 실행해볼 수 있다.
  #import문 활용 #객체 생성과 실행 #objects 함수로 DB 호출 #탈출은 exit( )
  #django와 jupyter notebook 연동도 가능 or 복잡한 함수는 jupyter notebook에서 작성 후 점검하고 옮겨와도 된다

 

shell로 곧바로 결과값을 확인한 모습. DB Table 내용들을 모두 보고, 객체를 찍어 함수를 실행하고 결과를 찾아봤다.

 

 8. Template(html) 연결

 

1) html 파일 생성(templates)

 앱 폴더 안에 templates 폴더를 따로 만들고 한 곳에 모아둔다 : 빠른 속도, 수정 편리

 templates 폴더 안에 사이트 내 화면들을 구성할 html 파일들을 만든다.
  #Bootstrap에서 제공하는 example 파일을 얻어와 활용해보자 #google web font

 

2) render 설정(views.py)

  받은 url 요청을 html과 이어줘야 한다. render를 활용한다.
   # render 필수값 (request, 'lotto/default.html', { })

   # request, html 경로, dict = views.py에서 돌린 결과값을 html과 주고받기 위한 장치

html 파일만 적용하고 render로 연결한 뒤 사이트 모습. 

 

3) Static 연동(css)
 html 파일을 css 파일과 연결해야 한다. css파일들 역시 html과 마찬가지로 static 폴더를 따로 만들고 한 곳에 몰아둔다.

 => collectstatic
  python manage.py collectstatic

  #css 코드 파일들을 모아준다 #이미지 변형을 적용할 준비를 마쳐준다 #프로젝트 폴더 아래 따로 static 파일이 만들어지고 CSS, JS 등이 모인다.(이 파일은 손대지말것. 수정은 앱 폴더 내에서 진행한다.)

 

 html 파일과 css 링크를 이어줄 때는 {% load staticfiles %}를 쓴다. 여기서 {% %}는 Django 기능 명령어를 쓰겠다는 약속. (if문, for문도 넣을 수 있다) header 태그 내 css 링크들을 적용할 때 주소로 {% static '파일 경로' %}를 준다. static 기능은 해당 파일 위치를 html이 이해할 수 있는 경로로 만들어준다

 

CSS 를 적용한 후 모습.

 4) html 내에서 변수값 받아내기

 views.py와 models.py 등에서 적용한 함수로 만들어진 DB를 화면에 표시하고 싶어진다. 이럴 때 html과 views.py를 연동해야 한다. 그럴 때는 {{ }}를 활용한다. {{ }}는 변수를 가져오겠다는 의미다. 아까 render에서 설정한 dict 값을 활용한다.  #{% for문 %} 등과 연계할 수 있다

DB에 저장된 값들까지 받아낸 모습

 9. 사용자로부터 데이터 입력받기(forms.py)

 

 1) 앱 폴더 안에 forms.py를 생성한다. (필수는 아님)

 2) 사용자로부터 입력받을 forms 형태를 결정하는 Class를 만든다. 여기서도 DB Class를 만들때처럼 웹 프레임워크가 제공하는 클래스(ModelForm)으로부터 상속을 받는다.
 # ModelForm 클래스 약속에 따라 class Meta, model, fields(수정 불가능한 변수)를 지정

 3) views.py로 가서 POST 페이지 요청만 걸러내 form 데이터를 받도록 준비한다 => form class와 model class에서 정의한 입력 함수와 생성 함수들을 거치며 만들어진 데이터들을 DB에 저장한다 => redirect로 페이지 이동까지!

form 태그를 활용해 로또 번호 생성을 위한 정보를 받는 하위 페이지를 만들었다! 

  10. 세부 페이지 만들기&연결

  메인 페이지에서 다른 추가 페이지들(url)들로 손쉽게 이동하려면 일일이 url을 집어넣어야 한다. 어느 이용자가 그렇게 할까. 세부 페이지를 추가로 만들고 쉽게 이동할 수 있도록 조정해본다.

 

 1) 세부 페이지(데이터 추가 내용) 만들기

   1- urls.py에 detail url 추가(데이터 번호로 url 이동)

   2- views.py에서 detail 함수 추가(데이터 번호로 세부 정보(DB 행) 얻어내기, templit(=html)과 연결하기)

   3- 세부 페이지 html 파일 구현

 

url에 대응하는 함수들을 정의해둔 views.py 페이지. 옆의 templates 폴더를 보면, render해서 옮겨간 html 들이 모여있다.

  2) 링크 연결

   1- 메인 html에서 각 제목마다 세부 페이지로 이어지는 url 링크를 이어준다.

     새로 만들어지는 url들은 <a href={% url 'url_name' %}> </a> 형태로 적용한다.
       #장고 명령어 url은 뒤에 붙은 'url_name'을 바탕으로 urls.py에서 적용 url을 찾아 입력해 준다.
       #url에 쓰이는 변수들의 성질은 name 뒤에 바로 이어붙인다. ex. <a href={% url 'url_name' num=~~.num %}>

최종 링크 연결까지 구현한 웹사이트 메인. + 버튼을 누르면 신규 로또 번호 생성 페이지로, text를 누르면 해당 세부 정보 페이지로 이동한다.

 

오늘의 TML

 

$$ 에러페이지 확인
 문제가 생긴 요청, URL, 에러 타입, 에러가 터진 함수 등을 찍어준다. (settings.py에서 DEBUG=True로 설정했기에 에러페이지가 뜬다)

 

$$ ORM(Object-Relational Mapping)
 django 웹 프레임워크에서 곧바로 DB를 조정할 수 있도록 연결하는 방식. 따로 어렵게 사용하기보다 곧바로 편하게 쓸 수 있는 이 방식을 많이 활용한다.