ポリプロピレン

PHPを1からお勉強するブログ

Chapter3-9 アンケート項目を増やそう!実践

今回はindex.htmlとcheck.phpを編集します。

index.html

$ sudo vim index.html

iで編集モードにしたらコードを書いていきます。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<form method="post" action="check.php">
		<label>ニックネームを入力してください。</label>
		<div><input name="nickname" type="text" size="50"></div>
		<label>メールアドレスを入力してください。</label>
		<div><input name="email" type="text" size="50"></div>
		<label>ご意見を一言でお聞かせください。</label>
		<div><input name="goiken" type="text" size="100"></div>
		<p><input type="submit" value="送信"></p>
	</form>
</body>
</html>

esc→:wqで保存・終了。

check.php

$ sudo vim check.php

iで編集モードにしたらコードを書いていきます。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		$nickname=$_POST['nickname'];
		$email=$_POST['email'];
		$goiken=$_POST['goiken'];

		if($nickname=='')
		{
			print'ニックネームが入力されていません。<br>';
		}
		else
		{
			print'ようこそ';
			print $nickname;
			print'';
			print'<br>';
		}

		if($email=='')
		{
			print'メールアドレスが入力されていません。<br>';
		}
		else
		{
			print'メールアドレス:';
			print $email;
			print'<br>';
		}

		if($goiken=='')
		{
			print'ご意見が入力されていません。<br>';
		}
		else
		{
			print'ご意見『';
			print $goiken;
			print'』<br>';
		}
		?>
	</p>	
</body>
</html>

esc→:wで保存。localhost/index.htmlにアクセス

  • フォームに入力しないで送信→◯◯が入力されていません。
  • フォームに入力して送信→ようこそ◯◯様等

と表示されていれば成功です。

Chapter3-7 入力チェック機能を付けよう!実践

if命令の動き、なんとなく分かったところで、さっそくいってみましょう!もしニックネームが入力されずに[アンケート送信]ボタンが押されて飛んできたら、「ニックネームが入力されていません。」と注意文を表示します。もしニックネームが何かしら入力されていたら、「ようこそ〇〇様」と表示します。

check.phpを編集します。

$ sudo vim check.php

iで編集モードに入ります。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		$nickname=$_POST['nickname'];
		if($nickname=='')
		{
			print'ニックネームが入力されていません。';
		}
		else
		{
			print'ようこそ';
			print $nickname;
			print'';
		}
		?>
	</p>
</body>
</html>

esc→:wで保存。

これを声に出して読むと

もし$nicknameが''(空)なら「ニックネームが入力されていません。」もしそうでなければ「ようこそ〇〇様」と表示する

という意味になります。

localhost/index.htmlにアクセス

  • ニックネームを入力しないで送信→「ニックネームが入力されていません。」
  • ニックネームを入力して送信→「ようこそ〇〇様」

と表示されれば成功です。

余談:
columnにあるインデントですが、未だにつけ方がよく分かっておらず、Subline TextのEdit→Line→Reindentに頼っています。Vimでできるようにしていかないとなー。

Chapter3-6 コンピュータに考えさせよう!実践

この項は実際に作らなくてもいいよと書いてありますが、せっかくだから作ってみます。

$ sudo cp hina.html iftest.php
$ sudo vim iftest.php

iで編集モードに入り以下のコードを書いていきます。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		print'本日は';
		$a='';
		$b='';
		if($a==$b)
		{
			print'晴れ。';
			print'暖かい一日';
		}
		else
		{
			print'雪。';
			print'寒い一日';
		}
		print'になるでしょう。';
		?>
	</p>
</body>
</html>

esc→:wで保存。

個人的には、実際にコードの意味を口に出すと覚えやすいと思いました。上記の場合なら

もしaとbが同じなら「本日は晴れ。暖かい一日になるでしょう。」
もしそうでなかったら「本日は雪。寒い一日になるでしょう。」

という風に。この場合$aも'あ'、$bも'あ'で同じなので、localhost/iftest.phpにアクセスして、「本日は晴れ。暖かい一日になるでしょう。」と表示されれば成功となります。

次にiftest.phpをこう書き換えます。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		print'本日は';
		$a='';
		$b='';
		if($a==$b)
		{
			print'晴れ。';
			print'暖かい一日';
		}
		else
		{
			print'雪。';
			print'寒い一日';
		}
		print'になるでしょう。';
		?>
	</p>
</body>
</html>

esc→:wで保存。

先ほど$b='あ';だった部分が$b='い';に変わっただけですが、$aが'あ'、$bが'い'で異なるので、localhost/iftest.phpの表示結果は「本日は雪。寒い一日になるでしょう。」となるはずです。

Chapter3-5 変数ってなんでしょう!?実践

実践

check.phpを書き換えます。

$ sudo vim check.php

iで編集モードに入り追加・変更します。

<body>
	<p>
		<?php
		$nickname=$_POST['nickname'];
		print'ようこそ!';
		print $nickname;
		print'';
		?>
	</p>
</body>

esc→:wで保存します。プログラム全体は以下のようになります。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		$nickname=$_POST['nickname'];
		print'ようこそ!';
		print $nickname;
		print'';
		?>
	</p>
</body>
</html>

localhost/index.htmlにアクセス、名前を入力し、「ようこそ◯◯様」と出ていれば成功です。

変数とは

  • 変数とは数字や文字をコピーしておける箱のようなもの
  • 変数は「$」で始まり、変数名は半角小文字で自由につけられる ※ただしinput要素のname属性でつけた名前と同じにしておくのが無難
  • プログラミングの世界で「=」は、右から左へコピーせよを意味する
  • コピーした後でprint $nickname;を実行すると入力した名前が表示される
  • 変数名はシングルクオーテーションで囲まない ※囲むとそのまま文字列として画面に出てしまう
  • $_POST['〜']は、一旦変数にコピーするクセをつける ※後々プログラムがスッキリしてくる

Chapter3-4 前のページからデータを受け取ろう!実践

check.phpに追記します。

$ sudo vim check.php

iで編集モードに入り以下のように追記します。

<body>
	<p>
		<?php
		print'ようこそ!';
		print $_POST['nickname'];
		print'';
		?>
	</p>
</body>

esc→:wで保存します。プログラム全体は以下のようになります。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		print'ようこそ!';
		print $_POST['nickname'];
		print'';
		?>
	</p>
</body>
</html>

localhost/index.htmlにアクセス、フォームに名前を入力し、「ようこそ◯◯様」と表示されていれば成功です。

Chapter3-3 アンケート入力ページをつくろう!実践

前回と同じようにhina.htmlを元にindex.htmlを作ります。

$ sudo cp hina.html index.html

作ったファイルをVimで開きます。

$ sudo vim index.html

iで編集モードにしたらコードを書いていきます。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<form method="post" action="check.php">
		<label>ニックネームを入力してください。</label>
		<div><input name="nickname" type="text" size="50"></div>
		<p><input type="submit" value="送信"></p>
	</form>
</body>
</html>
  • 本ではstyleでフォームの幅が設定されていますが、ここではsize属性を使いました。
  • 本では<br />で改行を入れることで行間を開けていますが、メッセージはlabelを使いました。
  • divやpはどうかと思いましたが他に思いつかなかったのでそうしました。

:wして、フォームができていれば成功です。

Chapter3-2 初めてのPHPを体験しよう!実践

やっとプログラミングに入ります。前回作ったhina.htmlを元にcheck.phpを作ります。

$ sudo cp hina.html check.php

これで内容がコピーされました。check.phpVimで開いてみましょう。

$ sudo vim check.php

前回と同じようにiで編集モードに入り、内容を入力します。

<!doctype html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>PHP基礎</title>
</head>
<body>
	<p>
		<?php
		print'ようこそ!';
		?>
	</p>
</body>
</html>

esc→:wで保存して、localhost/check.phpを見てみましょう。「ようこそ!」と表示されていれば成功です。