Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

파이썬 플라스크와 MySQL을 이용한 웹 앱 개발: 5부

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 4
Creating a Web App From Scratch Using Python Flask and MySQL: Part 6

Korean (한국어) translation by Dae-yeop Lee (you can also view the original English article)

이 연재 기사의 4부에서는 버킷 리스트 애플리케이션의 희망사항 EditDelete 기능을 구현하는 방법을 살펴봤습니다. 이번 5부에서는 사용자 홈 리스트의 페이징 기능을 구현하겠습니다.

시작하기

먼저 깃허브(GitHub)에서 튜토리얼의 이전 내용을 복제합니다.

소스코드가 복제되면 프로젝트 디렉터리로 이동한 후 웹 서버를 구동합니다.

브라우저에서 http://localhost:5002/로 이동하면 실행 중인 애플리케이션을 볼 수 있을 것입니다.

페이징 구현하기

사용자 홈 페이지의 희망사항 목록이 늘어나면 페이지 아래로 스크롤됩니다. 따라서 페이징을 구현하는 것이 중요합니다. 여기서는 페이지에 표시되는 항목의 수를 특정 숫자로 제한할 것입니다.

희망사항 조회 프로시저 수정

먼저 sp_GetWishByUser 프로시저에서 limitoffset 값을 기반으로 한 결과를 반환하도록 수정하겠습니다. 이번에는 저장 프로시저 문장을 동적으로 생성해서 limit 및 offset 값을 기반으로 결과 집합을 반환하겠습니다. 다음은 수정된 sp_GetWishByUser MySQL 저장 프로시저입니다.

위의 저장 프로시저에서 볼 수 있듯이 여기서는 동적 SQL 쿼리를 생성하고 이를 실행해 offsetlimit 매개변수에 따라 희망사항 목록을 가져옵니다.

UI에 페이징 추가하기

먼저 몇 가지 기본 설정을 정의해 봅시다. app.py에서 페이지 제한에 대한 변수를 추가합니다.

getWish 파이썬 메서드가 POST 요청을 받게 합니다.

getWish 메서드 내에서 offsetlimit을 읽고 이를 sp_GetWishByUserMySQL 저장 프로시저를 호출할 때 전달합니다.

userHome.htmlGetWishes 자바스크립트 함수에서는 POST 요청을 만들고 offset 값을 전달하도록 수정합니다.

모든 변경 사항을 저장하고 서버를 다시 시작합니다. 유효한 이메일 주소와 비밀번호로 로그인하면 화면에 두 개의 레코드만 표시될 것입니다.

User Home with Limited recordsUser Home with Limited recordsUser Home with Limited records

따라서 데이터베이스 부분은 잘 작동하고 있습니다. 다음으로 사용자 홈 페이지에 페이징 UI를 추가해야 합니다. 그러고 나면 사용자가 데이터를 열람할 수 있을 것입니다.

여기서는 부트스트랩 페이징 컴포넌트를 사용하겠습니다. userHome.html을 열고 #ulist UL 다음에 다음과 같은 HTML 코드를 추가합니다.

변경사항을 저장하고 서버를 다시 시작합니다. 로그인에 성공하면 희망사항 하단에 페이징된 모습을 볼 수 있습니다.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

페이징을 동적으로 만들기

위의 페이징은 페이징이 어떻게 표시될지 보여줍니다. 그러나 페이징이 기능하게 만들려면 데이터베이스의 레코드 수를 기반으로 동적으로 페이징을 만들어야 합니다.

페이징을 만들려면 데이터베이스에서 이용 가능한 총 레코드 수가 필요합니다. 따라서 sp_GetWishByUser MySQL 저장 프로시저에서 사용 가능한 총 레코드 수를 출력 매개변수로 반환하도록 수정해 봅시다.

수정된 저장 프로시저에서 볼 수 있듯이 p_total이라는 새 출력 매개변수를 추가하고 사용자 ID를 기반으로 희망사항의 총 개수를 선택했습니다.

또한 getWish 파이썬 메서드에서 출력 매개변수를 전달하도록 수정합니다.

위 코드에서 볼 수 있듯이 저장 프로시저를 호출하면 커서를 닫고 새 커서를 열어 반환된 매개변수를 선택합니다.

앞에서는 파이썬 메서드에서 희망사항 목록을 반환했습니다. 이제 반환된 JSON에도 총 레코드 수를 포함해야 합니다. 따라서 희망사항 사전을 또 다른 리스트에다 만들고 메인 리스트에 해당 희망사항과 레코드 수를 추가할 것입니다. 다음은 수정된 getWish 파이썬 메서드입니다.

GetWishes 자바스크립트 함수에서는 성공 콜백 내부에 콘솔 로그를 추가합니다.

모든 변경 사항을 저장하고 서버를 다시 시작합니다. 유효한 이메일 주소와 비밀번호로 로그인한 후 사용자 홈페이지에서 브라우저 콘솔을 확인합니다. 그럼 아래에 표시된 것과 비슷한 응답을 볼 수 있을 것입니다.

응답에서 받은 총 개수를 사용해 총 페이지 수를 구할 수 있습니다.

