.ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録

.検索

.メインメニュー

.フォーラムメニュー

.オンライン状況
15 人のユーザが現在オンラインです。 (15 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 15

もっと...

.
.リンク集

メイン
   Ajax、Webservice、API
     ログインフォームとユーザメニューの表示切り替え
投稿するにはまず登録を

フラット表示 前のトピック | 次のトピック
投稿者 スレッド
chika
投稿日時: 2007-2-16 15:08
Baker スタート
登録日: 2006-10-23
居住地:
投稿: 6
ログインフォームとユーザメニューの表示切り替え
はじめまして。

トップページの片隅にログインフォームがあり、ログインを行うとページ遷移することなくログイン処理を行い、ログインフォームのあった箇所にユーザメニューが表示される、という機能を作ってみたので、実装方法をTIPSの一つとして投稿させて頂きます。

※前提として今回はこういう処理の流れです。
1.トップページのviewからログインコンテナ表示メソッドを呼ぶ
2.ログインコンテナ表示メソッドにて、未ログインならログインフォームのview(element)を、ログイン済ならユーザメニューのview(element)を表示する
3.ログインフォームからのログイン処理はAjax.Requestにより同一ページ内で/users/loginにフォーム内容を送信、ログイン成功すればコンテナ内がログインフォームからユーザメニューに切り替わる
4.ログアウトはユーザメニューのリンクから/users/logoutにアクセス、コンテナ内がユーザメニューからログインフォームに切り替わる


■まずはトップページから。
トップページにてAjaxの使用を可能にする為、PagesControllerの$helpersにAjaxを追加します。
var $helpers = array('Html', 'Form', 'Ajax');


またトップページで使用するlayout内で、Ajaxに使用するJavaScriptライブラリを読み込ませておきます
<?php if (isset($javascript)): ?>
<?php echo $javascript->link('prototype')?>
<?php echo $javascript->link('scriptaculous')?>
<?php endif; ?>

// JavaScriptのヘルパーが使われていればライブラリが使用可能に。

トップページのview(デフォルトだとview/pages/home.thtml?)内のコンテナを表示したい箇所に以下を挿入。
<div id="user_menu">
<?php echo $this->requestAction('/users/login', array('return')); ?>
</div>

// requestActionはコントローラのアクションを呼んでrenderされたviewを返します('return'を指定していない時はrenderを返さずに処理だけかな?)
// Objectのメソッドなのでどこからでも呼べて便利。


■ログインフォーム/ユーザメニュー表示切り替えのメソッドを作成。
UsersControllerのloginメソッドにて行います。
function login() {
  $this->viewPath = $this->viewPath.'/elements';   // 小分けしたいのでビューはviews/users/elements/以下に配置

  if(empty($this->data)) {    // フォーム送信なしの時
    if(セッションチェック){
      //ログイン済の時の処理
      $this->render('menu');    // ログイン済の時ユーザメニューを表示
    }

  }else{
    if(ログインチェック){
      //ログイン時の処理
      $this->render('menu');     // ログイン成功の時ユーザメニューを表示
    }else{
      $this->set('error','ログイン失敗');
    }
  }
}

requestActionで呼ばれた場合layoutは自動でajaxに設定されるので、 $this->layout = 'ajax'; は不要。
// ajaxレイアウトはcakeフォルダ内に用意されているajax用のlayoutです
viewフォルダの切り替えに関してはAjaxコールの場合に、viewテンプレートを変更する方法を参照

■ログインフォームのviewを作成
views/users/elements/以下に設置します
// elementsフォルダは小分けにする為に設置しています。
// コントローラにて $this->viewPath = $this->viewPath.'/elements'; をやらないならば、views/users/以下でOKかと

views/users/elements/login.thtml
<h3>ユーザーログイン</h3>
<?php echo (isset($error))? $error : ''; ?>
<?php echo $ajax->form('/users/login','post',array('update' => 'user_menu')); ?>
<?php echo $form->labelTag('User/pass', 'パスワード');?>
<?php echo $html->password('User/pass', array('size' => '10'));?>
<?php echo $html->submit('ログイン');?>
</form>

// $ajax->formの第三引数にupdateを指定すると、指定されたidの箇所が書き換えられます。
// ここで言う'user_menu'はトップページのviewで宣言されています。

views/users/elements/menu.thtml
<h3>ユーザーメニュー</h3>
<ul>
<li>メニュー項目</li>
<li><?php echo $ajax->link("ログアウト", "/users/logout", array("update" => "user_menu")); ?></li>
</ul>



■ログアウトメソッドを作成
Ajaxで呼ばれたかどうかの判別にRequestHandlerを使いたいので
(Ajaxコールの場合に、viewテンプレートを変更する方法を参照)
まずは$componentsにRequestHandlerを追加します。
var $components = array('RequestHandler');


ログアウト処理はUsersControllerのlogoutメソッドにて行います。
function logout() {
  // ログアウト処理

  if ($this->RequestHandler->isAjax()){     // Ajaxで呼ばれた時はlogin.thtmlでレンダリング
    $this->layout = 'ajax';
    $this->viewPath = $this->viewPath.'/elements';
    $this->render('login');
  }else{     // 直接呼ばれた時はトップページにリダイレクト
    $this->redirect('/');
  }
}



結構簡単な仕組みですが、最初はviewから表示を呼ぶのにrenderElementを使ったりしていて結構試行錯誤してしまいました。
/users/loginが直接呼ばれた時、フォームを囲う<div id="user_menu">がないのでうまく遷移できてないので、まだ改良の余地ありです。
説明下手なので読みづらくてすいません;
こういうTIPSはwikiのほうが良かったでしょうか。
他の良い方法だとか間違っている箇所があれば訂正お願いします。
フラット表示 前のトピック | 次のトピック

題名 投稿者 日時
 » ログインフォームとユーザメニューの表示切り替え chika 2007-2-16 15:08
     Re: ログインフォームとユーザメニューの表示切り替え shun 2007-2-16 15:18

投稿するにはまず登録を
 


. .