環境はすでに構築してある前提ですが、ローカルサーバーを立てたい場合には、
以下のサイトが参考になるかと思います。

• XAMPPのインストール for Windows
• MAMPのインストール for Mac

ではでは、早速挑戦してみましょう！

1.CakePHPの最新版をダウンロード

まずはCakePHPの公式サイトから最新版をダウンロードします。
https://github.com/cakephp/cakephp/downloads

ダウンロードしたファイルを解凍すると長い名前になっているので、「cakephp」などにリネームしておきます。

そしてFTPソフトでサーバーにアップロードします。アップ先は公開ディレクトリにしてください。

SSHで実行する場合は、以下のコマンドを叩きます。

wget https://github.com/cakephp/cakephp/tarball/1.3
tar xvfz 1.3
mv ./cakephp-cakephp-ee16348/ ./cakephp/

1.CakePHPのセットアップ

それでは、CakePHPが動作するようにセットアップしていきます。

セットアップにはbakeというコマンドを使用します。
これはコマンドラインでMVC　（M=モデル、V＝ビュー、C＝コントローラー）のプログラムを自動で生成してくれる機能です。
爆速でプログラミングできるようになるので、今回はこれを使います。

それでは、まずターミナルを立ち上げて以下のコマンドを実行しましょう。
今回はnewappというディレクトリを作成して、そこに全て格納するようにします。

cakephpへのパスは先ほどダウンロードしたディレクトリです。
適時変更しながら読み進めてくださいね。

$ cakephp/cake/console/cake bake ← bakeコマンドを実行します。

Welcome to CakePHP v1.3.10 Console
---------------------------------------------------------------
App : public
Path: /home/username/public
---------------------------------------------------------------
What is the full path for this app including the app directory name?
 Example:/home/username/public/myapp  
[/home/username/public/myapp] > /home/username/public/newapp
 ←パスを指定します。

Bake Project
Skel Directory: /home/username/public/cakephp/cake/console/templates/skel
Will be copied to: /home/username/public/newapp
---------------------------------------------------------------
Look okay? (y/n/q) 
[y] > ←空Enter
Do you want verbose output? (y/n) 
[n] >  ←空Enter
---------------------------------------------------------------
Created: newapp in /home/username/public/newapp
---------------------------------------------------------------

Creating file /home/username/public/newapp/views/pages/home.ctp
Wrote `/home/username/public/newapp/views/pages/home.ctp`
Welcome page created
Random hash key created for 'Security.salt'
Random seed created for 'Security.cipherSeed'
CAKE_CORE_INCLUDE_PATH set to /home/username/public/cakephp in webroot/index.php
CAKE_CORE_INCLUDE_PATH set to /home/username/public/cakephp in webroot/test.php
Remember to check these value after moving to production server
Your database configuration was not found. Take a moment to create one.
---------------------------------------------------------------
Database Configuration:
---------------------------------------------------------------
Name:  
[default] >  ←空Enter
Driver: (db2/firebird/mssql/mysql/mysqli/odbc/oracle/postgres/sqlite/sybase) 
[mysql] >  ←空Enter。MySQLを使う。
Persistent Connection? (y/n) 
[n] > ←空Enter
Database Host:  
[localhost] > ←DBのホスト名を入力。今回はlocalhostを使用。
Port?  
[n] > ←空Enter。ポートはデフォルトを使用。
User:  
[root] > hoge ←DBのユーザー名を指定
Password:  
> fuga ←DBのパスワードを指定
Database Name:  
[cake] > hoge ←DB名を指定
Table Prefix?  
[n] > ←空Enter
Table encoding?  
[n] > ←空Enter

---------------------------------------------------------------
The following database configuration will be created:
---------------------------------------------------------------
Name:         default
Driver:       mysql
Persistent:   false
Host:         localhost
User:         hoge
Pass:         ************
Database:     hoge
---------------------------------------------------------------
Look okay? (y/n) 
[y] > ←この内容でOKなら空Enter。
Do you wish to add another database configuration?  
[n] > ←空Enter。DB設定は１つのみ。

Creating file /home/username/public/newapp/config/database.php
Wrote `/home/username/public/newapp/config/database.php`

これで /home/username/public/newapp にアプリケーションがセットアップできました。

↑http://[ドメイン]/newapp/にアクセスして、ページが表示されればひとまずOKです。

