29 Июнь 2011

Выпадающая форма авторизации на jQuery в Kohana и HMVC

Форма авторизации на jQuery в Kohana 3

Приветствую вас, уважаемый читатель.

В данной публикации я хочу рассмотреть тему создания модной всплывающей формы авторизации для сайта на фреймворке Kohana.

Создание формы авторизации состоит из трех частей:

  • Немного рисования в Photoshop.
  • Верстка с использованием jQuery.
  • Чуть-чуть программирования средствами Kohana.

Дополнительные знания можно почерпнуть из:

Постановка задачи: на страницах, предполагающих желание посетителя пройти авторизацию, разместить ссылку «вход», при клике на которую модным анимированным способом будет появляться форма авторизации; в случае если пользователь уже авторизован — ссылка «вход» будет заменяться ссылкой «выход».

Видеоурок:

Скачать видеоурок (63.3 МБ, *.wmv).

Скачать исходники (1.15 МБ, *.zip)

Приведу HTML и CSS код, организующий форму авторизации.

Листинг 1. HTML код верстки формы авторизации

<div id="slider">
	<div id="slider-in">
		<form action="/auth" method="post">
			<p style="padding-bottom: 2px;">Логин:</p>
			<input type="text" name="login" id="login">
			<p style="padding-bottom: 2px;">Пароль:</p>
			<input type="password" name="password">
			<input type="submit" name="btnsubmit" value="Войти" style="width: 100px; height: 25px; margin-top: 10px">
		</form>
		<p><a href="/auth/reg">Быстрая регистрация</a></p>
	</div>
	<div id="open-div"><a href="#" id="open-button">Вход</a></div>
	<div id="close-div" style="display:none"><a href="#" id="close-button">Закрыть</a></div>
</div>

Пояснение к листингу 1

3-я строка. Отправка содержимого полей формы (логина и пароля) осуществляется в котроллер auth экшену index, который и осуществлял авторизацию в нашей образовательной системе.

Листинг 2. CSS-код для формы авторизации

#slider{
position:absolute;
top:0;
right:0;
z-index:10;
width:200px;
text-align: center;
padding-bottom: 2px;
}

#slider-in{
position:relative;
z-index:25;
height:0;
overflow:hidden;
background-image: url('/img/login-bg.gif');
background-repeat: no-repeat;
}

Пояснение к листингу 2

2-я строка. <div id="slider"> (см. листинг 1) позиционируется абсолютно. Абсолютное позиционирование делает возможным поставить данный блок в верхний правый угол страницы (свойствами top:0 и right:0 в 3-й и 4-й строке). Важным является наличие свойства position:relative у внешнего, по отношению к <div id="slider">, блока <div id="contaner">. Данное CSS-свойство сдерживает абсолютное позиционирование формы авторизации внутри блока <div id="contaner">. Структура страницы приведена на рис. 1.

Структура страницы

Рис. 1. Структура веб-документа.

5-я строка. Довольно высокое значение порядкового номера слоя по высоте гарантирует, что блок с формой авторизации окажется поверх всех остальных блоков на странице.

8-я строка. Необходимость нижнего отступа диктуется особенностью IE. Иначе не будет видно подчеркивания ссылки «Вход» (строка 12 листинга 1).

13-я строка. Еще большее значение порядкового номера по высоте гарантирует положение внутреннего блока <div id='slider-in'> над блоком <div id='slider'>.

14-я строка. Первоначальное значение высоты внутреннего блока равно нулю. Именно это значение мы будем изменять посредством jQuery, реализуя эффект анимированного разворачивания формы.

15-я строка. overflow:hidden прячет содержимое блока в случае, если размер блока оказывается меньше размера содержимого.

16-я строка. В качестве фонового изображения используется рисунок подложки формы (см. рис. 2).

Фоновое изображение формы авторизации

Рис. 2. Подложка формы авторизации.

Листинг 3. jQuery-код, реализующий анимированное раскрытие формы авторизации

<script type="text/javascript">
	function OpenSlider()
	{
		$("#slider-in").animate({ height: "170px" });
		$("#login").focus();
		$("#open-div").toggle();
		$("#close-div").toggle();
		return false;
	}

	function CloseSlider()
	{
		$("#slider-in").animate({ height: "0" });
		$("#open-div").toggle();
		$("#close-div").toggle();
		return false;
	}

	$(document).ready(function(){
		$("#open-button").click(OpenSlider);
		$("#close-button").click(CloseSlider);
	});
</script>

Пояснение к листингу 3

