cakephpでブックマークアプリを作る(7)

2011年06月28日| CakePHP入門

cakephpでブックマークアプリを作る(7)

さてさて、Cakephpで基本的なプログラムの書き方を覚えたのですが、大事なことを何か忘れていますよね！

この見た目ではWEBサイトとして公開することはとてもじゃないけど出来ないですよね！と、いうわけで今回はCakephpの見た目を作る、
『view』『layout』を中心にお送りしたいと思います

Cakephp Layoutを作る

ゼロからテンプレートファイルのデザイン、コーディングをしていくのは大変&面倒なので今回はフリーで商用利用可能なテンプレートを利用することにしましょう。

ChocoTemplates – MovieHunter
今個人的に最もはまっているテンプレート屋さんです。もしこのテンプレートを利用する際は、フッターのコピーライトはそのままにする必要があります。

さて、このテンプレートのindex.htmlをそのままさきlayout.ctpというファイル名にして、

C:\xampp\htdocs\bookmark\app\views\layouts

こちらに設置してください。(layout.ctpとは単なる例なので、なんでもいいです　好きなファイル名を定義してください。)

続いてCSSやJavascriptの設置を行います。

さきほどダウンロードしたフリーテンプレートを下記のようにそれぞれ設置してください。

C:\xampp\htdocs\bookmark\app\webroot

このディレクトリの役割は『ドキュメント直下』という意味になります。画像、CSS、Javascript関係はここに設置するといいでしょう。

ここまで出来たところでプレビューしてみましょう

Cakephpのデフォルト画面ではなくなったものの、完全にCSSなどがリンク切れを起こしていますね・・・
Cakephp内では相対パスではなく、絶対パスで書いていきましょう。

layout.ctpを開いてヘッダーを参照してください。赤字のところをスラッシュ切りの絶対パスに書き換えてあげれば、webrootディレクトリのファイルを読み込んでくれるようになります。

localhostをドメインと考えるならば、webrootのcssフォルダまでのスラッシュ切りの絶対パスと考えれば

<link rel="stylesheet" href="/bookmark/css/style.css" type="text/css" media="all" />

<!--[if IE 6]>

<link rel="stylesheet" href="/bookmark/css/ie6.css" type="text/css" media="all" />

<![endif]-->

<script type="text/javascript" src="/bookmark/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="/bookmark/js/jquery-func.js"></script>

変更したらもう一度プレビューしてみましょう。
だいぶ見た目が変わってくれましたね。

ここまで見た目が整ってきたところで、いよいよ今まで作ったプログラムをこのテンプレート内で出力させてみます。

一旦ここまで出来たlayput.ctpのうち、

この中身をざっくり消して、(後で使うのでどこかにコピーをしておくのが一番いいかと・・・)
こんなカンジで書き換えておきます。

<div id="content">

<?php echo $content_for_layout?> 

</div>

$content_for_layoutの中に書くアクション毎のプログラムの結果が返ってくることになります。

最後に、bookmark

C:\xampp\htdocs\bookmark\app\views\posts

このフォルダの中のそれぞれのctpファイルを変更していきます。さきほどlayoutファイルから取り除いたid　contentの中身を使います。

実際には、ループのしそうな部分と、サブタイトルだけがあればいいので、必要なのはこの部分だけですね

<!-- Box -->

  <div class="box">

  <div class="head">

  <h2>LATEST TRAILERS</h2>

  <p class="text-right"><a href="#">See all</a></p>

  </div>
 <!-- Movie -->

  <div class="movie">

  

  <div class="movie-image">

  <span class="play"><span class="name">X-MAN</span></span>

  <a href="#"><img src="css/images/movie1.jpg" alt="movie" /></a>

  </div>

  

  <div class="rating">

  <p>RATING</p>

  <div class="stars">

  <div class="stars-in">

  

  </div>

  </div>

  <span class="comments">12</span>

  </div>

  </div>

  <!-- end Movie -->

