728x90
728x90

  플라스크 변수 사용  

- 플라스크 서버에서는 html에 변수를 만들어 서버 python에서 값을 넘겨 줄 수 있습니다.

- 변수 사용에는 아래의 코드를 원하는 위치에 추가해 사용합니다.

{{변수명}}

- 변수에 값을 주려면 서버 함수에서 render_template에 변수명에 값을 대입하면 됩니다.

return render_template('hello.html',변수명 = 값)

  예제  

- hello.html 파일을 생성하고, <head>태그 -> <title>태그 안에 변수를 선언합니다.

- <body> 태그 안에 <h1>태그를 추가 하고 그안에 변수를 똑같이 선언해 주겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>
        {{title}}
    </h1>
</body>
</html>

- 서버 코드에서 /hello 주소를 라우팅하고 hello() 함수를 선언 return 값으로 render_template('hello.html',title='hello')

를 추가합니다.

 

@app.route("/hello")
def hello():

    return render_template('hello.html',title='hello')

- 이제 /hello로 접속해서 확인해 보겠습니다.

 

- 잘 적용 되었네요!!!!

728x90
728x90

jinja2 템플릿 상속 기능

- jinja의 가장 강력한 기능 중 하나는 상속 기능입니다.

- php에서 include() 와 require() 함수와 비슷한 기능을 제공합니다.

- 웹사이트를 제작하다보면 공통된 코드가 자주 사용될때가 있습니다.

- 페이지를 구성하는 파일들이 많아지면 이러한 코드들을 수정할때 많은 시간이 쓰입니다.

- 이러한 문제를 해결 하기 위해 jinja2 템플릿 엔진에서 제공하는 상속기능을 사용하면 편리합니다.

 

  템플릿 상속  

- 먼저 templetes디렉토리에 부모 템플릿인 animal.html 과 dog.html 파일을 생성하고 html 기본 코드들을 입력하고 title을 각각 animal / dog를 입력합니다.

- <body> 태그안에 <h1>태그를 추가 하고 , animal / dog 텍스트를 각가 추가 해 주겠습니다.

 

  animal.html  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animal</title>
</head>
<body>
    <h1>animal</h1>
</body>
</html>

  dog.html  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dog</title>
</head>
<body>
    <h1>dog</h1>
</body>
</html>

- 이제 플라스크 서버에 animal과 dog를 각각 라우팅 해 줍니다.

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

- 해당 주소로 접속 해 보겠습니다.

- animal.html 을 dog.html 에 상속합니다.

- 상속할때는 아래의 코드를 상속할 위치에 추가해 사용합니다.

{% block 이름 %}

{% endblock %}

- 상속받을 때는 아래의 코드를 사용합니다.

{% extends '상속받을 파일이름'}
{% block 이름 %}
소스코드
...
{% endblock %}

- 이제 animal.html 과 dog.html 코드를 수정해 보겠습니다.

 

animal.html

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

<head>
    <meta charset="UTF-8">
    <title>animal</title>
</head>

<body>
    <h1>animal</h1>
    {% block content %}
    {% endblock %}
</body>

</html>

dog.html

{% extends 'animal.html'%}
{% block content %}
<h2>dog</h2>
{% endblock %}

- 코드량이 줄고 간결해 졌습니다.

- 이제 /dog 에 접속해서 확인해 보겠습니다.

- animal.html 이 상속 되었음을 확인 할 수 있습니다.

728x90
728x90

플라스크 라우팅

- 플라스크에서는 @app.route() 데코레이터(decorator) 함수를 통해서 라우팅을 실행합니다.

- 라우팅 방법으로는 정적 라우팅 방법과 동적 라우팅 방법이 있습니다.

- 먼저 정적 라우팅 방법에 대해서 알아보겠습니다.

 

  정적 라우팅  

- 정적 라우팅은 @app.route()함수에 직접적으로 라우팅할 주소를 지정합니다.

@app.route("/")
def index():

    return render_template('index.html')

- 위 코드 처럼 라우팅 하려는 주소를 넣어주면 됩니다.

- index() 함수 아래에 hello()함수를 정의하고 @app.route('/hello') 로 라우팅 주소를 지정해서 접속해 보겠습니다.

@app.route('/hello')
def hello():
    return 'hello'

 

동적 라우팅

- 정적 라우팅으로 특정 주소를 지정해 놓을 수 있습니다.

- 하지만, 페이지가 많아 진다고 한다면, 모든 페이지를 코드로 만들어 정적 라우팅으로 지정하기에는 너무 불편합니다.

- 동적 라우팅은 변하는 주소에 따라서 그에 맞는 페이지를 로드해 줍니다.

- 변수를 이용해서 동적 라우팅을 실행합니다.

@app.route('/<pagename>')
def hello(pagename):
    return 'hello' + pagename

- @app.route() 에 <> 감싼 변수명을 입력합니다.

- 이 변수를 함수의 파라미터로 지정합니다.

- 함수 안에서 이 변수를 사용합니다.

- hello() 를 수정했습니다.

- /bye 주소로 접속해 보겠습니다.

- 주소로 접속 되고 텍스트가 나타나는 것을 확인할 수 있습니다.

- 변수를 이용해 render_template를 통해서 특정 페이지를 로드할 수도 있습니다.

 

728x90
728x90

플라스크 디버깅 (Flask Debuging)

 

- 플라스크 서버를 실행해서 웹 사이트에 접속을 하게 됩니다.

- 이때 특정 코드를 수정 하면 기본설정의 플라스크 서버가 실행되는 중에는 바로 반영되지 않고, 재시작을 해줘야합니다.

- 개발 과정에서 수정 - > 중지 -> 재시작 단계를 계속 거치는 것은 만족스럽지않습니다.

- 플라스크에서는 디버깅 모드를 통해서 코드를 수정하고 서버 재시작 없이 웹사이트를 새로고침 하거나 재접속 하면 바로 반영됩니다. 

 

디버깅 모드 설정

- 플라스크에서 디버깅 모드를 실행하는 것은 아주 간단합니다.

- 아래의 명령어를 추가하는 것만으로 실행 할 수 있습니다.

app.run(debug=True)

- 이제 플라스크 서버를 실행 하고 앞서 만들어 놓았던 index.html 코드를 수정해 보겠습니다.

 

서버 실행

- 서버를 실행하게 되면, Debug mode 가 On으로 바뀐 것을 볼 수 있습니다.

웹사이트 접속

- 서버를 실행하고 나서 웹사이트에 접속해 보면 앞서 만들어둔 index.html을 통해 만들어진 페이지가 나타나는 것을 볼 수 있습니다.

 

 

index.html 수정

- 이제 코드를 수정하고 바로 반영해 보겠습니다.

- 기존의 index.html 파일에 '수정사항 반영' 이라는 텍스트를 추가 해보겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h1>안녕하세요.</h1>
<h2>웹사이트에 방문해 주셔서 감사합니다.</h2>
<h3>수정사항 반영</h3>

</body>
</html>

 

웹사이트 반영

- 수정한 코드를 저장하고 브라우저에 띄어진 웹사이트를 새로고침 해보면 수정사항이 바로 반영 된 것을 볼 수 있습니다.

728x90
728x90

  render_template  

- 플라스크 코드 내에서 hmtl 마크업 언어를 사용해서 웹사이트를 제작하여 나타낼 수 있습니다.

- html 코드들을 플라스크내에 사용하는 것보다 .html 파일을 만들어서 라우팅하는 방법이 좀 더 깔끔하고, 관리하기에도 편합니다.

- 플라스크는 render_template 모듈을 통해서 .html파일을 렌더링 하여 브라우저를 통해 보여 줄 수 있습니다.

- 앞의 포스팅을 통해 만들어 놓은 app.py에 이어서 진행해 보겠습니다.

 

  templates 디렉토리 생성  

- 먼저 render_template 를 사용하기 위해서는 templates 디렉토리가 필요합니다.

- flask_server 하위에 templates 디렉토리를 만들어 줍니다.

 

 

 

 

  index.html 생성  

- 이제 templates 디렉토리 안에 index.html 을 생성해 줍니다.

- 파이참의 파일 생성에서는 .py 뿐만 아니라 html 파일도 생성할 수 있습니다.

 

 

- html 생성을 선택하면 파일 이름을 입력하는 항목과 html 버전을 선택할수 있습니다.

- 저는 html5를 선택 하겠습니다.

 

- index.html 파일을 생성하면 기본적인 Tag(태그)들이 입력되어 만들어 집니다.

 

 

  index.html 수정 

 

- index.html 파일 내용을 간단하게 수정해 보겠습니다.

- head 태그안에 있는 title 태그의 텍스트를 Hello로 수정합니다.

- body 태그 안에 h1태그를 추가 하고 , '안녕하세요'를 텍스트로 추가합니다.

- 그 아래에 h2태그를 추가 하고, '웹사이트에 방문해 주셔서 감사합니다.'를 추가합니다.

 

   Tip     

태그 입력시 태그 네임만 입력후 Tab키를 누르면 자동으로 <></>씌어져 생성됩니다.

ex) div-> tab -> <div></div>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h1>안녕하세요.</h1>
<h2>웹사이트에 방문해 주셔서 감사합니다.</h2>
</body>
</html>

 

  모듈 Import  

 

- 이제 app.py로 이동합니다.

- import 임포트 해놓은 Flask에 추가적으로 render_tamplate 를 import 해 주겠습니다.

 

from flask import Flask,render_template

 

 

  hello 함수 수정  

 

- app.py에 작성되어 있는 hello함수를 수정하겠습니다.

- return 뒷 부분을 render_template('index.html')으로 수정합니다.

 

- 변경전

return "Hello World!"

- 변경후

return render_template('index.html')

 

from flask import Flask,render_template
app = Flask(__name__)

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

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

 

  플라스크 실행  

- 파이참 run을 이용해 플라스크 서버를 실행해 줍니다.

- 실행 후 표시되는 url링크를 클릭하여 접속합니다.

- index.html이 잘 표시되어 나타나는 것을 확인할 수 있습니다.

 

728x90
728x90
728x90

+ Recent posts