勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Codeigniter4で外部ファイル(CSS / JS)の読み込みと共通パーツ化する方法

   2024/01/19  PHP CodeIgniter

Codeigniter4.4.4でCSS及びJavaScriptファイルを設置しページ内で読み込ませたい。また、それらを利用しヘッダーやフッター等、サイト内の共通パーツを作成し複数のページから使用したい。以下に対応方法をメモ。

 

CSS / JavaScriptファイルの読み込みまで

baseURLの設定

baseURLを設定するため「/codeigniter4/.env」ファイルに以下を追記する。URL部分は適宜変更。

app.baseURL = 'https://test.com/codeigniter4/'

CSS / JavaScriptファイルの設置

「/codeigniter4/public/」ディレクトリ内に設置する。今回は「/codeigniter4/public/assets/css/」「/codeigniter4/public/assets/js/」のようにディレクトリを作成し、各種ファイルをアップロードした。

読み込み方法

Views内のファイルでは以下のように呼び出す。

<link href="<?php echo base_url('assets/css/test.css');?>" rel="stylesheet">
<script src="<?php echo base_url('assets/js/test.js');?>"></script>

 

共通パーツの読み込みまで

ヘッダー、フッターの作成

「/Views/template/」ディレクトリを作成し以下ファイルをアップロードする。

header.php

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello wold</title>
<link href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
<script src="<?php echo base_url('assets/js/bootstrap.js');?>"></script>
</head>
<body>
    <header>
        ヘッダー
    </header>

footer.php

    <footer>
        フッター
    </footer>
</body>
</html>

共通パーツの読み込み

Controllersからは以下のようにして共通パーツを読み込む。

<?php
namespace App\Controllers;

class Test extends BaseController
{
    public function index()
    {
        $data = [
            'page_title' => 'テストタイトル',
        ];

        echo view('template/header');
        echo view('page', $data);
        echo view('template/footer');
    }
}

 

参考サイト

https://ci-trans-jp.gitlab.io/user_guide_4_jp/general/views.html

 - PHP CodeIgniter

  関連記事

CodeIgniter4で簡易版ログインシステムの実装方法(管理画面向け)

CodeIgniter4で管理画面向けの簡易版ログインシステムを作成したい。通常 ...

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

CodeIgniter4で独自の404ページを表示する方法

CodeIgniter4にて存在しないページをブラウザから開くと、デフォルトの状 ...

CodeIgniter4でGET / POSTパラメータの受け取りとルーティング設定方法

CodeIgniter4.4.4でページを開いた際にGET / POSTパラメー ...

CodeIgniter4でコントローラ実行の前後に指定したイベントを実行する方法

CodeIgniter4で特定の条件の場合は指定したページにリダイレクトさせたい ...