이전 단계에서 기본적인 구조와 blueprint의 사용방식을 확인하였다.
이번에는 main_views에 연결하여
메인 페이지를 만들어보고자 한다.
git : https://github.com/dothouse/project1/blob/master/web/
Tool : python / python-flask / html /javascript / css
✅사용 파일
D:\song\practice\project1\web\jeju\__init__.py
https://github.com/dothouse/project1/blob/master/web/jeju/__init__.py
D:\song\practice\project1\web\jeju\views\main_views.py
https://github.com/dothouse/project1/blob/master/web/jeju/views/main_views.py
D:\song\practice\project1\web\jeju\views\select1_views.py
https://github.com/dothouse/project1/blob/master/web/jeju/views/select1_views.py
D:\song\practice\project1\web\jeju\templates\base.html
https://github.com/dothouse/project1/blob/master/web/jeju/templates/base.html
D:\song\practice\project1\web\jeju\templates\select\select1.html
https://github.com/dothouse/project1/blob/master/web/jeju/templates/select/select1.html
0. 예시
사진 추가예정
1. blueprint 추가
이전 게시글에서 main_views.py에 redirect기능을 활용하여
select1.open_select1로 연결되도록 하였다.
이를 연결하기 위해 select (blueprint)와 route(def open_select1()):를 만들어보고자 한다.
from flask import Blueprint, render_template
bp = Blueprint('select1', __name__, url_prefix='/select')
@bp.route('/select1')
def open_select1():
return render_template('select/select1.html')
bp = Blueprint('select1', __name__, url_prefix='/select')
해당 페이지의 blueprint의 이름 'select'
이 views를 통해서 구현되는 페이지의 접두url은 /select
이 views를 통해서 열리는 페이지들은 http://127.0.0.1:5000/select/ 을 url을 기본주소로 한다.
@bp.route('/select1')
-> http://127.0.0.1:5000/select/select1 에 열리는 페이지에 대한 내용을 담는
def open_select1():
-> html에 전달하고자 하는 내용들을 작성되는 부분
return render_template('select/select1.html')
-> 위에서 작성되는 부분을 select/select1.html로 보내고,
-> http://127.0.0.1:5000/select/select1 에 표현
2. html 구현하기
구현하고자 하는 html은 D:\song\practice\project1\web\jeju\templates 폴더에 담아두기
1) base.html
전체 프로젝트에서 사용하고자 하는 css, javascript 등에 관한 내용을 담아두는 파일
자세한 html의 코드 설명은 생략
[파일명] D:\song\practice\project1\web\jeju\templates\base.html
<!-- 전체 html에 적용하는 것들 모아두기-->
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS / Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- 글씨체 / goolge font-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nanum Gothic', sans-serif;
</style>
<title>꿀먹은 한라산 - 제주 한달살기 숙소 추천</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<!-- 자바스크립트 Start -->
{% block script %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
{% endblock %}
<!-- 자바스크립트 End -->
</body>
</html>
✅ css-> bootstrap
https://getbootstrap.kr/
✅ font
https://fonts.google.com/?subset=korean
✅ 여기서 작성한 html을 모든 html에 적용가능
- 아래의 파일 양식을 복사하여 html의 기본 틀로 사용시
{% extends 'base.html' %}
{% block content %}
필요한 contents 작성
{% endblock %}
예시
{% extends 'base.html' %}
{% block content %}
<html>
</html>
<script>
#### 필요한 내용 입력
</script>
{% endblock %}
2) select/select1.html 구현하기
자세한 코드는 https://github.com/dothouse/practice/blob/master/project1/web/jeju/templates/select/select1.html
{% extends 'base.html' %}
{% block content %}
<style>
<!-- 생략 -->
</style>
<head>
<div class=" container p-3 text-bg-dark">
<h1>제주도 한달살기 추천시스템</h1>
</div>
</head>
<body>
<div class='container'>
<div>
<form action='select2' method="post"
class='dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px'
data-bs-theme="light" name='tour_submit'>
<h4>여행타입을 골라주세요</h4>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 " style="padding-bottom: 0px; padding-top: 0px;">
<div class="col">
<!-- 중간 생략 -->
<!-- dropdown -->
<!-- 선택지에 따른 선택지 변화-->
<!-- 기본 선택지 -->
<div class="list-group">
<h4>선호관광지 유형</h4>
<select name='spot1' id='id_spot1' onchange="categoryChange(this)"
class="btn btn-secondary btn-lg">
<option value="">선호을 선택하세요</option>
<option value="spot1Type1">경관, 포토, 스팟</option>
<option value="spot1Type2">반려동물, 동반, 애견</option>
<option value="spot1Type3">체험, 레저</option>
<option value="spot1Type4">도보, 등산, 오름, 숲길</option>
<option value="spot1Type5">테마, 실내, 박물관, 미술, 유적지, 역사</option>
</select><br>
</div>
<!--변화하는 선택지-->
<!--java script랑 연동-->
<div class="list-group">
<h4>선호관광지 세부유형</h4>
<select name='spot2' id="id_spot2" class="btn btn-secondary btn-lg">
<option value="">세부유형을 선택하세요</option>
</select><br>
</div>
</div>
<!-- 중간 생략 -->
<!-- checkbox -->
<!-- checkbox 선택시 name="police" 이 전송 -->
<div class="col align-self-start">
<div style="border: 1px solid #ddd; margin-bottom: 5px;">
<h4>숙소시설 </h4>
<ul class="list-group">
<li class="list-group-item"> 수영장 <input type="checkbox" name="pool" value="add_pool"></li>
<li class="list-group-item"> 마당 <input type="checkbox" name="garden" value="add_garden">
</li>
<li class="list-group-item"> 바다 <input type="checkbox" name="sea" value="add_sea"></li>
<li class="list-group-item"> 관리비 없음 <input type="checkbox" name="nocost" value="add_nocost">
</li>
<li class="list-group-item"> 대중교통 <input type="checkbox" name="nocost" value="add_bus"></li>
</ul>
</div>
</div>
<input type='submit' class="btn btn-warning" value="선택완료"/>
</form>
</div>
</div>
</body>
<!-- 중간 생략 -->
<!-- javascript -->
<script>
<!--선호 관광지 세부 옵션을 변동하는 -->
function categoryChange(e) {
var id_spot2_spot2Type1 = ["해변/드라이브", "힐링/휴식"];
var id_spot2_spot2Type2 = ["반려동물"];
var id_spot2_spot2Type3 = ["레저/수상/해수욕장", "승마/이색/마을/어린이"];
var id_spot2_spot2Type4 = ["하이킹"];
var id_spot2_spot2Type5 = ["유적/역사", "실내/미술/박물관/테마"];
var target = document.getElementById("id_spot2");
if(e.value == "spot1Type1") var d = id_spot2_spot2Type1;
else if(e.value == "spot1Type2") var d = id_spot2_spot2Type2;
else if(e.value == "spot1Type3") var d = id_spot2_spot2Type3;
else if(e.value == "spot1Type4") var d = id_spot2_spot2Type4;
else if(e.value == "spot1Type5") var d = id_spot2_spot2Type5;
target.options.length = 0;
for (let x = 0; x < d.length; x++) {
var opt = document.createElement("option");
opt.value = d[x];
opt.innerHTML = d[x];
target.appendChild(opt);
}
}
</script>
{% endblock %}
a. <form> 태그
select1에서 선택한 선호가 다음페이지에 전송되도록 <form>태그 사용
<form action='select2' method="post" name='tour_submit'>
<input type='submit' class="btn btn-warning" value="선택완료"/>
</form>✅ action
action='select2'사용시 제출 버튼을 눌렀을 경우http://127.0.0.1:5000/select/select2로 연결된다.
✅input-sumbit 제출시
-
dropdown
<select name='spot1' id='id_spot1'>에서 선택한 option value가 전송된다.
<option value="spot1Type1">경관, 포토, 스팟</option>선택시
다음 페이지에서 request.form['spot1'] 조회할 경우 'spot1Type1' 로 조회됨 -
checkbox
<li class="list-group-item"> 수영장 <input type="checkbox" name="pool" value="add_pool"></li>
선택시 request.form['pool'] 이 전송되고, 미선택시 전송되지 않음
B. javascript - 사용자 함수
✅ javascript 앞 조건에 따라 변화하는 option
categoryChange(e) 함수를 만들어서 <select name='spot1' id='id_spot1' 에 onchange에 적용
- spot1에서 선택된 값에 따라 spot2의 option값이 정해진다.
