C
코담
코드에 세상을 담다

💡 AI 인사이트

🤖 AI가 여기에 결과를 출력합니다...

댓글 커뮤니티

쿠팡이벤트

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

검색

    로딩 중이에요... 🐣

    [코담] 웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트

    13 앱 만들기 (3부) | ✅ 편저: 코담 운영자

    Django 튜토리얼 #13 - 앱 만들기 (3부)

    🔗 소스

    1. 강의 목표

    • layout.html 파일을 기준으로 모든 페이지에 공통된 UI를 적용
    • Django 템플릿 상속을 통해 반복되는 HTML 구조 제거
    • Bootstrap 4.5.2 스타일과 반응형 네비게이션 바 구성

    2. 템플릿 상속 구조

    Django 템플릿 시스템은 base 템플릿을 만들고, 각 하위 페이지에서 extends를 통해 상속받는 방식으로 반복 코드 작성을 줄일 수 있습니다.

    기준 템플릿: layout.html

    • 모든 페이지가 공통으로 사용하는 header, nav, footer 포함
    • 각 페이지는 block title과 block content를 통해 필요한 내용만 채워 넣음
    {% block title %} 페이지 제목 {% endblock %}
...
{% block content %}
<!-- 각 페이지의 콘텐츠 영역 -->
{% endblock %}

    3. layout.html 주요 구성 요소 (invApp/templates/invApp/layout.html)

    전체 페이지에 공통으로 적용되는 템플릿으로, Bootstrap 기반의 상단 네비게이션과 본문 구조를 포함합니다. 모든 하위 템플릿은 이 파일을 상속받습니다.

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> {% block title %} 재고 관리 앱 {% endblock %} </title>
    {% comment %} https://www.jsdelivr.com/package/npm/bootstrap {% endcomment %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            padding-top: 56px;
        }
        .navbar{
            background-color: #343a40;
        }
        .navbar-brand, .nav-link{
            color: #fff !important;
        }
        .container{
            margin-top: 20px;
        }
        .table th, .table td{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">  <!-- Bootstrap 클래스로 고정 상단 네비게이션 바 생성 -->
        <a class="navbar-brand" href="{% url 'home' %}">재고 관리 앱</a>  <!-- 브랜드 이름을 홈 페이지 링크로 연결 (Django URL 태그 사용) -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="네비게이션 토글 버튼">
            <span class="navbar-toggler-icon"></span>  <!-- 작은 화면에서 네비게이션 바 토글 버튼 -->
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">  <!-- 접히는 네비게이션 바 내용 -->
            <ul class="navbar-nav">  <!-- 네비게이션 항목 컨테이너 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'product_create' %}">상품 추가</a>  <!-- 상품 등록 페이지 링크 -->
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'product_list' %}">상품 목록 보기</a>  <!-- 상품 목록 페이지 링크 -->
                </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        {% block content %}{% endblock  %}  <!-- 각 페이지별 내용이 들어가는 블록 -->
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

    4. 각 템플릿 페이지 구성 요약 (invApp/templates/invApp/*.html)

    아래 템플릿 파일들은 layout.html을 상속하여 각 기능에 맞는 콘텐츠만 구성합니다.

    ✅ home.html (메인 홈 화면)

    {% extends "invApp/layout.html" %}
{% block title %}홈{% endblock %}
{% block content %}
<div class="jumbotron text-center">
  <h1 class="display-4">재고 관리 시스템에 오신 것을 환영합니다</h1>
  <p class="lead">제품을 쉽고 효율적으로 관리하세요.</p>
  <hr class="my-4">
  <p>네비게이션을 사용하여 상품을 추가, 조회, 수정, 삭제할 수 있습니다.</p>
  <a href="{% url 'product_list' %}" class="btn btn-primary btn-lg" role="button">상품 목록 보기</a>
</div>
{% endblock %}

    ✅ product_form.html (상품 등록 및 수정 화면)

    {% extends "invApp/layout.html" %}
{% block title %}상품 등록{% endblock %}
{% block content %}
<h1 class="text-center">상품 등록</h1>
<form method="POST" class="jumbotron">
  {% csrf_token %}
  {{ form }}
  <button class="btn btn-success btn-block" type="submit">상품 저장</button>
</form>
{% endblock %}

    ✅ product_list.html (전체 상품 목록 화면)

    {% extends "invApp/layout.html" %}
{% block title %}상품 목록{% endblock %}
{% block content %}
<h1 class="text-center">상품 목록</h1>
<table class="table table-bordered table-striped text-center">
  <thead class="thead-dark">
    <tr>
      <th>ID</th><th>이름</th><th>SKU</th><th>가격</th><th>수량</th><th>공급자</th><th>작업</th>
    </tr>
  </thead>
  <tbody>
    {% for product in products %}
    <tr>
      <td>{{ product.product_id }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.sku }}</td>
      <td>{{ product.price }}</td>
      <td>{{ product.quantity }}</td>
      <td>{{ product.supplier }}</td>
      <td>
        <a href="{% url 'product_update' product.product_id %}" class="btn btn-warning">수정</a>
        <a href="{% url 'product_delete' product.product_id %}" class="btn btn-danger">삭제</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}

    ✅ product_confirm_delete.html (삭제 확인 화면)

    {% extends "invApp/layout.html" %}
{% block title %}상품 삭제{% endblock %}
{% block content %}
<h1 class="text-center">정말로 이 상품을 삭제하시겠습니까?</h1>
<form method="POST" class="text-center">
  {% csrf_token %}
  <button type="submit" class="btn btn-danger">예</button>
  <a href="{% url 'product_list' %}" class="btn btn-secondary">취소</a>
</form>
{% endblock %}

    5. 마무리 및 확장 아이디어

    • layout.html을 중심으로 템플릿을 재사용할 수 있는 구조 완성
    • Bootstrap을 통해 반응형 UI 구현 완료
    • 향후 기능 확장: 검색, 필터링, 로그인 기능 추가 가능

    전체 프로젝트 마무리 축하

    이로써 Django로 만든 재고 관리 시스템 구축이 완료되었습니다.
    이제 여러분의 프로젝트에 기능을 추가하거나 새로운 앱을 만들어보세요.
    수고하셨습니다 👏

    ← 이전: 12 앱 만들기 (2부)
    다음 →: 01 Django 관리자 템플릿
    TOP
    preload preload