JR石川町駅から徒歩2分、元町、中華街からもほど近いところによつばベーカリーはあります。国産小麦（北海道産小麦100%）を使った昔ながらのふわふわ感にこだわったパンを焼いています。パンの香りと幸せがたくさんの方に届きますように。
データベース の設定
今回はブラウザー上のフォームで入力したデータをデータベースに保存出来るようにします。
まずはXAMPPに新しいデータベースを作ります。
その次にテーブルを作成。
今回はID、名前、メールアドレス、お問い合わせ内容の4つのカラムを作成
カラムを作る際には、そのカラムのデータ型に注意しましょう。
・主なデータ型
INT型：数値。データ番号やIDなどの時。
VARCHAR型：文字数を指定。文字列の長さは変動。
TEXT型：巨大なテキストデータを保存する。
DATETIME型：日付。 投稿日時、最終更新日時など。
データベースがちゃんと機能しているか、まずはSQLを使って手動で確認してみましょう。
INSERT INTO mytable (name, email,message,date) VALUES ('山田太郎', 'yamada@gmail.com','こんにちは',now())
続いて、PHPファイルでフォームを作ります。
入力画面（input.php)
確認画面（confirm.php）
登録画面（submit.php）
session
セッションは、個々のユーザーのデータを格納する仕組みで、 個々のユーザーに対してセッション ID を用意します。 これを用いて、複数ページにまたがるリクエストの間で状態の情報を永続させることができます。 Cookie（クッキー）の仕組みととても似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。
// セッションの開始 session_start(); // 入力値をセッション変数に格納 $_SESSION['name'] = $name; $_SESSION['email'] = $email; $_SESSION['message'] = $message;
PDOでデータベースに接続し、SQLを実行する
データベースに接続する為に必要な情報
使用するデータベース名：
ユーザー名：root
パスワード：root (xamppの場合は省略)
入力画面に戻る
何か入力ミスをして、入力画面に戻った際に入力内容が全て消えていると、また最初から記入する必要があります。入力画面に戻った際に入力したデータが保持されていれば、訂正したい箇所だけ直してまた送信する事が出来ます。細かい事ですが、この設定をするとしないではフォームの離脱率に非常に影響が出るので、設定しましょう。
今回は簡単なJavascriptを使った方法で、データを保持したまま入力画面に戻る機能をつけましょう。
buttonタグの場合
<button type="button" onclick="history.back()">戻る</button>
inputタグの場合
<input value="前に戻る" onclick="history.back();" type="button">
まずはsubmit.php（データベース にデータを送信）のみを作ってDBにちゃんとデータが送信されるか、確認してみましょう。
<?php // 変数の初期化 & 日時の取得 $sql = null; $res = null; $dbh = null; $name = "名前"; $email = "aaa@aaa"; $message = "テスト"; $date = date('Y-m-d H:i:s'); try { // DBへ接続（ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード） $dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root'); // SQL作成 $sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')"; // SQL実行 $res = $dbh->query($sql); } catch(PDOException $e) { echo $e->getMessage(); die(); } // 接続を閉じる $dbh = null; ?>
また、初期設定では確認画面（confirm.php）や登録画面（submit.php）に直接アクセスしてしまうと、POSTの値が空なのでエラーが出てしまいます。それを回避する為、以下のif文を使って入力画面（input.php)にリダイレクトさせます。
if(!(isset($_POST['name']))){
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
header('Location:input.php');
exit;
}
input.php
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>DBに接続しているフォーム｜入力画面</title> <link rel="stylesheet" href="css/form.css"> </head> <body> <div class="container"> <h1>入力画面</h1> <form action="confirm.php" method="post"> <dl> <dt>お名前</dt><dd><input type="text" name="name" required placeholder="山田 太郎"></dd> <dt>メールアドレス</dt><dd><input type="email" name="email" required></dd> <dt>お問い合わせ内容</dt><dd><textarea name="message" required cols="40" rows="5"></textarea></dd> </dl> <p><input type="submit" value="確認画面へ"></p> </form> </div> </body> </html>
confirm.php（確認画面）
<?php if(!(isset($_POST['name']))){ //$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる header('Location:input.php'); exit; } $name = htmlspecialchars($_POST["name"], ENT_QUOTES); $email = htmlspecialchars($_POST["email"], ENT_QUOTES); $message = htmlspecialchars($_POST["message"], ENT_QUOTES); // セッションの開始 session_start(); $_SESSION['name'] = $name; $_SESSION['email'] = $email; $_SESSION['message'] = $message; ?> <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>DBに接続しているフォーム｜確認画面</title> <link rel="stylesheet" href="css/form.css"> </head> <body> <div class="container"> <h1>確認画面</h1> <form action="submit.php" method="post"> <dl> <dt>お名前</dt><dd><?php echo $name ?></dd> <dt>メールアドレス</dt><dd><?php echo $email ?></dd> <dt>お問い合わせ内容</dt><dd><?php echo $message ?></dd> </dl> <p> <input type="submit" value="送信"> <input type="button" value="戻る" onclick="history.back();"> </p> </form> </div> </body> </html>
submit.php（データベース にデータを送信）
<?php if(!(isset($_SESSION['name']))){ //$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる session_destroy(); header('Location:input.php'); exit; } // 変数の初期化 & 日時の取得 $sql = null; $res = null; $dbh = null; // セッションの開始 session_start(); $name = $_SESSION[ 'name' ]; $email = $_SESSION[ 'email' ]; $message = $_SESSION[ 'message' ]; $date = date('Y-m-d H:i:s'); ?> <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>最終画面</title> </head> <body> <h1>お問い合わせ、ありがとうございました。</h1> <P><a href="input.php">入力画面に戻る</a></P> <?php try { // DBへ接続（ホスト名※ポート番号は入れない、db名、dbユーザー名、dbパスワード） $dbh = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', 'root'); // SQL作成 $sql = "INSERT INTO mytable (name, email, message, date) VALUES ('$name','$email', '$message', '$date')"; // SQL実行 $res = $dbh->query($sql); } catch(PDOException $e) { echo $e->getMessage(); die(); } // 接続を閉じる $dbh = null; //最後にセッション情報を破棄 session_destroy(); ?> </body> </html>
PHPでセッション情報をコントロールする
セッション（session）とは
セッションとは、コンピュータのサーバー側に一時的にデータを保存する仕組みのことです。たとえば、あるECサイトへのログイン情報やユーザー情報など、ユーザーに直接紐づくようなデータをセッションに格納して使ったりします。
以前、授業で使ったCookie（クッキー）の仕組みと似ていますが、Cookieはブラウザ側、セッションはサーバー側と、それぞれデータの保存場所が異なります。サーバーにデータを保存するセッションのほうがよりセキュリティ的に安全だと言われています。
セッションの使い方
セッションを使う場合、まず最初にsession_start関数 を使い、スタートさせてからその下に諸々を書いていきます。
session_start();
次にセッションを使ってデータを保存したい場合は、セッション用のグローバル変数を使用します。
<?php session_start(); $name = 'yajima'; $_SESSION['name'] = $name; echo $_SESSION['name']; ?>
この時点で、サーバー（XAMPP）にセッションデータが保存されているので、確認してみましょう。XAMPPの場合だとhtdocsフォルダと同じ階層のtmpフォルダに作成されているので確認してみましょう。
(mampの場合はtmp→phpの中)
セッションのデータの中身を削除
<?php session_start(); $name = 'yajima'; $_SESSION['name'] = $name; echo $_SESSION['name']; unset($_SESSION['name'] ); ?>
セッションを終了
<?php session_start(); $name = 'yajima'; $_SESSION['name'] = $name; echo $_SESSION['name']; session_destroy(); ?>
スマートフォンの時だけ電話番号のリンクを有効にする
スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリンク扱いになってしまいます。
PCで確認
http://felica29.starfree.jp/tel/
スマホで確認
なので、まずmetaタグで
<meta name="format-detection" content="telephone=no">
と記述し、
実際の電話番号へのリンク部分に
<a href=”tel:0312345678”>お電話はこちら</a>
というリンク設定をします。
ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。
pointer-events
pointer-eventsはマウスイベント（hover , click など）の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。
今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。
/*pcの時*/ a[href^="tel:"] { pointer-events:none; } @media screen and (max-width:767px){} /*spの時*/ a[href^="tel:"] { pointer-events:auto; } }
これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。
srcsetを使ってimg要素を切り替える
img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。
srcsetとは
- srcsetはHTML5で策定された新属性
- この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
- IEでは使うことが出来ない(http://caniuse.com/#search=srcset)
picture要素
picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。
- media属性(メディアクエリ)
- srcset属性
- sizes属性
srcset属性
画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。
sizes属性
表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例：ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。
sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース
今回の仕様はPC画像とSP画像の２つを用意して
- デバイスの横幅が1200px以上の場合は1200px幅のpc用画像を画面中央に表示
- デバイスの横幅が1200px~641pxの間は1200px幅のpc用画像を画面画面一杯にフルードで表示。
- デバイスの横幅が640px以下の場合は640px幅のsp用画像を画面一杯にフルードで表示。
※imgにフルードイメージの設定を必ず指定
<body> <picture> <source media="(min-width:1200px)" srcset="img/pc.jpg 1200w" sizes="1200px"> <source media="(min-width:641px)" srcset="img/pc.jpg 1200w" sizes="100vw"> <source media="(max-width:640px)" srcset="img/sp.jpg 640w" sizes="100vw"> <img src="img/sp.jpg" alt=""> </picture> </body>
レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。
サイト制作における画像の設定
img要素で見せる場合
ページの情報の1部として見せる
・フルードで表示させる場合
（max-width:100%ので原寸より大きくは見せられない、アスペクト比は一定）
・object-fitで表示させる場合（IEは未対応）
幅・高さを自由に指定して表示させる事が可能（background-sizeと似たように表示出来る）
・srcsetを使ってデバイスごとに複数の画像をimg要素で表示させる
背景画像で見せる場合
あくまでもサイトの雰囲気作りに必要な画像
・background-sizeで見せる
・heigthの代わりにpaddingを使う事で背景画像をアスペクト比を保ったまま可変にする事も可能
