パンプキンスパイスラテ

IT系のことが多めの日記帳です

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%;
}

そしてブラウザで確認。
↓before

↓after

おっけー。ちなみに、作業フローは下記のとおり。

  1. PHPインストール
  2. CakePHPインストール
  3. DB構築
  4. bakeで土台を作る。 
  5. 見た目を綺麗にする。←イマココ
  6. キーワード自動生成(Yahoo!日本語形態素解析Webサービス
  7. キーワード編集(Ajax
  8. Twitter検索からキーワード検索でデータを取得して表示する。
  9. ログイン機能をつける。
  10. リリース

追記

記事を日付で降順にする為に、コントローラーを修正。
app/controllers/posts_controller.php

  function index() {
    $this->Post->recursive = 0;
    $this->set('posts', $this->Post->findAll(null, null, 'Created DESC'));
  }