상품 등록하기

쇼핑몰을 만들기 위해서는 상품을 등록할 수 있어야 한다. 여기서 상품이 객체가 되고, 이 객체를 모델에 등록시켜야 한다. 이렇게 등록된 모델은 admin을 통해 관리가 가능하며, 데이터베이스의 형태로 저장된다.

쇼핑몰에 구입 가능한 상품을 등록하기 위해 'shop/models.py' 에 다음과 같이 데이터베이스 필드를 형성해준다 !

상품명

쇼핑몰에서 상품명은 굉장히 길이가 유연하기 때문에 굳이 최대길이를 지정해주지 않고 TextField를 사용했다.

상품 설명

상품 설명 또한 등록자가 원하는 만큼 쓸 수 있도록 상품명과 동일한 필드로 선언해주었다.

상품 가격

가격은 그냥 텍스트로 사용해도 괜찮지만 숫자로 취급해주기 위해 IntegerField를 사용했다.

상품 이미지

옷 쇼핑몰에서 이미지는 절대 뺄 수 없는 사항이지 않은가?! 🙄
그래서 blank를 False로 지정하여 반드시 기입하도록 하였고, 이미지를 등록하면 프로젝트에 저장될 수 있도록 저장 경로를 설정해주었다. (upload_to)

그리고 웹페이지에서 상품을 띄워보기 위해 admin 페이지에 관리자 계정으로 로그인하여 임의로 두 개를 등록해보았다.

에이블리에서 찜해놨던 물건 한번 넣어봤다 ㅋㅋ

성공적으로 등록이 되었다!! 🥳

URL 설정하기

상품 리스트 페이지에 들어가기 위해서는 경로를 지정하여 그 경로로 브라우저가 요청을 보낼 경우 어떤 템플릿을 전달할 것인지를 알려줘야 한다.

가장 맨 위의 root 프로젝트의 urls.py에서 다음과 같이 url을 설정해주었다. 서버 구동시 IP주소/shop/ 이라는 링크를 연결하면 상품 리스트 페이지가 나타나도록 했다.

그리고 shop 앱 내부에서도 url을 지정해줘야 한다 !
앱 내부에서는 shop에 들어갔을 때 바로 보이는 페이지가 리스트 페이지이기 때문에 다음과 같이 작성해준다.

그리고 이 url이 요청되었을 경우 어떤 페이지를 띄울지 요청하는 것이 path 함수에 들어간다. 우선 간단하게 띄울 페이지를 작성하였기 때문에 FBV 방식으로 작성해보기로 했다. (요청 방식에 대해서는 뒤에서 자세히 다룰 예정!)

이제 views.py에서 어떤 템플릿을 가져와서 전달할지 명시해야 한다.

우선 상품에 등록된 객체들을 모두 가져와 goods라는 변수에 넣어준다. 그리고 이제 웹페이지에 띄울 수 있도록 render 함수를 이용하여 전달한다. render 함수에는 어떤 웹사이트에 전달할 것인지, 그리고 어떤 변수를 전달할 것인지를 파라미터로 나타낸다.

상품 리스트 페이지인 good_list.html에 전달할 것이고, goods를 통해 받은 모든 상품 객체들을 전달한다는 것이다.

상품 리스트 페이지 만들기

앞서 템플릿으로 전달할 파일을 good_list.html이라고 하였기 때문에 이 템플릿을 이제 만들어야 한다.

우선 계획은 부트스트랩의 카드 형식을 사용하여 한 행에 두 개의 카드가 나타나도록 하는 것이다. 현재 두 개의 상품이 등록되어 있으니까 확인해 볼 수 있겠다 !

상품 리스트 페이지로 사용할 html 코드를 이렇게 작성했다. 코드는 부트스트랩 페이지에서 많이 참고하고 가져와서 작성했다.

<div class="container">
        <h2>Products - 둘러보기</h2>
        <div class="row">
            {% for good in goods %}
            <div class="col-sm-6">
                <div class="card mb-3">
                    <div class="embed-responsive embed-responsive-4by3">
                        <img class="card-img-top embed-responsive-item" src="{{ good.image.url }}" width="100" alt="{{ good }}" />
                    </div>
                    <div class="card-body">
                        <span class="badge bg-outline-dark float-rigth">미분류</span>
                        <h3 class="card-title h4">{{ good.name }}</h3>
                        <a class="btn btn-outline-dark" href="{{ good.get_absolute_url }}">구입하기 →</a>
                    </div>
                <div class="card-footer">
                    <div class="small text-muted"></div>
                </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

for문을 통해 상품 데이터를 받아온다. 마지막에 for문 종료 블럭 잊지 맙시다 ~~~

페이지에서 카드가 두 개로 띄워지도록 하는 코드는

<div class="col-sm-6">

바로 이 코드이다.

부트스트랩의 grid를 이용한 것으로 12칸 중 6칸만을 사용하는 것이다.

카드 안에서는 이미지, 상품명과 카테고리만 나타나도록 설정하였고 카테고리는 나중에 추가할 예정이다 ! 그리고 하단에 버튼에는 상품의 상세 페이지로 들어갈 수 있는 버튼을 두었다.

이미지는 카드의 크기에 맞추어 나타나게 하기 위해서 Embed utility를 사용하였다. 이것은 이 블로그를 참고하여 코드를 작성했다 ! 부트스트랩에서 이미지를 다루는게 아직 좀 어려워서 앞으로 더 연구해봐야 겠다...😥

아무튼 이제 템플릿 작성까지 완료되었기 때문에 서버를 구동시키고 페이지를 확인해보면 된다 !

내가 처음부터 계획했던 대로 페이지가 잘 완성되었다 !! 🥰