🦁 Python Online Store 만들기 18편 - 상품구매

🎈 Front End Developer 의 Back End 도전기 ! 🎈

이 글은 PROJECT LION : 호코치 강사님의 강의를 들으며 참고한 글입니다.

작업 중, 개발과정 정리 및 issue가 되었던 부분들을 공유 및 기록하고자 작성하게 되었습니다.

1. 상품구매 프로세스

✍ 상품 구매에 대한 전반적인 순서를 그려보고 이해한 후 넘어가는 것이 좋을 것 같아 대략적인 순서를 구성해보았다.

우선 (1) 상품 상세 페이지 접속 후 -> (2)구매하기 버튼을 클릭할 시 -> (3)주문자 정보 입력 page가 나오게 되고,

(4)주문자 정보 입력 후 결제를 클릭 시 -> (5)결제창 및 결제완료 페이지가 호출된다.

그 후, (6)상품구매완료 페이지가 호출되며 -> (7)구매상품목록을 확인할 수 있는 페이지가 호출되고 -> (8)구매 결과 페이지가 호출되는 형식이다.

저장하는 알고리즘 역시 크게 생각해 본다면,
(1) 결제 버튼 클릭 시 주문정보가 생성되고 -> (2)상품 구매 완료 시 주문 정보에서 주문 상태 값을 update 시켜준다.

(3)그 후, 결제 관련 정보 받아서 -> (4)저장된 주문 정보로 구매 상품 목록 및 결과 페이지를 호출한다.

돌아가는 로직은 전반적으로 이해하였고, 직접 코드를 짜보면서 깊게 이해해 보도록 하겠다.

🔖 html 코드 및 bootstrap을 활용한 스타일 작업의 상세한 설명은 표기하지 않겠다.

⌛ 주문 페이지 생성

1. 상세페이지 > 구매하기 버튼 생성
   = 해당 구매하고자 하는 상품의 고유id값을 가지고 order 주소(구매 페이지)로 이동

---

2. 버튼 누릴 시 주문 가능한 페이지 API 생성(controllers > product.py)
   
   값을 가지고 render_template 주소를 order_form.html page로 이동시킨다. (주문 페이지에는 상품 정보가 필요하므로 product 넘겨줌)

---

3. order_form.html 생성 및 구조작성
   = html 코드 구조 및 bootstrap class를 이용하여 간단하게 폼을 생성한다.

   📍 주의할 점은, 각 input에는 고유 id값 및 name값을 이용해 값을 전송시켜야 한다.

여기서, 우편번호 찾기를 클릭 시 주소를 입력하는 API을 다음에서 제공해준다.

다음 API 예제코드를 복사하여(사용자가 선택한 값 이용하기 -> 예제 코드보기), onlinestore 주문 폼에 맞춰 input값 및 button을 그대로 사용하면 된다. (script는 건드릴 것이 없다.)

⌛ 주문 API 생성 및 구현

1. 주문 생성 api
   = product정보가 필요하므로 product_id를 받은 후/order 및 post 방식 이용

   order 함수형 선언 및 product_id를 주소에서 받아온다.

   그 후 product에 대한 정보를 product_id를 가지고 찾아올 것이므로, 주문정보를 저장할 때 상품에 대한 정보 역시 저장한다.(어떤 상품을 구매한지 확인해야함)

---

= input으로 들어오는 배송지 정보와 주문자 정보를 받아올 때 사용

---

= order collection에 insert_one이라는 함수로 product와 form_data, user에 대한 정보를 저장할 것이다. (order.py file을 models 에 생성하여 사용할 것이다. 우선 Order 사용)

이 user는 check_login을 할 때 사용한 것이므로(로그아웃에서 사용) 그대로 가져온다.
= 만약 로그인이 되어있다면 user정보를 가지고 사용할 것이고, 로그인이 되어있지 않다면 return 값으로 돌려보낼 것이다.

🔖 check_login 및 redirect_to_signin_form 사용위해 import 필요

---

2. models > order.py 생성
   = order class 생성 후 db연결, insert_one method에 사용하여 product, form, user값을 받아온다.

그 후, form에서 전송된 data들을 받아와서 db에 저장시킨다.

---

3. order 활성화
   = 생성을 했다면, 사용을 위해서는 반드시 import가 필요하다.

   작업을 하면서 자주 까먹는 상황이 발생했고, 반드시 import가 필요하다!!!!

---

4. 주문 생성 API > return 값 생성
   🔖 현재 주문테스트는 주문요청 시 db에 값이 저장되는 것을 확인하는 용도이므로, 값만 제대로 전송된다면 주문완료 페이지로 이동시킬 것이다.

   render_template 요청 후 payment_complete.html page로 이동시켜준다.

---

5. payment_complete.html 생성
   = 주문완료 title및 내용으로 간단하게 페이지 이동 확인 용도로 처리해준다.

---

6. form 전송 값 변경
   = 어떤 상품을 구매할 것인지에 대한 고유 id값과 /order 로 action값을 요청시킨다.

---

7. 주문 시 비로그인 처리 확인
   = 비로그인 유저가 주문 시 주문 페이지로 이동할 수 없도록 API에서 check를 해두었으므로, 로그인 후 주문을 해야한다.

---

8. 실제 주문 테스트
   = 주소, 구매자 이름, 연락처 정보를 담아서 주문하기(form 전송) 버튼을 클릭 시 db에 data들이 저장된다.
   = 주문 요청 시 주문성공 페이지로 이동
   = 실제로 db에 order.py 에서 담은 data들을 확인할 수 있다.

이처럼 주문자가 자신의 정보를 입력 후 주문을 요청할 시 요청된 data값들이 db에 정상적으로 담기는 것을 확인할 수 있다.

결제 모듈은 주문완료된 목록과 상세정보를 확인하는 페이지까지 생성 후, 작업해보겠다.

다음 시간에는 주문완료 목록 및 상세정보 확인 페이지를 만들어보겠다.