В этом посте я опишу пошагово как создавать формы онлайн регистрации, как потом разместить ее на сайте и сохранить собранные данные на компьютер. Может кому-то это покажется слишком подробным – заранее извиняйте. Не все пользователи схватывают информацию на лету.
Иногда возникает необходимость в проведении онлайн регистрации участников на какое-либо мероприятие. Как вариант, можно просто попросить пользователей скачать файл с анкетой, заполнить его и отправить на указанный E-mail. Мне этот способ не нравится, так как он требует дополнительной обработки присланных анкет.
Рассмотрим вариант проведения онлайн регистрации, в котором пользователь заполняет форму на вашем сайте, а все данные заносятся в таблицу, которую потом можно загрузить на компьютер.
Велосипед мы придумывать не будем, а используем для этих целей сервис Google Документы. Если вы активировали сервис Google Диск, то документы в вашем аккаунте Google будут храниться в разделе Диск.
Этот сервис предоставляет замечательные инструменты, которые позволят вам создать форму онлайн регистрацию участников любой сложности.
Итак, начнём!
Переходим в Google Документы (Диск) и авторизируемся в нем.
В левом углу жмем на кнопку создать и выбираем пункт Форма.
В новом окне появится редактор форм.
Как вы видите, в нем можно ввести заголовок, описание и у нас на форме уже есть заготовки двух текстовых полей. В первом поле в строке “Вопрос” я написал “Ваше имя”. В “Пояснения” ввел “Впишите ваше реальное имя”. Поле “Тип вопроса” оставил как “Текст”. Еще поставил галочку “Сделать этот вопрос обязательным” – это не позволит пользователю отправить данные, пока он не заполнит это поле.
Жмем на кнопку “Готово”.
Переходим ко второму вопросу. Для этого выделяем его кликом мыши и жмем на иконку редактирования.
В качестве примера заполним этот вопрос так: Вопрос - Чем вы увлекаетесь?, Пояснение - Опишите ваши интересы и области, в которых вы себя считаете специалистами, Тип вопроса меняем на - Текст (абзац). Ставим галочку на “Сделать этот вопрос обязательным”.
Жмем на кнопку “Готово”.
Заготовки у нас закончились, поэтому для добавления новых полей нам необходимо в левом верхнем углу нажать на кнопку “Добавить элемент”. В этот раз выберем элемент “Один из списка”.
Заполним этот вопрос так: Вопрос – Ваш пол, Пояснения – оставим пустым, Тип вопроса оставляем - Один из списка, Галочку на “Перейти на страницу ответа” – не ставим. Она вам понадобится, если вы решите создавать многостраничные формы. Опять ставим галочку на “Сделать этот вопрос обязательным”.
Жмем на кнопку “Готово”.
Добавляем новый элемент – “Несколько из списка”. Переписывать свои варианты не буду – просто посмотрите на картинку.
Жмем “Готово”.
Добавляем новый элемент – “Выпадающий список”. Заполняем как на картинке.
Жмем “Готово”. Добавляем новый элемент – “Шкала”. Как и раньше – заполните по примеру на картинке.
Жмем “Готово”. Смотреться будет так:
Добавляем новый элемент – ”Сетка”. Заполняем…
Смотрим..
Если вы все закончили, то жмем в правом верхнем углу на кнопку сохранить и чуть левее в меню Дополнительные действия выбираем “Встроить”.
Полученный код добавляем в свою страничку и любуемся результатом.
Поздравляю. Вы сделали форму онлайн опроса. Создайте новую форму уже со своими параметрами и пользуйтесь на здоровье.
Не будем расслабляться и продолжим рассматривать возможности Документов Google для создания форм.
Давайте закончим рассмотрение редактора форм, а затем перейдем к работе с документами.
В меню “Добавить элемент” у нас осталось два неописанных пункта – это “Заголовок раздела” и “Разрыв страницы”. Я их обычно использую вместе. Иногда форма получается слишком вытянутой и целесообразно разбить ее на две части. Для этих целей и служит “Разрыв страницы”. А вот “Заголовок раздела” я добавляю после разрыва, чтобы пользователь не забывал, что он заполняет и для чего.
Еще у нас есть меню “Тема”, в котором вы можете выбрать один из предложенных вариантов оформления вашей формы. Есть один нюанс – не все темы корректно отображают русские символы.
Теперь вернемся к меню “Дополнительные действия”, в котором мы не рассмотрели пункт “Изменить подтверждение”.
Здесь вы можете написать свой текст, который пользователь увидит после заполнения формы. Галочка “Опубликовать сводку ответов” покажет ссылку на результаты вашего опроса пользователям. Не рекомендую ее ставить в формах регистрации на онлайн мероприятия, так как личные данные пользователя лучше не светить в Интернете.
Следующее меню “Просмотреть ответы”. Оно содержит всего два пункта: “Сводка” и “Таблица”.
Следующее меню “Отправить по электронной почте” позволяет отправить вашу форму на почту пользователя.
На это мы закончили рассмотрение основных функций редактора форм и перейдем к работе с документом, в котором будут храниться результаты нашей работы. Вернувшись на страничку документов мы увидим, что на ней уже появился новый документ, в котором и сохраняются все те данные, которые пользователь вводил в нашу форму онлайн регистрации.
Кликните мышкой по документу. Он откроется в новом окне.
Как вы видите, результаты сохраняются в удобном табличном виде.
Не будем рассматривать все пункты меню в этом разделе, а просто разберемся с основными функциями, которые вам понадобятся.
Для редактирования формы регистрации вам необходимо будет в меню “Формы” выбрать пункт “Изменить форму”.
В этом меню галочка на пункте “Принимать ответы” включает/выключает отображение вашей формы. Я обычно ее убираю, когда истекает время, предоставленное пользователям для регистрации на какие-либо мероприятия.
На этом пожалуй все. Благодарю всех за внимание. Если возникнут вопросы, то задавайте их в комментариях – постараюсь помочь.
Предлагаю вашему вниманию очень простой и функциональный скрипт регистрации и авторизации на сайте , который состоит из 3-ёх файлах PHP с подключением 2-ух java скриптов, с помощью которых ошибки выводятся в самой форме без перезагрузки страницы.
Скрипт был успешно протестирован на версии PHP 5.3.3 и PHP 5.6.3
Что умеет и имеет скрипт
- Регистрировать новых пользователей;
- Авторизовывать пользователей и записывать куки на определённый срок (нет необходимости каждый раз авторизовываться);
- Показывать и скрывать определённую информацию для авторизованных и не авторизованных соответственно;
- Имеет АДМИН ПАНЕЛЬ , где можно редактировать все данные и удалять пользователей.
Там же DEMO и Админ Панели
1 ШАГ
.
Если вы используете скрипт регистрации и авторизации на локалке с помощью DENWER, то изменения в файлах для соединения с базой данных делать не нужно.
В противном случае откройте файлы: stayt.php
, classes/Auth.class.php
и adminka/connect.php
, и в самом верху замените данные для связи с базой данных на свои.
2 ШАГ
.
Переходим (если используете DENWER) по адресу: http://localhost/Tools/phpmyadmin/ , если на хостинге, то нажимаете Базы Данных, и создаёте новую базу с именем: registr
и сравнение: utf8_general_ci
.
Вы можете задать разумеется своё имя, но тогда замените его обязательно в файлах для соединения с базой (см. шаг 1).
3 ШАГ
.
Нажмите на созданную базу registr
и затем на верхнюю вкладку SQL
и в появившееся окно для ввода вставьте этот код и нажмите ОК.
CREATE TABLE IF NOT EXISTS `my_users` (`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`names` varchar(15) NOT NULL,
`password` varchar(255) NOT NULL,
`salt` varchar(100) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Всё! Переходите в браузере по своему адресу, пробуйте и экспериментируйте.
Админ Панель
После того, как вы сделали хоть одну регистрацию, можете перейти в АДМИНКУ.
Вход в АДМИН-ПАНЕЛЬ
:
Http://Ваш_сайт.ru/adminka/
Не забудьте запоролить эту папку для безопасности и можно так же переименовать её.
При открытие Админ Панели нажмите кнопку ПОИСК
и вам отобразятся все зарегистрированные пользователи, где при нажатие на определённый номер ID
, вам откроются данные пользователя для редактирования.
Можно так же быстро найти пользователя по его E-mail, для этого достаточно ввести в поле для ПОИСКа
известную электронную почту и нажать на кнопку.
Кнопкой ДОБАВИТЬ
не советую пользоваться, так как пользователь добавляется в систему без пароля. И не имею понятия зачем её вообще сделали.
На этом всё, что не получается или не понятно, - задавайте вопросы.
Попутно можете попробовать для продажи информации (товаров).
Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.
Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.HTML Code for registration form
Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.
In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.
registration.html
Registration form
Здравствуйте! Сейчас мы попробуем реализовать самую простую регистрацию на сайте с помощью PHP + MySQL. Для этого на вашем компьютере должен быть установлен Apache. Принцип работы нашего скрипта изображен ниже.
1. Начнем с создания таблички users в базе . Она будет содержать данные пользователя (логин и пароль). Зайдем в phpmyadmin (если вы создаете базу на своем ПК http://localhost/phpmyadmin/ ). Создаем таблицу users , в ней будет 3 поля.
Я создаю ее в базе mysql, вы можете создавать в другой базе. Далее устанавливаем значения, как на рисунке:
2. Необходимо соединение с этой таблицей. Давайте создадим файл bd.php . Его содержание:
$db = mysql_connect ("ваш MySQL сервер","логин к этому серверу","пароль к этому серверу");
mysql_select_db ("имя базы, к которой подключаемся",$db);
?>
В моем случае это выглядит так:
$db = mysql_connect ("localhost","user","1234");
mysql_select_db ("mysql",$db);
?>
Сохраняем bd.php
.
Отлично! У нас есть таблица в базе, соединение к ней. Теперь можно приступать к созданию странички, на которой пользователи будут оставлять свои данные.
3. Создаем файл reg.php с содержанием (все комментарии внутри):
Регистрация
4. Создаем файл , который будет заносить данные в базу и сохранять пользователя. save_user.php (комментарии внутри):
{
}
//если логин и пароль введены, то обрабатываем их, чтобы теги и скрипты не работали, мало ли что люди могут ввести
//удаляем лишние пробелы
$login = trim($login);
$password = trim($password);
// подключаемся к базе
// проверка на существование пользователя с таким же логином
$result = mysql_query("SELECT id FROM users WHERE login="$login"",$db);
if (!empty($myrow["id"])) {
exit ("Извините, введённый вами логин уже зарегистрирован. Введите другой логин.");
}
// если такого нет, то сохраняем данные
$result2 = mysql_query ("INSERT INTO users (login,password) VALUES("$login","$password")");
// Проверяем, есть ли ошибки
if ($result2=="TRUE")
{
echo "Вы успешно зарегистрированы! Теперь вы можете зайти на сайт. Главная страница";
}
else {
echo "Ошибка! Вы не зарегистрированы.";
}
?>
5. Теперь наши пользователи могут регистрироваться! Далее необходимо сделать "дверь" для входа на сайт уже зарегистрированным пользователям. index.php (комментарии внутри) :
// вся процедура работает на сессиях. Именно в ней хранятся данные пользователя, пока он находится на сайте. Очень важно запустить их в самом начале странички!!!
session_start();
?>
Главная страница
// Проверяем, пусты ли переменные логина и id пользователя
if (empty($_SESSION["login"]) or empty($_SESSION["id"]))
{
// Если пусты, то мы не выводим ссылку
echo "Вы вошли на сайт, как гость
Эта ссылка доступна только зарегистрированным пользователям";
}
else
{
В файле index.php мы выведем ссылочку, которая будет открыта только для зарегистрированных пользователей. В этом и заключается вся суть скрипта - ограничить доступ к каким-либо данным.
6. Остался файл с проверкой введенного логина и пароля. testreg.php (комментарии внутри):
session_start();// вся процедура работает на сессиях. Именно в ней хранятся данные пользователя, пока он находится на сайте. Очень важно запустить их в самом начале странички!!!
if (isset($_POST["login"])) { $login = $_POST["login"]; if ($login == "") { unset($login);} } //заносим введенный пользователем логин в переменную $login, если он пустой, то уничтожаем переменную
if (isset($_POST["password"])) { $password=$_POST["password"]; if ($password =="") { unset($password);} }
//заносим введенный пользователем пароль в переменную $password, если он пустой, то уничтожаем переменную
if (empty($login) or empty($password)) //если пользователь не ввел логин или пароль, то выдаем ошибку и останавливаем скрипт
{
exit ("Вы ввели не всю информацию, вернитесь назад и заполните все поля!");
}
//если логин и пароль введены,то обрабатываем их, чтобы теги и скрипты не работали, мало ли что люди могут ввести
$login = stripslashes($login);
$login = htmlspecialchars($login);
$password = stripslashes($password);
$password = htmlspecialchars($password);
//удаляем лишние пробелы
$login = trim($login);
$password = trim($password);
// подключаемся к базе
include ("bd.php");// файл bd.php должен быть в той же папке, что и все остальные, если это не так, то просто измените путь
$result = mysql_query("SELECT * FROM users WHERE login="$login"",$db); //извлекаем из базы все данные о пользователе с введенным логином
$myrow = mysql_fetch_array($result);
if (empty($myrow["password"]))
{
//если пользователя с введенным логином не существует
}
else {
//если существует, то сверяем пароли
if ($myrow["password"]==$password) {
//если пароли совпадают, то запускаем пользователю сессию! Можете его поздравить, он вошел!
$_SESSION["login"]=$myrow["login"];
$_SESSION["id"]=$myrow["id"];//эти данные очень часто используются, вот их и будет "носить с собой" вошедший пользователь
echo "Вы успешно вошли на сайт! Главная страница";
}
else {
//если пароли не сошлись
Exit ("Извините, введённый вами login или пароль неверный.");
}
}
?>
Ну вот и все! Может урок и скучный, но очень полезный. Здесь показана только идея регистрации, далее Вы можете усовершенствовать ее: добавить защиту, оформление, поля с данными, загрузку аватаров, выход из аккаунта (для этого просто уничтожить переменные из сессии функцией unset ) и так далее. Удачи!
Все проверил, работает исправно!
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и