第9回 PHP入門
情報デザイン演習IIIA/2020|情報デザイン専攻|2020.11.12|遠隔
情報共有シート|学科サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - WordPress の本格導入に向けて、PHPについての概説を行います。
- 演習のテーマ「私のアナザースカイ」について、プロトタイプの修正を行うとともに、記事の執筆を進め、本日の成果報告を記載して下さい。
学科サイト(受講生一覧)
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
解説動画は学科サイトの/限定ページに移動しました。
本日のメニュー
PHPとは
PHP( Hypertext Preprocessor 元:Personal HomePage Tool )はオープンソースの汎用スクリプト言語で、Webアプリケーションの開発では最も頻繁に使われています。
HypertextPreprocessor という名のとおり、もともとはWebテンプレートを作成するためのもので、PHPのアウトプットはHTMLページです。普通のHTMLページは、静的なものとしてサーバーにアップされていますが、ページの内容をクライアント(閲覧者)の要求に応じてその都度変更する必要がある場合、サーバー側で、HTMLを書きなおす必要が生じます。それに対応する言語がPHPというわけです。したがって、PHPのソースコードは、ベースとなるHTMLと混在するようなイメージで書かれています。
図版: by Emilien81 commons.wikimedia.org/wiki/File:WebSite-PHP_Schema_serveur.png
はじめに
PHPを使ったWebサイトを構築するには、これまでの HTML+CSS+JavaScriptとは大きく異なる環境が必要になります。その違いを確認しておきましよう。
HTML+CSS+JavaScript のみで構築された Webページの動作確認をするには、ブラウザのファイル>開く、あるいはファイルを直接ブラウザのウインドウにドラッグすればOKです。そのときページのアドレスは以下のようになります。
file:///home/・・・/sample.html
つまり file: ではじまって、あなたのPCの中の特定の場所を指し示します。
一方、PHPが含まれたWebアプリケーションの動作確認をする場合は、対象となるファイルを公開ディレクトリ(サーバーソフトが配信対象とする特定の場所)にアップロードしたうえで、ブラウザのURL入力欄からサーバーにアクセス(リクエスト)しなければなりません。
そのとき、そのアドレスは、以下のような書き方になります。
http://www.kyusan-u.ac.jp/・・・/sample.php
つまり、http: ではじまるサーバー名・・・ファイル名を明記します。
サーバーがローカルPCつまりあなたのPC内で動いている場合も同じです。対象となるファイルをローカルサーバー用の公開ディレクトリに置いたうえで、ブラウザのURL入力欄から localhost という名前のサーバにアクセスしなければなりません。サーバーを経由しなければその動作は確認できないということです。
http://localhost/sample.php
JavaScript vs PHP
JavaScriptとPHPの決定的な違いは、前者がクライアントサイド(フロントエンド)で動くもの、後者はサーバーサイド(バックエンド)で動くもの、という点にあります。
- JavaScriptはクライアントサイドスクリプト、つまりブラウザが処理します。
→ ページをブラウザで開くだけで動作確認ができます。
- PHPはサーバーサイドスクリプト、つまりサーバーが処理します。
→ サーバー上のファイルをブラウザから呼ぶことで動作確認します。
サーバー環境の準備
HTML、CSS、JavaScriptまでは、サンプルをそのままブラウザで開くことができましたが、ここで説明するPHPはサーバーサイドのスクリプト、つまりWebサーバー側で処理されてはじめて結果が見えるものとなります。したがって、PHPを含むWebサイトをデザインする場合は、その動作確認のために、サーバーを用意する必要があります。
方法は2つ
- 大学のサーバーやレンタルサーバー(PHPの動作が認められているもの)を用意する(GitHubPages ではPHPは動きません)。
- 自分のPCにサーバーソフトをインストールして一人二役状態、つまりサーバーとブラウザを同時に動かす。
ローカルサーバーの動作確認
ここでは、前回の授業で導入したローカルサーバーを利用して説明します。
- XAMPPのコントロールパネルを起動して、Apahce を START させて下さい。
- PHPの動作確認を行います。
<?php echo phpinfo(); ?>
と一行だけ書いたファイルをtest.php という名前で保存して、ドキュメントルート(配信用のページを格納するフォルダ直下)に置いて下さい。http://localhost/test.php
とアドレスを入力して、PHPの情報が表示されればOKです。
基本的な書き方と動作の仕組み
PHPのスクリプトは、HTMLのコードの中に <?php ではじまって、?> で終わり…というパターンのスクリプトデリミタ*1を埋め込む形で書きます。で、ファイルの拡張子は .php とします。
phpを拡張子としたファイルが呼ばれると、サーバーはスクリプト部分をPHPの処理エンジンに渡します。結果が帰ってきたら(通常はHTMLソースコード)、それを元のファイルのスクリプト部分と置き換えて(つまりファイル全体は最終的にふつうのHTMLソースコードになる)、リクエスト元に送り出します。
PHPのサンプル
最も基本的な文字列表示 →DEMO
index.php ←PHPのコードを含むので、拡張子は PHP です。
ページが表示されたら、ブラウザでページのソースを見てみて下さい。上のソースとは違うものが見えるはずです。これはソースコードの <?php から ?> の間が処理されて、そこに日時やサーバーのPHPの情報がHTML形式で埋め込まれたためです。
このようにPHPの場合、ブラウザの「ソースを表示」で見えるのは、元のソースではなく、処理された結果としてブラウザに送られたHTMLです。
送信したメッセージをそのまま返す →DEMO
index.html ←拡張子HTMLです。これはふつうのHTML
一番重要な部分は、action = "./response.php" method ="POST" という部分です。これは、「データを送信するので、response.php で処理して下さい」という意味です。このとき、具体的なデータは message="(入力されたメッセージ)" というかたちで送信されます。
response.php ←拡張子PHPです。上のフォームに呼ばれて動きます。
message="(入力されたメッセージ)" というかたちで受け取ったデータを、そのまま表示(エコーバック)します。$_POST['message'] は、定義済みの特殊な変数で、送信されたデータの中にある message を意味します。
簡易アクセスカウンター →DEMO
このサンプルでは、同一のディレクトリに、以下の index.php と count.txt の2つのファイルが必要です。
index.php
count.txt
0
count.txt という名前のファイルを同一ディレクトリに置くことが必要です。
数字を1つ記憶しているだけなので、初期値として「 0 」のみ記述したファイルを準備して下さい。
尚、count.txt は 初期状態が 0 + 改行 ではダメなので、エディタが保存時に勝手に改行を書くようであれば、何も書かない空ファイルでお試し下さい。
2回め以降のアクセスでは、まずファイルからデータを取り出して、カウントを一つ増やして、また書き込む…という動作をします。
count.txt は書き込み可能であることが前提です。 FTPツールで、count.txt のパーミッションを書き込み可にして下さい。
<?php ~ ?>の部分のコードを既存のあなたのページのソースに加える形で、カウンターを設置することが可能です。但し拡張子は .php にすることと、サーバーがPHPに対応していることが前提です。
学科サイトの更新|次回授業前まで
プロジェクトページの下の方、Worklog に以下の形式で報告を行って下さい。
**2020.11.12 ***私のアナザースカイ|プロトタイプの修正 -◯◯◯◯◯◯ 、◯◯◯◯◯◯ -◯◯◯◯ -◯◯◯◯◯◯ ~ ***PHP|技術メモ (本日の演習で学んだ PHP の概要についてメモを残しましょう) ~