Flask로 웹개발: #5 레이아웃(2) - index와 product

이번 포스팅에서는 이전 포스팅에서 했던 html을 마저 작성해 보겠습니다.

이전 포스팅에서와 마찬가지로 html과 css를 모르신다면 복사만 하시고 적당히 눈으로만 보시면 되겠습니다. 이런저런 게 있구나 정도 생각하시면 되고 이후에 기회가 닿는다면 html과 css에 대해서 공부하시면 됩니다.

1. 프로젝트 구조

앞서 작성하신 프로젝트 구조입니다. 이 중에 오늘은 templates/index.html과 templates/pruduct.html을 작성해 보겠습니다.

flask_ecommerce/
├── app.py
├── create-product.py
├── env.yaml
├── README.md
├── static
│   └── css
│       └── styles.css
└── templates
    ├── base.html
    ├── cart.html
    ├── index.html
    └── product.html

2. HTML 파일 생성

index.html (위치: templates/index.html)

이전에 만들었던 base.html을 기반으로 하여 index.html을 만듭니다. index.html은 웹 페이지에 접속했을 때 가장 처음 만나는 페이지로 웹 페이지의 첫인상을 주는 가장 중요한 요소입니다.

{% extends 'base.html' %}

{% block content %}
<h1>Products</h1>
<ul>
    {% for product in products %}
    <li>
        <a href="{{ url_for('product', product_id=product.id) }}">{{ product.name }}</a> - ${{ product.price }}
    </li>
    {% endfor %}
</ul>
{% endblock %}

 

위 코드에 대해 간단하게 설명하겠습니다.

• {% extends 'base.html' %}: 템플릿 확장. base.html 파일을 확장하고 있음을 나타내는 코드입니다.
• {% block content %} ... {% endblock %}: 이 블록 안에 있는 내용이 base.html의 {% block content %}{% endblock %} 블록에 삽입됩니다. content 블록은 각 페이지마다 고유한 콘텐츠를 정의하는 데 사용됩니다.
• {% for product in products %}: products 리스트를 반복(iterate)하여 각 product 객체에 대해 아래 내용을 실행합니다. products는 뷰 함수에서 템플릿으로 전달된 변수입니다.
• <a>{{ product.name }}</a>: 제품의 이름을 링크로 표시합니다. 링크를 클릭하면 해당 제품의 상세 페이지로 이동합니다.
• ${{ product.price }}: 제품의 가격을 표시합니다.

pruduct.html (위치: templates/pruduct.html)

Product에 관한 html입니다. 상품의 정보를 DB에서 읽어서 화면에 출력하기 위한 일종의 틀입니다.

{% extends 'base.html' %}

{% block content %}
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
<p>${{ product.price }}</p>
<a href="{{ url_for('add_to_cart', product_id=product.id) }}">Add to Cart</a>
{% endblock %}

 

위 코드에 대해 간단하게 설명하겠습니다.

• {% extends 'base.html' %}: 템플릿 확장. base.html 파일을 확장하고 있음을 나타내는 코드입니다.
• {% block content %} ... {% endblock %}: 이 블록 안에 있는 내용이 base.html의 {% block content %}{% endblock %} 블록에 삽입됩니다. content 블록은 각 페이지마다 고유한 콘텐츠를 정의하는 데 사용됩니다.
• {{ product.name }}: 제품의 이름을 표시합니다.
• {{ product.description }}: 제품의 설명을 표시합니다.
• {{ product.price }}: 제품의 가격을 표시합니다.
• <a>Add to Cart</a>: 이 링크는 "Add to Cart" 버튼을 생성합니다. 사용자가 이 링크를 클릭하면 제품이 장바구니에 추가됩니다.

결론

이번 포스팅에서는 Flask 쇼핑몰 프로젝트의 남은 HTML을 구현했습니다. 이번 프로젝트는 파이썬에서 Flask를 사용하여 어떤 기능들을 만들어 보는 것에 초점을 맞추었습니다. 따라서 이전에도 말씀드린 것처럼 html과 css를 통해 만든 레이아웃이 너무 단순하고 예쁘지 않을 수 있습니다. html과 css에 대해서는 다음 기회에 배우고 Python과 Flask에 집중해 보시면 좋겠습니다.

 

감사합니다!