ここに以前作ったループの処理を加えると
こんなカンジになりますね。(赤字の部分が今まで作ったプログラム)

<!– Box –>
<div class="box">
<div class="head">
<h2>LATEST TRAILERS</h2>
<p class="text-right"><a href="#">See all</a></p>
</div>

<!– Movie –>
<?php foreach ($posts as $post ): ?>
<div class="movie">

<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in">

</div>
</div>
<span class="comments"><?php echo $post[‘Post’][‘created’];?></span>
</div>
</div>

<?php endforeach; ?>
<!– end Movie –>

あと、URLに応じて、サイトのサムネイルを自動で取れたら素敵ですね。
ただ、サムネイルの生成については今回のCakephpの内容と若干ずれてきますので
サムネイル自動生成ツールを使うことにします。

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス
サムネイル作成ツールでオススメです。非常に簡単なので、みなさんも使ってください。

例えば　http://kaasan.infoのURLのサムネイルを生成したいなら
http://capture.heartrails.com/medium?http://kaasan.info
こうやって書けばいいだけです。これをふまえた上でCakephpでも応用すると

http://capture.heartrails.com/medium?<?php echo $post[‘Post’][‘url’];?>

こんな風にループ中に書けばいいですね。これでサイトごとのサムネイル画像を自動で生成(生成はしてないか)できたわけです。
サイズは自分で自由に設定できるので、詳しくはこのサムネイル生成ツールのホームページより確認してください。

ではプレビューしてみましょう！

なかなか悪くないですね！やっと見れるものができた！ってカンジです。

データベースの設計から始まり、ようやっとここまで完成しましたね、お疲れ様です。

のちほどこのページに完成したマスターと、見た目を整えた閲覧側のCakephpをそれぞれ設置しますので、お待ちください。

お知らせ

重大発表！
長きに渡ってお送りしてきました(ダラダラ書いているからなんだけど)
Cakephp入門は次回で最終回になります！
最後は完成したCakephpをサーバーにアップして、Cakephpをサイトとして運用するための設定、パーミッション、
細かいことなんだけど404エラーや、Googleサイトマップの設置の仕方までお送りしたいと思います。

ただプログラム書いておしまいにしないのがこのITかあさんです！
最終回も、お楽しみに！

2011年06月15日| WEBサイトテクニック

これは使える！美しいデザインのチャート60のまとめ

グラフやチャートの見せ方って、WEBサイトを作っているとよく考えたりしますよね。
そんなチャートやグラフの見せ方の参考にできそうな、なんと60個もまとめてある記事を見つけましたので紹介します。

Tools For Web Developers and Designers – 60 Useful Cheat Sheets

HTML5 & CSS3 Support

これはすぐにでも参考にできそうなチャートデザインですね

HTML5 Canvas Cheat Sheet

こういうシンプルなのが一番好きです

What is HTML5?

ちょっと工数はかかりそうですが、こういうDTP風な作りのチャートも視覚的にいいですね

他にもこんなカンジの素敵なチャートやグラフデザインがたくさん紹介されています。参考にどうぞ！！
こちら

2011年06月13日| 便利ツール

HTML5テンプレートジェネレータがすごい件

もう知ってるひとも多いことと存じますが、すいません、今日初めてその存在を知りました。
HTML5はXHTMLとだいぶお作法が違いますね。ゼロから勉強していくのも大変だし、手ごろなHTML5 テンプレートはないかな～と思っていたら、ありましたよ！こんなところに。

全5つの項目に対してチェックをするだけでHTML5で作られたシンプルなテンプレートをダウンロードすることができます。

headerタグ、footerタグ、sectionタグなど新しく導入されたタグはもちろんのこと、見たカンジSEOを意識した作りにもなっているので、サンプルテンプレートをダウンロードして、自分でもう少してこ入れすれば、あっという間にHTML5 でのサイトが作れてしまいそうです！

余計なチェック項目もありますが、下記に念のために解説しておきたいと思います。

