PHPstep

トップページ > PHPを始めよう > PHPファイルを作ってみよう

第一章 PHPを始めよう

PHPファイルを作ってみよう

第一章では、PHPによるウェブ開発を始めるための準備をしました。 今回から始まる第二章では、PHPによるプログラミングについて解説していきます。

もし、ウェブ制作の基本となるHTMLとCSSがどのようなものか分からないという方は、 よろしければ 「HTMLを簡単に知っておこう」 「CSSを簡単に知っておこう」 も読んでみてください。

PHPファイルの保存場所を用意しよう

今回から実際にPHPファイルを作成していきます。 まずは、これから作成していくPHPファイルの保存場所を用意しましょう。

XAMPPをインストールした際に作成されるxamppフォルダの直下に、「htdocs」という名前のフォルダがあるはずなので探してみてください。 XAMPPをインストールした際に特にインストール先を指定していなければ、「C:\xampp\htdocs」です。

XAMPPのインストール時にCドライブの直下以外を指定した方は、 ご自分の指定した場所にxamppフォルダが出来ているはずなので探してみてください。

htdocsは特別なフォルダ

xamppフォルダ直下のhtdocsフォルダが見つかったら、 htdocsフォルダの直下に「sample」という名前のフォルダを新規作成してください。

フォルダを新規作成するだけなので、下記のようにsampleフォルダの中は何も無い空の状態となります。

htdocsは特別なフォルダです。 htdocsフォルダの中にフォルダやファイルを作成すると、 あたかもウェブサーバーにフォルダやファイルをアップロードしたかのように、ブラウザでプログラムの処理結果などの表示確認ができるようになります。

いま、xamppフォルダ直下のhtdocsフォルダに「sample」という名前のフォルダを作成しました。 これは、仮想的なウェブサーバーにsampleフォルダをアップロードしたようなものだとお考えください。

このレッスンでこれから作成していくサンプルサイトのPHPファイル、CSSファイル、画像ファイルなどは、 いま作成したsampleフォルダ以下に保存していくことにします。

PHPファイルを作成しよう

いま作成したsampleフォルダの中にPHPファイルを作成していきましょう。

テキストエディタを立ち上げて、メニューから[ファイル]→[新規作成]と選択します。 新規作成したファイルに以下の内容を記述してください。

サンプルソース:test.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP表示テスト</title> </head> <body> <?php echo "PHPの表示テストです!"; ?> </body> </html>

タグやプログラム部分には全角文字は使用せず、すべて半角で入力します。 スペースも全角ではなく半角で入力します。 タグやプログラムを全角で入力するとうまく表示されないので注意してください。

入力が完了したら、テキストエディタのメニューから[ファイル]→[名前を付けて保存]と選択します。 保存場所は先ほど作成したsampleフォルダの直下、ファイル名は「test.php」にして保存します。

【図】

拡張子を「.html」や「.htm」ではなく、「.php」にして保存した点に注目してください。 拡張子「.php」は、そのファイルがPHPファイルであることを表します。

ブラウザで表示確認してみよう

いま作成したtest.phpをブラウザで表示確認してみましょう。 表示確認の手順は以下の通りです。

  1. XAMPPのコントロールパネルを立ち上げて、コントロールパネルの中のApacheをStartさせます。
  2. ブラウザを立ち上げてアドレス欄に http://localhost/sample/test.php と入力します。

ブラウザの画面が、以下のように表示されれば成功です。 画面内には「PHPの表示テストです!」とだけ表示されているはずです。

【図】

初めての表示確認ですから、もしかすると表示結果が期待した通りならなかったかもしれません。 上記のような画面表示とならない理由としては、以下の原因などが考えられます。

  1. XAMPPを立ち上げていない。
  2. XAMPPは立ち上げているが、コントロールパネルのApacheをStartさせていない。
  3. test.phpを保存する際にtest.phpとするなど、ファイル名に全角文字を使用している。
  4. ブラウザで表示確認する際に、アドレス欄に入力するURLを打ち間違えている。

作成したソースを確認してみよう

いま作成したtest.phpのソースを確認してみましょう。

PHPのプログラムソースは <?php と ?> の間に記述します。 いま作成したtest.phpでいうと、 <?php と ?> の間に記述された「echo "PHPの表示テストです!";」の部分がPHPプログラムです。

