zono note

zono note

日々の学び、気付きを大切に綴りたい

連載 7 : pythonとhtmlの連動(htmlとcssとpythonの合体)

入力用フォームと出力用フォームの、html、csspythonに読み込む。

ファイル名は、mane.pyにする。

ごめんなさい。少し長いコードになりますが。

def get_date():
	import datetime
	now = datetime.datetime.now()
	today = str(now.month)+ "月" + str(now.day) + "日"
	youbi = ["(月)","(火)","(水)","(木)","(金)","(土)","(日)"]
	date = datetime.date(now.year,now.month,now.day)
	youbi = youbi[date.weekday()]
	today += youbi
	return today


date = get_date()

import cgi
form = cgi.FieldStorage()
name = form.getvalue("name","")
meal = " " + form.getvalue("meal","")
menu1 = form.getvalue("menu1","")
menu2 = form.getvalue("menu2","")
menu3 = form.getvalue("menu3","")
menu4 = form.getvalue("menu4","")
menu5 = form.getvalue("menu5","")
menu6 = form.getvalue("menu6","")

import random
img_num = random.randint(1, 12)

html = """
<!DOCTYPE html>
<html>
	<head>
		<title>あおぞら献立</title>
		<style>
			@page {
				size: A4;
				magin:10mm;
			}

			@media print {
				body {
					width: 190mm;
				}
			}

			body {
				border: 2px solid black;
				width: 210mm;
				height: 148mm;
				padding-right: 50px;
				padding-left:50px;
			}

			h1 {
				font-family: Georgia, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiriyo, serif;
				font-size: 60px;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			h2 {
				font-size: 35px;
				text-align: center;
				padding: 0;
				margin: 0;
			}

			h3 {
				font-size: 35px;
				margin: 0;
			}

			p {
				font-size: 25px;
				margin: 2px;
			}

			img {
				position: absolute;
				top: 200px;
				left: 600px;
				width: 250px;
				height: 250px;
			}

			#aozorasakura {
				font-size: 30px;
				margin-top: 30px;
			}

			#tyuuigaki {
				font-size: 20px;
			}
		</style>
	</head>
		<body>
			<h1>%s 様</h1>
			<h2>%s<span style="color:yellow">%s</span>
			<h3>本日の献立</h3>
			<p>&#9312;%s</p>
			<p>&#9313;%s</p>
			<p>&#9314;%s</p>
			<p>&#9315;%s</p>
			<p>&#9316;%s</p>
			<p>&#9317;%s</p>
			<img src="/images/image%s.jpg" alt="image">
			<p id="aozorasakura">
			<span style="color: red">あ</span>
			<span style="color: orange">お</span>
			<span style="color: yellow">ぞ</span>
			<span style="color: green">ら</span>
			<span style="color: magenta">さくら</span>
			<span style="color: blue">弁当</span>
			TEL 099-230-7895
			</p>
			<p id="tyuuigaki">※仕入れ状況により、献立・食材が変更する場合がございます。</p>
		</body>
</html>
"""



html = html % (name, date, meal, menu1, menu2, menu3, menu4, menu5, menu6, img_num)
print("Content-type: text/html\n")
print(html)

忘れない為にメモです。

【def get_date():】自動で曜日を取得

【name = form.getvalue("name","")】 ” ” の中には大元値が反映される。値がなければNONEが
                   表示、その他に「値がありませ」などの文字入力も可能

【画像のランダム表示】

ごめんなさい、これは言葉が成り立っていませんが、私の忘れない為の走り書きメモ
【%s】には変数が入る サイトアドレスに表示されるクエリー、?を拾って変数に入れるイメージ

連載 6: pythonとhtmlの連動(出力用フォームをcssで編集)

出力用フォームを編集する為に
cssで編集する

@page {
	size: A4;
	magin:10mm;
}

@media print {
	body {
		width: 190mm;
	}
}

body {
	border: 2px solid black;
	width: 210mm;
	height: 148mm;
	padding-right: 50px;
	padding-left:50px;
}

h1 {
	font-family: Georgia, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiriyo, serif;
	font-size: 60px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 0;
	padding-bottom: 0;
}

h2 {
	font-size: 35px;
	text-align: center;
	padding: 0;
	margin: 0;
}

h3 {
	font-size: 35px;
	margin: 0;
}

p {
	font-size: 25px;
	margin: 2px;
}

img{
	position: absolute;
	top: 200px;
	left: 600px;
	width: 250px;
	height: 250px;
}

#aozorasakura {
	font-size: 30px;
	margin-top: 30px;
}

#tyuuigaki {
	font-size: 20px;
}

/*#menyu1{width: 270px;background: orange;}*/
/*#wrapper{width:2480px;margin:0 auto;};*/

/*body{width:2894px;height:2039px;	
	margin:10px 10px 10px 10px;
	padding:10px 10px 10px 10px;
	font-family:HGP明朝B;border: 2px solid black;}*/

