読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

PHPでのメールフォーム・データベースを使わないバージョン

PHP

メールフォーム(データベースに接続してないバージョン)

今回のメールフォームは非常にシンプルでデータベースには接続せず、フォームを記入してくれた人とフォームの管理者(自分)に、フォームに記入された内容がメールで届くようになっています。


必要なファイルは
input.php(フォーム入力画面)
check.php(フォーム内容確認画面)
submit.php(完了画面)


の3つです。

input.php(ここはHTMLのformなので特に問題は無し)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールフォーム</title>
<style>
section {
	width: 650px;
	margin: auto;
	text-align: center;
}
table {
	text-align: left;
}
td {
	padding: 3px;
	width: 200px;
}
</style>
</head>
<body>
<section>
<h1>入力画面</h1>
<p>必要事項を入力して「確認する」ボタンをクリックしてください。</p>
<form method="post" action="check.php">
<table border="0">
<tr>
<td>お名前</td>
<td><input type="text" name="name" size="40"></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input type="text" name="email" size="40"></td>
</tr>
<tr>
<td>メッセージ</td>
<td>
<textarea rows="5" cols="40" name="message"></textarea>
</td>
</tr>
</table>
<input type="submit" name="sub1" value="確認する">
</form>
</section>
</body>
</html>


次のcheck.phpではポイントは2つ


入力項目が空白の場合「onClick="history.back()」を使ってinput.phpに戻るよう設定

