QPython WebApp/選択したラジオボタンの値を表示するWebAppを作ってみる
作るもの
３つのラジオボタンからどれかを選択し送信ボタンを押すと、何が選択されたかを表示するだけのWebアプリをQPythonで作ります。
「決定」ボタンを押すと、押された物の値を表示
後々の目標としては、こんな感じでメインメニューのボタンを用意し、選択によってそれぞれのPythonスクリプトを呼び出して色んな作業をさせるようにしたいのですが、まずは簡単なところから。
動作環境
作るファイル(3つ)
作成手順
QPythonのスタート画面で「エディタ」をタップ。
画面右上の「+」ボタン→「WebApp」をタップ。
「新規プロジェクト」のプロジェクト名で名前をつけて「確認」ボタン。
プロジェクトはフォルダとして「qpython/projects3/プロジェクト名」で保存されます。
画面には「main.py」という名前で「#--coding:utf8;--」から始まる15行のPythonスクリプトが作られます。
このまま実行すると、Webアプリが起動し「Hello World!」と表示されると思います。
いま作られたファイル「main.py」を次のように改造しました。
Pythonスクリプト main.py
改造後のmain.py
#-*-coding:utf8;-*-
#qpy:3
#qpy:webapp
#qpy://localhost:8080/
"""
This is a sample for qpython webapp
"""
from bottle import route, run ,template ,request
import os
import sys, codecs
os.chdir(os.path.dirname(os.path.abspath(__file__)))
sys.stdout = codecs.getwriter("utf-8")(sys.stdout)
@route('/')
def post():
return template("radio_button")
@route("/show" ,method="POST")
def show():
contact = request.forms.contact
return template("show",contact=contact)
run(host='localhost', port=8080, debug=True , reloader=True )
一旦説明
os.chdirの文は理由が分かりませんがファイルを読まなかったのでつけました。カレントディレクトリをこのファイルのあるフォルダに移動させています。
その下のsys.stdout=の文は文字化けしたのでつけました。
def post()の関数でhtmlテンプレートの「radio_button.html」を表示しています。
def show()の関数で、どのラジオボタンが選択されたかを表示させます。
contact=request.forms.contactで、選択されたボタンの値を取得しています。
htmlテンプレート作成
Pythonスクリプトは上で作りましたので、ラジオボタン設置用と、その値を表示用のhtmlテンプレートファイルを作っていきます。
そしたらこれから、新規にhtmlテンプレートファイルを追加していきます。
ファイルは先ほどのmain.pyと同じプロジェクトフォルダに保存します。 (qpython/projects3/プロジェクト名)
ラジオボタン設置用htmlテンプレート radio_button.html
エディタ画面の右上「+」ボタン→「ファイル」でファイルの新規作成。
そこに以下のhtmlを書きました
<!DOCTYPE html>
<html lang="ja">
<head>
<title>メインメニュー</title>
</head>
<meta name="viewport" content="width=device-width">
<body>
<form method="post" action="/show" accept-charset="utf-8">
<p>メニューを選んでね！</p>
<div>
<input type="radio" id="contactChoice1" name="contact" value="メニュー1" checked>
<label for="contactChoice1">メニュー1</label> <br>
<input type="radio" id="contactChoice2" name="contact" value="メニュー2">
<label for="contactChoice2">メニュー2</label> <br>
<input type="radio" id="contactChoice3" name="contact" value="メニュー3">
<label for="contactChoice3">メニュー3</label> <br>
<br>
</div>
<div>
<button type="submit" document.charset='UTF-8'>決定</button>
</div>
</form>
</body>
</html>
書き終えたらフロッピーディスク💾のボタンで保存しますが、
保存先は繰り返しになりますが 「qpython/projects3/プロジェクト名のフォルダ」、
このテンプレートのファイル名を「radio_button.html」で保存。
ボタン選択結果の表示用htmlテンプレート show.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>表示</title>
</head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<body>
<h1>{{contact}}</h1>
</body>
</html>
<h1>にcontactという変数を表示。
保存は上と同じ手順で「qpython/projects3/プロジェクト名のフォルダ」にファイル名「show.html」で保存。
実行
作成予定のファイルを３つ全部作りましたので実行します。
実行するには、「エディタ」から今作ったPythonスクリプトmain.pyを開いて実行ボタン(右向き三角のボタン)を押すか、
またはスタート画面の最上部のアイコンを押して、作ったプロジェクト名のアイコンを押すと実行されます。
以上です。
