![見出し画像](https://assets.st-note.com/production/uploads/images/82121473/rectangle_large_type_2_74095801e175610f191babca785db87a.png?width=1200)
Photo by
believe2023
停止していた活動を開始します Flask
あーもっと早く勉強しておけばよかった!
結婚式で掲示板を作成してそこお祝いのメッセージをもらいたいなって思って作ろうとしていたけども、こんなに簡単にできるとは
ということであらためて、作成してみようと思います。
PythonのFlaskを使って掲示板を作りました。
それを簡単にまとめておきます。といっても、Udemyで無料で作っているところがあったのでそれを参考にしました
![](https://assets.st-note.com/img/1657075960418-HZNYpjq09C.png?width=1200)
入力フォームを作成する
投稿ボタンを押したら、データベースに内容を更新する
データベースからメッセージをテーブルに表する
以上!!!
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/