총 항목 수를 itemsPerPage 수로 나누면 필요한 페이지 수가 나옵니다. 그런데 이것은 total이 itemsPerPage의 배수일 때만 유효합니다. 그렇지 않은 경우에는 이를 확인하고 이에 따라 페이지 수를 처리해야 합니다.

그러면 올바른 페이지 수를 구할 수 있습니다.

이제 총 페이지 수를 구했으므로 페이징 HTML을 동적으로 생성하겠습니다. 앞에서 추가한 페이징 HTML에서 LI 요소를 제거합니다.

GetWishes 성공 콜백에서는 jQuery를 이용해 이전 링크를 동적으로 만들어 보겠습니다.

위의 코드에서는 이전 버튼 링크를 만들어 페이징 UL에 추가했습니다.

위의 변경 사항을 저장하고 서버를 다시 시작합니다. 로그인에 성공하면 리스트 하단에 놓인 이전 링크를 볼 수 있을 것입니다.

Previous link in the PaginationPrevious link in the PaginationPrevious link in the Pagination

이와 마찬가지로 페이지 수에 따라 각 페이지에 추가합니다.

페이지 링크가 추가된 후 다음(Next) 링크도 추가합시다.

변경 사항을 저장하고 서버를 다시 시작합니다. 유효한 이메일 주소와 비밀번호로 로그인하고 사용자 홈 페이지로 이동하면 페이징을 볼 수 있을 것입니다.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

페이지 번호에 클릭 이벤트 연결하기

이제 페이징을 동작하게 만들 주요 로직이 나옵니다. 각 페이지 인덱스에 GetWishes 자바스크립트 함수를 호출하는 클릭 이벤트 호출을 추가하려고 합니다. 먼저 페이지 번호를 표시하는 앵커 요소에 클릭 이벤트를 추가하겠습니다.

페이지 앵커에 onclick 이벤트를 추가했습니다. 따라서 클릭할 때마다 GetWishes 함수를 호출하고 offset을 전달할 것입니다. 따라서 for 루프 외부에 offset을 선언합니다.

클릭 이벤트 호출 내에서 GetWishes 함수를 호출합니다.

또한 표시된 레코드 수에 따라 offset도 증가시킵니다.

그러나 GetWishes 함수가 호출될 때마다 offset의 값은 항상 마지막으로 설정될 것입니다. 따라서 GetWishes 함수에 올바른 오프셋을 전달하기 위해 자바스크립트 클로저(JavaScript Closure)를 사용하겠습니다.

위의 모든 변경 사항을 저장하고 서버를 다시 시작합니다. 유효한 로그인 정보로 로그인하고 사용자 홈 페이지로 이동한 후 페이징 UL의 페이지를 클릭해 보십시오.

다음으로 이전 페이지 링크와 다음 페이지 링크를 구현하겠습니다. 조금 복잡해 보일 수도 있으므로 구현을 시작하기 전에 조금 설명하겠습니다.

여기서는 한 번에 5개의 페이지를 표시하겠습니다. 다음 및 이전 링크를 통해 사용자는 다음 5개 및 이전 5개 페이지로 각각 이동할 수 있습니다. 시작 페이지와 끝 페이지의 값을 저장하고 다음 버튼 클릭과 이전 버튼 클릭에 대해 계속 업데이트합니다. 먼저 userHome.html 페이지에 두 개의 숨김(hidden) 필드를 추가해 보겠습니다.

GetWishes 성공 콜백에서는 .pagination UL을 비운 후에 다음 코드를 추가해서 최신 시작 페이지와 끝 페이지를 가져옵니다.

1~5페이지를 표시할 때는 이전 버튼 링크가 표시되지 않습니다. 표시된 페이지가 5보다 크면 이전 버튼 링크가 표시됩니다.

사용자가 이전 버튼을 클릭하면 hdnStarthdnEnd 값을 재설정한 후 GetWishes 자바스크립트 함수를 호출합니다.

다음으로, 시작 페이지와 끝 페이지를 기반으로 페이지 링크를 반복 생성해서 .pagination UL을 추가합니다.

총 페이지 수와 페이지 시작 값을 비교해서 다음 버튼 링크를 표시할지 결정합니다.

위의 코드에서 볼 수 있듯이 다음 버튼을 클릭할 때 hdnStarthdnEnd 버튼 값을 재설정하고 GetWishes 자바스크립트 함수를 호출합니다.

다음은 최종 GetWishes 자바스크립트 함수입니다.

모든 변경사항을 저장하고 서버를 다시 시작합니다. 유효한 이메일 주소와 비밀번호를 사용해서 로그인합니다. 사용자 희망사항 목록에 대해 페이징이 완전히 기능하는 모습을 볼 수 있을 것입니다.

정리

이번 연재 기사에서는 사용자 홈 페이지의 희망사항 목록에 대한 페이징 기능을 구현했습니다. MySQL 저장 프로시저를 이용해 데이터를 조회하고 해당 데이터와 jQuery, 부트스트랩을 이용해 페이징을 만드는 방법을 살펴봤습니다.

다음 6부에서는 애플리케이션에 파일 업로드 기능을 구현하겠습니다.

이 튜토리얼의 소스코드는 깃허브에서 확인하실 수 있습니다.

아래 댓글로 여러분의 생각을 알려주세요!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.