본문 바로가기

프로젝트형 IoT 서비스 개발 4회차/인터페이스 개발 프로젝트 - 음식점 리뷰 사이트

2. 화면 구성 - (3) 검색 화면

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