создание формы на php или красота спасет интернет

Описание веток

sozdanie-formy-registratsii-i-avtorizatsii-v-php – В этой ветке находятся исходники функционала, который был реализован в статье Создание формы регистрации и авторизации

Что будем ваять

Продолжаем начатую несколько материалов назад тему создания динамических ресурсов. Сегодня мы замахнемся на более глобальные вещи! Мы создадим полноценную систему авторизации и регистрации для сайта на основе PHP.

Почему их не стоит реализовывать по отдельности? Ну, прежде все потому, что они тесно взаимосвязаны между собой. Оба модуля (регистрации и авторизации) используют одну и ту же таблицу в БД ресурса, в которую заносятся все сведения о новых пользователях сайта. А затем извлекаются (проверяются на соответствие) при авторизации.

Php обработчик формы авторизации пользователя

Все переменные, которые возвращаются по методу POST – мы присваиваем переменной $data.

Архив обновлен 24.02.2022г.

Внимание:
Если вы используете данный скрипт на локальном сервере типа
DENWER XAMPP
, то не
стоит ждать писем на свой почтовый ящик. Письма лежат в заглушке
sendmail
. В
Denwer
вы их можете
найти по пути
Z:tmp!sendmail
открыть данные файлы вы сможете в любом почтовом клиенте.

Добавляем динамичности

Теперь настало время создать файлы проекта:

reg.php

log.php

enter.php

header.php

Начнем с последнего. Он поможет нам облегчить весь процесс создания формы авторизации на PHP. В него мы запишем используемую всеми тремя формами часть разметки HTML – раздел header:

Сохраните этот файл на сервере как header.php. Затем создайте все перечисленные выше файлы, но уже без раздела header. А вместо него вверху вставьте строку:

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

Такую динамичность можно реализовать для любого модуля сайта. Даже в форме для создания папки на сервере PHP.

Как с помощью php и mysql создать систему регистрации и авторизации пользователей

Безопасная система авторизации и регистрации является одним из важнейших элементов при создании проекта с нуля. Один из возможных способов – это создание системы регистрации с помощью PHP и MySQL.

Хотя в Интернете есть много пособий на эту тему, большинство из них предназначено для продвинутых пользователей.

Эта статья расскажет о том, как создать простую версию системы авторизации и регистрации пользователей с использованием PHP и MySQL для начинающих. Давайте начнем!

Скачать ZIP-архив

Вы можете использовать любой хостинг с поддержкой PHP и MySQL (только убедитесь, что он поддерживает PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней).

Но в этой статье в качестве сервера будет использоваться Xampp. Если до этого не работали с Xampp, эта статья может помочь вам разобраться, как его должным образом установить на вашем компьютере.

Во-первых, создайте базу данных и таблицу, которая будет содержать все регистрационные данные. Вы можете сделать это вручную с помощью графического интерфейса пользователя PhpMyAdmin или использовать для вставки этой информации SQL.

Взгляните на приведенный ниже код SQL:

Обратите внимание, что все данные представляют собой varchar, и даже пароль позже будет преобразован в символ md5, чтобы обеспечить его безопасность.

Кроме того, используйте auto_increment для автоматического назначения идентификаторов или номеров пользователям, которые будут регистрироваться в системе.

Теперь, когда таблица создана, нужно задать разметку и стили CSS, а затем PHP-код.

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

Сначала создайте файл login.php. Скопируйте в него приведенный ниже код:

<!DOCTYPE html>
	<html lang="en">
	<head>
<meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href= 'http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head> 
<body>
<div class="container mlogin">
<div id="login">
<h1>Вход</h1>
<form action="" id="loginform" method="post"name="loginform">
<p><label for="user_login">Имя опльзователя<br>
<input class="input" id="username" name="username"size="20"
type="text" value=""></label></p>
<p><label for="user_pass">Пароль<br>
 <input class="input" id="password" name="password"size="20"
  type="password" value=""></label></p> 
	<p class="submit"><input class="button" name="login"type= "submit" value="Log In"></p>
	<p class="regtext">Еще не зарегистрированы?<a href= "register.php">Регистрация</a>!</p>
   </form>
 </div>
  </div>
<footer>
© 2022 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.

</footer>
</body>
</html>

С помощью этого кода вы получите результат, который показан на рисунке ниже:

Далее, создаем файл register.php. Скопируйте и вставьте в него приведенный ниже код:

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"> 
 <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'>
	</head>
	<body>
<div class="container mregister">
<div id="login">
 <h1>Регистрация</h1>
<form action="register.php" id="registerform" method="post"name="registerform">
 <p><label for="user_login">Полное имя<br>
 <input class="input" id="full_name" name="full_name"size="32"  type="text" value=""></label></p>
<p><label for="user_pass">E-mail<br>
<input class="input" id="email" name="email" size="32"type="email" value=""></label></p>
<p><label for="user_pass">Имя пользователя<br>
<input class="input" id="username" name="username"size="20" type="text" value=""></label></p>
<p><label for="user_pass">Пароль<br>
<input class="input" id="password" name="password"size="32"   type="password" value=""></label></p>
<p class="submit"><input class="button" id="register" name= "register" type="submit" value="Зарегистрироваться"></p>
	  <p class="regtext">Уже зарегистрированы? <a href= "login.php">Введите имя пользователя</a>!</p>
 </form>
