728x90
[1] 개요
1. URL
- HOST/search
2. 구성
1) 검색 섹션
- 홈 화면의 검색 섹션과 동일
2) 필터링 섹션
- 검색 결과를 필터링 하여 검색 결과 섹션에 출력되도록 함
- 현재 필터링 기능 구현 X
3) 검색 결과 섹션
- 검색 결과를 검색어와 가장 유사한 순서대로 출력
- 현재 검색 결과 출력 구현 X, 단순 DB 등록된 음식점 전체를 하드 코딩으로 출력 상태
- View details 버튼을 누르면 해당 음식점으로 이동
[2] CODE
0. 공통
- URL을 통한 검색 화면(search.html) 출력
/web/views.py -> class MyView(View)
@request_mapping("/search", method="get")
def search(self,request):
return render(request, 'search.html');
1. 검색 섹션
- 홈 화면의 검색 섹션과 동일
2. 필터링 섹션
1) HTML
- 현재 기능 없는 단순 화면
/templates/search.html
<div id="sidebar" style="margin:0; border:0; padding-top:0; padding-bottom:0rem; width:18.7rem; height: 100%; background-color: #BDBDBD; float:left">
<div style="margin: 10px; margin-top: 3rem; margin-bottom: 4rem">
<div style="height: 100%">
<!-- Product details-->
<div class="card-body p-4">
<div class="check-box">
<!-- Product name-->
<h5 class="fw-bolder">정렬</h5>
<hr style="border:black">
<h5 class="fw-bolder" id="star_checkbox">별점순</h5>
<!-- 별모양으로 교체 시도-->
<input type="checkbox" name="avg-rating" value="모두">모든 별점<br>
<input type="checkbox" name="avg-rating" value="4점이상">4점 이상<br>
<input type="checkbox" name="avg-rating" value="3점이상">3점 이상<br>
<input type="checkbox" name="avg-rating" value="2점이상">2점 이상<br>
<hr style="border:black">
<h5 class="fw-bolder" id="cate_checkbox">카테고리</h5>
<input type="checkbox" name="category" value="모두">전체<br>
<input type="checkbox" name="category" value="양식">양식<br>
<input type="checkbox" name="category" value="중식">중식<br>
<input type="checkbox" name="category" value="한식">한식<br>
<input type="checkbox" name="category" value="일식">일식<br>
<hr style="border:black">
<h5 class="fw-bolder" id="dist_checkbox">거리순</h5>
<input type="checkbox" name="distance" value="3km 이내">3km 이내<br>
<input type="checkbox" name="distance" value="2km 이내">2km 이내<br>
<input type="checkbox" name="distance" value="1km 이내">1km 이내<br>
<hr style="border:black">
<h5 class="fw-bolder" id="tag_checkbox">태그</h5>
<input type="checkbox" name="tag" value="흡연">흡연가능<br>
<input type="checkbox" name="tag" value="주차">주차가능<br>
<input type="checkbox" name="tag" value="예약">예약가능<br>
<details>
<summary id="add_tag_checkbox">추가 태그</summary>
<input type="checkbox" name="tag" value="동물">애완동물<br>
<input type="checkbox" name="tag" value="포장">포장가능<br>
<input type="checkbox" name="tag" value="연회">연회가능<br>
</details>
</div>
</div>
</div>
</div>
2) CSS
- html 내에서 각 태그의 element에 직접 style 입력
3) JavaScript
- 적용된 사항 없음
4) Application
- 적용 사항 없음
3. 검색 결과 섹션
- 홈 화면의 음식점 추천 섹션과 동일
- 끝 -
728x90
'프로젝트형 IoT 서비스 개발 4회차 > 인터페이스 개발 프로젝트 - 음식점 리뷰 사이트' 카테고리의 다른 글
2. 화면 구성 - (5) 고객센터 - 실시간 채팅 상담 (0) | 2022.03.20 |
---|---|
2. 화면 구성 - (4) 고객센터 - 자주 묻는 질문 (0) | 2022.03.20 |
2. 화면 구성 - (2) 홈 화면 (0) | 2022.03.20 |
2. 화면 구성 - (1) 내비게이션 바 (0) | 2022.03.20 |
1. Database(MariaDB, django ORM) (1) | 2022.03.20 |