Initializr　項目解説

HTML & CSS	テンプレートにサンプルで文字を入れておくかどうか。サンプルで何かテキストレベルで入っていたほうが編集しやすいでしょう。その場合はInitializr sample pageを選択
Javascript	特に気にすることがないならI want jQuery minified!を選んでおきましょう。Jquery対応化
Compatibility	互換性について。スマフォサイトだけでのオープンならJust html5shivにしてもいいでしょうが、PCサイトであれば互換性を意識したModernizr!がいいでしょう
Server Configuration	サーバー設定についてでしょうか。HTML5とは特に関係がないのでNo, thanksでいいと思います。
Analytics	Googleアナリティクスの解析タグは注入するか。・・・でもこれって最終的には自分で書着なおすから、項目としているのかな

2011年06月09日| CakePHP入門

cakephpでブックマークアプリを作る(6)

今回マスター管理機能に選択したデータを削除するプログラムを書いていきます。作り方は非常に簡単です。

C:\xampp\htdocs\bookmark_master\app\controllers\posts_controller.php

このファイルを開いて、以下のdeleteアクションを追加してください。
コードはたったこれしかありません。

function delete($id) {
$this->Post->delete($id);
$this->redirect('/posts');
}

解説をしますと、
http://localhost/bookmark_master/posts/delete/8
というURLでアクセスがあった場合$idとはIDが8のことですから、
ID８のデータを削除$this->Post->delete($id);する、ということですね。
たったこれだけ！editアクションに比べるとずいぶんシンプルです。

viewの編集

な、なんと今回はdelete.ctpというファイルすら作りません。
なぜならデータ削除処理をしたらすぐに一覧ページへリダイレクトする流れになるので、必要ないのです。

今回は

C:\xampp\htdocs\bookmark_master\app\views\posts\index.ctp

だけを編集すればよいのです

<table>

<tr>

<th>サイト名</th>

<td>URL</td>

<td>編集</td>

<td>登録日時</td>

<td>更新日時</td>

</tr>

<tr>

<?php foreach ($posts as $post ): ?>

<th><?php echo $post['Post']['title'];?></th>

<td><?php echo $post['Post']['url'];?></td>

<td><a href="/bookmark_master/posts/edit/<?php echo $post['Post']['id'];?>">修正</a>　
<a onclick="return confirm('削除してもよろしいですか？');"
 href="/bookmark_master/posts/delete/<?php echo $post['Post']['id']; ?>">削除</a>
</td>

<td><?php echo $post['Post']['created'];?></td>

<td><?php echo $post['Post']['modified'];?></td>

</tr>

<?php endforeach; ?>

</table>

追加したのは、赤字のところだけ、後は前回の分と何も変わっていませんよね。
これだけでもう削除機能はできてしまいました。

解説

Javascriptの　confirm(‘削除してもよろしいですか？’)こちらは、Javascriptのalert()に、『OK、キャンセル』の確認ボタンが付いたものです。キャンセルを押せば当然/bookmark_master/posts/edit/8には遷移しません。

削除ボタンを押して削除しているようですが、実際は

http://localhost/bookmark_master/posts/delete/8
にアクセスをしているだけなのです。
すると、8($id=8)を認識して、削除であるdeleteが実行され、すぐに一覧ページへとリダイレクトされる仕組みなのです。
すぐリダイレクトされてしまうので、削除ページを作る必要すら今回はありませんでした。

う～ん、すご～く削除機能はあっさりしていますね！このあっさりしたところがCakePHPの最高にいいところですよね！

2011年06月07日| CakePHP入門

cakephpでブックマークアプリを作る(5)-2

今日は前回の解説をします。

PostsController　editアクションの解説

http://localhost/bookmark_master/posts/edit/28
このようなURLでアクセスされたときに、お尻の『28』というid番号が$idの中に代入され、
$this->Post->read()を使って対象のデータが$this->dataの中に代入され、
$this->Post->save($this->data[‘Post’])
によって、最終的にフォームデータがデータベースに反映される

