見出し画像
Photo by soeji

Flaskメモ

うさごろう

仮想環境の作成(pipenv)とパッケージのインストール方法

pipenvのインストール
$ pip install pipenv

バージョンの確認
$ pipenv --version

仮想環境の用意
$ pipenv --three

pipfile/pipfile.lockファイルが作成される

仮想環境に入る
$ pipenv shell

仮想環境から抜ける
$ exit

仮想環境にFlaskをインストールする
$ pipenv install Flask

仮想環境にflask-sqlalchemyをインストール
$ pipenv install flask-sqlalchemy

サーバーの起動
$ python server.py

環境変数の設定
$ env:FLASK_APP = "app.py"

ファイル構成

|---application/
   |---app.py                pythonファイル
   |---static/               staticフォルダ
       |---css/              cssフォルダ
           |---main.css      cssファイル
   |---templates/            templatesフォルダ
       |---edit.html         htmlファイル
       |---index.html        htmlファイル
       |---base.html         htmlファイル
   |---todo.sqlite           データベースファイル

app.py

from flask import Flask, render_template, url_for, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import os

app = Flask(__name__)
# データベースの設定(sqliteファイルのパスを指定)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.sqlite'
db = SQLAlchemy(app)


# Todoリストのモデルを定義(db.Modelクラスを継承する必要がある)
class Todo(db.Model):
    # テーブル名を設定(テーブル名はクラス名の複数形が一般的)
    __tablename__ = 'todos'
    # 作成するテーブルのカラムを定義
    # ID
    id = db.Column(db.Integer, primary_key=True)
    # コンテンツ
    content = db.Column(db.String(200), nullable=False)
    # 作成日
    date_created = db.Column(db.DateTime, default=datetime.utcnow)


# ルートにアクセスされたらインデックページを開く
@app.route('/', methods=['POST', 'GET'])
def index():
    # POSTメソッドで要求されたら
    if request.method == 'POST':
        # コンテンツを取得
        task_content = request.form['content']
        # 新しいタスクを作成
        new_task = Todo(content=task_content)

        try:
            # データベースに新しいタスクを登録しトップページにリダイレクト
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            return "フォームの送信中に問題が発生しました"
    # 要求がない場合は、タスクリストを日付順に並べて表示
    else:
        tasks = Todo.query.order_by(Todo.date_created).all()
        return render_template('index.html', tasks=tasks)

# 削除画面
@app.route('/delete/<int:id>')
def delete(id):
    # 削除するタスクのIDを取得
    task_to_delete = Todo.query.get_or_404(id)

    try:
        # 削除対象のタスクをDBから削除しトップページにリダイレクト
        db.session.delete(task_to_delete)
        db.session.commit()
        return redirect('/')
    except:
        return '削除中に問題が発生しました'

# 編集画面
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def update(id):
    # 編集するタスクのIDを取得
    task_to_edit = Todo.query.get_or_404(id)
    # POSTメソッドがきたら編集対象のIDのコンテンツを更新
    if request.method == 'POST':
        task_to_edit.content = request.form['content']

        try:
            db.session.commit()
            return redirect('/')
        except:
            return "タスクの編集中に問題が発生しました"
    else:
        return render_template('edit.html', task=task_to_edit)


if __name__ == "__main__":
    # モデルからテーブルを作成(データベースファイルを最初に作るときだけ実行)
    # db.create_all()
    
    # アプリを起動(データベースファイルを最初に作るときはコメントアウトして実行しない)
    app.run(host="127.0.0.1", port=8080)

base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    {% block head %}{% endblock %}
</head>

<body class="bg-dark">
    {% block body %}{% endblock %}
</body>

</html>

index.html

{% extends 'base.html' %}

{% block head %}
<title>Task Master</title>
{% endblock %}

{% block body %}
<div class="content bg-dark"">
    <h1 class="text-white bg-dark">タスクリスト</h1>

    {% if tasks|length < 1 %}
    <h4 style="text-align: center">タスクはありません</h4>
    {% else %}

    <table class="table table-dark">
        <tr>
            <th>タスク</th>
            <th>登録日</th>
            <th>アクション</th>
        </tr>
        {% for task in tasks %}
        <tr>
            <td>{{ task.content }}</td>
            <td>{{ task.date_created.date() }}</td>
            <td>
                <a class="btn btn-danger" href="/delete/{{task.id}}">削除</a>
                <a class="btn btn-primary" href="/edit/{{task.id}}">編集</a>
            </td>
        </tr>
        {% endfor %}
    </table>
    {% endif %}

    <form action="/" method="post" class="bg-dark text-white">
        <input type="text" name="content" id="content" class="form-control bg-dark text-white"　width="50%">
        <input type="submit" value="新規追加" class="btn btn-success">
    </form>

</div>
{% endblock %}

edit.html

{% extends 'base.html' %}

{% block head %}
<title>タスク編集</title>
{% endblock %}

{% block body %}
<div class="content">
    <h1 class="text-white bg-dark">タスク編集</h1>

    <div class="form">
        <form action="/edit/{{task.id}}" method="post">
            <input type="text" name="content" id="content" value="{{task.content}}" class="form-control bg-dark text-white"> 
            <input type="submit" value="編集する" class="btn btn-success">
        </form>
    </div>

</div>
{% endblock %}

画面

index.html
edit.html

テンプレートのようなものを作成したのでメモ
これがあれば、ブログのようなもの、ホームページみたいなもの作成できるかな

herokuっての使うと公開もできるみたい

おわりっ

この記事が気に入ったらサポートをしてみませんか？