Создание формы на 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 для создания и обработки форм значения всех полей, заполняемых пользователем и передаваемых на обработку, нужно предварительно «очистить».

<br /><?php include(«header.php»); ?><br /><?php<br />if(isset($_POST[«register»])){<br />if(!empty($_POST[‘u_name’]) && !empty($_POST[‘u_nicename’]) && !empty($_POST[‘u_email’]) && !empty($_POST[‘u_pass’])) {<br /> $connect=mysqli_connect(‘localhost’, ‘root’, », ‘site’);<br /> $name=mysqli_real_escape_string($connect,$_POST[‘u_name’]);<br /> $nicename=mysqli_real_escape_string($connect,$_POST[‘u_nicename’]);<br /> $email=mysqli_real_escape_string($connect,$_POST[‘u_email’]);<br /> $pass=mysqli_real_escape_string($connect,$_POST[‘u_pass’]);<br /> $query=mysqli_query($connect,»SELECT * FROM `useri` WHERE nicename='{$nicename}'»);<br /> $numr=mysqli_num_rows($query);<br /> if($numr==0)<br /> {<br /> $sql_q=»INSERT INTO `useri`<br /> (name,nicename,email,pass)<br /> VALUES(‘{$name}’,'{$nicename}’, ‘${email}’, ‘{$pass}’)»;<br /> $res=mysqli_query($connect,$sql_q);<br /> if($res){<br /> echo «Аккаунт успешно создан»;<br /> }<br /> else {<br /> echo «Не удалось добавить информацию»;<br /> }<br /> }<br />else {<br /> echo «Этот ник занятый. Попробуйте другой!»;<br /> }<br />}else {<br /> //$info = «Все поля обязательны для заполнения!»;<br /> echo «Все поля обязательны для заполнения!»;<br />}<br />}<br />?><br /><body><br /><div><br /><div><br /> <h1>Зарегистрируйтесь</h1><br /><form action=»reg.php» method=»post» name=»registerform»><br /><p><label>Ваше имя:<br><br /><input name=»u_name»=»20″ type=»text» value=»»></label></p><br /> <p><label>Желаемый ник:<br><br /> <input name=»u_nicename» size=»30″ type=»text»></label></p><br /><p><label>Ваш email:<br><br /><input name=»u_email» size=»30″ type=»email»></label></p><br /><p><label>Пароль:<br><br /><input name=»u_pass» size=»30″ type=»password»></label></p><br /><p><input name=»register» type=»submit» value=»Register»></p><br /><p><a href=»log.php»>Уже зарегистрированы?</a></p><br /> </form><br /></div><br /></div><br /></body><br /></html>

На основе данного примера можно реализовать скрипт создания формы редактирования данных (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 который
будет показывать нам авторизированны мы в системе или нет.

Похожее: 42 Best Free HTML5 And CSS3 Login Forms 2022 - Colorlib