PHP24（フォームでパスワード入力、サーバーエラー表示、データ修正）

PHP

ブログ・PHPの勉強「スタッフ登録一覧(1)」
名前とパスワードを入力し、データベースに格納。

１）データベース作成


２）入力画面

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おいしい野菜農園</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="container">
<header>
<h1>スタッフ追加</h1>
</header>
<section id="form">
<form action="staff_add_check.php" method="post">
<p><label for="name">スタッフ名を入力してください。</label><br><input type="text" name="name" id="name" size="20" autofocus="autofocus" required></p>
<p><label for="password">パスワードを入力してください。</label><br><input type="password" name="password" id="password" size="10" required></p>
<p><label for="password2">パスワードをもう一度入力してください。</label><br><input type="password" name="password2" id="password2" size="10" required></p>
<input type="submit" value="確認画面へ">
</form>
</section>
</div>
</body>
</html>
  • HTML5の記述によって入力チェック。

３）確認画面

<?php
if(empty($_POST)){
  print '処理終了';
  exit;
}

session_start();
  $staff_name=htmlspecialchars($_POST['name'],ENT_QUOTES);
  $staff_password=htmlspecialchars($_POST['password'],ENT_QUOTES);
  $staff_password2=htmlspecialchars($_POST['password2'],ENT_QUOTES);

$_SESSION['name']=$staff_name;
$_SESSION['password']=$staff_password;
$_SESSION['password2']=$staff_password2;
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力確認画面：おいしい野菜農園</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="container">
<?php
if($staff_name==''){
  print 'スタッフ名が入力されていません。<br>';
}else{
  print 'スタッフ名：'.$staff_name.'<br>';
}
if($staff_password==''){
  print 'パスワードが入力されていません。<br>';
}
if($staff_password !=$staff_password2){
  print 'パスワードが一致しません。<br>';
}
if($staff_name==''||$staff_password==''||$staff_password !=$staff_password2){
  print '<form><input type="button" onclick="history.back()" value="戻る"></form>';
}else{
  $staff_password = crypt($staff_password);
  print '<form action="staff_add_done.php"><br>';
  print '<input type="button" onclick="history.back()" value="戻る">';
  print '<input type="submit" value="ＯＫ"></form>';
}
?>
</div>
</body>
</html>
  • 入力もれがなく、２回入力させたパスワードが合致していれば、crypt関数でパスワードを暗号化しデータを次のページにもって行く。
  • 暗号化の手法はいろいろありこれだけでは充分ではないが、今回はフォームの練習なので追求はしない。
  • var_dumpで暗号化の確認。

４）送信済み画面

<?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">
<?php
try{
$dsn='mysql:dbname=shop;host=localhost';
$user='root';
$password='root';
$dbh=new PDO($dsn,$user,$password);
$dbh->query('SET NAMES UTF8');

$sql='INSERT INTO mst_staff(name,password) VALUE(?,?)';
$stmt=$dbh->prepare($sql);
$data[]=$staff_name;
$data[]=$staff_password;
$stmt->execute($data);

$dbh = null;

print $staff_name.'さんを追加しました。<br>';
}
catch(Exception $e){
  print 'ただいま障害により大変ご迷惑をお掛けしております。';
  exit();
}
?>
<p><a href="staff_list.php">スタッフ一覧</a></p>
</div>
</body>
</html>
  • try関数でデータベースに格納できなかった場合、catch関数でエラーの表示をし処理を終了する。

５）入力データ一覧

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スタッフ一覧：おいしい野菜農園</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="container">
<h1>スタッフ一覧</h1>
<?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();
?>
<form action="staff_edit.php" method="post">
<table class="manage">
<tr><th></th><th class="id">No.</th><th class="name">名前</th><th>パスワード</th>
</tr>
<?php
while(1){
$rec=$stmt->fetch(PDO::FETCH_ASSOC);
if($rec==false){
  break;
}
  print '<tr><th><input type="radio" name="staff_code" value="'.$rec['code'].'"></th>';
  print '<td>'.$rec['code'].'</td>';
  print '<td>'.$rec['name'].'</td>';
  print '<td>'.$rec['password'].'</td></tr>';
}
?>
</table>
<input type="submit" value="修正する">
</form>
<p><a href="index.html" class="css_btn_class">入力画面に戻る</a></p>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body, div, h1, p, table, tr, th, td{
  margin:0;
  padding:0;
}
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height:1.7;
  color:#333333;
}
#container{
  margin: 20px auto;
  padding:20px;
  width:80%;
  border-left:solid 4px #8ccab3;
  box-shadow:0px 0px 1px 1px #cccccc;
}
h1{
  font-size:18px;
  margin-bottom:20px;
}
p{
  margin-bottom:10px;
}
table{
  margin: 20px 0;
  border-collapse:collapse;
}
th{
  font-weight:600;
  background:#e6f7f1;
}
th,td{
  padding:2px;
  border:solid 1px #cecccd;
}
th.message{
  width:300px;
}
#submit{
  text-align:center;
}
input[type="submit"] {
  margin: 0 0 0 10px;
    padding:  5px 10px;
    font-weight: bold;
    border:  1px solid #FFF;
    color:  #FFF;
    background-color:  #D9F5F3;
    background-image:  -webkit-gradient(linear, left top, left bottom, from(#FF9900), color-stop(48%, #FF8600), color-stop(52%, #FF7700), to(#FF6600));
    font-size:  14px;
    -webkit-border-radius:  4px;
    border-radius:  4px;
    -webkit-box-shadow:  0 0 3px #333;
    box-shadow:  0 0 3px #333;
    cursor: pointer;
}
input[type="button"] {
  margin: 0 0 0 10px;
    padding:  5px 10px;
    font-weight: bold;
    border:  1px solid #FFF;
    color:  #FFF;
    background-color:  #D9F5F3;
    background-image:  -webkit-gradient(linear, left top, left bottom, from(#060), color-stop(48%, #0C3), color-stop(52%, #0F3), to(#093));
    font-size:  14px;
    -webkit-border-radius:  4px;
    border-radius:  4px;
    -webkit-box-shadow:  0 0 3px #333;
    box-shadow:  0 0 3px #333;
    cursor: pointer;
}