2.テーブルを作成する

それでは、CakePHPで更新するテーブルを作成します。
今回はPostテーブルという名前で作成します。

↑タイトルと本文だけのシンプルな構造です。

SQLはこんな感じです。

CREATE TABLE IF NOT EXISTS `posts` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) character set utf8 NOT NULL,
  `body` text character set utf8 NOT NULL,
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 ;

3.アプリケーションのセットアップ

ここから再度コンソールに戻ってbakeを実行します。
オプションの引数でアプリ名を指定します。

$ cakephp/cake/console/cake bake -app newapp
←newappのセットアップを行います

Welcome to CakePHP v1.3.10 Console
---------------------------------------------------------------
App : newapp
Path: /home/username/public/newapp
---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[F]ixture
[T]est case
[Q]uit
What would you like to Bake? (D/M/V/C/P/F/T/Q) 
> M ←モデルを作成します。
---------------------------------------------------------------
Bake Model
Path: /home/username/public/newapp/models/
---------------------------------------------------------------
Possible Models based on your current database:
1. Post
Enter a number from the list above,
type in the name of another model, or 'q' to exit  
[q] > 1 ←Postモデルを作成する
Would you like to supply validation criteria 
for the fields in your model? (y/n) 
[y] > ←空Enter。入力チェックを追加します。

Field: id
Type: integer
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[29] >  ←空Enter。idフィールドは入力チェックはしない。

Field: title
Type: string
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[19] >  ←空Enter。タイトルを必須項目にする。
Would you like to add another validation rule? (y/n) 
[n] > y ←続けて入力チェックを追加する

Field: title
Type: string
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[19] > 15 ←タイトルの文字数制限を行う。
Would you like to add another validation rule? (y/n) 
[n] > ←空Enter。次の項目へ。

Field: body
Type: text
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[29] > 19 ←本文を必須にする
Would you like to add another validation rule? (y/n) 
[n] > ←空Enter。次の項目へ。

Field: created
Type: datetime
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[29] > ←空Enter。作成日は入力チェックはしない

Field: modified
Type: datetime
---------------------------------------------------------------
Please select one of the following validation options:
---------------------------------------------------------------
1 - alphanumeric
2 - between
3 - blank
4 - boolean
5 - cc
6 - comparison
7 - custom
8 - date
9 - decimal
10 - email
11 - equalto
12 - extension
13 - inlist
14 - ip
15 - maxlength
16 - minlength
17 - money
18 - multiple
19 - notempty
20 - numeric
21 - phone
22 - postal
23 - range
24 - ssn
25 - time
26 - url
27 - userdefined
28 - uuid
29 - Do not do any validation on this field.
... or enter in a valid regex validation string.
  
[29] > ←空Enter。更新日は入力チェックはしない
Would you like to define model associations
(hasMany, hasOne, belongsTo, etc.)? (y/n) 
[y] > n ←モデルのアソシエーション。今回は使用しない

---------------------------------------------------------------
The following Model will be created:
---------------------------------------------------------------
Name:       Post
DB Table:   `posts`
Validation: Array
(
    [title] => Array
        (
            [notempty] => notempty
            [maxlength] => maxlength
        )

    [body] => Array
        (
            [notempty] => notempty
        )

)

---------------------------------------------------------------
Look okay? (y/n) 
[y] > ←上記プレビューの内容で良ければ空Enter

Baking model class for Post...

Creating file /home/username/public/newapp/models/post.php
Wrote `/home/username/public/newapp/models/post.php`
SimpleTest is not installed. Do you want to bake unit test files anyway? (y/n) 
[y] > n ←自動テストは今回は作成しない

これでModelの設定は完了です。
次にControllerを設定します。

