Создание формы на PHP – делаем свой сайт красивым!

Создание формы на PHP – делаем свой сайт красивым!

От автора: есть среди разработчиков уникумы, которые «программисты от Бога». Они также легко пишут код, как и читают его. Но все-таки они странные и «не отсюда»! Вот один такой уникум недавно сравнил хорошо сработанный сайт с красивой девушкой, потому что на такой ресурс (как и к девушке) хочется приходить снова и снова. В сегодняшнем материале мы рассмотрим создание формы PHP. И у красивой девушки, и у классного сайта все формы должны быть что надо!

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

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

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

Общий принцип действия функционала: сначала пользователь регистрируется через соответствующую форму. После заполнения всех полей данные отправляются для обработки на сервер, где заносятся в таблицу БД. При следующем заходе на ресурс юзер вводит указанные при регистрации логин и пароль. Их правильность проверяется путем выборки данных из таблицы. Если оба значения указаны правильно, то пользователь попадает на страницу приветствия. Иначе выдается сообщение о неправильном вводе пароля и логина. Начнем с создания формы регистрации PHP. Вот ее код HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
<div>
 <h1>Зарегистрируйтесь</h1>
<form action="" method="post" name="registerform">
<p><label>Ваше имя:<br>
<input name="u_name"="20" type="text" value=""></label></p> 
 <p><label>Желаемый ник:<br>
 <input name="u_nicename" size="30" type="text"></label></p>
<p><label>Ваш email:<br>
<input name="u_email" size="30" type="email"></label></p>
<p><label>Пароль:<br>
<input name="u_pass" size="30" type="password"></label></p>
<p><input name="register" type="submit" value="Регистрация"></p>
<p><a href="log.php">Уже зарегистрированы?</a></p>
 </form>
</div>
</div>
</body>
</html>

Так созданная форма регистрации смотрится в браузере:

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<div>
<div>
<h1>Вход:</h1>
<form action="" method="post" name="loginf">
<p><label>Имя:<br>
<input name="u_nicename" size="25" type="text"></label></p>
<p><label>Password:<br>
 <input name="password" size="25" type="password"></label></p> 
	<p><input name="login" type= "submit"></p>
	<p>Еще не зарегистрированы, то </br><a href= "reg.php">зарегистрируйтесь</a>!</p>
   </form>
 </div>
  </div>
</body>
</html>

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

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

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

reg.php

log.php

enter.php

header.php

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//RU"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

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

<?php include("header.php"); ?>

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

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

Переходим к MySQL

Вот типы данных и названия таблицы, которую я создал через phpMyAdmin. Можно и с помощью команды CREATE TABLE, но через утилиту быстрее.

Обратите внимание, что у нас все столбцы таблицы кроме id имеют тип данных varchar. В скобках указывается максимальная длина строкового значения для каждого поля.

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

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

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

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

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

echo "Аккаунт успешно создан";

на

echo '<script type="text/javascript">
window.location = "enter.php"
</script>';

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

<?php
include("header.php");
 ?>
<body>
<div>
 <h2>Welcome,USER!</span></h2>
</div>
</body>
</html>

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

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Fox

    Интересная статья

  2. kuznetsov021@gmail.com

    Все красиво! Но в эту бочку меда добавлю ложечку дегтю…
    Вот возьмем, например, поле ввода — имя и отчество. Все хорошо… однако между именем и отчеством имеется пробел и отправка формы ПОСТом обреже. ))))
    Конечно с помощью пхп можно сделать пару кульбитов и проблемма решена. Я то решил с помощью замены в строке пробела на &nbsp . Вопрос !!! А как эту проблему решить профессионально?

  3. Дмитрий

    А можно ли использовать данный подход для сайта на WordPress. Там же уже есть своя встроенная авторизация.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree