중고거래 사이트 만들기 3

우리가 지금까지 만든 웹사이트가 좋은 서비스를 제공하더라도 디자인을 보면 아무도 이용하지 않을 것이다.

따라서 템플릿을 이용해서 디자인을 입혀보자

 

먼저 코드잇이라는 사이트에서 제공하는 장고의 쇼핑몰 프로젝트 실습에 쓰이는 템플릿 파일을 가져와서 지금 만드는 사이트에 맞게 적용 시켰다.

로고는 아래 사이트에서 만들었다.

https://www.freelogodesign.org/

Logo Design - Create Your Own Logo, It's Free! - Free Logo Design

p_02_02.zip

0.03MB

 

 

 

폴더 구조는 아래와 같다.

 

이제 템플릿이 allauth가 제공하는 템플릿 대신 우리가 설정한 템플릿으로 오버라이딩 됐는지 확인한다.

 

이 페이지는 실제로 로그인이나 회원가입등의 작동은 아직 하지않는다.

이를 실제 장고 로직과 연결시켜야 한다.

먼저 signup.html을 수정한다.

로고 이미지를 클릭하면 홈페이지로 돌아가고

 

로그인을 클릭하면 로그인 페이지로 이동한다. 

 

이제 form태그를 이용해서 각각의 필드들을 따로따로 렌더하자

form태그에 여러 속성을 넣어 사용하려면 widget tweaks 패키지를 이용해야 한다.

터미널에 pip install django-widget-tweaks를 입력한다.

그리고 settings.py에 가서 INSTALLED_APPS에 widget_tweaks를 추가한다.

 

이제 다시 signup.html로 돌아와 widget_tweaks를 로드하자

 

그리고 add_class로 클래스에 포함하고 attr로 속성을 추가하고 add_error_class로 에러메시지를 보내는 클래스에 포함시킨다.

그리고 에러가 있을 때 메시지를 출력시키고 기존의 input태그는 이제 필요가 없으니 지운다.

 

 

그리고 회원가입란에 유효성 검사가 잘 작동하는걸 볼 수 있다.

 

 

이제 로그인 페이지를 수정하기 위해 login.html파일의 코드를 수정하자

비밀번호 찾기와 회원가입을 누르면 각각의 알맞은 페이지로 이동하도록 url을 설정했다.

 

그리고 signup.html을 수정할 때와 마찬가지로
widget tweaks를 사용하기 위해 로드하고 input태그 대신에 form를 이용해서 유저가 입력한 정보를 받도록 한다.

 

이제 로그인을 시도하면 잘 동작한다.

이러한 작업들을 아래 페이지들에 대해서도 반복한다.

1. 비밀번호 변경 페이지 (password_change.html)
2. 비밀번호 찾기 페이지 (password_reset.html)
3. 비밀번호 재설정 이메일 발송 완료 페이지 (password_reset_done.html)
4. 비밀번호 재설정 페이지 (password_reset_from_key.html)
5. 비밀번호 재설정 완료 페이지 (password_reset_from_key_done.html)

email_confirmation_done.html 파일 또한 account 폴더 안에 있는 것을 사용할 것이므로 프로젝트 폴더 안의 urls.py에서

템플릿 경로를 수정한다.

 

 

 

수정을 다 마치면 이제 디자인은 모두 입혀졌다.

그러나 현재 문제가 하나 있는데 로그인과 로그아웃 등을 반복하고 관리자 페이지로 접속하면 그동안의 기록들이 쌓여있다는거다.

이 메시지가 계속해서 쌓이면 문제가 될 수 있으므로 이 메시지를 비활성화하겠다.

이는 allauth의 메시지 템플릿들을 빈 템플릿으로 오버라이딩하면 된다.

각각의 txt파일들은 특정한 상황에서 나오는 출력되는 메시지파일이다.

이것들을 전부 빈 txt파일로 만들자

 

또한 비밀번호 재설정등으로 인해 오는 이메일의 내용도 원하는 메시지 내용으로 오버라이딩 할 수 있다.