이 부분에 대해서 되게 많은 고민을 했었습니다.
이 페이지에서 왼쪽에서 보이는 콤보박스에 있는 값을 선택하면 중간에 보이는 기준시간을 바꾸고
기준시간에 맞춰서 밑에 보이는 각 구별의 날씨또한 시간에 맞춰서 바뀌게끔 하고 싶었습니다.
단순히 콤보박스 값을 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
이렇게하면 이제 콤보박스에서 선택된 시간에 따라 아래의 구마다 날씨들이 새롭게 바뀌는 것을 볼 수 있습니다.
'Python' 카테고리의 다른 글
| 파이썬-실습(8) 카카오 디벨로퍼 인가코드, Friends 토큰 (0) | 2021.12.17 |
|---|---|
| 파이썬-실습(7) 카카오 디벨로퍼 인가코드, OWNER 토큰 (0) | 2021.12.16 |
| 파이썬-실습(5) HTML에 Flask를 통해 데이터 값을 삽입 (2) | 2021.12.14 |
| Flask(플라스크) OSError: [Errno 98] Address already in use (0) | 2021.12.07 |
| 파이썬-실습(4) EC2에 기준 시간대를 한국 시간대로 바꾸기 (0) | 2021.11.28 |
