login,logout,user処理プログラムの関連

login,logout,user処理プログラムの関連

demo29.pyでログイン・ログアウト処理をする。

chech29.htmlでform(入力フォーム)処理をする。

index29.htmlでloginの結果を表示する。

login成功で5000/で(‘/’)を挿入するとdemo06.htmlが呼び出される。

demo29.py関連図、check29.html、index29.html、demo06.html関連図

↑人気ブログランキングに参加しています。よろしければ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票を!

☎登録フォーム

登録フォームのプログラムセットです。demo24.py、index24.html、check24.htmlからなります。「・」はスペース2文字分です。

登録フォームのプログラムセットです。

demo24.py、index24.html、check24.htmlからなります。

「・」はスペース2文字分です。

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo24.py
from flask import Flask, redirect ,request,render_template

app = Flask(__name__)

@app.route(“/check”)
def check():
return render_template(‘check24.html’)

@app.route(‘/’,methods=[‘POST’])
def index():
・・my_age = int(request.form[“age”])
・・my_name = request.form[“name”]
・・my_email = request.form[“eml”]
・・my_message = “本日は晴天なり。”
・・return render_template(‘index24.html’,age=my_age,name=my_name,eml=my_email,msg=my_message)

if __name__ == ‘__main__’:
・・app.run(debug=True)
****************************************
<!DOCTYPE html> <!– index24.html –>
<html lang=”ja”>
・・<head>
・・・・<meta charset=”UTF-8″>
・・・・<title>登録フォーム</title>
<!– <link rel=”stylesheet” type=”text/css” href=”style.css” /> –>
・・・・<link rel=”stylesheet” type=”text/css” href=”static/css/style-06.css” />
・・・・<!–&#91;if lt IE 9&#93;>
・・・・<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
・・・・<!&#91;endif&#93;–>
・・</head>
・・<body>
・・<h1>登録完了</h1>
あなたの名前は:{{name}}です。</br>
あなたの年齢は:{{age}}才です。</br>
あなたのE-mailアドレスは:{{eml}}です。</br>
<h1>で登録しました。</h1>
demo24.pyからのメッセージは:{{msg}}です。
・・</body>
</html>
****************************************
<!DOCTYPE html> <!– check24.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/>
・・・・<input type=”email” name=”eml” placeholder=”メールアドレス” size=”30″ maxlength=”40″ required/>
・・・・<button>同意する</button>
・・</form>

