LotosLabo

プログラミング技術とか気になった情報を載せていきます

CakePHPについて

f:id:lo25131:20140403015242p:plain


CakePHPについて

これはPHPで構築するWebアプリケーションフレームワークです。いわゆるRubyで言うとRailsのようなものです。



開発環境

まず必要な物をリスト形式で書いていきます。

PHP
Apache,MySQL(XAMPP)
CakePHP

が必要になります。
PHPApache,MySQLもしくはXAMPPはもうインストールが完了している前提でやっていきます。
そして今回はXAMPPを使ってやっていきます。


CakePHPはこちらよりインストールしていきます。
http://cakephp.jp/

それとちょっとインストール方法が厄介なので途中でエラーが起きてうまくいかない場合もあるので、
その場合はほかのサイトをご参照ください。



ZIPファイルを解凍したらXAMPPの方にファイルを移します。
xampp/htdocsの中に解凍したファイルを移してファイル名をcakeに直します。


そしてApacheを起動して、ブラウザにアクセスしてください。
アクセス先は http://localhost/cake/ になります。

ここでエラーとか表示されている場合があるので、直していきます。
ここでは私が起きていたエラーの編集方法を紹介します。


①core.phpを編集する

cake/app/Config の中のcore.phpを編集します。
その中の A random string user を検索します。
下の行の Security.salt Security.cipherSeedの値をそれぞれ
大文字小文字英数字で適当に書きます。


②database.phpを編集する

database.php.defaultを複製して、database.phpという名前に置き換えます。
そしてこれを編集します。

public $default = array(
		'datasource' => 'Database/Mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'cake_user',
		'password' => 'cake_pass',
		'database' => 'cake_db',
		'prefix' => '',
		'encoding' => 'utf8',
	);

このように編集していきます。


mySQLの確認

mySQLでデータベースを作ってみます。

  • ログイン-

mysql -u root -p

  • データベース作成-

create database cake_db;
grant all on cake_db.* to 'cake_user'@'localhost' identified by 'cake_pass';

と入力します。

これで先ほどアクセスした先のエラーが黄色から緑になってればおkです。


④DebugKitの導入

githubよりダウンロードします。
https://github.com/cakephp/debug_kit

これを解凍して「DebugKit」とリネームします。
そしてこれを xampp/htdocs/cake/app/Plugin の中に入れます。


次に Configの中のbootstrap.phpを編集します。
CakePlugin::load('DebugKit');
これを追加して、すべてのエラーが消えたことを確認して進めていきます。

cakePHPについて

まず全体の流れを理解していきます。

今回は簡単な記事を作成していきます。
記事には、

一覧を表示
個別記事を表示
追加
編集
削除

の機能を付けます。

そしてMVCの手順でやっていきます。
Model View Controller です。


Model ファイル => Model/Post.php
-- mysql table


View ファイル => View/Posts/
-index.ctp cake template
-view.ctp
-add.ctp
-edit.ctp


Controller ファイル => Controller/PostsController.php
--indexメソッド
-view
-add
-edit
-delete

それぞれにこのような機能を渡していきます。

cakePHPを始める

postsテーブルの作成

まずpostsテーブルというものをmySQLで作成していきます。
このデータは記事として使うのに大事なものです。

いつもどうりログインしていきます。
mysql -u root -p

で先ほど作成したデータベースを使っていきます。
user cake_db;



そしてテーブルを作成していきます。

create table posts(
id int not null auto_increment primary key,
title varchar(50),
body text,
created datetime default null,
modified datetime default null
);

insert into posts (title, body, created, modified) values
('title 1', 'body 1', now(), now()),
('title 2', 'body 2', now(), now()),
('title 3', 'body 3', now(), now());


とりあえずこれで終了です。


Scaffoldを使う

とりあえず、雛形となるファイルを作ってみます。

・cake/appのModelフォルダに Post.php を作成

・cake/appのControllerフォルダに PostsController.php を作成


Post.php ファイルを編集

<?php
class Post extends AppModel{
}


