0. select2.html 구현 - sql 데이터를 불러와 HTML로 구현하기 with Flask
git : https://github.com/dothouse/practice/tree/master/project1/web
Tool : python / python-flask / html /javascript / css
✅사용 파일
D:\song\practice\project1\web\jeju\views\select2_views.py
https://github.com/dothouse/project1/blob/master/web/jeju/views/select2_views.py
D:\song\practice\project1\web\jeju\templates\select\select2.html
https://github.com/dothouse/project1/blob/master/web/jeju/templates/select/select2.html
1. select2.html 파일 구현하기
[파일명]D:\song\practice\project1\web\jeju\templates\select\select2.html
{% extends 'base.html' %}
{% block content %}
<!-- 중략 --!>
<body>
<!-- 중략 --!>
</div>
<h2> 선택사항</h2>
</div>
<div class='container'>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col ">
<ul class="list-group">
<li class="list-group-item">
<h4>선호 관광 유형</h4>
<hr>
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th scope="col">옵션</th>
<th scope="col">선택값</th>
</tr>
</thead>
<tbody>
<tr>
<td>여행타입</td>
<td>{{select_value.month_str}}</td>
</tr>
<tr>
<td>관광타입</td>
<td>{{select_value.spot1_str}}</td>
</tr>
<tr>
<td>관광타입2</td>
<td>{{select_value.spot2_str}}</td>
</tr>
<tr>
<td>맛집타입</td>
<td>{{select_value.food_str}}</td>
</tr>
<tr>
<td>반려동물</td>
<td>{{ select_value.pet_str }}</td>
</tr>
</tbody>
</table>
</li>
</div>
<!-- 중략 --!>
</div>
<div class='col-lg-6 col-md-8 mx-auto' style='width: 400px; left_margin : 20px;'>
<input type="button" class="btn btn-success" style='margin-left: 100px;'
value="숙소선택으로" onclick="location.href='/select/select3'"/>
</div>
</div>
</body>
</html>
{% endblock %}
2. select2.py에서 넘어온 데이터 처리하기
지난 페이지에서
[파일명]D:\song\practice\project1\web\jeju\views\select2_views.py 에서
선택된 값들을 select_value로 정제해서 html로 보내주었다.
이렇게 select2_views.py에서 보내진 데이터를 html에서 사용하기 위한 방법
<tr> <td>여행타입</td> <td>{{ select_value.month_str }}</td> </tr>
html 태그 참고
1)<tr>태그는 표를 그리는 tag
2)<td>태그는 표의 내용을 채워 넣는 tag
✅ flask 내의 HTML에서 파이썬 코드를 활용하는 방법
{{ 코드내용 }} 형태로 {{, }} 를 활용한다.
✅ 활용 방법
select2_views에서 보내진 데이터인 select_value에는 다양한 column이 존재고하고,
이중에서 month_str column을 사용하기 위해서는
{{ select_value.month_str }}
와 같은 방식으로 작성하면 된다.
3. 적용 방법 및 결과
sql 데이터
html 구현
