티스토리 뷰

Python

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 디렉토리(폴더) 구성

I like simple code 2020. 5. 2. 00:12
728x90

이 전 글에서 마지막 부분에 html 폼을 만들어 GET POST 테스트를 해봤습니다.

2020/05/01 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request

 

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request

지난 글에서 파이썬 플라스크로 설치 하고 웹브라우저에 hello world 접속 까지 했었습니다. 2020/04/24 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 설치 및 웹 애플리케이션(Web Application)..

wings2pc.tistory.com

근데 그냥 외부에서 html 파일을 만들고 브라우저로 실행을 시켰는데 이제 이 HTML 파일을 Flask 앱에 포함 시켜 Flask 웹서비스주소(http://127.0.0.1:5000) 으로 구동 해서 화면에 띄워 보도록 하겠습니다.

 

먼저 Flask 의 디렉토리(폴더) 구조에 대해 알아야 합니다. 이건 Flask에서 정의되어 있는 디렉토리 구조이기 때문에 따라야 합니다. 디렉토리 구성은 다음과 같습니다.

templates - html  파일이 들어갈 위치

static - html 파일 내에 이미지, js, css 링크를 참조하는 파일들

그럼 이 디렉토리를 우리 Flask 프로젝트에 포함 시켜 전체 구조를 살펴 봅시다.

 

① 가상환경 디렉토리

② html 파일 에서 사용 할 수 있는 정적 파일들(이미지, 자바스크립트, css)

③ html 파일이 들어갈 폴더

④ flask 메인 python 파일

 

templates 폴더에 html 파일이 들어 간다는것을 알았으니 templates 폴더를 생성 해야 합니다.

templates(템플릿) 은 일정한 틀, 형식을 뜻합니다.(보통 PPT에서 많이 들어 봤겠죠?) 

Flask에서는 코드내에 render_template이  templates 폴더에 있는 html 파일들을 렌더링(화면에 보여주는)  해줍니다.

Flask 에서 템플릿은 Jinja2 템플릿 엔진을 사용 합니다. Flask 설치 할 떄 같이 설치 된것을 확인 가능 합니다.

플라스크 설치편을 참고 하면 나옵니다.

이 템플릿엔진을 사용 해서 HTML 페이지를 동적으로 만들 수 있습니다.

폴더 생성 후 templates  안에 html 파일을 만들고 파이썬에서 render_template 을 이용해서 html 소스를 브라우저 화면에 띄워 보도록 하겠습니다.

templates 폴더에서 마우스 오른쪽 클릭해서 새파일을 선택해서 hello.html 이라는 파일을 만들어  줍니다.

 

여기에서 테스트를 위해 단순히 hello world 라고 입력 합니다.

그리고 app.py 에서 render_template 과 app.route 하나를 만듭니다. 

return render_template(html 파일명)

templates 폴더 안에는 hello.html 파일이 있어야 합니다.

render_template 사용법은 아래와 같습니다.

실행 시키고 웹브라우저에 http://localhost:5000/hello로 요청 해봅니다. 아래와 같이 나오면 됩니다.

 

이제 hello.html 파일을 이전 글에서 만들었던 html  소스를 복사해서 붙여 보고 잘 나오는 확인 해보면 됩니다.

이전 글 참고

2020/05/01 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request

 

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request

지난 글에서 파이썬 플라스크로 설치 하고 웹브라우저에 hello world 접속 까지 했었습니다. 2020/04/24 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 설치 및 웹 애플리케이션(Web Application)..

wings2pc.tistory.com

저기 코드에서 http://127.0.0.1:5000/method 를 /method 로 수정 하고 새로 고침 했을때 html 폼이 나오면 됩니다.

 

<form action="/method" method="POST"> 이렇게 수정.

 

app.py 전체 코드 입니다.

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

@app.route('/')
def hello():
    return 'Hello, World!'

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

@app.route('/method', methods=['GET', 'POST'])
def method():
    if request.method == 'GET':
        return "GET으로 전달"
    else:
        return "POST로 전달"

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

hello.html 전체 코드

<!DOCTYPE html>
<html>
<body>

<h2>KIT 웹앱 프로그래밍</h2>

<form action="/method" method="POST">
  <label for="fname">학번:</label><br>
  <input type="text" id="fname" name="num" value=""><br>
  <label for="lname">이름:</label><br>
  <input type="text" id="lname" name="name" value=""><br><br>
  <input type="submit" value="확인">
</form> 

</body>
</html>

'Python' 카테고리의 다른 글

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) URL <variable_name>  (0) 2020.05.09
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Request get parameter(HTTP method GET, POST)  (2) 2020.05.02
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request  (6) 2020.05.01
[웹 앱프로그래밍] Flask 실행시 UnicodeDecodeError  (0) 2020.04.28
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 설치 및 웹 애플리케이션(Web Application) 시작  (0) 2020.04.24
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함