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

35

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

Взаємопов’язані форми

Кожна нова веб-сторінка ресурсу – це додатковий обсяг коду, зайве навантаження на сервер і ще один елемент в нескінченності. Зрозуміло, що я маю на увазі не сторінки, на яких розміщено контент. Цієї «зброї поразки» користувачів повинне бути як можна більше (головне, щоб не страждало якості контенту).

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

На сучасному сайті може застосовуватися дві і більше форми. Чому мінімально 2? Тому що одна застосовується для реєстрації, а інша – для авторизації. При цьому набори даних форм майже однакові. Ось і виходить, що на скрипті реєстрації та авторизації на PHP можна було б «заощадити». Але для форм все одно доведеться створювати окремі сторінки! Чи ні?

Два в одному

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

Форма входу





Введіть своє ім’я:


Введіть догин:




Введіть пароль:



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

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. Їх можна розташувати в окремому файлі стилів, але простіше включити їх в код розмітки:

#txt1,#label1 {
display: none;
}

Розбір польотів

Відразу хочу попередити, що сьогоднішній скрипт реєстрації на сайті PHP буде неповним. Ми приділимо більше уваги побудови форми. Але повернемося до нашої розмітці.

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

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

Трохи PHP

Тепер у файлі PHP, який ми будемо пересилати дані форму, потрібно розмежувати код для авторизації і реєстрації. Для цього ми використовуємо значення прихованого поля name_use. Якщо воно порожнє, тоді реєструємо користувача. Інакше авторизуем:

Ну, ось і все! Наша універсальна форма готова. Не знаю, чи вдасться на її основі створити робочий PHP скрипт для реєстрації в пошукових системах. Але використовувати для створення авторизації-реєстрації користувачів на сайті можна. І при цьому ви точно не заробите синець під око :) .