if($name=='' || $email=='' || $message=='') {
  echo '<form>'."\n";
  echo '<input type="button" onClick="history.back()" value="戻る">'."\n";;
  echo '</form>'."\n";	


フォームの情報を保存しておく為に「 $_SESSION」を使用
$_SESSIONとは・・・PHPで情報を保存するには「Cookie」と「SESSION」の2つの方法がある。「Cookie」は期間を決めて情報を保存しておけるのに対し、「SESSION」はブラウザーを閉じるまでという制限があるものの、その分安全に情報を保存する事が出来る。
で、今回はその「SESSION」を使い、フォームの情報を保存しておく。

※「SESSION」を使う場合、初めに session_start(); を使う必要がある。また、セキュリティ上、最後にはsession_destroy();を使ってsession関数を開放する必要がある。



check.php

<?php
// フォームデータが空の場合は処理終了
if (empty($_POST)) {
    echo "処理終了";
    exit;
}

// セッションの開始
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールフォーム</title>
<style>
section {
	width: 500px;
	margin: auto;
	text-align: center;
}
table {
	text-align: left;
}
td {
	padding: 3px;
}
</style>
</head>
<body>
<section>
<h1>メールフォーム(2. 確認画面)</h1>
<p>内容を確認してください。</p>
<?php

// 入力値の取得・加工
$name = htmlspecialchars($_POST["name"], ENT_QUOTES, "UTF-8");
$email = htmlspecialchars($_POST["email"], ENT_QUOTES, "UTF-8");
$message = htmlspecialchars($_POST["message"], ENT_QUOTES, "UTF-8");

$_SESSION["name"] = $name;
$_SESSION["email"] = $email;
$_SESSION["message"] = $message;


// 入力値のチェック
 echo '<ul>'."\n";
  echo '<li>';
    if($name=='') {
        echo 'お名前が、入力されていません。';
    } else {
        echo 'ようこそ、'.$name.'';
    }
  echo '</li>'."\n";
  echo '<li>';
    if($email=='') {
        echo 'メールアドレスが、入力されていません。';
    } else {
        echo 'メールアドレス:'.$email;
    }
  echo '</li>'."\n";
  echo '<li>';		
    if($message=='') {
        echo 'お問い合わせの内容が、入力されていません。';
    } else {
			?>
 <p><?php       echo 'お問い合わせの内容:<br>'.$message;
    }
	?>	</p>
  
<?php  echo '</li>'."\n";
  echo '</ul>'."\n";



if($name=='' || $email=='' || $message=='') {
  echo '<form>'."\n";
  echo '<input type="button" onClick="history.back()" value="戻る">'."\n";;
  echo '</form>'."\n";	
}
 else {
  echo '<form action="submit.php" method="post">'."\n";
  echo '<input type="button" onClick="history.back()" value="戻る">'."\n";
  echo '<input type="submit" name="sub1" value="送信">'."\n";
  echo '</form>'."\n";
}
?>

</section>
</body>
</html>


submit.phpでのポイントはヒアドキュメントを使う事。前回はechoを使って1個づつ出力させていたが、ヒアドキュメントを使うと、改行など自由に使ってテキストを出力させる事が出来る。
今回はこのヒアドキュメントをお礼メールの内容の部分に使ったので、お礼メールの文章などを好きに、簡単に、自分なりにアレンジ出来る。


例 echoのみで出力した場合

<?php

$purpose = "Webプログラミング";

echo "PHPとは、HTMLへの埋め込み型プログラミング言語です。<br />\n";
echo "正式名称は「PHP: Hypertext Preprocessor」です。<br />\n";
echo "PHPは{$purpose}に利用されます。<br />\n";
echo "<a href=\"detail.php\">詳細を読む<a>\n";

?>


ヒアドキュメントの場合

echo <<< EOM
PHPとは、HTMLへの埋め込み型プログラミング言語です。<br />
正式名称は「PHP: Hypertext Preprocessor」です。<br />
PHPは{$purpose}に利用されます。<br />
<a href="detail.php">詳細を読む<a>
EOM;

submit.php

<?php
// フォームデータが空の場合は処理終了
if (empty($_POST)) {
    echo "処理終了";
    exit;
}

// セッションの開始
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールフォーム</title>
<style>
section {
	width: 500px;
	margin: auto;
	text-align: center;
}
table {
	text-align: left;
}
td {
	padding: 3px;
}
</style>
</head>
<body>
<section>
<h1>メールフォーム(3. 完了画面)</h1>
<?php
// 入力値の取得・加工
$name = htmlspecialchars($_SESSION["name"], ENT_QUOTES, "UTF-8");
$email = htmlspecialchars($_SESSION["email"], ENT_QUOTES, "UTF-8");
$message = htmlspecialchars($_SESSION["message"], ENT_QUOTES, "UTF-8");

// メール本文の組み立て
mb_language("Ja");
mb_internal_encoding("UTF-8");

$subject = "お問い合せを受け付けました。";
$to = "管理者のメールアドレス, {$email}";
$title = "【メールフォームより】";
$headers = "From: 管理者もしくは店舗名";
$body =  <<<EOM
--------------------------------------------------
【お問い合せ内容の確認】

お名前:{$name}
メールアドレス:{$email}
メッセージ:{$message}

お問い合わせ、誠にありがとうございました。
--------------------------------------------------
EOM;


// メール送信の実行
$rc = mb_send_mail($to, $title, $body, $headers);
if (!$rc) {
    exit;
} else {
    $_SESSION = NULL;
}
?>

<p>以下の内容を受けたまわりました。</p>
<table border="0">
<tr>
<td>お名前</td>
<td width="300"><?php echo $name; ?></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><?php echo $email; ?></td>
</tr>
<tr>
<td>メッセージ</td>
<td><?php echo nl2br($message); ?></td>
</tr>
</table>
</section>
<?php
session_destroy();
?>
</body>
</html>

第6回実技テスト 全面レイアウトのレスポンシブサイト制作

web制作 レスポンシブデザイン

以下の指示に沿ってサイトを制作すること。

  • スマートフォン時にはナビをハンバーガーメニューにすること。
  • ロゴはSVG化をすること。
  • タグラインにはgoogle fonts を使用すること。
  • スムーススクロールを導入すること。
  • スムーススクロール・ハンバーガーメニュー共にプラグインの使用不可
  • ゴーストボタンにはトランジションの設定をすること。
  • その他のボタンにもホバーアクションの設定をすること。
  • PC~タブレット間は可変で推移。SPレイアウトは767pxから。
  • footerにはコピーライトを挿入(その他は適宜)
  • 数値の指示が無い箇所は適宜

f:id:yachin29:20161227010724p:plain


使用する画像
http://yachin29.webcrow.jp/test6_img.zip


Google Fonts + 日本語 早期アクセス
googlefonts.github.io

データベースからデータを取得

PHP
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>登録データ一覧</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<?php
//データベースとの連結
 $dsn = 'mysql:dbname=mydb;host=localhost';
 $user = 'root';
 $password = '';//dbでパスワード設定していない場合はカラ
 $dbh = new PDO($dsn, $user, $password);
 $dbh -> query('SET NAMES UTF8');

//データベースのテーブルからデータを取得
 $sql = 'SELECT * FROM form WHERE 1';
 $stmt = $dbh -> prepare($sql);
 $stmt -> execute();



 //データがあるだけ全部取得
 while(1) {
   $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
 
 //もうデータがなければ「break」でループから抜ける
   if($rec == false) {
        break;
   }

	// stmtから取得したデータを表示
  echo $rec['id'].':&nbsp;';
  echo $rec['name'].':&nbsp;';
  echo $rec['email'].':&nbsp;';
  echo $rec['blood'].':&nbsp;';
  echo $rec['message'];
  echo '<br>';
	}

 $dbh = null;
?>
<ul class="back01">
<li><a href="menu.html">メニューに戻る</a></li>
</ul>
</body>
</html>

データをフォームからデータベースに自動保存する

PHP

今回はブラウザー上のフォームで入力したデータをデータベースに自動保存出来るようにします。

まずはXAMPPに新しいデータベース「form」を作ります。
その次に以下の内容でテーブルを作成。

f:id:yachin29:20161219233236j:plain


データベースがちゃんと機能しているか、まずはSQLを使って手動で確認してみましょう。

INSERT INTO inquiry (name, email, message) VALUES ('山田', 'yamada@gmail.com', 'はじめまして。')


続いて、PHPファイルでフォームを作ります。

入力画面(input.php)
確認画面(confirm.php
登録画面(submit.php

session

セッションは、個々のユーザーのデータを格納する仕組みで、 個々のユーザーに対してセッション ID を用意します。 これを用いて、複数ページにまたがるリクエストの間で状態の情報を永続させることができます。 Cookie(クッキー)の仕組みととても似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。

// セッションの開始
session_start();


// 入力値をセッション変数に格納
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;

PDOでデータベースに接続し、SQLを実行する

PDO PHP Data Object

データベースでの実行は、「データベースに接続」して「データベースを捜査する許可を得る」必要があります
そのために「PDO」という命令を使って、「ユーザー名」と「パスワード」を設定します
通常のオブジェクトと同様、このオブジェクトの中には「データベースへの接続」や「SQLの実行」「実行結果の取得」などデータベースを使ったアプリケーション開発に必要な命令がそろっています。

データベースに接続する為に必要な情報

データベースサーバー:MySQL
サーバーコンピューター:localhost(XAMPPの場合)
使用するデータベース名:mydb
ユーザー名:root
パスワード:root (MAMPの場合)

// 接続設定
  $user = 'root';
  $pass = '';

  // データベースに接続
 $dsn = 'mysql:host=localhost;dbname=mydb;charset=utf8';
 $conn = new PDO($dsn, $user, $pass); //「$conn」は、任意のオブジェクト名
  
  // データの追加
 $sql = 'INSERT INTO form(name, email, message) VALUES("'.$name.'","'.$email.'","'.$message.'")';
 $stmt = $conn -> prepare($sql);
 $stmt -> execute();


「入力画面」input.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ユーザー登録フォーム・入力画面</title>
</head>

<body>
<p>ユーザー登録フォーム・入力画面</p>
<form action="confirm.php" method="post">
<table>
<tr><th>お名前</th><td><input type="text" name="name" required></td></tr>
<tr><th>メールアドレス</th><td><input type="email" name="email" cols="50" required></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="message"  cols="50" rows="4"></textarea></td></tr>
</table>
<input type="submit" value="確認画面へ">
</form>
</body>
</html>

「確認画面」confirm.php

<?php
// セッションの開始
session_start();

$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
$email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES, 'UTF-8' );
$message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES, 'UTF-8' );

// 入力値をセッション変数に格納
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ユーザー登録フォーム・確認画面</title>
</head>

<body>
<p>ユーザー登録フォーム・確認画面</p>
<form action="submit.php" method="post">
<table>
<tr><th>お名前</th><td><?php echo $name; ?></td></tr>
<tr><th>メールアドレス</th><td><?php echo $email; ?></td></tr>
<tr><th>お問い合わせ内容</th><td><?php echo $message; ?></td></tr>
</table>
<input type="submit" value="データベースに登録">
</form>
</body>
</html>

「登録画面」submit.php

<?php
// セッションの開始
session_start();

$name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES, 'UTF-8' );
$email = htmlspecialchars( $_SESSION[ 'email' ], ENT_QUOTES, 'UTF-8' );
$message = htmlspecialchars( $_SESSION[ 'message' ], ENT_QUOTES, 'UTF-8' );

