Fri, Jul 18, 2008
今回はスケジュール登録画面を作成します。
今回は(1)スケジュール登録ページのリンク→(2)登録ページ→(3)登録処理→(4)登録完了メッセージの表示、と
順を追って説明していきます。
ちなみに完成画像はこちら↓


(1)スケジュール登録ページのリンク
・app/view/schelue/calendar.thtml
※前回まで、app/view/schelue/index.thtmlだったファイルをcalendar.thtmlに変更しました。
まずは、カレンダーページの日付セル内にそれぞれ日付登録ページへのリンクを張ります。
ここでリンク画像にfamfamfamさんの画像を使用します。
画像形式がPNGなので、IE6対策を施しておきます。
IE6のPNG画像透過処理を行ってくれるto-Rさんが作成された便利なjsライブラリがあるので、
それを利用させていただきます。ダウンロードしたjsファイルをapp/webroot/jsフォルダに入れてください。
リンクをこんな風に記述。
echo $html->link($html->image("pencil_add.png" , array("class"=>"alphafilter")), '/schedules/add/' . $month->year . "/" . $month->month . "/" . $Day->thisDay(),null,null,false);
また、ダウンロードしたjsファイルを読み込むために、レイアウトのデフォルトファイルにjsファイル読み込みの記述を追加します。
後述するjqueryファイルも同じように追記します。
・app/views/layouts/default.thtml
(2)登録ページ
・app/view/schedule/add.thtml
app/view/schedlue配下にadd.thtmlを作成します。
このファイルはCakePHPの典型的な、登録フォームのページにします。
- Schedule Add -
< ?php echo($year . "/" . $month . "/" . $day) ?>
< ?php echo($html->link("Back", '/schedules/calendar/' . $year .'/' . $month)) ?>
(3)登録処理
・app/controllers/schedules_controller.php
登録処理もCakePHPの典型的な登録処理です。
登録完了メッセージをセッションに入れているのは百式さんの手法をパクらせていただきました。
//add
function add($year = null, $month = null, $day = null)
{
$this->set("year",$year);
$this->set("month",$month);
$this->set("day",$day);
if(!empty($this->data))
{
//日付をセット
$this->data['Schedule']['start'] =
$this->data['Schedule']['start_year'] . "-" .
$this->data['Schedule']['start_month'] . "-" .
$this->data['Schedule']['start_day'];
//データ保存
if($this->Schedule->save($this->data))
{
$this->Session->write('sys_msg', 'Your schedule has been saved.');
$this->redirect('/schedules/calendar/' . $year . "/" . $month);
}
}
}
(4)登録完了メッセージの表示
・app/view/schelue/calendar.thtml
登録完了メッセージをjqeryを使用して、ふわーんと表示させています。これも百式さんの手法をパクらせていただきました。
< ?php if(isset($sys_msg)){ ?>
< ?php echo($sys_msg); ?>
< ?php } ?>
Tue, Jul 15, 2008
今回は $Route->parseを更に解析する予定でしたが、正直何をしたいのかがいまいち分からない。どうやら$Routeオブジェクトの$routes配列にいろいろ突っ込んでいるようです。
一体どんな値を入れているのかだけ、出力して終了(>_<) CakePHPのよく理解している人なら見当がつくのかな。
Router Object
(
[routes] => Array
(
[0] => Array
(
[0] => /
[1] => /^[/]*$/
[2] => Array
(
)
[3] => Array
(
[controller] => schedules
[action] => index
)
)
[1] => Array
(
[0] => /pages/*
[1] => #^/pages(?:/(.*))?[/]*$#
[2] => Array
(
)
[3] => Array
(
[controller] => pages
[action] => display
)
)
[2] => Array
(
[0] => /tests
[1] => #^/tests[/]*$#
[2] => Array
(
)
[3] => Array
(
[controller] => tests
[action] => index
)
)
[3] => Array
(
[0] => /bare/:controller/:action/*
[1] => #^/bare(?:/([^/]+))?(?:/([^/]+))?(?:/(.*))?[/]*$#
[2] => Array
(
[0] => controller
[1] => action
)
[3] => Array
(
[bare] => 1
)
)
[4] => Array
(
[0] => /ajax/:controller/:action/*
[1] => #^/ajax(?:/([^/]+))?(?:/([^/]+))?(?:/(.*))?[/]*$#
[2] => Array
(
[0] => controller
[1] => action
)
[3] => Array
(
[bare] => 1
)
)
[5] => Array
(
[0] => /:controller/:action/* (default)
[1] => /^(?:/(?:([a-zA-Z0-9_-.;:]+)(?:/([a-zA-Z0-9_-.;:]+)(?:[/?](.*))?)?))[/]*$/
[2] => Array
(
[0] => controller
[1] => action
)
[3] => Array
(
)
)
)
[__admin] =>
[_log] =>
)
追記
$route配列をよくよく観察してみると、CakePHPの遷移処理を管理しているように見えますね。
下記の例だと
[0] => /
[1] => /^[/]*$/
[2] => Array
(
)
[3] => Array
(
[controller] => schedules
[action] => index
)
おそらく[0]がルートパスを表していて、[1]が遷移に関する正規表現?、[2]はひとまず置いといて
[3]は実行するコントローラーとアクション。
[1]の正規表現は何を意味しているんだろう?
「/*$/」にマッチするのって「/」とか「///」みたいに、ひたすらスラッシュの文字列だけのように思うんだけど。
もう少しCakePHP理解しないと、分からないかな。
Mon, Jul 7, 2008
たいしたネタではないですが、テーブルのレイアウトを変更したのでソースを載せておきます。CakePHPと関係ないな…。
レイアウト変更後は↓のようになります。

・app/webroot/css/cake.generic.cssに追加
/* table */
table {
font-size:12px;
color:#333333;
background-color:#FFFFFF;
clear:both;
padding:0;
margin:0 auto;
white-space: normal;
border-collapse:collapse;
}
th {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
text-align: center;
padding:4px 4px;
border-collapse:collapse;
}
table tr td {
border: 1px dotted #CCCCCC;
padding:4px 4px;
vertical-align:top;
text-align: left;
border-collapse:collapse;
}
/* calendar */
.holiday{
font-size:10px;
color:#666666;
}
#calendar {width:700px;}
#calendar ul{
margin: 5px 0;
padding: 0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#calendar li{
background-image:url(/img/arr.png);
background-repeat:no-repeat;
line-height:120%;
margin-bottom:0px;
padding:3px 0px 1px 18px;
}
#calendar table tr td {
height:80px;
width:100px
}