☰

Written by Manabu Bannai

【CodeIgniter】シンプルなブログを作成する方法【初心者向け】

CodeIgniter PROGRAMMING

CodeIgniterでシンプルなブログを作る方法です。
» デモはこちら。
» コードはこちら。

もくじ

DBとCodeIgniterの初期設定

データベースを作成する

DB名：ci_blog
文字コード：utf8_unicode_ci

その後、以下のSQLを実行します。

--
-- Table structure for table `entry`
--
 
CREATE TABLE IF NOT EXISTS `entry` (
`entry_id` int(11) NOT NULL AUTO_INCREMENT,
`entry_name` varchar(255) NOT NULL,
`entry_body` text NOT NULL,
`entry_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`entry_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `entry`
--

※テーブル内の文字コードがutf8_unicode_ciではない場合は手動で修正してください。

CodeIgniterの初期設定

.htaccessの設置
applicationと同階層に以下を設置。


    RewriteEngine On
    RewriteBase /ci_blog/

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]



    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php

編集ファイル：config/database.php

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = 'root';
$db['default']['database'] = 'ci_blog';
$db['default']['dbdriver'] = 'mysql';

編集ファイル：config/config.php


$config['base_url'] = 'http://localhost/ci_blog/';
$config['index_page'] = '';
$config['encryption_key'] = 'KLIn!Psasaswewqsas3=zu0._BAU9dasdasd#[email protected]$.xdFJdVNRR';

※encryption_keyは以下のサイトから取得できます。
Random Key Generator

編集ファイル：config/autoload.php

$autoload['libraries'] = array("database", "session");
$autoload['helper'] = array("url");

CodeIgniterで記事表示のプログラムを作成する

ブログコントローラーを作成する

新規作成ファイル：controller/blog.php

まずはコンストラクタから。
blog_modelという名前のモデルを読み込みます。
※ blog_modelは後ほど作成します。


class Blog extends CI_Controller {

	function __construct(){
		parent::__construct();
		$this->load->model("blog_model");
	}

次に、ブログのトップページとして、記事を取得して表示するコントローラーを作成します。

記事を取得するコントローラーの作成

編集ファイル：controller/blog.php

// データベースからすべてのエントリーを取得するメソッド
function index(){
	// blog_modelのget_all_postメソッドを実行して、データをqueryに格納
	$data['query'] = $this->blog_model->get_all_posts();
	$this->load->view("index", $data);
}

記事取得にはDBから情報を取得しなくてはいけません。
そこでモデルとして、get_all_postを作成しています。
get_all_postを使い、DBから情報を引き抜き、それをロードしてく仕様です。
では、get_all_postモデルをつくっていきます。

DBから投稿された記事を取得して表示するモデルの作成

新規作成ファイル：models/blog_model.php

class Blog_model extends CI_Model{
	function __construct(){
		parent::__construct();
	}

	// データベースからすべての記事を取得するメソッド
	function get_all_posts(){

		// entryのカラムから情報を取得して、queryに格納
		$query = $this->db->get("entry");

		// entryカラム情報を持ったqueryをresultに挿入
		// result()メソッドは、結果をオブジェクトの配列として、または失敗した場合には 空の配列 を返します。
		return $query->result();
	}

以上で、記事を取得するプログラムが完成しました。
次に、取得した記事を表示するためのビューを作成していきます。

投稿された記事を表示するビューを作成する

新規作成ファイル：views/index.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>CodeIgniterでブログ作成</title>
</head>
<body>
<h2>CodeIgniterでブログ作成</h2>

<div id="container">
<?php
	if($query){
		foreach($query as $post):
			echo "<h2>";
			echo $post->entry_name;
			echo "</h2>";
			echo "<p>";
			echo $post->entry_date;
			echo "<br />";
			echo $post->entry_body;
			echo "</p>";
		endforeach;
	}else{
		echo "記事がありません";
	}

?>
</div>
</body>
</html>

以上で、DBから記事を表示するプログラムが完成しました。

first_step_done

CodeIgniterで記事投稿のプログラムを作成する

記事投稿フォームを作成する

新規作成ファイル：views/add_new_entry.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>記事投稿｜CodeIgniterでブログ作成</title>
</head>
<body>
<h2>記事投稿ページ</h2>

<div id="container">
<?php
	echo validation_errors();

	// "フラッシュデータ"を設定
	// 記事投稿が成功したタイミングで『投稿完了のメッセージが表示されます』
	// メッセージ内容はコントローラー内で定義します
	if( $this->session->flashdata("message") ){
		echo $this->session->flashdata("message");
	}

	echo form_open("blog/add_new_entry");

	echo form_label("タイトル", "entry_name");
	$data = array(
		"name" => "entry_name",
	);
	echo form_input($data);

	echo form_label("本文", "entry_body");
	$data = array(
		"name" => "entry_body",
		"rows" => 5,
		"cols" => 50
	);
	echo form_textarea($data);

