はじめてのプログラム

HOME   >   はじめてのプログラム >   簡易計算機(足し算)

【使用方法】
・ここをクリックすると、以下の全Stepを開いたり閉じたりします。
[Click here to Open/Close for all steps]
・以下のStepタイトルをクリックすると、そのStepを開いたり閉じたりします。

Eclipse起動

PHP は初心者にも親しみやすく解りやすいプログラム言語です。

まずPHPに親しんでもらうために、コンピューターが「足し算」をしてくれる、簡単な計算機のプログラムを作ってみましょう!

うまく計算機が動いたら・・・

あなたにはプログラミングのセンスがあるかも しれません・・・!!

ではまず、eclipseを起動しましょう。

eclipseは、IBMが開発した開発ツールです。オープンソース(無償)ですが、プロの現場でも広く使われています。

パソコンのデスクトップにある、【PHP】eclipseショートカットのアイコンをダブルクリックしましょう。

php eclipse

アイコンをダブルクリックすると、下のような画面が出てくると思います。

 

ワークスペースランチャー

迷わず、『OK』をクリックしましょう。

Eclipse プラットフォームが出てきます。これで準備はOKです。

それでは、計算機プログラムを作っていきましょう!

ところどころ、出てくる単語が聞きなれなくて、ちょっと戸惑ってしまうかもしれませんが、心配する必要はありません。

わからない単語は、とりあえずわからないまま進めてOKです!

「プログラミングってこういうものなんだ・・・」というのが、なんとなくつかめればOKです。

 

プロジェクト作成

では、プロジェクトを作成します。プロジェクトとはいくつかのプログラムをまとめたもので、 プログラムを開発する上での 1 つの単位です。 ここでは、「myproj」プロジェクト名で行われます。 早速作業に取り掛かります。


新規プロジェクトの作成(準備)

「ファイル」→「新規」→「PHPプロジェクト」を選択。

図 1  新規プロジェクト作成時の操作


新規プロジェクトの作成

プロジェクト名に「myproj_名字のローマ字」(名字が神田の場合は「myapp_kanda」)
     と入力し、「完了」ボタンをクリック


新規プロジェクトの確認

パッケージエクスプローラ内に新しくプロジェクト「myproj_kanda」が作成されました。

パッケージエクスプローラとは、下の図の左側に見える、白い枠内のことです。


図 2 新規プロジェクト作成時ウィンドウ



ページの先頭へ

テキスト・ファイル・エンコードの確認と設定

プロジェクトのテキスト・ファイル・エンコードを確認し、作成するコンテンツに対応した文字コードを設定します。


プロパティの選択

「作成したプロジェクトを右クリック」→「プロパティー」を選択


エンコードの確認

テキスト・ファイル・エンコードを確認

※当スクールのEclipseではテキストファイルのエンコードがデフォルト設定がMS932になっています。
MS932とはShift_JISを拡張して定義したコード体系です。

エンコードの選択

テキスト・ファイル・エンコードを「その他」から「UTF-8」を選択し「OK」ボタンを押します。


ページの先頭へ

HTMLファイルの作成

HTMLファイルの作成(準備)

パッケージ・エクスプローラのプロジェクトのmyproj_kandaプロジェクト名で右クリックし、「新規」→「HTML」と選択します。

図 3  新規HTMLファイル作成時の操作


HTMLファイルの作成

ファイル名に「sample_calc.html」と入力し、「完了」をクリック。

図 4  新規HTMLファイル作成時のウィンドウ


HTMLソースの確認

パッケージ・エクスプローラで作成したファイルをダブルクリックすると、右側のエディターでソース内容を確認できます。 Eclipseではファイル作成の時点で、ここまでソースを自動的に作成してくれます。 また、あとからソースコードを見やすくするために、プログラム内の文字列の色付けや書体の変更も自動的に行ってくれます。

図 5  新規HTMLファイル作成後の画面


HTMLコードの作成

エディターの部分にコードを作成します。

エディターとは、右側にある、縦方向に1、2、3、4・・・と番号が振ってあるエリアのことを指します。

このエリアで、プログラムを色々と編集したりするんですね!

下のコードと同じになるように、エディタ内を編集してください。

sample_calc.html
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>sample_calc.html</title>
  </head>
  <body>
    <form name="form1" action="sample_calc.php" method="post">
      <input type = "text" name = "txtA"> + 
      <input type = "text" name = "txtB"> = ? 
      <br>
      <input type="submit" value="計算">
    </form>
  </body>
