jQuery mobileで作成したスマートフォンサイトのお問合せフォームを動かす - ＷＥＢクリエイター修行日記

ASCII 「西畑一馬のjQuery Mobileデザイン入門」に沿ってスマートフォンサイトのデザインを作成

「お問合せ」ページからPHPで作成したチェック画面、サンキュー画面へ遷移させます。

サンキュー画面ではレンタルサーバーのデータベースに入力データ格納、入力者emailと管理者emailにメール送信させます。

ページ遷移の流れ

index.html→form.php→thanks.php

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css">-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
     $.mobile.defaultTransition = "flip";
});
</script>
<script>
$(document).bind("mobileinit", function(){
	$.mobile.page.prototype.options.addBackBtn=true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
.ul-body-b{
	background:#ccc;
	background-image:-moz-linear-gradient(top, #FFF, #CCC);
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF', EndColorStr='#CCC')";
}
.ui-content .h1{
	color:#5E87B0;
	font-size:17px;
	text-shadow:1px 0 0 #FFF;
}
.wordbreak{
	overflow:visible;
	white-space:normal;
}
div#map{
	width:100%;
	height:400px;
	border:4px solid white;
	-webkig-box-sizing:border-box;
	box-sizing:border-box;
}
	
</style>
    <script>
$(function(){
  var myLatlng = new google.maps.LatLng(35.7101389,139.8108333);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, 
  });
 $('div#access').live('pageshow',function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(myLatlng);
  });
});
</script>
</head>
<body>
  <div data-role="page" id="index" data-theme="b" >
  <div data-role="header">
    <h1>Coolbodymaker</h1>
    </div>
    <div data-role="content">
    <ul data-role="listview" data-inset="true">
 <li data-role="list-divider">Menu</li>
<li><a href="#about" data-transition="flip"><h3>Coolbodymakerについて</h3></a></li>
<li><a href="#seminar"><h3>セミナー情報</h3></a></li>
<li><a href="#access"><h3>アクセス</h3></a></li>
<li><a href="#contact"><h3>お問い合わせ</h3></a></li>
 </ul>
  </div>
  <div data-role="footer">
  <h4>&copy; 2013 Coolbodymaker</h4>
  </div>
  </div>
  
  <div data-role="page" id="about" data-theme="b" data-back-btn-text="戻る">
  <div data-role="header">
  <h1>Coolbodymaker</h1>
  </div>
   <div data-role="content">
  <h2 class="h1">Coolbodymakerについて</h2>
    <p>Coolbodymakerは東京を中心に活動するWEB制作事務所です</p>
   <p>PHPやJavaScriptによるWEB開発や、wordpressなどのCMSを利用したWEBサイト制作、SEO対策・SEM対策などのマーケティングを行なっています。</p>
    <h2>coolbodymakerについて</h2>
    <p>1979生まれ</p>
    <p>フェリカテクニカルアカデミーWEBサイト制作科にて学ぶ。</p>
  </div>
  <div data-role="footer">
  <h4>&copy; 2013 Coolbodymaker</h4>
  </div>
  </div>
  
  <div data-role="page" id="seminar" data-theme="b">
  <div data-role="header">
  <h1>Coolbodymaker</h1>
  </div>
    <div data-role="content">
    <h2 class="h1">セミナー情報</h2>
    <ul data-role="listview" data-inset="true">
    <li><a href="＃">
    <h3>WDF Vol.1</h3>
    <p class="wordbreak">小金井市　小金井文化会館</p>
    <p>2013年6月11日</p>
    </a></li>
    <li><a href="#">
    <h3 class="wordbreak">CoolbodymakerのCSS3でつくるスマートフォンサイト講座</h3>
    <p>府中市　グリーンホール</p>
    <p>2013年７月14日</p>
    </a></li>
    <li><a href="#">
    <h3>SaCSS Special!</h3>
    <p>所沢市　ミューズホール</p>
    <p>2013年7月23日</p>
    </a></li>
    </ul>
    </div>
    <div data-role="footer">
  <h4>&copy; 2013 Coolbodymaker</h4>
  </div>
  </div>
  
    <div data-role="page" id="access" data-theme="b">
    <div data-role="header">
  <h1>Coolbodymaker</h1>
  </div>
    <div data-role="content">
    <h2 class="h1">アクセス</h2>
    <div id="map" class="ui-shadow">
    </div>
    <div  data-role="mid">
    <h3>
    <a href="tel:03-0000-0000">03-0000-0000</a>
    </h3>
    <h3>
    <a href="mail:abcd@aaaaa.com">abcd@aaaaa.com</a>
    </h3>
    </div>
        <div data-role="footer">
  <h4>&copy; 2013 Coolbodymaker</h4>
  </div>
  </div>
  </div>
  
	<div data-role="page" id="contact" data-theme="b">
		<div data-role="header">
			<h1>Coolbodymaker</h1>
		</div><!--header end-->
		<div data-role="content">
	<h2 class="h1">お問い合わせ</h2>
	<form action="form.php" method="post">
    
    
