2023년 June 29일

Building a Django Web App – Django III > Django custom user profile

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

 

(2) Creating a profile model

models.py에 profile 모델 생성

다음 코드를 추가합니다.

mysite > main > models.py

 

Django user 생성 및 저장 함수 오버라이트(overwrite)

다음 코드를 추가합니다.

mysite > main > models.py

 

Migrations 수행

다음 명령을 수행합니다.

>python manage.py makemigrations
>python manage.py migrate

 

기존 유저를 위한 프로필 생성

다음 명령을 수행합니다.

>python manage shell

위와 같이 오류가 나면 (TAB)을 누르고 Profile.objects.create(user=user)을 입력하면 정상 동작합니다.

 

User 링크를 navbar.html에 추가

다음 코드를 추가합니다.

mysite > main > templates > main > includes > navbar.html

 

(3) Creating user and profile forms

forms.py에 user 폼 추가

다음 코드를 추가합니다.

mysite > main > forms.py

 

forms.py에 profile 폼 추가

다음 코드를 추가합니다.

mysite > main > forms.py

 

user.html을 usls.py에 추가

다음 코드를 추가합니다.

mysite > main > urls.py

 

Userpage 기능을 views.py에 추가

다음 코드를 추가합니다.

mysite > main > views.py

 

변수들을 user.html에 추가

다음 코드를 추가합니다.

mysite > main > templates > main > user.html

 

브라우저에서 확인해 봅니다.

 

UserForm을 user.html로 연결

다음 코드를 추가합니다.

mysite > main > templates > main > user.html

 

다음과 같이 Modal 팝업 창 코드를 추가합니다.

 

브라우저에서 확인해 봅니다.

 

ProfileForm을 user.html로 연결

다음 코드를 추가합니다.

mysite > main > templates > main > user.html

 

Wishlist modal 추가

다음 코드를 추가합니다.

mysite > main > templates > main > user.html

 

브라우저에서 확인해 봅니다.

 

(4) Using Bootstrap modals

User와 profile 폼 변화를 저장하기 위한 views.py 수정

다음 코드를 추가합니다.

mysite > main > views.html

 

브라우저에서 확인해 봅니다.

 

(5) Adding a wishlist button to the products

Wishlist 버튼을 products.html에 추가

다음 코드를 추가합니다.

mysite > main > templates > main > products.html

 

views.py에 있는 product 코드 업데이트

다음과 같이 코드를 추가합니다.

mysite > main > views.py

 

브라우저에서 확인해 봅니다.

 

home.html에서 wishlist 버튼을 product에 추가

다음과 같이 코드를 추가합니다.

mysite > main > templates > main > home.html

 

wishlist 기능 추가 코드를 위한 homepage view 업데이트

다음과 같이 코드를 추가합니다.

mysite > main > templates > main > home.html

 

브라우저에서 확인해 봅니다.

 

로그인 한 사용자에게 특정한 CTA 버튼 연결

다음과 같이 코드를 추가합니다.

mysite > main > templates > main > home.html

 

브라우저에서 확인해 봅니다.

Leave a Reply

Your email address will not be published. Required fields are marked *

연관 글
BCT NEWS
인기 글
워드프레스 유지보수
워드프레스 유지보수