Python,HTML,CSSの連携

下記コーディングはQiitaの記事を参考にさせていただきました。
-Python(app.py)

#!/usr/bin/python3
# -*- coding: utf-8 -*-
# app.py

from flask import Flask, redirect ,request,render_template

app = Flask(__name__)

@app.route("/check")
def check():
    return render_template('check.html')

@app.route('/',methods=['POST'])
def index():
    my_age = int(request.form["age"])
    my_name = request.form["name"]
    return render_template('index.html',age=my_age,name=my_name)

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

-HTML(check.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>年齢確認</title>
<!--    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" />  -->
    <link rel="stylesheet" type="text/css" href="static/css/style.css" />
</head>
<body>

    <form action="/" method="post">
        <h1>年齢確認</h1>
        <input type="text" name="name" placeholder="名前" required/>
        <input type="number" name="age" placeholder="年齢" required/>
        <button>年齢確認</button>
    </form>

</body>
</html>

-HTML(index.html)

<!DOCTYPE html>  <!-- index.html -->
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>18禁のサイト</title>
<!--        <link rel="stylesheet" type="text/css" href="style.css" />  -->
	<link rel="stylesheet" type="text/css" href="static/css/style-04.css" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
    <h1>射幸心を煽りまくるホームページ</h1>
    {% if age >= 18 %}
    {{name}}さんは18歳以上ですね。
    {% else %}
    {{name}}さんみたいな方はこんなHP見ちゃいけません?
    {% endif %}

    </body>
</html>

-CSS(style.css)

@charset 'utf-8';
body	 {
	background: sandybrown;
	color: darkgreen;
	margin-left: 2m;
	margin-right: 2m;
}

-CSS(style-04.css)

@charset 'utf-8';
body	 {
	background: violet;
	color: darkgreen;
	margin-left: 2m;
	margin-right: 2m;
}

以上

↑人気ブログランキングに参加しています。ポチっと1票を!

Flask構造

Flask構造

– WSL上で実施
– PyCharm上で実施

Flask – static -css    – stylexx.css
                       - xxx.css
                         ・
                         ・
               -images – xxxx.jpg
                       - xx.gif
                         ・
                         ・
               -js     – xxxxxxx.js
                       - yyy.js
                         ・
                         ・

      - templates      – xxxxxx.html
                       - index.html
                         ・
                         ・
       
       ・
       ・
      -demo01.py
      -demoxx.py
       ・
       ・
 ・
 ・
indexShift_JIS.html
indexUTF-8.html
 ・
 ・

(例)
~$ cd flask
   emacs demoxx.py
   python3 demoxx.py

~$ nkf -w < format01S_JIS.py > format01UTF-8.py
~$ sudo mount -t drvfs f: /mnt/usb/
~$ cp -r flask /mnt/usb/

↑人気ブログランキングに参加しています。ポチっと1票を!

demo32.pyのプログラム

demo32のプログラム

– 他の「demoxx.html」プログラムは省略します。
– 後日機会があったら当ブログに載せます。

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo32.py sessin managed & username get
from flask import Flask, redirect, request, render_template, url_for, session

app = Flask(__name__)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo07.html')

@app.route('/program', methods=['GET', 'POST'])
def program():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo03.html')

@app.route('/program1', methods=['GET', 'POST'])
def program1():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo04.html')

@app.route('/program2', methods=['GET', 'POST'])
def program2():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('demo05.html')

@app.route('/param/<parameter>')
def show_user_profile(parameter):
    if 'username' in session:
        html = render_template('demo07.html',name = str(parameter))        
        return html
    return 'You are not logged in. from param processing'

@app.route('/reset', methods=['GET', 'POST'])
def reset():
    session['username'] = 'monkey'
    return render_template('check31.html')

@app.route('/')
def func():
    if 'username' in session:
        html = render_template('demo07.html',name = str(session['username']))        
        return html
    return 'You are not logged in'

@app.route('/check', methods=['GET', 'POST'])
def check():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('func'))
    return render_template('check31.html')

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

    if (request.form['attr'] == 'need'):

        success = False
        name = request.form["username"]
        passwd = request.form["pass"]
        att1 = request.form['attr']
        my_message = "keyword処理は?"
    else:
        con1 = request.arg.get('_ControlID')
        pg1 = int(request.arg.get('_PageID'))
        act1 = request.arg.get('_ActionID')
        flg1 = request.arg.get('getFlg')
        html = render_template('demo07.html', con = con1, pg = str(pg1), act = act1, flg = flg1)        
        return html

    user_data = [{"id":"カリフラワー", "pass":"hanakyabetsu"},{"id":"西行法師", "pass":"masako"},{"id":"monkey", "pass":"kayochan"},{"id":"program1", "pass":"pass1"}]

    for i in range(0, 10):
        if user_data[i]["id"] == name:
            if user_data[i]["pass"] == passwd:
                success = True
                session['username'] = name
                return render_template('demo07.html',suc=success,name=name,pas=passwd,msg=my_message,att=att1)
            else:
                continue
        else:
            continue
    success = False
    return render_template('demo07.html',suc=success,name=name,pas=passwd,msg=my_message,att=att1)

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('func'))

