勉強したことのメモ

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

  関連記事

Codeigniter3で異なるデータベースを使用する

Codeigniterで2つのコンテンツがあって、それぞれ別のデータベースを使用 ...

CodeIgniter4でフォームからファイルをアップロードし保存する方法

CodeIgniter4.4.4でformから画像等のファイルをアップロードし、 ...

CodeIgniter4で祝日一覧APIにCURLでリクエストし結果をファイルキャッシュする方法

Codeigniter4.4.4で祝日一覧APIにCURLでリクエストしたい。尚 ...

CodeIgniter4でのメール送信方法(テキスト・HTMLメール)

CodeIgniter4.4.4でテキストメール及びHTMLメールを送信したい。 ...

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

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