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

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

by
Read Time:7 minsLanguages:
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 7

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

이 연재 기사의 7부에서는 애플리케이션의 대시보드 페이지를 다른 사용자가 만든 희망사항으로 채웠습니다. 또한 사용자가 특정 희망사항에 '좋아요'를 표시할 수 있도록 각 희망사항마다 '좋아요' 버튼을 추가했습니다.

이번 튜토리얼에서는 '좋아요' 표시를 바꾸는 방법과 특정 희망사항으로 받은 '좋아요'의 총 개수를 표시하는 방법을 살펴보겠습니다.

시작하기

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

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

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

'좋아요' 횟수 추가하기

먼저 특정 희망사항이 얻은 '좋아요'의 총 횟수를 보여주는 기능을 구현하는 것으로 시작하겠습니다. 새로운 희망사항이 추가되면 tbl_likes 테이블에 항목을 하나 만듭니다. 따라서 MySQL sp_addWish 저장 프로시저에서 tbl_likes 테이블에 항목을 추가하도록 수정합니다.

위의 저장 프로시저 코드에서 볼 수 있듯이 tbl_wish 테이블에 희망사항를 삽입한 후 마지막으로 삽입된 ID를 가져와 tbl_likes 테이블에 데이터를 삽입했습니다.

다음으로, sp_GetAllWishes 저장 프로시저에서 각 희망사항이 얻은 '좋아요' 수를 포함하도록 수정해야 합니다. 희망사항의 총 개수를 얻기 위해서는 MySQL 함수를 사용하겠습니다. 따라서 getSum이라는 함수를 만들고 이 함수에서 희망사항의 ID를 받아 '좋아요'의 총 개수를 반환합니다.

이제 sp_GetAllWishes 저장 프로시저에서 getSum이라는 위의 MySQL 함수를 호출해서 각 희망사항의 '좋아요' 총 개수를 구합니다.

'좋아요' 횟수를 포함하도록 getAllWishes 파이썬 메서드를 수정합니다. MySQL 저장 프로시저에서 반환한 결과를 순회하면서 다음과 같은 필드를 포함시킵니다.

CreateThumb 자바스크립트 메서드에서는 '좋아요' 개수를 표시하는 데 사용할 추가 span를 만들도록 수정합니다.

그런 다음 부모 단락 plikeSpan을 추가합니다.. 다음은 수정된 CreateThumb 자바스크립트 함수입니다.

/getAllWishes에 대한 jQuery AJAX 호출의 성공 콜백에서 CreateThumb 자바스크립트 함수를 호출할 때 like 매개변수를 포함시킵니다.

변경 사항을 저장하고 서버를 다시 시작합니다. 애플리케이션에 로그인하면 각 희망사항에 해당하는 '좋아요' 개수를 볼 수 있을 것입니다.

Dashboard With LikeDashboard With LikeDashboard With Like

희망사항에 '좋아요' 표시가 됐는지 보여주기

각 희망사항 아래에서 '좋아요'를 볼 때 로그인한 사용자가 희망사항에 '좋아요'를 표시했는지 여부는 명확하지 않습니다. 그래서 이번에는 'You & 20 Others'와 같은 적절한 메시지를 보여줄 것입니다. 이를 구현하기 위해서는 sp_GetAllWishes를 수정해서 로그인한 사용자가 특정 희망사항에 '좋아요'를 표시했는지 여부를 나타내는 코드를 포함시켜야 합니다. 희망사항에 '좋아요'를 선택했는지 확인하기 위해 함수 호출을 합니다. 사용자 ID와 희망사항 ID를 매개변수로 받는 hasLiked라는 함수를 생성하고 사용자가 '좋아요'를 선택했는지 여부를 반환합니다.

이제 sp_GetAllWishes 안에서 위의 hasLiked MySQL 함수를 호출해서 반환된 데이터 집합에서 사용자의 '좋아요' 상태를 나타내는 추가 필드를 반환합니다.

