9. Django product app 상품등록 만들기

이제 상품을 등록하는 기능을 만들어보자

이전 상품목록을 보여주는 기능은 DB에 저장된 데이터를 List를 보여주는 것이기에

등록할 상품을 구조과 형식에 맞게 DB에 저장하도록 페이지와 코드를 작성해보자

등록은 회원가입과 유사하기에 register_product.html 과 forms.py를 생성한다.

다음과 같이 큰 틀로 나눌 수 있다.

1. forms.py

2. register_product.html

3. views.py, urls.py

4. 결과확인

5. summernote 과 깨알지식들 및 해당 결과 확인

 

 

 

1. forms.py

forms.py 의 경우 지금까지 같이 해왔다면 받고 싶은 데이터를 form으로 받는 것이기에

product에 해당하는 데이터는 models.py에 정의되어 있다. 그 구조로 데이터를 받아오도록 구현한다.

이전에 계속 설명하였기에 아래의 코드에서는 설명할 것이 없어보인다. 매우 간단한 구조이다.

 

product/forms.py

 

 

 

 

2. register_product.html

 

register_product.html 의 경우 특징이 한 가지가 존재하는데,

상품 설명을 input tag를 사용하지 않고 , TextArea 태그를 사용할 것이다.

 

product/templates/register_product.html

 

해당 코드에서 같은값인지 확인할 때 ifequal을 쓰는 구조에 주의를 바란다.

field.name 가 description이 되면 해당 form은 Textarea로 길이제한이 없게 데이터를 받아오겠다.

 

상품설명도 부트스트랩에 맞게 class를 지정해주면 (class="form-control") 에서 아래처럼 변경된다.

 

                        ▼▼▼▼▼▼

 

이 사진은 url까지 설정 해줬을 때 이다.

 

 

 

 

 

3. views.py

이제 View를 만들고 url까지 만들어 주면 된다.

너무 당연한 단계이고 코드 또한 이전과 달라진게 없기에 설명은 코드로 대체한다.

 

 

product/views.py

 

shopping_django/urls.py

 

 

 

 

 

 

 

 

4. 결과확인

 

상품등록 하자잉

 

상품등록을 하게되면 아래와 같이 정상적으로 DB에 저장이 되고

그것을 불러와 아래와 같이 이쁘게 List를 보여준다 ㅎㅎ 

 

 

 

 

 

 

 

 

 

5. summernote 과 깨알지식들 

추가할 것은 보통 상품을 쇼핑몰에 등록하고 상세 설명을 하는 경우

이미지, 동영상, 링크 등 여러가지 요소를 이용하여 제품을 설명한다.

그런데 우리는 Text만 쓰도록 설정했으니 이를 수정해 보겠다. 

실제 상품을 등록하는 경우처럼 이쁘게 조작하여 만들어 보자!!!!

 

우리는 비교적 쉬운 bootstrap에서 Summernote라는 editor를 이용하고,

거기에다가 깨알 지식들 또한 알아봅시다잉!!!

 

 

 

이제 summernote를 구글링 해보면 widget editor가 나온다.

summernote.org/

Summernote - Super Simple WYSIWYG editor

홈페이지에서 살짝 스크롤내리면 있다.

 

다운로드 필요없이

Easy to Install로 들어가고

우리는 현재 bootstrap 4 version을

사용하고 있기에

해당 CDN을 가져올 것이다.

 

 

 

 

 

 

 

 

 

해당 CDN을 가져오면 된다.

 

 

 

 

 

 

[여기서 등장하는 깨알지식 1]

 

 

 

 

 

 

 

 

일단 우리는 shopuser과 product에서 모두 base.html을 사용하고 있다.

그런데 settings.py에 들어가보면 Templates란에 APP_DIRS가 True로 되어있다.

이것은 template를 찾을 때 존재하는 모든 앱의 템플릿을 다 찾아본다는 것을 의미한다.

그래서 True로 되어있으면 대부분의 .html파일들은 두 개의 base.html 중에

위에 있는 base.html을 상속받는 것이고 아래의 base.html파일은 삭제 시켜도 된다.

 

 

 

 

 

 

 

 

 

 

 

 

[여기서 등장하는 깨알지식 2]

 

 

summernote에서 가져온 CDN의 경우

가져 와서 head에 넣으면 되는데

모든 templates이 해당 코드가 필요한 것이 아니기에

특정파일에만 특정 head코드를 넣은 방법을 소개한다.

 

 

다음과 같이 base.html파일에 기재하고

{% block header %}

{% endblock %} 

특정 head코드를 삽입시키고 싶은 파일에

아래와 같이 header block를 만들면

 

실제 register_product.html에만 해당 head 부분이 삽입된다.

register_product.html

 

 

 

 

그런데 우리는 이 head를 가져오긴 햇지만 아직 활성화를 시키지 못했다.

summernote 페이지에서 살짝 위에 보면 어떤형식으로 사용하는지 나와있다.

아래와 같다.

 

 

한 가지 수정해야 할 것은 #summernote 는 id를 summernote로 활성화 한다는 뜻이다.

하지만 우리는 TextArea의 id 의 경우 field의 label용 id가 따로 존재한다. --> {{ field.id_for_label }}

이거는 생성이 되는 값인데 'id_필드명' 으로 지정하면 된다.

즉, #id_description 으로 지정하면 된다.

 

register_product.html

 

여기서 적절한 속성값으로 해당 widget의 크기를 키워보자! (해보니깐 작더라고ㅎㅎ)

안에 중괄호하고 속성넣는 것 주의!!

 

[결과 확인]

 

 

 

 

 

 

 

 

 

위와 같이 상품을 등록하고, 목록으로 데이터가 등록되었음을 확인하였다.

아직 상세보기 기능이 없어서 admin페이지로 들어가서 해당 데이터가 어떻게 저장되었는지 확인하자.

 

 

이미지의 경우 base64라고 하는 형태로 저장되어 있다. 태그가 엄청 길게 저장되어 있다.

 

그런데 누구든지 상품등록이 가능할 경우 문제가 된다.

그렇기에 특정 권한을 가진 사람만 상품등록을 할 수 있도록 해야하고

이것은 추후에 진행하려 한다.!!

 

 

 

 

 

 

이상!!! 오늘도 감코!!!