</body>
</html>
****************************************
@charset ‘utf-8’; /* style-06.css */
body・・{
・・・・background: silver;
・・・・color: blue;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************

登録入力画面

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

年齢チェックのプログラム

インデントができないので我慢してほしい。これで画像の処理が行われている。

年齢チェックのプログラム

インデントができないので我慢してほしい。
これで画像の処理が行われている。
loginの完成形が下記のリンク先でupした参照してほしい。
neverjpのぶらり日記
 

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

from flask import Flask, redirect ,request,render_template

app = Flask(__name__)

@app.route(“/check”)
def check():
・・return render_template(‘check23.html’)

@app.route(‘/’,methods=[‘POST’])
def index():
・・my_age = int(request.form[“age”])
・・my_name = request.form[“name”]
・・return render_template(‘index23.html’,age=my_age,name=my_name)

if __name__ == ‘__main__’:
・・app.run(debug=True)
****************************************
<!DOCTYPE html> <!– index23.html –>
<html lang=”ja”>
・・<head>
・・・・<meta charset=”UTF-8″>
・・・・<title>20禁のサイト</title>
<!– <link rel=”stylesheet” type=”text/css” href=”style.css” /> –>
・・・・<link rel=”stylesheet” type=”text/css” href=”static/css/style-05.css” />
・・・・<!–&#91;if lt IE 9&#93;>
・・・・<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<!&#91;endif&#93;–>
・・</head>
・・<body>
<h2>Barry Manilow international funclubの資格審査</h2>
・・{% if age >= 20 %}
・・・・Barry命の{{name}}さんは20歳以上なんですね。</br>
・・・・資格審査 pass
・・{% else %}
・・{{name}}さんみたいな未成人はこんなサイト見ちゃダメですよ?
・・{% endif %}

・・</body>
</html>
****************************************
<!DOCTYPE html><!– check23.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>Entry</h1>
・・・・<input type=”text” name=”name” placeholder=”名前” required/>
・・・・<input type=”number” name=”age” placeholder=”年齢” required/>
・・・・<button>年齢確認</button>
・・</form>

</body>
</html>
****************************************
@charset ‘utf-8’; /* <style-05.css> */
body {
・・・・background: plum;
・・・・color: firebrick;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************
@charset ‘utf-8’; /* <style.css> */
body {
・・・・background: sandybrown;
・・・・color: darkgreen;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************

データを入力しているところ

20歳以上の場合

20歳未満の入力

20歳未満の表示

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

Emacsのオペレーション

昨日勉強したEmacsでCSSモジュールを編集してみた。

Emacsのオペレーション

昨日勉強したEmacsでCSSモジュールを編集してみた。
アイキャッチ画像はバッファのリストを見ているところです。
ESC ESC ESCで抜け出せます。
Vimで編集していたころより圧倒的に扱いやすい。
それに機能が豊富だ。
これでエディティングが捗ることだろう。

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

emacsの操作一覧表

カーソルキー、「BackSpace」キー、「DEL」キーが使えるからである。それにほかのソースを多画面で編集できるし、「Search」もできるからである。

emacsの操作一覧表

ここまでPython,HTML,CSS,JSなどの編集には「Vim」を使ってきた。だがモードの切り替えは気を使うしオペミスもあった。そこで「emacs」を今後使うことにした。カーソルキー、「BackSpace」キー、「DEL」キーが使えるからである。それにほかのソースを多画面で編集できるし、「Search」もできるからである。そこで「emacsチュートリアル」からキー操作の部分を抜き出し「コマンド一覧」にしたので参照していただきたい。
2018/12/07
C-<文字>:Ctrlキーを押したまま、<文字>キーを押します
M-<文字>:Altキーを押したまま、<文字>キーを押します
Emacsを終了するにはC-x C-cをタイプします
C-v:次の画面を見る
M-v:前の画面に戻る
C-l:画面を書き直す、カーソルのある行が画面の中央に来る
(p:previous, n:next, f:forward, b:backward)
C-p:前の行へ(↑)
C-n:次の行へ(↓)
C-f:次の文字(→)
C-b:前の文字(←)
“Delback>”:back spaceキー(delete)
C-d:DELキー(delete)
M-f:一単語先へ
M-b:一単語前へ
C-a:行頭へ
C-e:行末へ
M-a:文頭へ
M-e:文末へ
M-<:ファイルの先頭へ M->:ファイルの末尾へ
C-u:数値引数、続いて繰り返し回数、実行したいコマンド
C-g:Emacsを安全に止める
使用不可コマンド:yesの時スペースキー:実行、noの時:nキー
C-x 1:ウィンドウを一つにする
C-u 8 *:********(*を8個入力)
“Del-back>”:カーソル直前の文字を削除(delete)
C-d:カーソルのある文字を削除(delete)
M-“Del-back>”:カーソルの直前の単語を消去(kill)
M-d:カーソルの後ろにある単語を消去(kill)
C-k:カーソル位置から行末まで消去(kill)
M-k:カーソルから文末まで消去(kill)
C-SPCとC-w:最初と最後(直前まで)を指定するとその区間が消去されます(kill)
C-y:消去した文章を復活する操作(yanking)killしたものが再入されます
M-y:さらに前に消去した文章を呼び戻せます
C-x u:取り消し(undo)何度も繰り返せばそのたびに一つ前のコマンドの取り消しです
C-_:C-x uと同じです
C-x C-f:ファイルを開く(find)、続いてファイル名の入力、その途中でC-g(取り消し)
上をタイプすると最下行(ファイル名)をミニバッファと呼びで入力完了
C-x C-f foo→編集後→C-x C-sでセーブ→最後にC-x C-f TUTORIAL.jaでもとに戻る
C-x C-s:ファイルをセーブする
Emacsはファイルの内容をバッファ(buffer)の中に格納する。ファイルを開くと新しいバッファができます。
C-x C-b:バッファのリストを見る
C-x l:バッファのリストを消す
C-x b:バッファを切り替えるためファイル名を入力する
C-x s:いずれかのバッファをセーブする
C-z:一時的にEmacsを抜ける(fgコマンドまたは%emacsでEmacsを再開する)
M-x text-mode:Text modeにする
M-x auto-fill-mode:単語間の分離・禁則処理(トグル)
C-u 80 C-x f:行80文字にする
M-x recover file:yesで自動セーブされたデータの回復
M-x:最下行に”repl s”をタイプで入力
どの文字列をどう置換するか入力のたびにを打つ
C-s:前向き検索(C-r:後ろ向き)、次に検索したい文字列入力―で終了C-g
C-q:フローコントロールを解除する
複数のウィンドウ
C-u 0 C-l:分割する位置にカーソルを移動して(lば小文字のL)
C-x 2:画面を2分割
C-M-v:下のウィンドウをスクロール(MはAltキー)
C-x o:(下のウィンドウにカーソルを移動)o→otherのo(他のウィンドウ)切り替えC-x o
上のウィンドウでC-x lと打って下のウィンドウを消す(自分のいるウィンドウだけにする)
ESC ESC ESC:抜け出しコマンド、ミニバッファからの抜け出しなど

C-h ?:「helpコマンド」、C-gで取り消し

                 以上

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

PythonのFlaskで学ぶ〜プログラムの再利用・ルーティング〜

仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。

PythonのFlaskで学ぶ〜プログラムの再利用・ルーティング〜

今、下のリンクを参照しながらFlaskフレームワークを勉強している。
仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。
リンクの記事は後程読んでDEMOプログラムを開発しようと思う。
2番煎じだが今回は勘弁してほしい。
PythonのFlaskで学ぶWebアプリケーション制作講座 第3章 〜プログラムの再利用・ルーティング〜

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

昨日のデモで使ったソースデータ

WordPressの都合上インデントは無視します。代わりに「neverjpのぶらり日記」(2018/12/6付け)を参照してください。

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

<p>
<img src=”/static/images/0umi1.jpg” alt=”pic01″>
</p>

<script src=”/static/js/main.js”></script>
</body>
</html>
======================
demo01.py(/flask)
======================
from flask import Flask, render_template
app = Flask(__name__)

@app.route(‘/’)
def demo01():
html = render_template(‘demo01.html’, name = ‘児島’)
return html

#デバッグモードで走らせる
if __name__ == “__main__”:
app.run(debug=True)
============================
demo01.css(/flask/static/css
============================
.demo01 {
color: #f00;
}
=========================
main.js(/flask/static/js)
=========================
(function(){
‘use strict’;

alert(‘アラートだよ〜。’);

})();
==============================
挿入写真(/flask/static/images)
==============================
<img src=”/static/images/0umi1.jpg” alt=”pic01″>

WSLでFlaskを走らせる

WSLでFlaskが使えるかテストしてみた。問題なく動いたが注意したい難点かある。以下箇条書きにしたので参照願いたい。約2日間でデモぐらいまでに至った。

WSLでFlaskを走らせる

WSLでFlaskが使えるかテストしてみた。問題なく動いたが注意したい難点かある。以下箇条書きにしたので参照願いたい。約2日間でデモぐらいまでに至った。

① 前提としてWSLにPython3,Pip3,Flask,nkf,Vimがインストールされているものとする
② Python2は全角文字が使えないから注意が必要
③ Flaskはlocalhost上でHTML、CSS、Python、JSが連携して動く
④ Windows上でエディター(秀丸、TeraPadなど)を使って編集しその後USBメモリーに落としたものをWSL上に転送しnkfを使ってShift-JISをUTF-8に変換する
⑤ ソースの修正はWSL上でVimを使って行う
⑥ ディレクトリ構造はflaskをルートにtemplates,staticその下にcss,js,imagesを配置する
⑦ flaskフォルダーには.pyモジュールを置きtemplatesフォルダーには.htmlファイル、cssフォルダーには.cssモジュール、jsフォルダーには.jsモジュール、imagesフォルダーには.jpg、.gif、.pngなどのモジュールを入れる
⑧ ④マウントの仕方
$ sudo mount -t drvfs f: /mnt/usb/
fドライブにUSBメモリーをマウントする
$ cp -r /mnt/usb/demo01.* ./
USBメモリーのdemo01と付いたモジュールをWSLのカレントディレクトリに転送する
$ cp -r /mnt/usb/main.js ./
USBメモリーのmain.jsをカレントディレクトリに転送する
$ mv main.js static/js/
カレントディレクトリ上のmain.jsモジュールをstatic/jsフォルダーに転送する
⑨ Shift-JISのモジュールをUTF-8にコード変換する(WSL上で)
$ nkf -w < demo01.py > demo01utf.py
変換後demo01.pyにリネームしておく
⑩ demo01の実行の仕方
~/flask$ python3 demo01.py

「pythonのフレームワークのflaskを触ってみた。」を参照させていただきました。

pythonのフレームワークのflaskを触ってみた。

次の写真をはっきり見るにはneverjpのぶらり日記へ

JSアラート


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