Written by Manabu Bannai

【CodeIgniterの基礎】ビューの作成、複数ビューの読み込み設定

CodeIgniter PROGRAMMING

CodeIgniterの初級セットアップ記事はこちらからどうぞ。
» 【基礎】これからCodeIgniterをはじめる方へ 〜初期セットアップの手順〜

CodeIgniterのビューを作成、複数ビューの読み込み設定を解説していきます。

解説の手順としては以下のとおりです。

  1. サイト全体のビューを作成する。
  2. ビューを切り分けていく。
  3. 切り分けた複数ビューを読み込む。

それでは、解説していきます。

1.サイト全体のビューを作成する。

サイトコントローラーで読み込むファイルを設定する

※読み込むファイル名は『view_home』とします。

編集ファイル:application/controller/site.php

view_home_02

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Site extends CI_Controller {
	public function index(){
		// echo "hello world";
		$this->load->view("view_home");	//indexページでview_homeを読み込む
	}
}

view_home.phpを作成する

編集ファイル:application/views/view_home.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ホームページ</title>
</head>
<body>

<div id="container">
	<div id="nav">
		<ul>
			<li><a href="#">ホーム</a></li>
			<li><a href="#">アバウト</a></li>
			<li><a href="#">コンタクト</a></li>
		</ul>
	</div>

	<div id="content">
		<h1>ホームページ</h1>
		<p>ホームページへようこそ</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>

	<div id="footer">
	<p>Copyright (c) manabu All rights reserved</p>
	</div>
</div>

</body>
</html>

view_home.phpのスタイルを作成する。

編集ファイル:application/controller/site.php
view_home_03

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ホームページ</title>
</head>
<body>

<div id="container">
	<div id="nav">
		<ul>
			<li><a href="#">ホーム</a></li>
			<li><a href="#">アバウト</a></li>
			<li><a href="#">コンタクト</a></li>
		</ul>
	</div>

	<div id="content">
		<h1>ホームページ</h1>
		<p>ホームページへようこそ</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>

	<div id="footer">
	<p>Copyright (c) manabu All rights reserved</p>
	</div>
</div>

</body>
</html>

ここまでで、全体のビューが完成しました。
手順2に進んでいきます。

2. ビューを切り分けていく。

site_header.phpを作成する

作成ファイル:application/views/site_header.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ホームページ</title>
<style>
	body, html{margin: 0; padding: 0;}
	body{
		background-color: #eee;
	}
	h1, h2, h3, h4, p, a, li, ul{
		font-family: arial, sans-serif;
		color:black;
		text-decoration: none;
	}
	#nav{
		margin: 50px auto 0 auto;
		width: 1000px;
		background-color: #888;
		height: 15px;
		padding: 20px;
	}
	#nav a:hover{
		color: green;
	}
	#nav ul{
		list-style: none;
		float: left;
		margin-top: 0 50px;
	}
	#nav ul li{
		display: inline;
	}
	#content{
		width: 1000px;
		min-height: 100%;
		margin: 0 auto;
		padding: 20px;
	}
	#footer{
		width: 400px;
		height: 15px;
		margin: 0 auto;
		padding: 10px;
	}
	#footer p{
		color: #777;
	}
</style>
</head>

site_nav.phpを作成する

作成ファイル:application/views/site_nav.php

<body>

<div id="container">
	<div id="nav">
		<ul>
			<li><a href="#">ホーム</a></li>
			<li><a href="#">アバウト</a></li>
			<li><a href="#">コンタクト</a></li>
		</ul>
	</div></pre>


<h3>content_home.phpを作成する</h3>
作成ファイル:application/views/content_home.php

<pre><div id="content">
	<h1>ホームページ</h1>
	<p>ホームページへようこそ</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div></pre>


<h3>site_footerを作成する</h3>
作成ファイル:application/views/site_footer.php

<pre>	<div id="footer">
	<p>Copyright (c) manabu All rights reserved</p>
	</div>
</div>

</body>
</html>

以上でビューの切り分けが完了しました。
次に、切り分けたビューの読み込み設定を行なっていきます。

3.切り分けた複数ビューを読み込む。

切り分けたviewファイルをsiteコントローラーで読み込む

編集ファイル:application/controller/site.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Site extends CI_Controller {
	public function index(){
		// echo "hello world";
		// $this->load->view("view_home");
		$this->home();	//以下で定義した、home functionを読み込む
	}

	public function home(){
		$this->load->view("site_header");	//site_headerの読み込み
		$this->load->view("site_nav");		//site_navの読み込み
		$this->load->view("content_home");	//content_homeの読み込み。
		//コンテンツ部分はページ毎に共通ではないので、名称をsite_contentにはしていません。
		$this->load->view("site_footer");	//site_footerの読み込み
	}
}

以上でview_homeの読み込み設定は完了です。
http://localhost:8888/basicsite/

参考情報として、アバウトページ(content_about)の作成も行なっていきます。

content_aboutを作成する

まずは、siteコントローラーに定義を追加

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Site extends CI_Controller {
	public function index(){
		// echo "hello world";
		// $this->load->view("view_home");
		$this->home();	//以下で定義した、home functionを読み込む
	}

	public function home(){		//ホームページの読み込み
		$this->load->view("site_header");
		$this->load->view("site_nav");
		$this->load->view("content_home");
		$this->load->view("site_footer");
	}

	public function about(){	//アバウトページの読み込み
		$this->load->view("site_header");
		$this->load->view("site_nav");
		$this->load->view("content_about");
		$this->load->view("site_footer");
	}
}

content_aboutのviewファイルを作成

作成ファイル:application/views/content_about.php

<div id="content">
	<h1>アバウト ページ</h1>
	<p>アバウトページへようこそ</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

以上で完了です。
content_aboutのviewを表示するページにアクセスしてみてください。
http://localhost:8888/basicsite/site/about

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。