메모장과 북마크 팝업창으로 구현하기

메모장과 북마크 구현하기

이번에는 사용자가 저장할 수 있는 메모장과 사이트를 저장할 수 있는 북마크를 구현했다. 마찬가지로 메모장, 북마크 의 모델을 설계한 뒤, template, url주소, view함수 세가지를 의도에 맞게 적절하게 작성해 주면 된다. 메모장에도 해당 논문에 대한 메모이므로 pmc_id(저번글의 base_id와 동일)이 필요하다. 메모장과 북마크 생성, 수정, 삭제는 post와 비슷하지만, 기능의 의도는 사용자가 '편리하게' 작성할 수 있도록 하는 것이 목표이다. 그렇기 때문에, post는 페이지를 이동하여 글을 작성하게 동작되는 반면, 메모장과 북마크는 팝업창으로 동작되도록 해야한다.

 

북마크는 메모장과 비슷하게 동작하므로 메모장 구현에만 관련된 내용을 작성하겠다.

팝업창을 부르는 부모 template

특정 버튼을 눌렀을때, 자바스크립트를 이용하여 윈도우 창을 띄운다. 그러면 memo/로 시작하는 url에 해당되는 view의 함수가 실행이 된다. ( {% if user.is_authenticated %}는 사용자가 로그인했을 때만 해당 내용을 보이게 하는 태그이다. 그리고 {% for memo in memeos %} 부분은 자신이 작성한 내용을 보일 수 있도록 하는 부분이다. 이 부분들은 팝업창과 관련이 없으므로 이정도로 언급하겠다. ) 이때 팝업창을 띄우면서, pmc_id를 전해주어야 하므로 hidden 타입으로 아이디를 보내준다. 

팝업으로 뜬 자식 template

그러면 팝업창이 이렇게 뜨게 된다. 이때, 메모 내용을 작성하고 버튼을 눌렀을 때 모델에 데이터가 저장이 되어야 한다. 그러나 pmc_id 부분은 부모 template으로 부터 정보를 받아와야 하므로, add memo 버튼에 추가적인 동작을 넣어준다. 자바스크립트로 getParendText()를 실행시켜 자신을 연 opener로부터 아까 보내주었던 hidden 타입의 데이터를 받아온다. 

또한, 팝업창에서 데이터를 보내 view의 함수를 실행시켜야 하므로, ajax로 데이터를 전송한다. 이 부분은 해당 링크에 설명이 잘 되어있어 이부분을 참조했다.

https://chohyeonkeun.github.io/2019/05/10/190510-django-Ajax

그러면 메모장, 북마크는 구현이 완성된다.