XAMPP 7.0.x + IntelliJ IDEA (2016.2.x) で開発環境を構築


Windows 10 上で PHP の開発環境を構築します。cakephp3で環境を作り、ブレイクポイントを張って値を確認するところをやってみます。
この記事では、XAMPP の Apache へのデプロイはせず、PHP の built-in Web Server での確認をします。

# XAMPP と InttelliJ IDEA (PhpStorm) のインストール

## XAMPP 

https://www.apachefriends.org/jp/index.html
からインストールパッケージをダウンロードしてインストールをします。
この記事では、xampp-win32-7.0.8-0-VC14-installer.exe （7.0.8 32bit） を利用しています。
インストール先は、C;\xampp とします。

## IntelliJ IDEA 

IntelliJ IDEA または PhpStorm をインストールします。
この記事では、ideaIU-2016.2.1.exe を update し 2016.2.2 で利用しています。
インストール先は、C:\Program Files (x86)\JetBrains\IntelliJ IDEA 2016.2.1 とします。

## Xdebug のインストール

XAMPPP 7.x では、Xdebug モジュールが同梱されていないようなので、
本家 (https://xdebug.org/) からダウンロードします。

Xdebug 2.4.1 [PHP 7.0 VC14 TS (32 bit)] を利用しました。

php_xdebug-2.4.1-7.0-vc14.dll を C:\xampp\php\ext にコピーし
php_xdebug.dll にリネームします。

## php.ini の設定 (xdebugの有効化とextensionの有効化）

XAMPP のコントロールパネルで Apache > Config をクリックするとプルダウンになるので、PHP (php.ini) をクリックします。
以下を最下行に追加し保存します。

```ini:php.ini
[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "C:\xampp\tmp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.remote_port = 9000
xdebug.auto_trace = 1
xdebug.trace_output_dir = "C:\xampp\trace"
xdebug.idekey = "phpstorm"
```

872行目で
```
;extension=php_intl.dll
````

とあるので、コメントを外します。（セミコロンの削除）
php.iniを保存します。

Apache をXAMPP Control Panel より再起動(Stop->Start)します。

## XAMPP の動作確認

XAMPP のコントールパネルで Apache を Start しておきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/e043129c-348e-acff-0655-8c09c30c2b28.png)

ブラウザから localhost にアクセスすると以下のような画面が表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/2cdac070-91a3-3a5e-a6a9-eb06e92b5751.png)

## XDebug の有効化を確認

C:\xampp\htdocs に phpinfo.php を作成します。

```php:phpinfo.php
<?php phpinfo(); ?>
```

http://localhost/phpinfo.php にアクセスすると、いつものアレが表示されます。

xdebug と intl のセクションが表示されているかを確認しておきます。

## IntelliJ IDEA の設定

### PHP プラグインのインストール

Configure > Plugins をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/a0c36da7-59cb-f60e-b77a-f281804a0bc9.png)

[Install JetBrains Plugin] をクリックしたのち、検索語に **php** と入力すると、いくつか候補が表示されるので
**PHP** をインストールします。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/dbada1cf-7308-e215-7059-8456195ca632.png)

### PHP の指定

Configure > Settings とクリックし、 Languages & Frameworks > PHP をクリックします。
PHP Langage Level に 7 を選択し、Interpreter の　[...] をクリックします。
Default Interpreters のダイアログが表示されるので、[+] をクリックし、以下の画面のように php の位置を指定します、

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/cf8daa65-882b-fc4a-ff90-d2d609ac5f2a.png)

### Chrome の設定

JetBrains IDE Support extension を拡張機能からインストールしておきます。

# Composer と Cakephp3 のインストール

## skelton の作成

Create New Project で Compose Project を選択し、[Next]をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/3d4dab62-3750-4942-249d-27754f1605cb.png)

Project name に hellocakephp と入れます。
Package の Filter packages: に cakephp/app と入れると、Available packages に cakephp/app と表示されます。
それをクリックし、Version to install で 3.3.1 を選択し、[Finish]をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/086d5617-ade5-d18a-87ee-c28f7db5b945.png)

Composer.phar のダウンロードが行われます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/82ad2c14-7e2d-68c3-01c7-8af2090ac2ec.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/b12eedcc-5f31-f67a-3290-441bdccf2b78.png)

成功すると以下のようになるはずです。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/7a3b8071-ac83-44d9-3ce5-9712440792fe.png)

Failed to create project と表示され以下のようなエラーメッセージが表示される場合は、php_intl.dll を有効化してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/e439a08c-067b-c927-fce4-6beadc86b440.png)

# built-in Web Server での確認

この時点で動作確認をしてみます。

### listenの開始

メニューの電話アイコンをクリックし、Debug 情報の読み込みを開始します。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/fa34c1ae-1ddd-4ac2-ad02-42829dacbb21.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/5675/4941b0f2-f8c6-b4ad-8b3e-a621fc54b367.png)

### ブレイクポイントの設定

左ペインから PagesController.php を選択し、40行目あたりの display() あたりで
行番号の右側をクリックします。そこが赤くなり、ブレイクポイントが設定されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/f4dc618e-8ae4-36c6-723d-5fb67c622096.png)

### built-in Web Server の設定

メニューから Run > Run をクリックし、選択ウィンドウで 0 をクリックします。

以下のような画面が表示されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/dbc7f660-1d0d-e3c8-e3b1-4f76ae349266.png)

左側にある [+] をクリックし、[PHP Build-in Web Server] を選択し、それぞれ以下のように設定します。

Name: Built-in Web Serber
Server Configuration - Host : localhost
Server Configuration - Port : 8000
Server Configuration - Document root : <作成したアプリケーションのwebroot>

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/20ee2141-9244-9592-777b-85fb3f4db2d8.png)

[Run] をクリックします。

ブラウザからlocalhost:8000へアクセスすると、ブレイクポイントで止まり、変数が確認できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/5675/5d6a3b39-f7a5-697b-432f-ec79dc185218.png)

# 参考

https://confluence.jetbrains.com/display/PhpStorm/Installing+and+Configuring+XAMPP+with+PhpStorm+IDE
https://www.jetbrains.com/help/phpstorm/2016.2/php-built-in-web-server.html