2.1) 서울시 지가 선형회귀모델 프로젝트 개발 Form

1. main.html에 Search 데이터를 입력할 Form 만들기

about 으로 지정되어있는 section에 아래 코드처럼 form을 추가하고 수정한다.

<!-- search-->
<section class="search-section text-center" id="search">
	<div class="container px-4 px-lg-5">
		<div class="row gx-4 gx-lg-5 justify-content-center">
			<div class="col-lg-8">
				<h2 class="text-white mb-4">Seoul Landprice Predict Model</h2>
				<p class="text-white-50">
					The all data is obtained from 
					<a href="http://data.seoul.go.kr/dataList/OA-1180/F/1/datasetView.do">서울시 개별공시지가 정보</a>
					through their OpenAPI.
				</p>
			</div>
			<form action="searchForm" class="form-signup" id="searchForm" data-sb-form-api-token="API_TOKEN" method="post">
				<div class="row input-group-newsletter">
					<div class="col">
						<div class="text-white">ex) 광진구 화양동 355-15 2020년</div>
						<div class="row text-white">지역구<input class="form-control" id="Address" type="text" placeholder="ex)광진구" aria-label="ex)광진구" data-sb-validations="required,email" /></div>
						<div class="row text-white">법정동<input class="form-control" id="Address" type="text" placeholder="ex)화양동" aria-label="ex)화양동" data-sb-validations="required,email" /></div>
						<div class="row text-white">본번<input class="form-control" id="Address" type="number" placeholder="ex)355" aria-label="ex)355" data-sb-validations="required,email" /></div>
						<div class="row text-white">부번<input class="form-control" id="Address" type="number" placeholder="ex)15" aria-label="ex)15." data-sb-validations="required,email" /></div>
						<div class="row text-white">기준연도<input class="form-control" id="Address" type="number" placeholder="ex)2020" aria-label="ex)2020" data-sb-validations="required,email" /></div>
						<div class="col-auto"><button class="btn btn-primary disabled" id="submitButton" type="submit">Research</button></div>
					</div>
				</div>
			</form>
		</div>
		<img class="img-fluid" src="static/img/ipad.png" alt="..." />
	</div>
</section>

2. Server에서 form 데이터 받기

우선 searchForm에서 데이터를 받아온 후,  result.html로 보내보겠다.

# result.py
from flask import Flask, Blueprint, render_template, request

import requests
from bs4 import BeautifulSoup

import pandas as pd

bp = Blueprint('result',__name__,url_prefix='/')

# searchForm 데이터를 받아서 다시 result.html에 전송함
@bp.route('/searchForm', methods =['POST'])
def search_form():
    
    if request.method == 'POST':
        data = request.form
    else :
        data = {}

    location = []
    price = []
    year = []

    for i in range(int(data['year'])-20,int(data['year'])+1): # 20년치 데이터를 불러온다.
        api = f"http://openapi.seoul.go.kr:8088/{본인API}/xml/IndividuallyPostedLandPriceService/1/5/{data['gu']}/{data['dong']}/{data['first_num']}/{data['second_num']}/1/{i}"
        page = requests.get(api)

        soup = BeautifulSoup(page.content, 'html.parser')
        if soup.message.contents[0] == "해당하는 데이터가 없습니다." :
            print(f"{i}년 정보 없음")
            continue
        
        # list들에 데이터 추가
        location.append(data['gu']+' '+data['dong']+' '+data['first_num']+'-'+data['second_num'])
        price.append(soup.jiga.contents[0])
        year.append(i)

        # print(soup.jiga.contents[0])
    # pandas dataframe화
    dic = {'Location':location,'Price':price,'Year':year}
    df = pd.DataFrame(dic).sort_values(by=['Year'],ascending=False)
    
    # df를 HTML 테이블 테그로 변환
    df_html = df.to_html(escape=False, justify='center')
    

    return render_template('result.html', data=data, df_html=df_html)

3. Jinja 템플릿을 이용해서 html에서 불러오기 및 css 조정

        <!-- result-->
        <section class="result-section text-center" id="result">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-lg-8">
                        <!-- result table-->
                        <h2 class="text-white mb-4">Seoul Landprice Predict Model Result</h2>
                        <div class="predict" style="text-align: left;"><button>Price Prediction for next year</h2></div>
                        <h2 class="text-white mb-4">{{df_html|safe}}</h2>
                    </div>
                </div>
            </div>
        </section>