app.secret_key = 'B0Qp89i/2xY F~XHH!jnVVLWX/,%QR'

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

– 以上セッション処理プログラムでした。

↑人気ブログランキングに参加しています。ポチっと1票を!

Atom-WSL-PyCharm相関図その2

190625

Atom-WSL-PyCharm相関図その2

2019/06/25
Atom
① 印刷できない。
② Flaskがない。
③ データベースがない。
④ Moduleの管理が難しい。
⑤ Pythonの各属性を色表示できる。
⑥ JupyterのModuleを引き込むことができる。
⑦ Hydrogenでstep by stepのデバッグができる。(◎)
⑧ Windows特にExplorerが生で使える。
⑨ Demo Programが多数存在する。(◎)
⑩ 「elif」「else」がエラーになるバグがある。
⑪ Pycharmとモジュールの共存できる。

WSL(Windows Subsystem for Linux)
① 印刷できない。
② データベースがない。
③ Jupyterのmoduleを引き込むことができない。
④ Step by stepのデバッグができない。
⑤ Windowsとのやり取りがUSB経由である。
⑥ Pythonの各属性を色表示できる。(◎)
⑦ Flask環境下でデバッグできる。(◎)
⑧ Linuxのコマンドがじかに実行できる。(◎)
⑨ Moduleの管理が比較的しやすい。

PyCharm
① Step by stepのデバッグができない。
② 有料でないとSQLite3(DB)が使えない。
③ 慣れていない。
④ Linuxのコマンドが使えない。
⑤ Jupyter-notebookとの連携がとりにくい。
⑥ 有料でデータベースが使える。(◎)
⑦ 印刷ができる。(◎)
⑧ Atom下のモジュールと共存できる。(◎)
⑨ インタラクティブシェルで実行できる。「Python console」(◎)
⑩ Atomより貧弱であるが属性の色表示がされる。
⑪ パッケージの追加が簡単。
⑫Djangoが使える。

1. sinカーブなど: Atom Hydrogen(Shift + Enter)・PyCharm(Run) 可
2. Image: Atom Hydrogen・PyCharm 可
3. turtle: Atom(Alt + R)・PyCharm 可
4. pandas,numpy: Atom Hydrogen 可
5. flask demoxx: WSL(Ubuntu)・PyCharm 可
6. 日本語表示: Atom Hydrogen・PyCharm 可
7.debugging機能:PyCharm容易・Atom Hydrogen 可

以上

↑人気ブログランキングに参加しています。よろしければ1票を!

PyCharmでのdemo32.pyの実施

解決するまでの間、開発は「PyCharm」で行うことにした。

PyCharmでのdemo32.pyの実施

前回の記事で「Atom」のpython Programの中で「elif」をコーディングすると文法エラーになってしまうと書いた。
これはまだ未解決である。
解決するまでの間、開発は「PyCharm」で行うことにした。
それで、PyCharm環境下でdemo32.pyを走らせたのがアイキャッチの画像である。
下の画像は「PyCharm」での各ライブラリのヒエラルキーである。

PyCharm下でのFlask関連のヒエラルキー


↑人気ブログランキングに参加しています。よろしければ1票を!

Pycharmでのdemoプログラム

190623Pycharmでのdemoプログラム