<div data-role="fieldcontain"> 
			<label for="name">お名前</label>
			<input type="text" name="name" id="name">
</div>
 
<div data-role="fieldcontain"> 
<label for ="email">メールアドレス</label>
<input type="text" name="email" id="email">

</div>     
      

 <div data-role="fieldcontain"> 
      <label for="gender">性別</label>
      <select name="gender" id="gender" data-role="slider">
      <option value="男性">男性</option>
      <option value="女性">女性</option>
      </select>
      </div>
      
<div data-role="fieldcontain">     
<fieldset data-role="controlgroup">
<legend>お問い合わせ種類を選んでください</legend>
<input type="checkbox" name="checkbox[]" id="check1" value="HP新規作成">
<label for="check1">HP新規作成</label>
<input type="checkbox" name="checkbox[]" id="check2" value="HPリニューアル">
<label for="check2">HPリニューアル</label> 
<input type="checkbox" name="checkbox[]" id="check3" value="システム開発">
<label for="check3">システム開発</label>
<input type="checkbox" name="checkbox[]" id="check4" value="コンサルティング">
<label for="check4">コンサルティング</label>
 </fieldset>
		</div>
    
<div data-role="fieldcontain">     
 <label for="textarea">お問い合わせ内容</label> 
  <textarea cols="40" rows="8" name="message" id="message"></textarea>
  </div> 
 
   <input type="submit" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
  <input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">   
	</form>

		</div><!--content end-->

    <div data-role="footer">
  <h4>&copy; 2013 Coolbodymaker</h4>
  </div><!-- footer end-->
  </div>
