PROGRAMMING/PYTHON

[Flask.2] 새로운 페이지 만들기

0. 들어가기에 앞서.

Flask에서 새로운 페이지 만들기는 HTML에서의 새로운 페이지를 생성하는 것처럼 매우 간단하다. 몇줄의 코드만 작성하면 손쉽게 새로운 페이지를 만들어 낼 수 있다.

 

본론으로 들어가기에 앞서 새로운 단어인 섹션(Section) 대한 규정을 하나 하려 한다. 얘를 뭐라고 말 해야지 하다가 새로 정하는게 낫겠다 싶어서 먼저 정의하려 한다. 섹션이란 @app.route("/")가 선언된 부분 부터 바로 다음 함수가 정의하는 내용이 끝나는 부분을 섹션이라 부르기로 했다. 말로 하면 어려우니 예를 들어 @app.route("/")섹션의 범위는 다음과 같다.

@app.route("/")
def hello_world():
    return render_template('index.html')

 

1. 새로운 페이지 만들기.

새로운 페이지를 만드는 형식은 다음과 같다. 앞서 index 페이지를 구성할때 작성한 섹션과 동일한 형식이다.

@app.route("{Directory}")
def {function name}():
    return {Return data}

 

이 글에서는 new 라는 디렉토리를 생성할 것이다. 아래의 @app.route("/new")섹션을 @app.route("/")와 if __name__ == '__main__':문 사이에 넣으면 된다.

@app.route("/new")
def new_link():
    return "<p>new<p>"

 

파일을 실행하고 주소창에 http://localhost:5000/new를 입력해 보자. 새롭게 만든 페이지가 보이는 것을 알 수 있다.

 

2. HTML 파일 연결하기.

새로운 페이지에 대해서 HTML 파일도 당연 연결 가능하다. /new 페이지에서 사용할 HTML 파일을 templates 폴더에 다음과 같이 만들었다. 내용은 본인이 원하는 대로 아무렇게나 작성하면 된다. 

- new.html

<!DOCTYPE html>
<html lang="ko">

<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>New directory</title>
</head>

<body>
    <h1>Flask New Directory</h1>
</body>

</html>

HTML의 연결도 @app.route("/")와 동일하게 render_templates()에 이용하면 된다. @app.route("/new")섹션의 내용을 다음과 같이 수정하자. 

- Before

@app.route("/new")
def new_link():
    return "<p>new</p>"

- After

@app.route("/new")
def new_link():
    return render_template('new.html')

 

아래의 결과를 보면 정상적으로 html 파일이 반영이 된 것을 확인 할 수 있다.

 

03. 전체 코드.

- app.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route("/new")
def new_link():
    return render_template('new.html')

if __name__ == '__main__':
    app.debug = True
    app.run()

- new.html

<!DOCTYPE html>
<html lang="ko">

<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>New directory</title>
</head>

<body>
    <h1>Flask New Directory</h1>
</body>

</html>
저작자표시 비영리 변경금지

'PROGRAMMING > PYTHON' 카테고리의 다른 글

[Flask.3] pyngrok로 외부에서 Flask 접속하기  (0) 2022.02.18
[Flask.1] html 파일 연결하기  (0) 2022.02.17
[Flask.0] Flask 시작하기  (0) 2022.02.17