① Atom下での「elif」の文法エラーによってWSL環境下でのPythonProgramの開発をまず考えた。
② これだとemacsなどの使用を考えなくてはならない。
③ また、モジュールの転送も面倒である。
④ そこでPycharmでの開発を考えた。
⑤ テストプログラムの実行を試みた。
⑥ 普通のプログラムはうまくいったが「Flask」を使用したプログラムはエラーとなった。
⑦ そこでPycharm環境下へ「Flask」のインストールを考えた。
⑧ 途中からのインストールは「ctrl」 + 「alt」+ ‘s’を行ってモジュールを指定すればよいことが分かった。
⑨ こうして「Flask」をPycharm環境下にインストールした。
⑩ まず「demo09.py」を実行した。うまくいった。
⑪ 次に「demo32.py」(login)など「Flask」のインポートを行うプログラムを実行した。
⑫ ⑪はうまくいった。
⑬ 今後はPycharm環境でAI以外の開発を行い特に「SQL」関係を開発することにした。
⑭ Pythonの「elif」が「Atom」でなぜエラーになるのかを解決したい。
⑮ 「Atom」「WSL」「Pycharm」をうまく使って、AI関連の開発につなげたい。

以上

↑人気ブログランキングに参加しています。よろしければ1票を!

メニューの追加(Python,lions,NHK超AI入門,Linux,WSL,レジストリ,システムジェネレーションetc.)

メニューの追加(Python,lions,NHK超AI入門,Linux,WSL,レジストリ,システムジェネレーション,Atom,Emacs,markdown,Python,Flask)

「野生の証明」のメニューに「Lions」、「展覧会」、「食事」、「NHK超AI入門」、「Linux」、「WSL」(Windows Subsystem for Linux)、「レジストリ」、「システムジェネレーション」、「Atom」、「Emacs」、「markdown」、「Python」を追加した。
アイキャッチ画像は「Linux」、「WSL」のパスを示している。
①「活動」→「趣味」→「lions」
①-1「活動」→「趣味」→「展覧会」
①-2「活動」→「趣味」→「食事」
②「コンピューター」→「ソフトウェア」→「Deep Learning」→「NHK超AI入門」
③「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Linux」(→「Flask」)
④「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Windows10」→「WSL」
⑤「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Windows10」→「レジストリ」
⑥「コンピューター」→「ソフトウェア」→「システムジェネレーション」
⑦「コンピューター」→「ソフトウェア」→「Editor」→「Atom」
⑧「コンピューター」→「ソフトウェア」→「Editor」→「Emacs」
⑨「コンピューター」→「ソフトウェア」→「Editor」→「markdown」
⑩「コンピューター」→「ソフトウェア」→「言語」→「その他の言語」→「Python(Object指向)」→「Python」

↑人気ブログランキングに参加しています。よろしければ1票を!

セッションの管理

SQLが手に入らないのでセッションの管理コードだけでも埋め込もうと、丸2日間かかって仕上げた。

セッションの管理

SQLが手に入らないのでセッションの管理コードだけでも埋め込もうと、丸2日間かかって仕上げた。
一番苦労したのは「Method Not Allowed」になってしまうことだった。
トラッパーやトレーサじみたコードを入れてアイソレートしていった。
テストした項目は
①login成功・失敗
②logout
③ルートへのジャンプ
④login後の他HTMLへのジャンプ。
⑤demo28.pyからのパラメータの引継ぎ
⑥login中の各振る舞い
⑦logout中のふるまい
など多岐にわたってテストした。

/login

login成功で’/’入力

データの引き渡し

logoutの状態で「/」を入力

demo28.py関連プログラム

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo28.py sessin managed
from flask import Flask, redirect, request, render_template, url_for, session

app = Flask(__name__)

@app.route(‘/login’, methods=[‘GET’, ‘POST’])
def login():
・・if request.method == ‘POST’:
・・・・session[‘username’] = request.form[‘username’]
・・・・return redirect(url_for(‘index’))
・・return render_template(‘check28.html’)

@app.route(‘/reset’, methods=[‘GET’, ‘POST’])
def reset():
・・session[‘username’] = ‘zako’
・・return render_template(‘check28.html’)

