【CodeIgniter】シンプルなブログを作成する方法【初心者向け】
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#!!@$.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から記事を表示するプログラムが完成しました。
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に挿入できます。
以上で記事投稿フォームが完成しました。
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`
--
※テーブル内の文字コードが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);
}
以上でシンプルなブログが完成です！( ◜◡‾)
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。