// 接続設定
  $user = 'root';
  $pass = '';

  // データベースに接続
 $dsn = 'mysql:host=localhost;dbname=mydb;charset=utf8';
 $conn = new PDO($dsn, $user, $pass); //「$conn」は、任意のオブジェクト名

  // データの追加
 $sql = 'INSERT INTO form(name, email, message) VALUES("'.$name.'","'.$email.'","'.$message.'")';
 $stmt = $conn -> prepare($sql);
 $stmt -> execute();


?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ユーザー登録フォーム・登録ページ</title>
</head>

<body>
<p>ご登録ありがとうございました。</p>
<p><a href="input.php">入力画面に戻る</a></p>
</body>
</html>

XAMPPのアップデート・再インストール

PHP

goma.pw


wordpressのバックアップデータ
http://yachin29.webcrow.jp/wp-backup.zip



wordpressのバックアップデータその2
http://yachin29.webcrow.jp/0708_wp.zip

メガドロップダウンメニュー

レスポンシブデザイン jQuery

最後にPC用のナビにメガドロップダウンメニューを入れます

f:id:yachin29:20160908004023p:plain



最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。


メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp


www.nike.com


www.kureha.co.jp



<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a>
<div class="Wrap">
<div class="wrapInner">
</div><!-- /.wrapInner -->
</div><!-- /.Wrap -->
</li>


