CakePHP setFlashで出力されるメッセージのスタイルを変える方法

Posted on: 2012/03/22

CakePHP setFlashで出力されるメッセージのスタイルを変える方法

ディフォルトの使い方

> コントローラ

$this->Session->setFlash('メッセージ');

> ビュー

<?php echo $session->flash(); ?>

> 出力されるHTML

<div id="flashMessage" class="message">メッセージ</div>

> CSS（参考までに）

.message {
	background-color: lightYellow;
	border: 1px solid #E6DB55;
	padding: 10px;
}

というのがディフォルトの使い方です。
オリジナルのレイアウトを用意していなければ、レイアウトは default.ctp が適用されています。

とても便利な機能なので、できればサクセスメッセージとエラーメッセージのスタイルを分けたいところです。

setFlashメソッドはパラメーターが指定できるのです

setFlashメソッドの書式↓

setFlash($message, $layout = ‘default’, $params = array(), $key = ‘flash’)

主要なコンポーネント»セッション»メソッド»setFlash

※僕は最初からsetFlashをあたりまえのように使っていたので、パラメーターが指定できるとは知りませんでした。。幼い頃の話w

スタイルを変える方法その1

setFlashメソッドに $params のパラメータを指定します。

> コントローラ

$this->Session->setFlash('サクセスメッセージ', 'default', array('class' => 'flash_success'));

> ビュー

<?php echo $session->flash(); ?>

> 出力されるHTML

<div id="flashMessage" class="flash_success">サクセスメッセージ</div>

$params で指定したクラスが付加されました。

これでサクセスメッセージとエラーメッセージのスタイルを変えることができます。

> コントローラ

if ($this->User->save($this->data)) {
	$this->Session->setFlash('サクセスメッセージ', 'default', array('class' => 'flash_success'));
} else {
	$this->Session->setFlash('エラーメッセージ', 'default', array('class' => 'flash_failure'));
}

> ビュー

<?php echo $session->flash(); ?>

エラーメッセージの場合↓

> 出力されるHTML

<div id="flashMessage" class="flash_failure">エラーメッセージ</div>

> CSS（参考までに）

.flash_success {
	background-color: lightYellow;
	border: 1px solid #E6DB55;
	padding: 10px;
}
.flash_failure {
	color: #CD0A0A;
	border: 1px solid #CD0A0A;
	background-color: #FEF1EC;
	padding: 10px;
}

スタイルを変える方法その2

setFlashメソッドに $layout のパラメータを指定してレイアウトを切り替えます。

> コントローラ

if ($this->User->save($this->data)) {
	$this->Session->setFlash('サクセスメッセージ', 'flash_success');
} else {
	$this->Session->setFlash('エラーメッセージ', 'flash_failure');
}

> ビュー

<?php echo $session->flash(); ?>

/views/elements フォルダに、flash_success.ctp と flash_failure.ctp を用意します。

> flash_success.ctp

<div class="flash_success">
    <?php echo $message; ?>
</div>

> flash_failure.ctp

<div class="flash_failure">
    <?php echo $message; ?>
</div>

これで「$session->flash();」のところが指定したレイアウトで出力されます。
今回は特別なことはしていないので、結果はその1と同じです。

その他、setFlashメソッドのパラメータ指定でできること

$key パラメーターを指定する

> コントローラ

$this->Session->setFlash('メッセージ', 'default', null, 'my_flash');

> ビュー

<?php echo $session->flash('my_flash'); ?>

> 出力されるHTML

<div id="my_flashMessage" class="message">メッセージ</div>

$params パラメーターで変数を渡す

> コントローラ

function delete($id=null) {
	if ($this->User->delete($id)) {
		$this->Session->setFlash('これを削除しました >', 'flash_success', array('id' => $id));
	}
}

> ビュー

<div class="flash_success">
    <?php echo $message; ?>
    <?php echo $id; ?>
</div>

hijiriworld Web