以前、クライアントサイドプログラムと、サーバサイドプログラムの違いについてご紹介しました。
WordPressでは主にPHPというプログラミング言語が用いられており、
これは、サーバサイドプログラムです。
WordPressでは、function.phpなどのPHPファイルを更新することで、
機能を変更することが可能ですが、
下手に変更すると、うまく動かなかったり、
画面が真っ白になることもあります。
今回は、PHPのスキルアップを図るために、
PC上にPHPの開発環境を構築したいと思います。
HTM/CSS/JavaScript開発に必要な環境
上記記事でも書いたように、
HTMLやCSSは以下3つがあれば開発可能です。
- PC
- ブラウザ
- テキストエディタ
それはクライアントサイドで動作するためです。
テキストエディタの代わりに、
開発エディタを使うと、
入力を補完してくれたりと、
より開発しやすくすることができます。
私はGitHubが開発した、オープンソースのATOMを利用しています。
他にも様々な開発エディタがありますので、
お好きなものを使ってみてください。
PHP開発に必要な環境
では、PHPの開発ではどうでしょうか？
PHPはサーバサイドで動作するため、
サーバ環境が必要となります。
PHPをPC上で開発・動作確認するためには以下が必要となります。
- PC
- ブラウザ
- エディタ
- サーバ（Web/DB）
- PHPエンジン
では、私が準備した環境をご紹介したいと思います。
| 必要環境 | 必要ハードウェア | 必要ソフトウェア |
|---|---|---|
| PC(OS) | PC | Windows |
| ブラウザ | Google Chrome | |
| 開発エディタ | ATOM | |
| PHPエンジン | XAMPP | |
| Webサーバ | apatch(XAMPPに同梱） | |
| DBサーバ | MariaDB(XAMPPに同梱） |
ソフトは以下からダウンロードできます。
学習サイト「ドットインストール」では、
仮想環境である「Docker Desktop」を利用していますが、
私が使っているWindows 10 Home バージョン1809は、
「Docker Desktop」の稼働要件を満たしていませんでした。
もし、Windows 10 Proや、Windows 10 Home バージョン1903以降のPCをお持ちでしたら、
XAMPPではなく、Docker Desktopを使われたほうが、
確認が簡単ですので、そちらをお勧めします。
Docker Desktopのインストール手順等は
「ドットインストール」をご覧になるとよいと思います。
PHPの開発をしてみよう
ATOMでphpファイルを作ってみましょう。
HelloWorldの入力
ATOMでHelloWorld！
①ATOMを起動する。
②「Add Folder」をクリックする。
③フォルダーの選択ポップアップで、ファイルを保存するフォルダを指定する。
※今回、XAMPPを利用するため、以下フォルダを指定してください。
ここでは、「sample」フォルダを作成し、選択しています。
④ポップアップが閉じ、ATOMの左ペインにフォルダが作成される。
⑤フォルダ名を右クリックし、「新規ファイル」をクリックする。
⑥ファイル名を入力する。（ここでは、index.phpとしています）
⑦「Enter」キーをクリックすると、右ペインにindex.phpが開いた状態で表示される。
⑧1行目に「Hello World!」と記入する。
⑦「Enter」キーをクリックし、保存する。
※ファイル名横の青い点が消え、保存が完了する。
DB/Webサーバ起動
XAMPPでのDB/Webサーバ起動手順
①XAMPPのアイコンをクリックする
②MySQLの「start」をクリックする。
※DBとWebサービス両方を動かす場合、
MySQL→Apacheの順に起動してください。
一般的に、WebサービスはDBとWebの両方が稼働しますが、
ユーザによるアクセス時のエラーを少なくするため、フロントエンドは最後に起動させます。
③MySQLのModule部分の背景色が緑になったことを確認する。
※黄色のときは、起動中です。
④Apacheの「start」をクリックする。
⑤ApacheのModule部分の背景色が緑になったことを確認する。
ブラウザでの確認
ブラウザでの確認手順
①ブラウザを開き、アドレスバーに次のURLを入力し、「Enter」キーをクリックする。
③画面左上に「Hello World!」と表示される。
PHPコードの記述
PHPのコードを書こう
①ATOMで先ほど「Hello World!」を書いた部分を以下に書き換える。
＜?PHP
$message =“Hello World★”;
?＞
＜!DOCTYPE html＞
＜html lang=“ja”＞
＜head＞
＜meta charset=“utf-8”＞
＜title＞PHPの動作確認をしよう＜/title＞
＜/head＞
＜body＞
＜?PHP echo $message; ?＞
＜/body＞
＜/html＞
②先ほどのブラウザを「F5」キーで更新する
③画面左上に「Hello World★」と表示される。
まとめ
できましたか？
<?PHP ～?>で書いたところがPHPです。
PHPはHTMLの中にコードを書きます。
PHPもいろいろ書いて、試してスキルアップを図っていきたいと思います。
コメント