몽고디비- 6일차/ bootstrap 활용해서 bookstore 업데이트

2021. 1. 21. 09:15

getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

- 4.6이 정식으로 나온 최신 버전이라서 사용했음

getbootstrap.com/docs/4.6/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

- CDN 방식

인터넷에서 연결

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

- Separate copy

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

- Search 에서 검색가능

-button 검색하면

 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-light">Light</button>
 <button type="button" class="btn btn-dark">Dark</button>
 <button type="button" class="btn btn-link">Link</button>

- html 파일 실행하면

<!DOCTYPE html>
<html>
    <head>
        <title>
            제목
        </title>
        <meta charset="utf-8">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    </head>
    <body>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-link">Link</button>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

    </body>
</html>

-navar 검색

-html 파일 실행해보면

<!DOCTYPE html>
<html>
    <head>
        <title>
            제목
        </title>
        <meta charset="utf-8">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <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 dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
        </title>

    </head>
    <body>
        <ul> <!--unordered list --> 
            <li>
                사과
            </li>
            <li>
                배
            </li>
            <li>
                포도
            </li>
        </ul>
        <ol> <!--ordered list, 순서가 있음 --> 
            <li>
                사과
            </li>
            <li>
                배
            </li>
            <li>
                포도
            </li>
        </ol>
    </body>
</html>

- jumbotron : 주로 제목

- form

- grid: 화면 조정, 길이 줄이기

- index.html, book_add.html, book_list.html -> 수정, layout.html(추가)

index.html

{% extends "layout.html" %}


{% block content %}
<div class="jumbotron">
  <h1 class="display-4">MongoDB 프로젝트</h1>
  <p class="lead">
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
    <ul>
        <li>
            flask 기반의 MongoDB 관리 시스템 입니다.
        </li>
        <li>
            flask 기반의 MongoDB 관리 시스템 입니다.
        </li>
    </ul>
</div>
{% endblock %}

book_add.html

{% extends "layout.html" %}

{% block content %}
<form action="/book_add_process" method="post" enctype="multipart/form-data">
<form>
  <div class="form-group col col-lg-8">
    <label for="title">제 목</label>
    <input type="text" class="form-control" id="title" name="title" placeholder="서적 제목 입력...">
  </div>
  <div class="form-group col col-lg-8">
    <label for="file">표 지</label>
    <input type="file" class="form-control" id="file" name="file" placeholder="표지 사진 선택...">
  </div>
  <div class="form-group col col-lg-8">
    <label for="author">저 자</label>
    <input type="text" class="form-control" id="author" name="author" placeholder="저자명 입력...">
  </div>
  <div class="form-group col col-lg-8">
    <label for="author">price</label>
    <input type="text" class="form-control" id="price" name="price" placeholder="가격 입력...">
  </div>
  <div class="form-group col col-lg-8">
    <label for="isbn">ISBN</label>
    <input type="text" class="form-control" id="isbn" name="isbn" placeholder="isbn 입력...">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-outline-secondary">등 록</button>
  </div>
</form>
</form>
{% endblock %}

book_list.html

{% extends "layout.html" %}

{% block content %}
    <h3>서적 목록</h3>
    <div style="width: 1000px">
        <div style="width: 1000px; text-align: right">
        {{ total_count }}건 검색됨
        </div>
        <table class="table table-bordered table-hover">
            <tr>
                <td>_id</td>
                <td>제목</td>
                <td>표지</td>
                <td>저자</td>
                <td>가격</td>
                <td>ISBN</td>
                <td>등록일자</td>

                <td>
                </td>
            </tr>
            {% for book in books %}
            <tr>
                <td>{{ book._id }}</td>
                <td><a href="/book_details/{{ book._id }}">{{ book.title }}</a></td>
                {% if book.encoded_data != null %}
                    <td><img width="80px" src="data:image/png;base64,{{ book.encoded_data.decode('utf-8') }}"></td>
                {% else %}
                    <td></td>
                {% endif %}
                <td>{{ book.author }}</td>
                <td>{{ book.price }}</td>
                <td>{{ book.isbn }}</td>
                <td>{{ book.created_date }}</td>
                <td>
                    <a href="/book_edit/{{ book._id }}"><input type="button" value="수정" class="btn btn-outline-secondary"></a>
                    <input type="button" value="삭제">
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}

layout.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
    </title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        body {
            font-family: '맑은고딕', 'Margun Gothic';
        }
        .top {
            width: 100%;
            height: 40px;
            background-image: url("../static/image/background-image.jpg");
        }

    </style>
</head>
<body>
<div class="top">

</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">mongodb 프로젝트</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          서적 관리
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="/book_add">등록</a>
          <a class="dropdown-item" href="/book_list">전체 조회</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<div class="container" style="margin-top: 40px">
    {% block content %}
    <!-- 여기는 콘텐츠가 replace -->
    {% endblock %}
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>

- 글꼴 바꾸기

'mongodb' 카테고리의 다른 글

몽고디비 7일차 -atlas (0)	2021.01.22
몽고디비- 홈페이지 ip:포트번호 로 접속하기 (0)	2021.01.21
몽고디비 5일차- book list (0)	2021.01.20
파이참 프로페셔널 버전 (0)	2021.01.19
몽고디비 3일차- django, 장고 (0)	2021.01.18

.

몽고디비- 6일차/ bootstrap 활용해서 bookstore 업데이트

'mongodb' 카테고리의 다른 글

+ Recent posts

티스토리툴바