はじめてのWebサイト！～第3回目～

前回学んだCSSやJavaScriptに続いて、
今回はWebサイトの仕組みに重要なWebサーバーについて学んでWebサイトを完成させてみよう。

前々回で簡単に学びましたが、 WebサーバーはクライアントのWebブラウザに対して
要求された情報（ファイル）を提供する役割を持つコンピュータですね！

Webページには、誰がいつ見ても同じように表示される静的なWebページと
ユーザの操作によって表示が変わる動的なWebページがありますよね。

Webサーバーでの動的・静的な処理はどのような仕組みなんでしょうか。

Webサーバーの処理について図にまとめてみたよ。順番に見ていこうね。

Webサーバーは大きく分けて、要求されたファイルをそのままWebブラウザへ送り返す静的な処理と
何かしらの処理を行って要求された結果を返す動的な処理の2種類の処理があるよ。

動的な処理では、Webサーバーの他にAP（アプリケーション）サーバーやリクエストに応じて
DB（データベース）サーバーで処理を行っているんですね。

これらの動きはサーバーサイドで動くプログラミング言語によって制御しているよ。

クライアントサイドで動くクライアントサイド・スクリプトとサーバーサイドで動くサーバーサイド・スクリプトがありますよね！

クライアントサイド・スクリプトの代表的なものはJavaScriptと聞いたことがあります！

そうだね。最近では、Node.jsというサーバー側で動作するJavaScriptもあるよ。 もし興味があれば調べてみてね。
サーバーサイド・スクリプトの代表的なものは、PHPやRuby、Pythonなどが挙げられるよ。
今回はその中でも、Webサイトでよく使われる「PHP」について学んでいこう！

PHPはサーバーサイドの言語だから、PHPを動かすにはサーバーを用意する必要があるよ。
方法は色々あるけど、今回は「XAMPP」というツールを使用してPCの中に仮想のサーバーを立ててローカル開発環境を作ってみよう。

「XAMPP」は、どのようなツールなんでしょうか。

Webアプリケーションの開発環境に必要なWebサーバーやデータベース、プログラミング言語など
オープンソースソフトウェアをパッケージとしてまとめたものだよ。

様々なOSに対応するクロスプラットフォームのXとApache（Webサーバー）、MySQL（データベース）、
PHP・Perl（プログラミング言語）の頭文字をとって「XAMPP」なんですよね！

インストール方法については、Webを参考にしてみてね。
まずは「HELLO WORLD」をPHPで出力させてみよう！真似して記述してみてね。

記述したPHPファイルはどこに保存すればいいんでしょうか。

インストール後、「xampp」フォルダの下に「htdocs」というフォルダが作成されるよ。
この「htdocs」フォルダの下にファイルを配置してみよう。

「sample.php」という名前でフォルダへ保存しました！

次は「XAMPP」のコントロールパネルを表示させて、「Apache」を起動させるよ。
上手く起動できたら、ブラウザから「http://localhost:80/sample.php」へアクセスして確認してみてね。
デフォルトでは「XAMPP」で使うポート番号は80番だけど、上手くいかない場合はポート番号の設定を確認してみよう。

「HELLO WORLD」が表示されました！
トップディレクトリであるドキュメントルートにおいて、デフォルトの設定は「htdocs」フォルダ以下を参照しているんですね。

PHPはHTMLファイルに埋め込むことができるから、今までに作成したHTMLファイルにPHPを埋め込んで
拡張子を「.php」にすることでPHPが実行できるよ。PHPを使ってWebサイトを完成させていこう！
なにかやってみたいことはあるかな？

PHPを使って現在の日付を入れてみたいです！

日付は「date()」関数を使用してPCの日付を取得するよ。()の中にフォーマットを記述して出力してみよう。
デフォルトのタイムゾーンを設定することで、PCの日付がずれていても安心だよ。以下を参考にしてみてね。

日付が表示されました！

今度は動的なサイトらしいことを試してみたいです！
Webサイトに来てくれた人の表示がアクセスごとに変わるような動きを入れてみたいです。

それでは、Webサイトに来訪した人をカウントして人数を表示させるカウンタを作ってみよう。
来訪者をカウントするテキストファイルを用意して、カウントを増やしていく処理を行うよ。以下を参考に記述してみてね。

アクセスするタイミングによって表示が変わりました！もう少し、見た目を整えてWebサイトを完成させます！

ついにWebサイトが完成しました！
難しい部分もありましたが、少しずつ完成していく過程が楽しかったです！

普段、私たちが見ているWebページがどのように表示されるのか、 クライアント側やサーバー側の処理など
Webサイトの仕組みについて学ぶことができ、とても面白かったです！

もっと色々な表現ができるようデザインや
PHP以外の他のプログラミング言語も調べて試してみようと思います！

はじめてのWebサイトシリーズはこれで終了するよ。
今回学んだことを応用して色々試してみてね。次回も引き続き、情報処理技術について学んでいこう！