見出し画像

停止していた活動を開始します Flask

あーもっと早く勉強しておけばよかった!
結婚式で掲示板を作成してそこお祝いのメッセージをもらいたいなって思って作ろうとしていたけども、こんなに簡単にできるとは

ということであらためて、作成してみようと思います。

PythonのFlaskを使って掲示板を作りました。
それを簡単にまとめておきます。といっても、Udemyで無料で作っているところがあったのでそれを参考にしました

画面

入力フォームを作成する
投稿ボタンを押したら、データベースに内容を更新する
データベースからメッセージをテーブルに表する

以上!!!
Python
SQLAlchemy

次にやりたいこと
・ローカル環境でしか動かないので、webアプリとして配布する
・テーブルの内容を、編集、削除できるようにする
・投稿されたらメールアドレスにありがとうございましたメッセージを送信する

なんとなく形にはなったのでよかった
server.py、index.html

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__, template_folder='templates')
# app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/bbs.db'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///bbs.db'
db = SQLAlchemy(app)

class Article(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    post = db.Column(db.String(300), nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username
    
@app.route('/', methods=["GET", "POST"])
def bbs():
    
    if request.method == "POST":
        name = request.form['name']
        email = request.form['email']
        post = request.form['message']        
        
        # サンプルデータを作成する
        article = Article(username=name, email=email, post=post)

        # サンプルデータをDBに挿入する
        db.session.add(article)
        db.session.commit()
            
    title = '結婚式の掲示板をつくる(Flask)'
    articles = Article.query.all()
    return render_template('index.html', title=title, articles=articlens)

if __name__ == '__main__':
    app.run(debug=True)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>掲示板を作成するよ</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    
    </head>
    <body>

        <div class="container mt-3">

            <h2>
                {{ title }}
            </h2>

    
            <!-- 自分自身に飛ぶときはactionは未指定 -->
            <form method="POST">
                <div class="mb-3">
                    <label for="exampleFormControlInput2" class="form-label">お名前</label>
                    <input name="name" type="text" class="form-control" id="exampleFormControlInput2">
                </div>

                <div class="mb-3">
                    <label for="exampleFormControlInput1" class="form-label">メールアドレス</label>
                    <input name="email" type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">投稿する内容</label>
                    <textarea name="message" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>            
                <button type="submit" class="btn btn-primary">投稿</button>                
            </form>        
        
            <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">名前</th>
                    <th scope="col">メールアドレス</th>
                    <th scope="col">メッセージ</th>
                  </tr>
                </thead>
                <tbody>
                    {% for i in articles %}
                        <tr>
                            <th scope="row"> {{ i.id }} </th>
                            <td> {{ i.username }} </td>
                            <td> {{ i.email }} </td>
                            <td> {{ i.post }} </td>
                        </tr>
                    {% endfor %}                
                </tbody>
              </table>        
    
        </div>
        
    </body>
</html>

ローカル環境ではこうやるとできるみたい
https://setsunaru.com/programming/python/flaskserver/

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