Lesson 3
Hello World
Lesson 3
Chapter 1
XAMPPでサーバー起動
Lesson3ではLesson2で行った環境の構築が問題なく完了しているかの確認も含めて、実際にコードを打ちブラウザにテキストを表示させるところまで行っていきましょう。
コードを書く為の準備①
Lesson3では実際にPHPを書いていきますので、その為の準備を行なっていきましょう。まずはLesson2のchapter1でインストールしたXAMPPのスイッチを入れます。そこでもご紹介したように既に緑色に点灯していれば起動できているので、そのままで構いません。起動すると以下の画面が表示されますが、されない場合はコントロールパネル上にある「Go To Application」をクリックしてブラウザを表示しましょう。このような画面が開かれます。
ここまで出来たらXAMPPの準備は完了です。
Lesson 3
Chapter 2
ソース作成
コードを書く為の準備②
続いては実際に書く場所の準備を行なっていきます。 まず初めにXAMPPフォルダ内にあるhtdocsフォルダの配下に「HelloWorld」と言うフォルダを作成しましょう。
XAMPP > htdocs > HelloWorld
作成したHelloWorldフォルダをVScode上で開きます。「Open Folder」をクリックしXAMPP > htdocs > HelloWorldフォルダを選択しましょう。
フォルダを選択できたら、ファイルの作成を行います。ファイル名は「index.php」としましょう。
これでPHPを書く準備は完了です。
PHPのルール
ルール①
上記の準備で作成したindex.phpですが、VScodeに「このファイルはPHPですよ」と認識させる為には拡張子は.phpである必要があるので覚えておきましょう。
ルール②
ファイル内にPHPのコードを記述するには「ここからPHPの記述ですよ」と記してあげる必要があります。
下記のようにphpタグをコードを書く前に記述し、書き忘れがないように注意しましょう。
phpタグ
<?phpルール③
phpのコードはHTMLの記述内で部分的に使用することも可能です。その場合は「ここからここまでがPHPの記述ですよ」とphpタグでコードを囲ってあげる必要があるので、こちらも覚えておきましょう。
phpタグ
<body>
htmlの記述
<?php
phpの記述
?>
htmlの記述
</body>
ルール④
処理の最後には(;)セミコロンを付けることが必須なので、こちらもつけ忘れないようにしましょう。
phpタグ
<?php
処理;
処理;
コードを実際に書いてみよう
それでは作成したindex.phpにコードを記述しましょう。phpタグを忘れずに記述してください。
index.php
<?php続いて下記のように、記述を追加してください。
<?php
echo "Hello World";記述が完了したらセーブ（Ctrl + S）を忘れずに実行してください。 今後もファイルに修正が加わった際はセーブを忘れずに実行しましょう。たった2行ですが、これでブラウザ上に「Hello Message」を出力するプログラムが完成しました。
記述したコードをブラウザで確認する。
ファイルをブラウザで開く際は、開きたいファイルのパス(URL)という道筋のようなものを把握してあげる必要があります。 今回開きたいファイルindex.phpの場所はXAMPP > htdocs > HelloWorldフォルダの中にあるので先程XAMPPを起動した際に開かれた下記ページのパスを変更します。localhostの後ろから下記のように変更します。
http://localhost/dashboard/ → http://localhost/HelloWorld/index.php
以前もお伝えしましたが、localhostはフォルダでいうhtdocsを指しますので覚えておきましょう。
ブラウザ結果
Hello Worldこのように画面上にHello Worldと出力されていれば成功です。
