メジャーレンタルサーバエックスサーバーにpythonのマイクロフレームワークFlaskをインストールし、mySQLを操作するサンプルその２です。
今回は、GET・POSTメソッドでパラメータを取得し、会員情報テーブルを追加・更新・削除する具体的なサンプルです。また、アプリケーションの見栄えをよくするためにbootstrapも使っています。
XサーバーでFlaskを運用するには、PHPのようにファイルを放り込んだら良いというものではありませんので、環境の構築のために、SSHでサーバ接続し、諸々の事前が準備が必要です。私の環境構築は、参考になるか分かりませんが、動画にしてあります。
また、前回の記事XサーバーでFlask運用、WEBブラウザからmySQL操作その１select,insert,updateをご確認の上ご覧いただけますと幸甚です。
アプリケーション概要
会員情報テーブルを追加・更新・削除するアプリケーションの概要です。
会員情報の追加
下画像の「追加」をクリックします。
下画像 会員追加フォームが表示されます。名前・年齢を入力し「追加」をクリックします。
下画像のように、会員情報「山田 太郎」が追加されます。
会員情報の更新
下画像の「山田 太郎」右の「更新」をクリックします。
下画像 会員更新フォームが表示されます。名前・年齢を変更し「更新」をクリックします。
下画像のように、会員情報が更新されます。
会員情報の削除
下画像の「山田 次郎」右の「削除」をクリックします。
下画像 会員更新フォームが表示されます。「削除」をクリックします。
下画像のように、会員情報が削除されます。
.htaccess
|
1 2 3 4 5 6 |
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ /test1/index.cgi/$1 [QSA,L] <Files ~ "\.py$"> deny from all </Files> |
index.cgi
|
1 2 3 4 |
#! /home/XサーバのサーバーID/.linuxbrew/bin/python3 from wsgiref.handlers import CGIHandler from index import app CGIHandler().run(app) |
/home/XサーバのサーバーID/.linuxbrew/bin/python3はXサーバ内のpythonの格納されている場所を指しています。
それ以外は、定型文として、そのまま流用できます。
index.cgiの属性は755にする必要があります。
index.py
いよいよpythonファイルです。pythonファイルの全内容です。一行目のrequestは、GET POSTメソッドを使うので必要です。redirectは、SQLを実行後、ルートページに戻るために、redirect処理を使います。mySQL準備するテーブルや基本的な説明は、前回の記事XサーバーでFlask運用、WEBブラウザからmySQL操作その１select,insert,updateをご確認ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
from flask import Flask, render_template, request, redirect import mysql.connector as mydb # コネクションの作成 connector = mydb.connect( host='mysqlXXXXX.xserver.jp', user='xsXXXXX_XXXXXX', password='XXXXXXXXXXX', database='xsXXXXXXX_XXXXXXXXX', charset="utf8" ) app = Flask(__name__) #1全レコードの表示 @app.route("/") def selects(): cursor = connector.cursor() sql = "SELECT `id`, `name`, `age` FROM kaiin_table ORDER BY id" cursor.execute(sql) results = cursor.fetchall() return render_template('kaiin.html', kaiin=results) cursor.close() connector.close() #2追加フォーム @app.route("/insert_form") def insert_form(): title="会員追加" submit_value="追加" form_action="insert_conf" return render_template('form.html', form_action=form_action, submit_value=submit_value, title=title) #3追加の実行 @app.route("/insert_conf", methods=['POST']) def insert_conf(): name = request.form['name'] age = request.form['age'] cursor = connector.cursor() sql = "INSERT INTO `kaiin_table`(`name`, `age`) VALUES ('" + str(name) + "'," + str(age) + ")" cursor.execute(sql) connector.commit() cursor.close() connector.close() return redirect('/test1/') #4削除フォーム @app.route("/delete_form", methods=['GET']) def delete_form(): id = request.args.get('id') title="会員削除" submit_value="削除" form_action="delete_conf" cursor = connector.cursor() sql = "SELECT `id`, `name`, `age` FROM kaiin_table WHERE id=" + format(id) cursor.execute(sql) result = cursor.fetchall() for row in result: name = str(row[1]) age = str(row[2]) return render_template('deleteform.html', form_action=form_action, submit_value=submit_value, title=title, name=name, age=age, id=id) cursor.close() connector.close() #5削除実行 @app.route("/delete_conf", methods=['POST']) def delete_conf(): id = request.form['id'] cursor = connector.cursor() sql = "DELETE FROM `kaiin_table` WHERE id=" + str(id) cursor.execute(sql) connector.commit() cursor.close() connector.close() return redirect('/test1/') #6更新フォーム @app.route("/update_form/<id>") def update_form(id): title="会員更新" submit_value="更新" form_action="update_conf" cursor = connector.cursor() sql = "SELECT `id`, `name`, `age` FROM kaiin_table WHERE id=" + format(id) cursor.execute(sql) result = cursor.fetchall() for row in result: name = str(row[1]) age = str(row[2]) return render_template('form.html', form_action=form_action, submit_value=submit_value, title=title, name=name, age=age, id=id) cursor.close() connector.close() #7更新実行 @app.route("/update_conf", methods=['POST']) def update_conf(): name = request.form['name'] age = request.form['age'] id = request.form['id'] cursor = connector.cursor() sql = "UPDATE `kaiin_table` SET `name`='" + str(name) + "', `age`=" + str(age) + " WHERE id=" + str(id) cursor.execute(sql) connector.commit() cursor.close() connector.close() return redirect('/test1/') if __name__ == "__main__": app.run(host='0.0.0.0') |
index.py全レコードの表示
URLが https://ドメイン/test1 のときの処理です。
index.py #1全レコードの表示 箇所です。kaiin_tableの全レコードを配列に格納し、kaiin.htmlに引数として渡します。
/templatesにkaiin.htmlは配置します。
下がkaiin.htmlの中身です。見栄えをよくするために、CSSテンプレートとしてbootstrapを利用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>会員テーブル</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <h1 style="font-size: 2.0rem;">python,Flask 会員情報</h1> <div style="margin: 1rem;"><a href="/test1/insert_form" class="btn btn-primary">追加</a></div> <div> <table class="table table-striped table-hover" style="max-width: 540px;"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th></th> <th></th> </tr> </thead> <tbody> {% for user in kaiin %} <tr> <td>{{ user[0] }}</td> <td>{{ user[1] }}</td> <td>{{ user[2] }}</td> <td><a href="/test1/update_form/{{ user[0] }}" class="btn btn-success">更新</a></td> <td><a href="/test1/delete_form?id={{ user[0] }}" class="btn btn-danger">削除</a></td> </tr> {% endfor %} <tbody> </table> </div> </div> </body> </html> |
index.py会員情報追加
全レコードの表示ページの「追加」をクリックすると、https://ドメイン/insert_form にページが変わります。
下画像が、URLがhttps://ドメイン/insert_formのときの処理です。
①②③に変数に値を格納し、form.htmlに引数として渡します。
fom.htmlの中身です。/templatesにform.htmlは配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>会員テーブル</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <h1 style="font-size: 2.0rem;">python,Flask {{ title }}</h1> <div style="max-width: 540px;"> <form action="/test1/{{ form_action }}" method="POST"> <div class="form-group"> <label for="exampleFormControlInput1">Name</label> <input type="text" name="name" class="form-control" id="exampleFormControlInput1" placeholder="山田 太郎" value="{{ name }}"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Age</label> <input type="text" name="age" class="form-control" id="exampleFormControlInput1" placeholder="25" value="{{ age }}"> <input type="hidden" name="id" value="{{ id }}"> </div> <input type="submit" value="{{ submit_value }}" class="btn btn-primary"> </form> </div> </div> </body> </html> |
https://ドメイン/insert_formで名前・年齢を入力した後、submitボタンをクリックすると、 https://ドメイン/insert_conf にページ遷移します。
下画像が、URLがhttps://ドメイン/insert_confのときの処理です。
⑤POSTメソッドでパラメータを受け取るための記述です。
⑥⑦パラメータname,ageの値を変数に格納します。
⑧INSERTするSQLを実行した後、redirectでルートにページ遷移します。
index.py会員情報削除
全レコードの表示ページの「削除」をクリックすると、https://ドメイン/delete_form?id=110 にページが変わります。
下画像が、URLがhttps://ドメイン/delete_form?id=110のときの処理です。
②パラメータidの値を編集に格納します。
一件のレコードを取り出すSQLを実行し、変数name,ageに値を格納した後、deleteform.htmlに引数として渡します。
deletefom.htmlの中身です。/templatesにdeletefom.htmlは配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>会員テーブル</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <h1 style="font-size: 2.0rem;">python,Flask {{ title }}</h1> <div style="max-width: 540px;"> <form action="/test1/{{ form_action }}" method="POST"> <div class="form-group"> <label for="exampleFormControlInput1">Name</label> <input type="text" name="name" class="form-control" id="exampleFormControlInput1" placeholder="山田 太郎" value="{{ name }}" readonly> </div> <div class="form-group"> <label for="exampleFormControlInput1">Age</label> <input type="text" name="age" class="form-control" id="exampleFormControlInput1" placeholder="25" value="{{ age }}" readonly> <input type="hidden" name="id" value="{{ id }}"> </div> <input type="submit" value="{{ submit_value }}" class="btn btn-primary"> </form> </div> </div> </body> </html> |
https://ドメイン/delete_formでsubmitボタンをクリックすると、 https://ドメイン/delete_conf にページ遷移します。
下画像が、URLがhttps://ドメイン/delete_confのときの処理です。
④POSTメソッドでパラメータを受け取るための記述です。
⑤パラメータidの値を変数に格納します。
⑥DELETEするSQLを実行した後、redirectでルートディレクトリにページ遷移します。
index.py会員情報更新
全レコードの表示ページの「更新」をクリックすると、https://ドメイン/update_form/110 にページが変わります。
※削除のとき同様 https://ドメイン/update_form?id=110 のようにGETメソッドを利用することも当然できます。
下画像が、URLがhttps://ドメイン/110のときの処理です。FLASKはURLに含まれるデイレクトリ名をパラメータとして取得することができます。
①②デイレクトリ名を変数idに格納します。
③一件のレコードを取り出すSQLを実行し、変数name,ageに値を格納した後、form.htmlに引数として渡します。
https://ドメイン/update_formで名前、年齢を変更入力し、submitボタンをクリックすると、 https://ドメイン/update_conf にページ遷移します。
下画像が、URLがhttps://ドメイン/update_confのときの処理です。
④POSTメソッドでパラメータを受け取るための記述です。
⑤パラメータname,age,idの値を変数に格納します。
⑥UPDATEするSQLを実行した後、redirectでルートディレクトリにページ遷移します。
2020年9月の四連休以降、時間を見つけてpythonというかFlask勉強していますが、とても面白いです！はまっています。