---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[F]ixture
[T]est case
[Q]uit
What would you like to Bake? (D/M/V/C/P/F/T/Q) 
> C ←コントローラーを作成
---------------------------------------------------------------
Bake Controller
Path: /home/username/public/newapp/controllers/
---------------------------------------------------------------
Possible Controllers based on your current database:
1. Posts
Enter a number from the list above,
type in the name of another controller, or 'q' to exit  
[q] > 1 ←Postを選択
---------------------------------------------------------------
Baking PostsController
---------------------------------------------------------------
Would you like to build your controller interactively? (y/n) 
[y] >  ←空Enter。対話式で作成します。
Would you like to use dynamic scaffolding? (y/n) 
[n] >  ←空Enter。scaffoldは使用しない。
Would you like to create some basic class methods 
(index(), add(), view(), edit())? (y/n) 
[n] > y ←Postデータの一覧や追加変更処理を自動生成する
Would you like to create the basic class methods for admin routing? (y/n) 
[n] >  ←空Enter。URLにadminを使用しない。
Would you like this controller to use other helpers
besides HtmlHelper and FormHelper? (y/n) 
[n] >  ←空Enter。Htmlヘルパーを使用しない。
Would you like this controller to use any components? (y/n) 
[n] >  ←空Enter。コンポーネントを使用しない。
Would you like to use Session flash messages? (y/n) 
[y] >  ←空Enter。flashコンポーネントを使用する。

---------------------------------------------------------------
The following controller will be created:
---------------------------------------------------------------
Controller Name:
	Posts
---------------------------------------------------------------
Look okay? (y/n) 
[y] >  ←上記プレビューの内容で良ければ空Enter

Creating file /home/username/public/newapp/controllers/posts_controller.php
Wrote `/home/username/public/newapp/controllers/posts_controller.php`
SimpleTest is not installed. Do you want to bake unit test files anyway? (y/n) 
[y] > n ←自動テストは今回は作成しない

これでコントローラーも完了です。
最後にViewファイルを作ります。

---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[F]ixture
[T]est case
[Q]uit
What would you like to Bake? (D/M/V/C/P/F/T/Q) 
> V ←Viewを選択
---------------------------------------------------------------
Bake View
Path: /home/username/public/newapp/views/
---------------------------------------------------------------
Possible Controllers based on your current database:
1. Posts 
Enter a number from the list above,
type in the name of another controller, or 'q' to exit  
[q] > 1 ←Postを選択
Would you like bake to build your views interactively?
Warning: Choosing no will overwrite Posts views if it exist. (y/n) 
[n] > y ←上書きを許可
Would you like to create some CRUD views
(index, add, view, edit) for this controller?
NOTE: Before doing so, you'll need to create your controller
and model classes (including associated models). (y/n) 
[y] >  ←空Enter。一覧や追加変更ページを自動生成する
Would you like to create the views for admin routing? (y/n) 
[n] >  ←空Enter。URLにadminを含むページを作成しない。

Creating file /home/username/public/newapp/views/posts/index.ctp
Wrote `/home/username/public/newapp/views/posts/index.ctp`

Creating file /home/username/public/newapp/views/posts/view.ctp
Wrote `/home/username/public/newapp/views/posts/view.ctp`

Creating file /home/username/public/newapp/views/posts/add.ctp
Wrote `/home/username/public/newapp/views/posts/add.ctp`

Creating file /home/username/public/newapp/views/posts/edit.ctp
Wrote `/home/username/public/newapp/views/posts/edit.ctp`
---------------------------------------------------------------

View Scaffolding Complete.

これで表示画面も設定が終わりました。

１点だけ、ファイルを修正する必要があります。

Postモデルのタイトルチェックで追加した文字数制限ですが、
制限したい文字数を記述する必要があるので直接ファイルを書き換えます。

newapp/models/post.phpを開いたら、16行目近辺を以下のように修正します。