</body>[http://coolbodymaker.com/coolbodymaker_m/:title]
</html>

form.php

<?php
$name=$_POST['name'];
$email=$_POST['email'];
$gender=$_POST['gender'];
$checkbox=implode(",", $_POST['checkbox']);
$message=$_POST['message'];

$name=htmlspecialchars($name);
$email=htmlspecialchars($email);
$gender=htmlspecialchars($gender);
$checkbox=htmlspecialchars($checkbox);
$message=htmlspecialchars($message);

?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<title>確認画面</title>
<style>
h2{
	font-size:1.2em;
	margin:0;
	padding:0;
}
p{
	text-indent:2em;
}
</style>

</head>
<body>

<div data-role="page" data-add-back-btn="true" data-back-text="戻る">

<div data-role="header" data-position="inline">
<h1>確認画面</h1>
</div><!--header end-->

<div data-role="content" id="Contents">

入力内容をご確認ください。<br>
間違いがないようでしたら送信ボタンをタップしてください。

<div data-role="fieldcontain">
<?php 
if($name==''){
	print ('<td>お名前: </th>'.'<td>お名前が入力されていません</td></tr><br>'."\n");
} else {
	print ('<th>お名前:</th><td>'. $name. ' 様</td></tr><br>'."\n");
}
if($email==''){
	print ('<th>メールアドレス: </th>'.'<td>メールアドレスが入力されていません</td></tr><br>'."\n");
} else {
	print ('<th>メールアドレス:</th><td>'. $email.'</td></tr><br>'. "\n");
}
if($gender==''){
	print ('<th>性別: </th>'.'<td>性別が入力されていません</td><br>'."\n");
} else {
	print ('<th>性別:</th><td>'. $gender.'</td></tr><br>'. "\n");
}
if($checkbox==''){
	print ('<th>お問合せ種別: </th>'.'<td>お問合せ種別が選択されていません</td><br>'."\n");
} else {
	print ('<th>お問合せ種別:</th><td>'. $checkbox.'</td></tr><br>'. "\n");
}
if($message==''){
	print ('<th>お問合せ内容: </th>'.'<td>お問合せ内容が入力されていません</td><br>'."\n");
} else {
	print ('<th>お問合せ内容:</th><td>'. $message.'</td></tr><br>'. "\n");
}

?>

<div data-role="fieldcontain">
<?php
if(empty($name)||empty($email)||empty($gender)||empty($checkbox)||empty($message)){
	print'<form>'."\n";
	print '<input type="button" onclick="history.back()" value="戻る" ';
    print '</form>'. "\n";
}else{
	print'<form action="thanks.php" method="post">'."\n";
	print'<input type="hidden" name="name" value="'.$name.'">'."\n";
	print'<input type="hidden" name="email" value="'.$email. '">'."\n";
	print'<input type="hidden" name="gender" value="'.$gender. '">'."\n";
	print'<input type="hidden" name="checkbox" value="'.$checkbox. '">'."\n";
	print'<input type="hidden" name="message" value="'.$message.'">'."\n";
	print'<input type="button" onClick="history.back()" value="戻る">'."\n";
	print '<input type="submit" value="送信"'.  "\n";
    print '</form>'. "\n";
	
}
?>
</div>
</div><!-- content end -->

<div data-role="footer" data-position="fixed">
<h4>&copy;Coolbodymaker</h4>
</div><!-- footer end-->
</div><!-- page end-->

</body>
</html>

thanks.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問合せありがとうございました</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-back-text="戻る">

<div data-role="header" data-position="inline">
<h1>Thank You</h1>
</div><!--header end-->

<div data-role="content" id="Contents">

<div id="confirmation">
<?php
 $dsn = 'mysql:dbname=データベース名;host=localhost(ドメインキングの場合はlocalhost）';
 $user = 'レンタルサーバーと契約したユーザー名';
 $password = 'レンタルサーバーにログインする時のパスワード';
 $dbh = new PDO($dsn, $user, $password);
 $dbh -> query('SET NAMES UTF8');

 $name = $_POST['name'];
 $email = $_POST['email'];
 $gender = $_POST['gender'];
 $checkbox =$_POST['checkbox']; 
 $message = $_POST['message'];
	
 $name = htmlspecialchars($name);
 $email = htmlspecialchars($email);
 $gender = htmlspecialchars($gender); 
 $checkbox = htmlspecialchars($checkbox); 
 $message = htmlspecialchars($message);


	echo $name.'様<br>'. "\n";
	echo 'お問い合わせ、ありがとうございました。<br>'. "\n";
	echo 'お問い合わせ内容『'.$message.'』<br>'. "\n";
	echo '性別：『'.$gender.'』<br>'."\n";
	echo 'お問合せ種別:『'.$checkbox.'』<br>'."\n";
	echo 'ご入力いただいた'.$email.'宛てにメールで送りましたのでご確認ください。'. "\n";
	
// メール本文の組み立て
mb_language("Ja");
mb_internal_encoding("UTF-8");

$mail_head="From:info@coolbodymaker.com";
$subject = "お問い合せを受け付けました。";
$to = "info@coolbodymaker.com, {$email}";
$title = "【Coolbodymakerメールフォームより】";
$body =  <<<EOM
--------------------------------------------------
【Coolbodymakerからのメール】
お問合せありがとうございます。
下記の内容でお問合せを承りました。

お名前：{$name}
メールアドレス：{$email}
性別：{$gender}
お問合せ種別：{$checkbox}
メッセージ：{$message}
--------------------------------------------------
EOM;

// メール送信の実行
$rc = mb_send_mail($to, $title, $body, $mail_head);
	
$sql = 'INSERT INTO テーブル名(name, email, gender, checkbox, message) VALUES("'.$name.'","'.$email.'","'.$gender.'","'.$checkbox.'","'.$message.'")';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

$dbh = null;
?>
</div>
</div><!-- content end -->

<div data-role="footer" data-position="fixed">
<h4>&copy;Coolbodymaker</h4>
</div><!-- footer end-->
</div><!-- page end-->


</body>
</html>

デモ

今回は先生のブログだけでは問題解決にいたらず。upquarkさんとtokiyoさんがブログに掲載したソースを大いに参考にさせてもらいました。というか、一旦丸コピーして正常動作を確認後、自分用にほんのすこーし調整しただけ・・。

そんな中でも１ステップ進めるたびに動かない！現象が発生しました。
わかっている人から見れば「バカなんじゃないの！？」というような理由ばかりだとは思いますが、２週間後の私はまた同じ過ちを繰り返しそうなので、まだ覚えているうちに原因をメモ書きしましょう。

動かない理由は、ささいな事の積み重ねです。イノベーションが小さなことの積み重ねなのと同じように・・（たぶん）

失敗の理由その一

テストサーバーXampp/htdocs下に置いていない状態で実行させていた。
これだと、form.phpのページに遷移した後、画面上にhtml化されていないPHPがそのまま出ちゃいます。
昨日までちゃんと動いたのに、なんでなんで！？とあせりましたが、幸いなことにはっと気づきました。

失敗理由その二

checkboxの値を返して来ないよ！
checkboxということは、複数の回答が出ているのだから、それを仕分けてあげる何かをしないと動かないですねー。うまくいかなくなって初めてその事に思い至ります。

implode("区切り文字","文字化する配列");　　こういう書き方で仕分けられます。今回は区切り文字は,（カンマ）にします。
implode(",","$_POST['checkbox']"); 　これでオッケー！　のはずが！　痛恨の綴りミス！ improdeになってるよ！　オーノー！

失敗理由その三

さらに綴りミス！　checkboxがchechkboxになってる！！！

失敗理由その四

確認メールが送られない、データベースにも書き込まれない。
あーーーそうだ！Xamppではダメだったんだ！テストサーバーにアップロードしなければメールは送れないって、さんざんやったではないか！

失敗理由その五

データベースへの書き込みを失敗する。
わわっ！　フィールドの照合順序がひとつだけ、utf8_general_ci　ではなくなっている！眠いときに無理やり作業するとこういうのが発生するんだな・・・

直したのにまだ書き込まれない。
主キーフィールドの「code」をオートインクリメントにしてないからかな？　直してみよう。　おお〜、書き込まれている！

やっと全部動いたよう・・・。長い道のりであった。
一度正常動作を確認すると、今度はいままで気にならなかったデザイン的にはまだまだな仕上がりであることが目に付き始めますが、一旦ここまで達成した事を喜びましょう！がんばったよ、私！