サンプルソース:test.phpの抜粋
<?php echo "PHPの表示テストです!"; ?>

PHPファイルでは、HTMLソース中に<?php ~ ?>でPHPのプログラムソースを挿入することができます。 HTMLソースを編集する延長線のようにPHPプログラムを編集できるので、 HTMLによるウェブ制作の経験がある人なら比較的とっつきやすいでしょう。

ちなみに、PHPプログラム部分で使用したechoは、指定した内容を表示しなさいという命令です。 PHPでecho命令が実行された結果、ブラウザの画面に「PHPの表示テストです!」という文字列が表示されたのです。

一行のテキストを表示させるだけの簡単なものですが、とにかくPHPプログラムが動くことを確認できました。

表示結果のソースを確認してみよう

いまブラウザで表示確認しているウェブページ(http://localhost/sample/test.php)について、 表示結果の画面がどのようなHTMLソースとなっているか確認してみましょう。 HTMLソースの表示手順は以下の通りです。

  1. ブラウザのアドレス欄にURL(http://localhost/sample/test.php)を入力してウェブページを表示させます。
  2. ブラウザの画面を右クリックしてページのソースを表示させます。 ブラウザの種類によってやや異なりますが、ブラウザの画面を右クリックすると、 ChromeやFirefoxなら[ページのソースを表示]、 Internet Explorerなら[ソースの表示]といったメニューが表示されるので、 それを選択するとウェブページのHTMLソースが表示されます。

先ほど作成したtest.phpのソースは、以下のように記述したはずでした。

実際に作成したソース:test.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP表示テスト</title> </head> <body> <?php echo "PHPの表示テストです!"; ?> </body> </html>

しかし、ブラウザで表示したウェブページのHTMLソースは以下の内容となっています。 記述したはずの <?php ?>echo " "; が無くなっています。

表示結果として出力されたソース:test.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP表示テスト</title> </head> <body> PHPの表示テストです!</body> </html>

これは、PHPプログラムの部分がサーバー側で実行されて、その結果のみがHTMLソースとして吐き出されたからです。 ウェブページとしてブラウザ上に表示されているのは、すでにプログラム処理が完了した結果なのです。

【図】

クライアント側のブラウザでは、吐き出された結果としてのHTMLソースに従って画面表示しているに過ぎません。 そのため、表示結果としてのHTMLソースを確認してもPHPプログラムの内容を見ることはできないのです。

このような仕組みの言語は、サーバーサイド・スクリプトと呼ばれることがありますが、 PHPはその代表的なもののひとつです。

コラム「localhostはテスト環境用のURL」

XAMPPによるテスト環境についても簡単に確認しておきましょう。

XAMPPのhtdocsフォルダの中に保存したファイルは、 ブラウザのアドレス欄に「http://localhost/」というURLを入力することで、 あたかもインターネット上からウェブページを呼び出すようにして表示させることができます。

例えば、先ほど作成した「test.php」は、xampp\htdocs\sampleというフォルダの中に保存しました。 そして、「test.php」をブラウザで表示確認する際には、 ブラウザのアドレス欄に「http://localhost/sample/test.php」というURLを入力しました。 ここで入力したURLのうち、先頭の「http://localhost/」の部分は、xamppフォルダ直下のhtdocsフォルダへアクセスするためのURLです。

「http://localhost/」というURLは、 あくまでもローカル環境でPHPの動作をテスト確認するための仮URLです。 ウェブサイトが完成したら、作成したPHPファイルをローカル環境にそのまま置いておくのではなく、 本番のウェブサーバー上にアップロードしてウェブサイトを公開することになります。

その際、本番のウェブサーバーでは「localhost」の部分は、そのサーバーに割り当てられたドメイン名などに置き換わります。 例えば、「example.com」というドメイン名を取得するなら、 テスト環境で 「http://localhost/sample/test.php」 というURLで表示確認していたウェブページは、 本番環境では 「http://example.com/sample/test.php」や 「http://www.example.com/sample/test.php」といったURLで閲覧することになります。

【テスト環境で表示確認する際のURL】
例:http://localhost/sample/test.php

       ↓

【本番環境で閲覧する際のURL】
例:http://example.com/sample/test.php
例:http://www.example.com/sample/test.php