[python] Flask - 게시판 만들기 (2) - 부트스트랩과 웹표준

-. 이전 포스팅에 이어서 작성함.

4. 부트스트랩

-. 부트스트랩은 웹 ui를 꾸밀 때 유용한 여러 스크립트들을 모아둔 라이브러리 이다.

-. 대강 개념만 알고, 실제로 써본적이 없어서 이번에도 역시 위키독스 따라해본다.

1) 부트스트랩 설치

-. 설치라고 하기도 뭐한데, 부트스트랩에서 제공하는 css 파일 압축을 풀어, bootstrap.min.css 파일을 플라스크의 리소스 폴더에 넣으면 설치 끝. 압축 푼 폴더 (~dist)는 넣을 필요 없다.

-. 혹은 바로 CDN 링크를 입력해서 써도 된다. 나는 편의 상 파일 자체를 다운받아서 쓰기로 했다.

2) html temlate 수정

-. 부트스트랩 css를 적용한 형태로 수정한다.

#board_list.html
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<div class="container my-3">
    <table class="table">
        <thead>
        <tr class="thead-dark">
            <th>번호</th>
            <th>제목</th>
            <th>작성자ID</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        {% if article_list %}
        {% for article in article_list %}
        <tr>
            <td>{{ loop.index }}</td>

            <td>
                <a href="/board/article/{{ article.articleID }}/">{{ article.articleSubject }}</a>
            </td>
            <td>{{ article.userid }}</td>
            <td>{{ article.articleCreateTime }}</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">질문이 없습니다.</td>
        </tr>
        {% endif %}
        </tbody>
    </table>
</div>

#article.html
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<div class="container my-3">
    <h2 class="border-bottom py-2">{{ article.articleSubject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ article.articleContent }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge badge-light p-2">
                    작성자: {{ article.userid }}
                </div>
                <div class="badge badge-light p-2">
                    {{ article.articleCreateTime }}
                </div>
            </div>
        </div>
    </div>
    <h5 class="border-bottom my-3 py-2">{{ article.comment_set|length }}개의 답변이 있습니다.</h5>
    {% for comment in article.comment_set %}
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;">{{ comment.commentContent }}</div>
            <div class="d-flex justify-content-end">
                <div class="badge badge-light p-2">
                    작성자: {{ comment.userid }}
                </div>
                <div class="badge badge-light p-2">
                    {{ comment.commentCreateTime }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    <form action="{{ url_for('board.create', article_id = article.articleID) }}" method="post" class="my-3">
        <div class="form-group">
            <textarea name="commentContent" id="commentContent" rows="15" class="form-control"></textarea>
            <textarea name="userid" id="userid" rows="1" class="form-control"></textarea>
        </div>
        <input type="submit" value="댓글달기" class="btn btn-primary">
    </form>
</div>

3) 출력 확인

-. 게시글 리스트 출력 확인

-. 각 글 컨텐츠+댓글 출력 확인

5. html template 상속과 웹표준 도입

-. jinja에 대한 포스팅에서 웹페이지 표준과 html template 상속에 대해 간략하게 썼다. 이제 게시판에 위 template 상속을 이용한 웹표준 구조 적용을 해보려 한다.

1) html 수정

-. 간단하게 base.html 파일을 추가하고, board_list.html 파일만 수정하면 된다.

#base.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
    <!-- custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Hello, world!</title>
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2021 by <a href="http://https://givemethesocks.tistory.com/">DongtanDobby</a>.
        {% endblock %}
    </div>
</body>
</html>

#board_list.html
{% extends "base.html" %}
{% block content %}
<div class="container my-3">
    <table class="table">
        <thead>
        <tr class="thead-dark">
            <th>번호</th>
            <th>제목</th>
            <th>작성자ID</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        {% if article_list %}
        {% for article in article_list %}
        <tr>
            <td>{{ loop.index }}</td>

            <td>
                <a href="/board/article/{{ article.articleID }}/">{{ article.articleSubject }}</a>
            </td>
            <td>{{ article.userid }}</td>
            <td>{{ article.articleCreateTime }}</td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="3">질문이 없습니다.</td>
        </tr>
        {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}

2) 출력

728x90

저작자표시

'python > Flask' 카테고리의 다른 글

[python] Flask - 게시판 만들기 (2) (0)	2021.02.22
[python] Flask - Navigation 추가 (0)	2021.02.21
[python] Flask - 게시판 만들기 (1) (2)	2021.02.21
[python] Flask - ORM 사용 SQLite 연동 - 파이썬은 날먹 (0)	2021.02.21
[python] Flask - 모듈화, Blueprint 청사진 (0)	2021.02.20