初心者にもわかるCodeIgniter 其の三改【簡単なテンプレートを利用してviewを固めよう】

2017年3月29日 17:34
しばらくぶりの更新です。前回の其の三に反省点がいくつも見つかったので、改善したうえで記事にします。
要するに、あんな大仰なテンプレートを使わずにわかりやすくしようということです。
この記事は最終更新日から1年以上が経過しています。

最初の流れは前回と同じになります。というわけで、流れをつかみたい方は以下を参考に。
初心者にもわかるCodeIgniter 其の三【controllersとviewsで変数の受け渡しとサイト作成】

変数の受け渡し

前回のものに対して少々修正を行います。

application/core/MY_Controller.php を編集

<?php
class MY_Controller extends CI_Controller
{

	public $data;

    public function __construct()
    {
        parent::__construct();
	
		$data = array();
		$data['assets'] = base_url().'assets';
		$data['include'] = FCPATH.'application/views';
		
		$this->data = $data;
    }
}
?>

base_url()です。
これを使った方が、色んな構造に対応できると思います。

AUTOLOADの利用

前回ではMY_Controllerにすべてを呼び出していたわけですが、基礎の基礎、それこそどんな場所でも利用するライブラリやヘルパーがあると思います。

なので、CodeIgniterに備わっている機能を利用して、無駄な記述を減らしましょう。

application/config/autoload.php を編集

<?php
//元々配列が入力できるようになっているので、そこに上書き
$autoload['libraries'] = array('parser','form_validation','pagination','user_agent','lib');
$autoload['helper'] = array('form','url','array','file','cookie');
?>

Configクラスの利用

Configクラスは設定ファイルを読み込むクラスです。
デフォルトの設定ファイル(application/config/config.php)の他に、独自の設定ファイルを読み込むことができます。

前回ではいちいちコントローラー側にページタイトルなどを書いてましたが、ページが増えると管理が難しくなります。
そこで、ページの情報を設定ファイルで管理するという方法を取ります。

application/config/li_front_meta.php を作成

<?php
$config['li_front_meta'] = array(
	'index' => array(
		'page_title'=>'TOP',
	),
	'page' => array(
		'page_title'=>'ページ',
	),
);
?>

簡潔に書いていますが、ここの配列にページごとの読み込むCSSや、descriptionを追加して呼び出すことも可能です。

続いて読み込みとしてapplication/core/MY_Controller.php を編集

<?php
$this->config->load('li_front_meta');
$front_meta = $this->config->item('li_front_meta');
$data['seg1'] = ($this->uri->segment('1'))? $this->uri->segment('1') : 'index';
$data['page_title'] = $front_meta[$data['seg1']]['page_title'];
$data['body_class'] = $data['seg1'];
?>

viewファイルを利用したサイトの作成

前回は複雑なテンプレートにより、自分でも面倒になってしまいました。

もっと簡単でbootstrapを利用したもので行きましょう。
Honoka – 日本語も美しく表示できるBootstrapテーマ

ディレクトリ前回と同じで、一番上の階層に

  • application
  • assets
  • system

と並べます。

assetsの中にダウンロードしたファイルの

  • css
  • fonts
  • js

を入れてしまいます。

下準備はこれで完了。
続いてviewを。

application/views/i/header.php を編集

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo $page_title ?></title>
  <link rel="stylesheet" type="text/css" href="<?php echo $assets ?>/css/bootstrap.css">

  <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body class="<?php echo $body_class ?>">
<header>
	<?php include($include."/i/nav.php");?>
</header>

application/views/i/nav.php を編集

<div class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<a href="/" class="navbar-brand">Honoka</a>
			<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="navbar-collapse collapse" id="navbar-main">
			<ul class="nav navbar-nav">
				<li><a href="/">Top</a></li>
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Demo <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="./bootstrap-ja.html">Japanese Page</a></li>
						<li><a href="./bootstrap.html">English Page</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

application/views/i/footer.php を編集

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo $assets ?>/js/bootstrap.min.js"></script>

<script type="text/javascript">
  $('.bs-component [data-toggle="popover"]').popover();
  $('.bs-component [data-toggle="tooltip"]').tooltip();
</script>

</body>
</html>

application/views/index.php を編集

<?php include("i/header.php");?>
<div class="container">
	<div class="page-header">
		<div class="row">
			<div class="col-lg-8 col-md-7 col-sm-6">
				<h1>Honoka</h1>
				<p class="lead">日本語も美しく表示できるBootstrapテーマ</p>
			</div>
			<div class="col-lg-4 col-md-5 col-sm-6">
			</div>
		</div>
	</div>
</div>
<?php include("i/footer.php"); ?>

以上です。
今回はbootstrapという事もあり、無駄なものはすべて省きました。
自由に編集して下さい。

新たにサンプルページを作りました。
参考ページ:http://sample.xn--pbku02iq0izkz.net/

今後、こちらを主にカスタマイズしていく予定です。

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp