Flask를 이용한 데이터베이스 애플리케이션 제작 Part2

13913 단어 FlaskSQLBootstrap초보자웹 애플리케이션

환경



macOS Catalina 10.15.1

애플리케이션 구현 내용



Flask의 사용법을 습득하기 위해 3개의 파트로 나누었다.

Part1(전고)


  • 웹 브라우저 보기
  • Templates 폴더의 html 파일과 연결

    • Part2(본고)


  • 데이터베이스 SQLite와 연결
  • Bootstrap을 사용한 화면 표시

    • Part3(다음 글)


  • POST 메소드를 이용한 신규 사용자 등록

    • Part2의 폴더 구성



    Part1과 마찬가지로 모든 코드는 run.py에 의해 실행됩니다.
    run.py는 Part1과 동일한 코드를 사용했습니다.
    root
|--codes
| |--view.py
| |--templates
| | |--index2.html
|--models.py
|--run.py
|--test.db

    데이터베이스 SQLite와의 연결



    view.py는 아래와 같습니다.
    view.py 외부의 데이터베이스에 등록되어 있는 값을 model.py 의 User 클래스로 정의하는 것으로 연결하고 있다.

    view.py
    # SQLAlchemy はデータベース(DB)を object のように扱えるライブラリである。
# 今回は DB との連結を担当する。
# models.py の User クラスで、どのような object として扱うかを決める。
from flask import Flask,render_template
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker 
from models import User

app = Flask(__name__)

# test.db (DB) と連結するための object である engine を作り、DB を session に代入する。
engine = create_engine('sqlite:///test.db')
session = sessionmaker(bind=engine)()

# /index2 へアクセスがあった場合に、 index2.html を返す。
@app.route("/index2")

# index2 関数を定義する。
# sessionn の全データを、User クラスで定義された object に代入し、users として返す。
# この users を html 内の users に代入する。

def index2():
    users = session.query(User).all()
    return render_template('index2.html', users=users)

if __name__ == "__main__":
    app.run(debug=True)

    SGLite로 데이터베이스 구축



    데이터베이스 관리 시스템 sqlite에서 다음 test.db를 작성하십시오. sqlite는 MAC에 기본적으로 설치되어 있습니다.


    id
    이름
    age


    0
    요시자키
    27

    1
    키카가쿠
    2


    먼저 다음 명령을 실행합니다. test.db는 DB의 이름입니다.

    터미널
    sqlite3 test.db

    그러면 sqlite> 라는 prefix 가 부여된 대화 모드로 전환된다. 여기서는 DB 안에 테이블을 만들 수 있다.
    우선 id, name, age 라는 3 개의 column 로 이루어지는 table 를 만든다.

    터미널
    create table users(id integer primary key autoincrement, name text, age integer);

    그리고 id = 0, id = 1 의 요소를 차례로 삽입해 간다.

    터미널
    insert into users(name, age) values('Yoshizaki', 27);
insert into users(name, age) values('Kikagaku', 2);

    select 명령으로 DB를 확인하십시오.

    터미널
    select * from users;

    그 결과

    터미널
    1|Yoshizaki|27
2|Kikagaku|2

    라고 출력되면, 올바르게 DB는 만들어지고 있다. 대화 모드에서는 .exit 에서 빠진다.

    데이터베이스 모델 정의



    데이터베이스(DB)의 내용을 어떠한 object로 정의할 것인가는 다음의 model.py 로 결정한다. 이것은 SQLAlchemy 라이브러리에서도 가능합니다.

    model.py
    from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy import Column, Integer, String
Base = declarative_base()
class User(Base):
    __tablename__='users'

    id = Column(Integer, primary_key = True)
    name = Column(String)
    age = Column(Integer)

    SQLite의 primary key에 id를 채용했기 때문에, 모델에서도 마찬가지로 지정하고 있다.

    브라우저에 표시



    index2.html은 다음과 같습니다. (나중에 편집한다.)

    index2.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <hl>Flask チュートリアル</hl>
    {% for user in users %}
        <p>名前: {{user.name}}</p>
    {% endfor %}
</body>
</html>

    Part1 과 같이 h tp://127.0.0.1:5000/그리고 x2 에 액세스 해 다음이 표시되고 있으면 성공이다.
    Flask チュートリアル
名前: Yoshizaki

名前: Kikagaku

    Bootstrap을 사용하여 편집



    CSS (cascading style sheets) 프레임 워크 인 Bootstrap을 사용하여 index2.html을 다음과 같이 다시 씁니다.
    Bootstrap은 자주 사용되는 스타일이 미리 정의되어 편리합니다. 코드는 여기 에서 인용했다.

    index2.html
    d<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Bootstrap -->
    <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">
    <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>
</head>
<body>
    <div class="container">
        <div class="row">
            <hl>Flask チュートリアル</hl>
            <table class="table table-striped table-hover">
                <thread>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                    </tr>
                </thread>
                <tbody>
                    {% for user in users %}
                        <tr>
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.age}}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

    마찬가지로 htp://127.0.0.1:5000/그리고 x2에 액세스하여 다음이 표시되면 성공합니다.



    참고



    데이터 수집부터 웹 앱 개발까지 실천으로 배우는 기계 학습 활용 가이드 의 chapter 3-4-1 및 chapter 3-5
    Xojo에서 원격 개발 (Raspberry Pi/웹 앱)
    RaspberryPi-NFC 방패 웹 앱

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage