파이썬/Flask

파이썬 Flask로 웹페이지 만들기 - url_for 사용

hanshow113 2020. 8. 3. 18:35

이번엔 상단에 메뉴바 만드는 것을 해보려고 합니다.

 

 .py파일 한 개, .html 파일 두 개로 구성했습니다.

app.py 파일은 아래 코드와 같이 두 개의 파일을 rendering합니다.

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

이렇게 작성한 후에 이제 html파일을 수정해주시면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Tap</title>
</head>
<body>
    <div class = 'page-header'>
        <h1>** Base Flask **</h1>
        <h3>- Menu Bar</h3>
        <div class="Menu-bar">
            <ul class="menu-bar">
                <li><a href = "{{url_for('basic')}}">Home</a></li>
                <li><a href = "{{url_for('info')}}">Info</a></li>
            </ul>
        </div>
        <hr/>
    </div>
    <div class = 'content container'>
        <div class = 'row'>
            <div class="col-md-8">
                {% block content %}
                    <h3>------Base Homepage-----</h3>
                {% endblock %}
            </div>
        </div>
    </div>
    <div class = "page-botton">
    </div>
</body>
</html>

basic 파일을 작성했습니다.

{% block content %}

{% endblock %} 이라는 Jinja 문법을 사용했는데요, 이 코드는 다음에 나올 html 코드에서 basic 파일을 상속하기 위해서 작성했습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Information Tap</title>
</head>
{% extends 'basic.html' %}
{% block content %}
    <h2>This page is Information Page</h2>
{% endblock %}

info.html파일은 {% extends 'basic.html' %}로 시작하는 head를 가지고 있습니다.

이는 basic을 상속하고 content 내용만을 달리하여 수정하려고 하는 것입니다.

 

메뉴바와 같이 동일한 형태를 가지게 하려면 상속을 이용하면 더 수월하게 진행할 수 있습니다.

 

Base home page
Information page

이처럼 동일한 포맷을 두고 내용만 바뀌는 걸 확인할 수 있습니다.

추가로 routing 시 basic.html을 참조했고, basic.html파일에서 url_for("basic")을 썼기 때문에

information 페이지에서 "Home"버튼을 클릭하면 다시 처음 페이지로 되돌아옵니다.