というのが一連の流れです。

まずは第一行目のunction edit($id = null) {の　$idの正体を見て行きましょう。

中身に何が入っているかを確認するにはdebugを使うんでしたね。

function edit($id = null) {
debug($id);
 $this->Post->id = $id;

  if (empty($this->data)) {

  $this->data = $this->Post->read();

  } else {

  if ($this->Post->save($this->data['Post'])) {

  $this->redirect('/posts');//処理完了後、/postsへリダイレクトされる

  }

  }
  }

すると画像のように、仮にURLがhttp://localhost/bookmark_master/posts/edit/8
だとすると、debug($id);の結果は8と返ってきます。

これは、よくパラメータ形式のURLにするときの
http://localhost/bookmark_master/posts/edit/?id=8
と一緒です。
このパラメータを$_GETして、$idに代入しても同じ結果を得ることができます。

2行目に注目すると、$idのデータを$this->Post->idに代入していることが分かります。

では3行目から登場する、$this->dataが何をしているのかを順番に見ていきましょう。

function edit($id = null) {
 $this->Post->id = $id;

  if (empty($this->data)) {

  $this->data = $this->Post->read();

  } else {

  if ($this->Post->save($this->data['Post'])) {

  $this->redirect('/posts');//処理完了後、/postsへリダイレクトされる

  }

  }

  }

$this->dataを動画で確認

いちいち画像をキャプチャするのが面倒なので、動画でまとめました。

注目してもらいたいのが、
$this->data = $this->Post->read();
この上で
debug($this->data);
を実行しても空になる点です。つまり
$this->Post->read();が実行されるまでは$this->dataは空のままなのです。

なぜread();の下では$this->dataに値が入ってくるのでしょう？

read()の役割について:ポイント

$this->Post->read()
Postモデルの一つ目のレベルしかデータを持ってこれない
$this->Post->read(”,$id)
と書いても結果は同じ

$this->Post->read(‘url’, 2);
仮にこのように書くとのidが2番目のurlフィールドを持ってくる、という意味になります。
このread()関数の第一引数がフィールド名ならば、下記の用にフィールド名を空にすると
idが2番目のデータの全てのフィールドを取得する、という意味になります。
$this->Post->read(”, 2);

下記URLにも同じようなことが書いてあります。read()についてはこちらを参考にするといいかもしれません。

3.7.3.6 read()
Blog チュートリアルにつまずいたら” フォーラム – CakePHP Users in Japan

関連するモデル(今回はPost)の直前に取得されたデータ、または、read()のカッコ内で指定されたidのデータを引っ張るのでeditアクションについてはこういう書き方をしてもOKということになります。
実行結果を確認するために、$this->redirect(‘/posts’);は一時的にコメントアウトしてみます。

editアクション　コード

function edit($id = null) {

$this->Post->id = $id;
  if (empty($this->data)) {

  $this->data = $this->Post->read('',$id);
 } else {

  if ($this->Post->save($this->data['Post'])) {


debug($this->data['Post']);
 //$this->redirect('/posts');

  }

  }

  }

editアクション　コード　実行結果

ちゃんとdebug($this->data[‘Post’]);はフォームに入れたのと同じ結果が入ってきますよね。

忘れちゃいけない

大前提で忘れちゃいけないのが、$this->Post->id = $id;だったりします。
これが無いと、修正をかけたい対象のidが検索できず、
新規登録扱いになってしまいます。

修正かけたい対象は$this->Post->id = $id;
とやって検索をかけてもOKだし、view側のフォーム内のどこかで

<?php echo $form->input('id'); ?>

と書いてもOK！

すると、フォーム送信時に

<?php echo $form->input('id'); ?>

これをhiddenとして、対象のidが渡されます。

(ただ、何でもフォームデータで渡すと、Firebugなどのツールを使って、IDを不正に書き換えたデータを送られてしまう可能性があるので、コントローラー側で処理をするのが無難でしょう)

ちょっと今回は非常に解説が難しかったです！うまく伝わったか心配ですね～。
間違いがあれば訂正していただけるとうれしいです。

この記事に関しては、時間を見つけてもう少し分かりやすく修正できればな～と思います。

今回のコントローラーについてはこちら。
次回cakephpでブックマークアプリを作る(6)
にて削除機能を追加したいと思います

2011年06月05日| CakePHP入門

cakephpでブックマークアプリを作る(5)-1

Cakephpでブックマークアプリ作成も、いよいよ終盤に差し掛かってきました。
今までDBに直接入れておいたデータや、管理画面から追加したデータを編集するプログラムを作っていきます。

Cakephpのデータ登録の仕組み

idがあれば(このidとはpostsテーブルのidフィールドのこと)データの更新を行い、
idが無ければ新規投稿を行う

これを頭に入れておいてください。

編集画面のedit.ctpを作る

C:\xampp\htdocs\bookmark_master\app\views\posts

こちらを開いて、前回作成したadd.ctpを複製してedit.ctpという名前にしておいてください。

編集用のfunction　editの作成

function edit($id = null) {
 $this->Post->id = $id;

  if (empty($this->data)) {

  $this->data = $this->Post->read();

  } else {

  if ($this->Post->save($this->data['Post'])) {

  $this->redirect('/posts');//処理完了後、/postsへリダイレクトされる

  }

  }

  
  }

アクションの解説はのちほど。

一覧に編集用のリンクを作成

index.ctpファイルを編集します。一覧から編集できるようリンクの追加です。

<table>

<tr>

<th>サイト名</th>

<td>URL</td>

<td>編集</td>

<td>登録日時</td>

<td>更新日時</td>

</tr>

<tr>

<?php foreach ($posts as $post ): ?>

<th><?php echo $post['Post']['title'];?></th>

<td><?php echo $post['Post']['url'];?></td>

<td><a href="/bookmark_master/posts/edit/<?php echo $post['Post']['id'];?>">修正</a></td>

<td><?php echo $post['Post']['created'];?></td>

<td><?php echo $post['Post']['modified'];?></td>

</tr>

<?php endforeach; ?>

</table>

これで今回の編集用のアクションとビューが完成しました。それでは実際にデータを編集してみましょう。

これで書き方は一切間違ってはいないのに、エラーが出てしまうんです。

どんなエラーが出るのか、実際にやってみた

この動画の通り、サブミットボタンを押した瞬間何やらエラーが発動してしまいます。
そして一覧ページに戻ってみると、さきほど修正したデータが問題なく修正されていることが分かります。

http://ortk.main.jp/blog/?p=76

PHPの設定によっては問題ないのですが、このブログを更新している自宅マシンのXamppのphp.iniの設定により、発生する問題だったようです。

『書き方は間違ってないのに、この動画と全くおなじ

Cannot modify header information – headers already sent by…
のエラーが出たらphp.iniの変更を行ってください。

php.iniの変更

php.iniを開いて、

output_buffering = Off　→
output_buffering = On
とするだけで、この問題は解決します。

(今日、この記事を書くまで実はこのエラーに出くわしたことが無かったので正直あせりましたが、いい勉強になりました。)

その後Apach再起動をすると、エラーが出なくなり、データの更新も無事行われていることが確認出来ます。

細かい解説は、cakephpでブックマークアプリを作る(5)-2で行いたいと思います。

2011年06月01日| Photoshop

いつかどこかで使えるかもしれない、フリーテクスチャ画像まとめ

写真素材は無料に限る。だって会社が買ってくれないから。

そんなあなたはぜひフリーテクスチャ画像のまとめをチェックしてみてください！
何個あるんだろう　数えていないので分かりませんが・・・

High Quality Colorful Textures For Ambitious Designer

« cakephpでブックマークアプリを作る(4)-2 cakephpでブックマークアプリを作る(5)-1 »