メガドロップダウンメニューのCSS

/*メガドロップメニュー*/
.pc-nav ul li .Wrap {
  position: absolute;
  top: 116px;
  left: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
}
.Wrap .wrapInner {
  margin: 30px auto 0;
  width: 960px;
  height: 360px;
  background: #FFF;
  border-radius:8px;
}
.pc-nav ul li:hover:after{
  display:block;
  content: "";
  border: 10px solid transparent;
  border-bottom: 18px solid #fff;
  position: absolute;
  top: 120px;
  margin-left: 5%;
  z-index: 1000;
}


メガドロップダウンメニューのjQuery

$(function(){
  $('.pc-nav > ul > li').hover(function(){
    Panel = $(this).children('.Wrap');
    Panel.each(function(){
    Panel.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},200);
    });
  },function(){
    Panel.css({display:'none'});
  });
});

既存サイトの再構築 header部分の制作

レスポンシブデザイン

ナビゲーション部分

前回の授業で作ったギャラリー部分にナビゲーションを追加します。今回はレスポンシブサイトのナビボタンを画像で作ります。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。

参考資料(実際のボタン画像は自身で作成)

f:id:yachin29:20160906003642p:plain



スライド部分

今回のテーマは全面レイアウトを意識したスライダーです。

今回のスライダーの仕様

  • ブラウザー幅一杯にスライドを表示させる
  • 左右の画像は半透明のブラーがかかっている
  • レスポンシブサイトなので、フリックにも対応


black-flag.net

<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/photo01.jpg" alt="" /></a></li>
<li><a href="#2"><img src="img/photo02.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/photo03.jpg" alt="" /></a></li>
<li><a href="#4"><img src="img/photo04.jpg" alt="" /></a></li>
<li><a href="#5"><img src="img/photo05.jpg" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->