新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【PHP・Javacsript】（完成）簡易な商品購入サイトを作る　～ユーザが入力した情報を別画面のテーブルで受け取る～

Ｊａｖａｓｃｒｉｐｔ ＪＳ プログラミング 自己学習 ＨＴＭＬ ＰＨＰ ＤＯＭ

【今回の内容】


　とても簡易な商品購入サイトができましたー。
ページ遷移する際のデータの受け渡しの感覚がつかめてきたような気がします。


　最近、プログラミングが結構楽しい。
　・思ったようにプログラムが動く感じ
　・想像したものが少しずつ出来ていく感じ
　
　これに「使ってくれる人」と言う要素が加わったら、よりその楽しさが増してくるんだろうな
　と思います。

　簡易なページ間でのデータの受け渡し、具体的には
　１、ユーザの入力　
　２、ページ間での受け渡し
　
　ということができたので次は、
　
　・ユ―ザの入力情報をＤＢに登録する
　・ユ―ザの入力情報をＤＢに変更する
　・ユーザの入力情報をＤＢから読み込む
　・ユ―ザの入力情報をＤＢに検索する
　・ユ―ザの入力情報をＤＢに削除する


というようなことをデータの整合性を保ちつつ出来ることを目標にやっていきたいと思います。
　

【今回の処理の流れ】

とても簡易な商品購入サイトの流れができました。流れは以下の通りです。

　１、ユーザでログイン
　２、商品を選択
　３、商品選択を確認し、送信
　４、送信した情報を確認する

という感じ

【今回の流れ（詳細）】

　
　詳しく書くとこんな感じです。
　
　
　１、ログイン画面
　　　　html

　２、ログイン判定（php）
　　　　php
　　　　　・ログイン判定
　　　　　・ページ遷移
　　　　　・セッションからユーザ情報の保持
　
　３、エラー画面
html
　　　　　・再ログインを促す

　４、商品選択画面
phpファイルにhtmlとjsを使用
　　　 html
　　　　　・複数商品と金額・単価の選択
　　　　　・商品の合計額・備考情報などを送信
　　　　 ｊｓ
　　　　　・ユーザの選択により金額を計算
　　　　　php
　　　　　・セッションからユーザ情報の保持
　
　５、商品確認画面

　　　phpファイルにhtmlを使用
　　　 html
　　　　　・4の画面から情報をうけとるテーブル用意
php
　　　　　・テーブルのセルにＰＯＳＴで受け取った情報を格納

【学習メモ】

　１、formのonsubmit属性はsubmitする前のイベントとして使える。
window.confirmとの相性よい

　　参考：http://phpjavascriptroom.com/?t=js&p=window_dialog



　２、ユーザが入力したものをＤＯＭを使用して、hidden要素のvakueにいれることもできる


　　参考：https://w3g.jp/xhtml/dic/onreset



３、form内で複数項目を同一のname="〇〇[]"にすると、php側で配列としてで受け取ることが可能
　　

　　参考：http://www.php.net/manual/ja/faq.html.php




１、ログイン画面
login.html

<html>
<head></head>
<title>ログイン画面</title>
<body>
<h1>ログイン画面</h1>
<form action="./login.php" method="POST">
ユーザ名  <input type="text" name="user"></br>
パスワード<input type="text" name="password">
<input type="submit" value"送信">
</form>
</body>
</html>

３、エラー画面
login_error.html

<html>
<head></head>
<body>
<h1>認証エラー</h1>
<a href="./login.htm">再ログインする</a>
</body>
</html>

２、ログイン判定（php）

<?php
//セッションの開始
//ユーザ情報の取得
$user=$_POST['user'];
$password=$_POST['password'];

//ログイン判定
if(strcmp($user,'hiro')==0&&strcmp($password,'sa')==0){
session_start();
$_SESSION["userName"]=$user;

header('Location:select_book.php');
}else{
header('Location:login_error.htm');
}
?>

４、商品選択画面
select_book.php