PostsController.php ファイルを編集

<?php
class PostsController extends AppController{
}


ここでちょっとScaffoldというのを使ってみます。
これは便利なコードを自動で生成してくれるものです。とりあえずやってみます。

Post.phpの以下のコードを追加します。

public $scaffold;

これだけでいろいろと生成されちゃうのです。
確認はコレでできます。

http://localhost/cake/posts/



記事の一覧を表示

では先ほどのscaffoldというのはちょっと便利すぎるので今回はこれを使わないで、一から作ってみましょう。

まずはコントローラから作っていきます。

PostsController.php

<?php
class PostsController extends AppController {
	public $helpers = array('Html', 'Form');
	public function index() {	
		$this->set('posts', $this->Post->find('all'));
	}	
}


次に見た目となるViewを作る

cake/app/View に Postsファイルを作成し、その中に index.ctp というファイルを作成します。

<h2>記事一覧</h2>

<ul>
<?php foreach ($posts as $post) : ?>
<li>
<?php
echo h($post['Post']['title']);
?>
</li>
<?php endforeach; ?>
</ul>



ちょっといじっちゃいましたが、こんなかんじで表示されます。

f:id:lo25131:20140403141517j:plain

下のごちゃごちゃしたやつは、
cake/app/config/  core.php を編集することで非表示になります。

Configure::write('debug', 2);
の2を0にすることで非表示、1にすることでエラーのみ表示させます。
今回は開発中なので、2でいいでしょう。

ルートの変更

アクセスするURLを変更します

cake/app/Config の routes.php を編集します。
Router::connect('/', array('controller' => 'posts', 'action' => 'index'));


このように編集することで、http://localhost/cake/ でTOP画面にアクセスできます。

個別記事の表示

タイトルをクリックした時にそれぞれの項目の記事を表示させます。

コントローラーを編集します。

PostsController.php

public function view($id = null) {
		$this->Post->id = $id;
		$this->set('post', $this->Post->read());
	}



これを追加します。

次にこれを表示させるためにView/Postsファイルに view.ctp というファイルを作成します。

view.ctp

<h2><?php echo h($post['Post']['title']); ?></h2>

<p><?php echo h($post['Post']['body']); ?></p>



このように編集します。

個別記事行くためのリンク

次にTOPページから個別記事へ行くためのリンクをTOPページに作成します。

index.ctp

<?php
echo $this->Html->link($post['Post']['title'],'/posts/view/'.$post['Post']['id']);
?>



このように追加します。
また、app/View/Layout の default.ctp を編集します。

ヘッダーをこのようにします。

<div id="header">
	<h1><?php echo $this->Html->link('Home', '/'); ?></h1>



これらを追加するとこのようになります。

f:id:lo25131:20140403145829g:plain

記事を追加(項目を追加)

TOP画面の項目を追加出来るようにします。

コントローラーを編集していきます。

public function add() {
			if ($this->request->is('post')) {
				if ($this->Post->save($this->request->data)){
					$this->Session->setFlash('Success!');
					$this->redirect(array('action'=>'index'));
				}else {
					$this->Session->setFlash('failed!');
				}
			}
	}



addというものを追加します。
記事を追加するための処理です。



次に記事追加画面を作成します。

View/Posts に add.ctp を作成します。

<h2>Add post</h2>
<?php
echo $this->Form->create('Post');
echo $this->Form->input('title');
echo $this->Form->input('body', array('rows'=>3));
echo $this->Form->end('Save Post');

このようなものを作成します。

そして最後に記事追加画面に行くためのリンクをTOP画面に作成します。

index.ctp

<h2>Add Post</h2>
<?php echo $this->Html->link('Add post', array('controller'=>'posts', 'action'=>'add'));



一番下にこのように追加します。

f:id:lo25131:20140403154116g:plain


エラーチェック

記事を追加した時に空の時にエラーを出させるようにします。

validateチェックはmodelに書いていきます。

Post.php