'maxlength' => array(
				'rule' => array('maxlength'),
               ・・・

↓

'maxlength' => array(
				'rule' => array('maxlength', 255),

これでデータの登録更新処理部分は完了です。

ひとまずブラウザから以下のURLにアクセスして動作を確認してみてください。
http://[ドメイン]/newapp/posts/

↑上のような画面が生成されていればOKです。

↑更新画面もばっちりできています。

↑エラー画面もばっちりです。
実際にデータが登録できる事も確認してみてください。

ログイン画面を作る

まだこれで終わりではないですよ。
そうです。管理者だけが更新できるようにするためのログイン画面が必要ですね。

ここはbakeだけでは作れないので、手を動かします。
まずはログインできるユーザー情報を格納するテーブルを作ります。

SQL

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `username` varchar(255) character set utf8 NOT NULL,
  `password` varchar(255) character set utf8 NOT NULL,
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 ;

先ほどのPostと同様にUserでもbakeして、controller、model、viewを作成します。
内容は先ほどと同じでOKです。

$ cakephp/cake/console/cake bake -app newapp

それぞれのファイルを作成したら
users_controller.phpを以下のように編集します。

newapp/controllers/users_controller.php

class UsersController extends AppController {
	var $name = 'Users';
	$components = array('Auth');
	
	function login(){
	}
	function logout(){
	    $this->Auth->logout();
	}
}

ログイン画面を作成

app/views/usersフォルダ内にlogin.ctpファイルを作成します。
以下の内容をコピーしてください。

newapp/views/users/login.ctp

 if  ($session->check('Message.auth')) $session->flash('auth');
 echo $form->create('User', array('action' => 'login'));
 echo $form->input('username');
 echo $form->input('password');    
 echo $form->end('Login');

ログアウト画面を作成

同時にlogout.ctpも作成します。

newapp/views/users/logout.ctp

ログアウトしました。

これでログインフォームが出来ました。
次に、ログインするためのユーザー名とパスワードをDBに設定します。

その際にパスワードは暗号化する必要があるのですが、
以下の手順で簡単に暗号化したパスワードを知る事ができますよ。

SQL

INSERT INTO  `users` (
`id` ,
`username` ,
`password` ,
`created` ,
`modified`
)
VALUES (
NULL ,  'test',  'cd2409a5830bc21d461a2911da440ea877fab27b',  '2011-07-05 00:00:00',  '2011-07-05 00:00:00'
);

最後にpost_controller.phpに認証が必要ないアクションを指定します。
indexとviewアクションは一般ユーザーが見れて良いページなので
この２つのアクションだけ認証が必要ないようにします。

以下のコードをpost_controller.phpに追加してください。

newapp/controllers/posts_controller.php

var $components = array('Auth');

function beforeFilter()
{
    $this->Auth->allow('index', 'view');
}

これで完了です！

さあ、http://[ドメイン]/newapp/posts/　にアクセスしてみてください。
ログイン画面が出て、ユーザー名とパスワードを入力するとページが開けるようになりました。

以上で終了です。
簡単に設置できるよう、色々はしょっている部分もあります。ご了承ください。
何かわからない事や質問などありましたらお気軽にコメントくださいね。

読むべきサイトやブログ記事

もっと色々な機能が知りたい方やCakePHPを触ってみたい方は以下のサイトやブログを参考にすると色々勉強になると思います。私もいつもお世話になっております。

• CakePHP マニュアル
• コミュニティ
• cakephperの日記(CakePHP, MongoDB)
• 24時間CakePHP
• WEBLE
• Shin x blog
• CakePHP開発者が知るべき10のこと
• Fresh! » CakePHPで作る会員管理システム
• Mark Story

書籍ではこの本がおすすめです。cakephp1.2が対象なのですが、基礎的な部分からテストのやり方など
とてもためになる情報が満載です。

また、手前味噌ですが当ブログのCakePHPタグもぜひどうぞ。

以上、cakephpを使って10分でCMSを作る方法でした。

詳しくは以下

Photo Slider Tutorial

フォトギャラリーを作成する方法

公式サイト

Animated Drop Down Menu with jQuery

ドロップダウンメニューの作り方

公式サイト

How to Mimic the iGoogle Interface

iGoogleのようなインタフェースの作り方

公式サイト

Horizontal Accordion

アコーディオンメニュー

公式サイト

Creating a polaroid photo viewer with CSS3 and jQuery

画像のドラッグ&ドロップを実現

公式サイト

Creating A Online Keyboard with jQuery

キーボードを作成する方法

公式サイト

詳しくは以下からどうぞ。

しかし、ajaxを使用する事により画像アップロード時に簡単にファイルを確認する事ができるようになります。
jQueryを使用したやり方を紹介している「Image Uploads with 100% Less Suck. Guaranteed.」というエントリーより。

詳しくは以下

以下のようなコードで実装できるようです。

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

jQueryを使用する事でこんなに短いコードで実装できるようになっているんですね。
CMS等を自作されている方、実装されてみてはいかがでしょうか。

サンプルはソースがダウンロードできるため、ローカル環境で詳しく確認できますね。

実際のデモとソースはこちらから

• デモ
• ダウンロード

サイトでは<header>、<nav>、<footer>、<aside>についてそれぞれ使い方が説明されています。
html5を早めに習得しておきたいかたはぜひ見てみてください。