■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

トップページにログインフォームを作成したい

スレッド表示 | 新しいものから

前のトピック | 次のトピック | 下へ

 

<前のページ |  1  |  2  

kemshim > Re: トップページにログインフォームを作成したい @ 2014/8/9 12:56
n1215　様


ご丁寧に解説していただき、ありがとうございます！

その方法で、トップページに実装してみると、見た目は希望通りになりました。


ただ、マイページ用のユーザでログインしようとすると、以下のメッセージだけが出るページに遷移します。

/mypege/members/edit



試しに登録していないIDを入れてみても同様の結果になります。


どうすればいいでしょうか…

＜動作環境＞
■ BaserCMSのバージョン：3.0.5.1
■ レンタルサーバー名：ロリポップ
■ スマートURLの利用：　OFF
■ 設置フォルダ：　分かりません…
■ 利用しているデータベース：　MySQL
n1215 > Re: トップページにログインフォームを作成したい @ 2014/8/12 12:11
kemshim　様

まずプレフィックスの設定（$currentPrefix）は'mypage'ではなく'mypege'となっていませんか？


上記が正しく設定されている場合、
"以下のメッセージだけが出るページ"について全く状況が把握できないので詳しく教えてください。

・遷移先のページのURLはどうなってますか？
・トップページのログインフォームのformタグのaction属性に入ってる値を教えてください
　正常な状態では値が/mypage/members/ajax_loginとなるはずです

Twitter:　@n_1215
kemshim > Re: トップページにログインフォームを作成したい @ 2014/8/12 17:16
n1215　様

ご返信いただきありがとうございます。

引用：
まずプレフィックスの設定（$currentPrefix）は'mypage'ではなく'mypege'となっていませんか？


申し訳ありません、フォーラムに入力する際にスペルを誤って入力していたようです。
実際のプレフィックス設定は'mypage'になっております。


引用：
上記が正しく設定されている場合、
"以下のメッセージだけが出るページ"について全く状況が把握できないので詳しく教えてください。


スクリーンショットで撮ったものが以下になります。


↓ここからスクリーンショット

↑ここまで

引用：
・遷移先のページのURLはどうなってますか？


URLは、http://example.com/mypage/members/ajax_login
となっております。

引用：
・トップページのログインフォームのformタグのaction属性に入ってる値を教えてください
　正常な状態では値が/mypage/members/ajax_loginとなるはずです


action属性とは、こちらのことでしょうか。


<?php echo $this->BcForm->create($userModel, array('action' => 'ajax_login', 'url' => array($currentPrefix => true, 'controller' => $userController))) ?>


'ajax_login'となっています。


仮に上記のaction属性に、/mypage/members/ajax_loginと記述した場合、以下のような画面が表示されます。

＜動作環境＞
■ BaserCMSのバージョン：3.0.5.1
■ レンタルサーバー名：ロリポップ
■ スマートURLの利用：　OFF
■ 設置フォルダ：　分かりません…
■ 利用しているデータベース：　MySQL
n1215 > Re: トップページにログインフォームを作成したい @ 2014/8/12 20:10
kemshim 様

3.0.2ではログインはAjaxで処理されるのでブラウザ上で/mypage/members/ajax_loginに移動することは実際にはありません。

表示されているページはログイン後にリダイレクトされるべきページのURLが表示されていますね。
本来はページ遷移なしにAjaxリクエストの返り値としてこの値を受け取り、/mypage/members/editに遷移するというのがAjaxによるログイン処理の流れです。

何らかの原因でAjaxによるフォームの送信が行えず、
通常のHTMLのフォームのPOSTが行われ、画面が/mypage/members/ajax_loginに遷移してしまっているものと推測します。

ブラウザの機能（たとえばChromeなら要素を検証機能）を用いるとJavaScriptやCSS,ファイル読込のエラーを見ることができます。
ページを読み込んだ時点でブラウザにJavaScriptのエラーは出ていないでしょうか？
またjquery.form-2.94.jsは正常に読み込まれていますか？
ログインボタンを押した後にJavaScriptのエラーが出ていませんか？


※他のIDでの試行結果も書かれていますが、会員ページにすでにログインした状態になっているためだと思います。



