[Flask] 초간단! HTML과 Flask 통신 - 2

본 포스팅에서는 html에서 form 태그를 통해 원하는 날짜의 박스오피스 순위를 들고와서 다시 화면에 보여주는 코드를 작성해보겠습니다.

먼저 아래와 같이 HTML 코드를 작성해보겠습니다. 코드를 작성하면, input 태그를 통해 텍스트를 입력받고, button을 누르면 input 태그를 통해 받은 텍스트가 "query"라는 이름으로 "movie_boxoffice"라는 웹페이지로 라우팅 되게 됩니다. 

    <h1>박스 오피스 검색 사이트</h1>
    <h2>"YYYYMMDD"형태로 입력하세요.</h2>
    <form action="{{ url_for('movie_boxoffice') }}">
        <input type="text" name="query">
        <button type="submit">검색</button>
    </form>

"movie_boxoffice" 페이지에서 전달받은 영화 날짜의 텍스트("query")를 이용하여 해당 날짜의 박스오피스 정보를 가져오는 flask 서버의 코드는 아래와 같습니다. requests 라이브러리의 get 함수의 인자는 영화진흥위원회의 영화박스오피스 API 입니다. API에서 정보를 가져와서 다시 웹페이지에 "data"라는 변수로 정보를 전달하게 됩니다. 

from flask import Flask, render_template, request
import requests
@app.route('/movie_boxoffice')
def movie_boxoffice():
    if not request.args.get('query'):
        query = '20230601'
    else:
        query = request.args.get("query")
    print(f'query: {query}')
    res = requests.get(
        f"http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt={query}"
    )
    rjson = res.json()
    context = rjson['boxOfficeResult']['weeklyBoxOfficeList']
    return render_template('movie_boxoffice.html', data=context)

아래의 코드는 flask서버로부터 전달받은 API정보를 "movie_boxoffice"웹페이지에 테이블 형태로 라우팅하는 코드입니다.

<table class="table">
        <thead>
            <tr>
                <th scope="col">랭킹</th>
                <th scope="col">영화명</th>
                <th scope="col">영화개봉일</th>
                <th scope="col">누적관객수</th>
            </tr>
        </thead>
        <tbody>
            {% for movie in data %}
            <tr>
                <th scope="row">{{ movie.rank }}</th>
                <td>{{ movie.movieNm}}</td>
                <td>{{ movie.openDt }}</td>
                <td>{{ movie.audiAcc}}명</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

완성된 화면은 아래와 같이 나타나게됩니다.