장고 - 북마크 프로젝트_템플릿 생성

1. template 파일 생성하기

views.py에서 정의한 클래스형 뷰에 따라, 연동할 템플릿 파일들을 생성한다.
단, 템플릿 파일 이름은 앞서 작성한 template 이름의 접미사와 일치하도록 아래와 같이 생성해준다.

경로 : bookmark_project > bookmark > templates > bookmark

bookmark_create.html
bookmark_delete.html
bookmark_detail.html
bookmark_list.html
bookmark_update.html

2. Bootstrap 설치 및 적용하기

CSS를 보다 쉽고 간편하게 적용하고 싶다면,
HTML 프레임워크인 Bootstrap을 적용해보자.

getbootstrap.com 접속
메인페이지에서 Get started 클릭
CSS 부분의 코드와 JS 부분의 코드 복사
CSS 부분의 코드는 적용할 html 코드에서 이전 줄에 붙여넣기
JS 부분의 코드는 적용할 html 코드에서 이전 줄에 붙여넣기

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

3. base.html 생성하기

HEADER, FOOTER와 같이 모든 html 파일에 공통적으로 적용되는 html 파일을 생성해준다.

base.html 생성 및 코드 작성
경로 : bookmark_project > layout > base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> {% block title %} {% endblock %} </title>
    {% block extra_css %}
    {% endblock %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#" style="font-size:18px; font-weight:bold">조누스의 걸음마 블로그</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container">
    {% block content %}
    {% endblock %}
    </div>
    {% block extra_script %}
    {% endblock %}
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

4. 각 template html파일에 base.html 적용하기

base.html을 적용하고 싶은 모든 template html 파일에 아래와 같이 코드를 작성한다.

{% extends 'base.html' %}
{% block title %}
<!--파일 제목 작성 -->
{% endblock %}

{% block content %}
<!--코드 구현 -->
{% endblock %}

5. template html파일 코드 작성하기

1. BookmarkCreate(CreateView) 클래스에서 연동한 bookmark_create.html 파일 코드

경로 : bookmark_project > bookmark > templates > bookmark > bookmark_create.html

{% extends 'base.html' %}

{% block title %}
Bookmark Create
{% endblock %}

{% block content %}
<div class="row">
    <div class="col"></div>
    <div class="col-12 col-xl-8">
        <form action="" method="post">
            {% csrf_token %}  <!-- 보안관련해서 써주는 것 -->
            <div style = "margin-top: 20px" class="alert alert-warning" role="alert">사이트 이름과 URL을 정확히 입력해주세요!</div>
                {{form.as_p}}
                <input type="submit" value="Create" style="width:200px">
        </form>
    </div>
    <div class="col"></div>
</div>
{% endblock %}

2. BookmarkUpdate(UpdateView) 클래스에서 연동한 bookmark_update.html 파일 코드

경로 : bookmark_project > bookmark > templates > bookmark > bookmark_update.html

{% extends 'base.html' %}

{% block title %}
Bookmark Update
{% endblock %}

{% block content %}
<form action="" method="post">
    {% csrf_token %}
    {{form.as_p}}
    <input type="submit" value="Create">
</form>
{% endblock %}

3. BookmarkDelete(DeleteView) 클래스에서 연동한 bookmark_delete.html 파일 코드

경로 : bookmark_project > bookmark > templates > bookmark > bookmark_delete.html

{% extends 'base.html' %}

{% block title %}
Bookmark Delete
{% endblock %}

{% block content %}
<div class="row">
    <div class="col"></div>
    <div class="col-12 col-md-8 col-xl-12">
        <form action="" method="post">
            {% csrf_token %}
            <input type="submit" value="Delete Ok">
        </form>
    </div>
    <div class="col"></div>
</div>
{% endblock %}

4. BookmarkDetail(DetailView) 클래스에서 연동한 bookmark_detail.html 파일 코드

경로 : bookmark_project > bookmark > templates > bookmark > bookmark_detail.html

{% extends 'base.html' %}

{% block title %}
Bookmark Detail
{% endblock %}

{% block content %}
    <div class="card" style="width: 18rem; margin-top: 50px;">
      <div class="card-body">
        <h5 class="card-title">{{object.site_name}}</h5>
          <h6 class="card-subtitle mb-2 text-muted"><a href="{{object.ur}}">{{object.url}}</a></h6>
        <p class="card-text">{{object.contents}}</p>
        <a href="{% url 'bookmark:update' object.id %}" class="card-link btn btn-outline-warning">수정</a>
        <a href="{% url 'bookmark:delete' object.id %}" class="card-link btn btn-outline-danger">삭제</a>
      </div>
    </div>
{% endblock %}

5. BookmarkList(ListView) 클래스에서 연동한 bookmark_list.html 파일 코드

경로 : bookmark_project > bookmark > templates > bookmark > bookmark_list.html

{% extends 'base.html' %}

{% block title %}
Bookmark List
{% endblock %}

{% block content %}
<div class="row">
    <div class="col"></div>
    <div class="col-12 col-xl-8 col-md-8">
        <div style="margin: 20px 0 20px 0">
            <a href="{% url 'bookmark:create' %}" class="btn btn-primary">Add Bookmark</a><br>
        </div>
        {# bookmark 목록 출력하기 #}
        <table class="table">
            <thead>
                <tr>
                    <th scope="col" style="text-align:middle;">순</th>
                    <th scope="col">사이트명</th>
                    <th scope="col">링크</th>
                    <th scope="col">수정</th>
                    <th scope="col">삭제</th>
                </tr>
            </thead>
            <tbody>
                {% for object in object_list %}
                <tr>
                    <td style="vertical-align: middle;"> {{object.id}} </td>
                    <td style="vertical-align: middle;">
                        <a href="{% url 'bookmark:detail' object.id %}">{{object.site_name}}</a><br>
                    </td>
                    <td><a href="{{object.url}}" target="_blank" class="card-link btn btn-link">Link</a></td>
                    <td><a href="{% url 'bookmark:update' object.id %}" class="card-link btn btn-warning">Modify</a></td>
                    <td><a href="{% url 'bookmark:delete' object.id %}" class="card-link btn btn-danger">Delete</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="col"></div>
</div>
{% endblock %}
<!-- object.id 쓰는 이유 : bookmark/urls.py 에서 detail/<converter> 부분 받아오겠다라는 의미 -->
<!--//
C - 객체 생성
R - 단일 객체 -> object
U - 단일 객체 -> object
D - 단일 객체 -> object
L - 복수 객체 -> object_list
//-->

Posted 2019-05-06

tags:

{ Django }

{ bookmark }

{ basic }