Hello Flask 예제를 통해 하나의 파일로 이루어진 웹 서버를 실행시키고 웹 브라우저를 이용해서 요청과 응답을 주고받았다. 몇 가지 핵심 기능만 제공하는 웹 서비스는 하나의 파일을 이용해서 충분히 기능을 제공할 수 있다.
하지만 여러 페이지로 구성되어 있는 웹 서비스는 각각의 페이지를 서로 다른 파일로 분리하면 유지와 보수가 편리하다. 더불어 페이지의 내용들이 자주 바뀌는 경우 프로그램으로 데이터를 읽어서 페이지에 해당 데이터를 변경할 수 있으면 더 편리하다.
플라스크는 웹 페이지 관리와 페이지 생성 기능을 제공한다. 이를 템플릿(template) 엔진(engine)이라고 하는데 어떻게 사용할 수 있는지 먼저 예제를 통해 살펴보자.
실습을 위해 만들었던 WebPythonFlask 프로젝트 아래에 02_template을 이름으로 디렉토리(=폴더)를 생성하고 다시 이 02_template 디렉토리 아래에 static, templates 라는 이름으로 두 개의 디렉토리를 생성하자.
먼저 templstes 디렉토리 아래에 아래의 세 파일들을 생성하고 내용을 입력하자.
02_template/templates/layout.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='main.css')}}">
{%if title%}
<title>{{title}}</title>
{%else%}
<title>Flask Exercise</title>
{%endif%}
</head>
<body>
<a href="/">Home</a>
<a href="/about">About</a>
<div>
<a href="/login">Login</a>
<a href="/register">Register</a>
</div>
<div>
{%block content%}{%endblock content%}
</div>
</body>
</html>
02_template/templates/about.html
{%extends "layout.html"%}
{%block content%}
<h1>About Page</h1>
{%endblock content%}
02_template/templates/home.html
{%extends "layout.html"%}
{%block content%}
{%for post in posts%}
<h1>{{post.title}}</h1>
<p>{{post.content}}</p>
<p>By {{post.author}} on {{post.datePosted}}</p>
{%endfor%}
{%endblock content%}
다음으로 static 디렉토리 아래에 main.css 파일을 생성하고 그 내용은 비워놓는다. CSS파일은 웹 페이지 요소들의 배치와 모양을 지정하는 파일이다. 예제에서는 웹 페이지를 구성하는 요소들의 모양이나 배치와 같은 디자인 측면은 필요 없기 때문에 비워놓았다.
02_template/static/main.css
마지막으로 02_template 디렉토리 아래에 template.py라는 이름으로 파이썬 스크립트 파일을 생성하고 아래 내용을 입력하자.
02_template/template.py
from flask import Flask, render_template, url_for
app = Flask(__name__)
posts = [
{
'author': 'Elsa',
'title': 'Blos post 1',
'content': 'The first posting',
'datePosted': 'August 16, 2020'
},
{
'author': 'Anna',
'title': 'Blos post 2',
'content': 'The second posting',
'datePosted': 'August 17, 2020'
}
]
@app.route("/")
@app.route("/home")
def home():
return render_template("home.html", posts = posts)
@app.route("/about")
def about():
return render_template("about.html", title = 'About')
if __name__ == "__main__":
app.run("127.0.0.1", 5000)
아래 그림과 같이 디렉토리와 파일들이 준비되었을 것이다.
이제 프로젝트 메인 스크립트 template.py를 실행시키고 웹 브라우저를 이용해 127.0.0.1:5000 주소로 접근해보자. 먼저 아래와 같이 홈 페이지가 나타날 것이다.
Login 링크를 클릭해서 로그인 페이지로 이동하면 아래와 같이 페이지를 찾을 수 없다는 메시지가 표시될 것이다. 아직 로그인 페이지를 만들지 않았으므로 정상적인 응답이다.
예제에서는 웹 페이지를 구성하는 각각의 페이지들을 서로 다른 파일로 구분하였다. 더불어 데이터를 읽어서 웹 페이지 내용을 채우는 기능도 구현해보았다. 이어지는 글에서 코드가 어떻게 동작하는지 분석해 보도록하겠다.
'파이썬 웹 프로그래밍 기본' 카테고리의 다른 글
| 5. 입력 처리 - 5.1. 비밀 토큰(secret token) (0) | 2020.08.18 |
|---|---|
| 4. 웹 페이지 - 4.2. 템플릿 예제 코드분석 (0) | 2020.08.17 |
| 3. 웹 프로그램 동작 원리 - 3.2. Flask 예제 분석 (0) | 2020.08.15 |
| 3. 웹 프로그램 동작 원리 - 3.1. 예제: Hello Flask (0) | 2020.08.14 |
| 2. 프로그래밍 환경 - 2.2. 프로젝트 생성 (0) | 2020.08.13 |
댓글