【第4回】FlaskでWebアプリ作成練習。フォームを送信してみょう(^^)/

物理・プログラミング・Python、Web制作・自己啓発

2020年3月27日 21:51

こんにちは(@t_kun_kamakiri)

前回↓に引き続き、「Flask」の勉強を進めていきたいと思います。

本日は、
フォームタグを使って、「テキスト入力」「チェックボックス」「ラジオボタン」「セレクト（選択）」の値をFlaskを使って表示させる方法を紹介します。

前回作成したコードを少し編集します。

☟参考書はこちら

ファイル構成

ファイル構成は前回同様、このようにしておきます。

-run.py
-templates
|- index.html
-static
|- style.css

では、まずは全体のコードからお見せします。

全体のコード

index.html

<!doctype html>
<html lang="en">
<title>Flask入門</title>
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   
   <!--  CSS -->
   <!-- <link rel="stylesheet" href="../static/style.css"> -->
   <link rel="stylesheet" href="{{url_for('static',filename = 'style.css')}}">

   <title>{{ti}}</title>
 </head>

 <body>
   <header>
       <div class="navbar navbar-dark bg-primary box-shadow">
           <div class="container d-flex justify-content-between">
               <a href="/" class="navbar-brand d-flex align-items-center">
                   <h1><strong>{{message}}</strong></h1>
               </a>
           </div>
       </div>
   </header>
   <div class="content container">
       <h2>値を出力してみよう↓</h2>
       <p>名前は？：{{ values.name }}です。</p>
       <p>年齢は？：{{ values.age }}です。</p>
   </div>

   <p>{{data}}</p>

   <form method="post" action="/">
     <div>
       <input type="text" name="kamakiri">
     </div>
     
     <div>
       <input type="checkbox" name="check" id="ck">
       <label for="ck">チェックしましょう</label>
     </div>

     <div>
       <input type="radio" name="radio" id="r1", value="A">
       <label for="r1">ボタン1</label>
     </div>
     <div>
       <input type="radio" name="radio" id="r2" value="B">
       <label for="r2">ボタン2</label>
     </div>
     <div>
       <input type="radio" name="radio" id="r3" value="C">
       <label for="r3">ボタン3</label>
     </div>
     <div>
       <select name="list_data" multiple>
         <option>力学</option>
         <option>熱力学</option>
         <option>電磁気学</option>
         <option>統計力学</option>
         <option>量子力学</option>
         <option>相対性理論</option>
       </select>
     </div>
     <div>
       <input type="submit" value="送信する">
     </div>
   </form>
   

   <div>
     
   </div>

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
</html>

run.py

from flask import Flask, render_template, url_for, request
app = Flask(__name__)

@app.route('/',methods=['GET'])
def index():
   values = {"name": "カマキリ", "age" :100}
   return render_template('index.html', \
       values=values,\
       title = "Flask入門",\
       message = 'Flask入門へようこそ！',)

@app.route('/', methods=['POST'])
def form():
   values = {"name": "カマキリ", "age" :100}
   name_kamakiri = request.form['kamakiri']
   ck = request.form.get('check')
   r = request.form.get('radio')
   list_datas = request.form.getlist('list_data')

   
   return render_template('index.html', \
       values=values,\
       title = "Flask入門",\
       message = '%sさん、こんにちは！ Flask入門へようこそ！'% name_kamakiri,\
       data = [ck, r, list_datas])

if __name__ == '__main__':
   app.run()

今回編集したファイルは「index.html」と「run.py」です。

ブラウザ上でどのように表示されるか確認しましょう。

コマンドプロンプトを立ち上げて「run.py」を実行します。

そしてhttp://127.0.0.1:5000/にアクセスします。

そうすると↓こんな感じで表示されると思います。

●テキストには「カマキリ」と入力
●チェックボタンにチェックを入れる
●ラジオボタンは「ボタン２」を選択
●セレクトでは「力学、熱力学、統計力学」を選択

そして「送信する」を押してみましょう。

そうすると、以下のようにチェックボタンの上に、

['on', 'B', ['力学','熱力学','統計力学']]

が出力されていれば成功です。

次に今回修正した部分の解説をします。

./templates/index.htmlを修正

htmlファイル内でフォームタグを使ってフォームを送信できるようにします。

<p>{{data}}</p>

   <form method="post" action="/">
     <div>
       <input type="text" name="kamakiri">
     </div>
     
     <div>
       <input type="checkbox" name="check" id="ck">
       <label for="ck">チェックしましょう</label>
     </div>

     <div>
       <input type="radio" name="radio" id="r1", value="A">
       <label for="r1">ボタン1</label>
     </div>
     <div>
       <input type="radio" name="radio" id="r2" value="B">
       <label for="r2">ボタン2</label>
     </div>
     <div>
       <input type="radio" name="radio" id="r3" value="C">
       <label for="r3">ボタン3</label>
     </div>
     <div>
       <select name="list_data" multiple>
         <option>力学</option>
         <option>熱力学</option>
         <option>電磁気学</option>
         <option>統計力学</option>
         <option>量子力学</option>
         <option>相対性理論</option>
       </select>
     </div>
     <div>
       <input type="submit" value="送信する">
     </div>
   </form>

これを追加します。

run.pyには以下を追加します。

フォームから変数を引き受けるためのライブラリをインポートします。

from flask import Flask, render_template, url_for, request

それが、「flaskのライブラリの中のrequest」です。

requestを以下のように使います。

@app.route('/', methods=['POST'])
def form():
   values = {"name": "カマキリ", "age" :100}
   name_kamakiri = request.form['kamakiri']
   ck = request.form.get('check')
   r = request.form.get('radio')
   list_datas = request.form.getlist('list_data')

index.htmlでの変数がrun.pyの変数に引き渡されているのがわかると思います。

index.htmlのinputタグの中の「name」に変数を指定しており、その変数をrun.pyが拾っているというつながりです。

今回は、「'/'」にアクセスがあったときにGETリクエストとPOSTリクエストを送るように@app.routeの引数に設定しています。

@app.route('/',methods=['GET'])

@app.route('/', methods=['POST'])

この違いを超ざっくり言うと、「POST」リクエストは一回限りの表示をさせるときに使います。

↓こんな感じでチェック入れたり、ボタンを選択したり、複数選択したものを送信した後

示される表示・・・・・が↓これですが、

これって一回限りの表示ですよね。

もっと詳しい解説はこちらに譲りましょう(笑)

簡単ですが今回は以上です(^^)/

引き続きFlaskの勉強を続けます！

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

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