4-я строка. Функция OpenSlider() обеспечивает плавное изменение высоты блока с id=”slider-in” до значения 170px.

5-я строка. После открытия блока с формой авторизации фокус ввода будет передан полю с id=”login”. Это важный момент, связанный с улучшением юзабилити формы авторизации (после открытия формы пользователь сразу может вводить свой логин в соответствующее поле).

6-я и 7-я строка. Метод toggle() делает элемент невидимым, если он был видим и наоборот.

8-я строка. return false отключает переход по ссылке.

Аналогичным образом работает функция CloseSlider(), единственная разница в том, что данная функция уменьшает размер блока id=”slider-in” до нуля.

19-я строка. Ожидание загрузки всех элементов веб-страницы. Данная операция необходима, т. к. мы будем отслеживать события перехода по ссылкам с id=' open-button' и id='close-button' и это имеет смысл только после загрузки данных элементов.

20 и 21-я строка. В случае клика по ссылке с id=' open-button' и id='close-button' запустить соответствующую функцию.

Теперь давайте определимся с местоположением кода в листинге 1 и листинге 3 (с листингом 2 все и так понятно — CSS-коду самое место в файле стилей).

HMVC

Мы используем HMVC-подход и код листинга 1 и 2 поместим в отдельный файл внешнего вида kohana\www\application\views\authformloginview.php. Данный файл отображения мы будем подгружать в веб-страницу, на которой требуется провести авторизацию.

Из постановки задачи следует, что, в случае успешного прохождения авторизации, необходимо ссылку «Вход» заменить ссылкой «Выход». Соответственно потребуется еще один файл внешнего вида страницы (см. листинг 4).

Листинг 4. Реализация ссылки «Выход» в файле отображения kohana\www\application\views\authformlogoutview.php

<div id="slider"><a href="/auth/logout">Выйти</a></div>

Пояснение к листингу 4

Ссылка «Выход» успешно размещается все в том же блоке <div id="slider">. При клике по данной ссылке запускается метод logout контроллера Auth, который разлогинивает пользователя.

Для реализации HMVC-подхода нам потребуется метод в одном из контроллеров, который будет выводить форму авторизации, в случае если пользователь не авторизован, и ссылку «Выход», если пользователь авторизовался ранее (т. е. подгружать файлы вида authformloginview.php или authformlogoutview.php соответственно).

В качестве контроллера задействуем авторизационный контроллер Auth. В нем добавим экшен form, код которого представлен в листинге 5.

Листинг 5. Экшен, отображающий файлы вида для неавторизованного или авторизованного пользователя

public function action_form()
	{
		//Закрываем доступ к контроллеру первичным зарпосам
		if($this->request->is_initial())
		{
			throw new HTTP_Exception_404('File not found!');
		}

		$this->auto_render = FALSE; //не использовать главный шаблон вида "bacis"

		$auth = Auth::instance();
		if($auth->logged_in())
		{
			$this->response->body(View::factory('authformlogoutview'));
		}
		else
		{
			$this->response->body(View::factory('authformloginview'));
		}

	}

Пояснение к листингу 5

4-я строка. Если пользователь запрашивает доступ к данному экшену контроллера путем набора соответствующего адреса в браузере (kohana/auth/form), то отобразить страницу 404.

9-я строка. Отключаю использование базового шаблона для данного экшена. Т. е. экшен form передаст браузеру только содержимое файлов отображения authformloginview или authformlogoutview без участия базового шаблона basic. Данное решение в одном из комментариев предложил читатель Николай, за что ему огромное спасибо.

12 — 19-я строки. В случае, если пользователь авторизован, отобразить содержимое файла вида authformlogoutview (ссылку «Выход»). В противном случае отобразить форму авторизации пользователя (файл вида authformloginview).

Последний шаг — вызов экшена form в файле внешнего вида страницы, на которой необходимо вывести форму авторизации пользователя.

Предположим, на главной странице сайта необходимо отобразить форму авторизации. Для этого код вызова отображения экшена form установим в файле kohana\www\application\views\home.php (код приведен в листинге 6).

Листинг 6. Вызов отображения экшена form

<?
$request = Request::factory('auth/form');
$response = $request->execute();
echo $response;
?>

Поскольку форма авторизации, равно как и ссылка «Выход», выводятся в блоке <div id="slider">, позиционируемый абсолютным образом, не имеет значения где именно в файле внешнего вида home.php указать код вызова контроллера form – все равно форма авторизации будет отображаться в верхнем правом углу веб-страницы.

С уважением, Андрей Морковин.

<< Предыдущий видеоурок курса Следующий видеоурок курса >>