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

17864 단어 초보자데이터베이스Flask웹 애플리케이션

환경



macOS Catalina 10.15.1

애플리케이션 구현 내용



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

Part1 (이전 문서)


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

    • Part2 (이전)


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

    • Part3(본고)


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

    • Part3의 폴더 구성



    Part1 , Part2 과 같이, 모든 코드는 run.py 에 의해 실행된다.
    run.py는 Part1과 동일한 것을 사용하고 model.py는 Part2와 동일한 것을 사용했습니다.
    root
|--codes
| |--view.py
| |--templates
| | |--database.html
| | |--index3.html
|--models.py
|--run.py
|--test.db

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



    아래는 view.py입니다.

    view.py
    from flask import Flask,render_template, request, url_for, redirect
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker 
from models import User

app = Flask(__name__)

engine = create_engine('sqlite:///test.db')
session = sessionmaker(bind=engine)()

# /index3 へアクセスがあった場合に、index3.html を返す。
# ここで DB の新規ユーザー登録が可能。
# index3 で受けたリクエストは /register に POST メソッドで submit される。
@app.route("/index3", methods=['GET'])
def index3():
    return render_template('index3.html')

# index3.html からのリクエストを、User クラスで定義された型に従って /database に返す。
# POST メソッドによりリクエストは暗号化されているため、/register にはアクセスできない。
@app.route("/register", methods=['POST'])
def register():
    name = request.form['name']
    age = int(request.form['age'])
    new_user = User(name=name, age=age)
    session.add(new_user)
    session.commit()
    return redirect(url_for('database'))

# /database へアクセスがあった場合に、DB 画面を表示させる。新規ユーザーを次々と更新できる。
@app.route("/database", methods=['GET'])
def database():
    users = session.query(User).all()
    return render_template('database.html', users=users)

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

    index3.html은 다음과 같습니다. 입력 데이터를/register 에 submit 하고 있다.

    index3.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>
    <!-- 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">
            <div class="col-md-6 col-md-offset-3">
                <hl>データの入力</hl>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form name="signin" action="./register" method="POST">
                    <input type="text" name="name" class="form-control" placeholder="Name" reqired>
                    <input type="text" name="age" class="form-control" placeholder="Age" reqired>
                    <button id="btn" class="btn btn-ig btn-primary btn-block" type="submit">Register</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

    database.html은 다음과 같습니다.

    database.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>
    <!-- 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>
            <p><a href="/index3">ユーザー登録画面へ戻る</p>
        </div>
    </div>
</body>
</html>

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


    새 사용자를 등록하면 htp://127.0.0.1:5000이 표시됩니다.


    참고



    참고 : 데이터 수집부터 웹 앱 개발까지 실천으로 배우는 기계 학습 활용 가이드 의 chapter 3-5
    OMC로 Oracle Database 모니터링 ②
    Veritas NetBackup 어플라이언스 제품으로 오라클 데이터 보호

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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