PHP 電卓を作る。そしてHTML内部を探る

muroiです。

今日のPHPでは、ヘッダ情報についてと、formを利用して簡単なかけ算の表と計算機を作成しました。

まずヘッダー情報について見ていきます。
(・・・下記はヘッダーの一部のみとなります。)

Requestの例
1 GET /test/test.php HTTP/1.1
2 USER-Agent :********************
3 Referer :http://www.dino.co.jp/
4
Responseの例
5 HTTP/1.1 200 OK
6 Content-Length :300
7 Content-type :text/html
8 以下にメッセージボディが入ります

上記のヘッダー情報について、番号順に説明していきます。
まず始めの1番には、リソースを取得(GET)するための指示とHTTPバージョンが記されています。
2番には、そのRequestを送信してきた人のブラウザ情報や、OS情報など様々なものが含まれます。
3番はリファラといい、リンク元情報(そのRequestを送信した人が、前に見ていたページのURL)が記されています。
4番の空白行は、requestヘッダとresponseヘッダを分けるためにあります。
5番からはresponseヘッダについてとなります。まず処理の結果を示す応答コードと、HTTPバージョンが記されています。(この場合はステータスコードが200 okと戻ってきているので正常に処理されたこととなります。)
6番は、そのHTMLの全体のサイズが記されています。(300という事なので300バイトとなります)
7番目には、このresponseの中身がHTMLか画像(img)なのかなど、タイプが記されます。
最後の8番にはメッセージボディが入っており、ここからHTMLタグや文書を取り出しブラウザで見れるよう生成されていきます。


次にformを使って、簡単なプログラムを2つ作成しました。
まず1つ目の課題に、以前作った掛け算九九の表を数字いくつにしても表示できるようにと、入力ボックスを2つ用意し、値が様々なものに対応できる掛け算表を作成しました。
以下がソースの記述となります。色々と問題はまだあるのですが、半角の数字のみならなんとか対応できるようになっています。

ソース:


<html>
<head><title> かけ算表</title></head>

<body>

<p>最大100までのかけ算の表が作れます。</p>

<form method = "POST" action = "kuku.php">
   <input type = "text" name = "num1" />
   *<input type = "text" name = "num2"/>
   <input type ="submit" value = "ボタンを押して表を表示!"><br />
</form>
<?php
   if (isset($_POST["num1"]) != null) {
     if ($_POST["num1"] <= 100 && $_POST["num2"] <= 100) {
       echo "<table border="1">";
       for ($i =1; $i <= $_POST["num1"]; $i++) {
	 echo "<tr>";
	 for ($j=1; $j <= $_POST["num2"]; $j++) {
	   echo "<td>".$i."*".$j."=".($i*$j)."</td>";
	 }
	 echo "</td>";
       }
       echo "</table>";
     } else {
       echo "<p>できたら、値は半角の100以下でお願いします・・</p>";
     }
   }
?>
</body>
</html>

といった感じとなります。まだまだ改良の余地があるので直していかねば・・・。


次の2つ目の課題も、フォームを利用して簡単な計算機を作成しました。(まだまだ計算機と言えるのもではないのですが・・)
入力ボックス2つと、演算子を選ぶための4つボタンから作られています。

ソース:


<html>
<head><title>計算機(試作)</title></head>
<body>
<p>
けいさん!!
</p>

<form method = "POST" action ="keisan.php">
   <input type ="text" name ="num1" />
   <input type ="text" name ="num2" / ><br />
   <input type ="submit" value = "+" name ="button" />
   <input type ="submit" value = "-" name ="button" />
   <input type ="submit" value = "*" name ="button" />
   <input type ="submit" value = "/" name ="button" />
</form>

<?php
   if (isset($_POST["num1"])!= null) {
     if ($_POST["num1"] != 0 && $_POST["num2"] != 0) {
       echo "<p>計算結果".$_POST["num1"].$_POST["button"].$_POST["num2"];
       echo "は・・・</p>";
       switch($_POST["button"]) {
       case "+":
	 echo $_POST["num1"]+$_POST["num2"];
	 break;
       case "-":
	 echo $_POST["num1"]-$_POST["num2"];
	 break;
       case "*":
	 echo $_POST["num1"]*$_POST["num2"];
	 break;
       case "/":
	 echo $_POST["num1"]/$_POST["num2"];
	 break;
       }
       echo "</font>";
     }  else if (is_numeric($_POST["num1"]) == false || is_numeric($_POST["num2"]) == false) {
       echo "文字ダメ!!絶対!!!";
     } else {
       echo "0ダメ!!絶対!!!";
     }
   }
?>

<body>
</html>

となります。
こちらもまだまだ改善すべき所が大量にあります・・。
しかし、実習となり自分で考えて作っていくのはほんとに勉強になると思いました。これからも何か考えていろいろな事に挑戦していきたいです。
と、まずはこの2つのソースを改良していかねば!

—-
(2008/05/22 18:34 hirafuji追記)
動画をご覧下さいです!

part.1

part.2

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree