[Django] - 3. HTML과 연동하기(1)

최창우·2022년 8월 19일

Django

목록 보기

3/10

🙌 이전 포스팅 참고

📜 HTML과 연동하여 웹페이지를 띄어보자

📕 워크플로우 이해

서버접속
정의한 url로 이동 (어떤 방법이든)
- app 폴더의 urls.py에 정의된 path
해당 url과 연결된 메서드 수행
- app 폴더의 views.py에 정의된 메소드
해당 메서드에 연결된 HTML 파일을 로드

📕 준비

📖 필요한 작업

app 폴더내에 template 폴더 생성
- template 폴더에 사용할 HTML 파일 작성
메서드 작성
- app 폴더의 views.py에 사용할 메서드를 작성
- 메서드 작성시 고려사항
  어떤 방법으로 rendering 을 할것인가? 정해야한다.

template 폴더 인식을 위한 setting.py 수정

app 폴더명을 추가하면 된다.

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app', # 템플릿 폴더 인식을 위해 추가한 값
]

📖 렌더링 방법

위 2번에서 언급했던 렌더링방법을 알아보자.

첫번째 방법

loader.get_template 과 render 를 사용

def test_method(request):
    template = loader.get_template("index.html")
    context = {} 
    return HttpResponse(template.render(context,request))

두번째 방법

render 만 사용 ! 간단하고 선호되는 방법 !

def test_method(request):
    context = {}
    return render(request,'login.html', context)

참고로 context는 template에 넘겨줄 추가 내역들 삽입 하는 변수다.

📕 예제

메인페이지와 로그인페이지를 만들어보자.

📖 메인페이지

파일경로 : app/views.py

def main_page(request):
    # HTML 파일에 넘겨줄 데이터 정의
    now = datetime.now() 
    
    # HTML 파일에 넘겨줄 추가 내역들 삽입하는 곳
    context = {
        "now":now
    } 
    
    # request에 대해 main.html로 context데이터를 넘겨준다.
    return render(request, 'main_page.html', context)

파일경로 : app/urls.py

# 사용할 메서드 목록을 url과 연결(라우팅)
urlpatterns = [
    path('', views.main_page, name='main_page'),
]

파일경로 : app/templates/main_page.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>메인 페이지</title>
    </head>
    <body>
        <p>안녕하세요 메인페이지 입니다.</p>
        <hr>
        <p>현재시각 : {{now}}</p>
    </body>
</html>