My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2014/08/08 ショッピングサイトを作る

【本日のWeb制作 学習メモ】

ショッピングサイトを作ってみる

PHPの演習として、ショッピングサイトを作ってみます。

作成ページ(ページ遷移)は以下の通り
1.スタッフ追加画面
2.入力チェック画面
3.スタッフ追加完了画面
4.スタッフ一覧画面
5.スタッフ ログイン画面
6.ログイン チェック画面
7.ログアウト画面

【演習】ショッピングサイトを作る

以下、1.~7.のページを作成する

1.スタッフ追加画面

staff_add.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ追加</h1>
<form method="post" action="staff_add_check.php">
スタッフ名を追加してください
<input type="text" name="name"><br>
パスワードを入力してください
<input type="password" name="pass"><br>
パスワードをもう一度入力してください
<input type="password" name="pass2"><br>
<input type="button" onClick="history.back()" value="戻る">
<input type="submit" value="OK">
</form>
</body>
</html>


2. 入力チェック画面

staff_add_check.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];
	$staff_pass2 = $_POST['pass2'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
	$staff_pass2 = htmlspecialchars($staff_pass2); 

	if(!isset($staff_name)){
		echo "スタッフ名が入力されていません";
	}else{
		echo "スタッフ名:" . $staff_name . "<br>";
	}
	
	if($staff_pass==''){
		echo "パスワードが入力されていません";	
	}

	if($staff_pass != $staff_pass2){
		echo "パスワードが一致しません";	
	}
	if($staff_name == '' || $staff_pass == '' || $staff_pass != $staff_pass2 )
	{ echo '<form>';
	  echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
	  echo '</form>';
	}else{
		$staff_pass = md5($staff_pass);
		echo '<form method="post"action="staff_add_done.php">';
		echo '<input type="hidden" name="name" value="'.$staff_name.'">';
		echo '<input type="hidden" name="pass" value="'.$staff_pass.'">';
		echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
		echo '<input type="submit" value="OK">';
		echo '</form>';
	}

?>
</body>
</html>


3. スタッフ追加完了画面

staff_add_done.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'INSERT INTO staff(name, password) values(?,?)';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_name;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	echo $staff_name;
	echo 'さんを追加しました。';
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>


4.スタッフ一覧画面

staff_list.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ一覧</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE 1';
	$stmt = $dbh -> prepare($sql);
	$stmt -> execute();
//DB切断
	$dbh = null;

	echo 'スタッフ一覧<br>';

	while(true){
		$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
			if($rec == false){
				break;
			}
		echo $rec['name'];
		echo '<br>';
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>


5.スタッフ ログイン画面

staff_login.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>スタッフ ログイン</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ ログイン</h1>
<form method="post" action="staff_login_check.php">
スタッフコード<br>
<input type="text" name="code"><br>
パスワード<br>
<input type="password" name="pass"><br>
<input type="submit" value="ログイン">
</form>
</body>
</html>


6.ログイン チェック画面

staff_login_check.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ ログインチェック</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_code = $_POST['code'];
	$staff_pass = $_POST['pass'];
	//var_dump($_POST);
	//exit;

	$staff_code = htmlspecialchars($staff_code);
	$staff_pass = htmlspecialchars($staff_pass);

	$staff_pass = md5($staff_pass);

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE code=? AND password=?';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_code;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

	if($rec == false){
		echo 'スタッフコードかパスワードが違います。';
		echo '<a href="staff_login.html">戻る</a>';
	}else{
		header('Location: staff_list.php');
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
</body>
</html>



7.ログアウト画面

staff_logout.php

<?php
  $_SESSION = array();
  if(isset($_COOKIE[session_name()]) == true){
  	setcookie(session_name(),'',time()-42000,'/');
  
  }
  @session_destroy();
?>
<!DOCTYPE html>
<html>
<head>
<title>ログアウト</title>
<meta charset='utf-8'>
</head>
<body>
ログアウトしました。<br>
<a href="staff_login.html"></a>
</body>
</html>