CodeIgniter 新しいページの作成方法

こんにちはー!むちょこです。

今回は CodeIgniter を使って新規ページを作成してみようと思います。

ひとつひとつのコードになるべく丁寧な解説をつけてみました。不要な方は「コードの解説とコメント」は飛ばして読んでください:)

前提

CodeIgniter のバージョン

今回は CodeIgniter 4 を利用します。

コマンド
$ composer show -i
codeigniter4/framework             v4.1.8  The CodeIgniter framework v4

他のバージョンでも基本的なルールは同じですが、たまに違う部分もあるのでご注意ください。

作成するページ

新しいページの URL は

https://example.com/ip

とします(ドメインはダミーです)。

アクセスしてきた人の IP を表示するだけのシンプルなページを作る予定です。

Controller を作成する

CodeIgniter では、下記のようなルーティングルールが予め設定されています。

https://example.com/[コントローラのクラス名]/[コントローラのメソッド名]/[引数]

今回作りたいページは「 https://example.com/ip 」なので、 Ip という名称のコントローラクラスが必要です。

Controller クラス

コントローラクラスのファイルは app/Controllers ディレクトリ下に作ります。

app/Controllers/Ip.php
<?php

namespace App\Controllers;

class Ip extends BaseController
{

}

コードの解説とコメント

namespace App\Controllers;

これまで CodeIgniter 3 以下のバージョンをご利用されていた方は驚かれるかもしれません。CodeIgniter 4 から名前空間が採用されました!

class Ip extends BaseController

コントローラクラスは BaseController クラスを継承する必要があります。

BaseController クラスは、さらに親の Controller クラス(コントローラ機能の基盤となるクラス)を継承しています。

メソッド

今回は、 URL の中にメソッド名にあたる部分がありません。このようにメソッドの指定を省略したときは index() メソッドが呼び出されます。

index() メソッドを作成して IP アドレスを出力する処理を書きました。

app/Controllers/Ip.php
class Ip extends BaseController
{
    public function index()
    {
        echo $this->request->getIPAddress();
    }
}

コードの解説とコメント

public function index()

Ip クラス外から呼び出されるメソッドなので、アクセス修飾子は public にします。

echo $this->request->getIPAddress();

ユーザの IP アドレスは Request クラスの getIPAdress() メソッドで取得することができます。

コントローラクラス内では、 $this->request にRequest オブジェクトが予め代入されています。

Request クラス

Request クラスについての公式ドキュメントはこちら

https://codeigniter4.github.io/userguide/incoming/request.html

Controller 実装後

ブラウザでアクセスすると、こんな感じに出力されるようになりました!

https://example.com/ip

View を作成する

コントローラで echo しているのでこのままでも IP アドレスは出力されますが、毎回表示するコンテンツをすべてコントローラで定義するのは現実的ではありません。

ヘッダーとフッター、そしてメインコンテンツのテンプレートをそれぞれ作成し出力するようにしていきます。

View ファイルを作成

View ファイルは、app/Views ディレクトリ下におきます。

サブディレクトリやファイル名は任意の名前で大丈夫です。今回はヘッダーとフッターのテンプレートファイルを common ディレクトリ内に保管してみようと思います。

コマンド
$ mkdir app/Views/common
app/Views/common/header.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <title><?= esc($title) ?> | サイト名</title>
</head>
<body>
  <header>
    <h1><a href="/">サイト名</a></h1>
  </header>

ヘッダーはこんな感じにしました。

つづいてフッターのテンプレートファイルも作成します。

app/Views/common/footer.php
  <footer>&copy; <?= date('Y'); ?>サイト名</footer>
</body>
</html>

コードの解説とコメント

<?= esc($title) ?>

esc() を使うと、XSS対策のためのエスケープ処理を施してくれます。

公式ドキュメント

エスケープについての公式ドキュメントはこちら

https://ci-trans-jp.gitlab.io/user_guide_4_jp/general/view_renderer.html#id4

最後に、メインコンテンツを表示するテンプレートファイルを作成します。

管理しやすいようにコントローラ名をディレクトリ名に、メソッド名をファイル名にして作成していこうと思います。

コマンド
$ mkdir app/Views/Ip
app/VIews/Ip/index.php
<main>
  <h2>あなたのIPアドレス</h2>
  <p><?= $ip; ?></p>
</main>

Controller から View ファイルを出力する

各テンプレートファイルができあがったので、コントローラから出力してみます。

app/Controllers/Ip.php
public function index()
{
    echo view('common/header', ['title' => 'IPアドレス確認']);
    echo view('Ip/index', ['ip' => $this->request->getIPAddress()]);
    echo view('common/footer');
}

これでテンプレートファイルの内容をブラウザに表示することができました!

https://example.com/ip

もっと便利に!

これで完成としても良いですが、BaseController クラスをカスタマイズしてもっと便利にすることもできます。

例えば毎回同じようなテンプレートファイルを指定して出力するのは面倒なので、こんな風にカスタマイズしてみました。

app/Controllers/BaseController.php
/**
 * テンプレートファイルを使って出力する
 * app/VIews/common/header.php
 * app/Views/[controller-class]/[controller-method].php
 * app/Views/common/footer.php
 *
 * @param $title string
 * @param $data array
 */
public function viewTemplate($title = '', $data = [])
{
    $router = service('router');
    $controller = (new \ReflectionClass($router->controllerName()))->getShortName();
    $method = $router->methodName();

    echo view('common/header', ['title' => $title]);
    echo view("{$controller}/{$method}", $data);
    echo view('common/footer');
}
app/Controllers/Ip.php
public function index()
{
    $title = 'IPアドレス確認';
    $data = ['ip' => $this->request->getIPAddress()];
    $this->viewTemplate($title, $data);
}

私は CodeIgniter の醍醐味は”カスタマイズ(拡張)”だと思っています。

フレームワークを自分好みに育て上げたい人にはぜひ CodeIgniter をオススメしたいです!

公式ドキュメント

CodeIgnier の公式ドキュメントはこちら

https://codeigniter4.github.io/userguide/intro/index.html