Link
09-25 12:23
«   2020/09   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      
Archives
Today
939
Total
1,023,685
관리 메뉴

꿈 많은 사람의 이야기

python django로 todo 게시판 만들기!- 10편. Ajax를 활용해보자 본문

python-django

python django로 todo 게시판 만들기!- 10편. Ajax를 활용해보자

이수진의 블로그 이수진의 블로그 2019. 6. 25. 14:37

완성된 코드는 아래 github 주소에 있습니다!

도움이 되셨다면 좋아요와 깃허브 스타를 눌러주세요! 저에게 있어 큰 힘이 됩니다 ㅠㅠhttps://github.com/lsjsj92/django_todo_app

 

 

지난 포스팅까지 진행하면서 파이썬 장고를 활용해 todo 게시판 만들기 틀이 갖추어졌습니다.

게시판 삭제, 수정, 글쓰기, 상세보기와 날짜를 추가하는 과정도 넣었는데요

 

아무래도 웹 개발을 하다보면 Ajax를 많이 쓰기 마련입니다.

AJax는 JavaScript의 라이브러리중 하나이죠~ 이것을 사용하면 자바스크립트를 활용해서 비동기 통신이 가능합니다.

여기서 비동기 방식이라는 것은 웹페이지를 reload(새로고침 등)하지 않고 데이터를 불러오는 과정을 뜻합니다. 즉 새로고침 과정이 필요없고 백단 서버에서 처리한 결과를 보여줄 수 있는 것이죠

 

이제 todo 게시판에서 Ajax를 활용해 게시판을 효과적으로 만들어봅니다

바로 체크박스(checkbox)에서 체크박스가 클릭, 해체 되었을 때 Ajax를 활용해 통신하는 방법입니다

이렇게 페이지가 되어 있으면

저 체크박스를 클릭을 하게 되면 일정이 마감되는 것입니다.

일정이 마감되면 일정 -> 마감 일정으로 옮겨야 되죠

즉, 오른쪽 마감 된 일정을 보시면 체크박스가 쳐진 것을 볼 수 있습니다. 그리고 기한 있는 일정과, 기한 없는 일정은 체크박스가 체크 되어 있지 않죠

이런 것을 체크박스를 체크했을 때 Ajax를 활용해 바로바로 이동하는 것을 보여줄겁니다.

 

 

이를 위해서 데이터베이스 table에 IS_COMPLETE를 둡니다. 0이면 마감이 되지 않은 것. 1이면 마감이 된 것입니다.

그러면 저 체크박스가 클릭 되었을 때 이벤트(event)가 추가되어야 하죠?

그 이벤트 추가는 JavaScript로 합니다.

 

자 이렇게 합니다.

먼저 document.getElementsByName()을 통해서 이름을 통해 checkbox 내용을 가져옵니다.

그리고 일정이 마감 된 것들은 checked를 True로 둡니다. (디비에 값이 따로 저장되어 있으니까요)

 

자 이제 Ajax를 활용해서 체크박스가 클릭되었을 때 이벤트를 추가해야하는데요

 

 

여기서 보시면 input[name*=complete]가 되어 있는데요. input type에서 name이 complete가 포함된 모든 애들에 대해서 change 즉, 바뀌었을 때 이벤트를 추가한다는 것입니다.

그리고 그 이벤트가 만약 is checked이면, pk 값을 가져오고 그 값과 함께 ajax를 통해서 django server단으로 보내줍니다.

url과 data가 있는데요. url은 django url으로 써주면됩니다.

그리고 데이터는 pk값을 보내줍니다

이후 만약 성공이 되면 window.location.href를 통해 url을 이동시켜줍니다.

 

 

그리고 체크박스가 해제되었을 때는 위와 같이 이벤트 처리를 합니다.

url만 다르고 나머지는 같습니다.

 

 

그러면 url이 추가되었죠? 이 url을 추가시켜줍니다.

urls.py에 가셔서 위처럼 url을 추가시켜 주시면 됩니다.

 

 

그리고 views.py에서 function base 부분에서 해당 request에 따른 로직을 추가해줍니다.

아까 data에서 pk 값을 보냈죠? 이 pk값을 보냅니다.

그리고 이 pk 값을 활용해서 checkbox_event로 보내주고 그 결과 값을 return해줍니다.

 

 

자! 그럼 테스트를 해보죠

여기서 저 위의 빨간색 체크박스는 지금 기한 있는 일정이고 마감이 되어 있지 않습니다.

저 체크박스를 누르면~

 

 

이렇게 화면이 이동이 됩니다!

 

그리고 실제 db 값에서도 바뀐 것을 볼 수 있습니다.

이렇게 Django에서 Ajax를 활용하는 방법에 대해서 알아보았습니다

7 Comments
  • 프로필사진 ttus 2019.12.29 21:39 안녕하세요 글 잘 보고 있습니다. 덕분에 여기까지 진행하게 되었는데요.
    혹시 본문의 '그 이벤트 추가는 JavaScript로 합니다.' 의 내용은 어느 문서에 추가하는게 좋을까요?
    깃허브의 문서를 찾아보았으나 ajax내용이 확인이 안되네요.

    제가 초짜인지라..ㅎㅎ
    말씀 부탁드립니다.
  • 프로필사진 ttus 2019.12.29 23:57 해결 했습니다!
    todo_board_list 하단에 <script></script>
    안에 추가했습니다.

    이후에 동작확인도 했구요. 잘 되네요 ^^
  • 프로필사진 이수진의 블로그 이수진의 블로그 2019.12.30 08:53 신고 아 넵 다행이네요 ㅎㅎ 지금봤습니다. 축하드립니다 ~
  • 프로필사진 ttus 2020.01.01 11:48 추가 하면서 계속 진행 했는데요.
    올려주신 내용 보니깐 header.html <script></script>에 추가하셨더군요. 글 보시고 작성하신 분들 참고 부탁드립니다. 제작에 혼란을 드려 죄송합니다. ㅠㅠ
  • 프로필사진 이수진의 블로그 이수진의 블로그 2020.01.02 13:13 신고 아 ~ 그 부분을 못보셨군요 ㅎㅎ
    그래도 이제 확인하셨으니 다행입니다.
  • 프로필사진 이영 2019.12.30 22:01 ajax와 해당 ui를 추가하고나서는 데이터를 추가하면 보이지가 않더라고요... DB에 직접 접근해서 이유를 살펴보니 IS_COMPLETE가 NULL인 경우는 데이터가 입력이 되어도 웹 페이지 상에 출력이 안 되도록 구문이 만들어져서 그렇네요. 코드상으로는 어디를 건드려야 할지 아직 공부중이라서 그냥 데이터베이스를 수정했는데 views의 Todo_board부분과 todo_board_list 템플릿 정도만 수정하면 되려나요...? ajax는 모두 해결했습니다..! scrpit넣는 파일을 바꾸고 브라우저도 바꾸니 해결이 되네요 ㅠㅋㅋ
  • 프로필사진 이수진의 블로그 이수진의 블로그 2019.12.31 12:11 신고 아~ 연말인데 고생이 많으십니다.
    넵 말씀하신대로 그 부분을 중점으로 보시면 될 것 같아요
    제글이 좀 도움이 되어야 하는데 ㅠ 죄송합니다
    그래도 해결하신 부분이 있으시다니 다행입니다!
댓글쓰기 폼