결과 미리보기
키오스크 판매관리 웹시스템을 만들 때, 키오스크 조회 메뉴에서 select option을 선택하는대로 조회 화면이 바뀌는 걸 구현하고 싶었다.
아래는 기능이 구현된 움짤이다.
이렇게 구매처 분류 컬럼이 공공인 경우와 민간인 경우, 판매한 지 1년이 지나 무상a/s가 불가한 키오스크 정보를 선택하여 가져오는 기능이다.
이 기능은 html의 select option 태그를 이용해서 구현했다.
MTV 패턴 흐름 정리
장고의 MTV 패턴의 흐름을 정확히 알아야 자신의 웹사이트를 커스터마이징할 때 유용한 것 같다.
그래서 우선 select option 값을 뷰 함수에 넘기고, 모델에서 데이터를 받아와서 템플릿에 뿌리는 과정을 MTV 패턴 그림을 이용해 표현하자면 아래 그림과 같다.
1 : 유저가 화면에서 옵션을 선택한다.
2 : 템플릿에서 뷰로 select option 값이 'GET' 방식으로 전송된다. (submit 버튼없이 옵션을 변경하면 자동으로 값이 보내지도록 jQuery 활용)
3 : 뷰가 사용자의 요청사항에 맞는 데이터를 가져오도록 모델에 지시한다.
4,5 : 모델은 장고 ORM 기능을 이용하여 db와 연동하고, 데이터를 반환받는다.
6 : 반환받은 데이터를 뷰에 전송한다.
7 : 뷰는 전송받은 데이터를 토대로 표시할 템플릿을 지정하고 해당 템플릿을 화면에 표시할 것을 결정한다.
8 : 결과 화면을 사용자 화면에 출력한다.
코드
<sales_list.html>
<form action="{% url 'salesinfo_index' %}" method="get" id="search_mode">
<div class="container my-3">
<select name="search_mode" id="search_mode">
<option value="">조회 선택</option>
<option value="공공">공공</option>
<option value="민간">민간</option>
<option value="무상a/s불가">무상a/s불가</option>
</select>
</div>
</form>- 뷰에 값을 넘겨주려면 form 태그로 전송할 태그를 감싸주어야 한다.
form 태그의 action 속성에서 값을 전송하면 뷰의 어느 함수에서 다룰 것인지 정해준다. 나는 salesinfo_index로 적어주었다.
- method 속성으로 'POST', 'GET' 방식을 선택할 수 있다.
- form 태그의 id는 값을 submit할 때 필요하므로 search_mode로 지정해준다.
<script type="text/javascript">
$(document).ready(function(){
$("select[name=search_mode]").change(function () {
$("#search_mode").submit();
});
});
</script>- 셀렉터 값을 제출할 jQuery script
- $("select[name=search_mode]").change(function () { }); : 셀렉터를 정하여 해당 셀렉터의 값이 변할 경우 변화를 캐치하는 이벤트이다. 즉, 사용자가 옵션 중 하나를 선택하면 이를 감지하고 다음 절을 실행한다.
- $("#search_mode").submit(); : 위 html의 form 태그의 id를 제출하라는 명령어
views.py
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
def salesinfo_index(request):
"""
sales 목록 출력
"""
# 입력 인자
search_mode = request.GET.get('search_mode')
print(search_mode)
if search_mode :
if search_mode == '무상a/s불가':
sales_list = Sales_History.objects.order_by('udate')
else:
sales_list = SalesInfo.objects.filter(main_inst=search_mode).order_by('scode')
else:
sales_list = SalesInfo.objects.order_by('scode')
context = {'sales_list':sales_list}
return render(request, 'sales/sales_list.html', context)
|
cs |
- sales_list.html의 form 태그의 action 속성에서 salesinfo_index url을 적어서 뷰 파일의 해당 함수내에서 코딩을 진행한다.
- line 6 : 위 sales_list.html에서 get 방식으로 submit한 option 값을 search_mode 변수로 받는다.
- line 9, 10 :
'테이블명.objects' 는 sql문으로 표현하면 'select * from 테이블명'이다. 테이블의 모든 로우를 조회한다는 뜻이다.
판매한지 1년이 초과된 키오스크 판매 정보는 트리거를 통해 자동으로 Sales_History 테이블에 저장된다. 그래서 무상a/s불가 옵션을 선택할 경우, sales_history 의 모든 로우를 udate 컬럼을 기준으로 정렬하여 조회한다.
- line 11, 12 :
공공 / 민간 옵션을 선택할 경우, salesinfo 테이블의 로우 중에서 main_inst 컬럼값이 search_mode와 같은 로우만 필터링해서 조회한다. scode 컬럼을 기준으로 정렬한다.
- line 13, 14 : 옵션을 선택하지 않은 경우는 salesinfo 테이블의 모든 로우를 scode 컬럼을 기준으로 정렬하여 조회한다.
- line 16 : Dictionary의 key는 sales_list.html에서 사용할 템플릿변수명이 되고, value는 전달하는 내용인 sales_list를 넣어준다.
- line 17 : sales_list.html 템플릿에 전달할 데이터인 sales_list를 딕셔너리 형태로 전달한다.
이렇게 코드를 작성하고 옵션을 선택해보면 주소창에 '?' 뒤에 'search_mode' 파라미터와 '공공' 파라미터값이 추가되고 데이터가 옵션에 맞게 변하는 걸 확인할 수 있다.
끝 !
jQuery는 처음 다뤄봐서 5시간인가 걸리는 작업이었다 ^^
괜찮아.... 구현했으니 됐어....
'WEB > django' 카테고리의 다른 글
| [django] 이미지 파일 업로드 기능 추가 (4) | 2022.11.09 |
|---|
