備忘録的な @7wk

phpとjavascript系をメインに扱っていく予定。

簡易CMSを作る その2

昨日はCRU(D)を作りましたので、その続きです。

表示部分を作ります。

controllerにaction_detail()を追加します。
例のごとくエラーチェックはなしです。

<?php
public function action_detail($article_id=0)
{
    $article = \Model\Article::forge()->find((int)$article_id);
    $view = \View::forge('article/detail.html');
    if ($article) {
        $view->set('subject', $article->subject);
        $view->set_safe('body', $article->body);
    }
    return \Response::forge($view);
}

viewはいつものtwigです。

article/detail.html

{% extends "layout.html" %}

{% block content %}
    <h1>{{ subject }}</h1>
    <div>
        {{ body|raw|nl2br }}
    </div>
{% endblock %}

以上で完成です。

次に本文入力をWYSIWYGにしてみようと思います。
fuelphpはTwitterBootStrapがデフォルトで組み込まれているので
TwitterBootStrapを使用しているエディタを検索してみます。
何も考えずに「TwitterBootStrap WYSIWYG」でググって最初に出てくるものを使うことにします。
こちらです→bootstrap-wysihtml5

いつもならgitで入れるところですが
そのままcloneすると余計なファイルが多いので
zipで落として必要なファイルのみ使います。
localesを見ると日本語対応しているみたいですね。
すばらしい。

導入も簡単です。
viewに下記を修正・追加です。

<link rel="stylesheet" type="text/css" href="/css/bootstrap-wysihtml5.css"></link>
<script src="/js/wysihtml5-0.3.0.js"></script>
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-wysihtml5.js"></script>
<script src="/js/locales/bootstrap-wysihtml5.ja-JP.js"></script>

〜略〜

{{ form_textarea('body', article.body, {'rows':20, 'id':'body', 'placeholder':'本文を入力して下さい。'}) }}

〜略〜

<script type="text/javascript">
    $('#body').wysihtml5({locale: "ja-JP"});
</script>

これで簡単なCMSができました。
あとはエラー処理・セキュリティ・使い勝手を向上させていく感じでしょうか。
単純な仕組みなので拡張も簡単だと思います。

以上。