【HTML5, PHP, データベース】 パスワード付きスタッフ追加フォーム
HTML5, PHP, データベースを使ったパスワード付きスタッフ追加フォームです。
パスワードを暗号化するために、
$staff_password = md5( $staff_password );
を使っています。
スタッフ情報をパスワード入力とともに、データベースに情報を格納、引き出すようになってます。
セキュリティはHTML5とPHPの両方で設定しています。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>パスワード入力</title> <link rel="stylesheet" href="css/style.css"> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <div id="container"> <header> <h1>スタッフ追加</h1> </header> <section id="form"> <form action="staff_add_check.php" method="post" id="staff"> <p><label for="name">スタッフ名を入力して下さい。</label><br> <input type="text" name="name" id="name" required autofocus></p> <p><label for="password">パスワードを入力して下さい。</label><br> <input type="password" name="password" id="password" size="10" required></p> <p><label for="password">パスワードをもう一度入力して下さい。</label><br> <input type="password" name="password2" id="password2" size="10" required></p> <p><input type="submit" value="確認画面へ"> </form> </section> </div> <!--/#container--> </body> </html>
【staff_add_check.php】
<?php
// セッションの開始
session_start();
$staff_name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES );
$staff_password = htmlspecialchars( $_SESSION[ 'password' ], ENT_QUOTES );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力確認画面：パスワード入力</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<section>
<?php
try {
//shopはデータベース名
$dsn = 'mysql:dbname=shop; host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO( $dsn, $user, $password );
$dbh -> query( 'SET NAMES UTF8' );
//mst_staffはshop内のテーブル名
$sql = 'INSERT INTO mst_staff(name, password) VALUES(?, ?)';
$stmt = $dbh -> prepare( $sql );
$data[] = $staff_name;
$data[] = $staff_password;
$stmt -> execute( $data );
$dbh = null;
print $staff_name;
print 'さんを追加しました。<br>';
}
catch(Exception $e ) {
print 'ただいま障害により大変ご迷惑をお掛けしております。';
exit();
}
?>
<p><a href="staff_list.php">スタッフ一覧</a></p>
</section>
</div>
</body>
</html>【staff_add_done.php】
<?php
// セッションの開始
session_start();
$staff_name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES );
$staff_password = htmlspecialchars( $_SESSION[ 'password' ], ENT_QUOTES );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力確認画面：パスワード入力</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<section>
<?php
try {
//shopはデータベース名
$dsn = 'mysql:dbname=shop; host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO( $dsn, $user, $password );
$dbh -> query( 'SET NAMES UTF8' );
//mst_staffはshop内のテーブル名
$sql = 'INSERT INTO mst_staff(name, password) VALUES(?, ?)';
$stmt = $dbh -> prepare( $sql );
$data[] = $staff_name;
$data[] = $staff_password;
$stmt -> execute( $data );
$dbh = null;
print $staff_name;
print 'さんを追加しました。<br>';
}
catch(Exception $e ) {
print 'ただいま障害により大変ご迷惑をお掛けしております。';
exit();
}
?>
<p><a href="staff_list.php">スタッフ一覧</a></p>
</section>
</div>
</body>
</html>【staff_list.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタッフ一覧</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<section>
<h1 id="staff">スタッフ一覧</h1>
<form action="delete.php" method="post">
<table border="1" width="340">
<tr>
<th>ID</th><th>名前</th><th>パスワード</th><th>修正</th>
</tr>
<?php
$dsn = 'mysql:dbname=shop;host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');
$sql = 'SELECT * FROM mst_staff WHERE 1';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
while(1) {
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
if($rec == false) {
break;
}
print '<tr>';
print '<td>';
print $rec['code'];
print '</td>';
print '<td>';
print $rec['name'];
print '</td>';
print '<td>';
print $rec['password'];
print '</td>';
print '<td><input type="radio" name="delete" id="delete"></tr>';
}
$dbh = null;
?>
</table>
<input type="submit" value="修正する">
</form>
</section>
</div>
</body>
</html>【style.css】
@charset "utf-8";
/*RESET*/
body, section, header, h1, table, th, tr, td {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
#container {
width:400px;
margin: 30px auto;
border: 1px solid #CCC;
border-left: 5px solid #0C9;
box-shadow: 0 0 4px #CCCCCC;
}
h1, section {
margin: 30px 0 20px 50px;
}
h1 {
padding-top: 0px;
font-size: 24px;
}
h1#staff {
font-size: 20px;
margin-left: -20px;
}
section {
padding-bottom: 30px;
}
table {
border-collapse: collapse;
border: 1px solid #999;
margin-left: -20px;
}
th {
text-align: center;
background-color: #FFC;
}
th, td {
padding: 5px;
}
input.delete {
padding-left: 5px;
}
table td input[type=radio] {
margin-left: 17px;
}
input[type=submit] {
margin: 20px 0 0 -20px;
}
