-
[Python] Flask 템플릿 확장하여 여러 html 파일 연결하기Python 2020. 1. 9. 23:53
LINK Cinema 를 만든다면 화면별로 html 파일이 만들어질텐데, 이 파일 간 연결을 Python 의 flask 안에서 어떻게 연결할 것인지 고민이 되었다.
단순 html 의 연결이라면 버튼 등의 html tag 에 특정 html 파일의 경로를 href 로 지정하기만 하면 될텐데 말이다.
이를 위해서는 Flask 웹 프레임워크의 사용 구조를 알아야 한다.
-
templates : 웹 서비스의 html 파일들을 모아두는 폴더이다. 반드시 'templates' 라는 명칭으로 폴더를 생성해야 한다.
-
venv : 가상 환경을 생성하고 관리하는 데에 사용되는 모듈이다. 해당 폴더에 'app.py' 라는 명칭으로 API 를 구현할 파이썬 파일을 생성한다.
Flask 사용하는 Project 구조 나는 templates 폴더 안에 3개의 html 파일을 생성해두었다. 'layout.html' 에는 전체적인 웹 서비스의 GNB 나 기본적인 디자인 코드가 들어가 있다.
나머지 파일들은 'layout.html' 을 상속받아 각 화면별 필요한 기능들을 구현하였다. 'index.html' 은 처음 진입했을 때 나오는 화면을, 'ticket.html' 은 영화 티켓을 구매하는 화면을 작업할 예정이다.
HTML 상속하기
'layout.html' 을 상속하여 'index.html' 에서도, 'ticket.html' 에서도 똑같이 사용하기 위해서는 템플릿 태그를 알아야 한다. 템플릿 태그 {% 와 %} 에 대해서는 http://pythonstudy.xyz/python/article/307-Django-%ED%85%9C%ED%94%8C%EB%A6%BF-Template 을 참고하면 좋다.
이를 활용하면 특정 html 코드를 블록으로 지정해서 다른 html 에 연결할 수 있다.
나같은 경우에는 'layout.html' 파일을 계속 다른 두 파일에서도 사용할 것이기 때문에 'layout.html' 에 하단의 코드 ({% block content %}
{% endblock %})로 다른 html 파일과 연결할 수 있게 만들어 두었다.<!doctype html> <html lang="en"> <head> <!-- 코드 생략 --> </head> <body> <!-- Navigation Menu --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <!-- 코드 생략 --> </nav> <!-- Bottom Navbar--> <ul class="nav justify-content-center"> <!-- 코드 생략 --> </ul> <!-- 다른 html 코드가 들어가는 공간 --> {% block content %} {% endblock %} </body> </html>상속하는 'ticket.html' 의 코드는 다음과 같다. (페이지 전환만 확인하기 위해 코드는 간단하게 짰다.) extends 로 'layout.html' 을 상속하고 {% block content %} 에 코드를 연결해준다.
{% extends 'layout.html' %} {% block content %} <h1> 페이지 전환! </h1> {% endblock %}'index.html' 도 마찬가지로 처음과 끝에 동일한 템플릿 태그를 넣어주었다.
동일한 템플릿 태그{% block content %} 인데 이 부분에 'ticket.html' 의 코드가 들어갈지, 'index.html' 의 코드가 들어갈지 구분을 어떻게 할까?
답은 url 지정에 있었다.
URL 과 HTML 연결하기
우선 app.py 파일에서 url 과 templates 안에 있는 파일을 연결해주어야 한다.
import requests from flask import Flask, render_template, jsonify, request app = Flask(__name__) ## HTML을 주는 부분 @app.route('/') def index(): return render_template('index.html') @app.route('/ticket') def getTicket(): return render_template('ticket.html') ## 웹에서 사용할 APIs ## 서버 연결 if __name__ == '__main__': app.run('0.0.0.0',port=5002,debug=True)'index.html' 파일을 route 0.0.0.0:5002 에 접속하였을 때 바로 나오게 하였다.
이렇게 되면 진입하였을 때 'index.html' 파일을 렌더링하게 되고 'index.html' 파일에는 'layout.html' 을 상속하기 때문에 'layout.html' 의 템플릿 태그 {% block content %} 에는 'index.html' 의 코드가 들어가게 된다.
route 0.0.0.0:5002 의 sub 도메인으로 /ticket 에는 'ticket.html' 파일을 렌더링 하여 보여주려고 한다.
URL 사용하기
본격적으로 테스트 해볼 것은 'index.html' 에 특정 버튼을 누르면 'ticket.html' 로 이동하는 것이다.
이를 위해 'index.html' 에 아래의 이동 버튼을 만들어두었다.
<a href="/ticket" class="card-link">Get Tickets</a>"/ticket" 으로 앞서 'ticket.html' 파일을 연결해두었던 url 을 href 에 지정하였다.
이제 'index.html' 의 'Get Tickets' 버튼을 누르면 /ticket 의 경로에 있는 'ticket.html' 파일을 렌더링하게 된다.
마찬가지로 'ticket.html' 은 'layout.html' 을 상속하고 'layout.html' 의 템플릿 태그 {% block content %} 에는 'ticket.html' 의 코드가 들어가게 된다.
완성된 화면
index.html 과 ticket.html -