[Django] #11 - Django 게시판 만들기(등록 버튼 구현) - 2

제가 했던 것은 기본적인 템플릿이 있다는 전제로 만들어졌습니다. 템플릿이 없다면 이 글은 흐름 정도 파악하는 것으로 추천드립니다.

 

버튼 이벤트 구현

---

 

 

이 버튼을 구현해보자.

 

첫 번째로 해당 위치를 찾는다. 이것을 위해 크롬 개발자 도구를 사용하는데  F12를 눌러서 오른쪽에 있는 탭이 뜨게끔 한다.

 

해당 버튼의 id는 newBtn이다. 우리는 이 newBtn에 대한 스크립트를 구현해야 된다.

이 버튼에 대한 이벤트를 처리하기 위해서는 script로 처리해야 한다.

 

해당 스크립트의 이름에 대한 기능을 구현해줘야 한다.

그래서 <script> </script> 이 부분에 대한 작성을 해줘야 한다.

 

$(document). ready(function(){} 부분은 body태그의 모든 태그들이 출력된 다음에 호출이 되는 코드로서

해당 html부분을 읽어오는 코드라고 보면 된다. html을 읽어야 html에서 사용하는 아이디나 클래스 값을 인식하고 우리가 그 값에 로직을 구현할 수 있다.

테스트로 script 부분에 alert를 줘봤다. 이건 제대로 작동되는지 확인하기 위함이다.

 

 

이제 버튼을 클릭 시 alert 이벤트가 발생되는 것을 볼 수 있다. 이제 해당하는 부분은 맞다는 것을 확인했고 

 

이제 로직을 짜 보자.

 

첫 번째로는 bbsRegisterForm.html 파일을 templates에 넣어준다.

이 location.href를 통해 해당 URL로 보내준다. 우리는 bbs_registerForm이라는 URL로 보내주기로 약속한다.

이렇게../으로 해야 뒤로 한 칸 가고 해당 url을 쓴다. 이 부분은 현재 파일의 위치에서

.. 은 뒤로 한 칸/

. 은 현재 위치를 뜻한다. 

파일의 위치에 대한 상대 경로라고 생각하면 된다. 

그다음 urls.py 파일에서 우리가 지정해 놓은 url인 bbs_registerForm에 대한 부분을 만들어 준다.

 

 

이다음은 이 views에 대한 함수를 구현해준다.

bbs_registerForm의 로직을 구현하는 데 있어서 context라는 곳에 id 값과 name 값을 담는다. 

그 후 render를 통해 다른 템플릿으로 보내게 한다. 이때 context값과 함께 같이 보내준다.

 

이제 페이지 새로고침을 하고 버튼을 눌렀을 때

 

 

이런 화면으로 이동한다. 화면이 구성되긴 했지만 css가 적용이 안되어 있고 header, footer가 적용이 안되어 있다. 

 

html 파일을 수정해주자. 해당 html에 header 부분을 include 하고

 

 

 

 footer부분을 include 하면

 

 

 

아래와 같이 css가 적용된 페이지를 볼 수 있다.