CakePHP修行 Archive

今回はスケジュール登録画面を作成します。
今回は(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フォルダに入れてください。

リンクをこんな風に記述。
[sourcecode language='php']
echo $html->link($html->image(“pencil_add.png” , array(“class”=>”alphafilter”)), ‘/schedules/add/’ . $month->year . “/” . $month->month . “/” . $Day->thisDay(),null,null,false);
[/sourcecode]

また、ダウンロードしたjsファイルを読み込むために、レイアウトのデフォルトファイルにjsファイル読み込みの記述を追加します。
後述するjqueryファイルも同じように追記します。
・app/views/layouts/default.thtml
[sourcecode language='php']

[/sourcecode]

続きを読む

たいしたネタではないですが、テーブルのレイアウトを変更したのでソースを載せておきます。CakePHPと関係ないな…。
レイアウト変更後は↓のようになります。

・app/webroot/css/cake.generic.cssに追加
[sourcecode language='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
}
[/sourcecode]

今回はPearを使ってカレンダー表示ページを作成します。Pearとカレンダーパッケージについては以前にも参考にさせていただいたことのあるmukoさんのブログエントリーが分かりやすいです。コメントも含めて参考にさせていただきました。

creative@interactive ≫ CakePHPとカレンダー表示（2）

まずは下記のようにvendorフォルダにPEARとカレンダーパッケージを配置します。

続きを読む