Войти

Все для создания сайта

Начало » Статьи » UcoZ - сервисы » Решения по дизайну.

Быстрая регистрация на сайте, форма входа одной строкой.
Такой вид регистрации на сайте делается путем вывода информации со страницы регистрации через iframe, нужно на желаемой странице вывода прописать код:
<iframe src="http://Адрес_Вашего_Сайта/index/3-0-0" name="iframe" scrolling="no" width=480 height=330 frameborder=0 noresize></iframe>
Высоту iframe менять не советую, так как она расчитана с учетом места на сообщение об ошибке(над формой) при неправильном вводе пользователем данных.
Далее отметим, что в iframe будет появляться реклама, если Вы ее не отключите.
Затем нужно обратить внимание на следующий момент: копирайт, который обязательно должен быть на всех страницах будет появляться и в iframe. Этого можно избежать, если в шаблоне "Страница регистрации пользователей" поставить перед кодом $POWERED_BY$ - 68 тегов <br />(что и наблюдаем в коде шаблона "Страница регистрации пользователей"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Страница регистрации - $SITE_NAME$</title>
<link type="text/css" rel="StyleSheet" href="http://адрес_сайта/_st/my.css" />
</head>
<body>
$BODY$<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />$POWERED_BY$
</body>
</html>
Теперь проходя по ссылке $REGISTER_LINK$ мы не увидим нужную нам страницу, а лишь форму. Чтобы решить это мы создаем в "Редакторе страниц" новую страницу и вставляем в нее iframe как на главной плюс $LOGIN_FORM$. Код:
<?if($USER_LOGGED_IN$)?><meta http-equiv="Refresh" Content="0; URL=http://noswap.ru/"><?else?><div class="twocols"><div class="col2"><h2 class="title"><span>регистрация</span> на сайте</h2>
<iframe src="http://noswap.ru/index/3-0-0" name="iframe" scrolling="no" width=480 height=350 frameborder=0 noresize>
</iframe>
<div class="twocols"><div class="col2"><h2 class="title"><span>Вход</span> для пользователей</h2>$LOGIN_FORM$
</div></div>
</div>
</div><?endif?>
Чтобы пользователь уже вошедший в систему попадал на главную проекта мы делаем рифреш. Помните, что через глобальную замену нужно изменить код $REGISTER_LINK$ на адрес вновь созданной страницы.
Еще внесем изменения в шаблон "Форма регистрации пользователей" : здесь изменим код width="100%" на width="95%" в первой строке.
После благополучного прохождения регистрации пользователем в iframe появится форма входа и если нею воспользоваться, то далее на этом месте можно будет наблюдать главную проекта.
Чтобы этого избежать можно прибегнуть к следующему:
система берет форму входа из шаблона “Форма входа пользователей” и подставляет код, который находится после <?if($PAGE_ID$="login")?>, то есть форму входа со страницы входа. Таким образом нужно указать, чтобы на странице входа ничего не выводилось. Тогда возникает 2 вопроса, во-первых, как же пользователь будет после регистрации входить и во-вторых, ссылка входа. Ссылка входа имеется в виду та, что хранится в глобальной переменной $LOGIN_LINK$ и обычно в системе ссылка “Войти” ведет именно на страницу входа.
Итак, по поводу ссылки вопрос решается просто удалением этой ссылки и установкой формы входа на видное место вверху и внизу. Хотя можно создать новую страницу в редакторе страниц и там прописать $LOGIN_FORM$. Тогда через глобальную замену адрес новой страницы поставить вместо $LOGIN_LINK$.
Далее, нам нужно сделать так, чтобы внизу была форма входа после регистрации пользователя. Это достигается путем вывода переменной $LOGIN_FORM$ после iframe (это все берется в if).
Код, который прописан в шаблоне “Форма входа пользователей”:
<?if($ERROR$)?><div style="color:red;text-align:center;padding-bottom:3px;">$ERROR$</div><?endif?>
<?if($PAGE_ID$="login")?>
<?else?>
<?if($PAGE_ID$="denied")?><div style="width:220px;text-align:center;">
<dl class="uLogBlock"><div class="uLogDescr">Логин:</div><div class="uLogField"><input class="loginField" type="text" name="user" value="" size="20" style="width:100px" maxlength="25" /></div></dl>
<dl class="uLogBlock"><div class="uLogDescr" id="uld2">Пароль:</div><div class="uLogField" id="ulf2"><input class="loginField" type="password" name="password" size="20" style="width:100px" maxlength="15" /></div></dl>
<dl class="uLogBlock"><div class="uLogRem"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked /><label for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login")?><input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></div>
<div class="uLogSbm"><input class="loginButton" name="sbm" type="submit" value="Вход" /></div></dl>
<dl class="uLogBlock"><div class="uLogLinks"><a id="ull1" href="$REMINDER_LINK$">Забыл пароль</a> · <a id="ull2" href="http://noswap.ru/index/0-5">Регистрация</a></div></dl>
</div>

<?else?>
<ul class="uLog_list">
<li>Логин:</li>
<li><input class="loginField" type="text" name="user" value="" size="20" style="width:100px" maxlength="25" /></li>
<li id="uld2">Пароль:</li>
<li id="ulf2"><input class="loginField" type="password" name="password" size="20" style="width:100px" maxlength="15" /></li>
<li><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked /><label for="rem$PAGE_ID$">запомнить</label></li>
<li><input name="sbm" type="submit" class="loginButton" value="Вход" /></li>
</ul>
<div class="uLogLinks"><a id="ull1" href="$REMINDER_LINK$">Забыл пароль</a> · <a id="ull2" href="http://noswap.ru/index/0-5">Регистрация</a></div><?endif?><?endif?>

CSS:

.uLog_list{
list-style:none;
padding:0;
margin:0;
}
.uLog_list li{
float:left;
padding:3px;
}

.uLogBlock {margin:0;padding:2px;clear:both;}
.uLogDescr,.uLogRem {float:left;}
.uLogField,.uLogSbm {float:right;}
.uLogLinks{clear:both; text-align:center; padding-right:20px; font-size:8pt;}
.uLogLinks a{text-decoration:none;}
.uLogLinks a:hover{text-decoration:underline;}
.loginButton{background:#ffffff; border:1px solid #7f7772; color:#4f4f4f; width:55px;}
.manTdError{font-size:13px;}
Вид формы входа сделан одной строкой. На странице запрета на вход выведется обычный двустрочный вариант формы входа, а вот в остальных случаях будет одной строкой.

Таким образом основные принципы, которые обозначились при работе:
1. Работая с iframe нужно помнить о высоте блока и об элементах страницы, с которой берем данные.
2. Изменив(упростив) данные на странице нужно всегда помнить как это будет выглядеть при использовании страницы в других случаях. К примеру, страница регистрации упростилась до вида формы регистрации, выходом послужило создание новой страницы со всеми функциональными нагрузками.
3. Тестируя получившийся вариант, применяя его ко всем возможным случаям жизни и наблюдая вносимые изменения со всех сторон достигается нужный результат.

Если что-то неясно оставляем комментарии.

Категория: Решения по дизайну. | Добавил: design (09.03.08)
Просмотров: 26058 | Комментарии: 1 | Рейтинг: 3.0 |
Комментарии
Всего комментариев: 1
1 02.06.10, 16:13 от Эльвира Мельничук (Eko)
cry sad я не могу сделать такое что вы написали у меня не получается.не могли бы вы написать что и на какой страничке прописать и как их называть

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]