</html>
                

図 6  ソース編集後の画面

編集する際には、ソースをコピーして貼り付けても構いませんが、コピーして張り付けると、それぞれの行の左側に、"#"のマークが出てきます。

"#"マークは、全部消してください。

ソースをコピーする場合は、この文章の2つ上の図の左上に書かれている、[view plain]という文字をクリックしてください。

[view plain]をクリックすると、ソースが書かれたウィンドウが立ち上がりますので、このウィンドウからソースをコピーしてください。

編集が終わったら上書き保存してください。


図 7  ファイルの上書き保存


これでHTMLファイルの作成は終了です。
ページの先頭へ

PHPプログラムの作成

PHPファイルの作成(準備)

パッケージ・エクスプローラのプロジェクトのmyproj_kandaプロジェクト名で右クリックし、「新規」→「PHPファイル」と選択します。

図 7  新規PHPファイル作成時の操作


PHPファイルの作成

ファイル名に「sample_calc.php」と入力し、「完了」をクリック。

図 8  新規PHPファイル作成時のウィンドウ


PHPソースの確認

Step3) HTMLファイル同様、パッケージ・エクスプローラで作成したファイルをダブルクリックすると、右側のエディターでソース内容を確認できます。

図 9  新規PHPファイル作成後の画面


PHPコードの作成

Step4) エディターの部分にコードを作成します。下のコードと同じになるように、エディタ内を編集してください。
sample_calc.php
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>calc.php</title>
  </head>
  <body>
    <?php
      $a = $_POST['txtA'];
      $b = $_POST['txtB'];
      $c = $a + $b;
      print ($a." + ".$b." = ".$c."\n");
    ?>
  </body>
</html>
                

図10  ソース編集後の画面

編集が終わったら上書き保存してください。 これでPHPプログラムの作成は終了です。
ページの先頭へ

Webサーバの起動

プログラムの作成は完了しましたので、実際に、プログラムを動かしてみたいと思います。

まず、Webサーバを起動します。

パソコンのデスクトップにある、xampp-controlのアイコンをダブルクリックしましょう

xamppのアイコン

すると、下のような画面が立ち上がります。[Apache]と書かれた右側にある、「開始」のボタンを押してください。

xamppのパネル

 

「開始」ボタンを押すと、『実行中』という文字が現れます。

xamppコントロールパネル 開始

これで、準備は完了しました!

では、うまくプログラミングが動くか、確認してみましょう!

 

プログラムの動作確認

URLの入力

ブラウザを起動し、URLに「http://localhost/myproj_XXXX/sample_calc.html」と入力します。

XXXXの部分は、あなたが最初につけたプロジェクト名を入れてください。

たぶん、『名字の名前』になっているはずです。

うまくいけば、下のような画面が表示されます。

ちゃんと表示されましたか?

これが、あなたが作った、『足し算プログラム』の画面です!


図11  sample_calc.htmlのブラウザ表示

 

それでは、ちゃんと計算できるかどうか、確認してみましょう!

PHPプログラムの実行

2つのテキストボックスに、なんでも良いので、任意の半角数字を入力し、「計算」ボタンをクリックします。


そうすると、下の画面のように計算式と結果が表示されます。
↓↓↓↓↓↓↓↓↓

上のサンプルでは、5+8 を計算して、13という正しい答えが出ています。

あなたが作成した計算機は、どうですか?

ちゃんと、足し算をしてくれましたか?

 

もし、このプログラムの作成がうまくいったら・・・

あなたには、今まで隠れていた、プログラミングのセンスがあるのかもしれません!

ぜひ、これをきっかけに、プログラミングの世界へ、飛び込んで見ましょう。

(通常は、一回ではうまくいきません。何回か失敗した人も、気にしなくて大丈夫です。)

 

今回、あなたが少しだけ体験した、このPHPというプログラミング言語を使えば、ショッピングカートや掲示板など、色々なものを作ることができます。

 

神田ITスクールのPHP講座では、たくさんのアプリケーション作成を通して、実践的な技術を身に着けていきますので、毎日、ワクワクしながら勉強を進めることができると思います。

ぜひ、一緒に勉強して、新しいスキルを身に着けましょう!!

ページの先頭へ