CakePHPでミニブログをつくる・その3
見た目を綺麗にする
viewファイルを修正
app/views/posts/index.thtml
<div class="posts"> <h2>List Posts</h2> <table cellpadding="0" cellspacing="0"> <tr> <th>Id</th> <th>Text</th> <th>Keyword</th> <th>Created</th> <th>Modified</th> <th>Delflg</th> <th>Actions</th> </tr> <?php foreach ($posts as $post): ?> <tr> <td><?php echo $post['Post']['id']; ?></td> <td><?php echo $post['Post']['text']; ?></td> <td><?php echo $post['Post']['keyword']; ?></td> <td><?php echo $post['Post']['created']; ?></td> <td><?php echo $post['Post']['modified']; ?></td> <td><?php echo $post['Post']['delflg']; ?></td> <td class="actions"> <?php echo $html->link('View','/posts/view/' . $post['Post']['id'])?> <?php echo $html->link('Edit','/posts/edit/' . $post['Post']['id'])?> <?php echo $html->link('Delete','/posts/delete/' . $post['Post']['id'], null, 'Are you sure you want to delete id ' . $post['Post']['id'])?> </td> </tr> <?php endforeach; ?> </table> <ul class="actions"> <li><?php echo $html->link('New Post', '/posts/add'); ?></li> </ul> </div>
これを↓のようにする。
<div class="addButton"> <?php echo $html->link('つぶやく', '/posts/add').PHP_EOL; ?> </div> <?php foreach ($posts as $post): ?> <div class="messageArea"> <span class="writer"><?php echo h("takeru-c"); ?></span> <span class="message"><?php echo h($post['Post']['text']); ?></span> <span class="datetime"><?php echo date("Y/m/d H:i", strtotime($post['Post']['created'])); ?></span> <span class="actions"> <?php echo $html->link('View','/posts/view/' . $post['Post']['id']).PHP_EOL ?> <?php echo $html->link('Edit','/posts/edit/' . $post['Post']['id']).PHP_EOL ?> <?php echo $html->link('Delete','/posts/delete/' . $post['Post']['id'], null, 'Are you sure you want to delete id ' . $post['Post']['id']).PHP_EOL ?> </span> </div>
さらにレイアウトファイルを作成。
app/views/layouts/default.thtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>俺のつぶやき(仮称)</title> <?php echo $html->charset().PHP_EOL; ?> <link rel="icon" href="<?php echo $this->webroot . 'favicon.ico'; ?>" type="image/x-icon" /> <link rel="shortcut icon" href="<?php echo $this->webroot . 'favicon.ico'; ?>" type="image/x-icon" /> <?php echo $html->css('style').PHP_EOL; ?> </head> <body> <div id="contentsArea"> <div id="header"> <?php echo $html->link('俺のつぶやき(仮称)', '/').PHP_EOL; ?> <?php echo $html->link('RSS', '/rss').PHP_EOL; ?> <?php echo $html->link('ログイン', '/login').PHP_EOL; ?> </div> <div id="main"> <?php if ($session->check('Message.flash')) { $session->flash(); } echo $content_for_layout; ?> </div> <div id="footer"> <a href="#">▲new</a> <a href="#">old▼</a> </div> </div> </body> </html>
適用したcssはこんな感じ。
app/webroot/css/style.css
@charset "utf-8"; body{ margin: 0; padding: 0; background-color: #CCCCCC; } #header{ padding: 10px; } #contentsArea{ margin: 0 auto; width: 600px; background-color: #DDDDFF; } #footer{ padding: 5px; text-align: right; } #footer a{ padding: 2px 10px; border: 1px solid #CCCCCC; background-color: #FFFFFF; } .addButton{ margin: 10px 0; text-align: center; } .messageArea{ background-color: #FFFFFF; padding: 10px; border-bottom: 1px dotted #999999; } .writer, .comentWriter{ font-weight: bold; } .message, .comentMessage{ padding: 0 3px; } .comentMessage{ color: #666666; } .datetime, .comentDatetime{ color: #999999; font-size: 80%; } .comentArea{ margin-left: 100px; font-size: 80%; } .actions{ font-size: 80%; }
追記
記事を日付で降順にする為に、コントローラーを修正。
app/controllers/posts_controller.php
function index() { $this->Post->recursive = 0; $this->set('posts', $this->Post->findAll(null, null, 'Created DESC')); }