<?php
session_start();
$user=$_SESSION["userName"];
if(!strcmp($user,'hiro')==0){
header('Location:login_error.htm');}
?>

<html>
<head></head>
<title>書籍選択画面</title>
<body>
<h1>書籍選択画面</h1>
<?php
print "<h2>".$_SESSION["userName"]."さんログイン中</h2>";
?>

<table id="table" border="1">
<tr>
<td>個数</td>
<td>書籍名</td>
<td>著者</td>
<td>出版社</td>
<td>単価（円）</td>
<td>合計（円）</td>

</tr>

<tr>
<td>
	<select onchange="sum_book(this.options[this.selectedIndex],this)">
		<option></option>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
	<select></td>
<td>田中の本</td>
<td>田中</td>
<td>田中の会社</td>
<td>1000</td>
<td></td>

</tr>

<tr>
<td>
	<select onchange="sum_book(this.options[this.selectedIndex],this)">
		<option></option>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
	<select>
</td>
<td>佐藤の本</td>
<td>佐藤</td>
<td>佐藤の会社</td>
<td>2000</td>
<td></td>
</tr>

<tr>
<td>
	<select onchange="sum_book(this.options[this.selectedIndex],this)">
		<option></option>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
	<select>
</td>
<td>伊藤の本</td>
<td>伊藤</td>
<td>伊藤の会社</td>
<td>3000</td>
<td></td>
</tr>
</table></br>
<form action="send_value.php" method="POST" onsubmit="return cheak_send()">
<input type="checkbox"  name="serch_info[]" value="新刊情報">新刊情報
<input type="checkbox" name="serch_info[]" value="メルマガ">メルマガ
<input type="checkbox" name="serch_info[]" value="ダイレクトメール">ダイレクトメール</br>
<input type="hidden" name="hidden" id="hidden_id"value=""></br>
<input type="hidden" name="hidden1" id="hidden_time" value=""></br>
合計金額:<input type="text" value="" id="text_all_sum">円</br>
<input type="submit" value="送信" >
</form>

<?php
echo <<<EOM
		<script type="text/javascript">
			
			window.onlead=time();
			function sum_book(item,obj){
				var sum=item.text*obj.parentNode.parentNode.childNodes[9].innerHTML;
				obj.parentNode.parentNode.childNodes[11].innerHTML=sum;
				sum_all();
			}
			function sum_all(){
				var table=document.getElementById("table");
				sum_all_value=0;
					for(var i=1;i<table.rows.length;i++){
					var k=table.rows[i].cells[5].innerHTML;
					sum_all_value=sum_all_value+Number(k);
					}
				document.getElementById("text_all_sum").value=sum_all_value;
				document.getElementById("hidden_id").value=sum_all_value;
			}
			function cheak_send(){
			var send_flag=window.confirm("送信してもよいですか");
			return send_flag;
			}
			function time(){
			var date=new Date();
			time=" "+date.getFullYear()  + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "時";
			document.getElementById("hidden_time").value=sum_all_value=time;
			}
		</script>
EOM;
?>
</body>
</html>

５、商品確認画面
send_value.php

<?php
	//sessionに格納されているユーザ名の取得
	session_start();
	$user=$_SESSION["userName"];
	//POSTで送信した情報を変数に格納
	$value=$_POST["hidden"];
	$time=$_POST["hidden1"];
	$a=$_POST["serch_info"];
?>
<html>
<body>
<h2>以下の情報の登録が完了しました</h2>
<table cellspacing="1" border="1">
<tr>
<td>決済日時</td>
<td>ユーザ名</td>
<td>合計金額</td>
<td>備考</td>
</tr>
<tr>
<td><?php print $time;?></td>
<td><?php print $user;?></td>
<td><?php print $value;?></td>
<td><?php foreach($a as $b){print $b."配信 ";}?></td>
</tr>

</table>

<?php
echo <<<EOM
		<script type="text/javascript">
			alert("送信が成功しました");
		</script>
EOM;
?>

</body>
</html>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }