【Python】Flask+SQLAlchemyで「ひとこと掲示板」を作る

Contents

Flaskの基本的な使い方
Flaskで一言掲示板を作ってみる
pyファイル
HTML側
終わり

Flaskの基本的な使い方

Flaskの基本的な使い方は↓の記事にて解説しています。今回はこれらの要素を組み合わせて「ひとこと掲示板」を作っていきたいと思います。

<シリーズ記事一覧>

Flaskで一言掲示板を作ってみる

今回作るのは↓のような簡単な掲示板アプリケーションです。

Flaskを使って、インターネット掲示板を作るうえでまず必要なのは、書き込んだ内容を保存するデータベース、そして最近の投稿内容のデータをサーバー側からテンプレート側に渡すテンプレートエンジン（jinja2）になります。

<今回の開発環境>

Flask
Anaconda(Python3.6)
jinja2
SQLALCHEMY

flask-sqlalchemyはAnacondaにはデフォルトでインストールされていないので、↓のコマンドをターミナルで打ち込んでインストールしてみてください。

# flask-sqlalchemyのインストール
$pip install flask-sqlalchemy

という訳で、まずは完成したコードを乗せていきます。Webアプリなので、サーバー側のpyファイルとフロント側のhtmlファイルが、必要になり、ディレクトリなどはgitにまとめてアップロードしているので、そちらから確認していただけると幸いです。

Githubのレポジトリ→https://github.com/beginerSE/flask_thread_app

pyファイル

まずは、サーバーサイドのpyファイルがこちら

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

app = Flask(__name__)

SQLALCHEMY_TRACK_MODIFICATIONS = False
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

# SQLAlchemyでデータベースに接続する
db_uri = 'sqlite:///test.db'
app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
db = SQLAlchemy(app)

# SQLAlchemyでデータベースに接続する
db_uri = 'sqlite:///test.db'
app.config['SQLALCHEMY_DATABASE_URI'] = db_uri
db = SQLAlchemy(app)

HTML側

<index.html>

こちらがトップ画面になります、これまでの投稿内容が確認できると共に入力フォームに名前と投稿内容を入力することで、コメントを追加できます。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ひとこと掲示板</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
      <h1>掲示板へようこそ！</h1>
      <form action="/result" method="post">
          <input type="hidden" name="comment_box">
          <label for="comment_">投稿</label>
          <textarea name="comment_data" rows="6" cols="100"></textarea>
          <p></p>
          <label for="name">名前</label>
          <input type="text" name="name">
          <button type="submit">送信する</button>
          </form>
      <h2>投稿一覧</h2>
      {% block body %}
      <form method="post" action="">
        　<table class="table">
              <thead class="thead-dark">
                  <tr>
                      <th>日付</th>
                      <th>名前</th>
                      <th>投稿内容</th>
                      </tr>
                  </thead>
              <tbody>
                  {% for th in lines %}
                  <tr>
                      <td>{{ th.pub_date }}</td>
                      <td>{{ th.name }}</td>
                      <td>{{ th.comment }}</td>
                      </tr>
                  {% endfor %}
                  </tbody>
              </table>
          </form>
      {% endblock %}
     <p></p>
</body> 
</html>

<result.html>

投稿が完了すると、この画面に移動します。戻るボタンをクリックすれば、最初の画面に戻ります。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
    <title>書き込み完了</title>
</head>
<body>
    <h1>コメントを書き込みました</h1>
    <br>
    <form action="/" method="get">
        <button type="submit">戻る</button>
    </form>
</body>
</html>