장고로 간단한 정보를 보여주는 원페이지

---

Django 프레임워크를 사용한 웹 페이지 개발하기. 커피 데이터 모델을 만들고, 모델을 이용한 API작성 및 템플릿 엔진을 사용하여 프론트엔드-백엔드 연결하기

🚩 Github Repository

What To Do

---

1. Django 프로젝트를 생성하고, product 라는 앱을 만들어서 settings.py에 등록하기
2. product/models.py 에 음료의 이름, 카테고리, 영양정보, 알러지가 들어갈 수 있는 Drink 라는 모델 만들기
3. prouct/models.py 에 음료의 카테고리 이름이 들어갈 수 있는 Category 라는 모델을 만들기
4. product/models.py 에 음료의 사진을 저장할 수 있는 Image 모델을 만들기
5. 카테고리에 따른 음료만 나타나도록 Category와 Drink 간의 관계를 설정
6. 모델을 작성하고 migrate 이 후, Admin 페이지를 통해 콜드 브루, 브루드 커피, 에스프레소 라는 카테고리 생성하기
7. Admin 페이지에서 카테고리에 해당하는 드링크 생성하기
8. product/views.py 에서 get 메소드에서 선택하는 input 창을 렌더링해서 form 태그로 post하는 html을 구현해서 렌더링
9. product/views.py 에서 post 메소드에서 카테고리에 해당하는 음료만 요청해서 보이도록 구현

과정

---

📜 프로젝트 생성

Pycharm에서 프로젝트를 생성한다

Pycharm에서는 장고 가상환경을 쉽게 설치할 수 있다.
파이썬 버전과 경로를 선택하고 create 해주면 끝

django-admin startapp product 로 앱 생성

Django에서 앱 단위로 API를 구분해서 작성한다. 앱을 하나 생성하기 위해서는 터미널에서 아래와 같은 명령어를 작성한다.

django-admin startapp product

settings.py에 product 연결하기

앱을 생성했다면, 프로젝트와 연결해주어야 한다. 연결해주지 않는다면, 앱에서 많은 기능을 작성했더라도 사용할 수 없다!

📜 models.py

Drink 모델 생성

• name : 음료 이름(예 - 모카 프라푸치노), 문자열필드
• category : 음료 카테고리(예 - 프라푸치노), 참조키필드-카테고리 모델
• nutrition : 음료 영양정보(예 - 200kcal), 문자열필드
• allergy : 음료 알러지(예 - 우유/대두), 문자열필드
• class Meta : 테이블 이름을 지정함
• def str(self) : return self.name은 음료의 이름으로 이 모델 오브젝트를 표시하겠다는 것이다. 해당 함수가 없다면 Object(1) 이런 식으로 표시되지만 위 함수가 적용되면 모카 프라푸치노 같이 음료 이름으로 보인다!
• Drink 모델에서는 카테고리를 ForeignKey로 받아오는 것 말고는 특이사항은 없다.

Category 모델 생성

• name : 카레고리 이름, 문자열필드
• class Meta와 def str 은 동일함

Image 모델 생성

• name : ForeignKey(Drink) 음료에 해당하는 이름을 받아서 저장하기
  이렇게 하는 이유는, 이 이미지가 어떤 음료의 이미지인지 참조하기 위함!
• file_url : URLField 이미지 주소를 받는 역할로, URL은 URL필드로만 저장할 수 있다
• class Meta는 동일함
• def str return str(self.name) : 이미지의 네임필드의 경우, 참조키를 받기 때문에 문자열이 아닌 오브젝트 형식이다. 따라서 어떤 이미지인지 쉽게 보기 위해서 사용하는 이 함수에서 정상적으로 리턴이 되지 않는다. 그렇기에 str로 묶어줘야 제대로 볼 수 있다.

📜 작성한 모델 마이그레이션하기

python manage.py makemigrations

python manage.py makemigrations

python manage.py migrate

python manage.py migrate

📜 어드민 페이지 관리하기

python manage.py createsuperuser

Admin 페이지에서 데이터 생성하기

카테고리

카테고리 url 작성

카테고리 views API 작성

카테고리 HTML 작성

카테고리 템플릿 요청 작성

드링크

드링크 url 작성

드링크 views API 작성

드링크 HTML 작성

드링크 템플릿 요청 작성

이미지

이미지 url 작성

이미지 views API 작성

이미지 HTML 작성

이미지 템플릿 요청 작성

완성

사진

영상