LogoMark.png

情報デザイン演習IIIA/2020/1112

第9回 PHP入門

情報デザイン演習IIIA/2020|情報デザイン専攻|2020.11.12遠隔
情報共有シート学科サイト

AGENDA


以下、LIVE動画をご覧下さい。記事に沿って解説しています。
解説動画は学科サイトの/限定ページに移動しました。





本日のメニュー


PHPとは

PHP( Hypertext Preprocessor 元:Personal HomePage Tool )はオープンソースの汎用スクリプト言語で、Webアプリケーションの開発では最も頻繁に使われています。

WebSite-PHP_Schema_serveur by Emilien81

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の決定的な違いは、前者がクライアントサイド(フロントエンド)で動くもの、後者はサーバーサイド(バックエンド)で動くもの、という点にあります。

サーバー環境の準備

HTML、CSS、JavaScriptまでは、サンプルをそのままブラウザで開くことができましたが、ここで説明するPHPはサーバーサイドのスクリプト、つまりWebサーバー側で処理されてはじめて結果が見えるものとなります。したがって、PHPを含むWebサイトをデザインする場合は、その動作確認のために、サーバーを用意する必要があります。

方法は2つ

ローカルサーバーの動作確認

ここでは、前回の授業で導入したローカルサーバーを利用して説明します。

基本的な書き方と動作の仕組み

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.phpcount.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 の概要についてメモを残しましょう)
~





PAGES

GUIDE

DATA


*1 スクリプトデリミタ(script delimiter)とはスクリプトにおける開始と終了の合図を使って具体的なデータを埋め込むための仕組みです
Last-modified: 2020-11-12 (木) 10:53:42