app.py를 열고 sp_GetAllWishes MySQL 저장 프로시저에 대한 호출을 수정해서 사용자 ID를 매개변수로 포함시킵니다.

이제 특정 희망사항에 대해 사용자의 '좋아요' 상태를 포함하도록 getAllWishes 메서드를 수정합니다. 생성된 딕셔너리에 HasLiked를 포함하도록 코드를 수정합니다.

CreateThumb 자바스크립트 함수에서는 HasLiked를 확인한 후 이에 따라 HTML을 추가합니다.

위의 코드에서 알 수 있듯이 사용자가 특정 희망사항에 '좋아요'를 선택하지 않았다면 '좋아요' 수를 표시합니다. 사용자가 희망사항에 '좋아요'를 선택했다면 좀 더 서술적인 메시지를 보여줍니다.

Dashboard With Like StatusDashboard With Like StatusDashboard With Like Status

'좋아요' 수 갱신하기

'좋아요' 버튼을 클릭하는 순간 '좋아요' 상태는 데이터베이스 안에서 업데이트되지만 대시보드에서는 바뀌지 않습니다. 따라서 like 버튼 클릭에 대한 AJAX 호출 성공 콜백에서 like 이를 업데이트해 봅시다.

먼저 sp_AddUpdateLikes MySQL 저장 프로시저를 변경하는 것으로 시작하겠습니다. 이전에는 '좋아요' 상태에 대해 1은 '좋아요'로, 0은 '좋아하지 않음'으로 전달했습니다. 여기서는 이를 수정해서 저장 프로시저에서 '좋아요'/'좋아하지 않음'을 토글하겠습니다. sp_AddUpdateLikes를 열고 '좋아요' 상태를 변수로 선택한 후 변수 상태를 확인합니다. 변수의 상태가 '좋아요'인 경우 상태를 '좋아하지 않음'으로 업데이트하고, 그 반대의 경우에도 같은 방식으로 업데이트합니다. 다음은 수정된 sp_AddUpdateLikes 저장 프로시저입니다.

CreateThumb 자바스크립트 함수에서는 이전에 만든 likeSpanID를 할당해서 필요에 따라 상태를 업데이트할 수 있습니다.

app.py를 엽니다. addUpdateLike 메서드에서는 데이터가 성공적으로 업데이트되면 또 다른 저장 프로시저 호출을 사용해 희망사항의 '좋아요' 개수와 상태를 가져오겠습니다. 이를 위해 sp_getLikeStatus라는 MySQL 저장 프로시저를 만듭니다. sp_getLikeStatus 안에서는 이미 생성된 getSumhasLiked MySQL 함수를 호출해서 상태를 가져옵니다.

addUpdateLike 파이썬 메서드에서 sp_AddUpdateLikes를 호출하면 커서와 연결을 닫습니다.

이제 sp_getLikeStatus 저장 프로시저를 호출합니다.

응답과 함께 '좋아요' 개수와 '좋아요' 상태를 반환합니다.

dashboard.html에서는 addUpdateLike 메서드에 대한 AJAX 호출의 성공 콜백에서 반환된 응답을 파싱하고 '좋아요' 상태를 기반으로 '좋아요' 수를 표시합니다.

변경 사항을 저장하고 서버를 다시 시작한 다음 유효한 로그인 정보를 사용해 로그인합니다. 대시보드 페이지에서 특정 희망사항에 '좋아요'를 선택해 보고 그에 따라 '좋아요' 상태가 어떻게 업데이트되는지 확인합니다.

정리

이번 연재 기사에서는 대시보드 페이지에 표시되는 희망사항의 '좋아요'/'좋아하지 않음' 기능을 구현했습니다. 앞으로 이어질 다음 9부에서는 애플리케이션에 몇 가지 새로운 기능을 구현하고 기존 기능 중 일부를 수정하겠습니다.

제안사항 또는 정정해야 할 오류가 있다면 아래 댓글로 알려주세요. 이 튜토리얼의 소스코드는 깃허브에서 확인하실 수 있습니다.

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.