☰

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>

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

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

切り分けた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

関連記事

【CodeIgniterの基礎】HTMLヘルパーとURLヘル...

CodeIgniter

【CodeIgniter】Composer(コンポーザー)を...

CodeIgniter

【完全保存版】CodeIgniterで『ログインと会員登録機...

CodeIgniter

【CodeIgniter】ファイルアップロード、サムネイル生...

CodeIgniter

スキル学習のまとめ記事（※有料記事を含む）

個人で稼ぎ、自由に生きる為の、Webマーケ入門教材【10年の知識】

MARKETING

ブログ型アフィリエイトの完全講義【ブログ歴６年の僕の集大成です】

Blog

アフィリエイト学習の完全マップ【知識ゼロ→月10万円を目指す方法】

Affiliate

SEO対策の完全マップ【入門・基礎・中級・上級：16記事で解説】

SEO

【完全初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】

PROGRAMMING

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

PROGRAMMING

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