xamppと.tpl(smarty)を使って開発するための手順

 [この記事の続編](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd)

## 構築の流れ
- [Smartyのダウンロード](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#visual-studio-code%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [XAMPPにSmartyを適応](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#xxamp%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [php.iniの情報書き換え](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#vs-code%E3%81%A7php%E3%82%92%E4%BD%9C%E6%88%90%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)
- [プロジェクトの作成・動作確認](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#vs-code%E3%81%A7php%E3%82%92%E4%BD%9C%E6%88%90%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)

## Smartyのダウンロード
* ダウンロード手順

まず初めに、phpのバージョンを確認しましょう。XAMPP Controll Panel　を起動して、「Shell」を起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/b878bc4f-9537-01ff-9749-363f2e57eee4.png)

ターミナルが開いたら、「php -v」と入力してインストールされているphpのバージョンを表示させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/a32cc992-a9e0-015b-a544-600c846c3ee0.png)

次に、[Smartyのdownloadページ](https://www.smarty.net/docsv2/ja/)にアクセスして、右上にある
「Get Smarty」下の「Download」を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/b5e92dfc-f14c-1b63-8c48-40508238fe0e.png)

開いたら、最初に「Requirements」を確認し、自分が使用しているPHPのバージョンと互換性があるSmartyのバージョンを確認します。
（本資料では、インストールされているphpのバージョンが8.2.4なので、互換性があるのはSmarty v4)
ダウンロードするバージョンがわかったら、「Download」の下にある、「Releases for v2 and v3 and v4」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/10181ecb-a941-c60b-44fd-a92a11882131.png)

GitHubが開くので、先ほど確認したSmartyと同じバージョンのzipをダウンロード。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/691ae907-833c-2cff-ec69-2f56625e4005.png)

以上でSmartyのダウンロードは完了です。


## XAMPPにSmartyを適応
次に、XAMPPにSmartyを適応させます。
ダウンロードしたzipを解凍し、中に配置されいる「libs」をXAMPP内にあphpフォルダ直下(xampp\php)に配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/3e3c3cba-1265-7e3c-e328-96fe061ecb16.png)
↓コピーして配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/414c3600-ed89-4d9b-2e8c-f92966102782.png)

配置した「libs」の名前を「smarty」に変更しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/1861491a-dac3-4ce5-25f9-a9c24900af0c.png)

以上で、XAMPPにSmartyを適応できました。


## php.iniの情報書き換え
次に、php.iniの情報書き換えを行います。
xampp直下のphp(xampp\php)を開き、「php.ini」を見つけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/567f560b-5539-3114-a8e5-a6ff029a63e0.png)

「php.ini」を開き、
「include_path=C:\xampp\php\PEAR」をコメントアウト
その下に、「include_path = ".;C:\xampp\php\PEAR;C:\xampp\php\smarty"」と追記

```php.ini 変更後
;;;;;;;;;;;;;;;;;;;;;;;;;
; Paths and Directories ;
;;;;;;;;;;;;;;;;;;;;;;;;;

; UNIX: "/path1:/path2"
include_path=C:\xampp\php\PEAR
;
; Windows: "\path1;\path2"
;include_path = ".;c:\php\includes"
;
; PHP's default setting for include_path is ".;/path/to/php/pear"
; https://php.net/include-path

; The root of the PHP pages, used only if nonempty.
; if PHP was not compiled with FORCE_REDIRECT, you SHOULD set doc_root
; if you are running php as a CGI under any web server (other than IIS)
; see documentation for security issues.  The alternate is to use the
; cgi.force_redirect configuration below
; https://php.net/doc-root
doc_root=

```

```php.ini 変更後
;;;;;;;;;;;;;;;;;;;;;;;;;
; Paths and Directories ;
;;;;;;;;;;;;;;;;;;;;;;;;;

; UNIX: "/path1:/path2"
;include_path=C:\xampp\php\PEAR
include_path　=".;C:\xampp\php\pear\;C:\xampp\php\smarty\"
;
; Windows: "\path1;\path2"
;include_path = ".;c:\php\includes"
;
; PHP's default setting for include_path is ".;/path/to/php/pear"
; https://php.net/include-path

; The root of the PHP pages, used only if nonempty.
; if PHP was not compiled with FORCE_REDIRECT, you SHOULD set doc_root
; if you are running php as a CGI under any web server (other than IIS)
; see documentation for security issues.  The alternate is to use the
; cgi.force_redirect configuration below
; https://php.net/doc-root
doc_root=

```
上記を追記したら保存し、ファイルをコピーして、「xampp\apache\bin」に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/71dfe487-a495-03e2-b0a6-ed4f0ada8d91.png)

## プロジェクトの作成・動作確認
* プロジェクトの作成方法
xampp内のhtdocs(xampp\htdocs)に、任意の名前のフォルダを作成してください。(本資では、sampleで作成)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/86f1d2e9-2a26-fa90-fce0-a71f4b626bf3.png)

次に、作ったフォルダ内に、「templates」フォルダと、「templates_c」フォルダを作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/77dc7efb-56ba-9e9e-78d2-3e8e0095ac29.png)

作成したら、「templates」を開いて、下記を「index.tpl」として保存。(格納場所 = xampp\htdocs\sample\templates)
```index.tpl
<!DOCTYPE html>
    <html lang="ja">
    <head>
      <title>Smarty動作確認</title>
    </head>
    <body> 
        こんにちは 
        <br> 
        {$hello} 
    </body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/64aaeb3d-acd4-724a-955e-99b82342210f.png)

index.tplを作成したら、sample直下に戻り、下記をindex.phpとして保存してください。(格納場所 = xampp\htdocs\sample)
```index.php
<?php
    require_once('Smarty.class.php');
    $smarty = new Smarty;
    $smarty->template_dir = './templates/';
    $smarty->compile_dir = './templates_c/';
    $smarty->assign('hello', 'Hello World');
    $smarty->display('index.tpl');
?>
```

上記2つのファイル(index.tplと、index.php)を保存したら次は動作確認に移ります。

* 動作確認
XAMMP Controll Panellを起動して、apacheの「Start」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/f5b2a10e-edce-26d7-f513-03469566944e.png)

http://localhost/sample/index.php
にアクセスする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/2a602e41-6734-ff54-cd3b-fdb2968419e0.png)

上記が表示されると成功。
たまに、index.phpの２行目
```
require_once('Smarty.class.php');
```
でエラーがでるが、smartyのバージョンの確認、ダウンロードしたsmartyを解凍したか、php.iniのpathはtypoしていないのかを確認してください。