CakePHPクッキング

Bootstrap3を使う

開発環境:CakePHP2.5.1

管理画面などを作るのに便利なCSSフレームワークのBootstrap。(記事公開時の最新バージョンは3.1.1)
CakePHPに簡単にBootstrapを導入する方法を見ていきましょう。

Bootstrapを設置する

サイトよりファイルをダウンロードします。
http://getbootstrap.com/

ダウンロードしたファイルを解凍し、css・fonts・jsをwebroot配下に設置します。

TwitterBootstrapプラグインを導入する

slywalkerさんが作成したTwitterBootstrapプラグインをダウンロードします。
https://github.com/slywalker/TwitterBootstrap

ダウロードしたファイルを解凍し、TwitterBootstrap とリネームして app/Plugin/TwitterBootstrap に設置します。

bootstrap.phpに読み込む設定を追記

設置したTwitterBootstrapを読み込むために、app/Config/bootstrap.php に下記のコードを追加します。

CakePlugin::load('TwitterBootstrap');

レイアウトをBootstrapに変更

slywalkerさんのプラグイン内にレイアウトファイルが入っていますが、Bootstrapのバージョン2のものなので、バージョン3にするなら app/View/Layouts/default.ctp を次のようなコードに変更します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		<?php echo __('CakePHP: the rapid development php framework:'); ?>
		<?php echo $title_for_layout; ?>
	</title>

    <!-- Bootstrap -->
	<?php echo $this->Html->css('bootstrap.min'); ?>

	<!-- Le styles -->
	<style>
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
	</style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <?php echo $this->Session->flash(); ?>

    <?php echo $this->fetch('content'); ?>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <?php echo $this->Html->script('bootstrap.min'); ?>
    <?php echo $this->fetch('script'); ?>
  </body>
</html>

カスタマイズは自由に!

ここまでで準備が完了したので、あとは公式に載っている例を見ながら部品を追加していきましょう。
http://getbootstrap.com/getting-started/#examples

The following two tabs change content below.

柴田 篤志

愛知県一宮市在住のWEBシステム屋(SE・プログラマ)。PHP、 CakePHPを利用して日々開発中。CakePHPをこれから始める方、ある程度CakePHPで開発をしている初級〜中級者の方を対象に、CakePHPでの開発をスピードアップするための情報をまとめています。CakePHPの案件のご依頼、御見積はこちらへご連絡ください。

最新記事 by 柴田 篤志 (全て見る)

WordPressとCakePHPの共存

サイトを作るのに便利なWordPress。プラグインも数多く用意されて

サイトマップの作成方法

Googleのウェブマスターツールに渡すためのサイトマップの作成方法で

INSERTしたIDを取得する

データを保存した後にINSERTされたデータのIDを使って何かの処理を

ファイルの存在確認やフォルダー内のファイル一覧取得

特定のファイルの存在を確認したい場合や特定のフォルダー内にあるファイル

リンクの最後に常にスラッシュをつける方法

URLの最後に常にスラッシュをつけるかつけないかを統一する方法は、UR

countやsumを使う時のフィールド名を指定する

CakePHPでcountやsumなどを使う場合、ちょっとした工夫が必

Formの便利な使い方

問い合わせフォームや会員機能など、WEBサイトを作る際に必ず必要になる

ヘルパーをオーバーライドする

CakePHPで便利な機能が詰まったヘルパーですが、時々もう少しこうだ

特定の時だけSQLの条件を追加するならSet::mergeを使う

SQLの条件を追加したい時に使うのがarray_mergeなどですが、

ページネーションではDISTINCTではなく、GROUP BYを使う

重複したデータを省く時に使うDISTINCTですが、ページ送りで使う時

Model内で別のModelを呼び出す

モデル内で別のモデルを使いたいケースがあった場合、次のようにすることで

CakePHPでGoogleAnalyticsAPIを使う

CakePHPでGoogleAnalyticsを使う方法について見てい

独自のfindを定義するfindMethods

findをより便利に、よりスッキリ書くのに、findMethodsを使

TCPDFを使ってCakePHPでPDFを作成

CakePHPでPDFを作成するには幾つかの方法がありますが、今回はT

JavaScriptをコードの最下部に配置

SEOの観点からJavaScriptのコードは一番下に記述したいところ

無限スクロールをさせる

TwitterやFacebookのタイムラインを見ていて、ページの下に

PHPExcelの導入

ExcelにDBのデータを表示して一覧を作ったり、請求書などのフォーマ

Warning: SplFileInfo::openFile〜の警告が表示されたら

ShellとWEBの両方で同一のModelを呼び出す時に「Warnin

連結されていないデータを抽出

通常、テーブルを連結してデータを取得するには、アソシエーションを利用し

データを取得する

データを取得したい時に少し変わった条件で取得したい場合があります。

PAGE TOP ↑