public $validate = array(
		'title' => array(
			'rule' => 'notEmpty'
			),
		'body' => array(
			'rule' => 'notEmpty'
			)
		);
}



コレを追加していきます。

f:id:lo25131:20140403155446g:plain


メッセージをFlash

記事を追加した時に出る Successというメッセージをアニメーション化します。
まずjQueryを追加します。

Layoutsファイルの default.ctp ファイルを編集します。

headタグの中にjQueryを使うスクリプトを追加します。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


次に一番下のところにjQueryの動きの処理を書きます。

<script>
	$(function() {
		setTimeout(function() {
			$('#flashMessage').fadeOut("slow");
		},800);
	});
</script>



ゆっくりフェードアウトしていくようにします。

f:id:lo25131:20140403160940g:plain


項目を編集できるようにする

まずコントローラーを編集します。

PostsController.php

public function edit($id = null){
		$this->Post->id = $id;
		if ($this->request->is('get')) {
			$this->request->data = $this->Post->read();
		} else{
			if ($this->Post->save($this->request->data)) {
				$this->Session->setFlash('success!');
				$this->redirect(array('action' => 'index'));
			} else {
				$this->Session->setFlash('failed');
			}
		}
	}


次に編集画面を作成します。

edit.ctp というファイルを Postsファイルに作成します。

edit.ctp

<h2>Edit Post</h2>

<?php
echo $this->Form->create('Post', array('action'=>'edit'));
echo $this->Form->input('title');
echo $this->Form->input('body', array('rows'=>3));
echo $this->Form->end('Save');


そして最後にTOPに編集画面へのリンクを作成します。

index.ctp

<?php echo $this->Html->link('編集', array('action' => 'edit', $post['Post']['id'])); ?>


f:id:lo25131:20140403161916g:plain


項目を削除できるようにする

まずコントローラーを編集していきます。

PostsController.php

public function delete($id) {
		if ($this->request->is('get')) {
			throw new MethodNotAllowedException();
		}
		if ($this->Post->delete($id)) {
			$this->Session->setFlash('Deleted!');
			$this->redirect(array('action' => 'index'));
		}
	}


今回は削除画面を作らないので、Top画面だけに追加していきます。

index.ctp

<?php
	echo $this->Form->postLink('削除', array('action' => 'delete', $post['Post']['id']), array('confirm' => 'sure?'));
?>


これでおkです。

f:id:lo25131:20140403163318g:plain


削除処理をAjax

次に先ほどの削除処理を画面遷移しないで処理を実行させるという
Ajaxを使っていきます。また、ちょこっとjQueryによりアニメーションもつけていきます。

先ほど処理を編集して追加していく感じでいきます。

まずはコントローラーから行きます。先ほどの削除処理の
プログラムを消して書きます。


PostsController.php

public function delete($id) {
		if ($this->request->is('get')) {
			throw new MethodNotAllowedException();
		}
		if ($this->request->is('ajax')) {
			if ($this->Post->delete($id)) {
				$this->autoRender = false;
				$this->autoLayout = false;
				$response = array('id' => $id);
				$this->header('Content-Type: application/json');
				echo json_encode($response);
				exit();
			}
		}
		$this->redirect(array('action' => 'index'));
	}



このように編集していきます。
次にindex.ctpファイルを変更していきます。

index.ctp

<?php
	echo $this->Html->link('削除', '#', array('class' => 'delete', 'data-post-id' =>$post['Post']['id']));
?>



まず削除ボタンを表示させるために追加します。
次にjQueryを使うという命令を下に書きます。

<script>
$(function() {
	$('a.delete').click(function(e){
		if (confirm('sure?')) {
			$.post('/cake/posts/delete/'+$(this).data('post-id'),{},function(res){
				$('#post_' +res.id).fadeOut();
			}, "json");
		}
		return false;
	});
});
</script>



これでおkです。
そして最後に liタグをこのように編集すれば完了です。

<li id="post_<?php echo h($post['Post']['id']); ?>">



こんなかんじになります。

f:id:lo25131:20140403165106g:plain