	echo form_submit("contactSubmit", "送信");
	echo form_close();

?>
</div>
</body>
</html>

※フラッシュデータの詳しい説明はこちらからどうぞ。
セッションクラス : CodeIgniter ユーザガイド 日本語版

尚、上記プログラムが理解できない場合は以下をご参考にしてください。
【CodeIgniter】フォームの入力内容をメール送信する方法【フォームヘルパー利用】

フォームのアクション先(echo form_open(“blog/add_new_entry”);)に指定されている、add_new_entryのコントローラーを作っていきます。

add_new_entryのコントローラーの作成

編集ファイル：controllers/blog.php

function add_new_entry(){
	$this->load->helper("form");
	// form_validationとsessionライブラリを読み込む
	$this->load->library(array("form_validation", "session"));

	// バリデーションルールの設定
	$this->form_validation->set_rules("entry_name", "タイトル", "required|xss_clean|max_length[200]");
	$this->form_validation->set_rules("entry_body", "本文", "required|xss_clean");

	if( $this->form_validation->run() == FALSE ){
		// フォームバリデーションエラーが起きたら以下を実行
		// ページの初回読み込み時は自動的に起動
		$this->load->view("add_new_entry");
	}else{
		// POSTされた内容を変数に格納する
		$name = $this->input->post("entry_name");
		$body = $this->input->post("entry_body");

		// add_new_entryモデルを実行し、POSTデータを投げる
		$this->blog_model->add_new_entry($name, $body);

		// "フラッシュデータ"
		// 通知メッセージやステータスメッセージ(ex:レコード2は削除されました)によく利用されます。
		$this->session->set_flashdata("message", "記事が追加されました");

		// $this->load->view()の場合と表記法法が異なることに注意
		redirect("blog/add_new_entry");

	}
}

以下のプログラムに着目してください。

$this->blog_model->add_new_entry($name, $body);

フォームからPOSTされたデータをDBに投げ込む部分のプログラム（add_new_entryモデル）を作成していきます。

POSTデータをDBに投げ込むプログラムの作成

編集ファイル：models/blog_model.php

function add_new_entry($name, $body){
	$data = array(
		"entry_name" => $name,
		"entry_body" => $body
	);
	$this->db->insert("entry", $data);
}

CodeIgniterはほんと便利ですね。
たったこれだけで、POST情報をDBに挿入できます。

以上で記事投稿フォームが完成しました。

post_form_done

CodeIgniterでコメント投稿機能を作成する

仕様は以下のとおりです。

■トップページ
　∟個別記事ページ
　　∟投稿済みのコメント表示
　　∟コメント投稿機能

トップページから個別記事ページにいくと、コメントが投稿できます。
よくある基本的なブログの仕様です。

データベースを作成する

--
-- Table structure for table `entry`
--
 
CREATE TABLE IF NOT EXISTS `entry` (
`entry_id` int(11) NOT NULL AUTO_INCREMENT,
`entry_name` varchar(255) NOT NULL,
`entry_body` text NOT NULL,
`entry_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`entry_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `entry`
--

comment_table

※テーブル内の文字コードがutf8_unicode_ciではない場合は手動で修正してください。

トップページから個別記事のページへリンクを貼る

編集ファイル：views/index.php

記事タイトルにリンクを貼ります。

if($query){
	foreach($query as $post):
		echo "<h2>";
		// anchor(リンク先URL, アンカーテキスト);
		echo anchor('blog/post/' . $post->entry_id, $post->entry_name);
		echo "</h2>";
		echo "<p>";
		echo $post->entry_date;
		echo "<br />";
		echo $post->entry_body;
		echo "<br />";

		// ここは後ほど設定する
		echo "コメント数：";
		echo $this->blog_model->total_comments($post->entry_id);
		echo "</p>";
	endforeach;
}else{
	echo "記事がありません";
}

重要な点としては以下です。

$post->entry_id

上記のようにエントリーIDを取得できます。
トップページでは、get_all_postsモデルが実行されており、DB内にあるentryカラムの情報が保持されているためです。

次に、個別記事ページのビューを作っていきます。

個別記事ページのビューを作成する

新規作成ファイル：views/post.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>個別記事ページ</title>
</head>
<body>
<h1>個別記事ページ｜CodeIgniterでブログ作成</h1>

<h2><?php echo $query[0]->entry_name; ?></h2>
<h2><?php echo $query[0]->entry_body; ?></h2>

</body>
</html>

以上で、個別記事のタイトル、本文が表示されます。

コメント表示のプログラムをつくる

編集ファイル：controller/blog.php

public function post($id){
	// 記事の情報を取得
	$data["query"] = $this->blog_model->get_post($id);

	// コメントデータを取得
	$data["comments"] = $this->blog_model->get_post_comment($id);

	// 記事のIDを取得
	$data["post_id"] = $id;

	// 合計のコメント数を取得
	$data["total_comments"] = $this->blog_model->total_comments($id);
}

次に、以下3つのモデルつくっていきます。
get_post, get_post_comment, total_comments

コメント表示に利用するモデルの作成

編集ファイル：models/blog_model.php

function get_post($id){
	// $idはget_all_postsモデルが実行されたときから保持されている
	$this->db->where("entry_id", $id);

	// entryテーブルから情報を取得
	$query = $this->db->get("entry");

	if( $query->num_rows() != 0 ){
		// データ数が0ではなかった場合に以下を実行
		return $query->result();
	}else{
		return FALSE;
	}
}

function get_post_comment($post_id){
	$this->db->where("entry_id", $post_id);
	$query = $this->db->get("comment");
	return $query->result();
}

function total_comments($id){
	// 検索でよく使う LIKE 句を生成できます。
	// WHERE entry_id LIKE '%id%'
	$this->db->like("entry_id", $id);
	$this->db->from("comment");

	// count_all_results()：特定のActive Record クエリの行数を調べる
	return $this->db->count_all_results();
}

次に、コメントを表示するビューを作っていきます。

コメントを表示するビューをつくる

編集ファイル：views/post.php

<h3>コメント</h3>
<?php
	if($comments){
		foreach( $comments as $comment ){
			echo $comment->comment_body;
			echo "<br />";
			echo $comment->comment_name;
			echo "<br />";

			// strtotime()：引数で指定された文字列をタイムスタンプに変換する
			echo date("Y-m-d", strtotime($comment->comment_date));
		}
	}else{
		echo "コメントはありません。";
	}
?>

また、ブログのトップページで、各記事に何件のコメントがあるかを表示させます。
編集ファイル：views/index.php

echo $this->blog_model->total_comments($post->entry_id);

※上記はforeach内に挿入してください。

コメント投稿フォームを作成する

編集ファイル：views/post.php

<h4>コメントを投稿する</h4>
<?php
	echo validation_errors();

	if( $this->session->flashdata("message") ){
		echo $this->session->flashdata("message");
	}

	echo form_open("blog/post/" . $query[0]->entry_id );

	echo form_label("名前", "commentor");
	 $data = array(
	 	"name" => "commentor"
	 );
	echo form_input($data);

	echo form_label("Email", "email");
	 $data = array(
	 	"name" => "email"
	 );
	echo form_input($data);

	echo form_label("コメント", "comment");
	 $data = array(
	 	"name" => "comment",
	 	"rows" => 5,
	 	"cols" => 50
	 );
	echo form_textarea($data);

	echo form_submit("contactSubmit", "コメント送信");

	echo form_close();

?>

次にフォームアクション先に指定されているコントローラーを作成していきます。

コメント投稿用のコントローラーの作成

編集ファイル：controller/blog.php

public function post($id){
	// フォームヘルパーと、ライブラリ（バリデーション、セッション）の読み込み
	$this->load->helper("form");
	$this->load->library(array("form_validation", "session"));

	// バリデーションルールの設定
	$this->form_validation->set_rules("commentor", "名前", "required|xss_clean|max_length[200]");
	$this->form_validation->set_rules("email", "Email", "required|valid_email|xss_clean");
	$this->form_validation->set_rules("comment", "コメント", "required|xss_clean");

	if( $this->blog_model->get_post($id) ){

		// get_postモデルが正常に実行されたら以下の処理を行なう
		foreach( $this->blog_model->get_post($id) as $row ){
			// ページのタイトル設定
			$data["title"] = $row->entry_name;
		}

		if( $this->form_validation->run() == FALSE ){
			// バリデーションエラーの場合は以下を実行
			$this->load->view("post", $data);
		}else{
			// POSTされた情報を変数に格納
			$name = $this->input->post("commentor");
			$email = $this->input->post("email");
			$comment = $this->input->post("comment");
			$post_id = $id;

			$this->blog_model->add_new_comment($post_id, $name, $email, $comment);
			$this->session->set_flashdata("message", "コメントが追加されました。");
			redirect("blog/post/". $id);
		}
	}else{
		show_404();
	}
}

次に、投稿されたコメント情報をDBへ挿入するために、add_new_commentモデルを作成します。

投稿されたコメント情報をDBへ挿入する

編集ファイル：models/blog_model.php

// コメント情報をDBに挿入する機能
function add_new_comment($post_id, $commentor, $email, $comment){
	$data = array(
		"entry_id" => $post_id,
		"comment_name" => $commentor,
		"comment_email" => $email,
		"comment_body" => $comment
	);
	$this->db->insert("comment" ,$data);
}

以上でシンプルなブログが完成です！( ◜◡‾)

関連記事

【CodeIgniterの基礎】ビューの作成、複数ビューの読...

CodeIgniter

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

CodeIgniter

【CodeIgniter】ページネーション機能を実装する方法...

CodeIgniter

【CodeIgniter】サードパーティのライブラリ(ion...

CodeIgniter

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

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

MARKETING

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

Blog

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

Affiliate

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

SEO

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

PROGRAMMING

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

PROGRAMMING

HOME >  CodeIgniter >  【CodeIgniter】シンプルなブログを作成する方法【初心者向け】