</div>
</div>
<footer>
© 2022 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.
 </footer>
</body>
</html>

С помощью этого кода вы получите следующий результат:

Далее, создаем файл intropage.php. Он будет служить в качестве страницы приветствия после того, как пользователь успешно авторизовался в системе:

Этот код даст нам следующий результат:

Теперь, когда разметка готова, нужно добавить CSS-код. В основном, он будет содержать стили для класса страниц container, а также для кнопок и некоторых других элементов, таких как текстовые поля и лайки:

/*= ОБЩИЕ СТИЛИ
	--------------------------------------------------------*/
	body {
   background: #efefef;
   font-family: 'Open Sans', sans-serif;
   color: #777;
	}

	a {
   color: #f58220;
 font-weight: 400;
	}
	
	span {
   font-weight: 300;
   color: #f58220;
	}

	.mlogin {
   margin: 170px auto 0;
	}

	.mregister {
  margin: 80px auto 0;
	}

	.error {
   margin: 40px auto 0;
	border: 1px solid #777;
 padding: 3px;
	color: #fff;
   text-align: center;
 width: 650px;
 background: #f58220;
	}

	.regtext {
   font-size: 13px;
   margin-top: 26px;
   color: #777;
	}
	
	/*= КОНТЕЙНЕРЫ
	--------------------------------------------------------*/
	.container {
	padding: 25px 16px 25px 10px;
	font-weight: 400;
	overflow: hidden;
	width: 350px;
	height: auto;
	background: #fff;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	box-shadow: 0 1px 3px rgba(0,0,0,.13);
	}
	
	#welcome {
	width: 500px;
	padding: 30px;
	background: #fff;
	margin: 160px auto 0;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
   box-shadow: 0 1px 3px rgba(0,0,0,.13);
	}
	
	.container h1 {
	color: #777;
	text-align: center;
	font-weight: 300;
   border: 1px dashed #777;
   margin-top: 13px;
	}

	.container label {
	color: #777;
	font-size: 14px;
	}

	#login {
  width: 320px;
	margin: auto;
	padding-bottom: 15px;
	}

	.container form .input,.container input[type=text],.container input[type=password],.container input[type=e] {
	background: #fbfbfb;
	font-size: 24px;
	line-height: 1;
	width: 100%;
	padding: 3px;
 margin: 0 6px 5px 0;
   outline: none;
   border: 1px solid #d9d9d9;
	}
	
	.container form .input:focus {
	border: 1px solid #f58220;
 -webkit-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
-moz-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
 box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
	}
	
	/*= КНОПКИ
	--------------------------------------------------------*/
	
	.button{
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, leftbottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a, #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
   color: #fff;
	padding: 7px 12px;
	-webkit-border-radius:4px;
moz-border-radius:4px;
 border-radius:4px;
	float: right;
	cursor: pointer;
	}
	
	.button:hover{
	background: #f47c20;
  background: -webkit-gradient(linear, left top, leftbottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11, #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	}
	/*= ПОДВАЛ
	--------------------------------------------------------*/
	footer {
color: #777;
font-size: 12px;
text-align: center;
margin-top: 20px;
	}

К этому времени, вы уже должны получить тот же результат, что и на изображении, приведенном в начале статьи.

Теперь, когда у вас готовы разметка и стили CSS, попробуйте задействовать такие многоразово используемые элементы, как раздел заголовка и раздел подвала. В корневой папке создайте новую папку и назовите ее “includes“.

В ней будут содержаться все включаемые файлы. Затем в папке includes создайте новый файл и назовите его header.php. Скопируйте часть раздела заголовка в каждый из трех PHP-файлов, созданных нами ранее. Таким образом, у вас получится:

<!DOCTYPE html>
	<html lang="en">
<head>
 <meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей </title>
<link href="css/style.css" media="screen" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'>
	</head>
	
   <body>

Следующее, что вам нужно сделать, это удалить разметку, скопированную из файла header.php во всех трех PHP-файлах и заменить ее следующим PHP-кодом:

Теперь, сделайте то же самое с подвалом. Скопируйте приведенный ниже код и вставьте его в новый файл footer.php. Он будет включать в себя раздел подвала:

Затем снова удалите эту часть во всех трех файлах PHP и замените ее следующим кодом:

Теперь, когда вы включили файлы разделов заголовка и подвала, пора создать новый включаемый файл. Назовите его constants.php и скопируйте в него следующий код:

В приведенном выше коде, мы создали константы информации базы данных. Теперь мы можем легко изменять информацию всякий раз, когда это необходимо.

Далее, в папке includes создайте новый файл и назовите ее connection.php. В нем будут храниться коды подключения к базе данных. Скопируйте и вставьте в него код, приведенный ниже:

Обратите внимание, что вам обязательно требуется файл constants.php. Если при подключении возникнет ошибка, с его помощью будет остановлено выполнение скрипта и выдано сообщение об ошибке.

Включите файл connection.php в файлах login.php и register.php, так как эти два файла необходимы для кода управления подключением. Скопируйте приведенный ниже код и вставьте его перед включением файла header.php:

Теперь необходимо преобразовать форму регистрации в полноценную систему регистрации. Чтобы сделать это, нужно добавить включение еще нескольких файлов PHP после включения header.php. Скопируйте и вставьте приведенный ниже код в файл register.php:

В приведенном выше коде, обратите внимание, что перед добавлением данных в базу производится их валидация. Переменная message используется для хранения сообщения об ошибках или об успешном выполнении действия.

Теперь, когда пользователи могут регистрироваться на сайте, необходимо создать систему авторизации. С помощью этого очень простого PHP-кода, вы можете включить систему авторизации. Скопируйте код и вставьте его перед разметкой в файл login.php:

В приведенном выше коде, перед перенаправлением пользователя на страницу intropage.php, которую мы добавим чуть позже, вы в первую очередь должны проверить, была ли установлена сессия.

В противном случае, если сессия не была установлена, пользователю с помощью переменной message будет выдаваться сообщение об ошибке или он будет перенаправляться на страницу login.php.

Мы установили все, что нужно для файлов register.php и login.php. Теперь вы просто должны обеспечить, чтобы пользователь оставался в системе при перенаправлении на страницу intropage.php. Скопируйте и вставьте приведенный ниже код в файл intropage.php:

Обратите внимание, что оператор if был создан для проверки, установлена ли сессия, и в зависимости от этого должен ли пользователь перенаправляться на страницу login.php или остаться на странице intropage.php.

Наконец, чтобы пользователь мог выйти из системы, нужно удалить сессию с помощью session_destroy.

Скопируйте данный код в файл logout.php:

Сегодня мы узнали, как создать простую систему авторизации, используя PHP и MySQL. Конечно, существует много аспектов, которые нужно учитывать, когда речь идет о безопасности, но это уже неплохое начало.

Вы можете изменять приведенные в этой статье коды по своему усмотрению. Если у вас есть идеи по их улучшению, буду рад услышать об этом в комментариях.

Надеюсь, вам понравилась эта статья. Увидимся в следующий раз!

Настраиваем регистрацию

В файле reg.php располагается весь функционал для регистрации пользователей: форма и обработчик введенных в нее данных. При использовании связки PHP MySQL для создания и обработки форм значения всех полей, заполняемых пользователем и передаваемых на обработку, нужно предварительно «очистить».

На основе данного примера можно реализовать скрипт создания формы редактирования данных (update PHP). Но это уже немного из другой «оперы» :)

Сверху нее отображаются все системные сообщения. При успешной регистрации можно добавить переход на страницу приветствия (enter.php). Для этого замените строку PHP:

Код файла enter.php:

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

Остальная разметка

Так как создаваемые динамические формы PHP взаимосвязаны, то сразу «обнародую» и код следующей, предназначенной для авторизации:

Вот так эта форма выглядит в окне браузера.

Подключение к базы данных

В корневую папку сайта, создаем файл с названием “dbconnect.php”. В этом файле, добавляем следующий код:

  <?php
      // Указываем кодировку
      header('Content-Type: text/html; charset=utf-8');

      $server = "localhost"; /* имя хоста (уточняется у провайдера), если работаем на локальном сервере, то указываем localhost */
      $username = "имя_пользователя_бд"; /* Имя пользователя БД */
      $password = "пароль_пользователя_бд"; /* Пароль пользователя, если у пользователя нет пароля то, оставляем пустым */
      $database = "имя_базы_данных"; /* Имя базы данных, которую создали */

      // Подключение к базе данный через MySQLi
      $mysqli = new mysqli($server, $username, $password, $database);

      // Проверяем, успешность соединения. 
      if ($mysqli->connect_errno) {
              die("<p><strong>Ошибка подключения к БД</strong></p><p><strong>Код ошибки: </strong> ". $mysqli->connect_errno ." </p><p><strong>Описание ошибки:</strong> ".$mysqli->connect_error."</p>");
      }

      // Устанавливаем кодировку подключения
      $mysqli->set_charset('utf8');

      //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта
      $address_site = "http://testsite.local";
  ?>

Смотреть видеоурок

Статья была написана на основе видеоурока Хауди Хо, который Вы можете посмотреть ниже. Скрипт из видео был немного доработан (добавлена капча function captcha_show).

Структура таблицы: bez_reg


--
-- Структура таблицы `bez_reg`
--

CREATE TABLE IF NOT EXISTS `bez_reg` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `login` varchar(200) NOT NULL,
  `pass` varchar(32) NOT NULL,
  `salt` varchar(32) NOT NULL,
  `active_hex` varchar(32) NOT NULL,
  `status` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Файл reg_form.html

Так как регистрация пользователей у нас готова, самое время написать авторизацию. Создадим форму для авторизации
пользователей, далее напишем обработчик формы авторизации и на последок сделаем скрипт show.php который
будет показывать нам авторизированны мы в системе или нет.

Похожее:  Личный кабинет Лукойл Беларусь - Управляйте своими финансами с легкостью

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *