[Django] Select option 선택한 옵션으로 이동하고 선택한 값 GET으로 받기, 월별 데이터 출력하기

안녕하세요

 

이번 시간에는 Select option 선택한 옵션으로 이동하고 선택한 옵션 값 GET으로 받는 실습을 진행하겠습니다.

추가적으로 Django에서 월별 데이터를 출력하는 방법에 대해서도 알아보겠습니다.

 

1. View 만들기

아래는 month 필드를 기준으로 Board 모델의 필터링된 쿼리셋을 가져와 select.html 템플릿에 렌더링하는 간단한 views.py 코드입니다.

# views.py
from django.shortcuts import render
from .models import Board

def select_board(request):
    month_text = request.GET.get('month')
    board_list = Board.objects.filter(month=month_text)
    return render(request, 'select.html', {'board_list': board_list})

이 코드는 select_board 함수를 정의합니다. 이 함수는 요청 객체(request)를 인자로 받아서 month_text를 추출하고, 이를 기반으로 Board 모델을 필터링한 후 board_list 변수에 저장합니다. 마지막으로 render 함수를 사용하여 select.html 템플릿을 렌더링하고 board_list 변수를 컨텍스트에 추가합니다.

 

2. 템플릿 만들기

아래 코드는 월을 선택할 수 있는 드롭다운 메뉴와 해당 드롭다운 메뉴를 제어하는 자바스크립트 코드입니다.

<form method="get" action="" class="form" style="margin-left: 7%; margin-top: 5%;">
  <select name="month" id="id_month">
    <option value="0" selected>월 선택</option>
    <option value="01">1월</option>
    <option value="02">2월</option>
    <option value="03">3월</option>
    <option value="04">4월</option>
    <option value="05">5월</option>
    <option value="06">6월</option>
    <option value="07">7월</option>
    <option value="08">8월</option>
    <option value="09">9월</option>
    <option value="10">10월</option>
    <option value="11">11월</option>
    <option value="12">12월</option>
  </select>
</form>

<script>
    $(document).ready(function() {
        $( "select[name=month]" ).val( "{{ month_text }}" );
        $('select[name=month]').change(function () {
        console.log($('select[name=month]').val());
        month = $('select[name=month]').val();
        $('.form').submit();
    });
});
</script>

1. HTML 코드

HTML 코드에서 select 태그를 사용하여 월을 선택할 수 있는 드롭다운 메뉴를 만들고, option 태그를 사용하여 선택할 수 있는 월의 목록을 추가합니다. form 태그에서 method 속성을 get으로 지정하고, action 속성을 비워둠으로써 현재 페이지로 요청을 보내게 됩니다.

 

2. Javascript 코드

JavaScript 코드에서는 문서 객체가 준비되면($(document).ready()), select[name=month] 요소의 값을 {{ month_text }}로 초기화합니다. 이 값을 통해 이전에 선택한 월을 유지할 수 있습니다.

 

그리고, change() 함수를 사용하여 select[name=month] 요소에서 월을 선택하면, $('.form').submit() 함수를 호출하여 선택한 월에 대한 새로운 요청을 보냅니다. 이를 통해 선택한 월을 기준으로 필터링된 게시글 목록을 보여주는 기능을 구현할 수 있습니다. 선택된 월은 GET 파라미터로 전달되며, views.py에서 이를 받아 필터링된 쿼리셋을 생성할 수 있습니다.

 

선택된 월은 Views.py에서 `month_text = request.GET.get('month')` 부분에서 받아 선택된 월을 사용자에게 반환합니다.

 

3. URLconf 설정하기

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.select_month_board, name='select_month_board'),
]

위의 URL 패턴 예시는 해당 앱의 루트 URL (http://localhost:8000/)로 요청이 들어왔을 때, views.py의 select_month_board 함수를 호출하도록 지정합니다. 이 때, name 속성을 통해 URL 패턴의 이름을 지정할 수 있습니다. 이 URL 패턴 이름을 템플릿에서 {% url %} 템플릿 태그를 사용할 때 사용할 수 있습니다.

 

4. 서버 실행하기

python manage.py runserver

서버를 실행하여 선택한 Select option이 반환되는지 확인해보겠습니다.

 

다음 화면에서 보이는 것처럼 선택한 Select option이 `GET 방식`을 통해 받을 수 있는 것을 확인할 수 있습니다.

 

 

이런식으로 월마다 데이터를 나누고 데이터를 출력할 수 있습니다.

 

이번 시간에는 Select option 선택한 옵션으로 이동하고 선택한 값 GET으로 받고 월별 데이터 출력하는 실습을 진행했습니다.

 

감사합니다.