Django III에서 다루게 될 내용은 다음과 같습니다.
4-1 Django custom user profile
4-2 User-submitted content
4-3 Finishing touches
4-1 Django custom user profile
(1) Creating a user page
user.html 파일 생성
다음과 같이 파일을 생성합니다.
mysite > main > templates > main > (New File) user.html
user.html 파일 편집
다음과 같이 파일을 편집합니다.
mysite > main > templates > main > user.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-1.png)
(2) Creating a profile model
models.py에 profile 모델 생성
다음 코드를 추가합니다.
mysite > main > models.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-2.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-3.png)
Django user 생성 및 저장 함수 오버라이트(overwrite)
다음 코드를 추가합니다.
mysite > main > models.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-4.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-5.png)
Migrations 수행
다음 명령을 수행합니다.
>python manage.py makemigrations
>python manage.py migrate
기존 유저를 위한 프로필 생성
다음 명령을 수행합니다.
>python manage shell
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-6.png)
위와 같이 오류가 나면 (TAB)을 누르고 Profile.objects.create(user=user)을 입력하면 정상 동작합니다.
User 링크를 navbar.html에 추가
다음 코드를 추가합니다.
mysite > main > templates > main > includes > navbar.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-7.png)
(3) Creating user and profile forms
forms.py에 user 폼 추가
다음 코드를 추가합니다.
mysite > main > forms.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-8.png)
forms.py에 profile 폼 추가
다음 코드를 추가합니다.
mysite > main > forms.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-9.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-10.png)
user.html을 usls.py에 추가
다음 코드를 추가합니다.
mysite > main > urls.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-11.png)
Userpage 기능을 views.py에 추가
다음 코드를 추가합니다.
mysite > main > views.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-12.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-13-1024x95.png)
변수들을 user.html에 추가
다음 코드를 추가합니다.
mysite > main > templates > main > user.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-14.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-15.png)
UserForm을 user.html로 연결
다음 코드를 추가합니다.
mysite > main > templates > main > user.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-16.png)
다음과 같이 Modal 팝업 창 코드를 추가합니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-17.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-18.png)
ProfileForm을 user.html로 연결
다음 코드를 추가합니다.
mysite > main > templates > main > user.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-19.png)
Wishlist modal 추가
다음 코드를 추가합니다.
mysite > main > templates > main > user.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-20.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-21.png)
(4) Using Bootstrap modals
User와 profile 폼 변화를 저장하기 위한 views.py 수정
다음 코드를 추가합니다.
mysite > main > views.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-22.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-23.png)
(5) Adding a wishlist button to the products
Wishlist 버튼을 products.html에 추가
다음 코드를 추가합니다.
mysite > main > templates > main > products.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-24.png)
views.py에 있는 product 코드 업데이트
다음과 같이 코드를 추가합니다.
mysite > main > views.py
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-25.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-26.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-27.png)
home.html에서 wishlist 버튼을 product에 추가
다음과 같이 코드를 추가합니다.
mysite > main > templates > main > home.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-28.png)
wishlist 기능 추가 코드를 위한 homepage view 업데이트
다음과 같이 코드를 추가합니다.
mysite > main > templates > main > home.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-29.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-30.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-31.png)
로그인 한 사용자에게 특정한 CTA 버튼 연결
다음과 같이 코드를 추가합니다.
mysite > main > templates > main > home.html
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-32.png)
브라우저에서 확인해 봅니다.
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-33.png)
![](https://makebct.net/wp-content/uploads/2023/06/django4-1-34.png)