第3回　PythonAnywhereでWebサイトを作ろう・・・チュートリアル編 Step2（１）

では、続いてStep2に進みます。今回は、コメントを入力するための画面を作成し、その画面のテキストボックスに入力した、コメントが画面に表示されるようにしていきます。

Step 2 　コメントをリストを使って保存するだけのサイトを作る。
　まずは、コメントを入力するためのHTMLファイルを作成します。

ダッシュボードの「Files」から、リンクをたどって、ディレクトリ「mysit」に入ります。
画面左のテキストボックスに「templates」と入力し、テキストボックス右の「New directory」ボタンを押して、新規のディレクトリを作成します。
作成された「templates」のリンクをクリックして「templates」配下に移動します。

f:id:a229315:20181201173928p:plain

画面右のテクストボックスに「main_page.html」というファイル名を入力し、右の「New file」というボタンをクリックすると、以下のようなテキストエディタが表示されます。

f:id:a229315:20181201221418p:plain

そのエディタに以下のHTMLコードを貼り付けます。
エディタ上部の緑の「Save」ボタンを押します。

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

        <title>My scratchboard page</title>
    </head>

    <body>
        <nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">My scratchpad</a>
            </div>
          </div>
        </nav>

        <div class="container">

            {% for comment in comments %}
                <div class="row">
                    {{ comment }}
                </div>
            {% endfor %}

            <div class="row">
                <form action="." method="POST">
                    <textarea class="form-control" name="contents" placeholder="Enter a comment"></textarea>
                    <input type="submit" class="btn btn-success" value="Post comment">
                </form>
            </div>

        </div>

    </body>
</html>

次にディレクトリ「mysite」に戻って「flask_app.py」ファイルを開きます。
以下のコードを入力して、エディタ上部の緑の「Save」ボタンを押して、セーブできたら右側の青のリロードボタンを押します。

from flask import Flask, redirect, render_template, request, url_for

app = Flask(__name__)
app.config["DEBUG"] = True

comments = []

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("main_page.html", comments=comments)

    comments.append(request.form["contents"])
    return redirect(url_for('index'))

ダッシュボードの「Web」を開き「Configurartion for」の下に「Sesshu.pythonanywhere.com」というリンクをクリックして以下のような画面が表示されたら成功です。

　何かテキストにコメントを書いて、緑の「Post comment」ボタンを押しましょう。
　入力したテキストが、テキストボックの上部に表示されると思います。
f:id:a229315:20181201223056p:plain

　このままにしておくと、いろいろいたずらされる可能性があるので、このサイトをパスワードで保護しましょう。

ダッシュボードの「Web」を開き、したの方までスクロールします。赤字で「Delete」ボタンがある上辺りに、パスワードを入力する欄がありますので、PasswordをEnabledにして、ユーザネームとパスワードを入力して青のチェックブタンを押すと設定されます。
画面上部にスクロールしてトップ付近に緑色のリロードボタンがあるのでそれを押します。

その後、作ったサイトをリロードするとユーザ名とパスワード入力を求められるので、先程設定したものを入力しましょう。
以上がStep2です。お疲れ様でした。ただ、コードの解説を何も書いていないので、Step3に進む前に、次回コードの主要部分の解説をしていきます。
　

Tech & Works関係のブログ

Tech & Works関係のブログです。

第3回　PythonAnywhereでWebサイトを作ろう・・・チュートリアル編 Step2（１）