【本日の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>