初心者にもわかるCodeIgniter 其の三改【簡単なテンプレートを利用してviewを固めよう】
最初の流れは前回と同じになります。というわけで、流れをつかみたい方は以下を参考に。
初心者にもわかる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/
今後、こちらを主にカスタマイズしていく予定です。
