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

+ Recent posts