WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
TwitterBootstrapの導入

TwitterBootstrapの導入

このエントリーをはてなブックマークに追加

デザインの得意な人ならいいのですが、デザインの苦手な人がサイトを作成するのは、大変ですよね。そこで、デザインの苦手な人(私?)の為に、TwitterBootstrap*の導入方法をご紹介したいと思います。

TwitterBootstrapの導入方法

  1. TwitterBootstrapの公式サイトから、「Download Bootstrap」ボタンをクリックして、Zipファイルをダウンロードしてきます。
    laravel012
  2. 解凍したtwitter bootstrapのフォルダ名をtbs(任意)に変更します。
  3. 名称変更したtbsフォルダをC:\xampp\htdocs\laravel4\publicの中にコピーします。
  4. コピーしたtbsフォルダの中には、css,img,jsと3つのフォルダがあるのを確認してください。

Twitter Bootstrapでベーステンプレートの作成

それでは、Twitter Bootstrapをレイアウト(ベース)テンプレートに適用する方法を見てみましょう。

  1.  app/views/layoutsフォルダ内にtbs.blade.phpを作成して下記のように記述します。
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    {{ Html::style('tbs/css/bootstrap.min.css') }}
    {{ Html::style('tbs/css/bootstrap-responsive.min.css') }}
    @section('header')
    <title>WinRoad</title>
    @show
    </head>
    <body>
    <div class="navbar">
    <div class="navbar-inner">
    <div class="ccontainer">
    {{ Html::link('#','WinRoad',array('class'=>'brand')) }}
    <ul class="nav">
    @section('nav')
    <li><a href='#'>TOP</a></li>
    @show
    </ul>
    </div>
    </div>
    </div>
    @yield('content')
    @section('footer')
    <footer style="background-color:green;color:white;text-align:center">
    <h4><?php echo $corporation;?></h4>
    </footer>
    @show
    {{ Html::script('http://code.jquery.com/jquery-1.9.1.min.js') }}
    {{ Html::script('tbs/js/bootstrap.min.js') }}
    </body>
    </html>
  2. 次にhello.blade.phpも下記のように修正します。
    @extends('layouts.tbs')
    @section('header')
    <title>Laravel初心者講座</title>
    @stop
    @section('nav')
    @parent
    <li>{{ Html::link('#','Link') }}</li>
    @stop
    @section('content')
    <div class="container hero-unit">
     <h1>Hello World!</h1>
     <h2>ようこそ{{ $name }}さん</h2>
     <p>あなたのメールアドレスは{{ $email }}です。</p>
     <p>これはapp/views/hello.blade.phpファイルです</p>
    </div>
    @stop
    @section('footer')
    <footer style="background-color:blue;color:white;text-align:center">
    <h4>WinRoad</h4>
    @stop
  3. ブラウザで確認してみましょう。
    laravel014
  4. どうです。簡単にデザインができますね。
  5. ちょっと古い記事になりますが、「これだけ覚えれば誰でも使えるTwitter Bootstrap2.0」で、簡単な使い方をご紹介していますので、よろしければ参考にしてください。

« »

コメント

  • ほげほげ より:

    お世話になっております。
    説明していただいた情報を参考に早速ブレードテンプレートを試していますが、外部で作成したテンプレートをとても簡単に差し込めることに驚きました。

    これならサイトが大規模になったりしてもレイアウトの統一性を持たせたまま、たとえばユーザーや扱うデータの内容に合わせて自由にサイトのデザインの詳細を変更できますね(^o^)

    仮に会員制のサイトをつくるとしたら、

    (1)メンバー登録やログイン認証にはSentry2パッケージの導入と、認証情報入力時にSSL通信への強制ルーティングを記述。(SSL証明書を取得して配置した上で。ローカルの場合はまだ理解できてないです(´・_・`))

    (2)Sentry2で作成されるデータベーステーブル以外のテーブルを作成する前に、ある程度ER図をアナログで考えておいて、残りのテーブルをMySQLの同じデータベースまたは別データベース内に作成する。

    (3)主な機能毎にEloquentモデルを継承してデータベーステーブルの操作のモデル(対象データベースとか対象テーブル名とか、アクセス可能なテーブル内の項目とか、個人情報とかの場合は属性指定によるHash&saltなどをかける)を作る。

    (4)モデルに対応するコントローラ(モデル名と同じが良いのでしょうか?)を作る。
    (データの登録、検索、更新、削除のメソッドとかを記述、変数にデータを投入)

    (4)application/views/コントローラ名でフォルダを作って、あとはそこにコントローラから受け取ったデータビューファイル(例えばコントローラ名.blade.php)を作成して、コントローラから受け取った変数経由のデータを表示したりする部分を作っておいて、教えていただいた方法で基本レイアウト用のベーステンプレートファイル内に読み込む。

    (5)アクセスされるビューファイルには入力時やページ移動のエラー等に関するCSRF対策やXSS対策ができているか、route.phpやglobal.phpの設定やクッキーの登録方法も再確認して適切な状態にする。

    といった感じでしょうか?

    もしこのような流れで構築していくという理解でよければ、とても簡単・直感的に、安定感のある拡張性の高いサイトが構築できて楽しそうですね(^_^)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です