以上

連載 5 : pythonとhtmlの連動(出力フォーム作成)

出力フォーム作成(htmlとcss使用)

コードは以下の通り

<!DOCTYPE html>
<html>
	<head>
		<title>あおぞら献立</title>
		<style>
			@page {
				size: A4;
				magin:10mm;
			}

			@media print {
				body {
					width: 190mm;
				}
			}

			body {
				border: 2px solid black;
				width: 210mm;
				height: 148mm;
				padding-right: 50px;
				padding-left:50px;
			}

			h1 {
				font-family: Georgia, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiriyo, serif;
				font-size: 60px;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			h2 {
				font-size: 35px;
				text-align: center;
				padding: 0;
				margin: 0;
			}

			h3 {
				font-size: 35px;
				margin: 0;
			}

			p {
				font-size: 25px;
				margin: 2px;
			}

			img {
				position: absolute;
				top: 200px;
				left: 600px;
				width: 250px;
				height: 250px;
			}

			#aozorasakura {
				font-size: 30px;
				margin-top: 30px;
			}

			#tyuuigaki {
				font-size: 20px;
			}
		</style>
	</head>
		<body>
			<h1>%s 様</h1>
			<h2>%s<span style="color:yellow">%s</span>
			<h3>本日の献立</h3>
			<p>&#9312;%s</p>
			<p>&#9313;%s</p>
			<p>&#9314;%s</p>
			<p>&#9315;%s</p>
			<p>&#9316;%s</p>
			<p>&#9317;%s</p>
			<img src="/images/image%s.jpg" alt="image">
			<p id="aozorasakura">
			<span style="color: red">す</span>
			<span style="color: orange">ず</span>
			<span style="color: yellow">き</span>
			<span style="color: magenta">いちろ</span>
			<span style="color: blue">弁当</span>
			TEL 000-000-0000
			</p>
			<p id="tyuuigaki">※仕入れ状況により、献立・食材が変更する場合がございます。</p>
		</body>
</html>

f:id:zonozonox:20180116061146j:plain
以上

連載 4 : pythonとhtmlの連動(入力フォーム作成)

入力フォーム作成

コードは以下の通り

<!DOCTYPE html>
<html>
	<head>
			<title>すずき弁当入力</title>
			<meta charset="utf-8">
	</head>
		<body>
		<form action="/cgi-bin/menu.py">
			名前入力:
			<input list="browsers" name="name">
			<datalist id="browsers">
				<option>鹿児島タロウ</option>
				<option>熊本ハナコ</option>
			</datalist>
			<select name="meal">
				<option>昼食</option>
				<option>夕食</option>
			</select>
			<br>
			メニュー(1):<input type="text" name="menu1"><br>
			メニュー(2):<input type="text" name="menu2"><br>
			メニュー(3):<input type="text" name="menu3"><br>
			メニュー(4):<input type="text" name="menu4"><br>
			メニュー(5):<input type="text" name="menu5"><br>
			メニュー(6):<input type="text" name="menu6"><br>
			<input type="submit">
		</form>
		</body>
</html>

f:id:zonozonox:20180115082508j:plain
以上

連載 3 : pythonとhtmlの連動 (cgi server作成)

python cgi Server 作成

コードは以下の通り

import http.server

server_address = ("",8000)
handler_class = http.server.CGIHTTPRequestHandler
server = http.server.HTTPServer(server_address,handler_class)
server.serve_forever()

連載 2 : pythonとhtmlの連動(連載で作成したいもの:イメージ)

最後に目指す完成形をを最初に記します

1、入力フォーム(html)

f:id:zonozonox:20180113132225j:plain

2、上記に入れたオーダーが
出力フォームに反映される

f:id:zonozonox:20180113132846j:plain

3、上記の出力画面の詳細説明

 名前は、入力ミスがないようリストボックスを使う

 月 日 曜日は datetime関数を使って自動入力

 画像はランダム表示(日ごとに)

以上

連載 1 : pythonとhtmlの連動(htmlファイルをpythonに読み込み実行)

目標  htmlとcssを扱う事が今回が初めてなのでしっかり身に付ける
   htmlとcssを使って自在に入力フォーム、出力フォームを作成する
   入力されたデータをpython(cgi)を使いhtmlとpythonを連動させる
   上記目標を一週間で達成したい

作りたい物 弁当オーダーを受け、htmlとcssで作成した入力用フォームに入力。
      オーダーはpythonで作成されたプログラミングを経由して結果が出力用フォームに反映、出力


次回、以降、目標達成まで順を追って更新します。
   おおまかな流れは以下の通り

1,python でcgi作成を作成する

2,入力用フォームをhtmlとcssを使い作成

3,出力用フォームをhtmlとcssを使い作成

4入力用フォームと出力用フォームをpythonに移す

5,html側から入力したデータをpythonに読み込みプログラムを実行し結果をhtmlで作成した出力用フォームに表示させる