@app.route(‘/’)
def func():
・・if ‘username’ in session:
・・・・html = render_template(‘demo03.html’,name = str(session[‘username’]))
・・・・return html
・・return ‘You are not logged in’

@app.route(‘/check’, methods=[‘GET’, ‘POST’])
def check():
・・if request.method == ‘POST’:
・・・・session[‘username’] = request.form[‘username’]
・・・・return redirect(url_for(‘func’))
・・return render_template(‘check28.html’)

@app.route(‘/’,methods=[‘POST’])
def index():

・・success = False
・・name = request.form[“username”]
・・passwd = request.form[“pass”]
・・my_message = “「セッション処理のプログラムはどうでしたか?」”

・・user_data = [{“id”:”zako”, “pass”:”week_pass”},{“id”:”ikarochan”, “pass”:”kawaii”},{“id”:”yoshiko”, “pass”:”ok”},{“\
\
id”:”miku”, “pass”:”hatsune”}]

・・for i in range(0, 4):
・・・・if user_data[i][“id”] == name:
・・・・・・if user_data[i][“pass”] == passwd:
・・・・・・・・success = True
・・・・・・・・session[‘username’] = name
・・・・・・・・return render_template(‘index28.html’,suc=success,name=name,pas=passwd,msg=my_message)
・・・・・・else:
・・・・・・・・continue
・・・・else:
・・・・・・continue
・・success = False
・・return render_template(‘index28.html’,suc=success,name=name,pas=passwd,msg=my_message)

@app.route(‘/logout’)
def logout():
・・session.pop(‘username’, None)
・・return redirect(url_for(‘func’))

app.secret_key = ‘A0Zr98j/3yX R~XHH!jmN]LWX/,?RT’

if __name__ == ‘__main__’:
・・app.run(debug=True)
****************************************
<!DOCTYPE html> <!– check28.html –>
<html lang=”ja”>
<head>
・・<meta charset=”UTF-8″>
・・<title>Loginフォーム</title>
<!– <link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’style.css’)}}” /> –>
・・<link rel=”stylesheet” type=”text/css” href=”static/css/style.css” />
</head>
<body>

・・<form action=”/” method=”post”>
・・・・<h1>Login</h1>
・・・・<input type=”text” name=”username” placeholder=”Username” required/>
・・・・<input type=”password” name=”pass” placeholder=”Password” required/>
・・・・<input type=submit value=Login>
・・</form>

</body>
</html>
****************************************
<!DOCTYPE html> <!– index28.html –>
<html lang=”ja”>
・・<head>
・・・・<meta charset=”UTF-8″>
・・・・<title>Login</title>
<!– <link rel=”stylesheet” type=”text/css” href=”style.css” /> –>
・・・・<link rel=”stylesheet” type=”text/css” href=”static/css/style-07.css” />
・・・・<!–&#91;if lt IE 9&#93;>
・・・・<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
・・・・<!&#91;endif&#93;–>
・・</head>
・・<body>
・・・<h1>Login終了</h1>
・・・{% if suc %}
・・・<h1>Login OK</h1>
・・・<h1>Username is {{ name }}</h1>
・・・{% else %}
・・・Invalid Username or Password. Debug {{ name }},{{ pas }}
・・・{% endif %}
・・・</br>
・・・demo28.pyからのメッセージは:</br>
・・・{{ msg }}です。

・・</body>
</html>
****************************************
<!DOCTYPE html>
<html lang=”ja”>
<head>
・・<meta charset=”UTF-8″>
・・<link rel=”stylesheet” href=”/static/css/style-03.css”>
・・<title>Deep Learning second TEST</title>
</head>
<body>
・・<title>Hello from Flask</title>
・・{% if name %}
・・・<h2>{{ name }}さん!テンプレートからのHello Worldだよ!</h2>
・・{% else %}
・・・<h2>テンプレートからのHello Worldだよ!</h2>
・・{% endif %}

・・<p>
・・・<img src=”/static/images/plant_3.jpg” alt=”pic03″>
・・</p>

・・<script src=”/static/js/main.js”></script>
</body>
</html>
****************************************
(function(){
・・’use strict’;

・・alert(‘アラートですよ〜。’);

})();
****************************************

↑人気ブログランキングに参加しています。よろしければ1票を!