Универсальная форма авторизации PHP – тонкости реализации

Дата публикации: 2016-10-27

Универсальная форма авторизации PHP

От автора: сегодня мой товарищ на работу пошел с «фонарем» под глазом: назвал жену именем новой секретарши. В общем, не прошел дома «авторизацию» у супруги. А она беременная, гормоны играют. Вот и дала любимому под глаз. Хотя форма авторизации PHP не такая радикальная, но лучше не рисковать!

Взаимосвязанные формы

Каждая новая веб-страница ресурса – это дополнительный объем кода, лишняя нагрузка на сервер и еще один элемент в бесконечности. Понятно, что я имею в виду не страницы, на которых размещается контент. Этого «оружия поражения» пользователей должно быть как можно больше (главное, чтоб не страдало качества контента).

Я о часто повторяющихся элементах дизайна. Благо многие из них (за счет динамичных «способностей» PHP) можно использовать повторно на других страницах. Например, подвалы, меню заголовки и т.д. Чего не скажешь о формах.

На современном сайте может применяться две и более формы. Почему минимально 2? Потому что одна применяется для регистрации, а другая – для авторизации. При этом наборы полей данных форм почти одинаковые. Вот и получается, что на скрипте регистрации и авторизации на PHP можно было бы «сэкономить». Но для форм все равно придется создавать отдельные страницы! Или нет?

Две в одной

Неужели нельзя для обеих процедур использовать одну веб-форму, данные из которой извлекаются и записываются в туже таблицу MySQL? Я немного пораскинул мозгами, и решил «привлечь» к решению данной проблемы JavaScript. Благо этот язык обладает расширенными возможностями для манипуляции элементами HTML. Вот разметка универсальной формы:

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать веб-приложение на PHP с полного нуля

Получить курс сейчас!

<div id="form" style="background-color:rgb(0,204,204);width:500px">
<h2>Форма входа</h2>
<form id="1" method="post" action="handler.php">
<input type="button" name="variant" value="Регистрация" onclick="visible();" title="Нажмите, если не зарегистрированы" />
</br>
</br>
<label id="label1">Ввведите свое имя: </label>
<input type="text" size="20" id="txt1" name="name_use" />
</br>
<label>Ввведите догин: </label>
<input type="text" size="20" name="login" />
</br>
</br>
<label>Введите пароль:</label>
<input type="password" size="20" name="password" />
</br>
</br>
<input type="submit" name="button_submit" value="Отправить"/>
</form>
</div>

<h2>Форма входа</h2>

</br>

<label id="label1">Ввведите свое имя: </label>

</br>

<label>Ввведите догин: </label>

</br>

<label>Введите пароль:</label>

</br>

</form>

</div>

Хотя пока ничего удивительного не прослеживается. Но если перед тем, как создать форму авторизации PHP, добавить к ней функцию на JavaScript, то все изменится. В раздел header страницы вставьте следующий код:

<script>
function visible() {
 var a = document.getElementById("txt1");
 if (a.style.display != "block"){
 document.getElementById("txt1").style.display = 'block';
 document.getElementById("label1").style.display = 'block';
 }
 else
 {
  document.getElementById("txt1").style.display = 'none';
 document.getElementById("label1").style.display = 'none';
  }
}

function visible() {

var a = document.getElementById("txt1");

if (a.style.display != "block"){

document.getElementById("txt1").style.display = 'block';

document.getElementById("label1").style.display = 'block';

}

else

{

document.getElementById("txt1").style.display = 'none';

document.getElementById("label1").style.display = 'none';

}

Также нам потребуется вставить несколько строк CSS. Их можно расположить в отдельном файле стилей, но проще включить их в код разметки:

<style type="text/css">

#txt1,#label1 {

  display: none;
}
</style>

#txt1,#label1 {

display: none;

}

</style>

Разбор полетов

Сразу хочу предупредить, что сегодняшний скрипт регистрации на сайте PHP будет неполным. Мы уделим больше внимания построения формы. Но вернемся к нашей разметке.

Если вы внимательно приглядывались к коду HTML примера, то должны были заметить лишнюю кнопку с надписью «Регистрация». А также отсутствия одного текстового поля («name_use») и ярлыка (label). Все верно, они отобразятся только после нажатия на выше упомянутую кнопку. Для этого мы обрабатываем событие нажатия внутри пользовательской функции. В ней мы изменяем значения свойства display, первоначальное значение которого задается в коде CSS.

Обратите внимания, что для доступа к полям форм в JavaScript используется атрибут id, значение которого передается методу getElementById().

Немного PHP

Теперь в файле PHP, в который мы будем пересылать данные форму, нужно разграничить код для авторизации и регистрации. Для этого мы используем значение скрытого поля name_use. Если оно не пустое, тогда регистрируем пользователя. Иначе авторизуем:

<?php
if(!empty($_POST['name_use']))
{
 echo "Регистрация";
 }
else{
  echo "Авторизация";
  }
?>

<?php

if(!empty($_POST['name_use']))

{

echo "Регистрация";

}

else{

echo "Авторизация";

}

Ну, вот и все! Наша универсальная форма готова. Не знаю, удастся ли на ее основе создать рабочий PHP скрипт для регистрации в поисковых системах. Но использовать для создания авторизации-регистрации пользователей на сайте можно. И при этом вы точно не заработаете синяк под глаз .