引用：
action属性とは、こちらのことでしょうか。

違います。PHPが出力したHTMLソースの話です。おそらくaction属性は正しそうなのでこれはもういいです。



参考：正常な場合の処理
lib/Baser/Config/setting.php（ないしこれをコピーしたファイルapp/Config/setting.php）に会員ページログイン後のリダイレクト先が指定されていますよね？
初期設定のままだと/mypage/members/ajax_loginに向けてAjaxでのログイン処理が成功すると
/mypage/members/editにリダイレクトされるようになっています。

lib/Baser/Config/setting.php
'mypage' => array(
	  'name'			=> 'マイページ',
	  'alias'			=> 'mypage',
	  'loginRedirect'	=> '/mypage/members/edit',
	  'loginTitle'	=> 'マイページログイン',
	  'userModel'		=> 'Member',
	  'loginAction'	=> '/mypage/members/login',
	  'toolbar'		=> false
	  ),


そしてこのページのテンプレートは下記です。
lib/Baser/View/Members/mypage/edit.php
<h1><?php $this->BcBaser->contentsTitle() ?></h1>


lib/Baser/Controller/MembersController.phpのmypage_editメソッドで
Viewの$pageTitle変数に"メンバーマイページ（デモ）"という値が設定されているので
上記の出力結果はメンバーマイページ（デモ）と表示されるはずですね。

Twitter:　@n_1215
kemshim > Re: トップページにログインフォームを作成したい @ 2014/8/16 11:22
n1215　様

ご返信いただきありがとうございます。

引用：
ブラウザの機能（たとえばChromeなら要素を検証機能）を用いるとJavaScriptやCSS,ファイル読込のエラーを見ることができます。
ページを読み込んだ時点でブラウザにJavaScriptのエラーは出ていないでしょうか？
またjquery.form-2.94.jsは正常に読み込まれていますか？
ログインボタンを押した後にJavaScriptのエラーが出ていませんか？


ChromeでJavaScriptのエラーをチェックした所、以下のような文章が表示されました。

Uncaught ReferenceError: $ is not defined
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Uncaught TypeError: string is not a function


下記のエラー
Uncaught ReferenceError: $ is not defined

の解決策として、JavaScriptの記述の順番を変えてみたところ、/mypage/members/editのページが表示されるようになりました！

app/webroot/theme/{テーマ名}/Layout/default.phpで、もともとは、
<?php
//変数の設定は本来テンプレート内部に紛れ込まないほうが良いのでファイルの上部にまとめておくのがオススメ

if ($this->Session->check('Message.auth')) {
    $this->Session->flash('auth');
}

// 認証用のプレフィックスをここで指定する
$currentPrefix = 'mypage';

// app/Config/setting.phpの設定を読み込んでいる
$userModel = Configure::read('BcAuthPrefix.' . $currentPrefix . '.userModel');
if (!$userModel) {
    $userModel = 'User';
}
list(, $userModel) = pluginSplit($userModel);
$userController = Inflector::tableize($userModel);
// app/Config/setting.phpの設定を反映して $userModel = Member, $userController = 'members'となるはず
?>

