728x90
300x250

이 부분에 대해서 되게 많은 고민을 했었습니다.

 

 

이 페이지에서 왼쪽에서 보이는 콤보박스에 있는 값을 선택하면 중간에 보이는 기준시간을 바꾸고

기준시간에 맞춰서 밑에 보이는 각 구별의 날씨또한 시간에 맞춰서 바뀌게끔 하고 싶었습니다.

단순히 콤보박스 값을 HTML 자체에서 반영하려고 하면 몇가지의 방법이 있었지만 원했던 방식은 아니였습니다.

그래서 조금 편법(?)을 사용하였습니다.

 

<body>
		<center>
			<a href="/">
				<div style="color: rgb(175, 184, 178); font-size: 5em; font-weight: bold;">
				Dogyu's Server
				</div>
			</a>
			<br><br>
			<div style="font-size: 1.6em; color: rgb(59, 59, 59);">
				기준시간: {{date}}<br><br>
			</div>
		</center>
		시간선택 (3시간 간격)<br>
		<form action = '' method='post'>
			<select name = "Time" id = 'Time' >
				<option value = "" selected>-- 선택 --</option>
				{% for n in range(0,(count-1)) %}
				<option value = "" >{{time[n]['date']}}</option>
				{% endfor %} 
			</select> <a href="" onclick=" location.href = '/weather'+ out(this.value); return false;"><button>확인</button></a>
		</form>
	</body>

위와 같이 HTML <body>부분을 작성한다음 콤보박스에 있는 값을 선택하게되면

해당 시간을 URL주소로 바꿔 페이지로 이동하게 됩니다.

 

@app.route('/weather/<user_date>', methods=['GET', 'POST'])
def weather_user_gui(user_date):
    global select_date
    ctime, count = count_time()
    weather = set_data_for_weather(user_date)
    return render_template('weather.html', data = weather, date = user_date, time = ctime, count = count)

이렇게 server에서 /<user_date>라는 가변적인 주소를 넣어준 다음 위의 콤보박스에서 선택한 값이 user_date에 들어가게됩니다. 

그러면 이제부터는 쉽습니다.

user_date의 값을 가지고 weather.html에 date로 값을 넣어주고 date에 맞춰서 아래 구의 날씨들을 변경해주면 됩니다.

 

HTML에 데이터값을 삽입하는 방법은 아래 게시글을 보면 도움이 될 것 같습니다.

https://cleaning-toolbox.tistory.com/56

 

파이썬-실습(5) HTML에 Flask를 통해 데이터 값을 삽입

저는 현재 아래 사진처럼 서울의 구마다 날씨를 기상청에서 받아와 표현해주는 페이지를 만들었습니다. 쉬운 코딩이라고 생각하실수도 있지만 맨 처음 지식이 전무하던 상태에서 데이터를 파

cleaning-toolbox.tistory.com

 

이렇게하면 이제 콤보박스에서 선택된 시간에 따라 아래의 구마다 날씨들이 새롭게 바뀌는 것을 볼 수 있습니다.

728x90
300x250