データベースを作成して入力フォームを実際に動かす!(ドメインキング編) | 57日目

有料レンタルサーバー「ドメインキング」でデータベースを動作させる

Dreamweaverで作成しておいた下記の4つのファイルをドメインキングのサーバーにFFFTPを使ってアップロードします。
この際、ドメインキング側でデータベースの設定、PHPの設定が必要になります。
またFFFTPの設定、Thankyouページ内の入力データを格納するためのサーバー情報、入力データを送信するためのメールの設定もひとつひとつ正確な情報を記載する必要があります。

FFFTPでのドメインキングサーバー設定方法

こちらのページをご参照下さい↓
http://www.domainking.jp/support/manual/shared/startup/ffftp.html

ドメインキングでのデータベース設定方法

こちらのページをご参照下さい↓
http://www.domainking.jp/support/manual/shared/db/db.html

ドメインキングでPHPを動作させるための設定方法

こちらのページをご参照下さい↓
http://www.domainking.jp/support/manual/shared/startup/prg_php.html

アップロードするファイル
  1. 入力フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせフォーム(1)</title>
<link rel="stylesheet" href="style.css" media="screen, print">
</head>
<body>
<form action ="check6.php" method = "post" id="inquiry">
<table summary="お問い合わせに関する入力項目名とその入力欄">
<tr>
<th><label for ="name">お名前</label></th>
<td><input type = "text" name="name" size="30" id="name" class="text1"></td>
</tr>
<tr>
<th><label for = "email">メールアドレス</label></th>
<td><input type="text" name="email" size="30" id="email" class="text2"></td>
</tr>
<tr>
<th><label for ="message">ご意見</label></th>
<td><textarea name= "message" cols="30" rows="5" class="text3" id="message"></textarea></td>
</tr>
</table>
<input type ="submit" value="確認画面へ">
</form>
</body>
</html>
  1. チェックページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認画面</title>
<link rel="stylesheet" href="style.css" media="screen, print">
</head>
<body>
<?php
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];

$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$message = htmlspecialchars($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{
	echo 'お問い合わせの内容:'.$message;
}
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="thanks5.php" method="post">'."\n";
	echo'<input type="hidden" name="name" value=" '.$name.' ">';
	echo'<input type="hidden" name="email" value="'.$email.' ">';
	echo'<input type = "hidden" name="message" value=" '.$message.' ">';
	echo'<input type ="button" onClick="history.back()" value="戻る">'."\n";
	echo '<input type="submit" value="送信">'."\n";
	echo'</form>'."\n";
}
?>

</body>
</html>
  1. Thankyouページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認画面</title>
<link rel="stylesheet" href="style.css" media="screen, print">
</head>
<body>
<?php
$dsn = 'mysql:dbname=mydb1; host=localhost';
$user = 'WEBホスティング設定で「FTPログイン」に入力した文字列(ドメインキングの場合)';
$password = 'FTPパスワードとして登録した文字列を入力';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');

$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];

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


echo $name.'様<br>'."\n";
echo 'お問い合わせ、ありがとうございました。<br>'."\n";
echo 'お問い合わせ内容『'.$message.'』を<br> '."\n";
echo $email. 'にメールで送りましたのでご確認下さい。'."\n";

$mail_sub = 'お問い合わせを受け付けました。';
$mail_body = $name."様、ご協力ありがとうございました。";
$mail_body = html_entity_decode($mail_body, ENT_QUOTES, "UTF-8");
$mail_head = 'From:メールアドレス(入力データをメールで送る先のアドレス)';

mb_language('Japanese');
mb_internal_encoding("UTF-8");
mb_send_mail($email, $mail_sub, $mail_body, $mail_head);

$sql = 'INSERT INTO inquiry(name, email, message) VALUES("'.$name.'", "'.$email.'", "'.$message.'")';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
$dbh =null;
?>
</body>
</html>
  1. 装飾用CSS
@charset "utf-8";

body{
	forn-size:1.0em;
	font-family:sans-serif;
	line-height:1.5;
	color:#333333;
	background-color:#ffffff;
}

#inquiry{
	width:600px; /* ボックスの幅を指定 */
	padding:2px 0 2px 20px;
	border-left:5px solid #C30;
}

th{
	text-align:right;
}
動作確認事項
  1. 確認メールが届くのを確認しました!
  2. データベースに入力内容が格納された事を確認しました!
  3. 成功!