<script type="text/javascript">
    $(function() {

	$("#BtnLogin").click(function(e){

		$("#"+$("#UserModel").html()+"AjaxLoginForm").ajaxSubmit({
			beforeSend: function() {
				$("#Waiting").show();
			},
			url: $("#"+$("#UserModel").html()+"AjaxLoginForm").attr('action'),
			success: function(response, status) {
				if(response) {                            
                                        //クレジット関連の処理を省略
					document.location = response;
				} else {
					$("#AlertMessage").html('ログインに失敗しました。アカウント名、パスワードを確認してください。');
					$("#AlertMessage").fadeIn(500);
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				var errorMessage = '';
				if(XMLHttpRequest.status == 404) {
					errorMessage = '<br />'+'送信先のプログラムが見つかりません。';
				} else {
					if(XMLHttpRequest.responseText) {
						errorMessage = '<br />'+XMLHttpRequest.responseText;
					} else {
						errorMessage = '<br />'+errorThrown;
					}
				}
				$("#AlertMessage").html('ログイン処理に失敗しました。'+errorMessage);
				$("#AlertMessage").fadeIn(500);
			},
			complete: function(){
				$("#Waiting").hide();
			}
		});

		return false;

	});

    });
</script>
<?php $this->BcBaser->element('header') ?>


のように、JavaScriptの後に
<?php $this->BcBaser->element('header') ?>
を記述していたのですが、


<?php
//変数の設定は本来テンプレート内部に紛れ込まないほうが良いのでファイルの上部にまとめておくのがオススメ

if ($this->Session->check('Message.auth')) {
    $this->Session->flash('auth');
}

// 認証用のプレフィックスをここで指定する
$currentPrefix = 'mypage';

// app/Config/setting.phpの設定を読み込んでいる
$userModel = Configure::read('BcAuthPrefix.' . $currentPrefix . '.userModel');
if (!$userModel) {
    $userModel = 'User';
}
list(, $userModel) = pluginSplit($userModel);
$userController = Inflector::tableize($userModel);
// app/Config/setting.phpの設定を反映して $userModel = Member, $userController = 'members'となるはず
?>


<?php $this->BcBaser->element('header') ?>

<script type="text/javascript">
    $(function() {

	$("#BtnLogin").click(function(e){

		$("#"+$("#UserModel").html()+"AjaxLoginForm").ajaxSubmit({
			beforeSend: function() {
				$("#Waiting").show();
			},
			url: $("#"+$("#UserModel").html()+"AjaxLoginForm").attr('action'),
			success: function(response, status) {
				if(response) {                            
                                        //クレジット関連の処理を省略
					document.location = response;
				} else {
					$("#AlertMessage").html('ログインに失敗しました。アカウント名、パスワードを確認してください。');
					$("#AlertMessage").fadeIn(500);
				}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				var errorMessage = '';
				if(XMLHttpRequest.status == 404) {
					errorMessage = '<br />'+'送信先のプログラムが見つかりません。';
				} else {
					if(XMLHttpRequest.responseText) {
						errorMessage = '<br />'+XMLHttpRequest.responseText;
					} else {
						errorMessage = '<br />'+errorThrown;
					}
				}
				$("#AlertMessage").html('ログイン処理に失敗しました。'+errorMessage);
				$("#AlertMessage").fadeIn(500);
			},
			complete: function(){
				$("#Waiting").hide();
			}
		});

		return false;

	});

    });
</script>


のようにJavaScriptの前に
<?php $this->BcBaser->element('header') ?>
を記述することで解決しました！

参考）
jQueryで「Uncaught ReferenceError: $ is not defined (anonymous function)」 ― HattaraTecLog : http://teclog.hattara.info/?p=221


何度も何度もご丁寧に回答頂き、本当にありがとうございました！

＜動作環境＞
■ BaserCMSのバージョン：3.0.5.1
■ レンタルサーバー名：ロリポップ
■ スマートURLの利用：　OFF
■ 設置フォルダ：　分かりません…
■ 利用しているデータベース：　MySQL
n1215 > Re: トップページにログインフォームを作成したい @ 2014/8/18 22:26
kemshim 様

なるほどLayout/default.phpに記述されていたんですね。トップページとおっしゃっていたので
Page/index.phpに記述しているものかと勘違いしていました。

jQueryによる記述やプラグインの前にjQuery自体が読み込まれていなければ動かないのは当然ですね……。

Twitter:　@n_1215

 

<前のページ |  1  |  2  

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

ログイン
ユーザー名:
パスワード:


　 新規登録 / パスワード紛失

検索
 ≫ 高度な検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね！」をポチっとクリックしてください！質問の回答者や開発者の励みになります

フォーラムガイド
質問を投稿する際のガイドライン 質問に回答する際のガイドライン 動作環境の雛形 署名の登録方法


関連リンク
baserCMS公式サイト baserCMS公式wiki baserCMSユーザー会 baserCMSコア開発プロジェクト(BTG)
最新バージョンの修正パッチ一覧 修正パッチの適用方法 baserCMS開発環境 GitHub
CakePHP公式サイト CakePHP Users in Japan

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

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