Tutorial to create a login system using HTML, PHP, and MySQL

This tutorial is covered in 4 parts.

Время на прочтение

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

Содержание

1 → Темная форма входа
2 → Светлая форма входа
3 → Эффектная форма с эффектом появления
4 → Простая форма с эффектом появления
5 → Красивая форма с логотипом Apple
6 → Маленькая форма в розовом стиле
7 → Светлая форма
8 → Супер форма входа и восстановления пароля
9 → Приятная дизайнерская форма с эффектом
10 → Форма серого цвета
11 → Крупная форма с дополнительным элементом
12 → Дизайн в виде блокнота
13 → Красочная, прозрачная форма
14 → Apple Iphone форма
15 → Чёткая форма с заголовком
16 → Тёмная форма
17 → Черная форма
18 → Горизонтальная форма входа и регистрации
19 → Темная форма с дополнительными элементами
20 → Форма входа на сайт + регистрация
21 → Белая форма с красным заголовком
22 → Форма входа, регистрации и восстановление пароля
Заключение
CSS
Стилизуем формы, используя CSS3
Создаем анимацию
1) Building a Signup system
Step 1: Creating Registration Form in HTML
Step 2: Creating the MySQL Database Table
Step 3: Creating Database Configuration File
Step 4: Creating a Session File
Step 5: Create Registration Form in PHP
2) Building a Login System
Step 1: Creating a Login Form in HTML
Step 2: Creating a Login System in PHP
Table of Contents
4) The Logout script
3) Creating a Welcome Page
Conclusion

<div id="container_demo" >
    <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="tosubscribe"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1>Log in</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Keep me logged in</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Login" />
                </p>
                <p class="change_link">
                    Not a member yet ?
                    <a data-hren="#tosubscribe" class="to_subscribe">Join us</a>
                </p>
            </form>
        </div>
 
        <div id="subscribe" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on">
                <h1> Sign up </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Sign up"/>
                </p>
                <p class="change_link">
                    Already a member ?
                    <a data-hren="#tologin" class="to_subscribe"> Go and log in </a>
                </p>
            </form>
        </div>
    </div>
</div>

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки <a href> в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.

На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).

Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.

Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!

1 → Темная форма входа

Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.

2 → Светлая форма входа

Светлая форма входа с прозрачной рамочкой и четкой структурой.

3 → Эффектная форма с эффектом появления

Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.

4 → Простая форма с эффектом появления

Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.

5 → Красивая форма с логотипом Apple

Продуманная форма на сайт с интересным дизайном и логотипом apple.

6 → Маленькая форма в розовом стиле

Маленькая и простая, в розовом стиле, и интересным дизайном.

7 → Светлая форма

Светлая, в выдержанном стиле и дизайне, ничего лишнего.

8 → Супер форма входа и восстановления пароля

Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.

9 → Приятная дизайнерская форма с эффектом

Приятная на вид, красивый эффект появления иконок при активации поля ввода.

10 → Форма серого цвета

Серый оттенок, в виде друг на друга наложенных листочков.

11 → Крупная форма с дополнительным элементом

Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).

12 → Дизайн в виде блокнота

Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.

13 → Красочная, прозрачная форма

Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.

14 → Apple Iphone форма

Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!

15 → Чёткая форма с заголовком

Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.

16 → Тёмная форма

Тёмная форма с красивой и заметной кнопкой отправки данных.

17 → Черная форма

Черная форма входа с белыми полями – хорошее сочетание цветов.

18 → Горизонтальная форма входа и регистрации

Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.

19 → Темная форма с дополнительными элементами

Темная форма с кнопками входа через социальные сети и красивыми полями.

20 → Форма входа на сайт + регистрация

Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.

21 → Белая форма с красным заголовком

Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.

22 → Форма входа, регистрации и восстановление пароля

Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.

Заключение

Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.

Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко

Вам нужна форма регистрации на сайте? Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.

Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.

Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

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

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

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

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

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

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

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода – это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая – для формы.

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 – из числа минималистичных.

Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной.

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

Если хотите выделиться и сохранить оригинальность, используйте форму входа №18. Кому-то нравятся простые страницы входа, в то время как другие хотят иметь дополнительные преимущества.

Яркая, энергичная и захватывающая – это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами.

Разработано для форм подписки с использованием вкладок и меток.

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

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое.

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и :before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

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

Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации.

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

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

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

Ресурсы, необходимые для работы с этим руководством:

(PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней);
Базовые знания по , и ;
Время и терпение.

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

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

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

/* Создание базы данных */
CREATE DATABASE userlistdb;

/* Создание таблицы */
CREATE TABLE `usertbl` (
`id` int(11) NOT NULL auto_increment,
`full_name` varchar(32) collate utf8_unicode_ci NOT NULL default '',
`email` varchar(32) collate utf8_unicode_ci NOT NULL default '',
`username` varchar(20) collate utf8_unicode_ci NOT NULL default '',
`password` varchar(32) collate utf8_unicode_ci NOT NULL default '',
PRIMARY KEY  (`id`),
UNIQUE KEY `username` (`username`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

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

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

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

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

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

<!DOCTYPE html>
	<html lang="en">
	<head>
<meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link data-hren="css/style.css" media="screen" rel="stylesheet">
<link data-hren= '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 data-hren= "register.php">Регистрация</a>!</p>
   </form>
 </div>
  </div>
<footer>
© 2014 <adata-hren="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.

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

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

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

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"> 
 <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title>
<link data-hren="css/style.css" media="screen" rel="stylesheet">
<link data-hren='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 data-hren= "login.php">Введите имя пользователя</a>!</p>
 </form>
</div>
</div>
<footer>
© 2014 <adata-hren="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.
 </footer>
</body>
</html>

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

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

<div id="welcome">
 <h2>Добро пожаловать, <span> USER </span></h2>!
	<p><a data-hren="logout.php">Выйти</a> из системы</p>
</div>

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

Теперь, когда разметка готова, нужно добавить -код. В основном, он будет содержать стили для класса страниц 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;
	}

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

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

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

<!DOCTYPE html>
	<html lang="en">
<head>
 <meta charset="utf-8">
<title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей </title>
<link data-hren="css/style.css" media="screen" rel="stylesheet">
<link data-hren='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>

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

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

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

<footer>© 2014 <adata-hren="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.</footer>
	</body>
	</html>

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

<?php include("includes/footer.php"); ?>

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

<?php
	// Константы базы данных
	define("DB_SERVER", "localhost");
	define("DB_USER", "root");
	define("DB_PASS", "");
	define("DB_NAME", "userlistdb");
	?>

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

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

<?php
	require("constants.php");

	$con = mysql_connect(DB_SERVER,DB_USER, DB_PASS) or die(mysql_error());
	mysql_select_db(DB_NAME) or die("Cannot select DB");
	?>

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

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

<?php require_once("includes/connection.php"); ?>

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

<?php
	
	if(isset($_POST["register"])){
	
	if(!empty($_POST['full_name']) && !empty($_POST['email']) && !empty($_POST['username']) && !empty($_POST['password'])) {
  $full_name= htmlspecialchars($_POST['full_name']);
	$email=htmlspecialchars($_POST['email']);
 $username=htmlspecialchars($_POST['username']);
 $password=htmlspecialchars($_POST['password']);
 $query=mysql_query("SELECT * FROM usertbl WHEREusername='".$username."'");
  $numrows=mysql_num_rows($query);
if($numrows==0)
   {
	$sql="INSERT INTO usertbl
  (full_name, email, username,password)
	VALUES('$full_name','$email', '$username', '$password')";
  $result=mysql_query($sql);
 if($result){
	$message = "Account Successfully Created";
} else {
 $message = "Failed to insert data information!";
  }
	} else {
	$message = "That username already exists! Please try another one!";
   }
	} else {
	$message = "All fields are required!";
	}
	}
	?>

	<?php if (!empty($message)) {echo "<p class="error">" . "MESSAGE: ". $message . "</p>";} ?>

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

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

<?php
	session_start();
	?>

	<?php require_once("includes/connection.php"); ?>
	<?php include("includes/header.php"); ?>	 
	<?php
	
	if(isset($_SESSION["session_username"])){
	// вывод "Session is set"; // в целях проверки
	header("Location: intropage.php");
	}

	if(isset($_POST["login"])){

	if(!empty($_POST['username']) && !empty($_POST['password'])) {
	$username=htmlspecialchars($_POST['username']);
	$password=htmlspecialchars($_POST['password']);
	$query =mysql_query("SELECT * FROM usertbl WHEREusername='".$username."' AND password='".$password."'");
	$numrows=mysql_num_rows($query);
	if($numrows!=0)
 {
while($row=mysql_fetch_assoc($query))
 {
	$dbusername=$row['username'];
  $dbpassword=$row['password'];
 }
  if($username == $dbusername && $password == $dbpassword)
 {
	// старое место расположения
	//  session_start();
	 $_SESSION['session_username']=$username;	 
 /* Перенаправление браузера */
   header("Location: intropage.php");
	}
	} else {
	//  $message = "Invalid username or password!";
	
	echo  "Invalid username or password!";
 }
	} else {
    $message = "All fields are required!";
	}
	}
	?>

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

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

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

<?php

session_start();

if(!isset($_SESSION["session_username"])):
header("location:login.php");
else:
?>
	
<?php include("includes/header.php"); ?>
<div id="welcome">
<h2>Добро пожаловать, <span><?php echo $_SESSION['session_username'];?>! </span></h2>
  <p><a data-hren="logout.php">Выйти</a> из системы</p>
</div>
	
<?php include("includes/footer.php"); ?>
	
<?php endif; ?>

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

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

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

<?php
	session_start();
	unset($_SESSION['session_username']);
	session_destroy();
	header("location:login.php");
	?>

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

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

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

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe,
#login{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.

Здесь мы назначим свойства для шапки:

/**** текст ****/
#wrapper h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
 
/** На донный момент только webkit поддерживает background-clip:text; **/
#wrapper h1{
    background:
    -webkit-repeating-linear-gradient(-45deg,
        rgb(18, 83, 93) ,
        rgb(18, 83, 93) 20px,
        rgb(64, 111, 118) 20px,
        rgb(64, 111, 118) 40px,
        rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
 
#wrapper h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;
    background:
        linear-gradient(left,
            rgba(147,184,189,0) 0%,
            rgba(147,184,189,0.8) 20%,
            rgba(147,184,189,1) 53%,
            rgba(147,184,189,0.8) 79%,
            rgba(147,184,189,0) 100%);
}

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

/* все поля исключают submit и checkbox */
#wrapper input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.

@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/** магический трюк! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/
#wrapper p.button input{
    width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 80%;
}

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

p.change_link{
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px ;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    border-radius: 0 0  5px 5px;
    background: rgb(225, 234, 235);
    background: repeating-linear-gradient(-45deg,
    rgb(247, 247, 247) ,
    rgb(247, 247, 247) 15px,
    rgb(225, 234, 235) 15px,
    rgb(225, 234, 235) 30px,
    rgb(247, 247, 247) 30px
    );
}
#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
    position: relative;
    top: 1px;
}

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{
    z-index: 21;
    opacity: 0;
}

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

.animate{
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
    animation-name: fadeOutLeftBig;
}
 
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс .animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

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

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Step 1: Creating Registration Form in HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sign Up</title>
        <link rel="stylesheet" data-hren="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Register</h2>
                    <p>Please fill this form to create an account.</p>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Full Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>    
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Already have an account? <a data-hren="login.php">Login here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

The output of the above HTML form will look like this.

Step 2: Creating the MySQL Database Table

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(75) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

Step 3: Creating Database Configuration File

<?php
define('DBSERVER', 'localhost'); // Database server
define('DBUSERNAME', 'root'); // Database username
define('DBPASSWORD', ''); // Database password
define('DBNAME', 'demo'); // Database name
 
/* connect to MySQL database */
$db = mysqli_connect(DBSERVER, DBUSERNAME, DBPASSWORD, DBNAME);
 
// Check db connection
if($db === false){
    die("Error: connection error. " . mysqli_connect_error());
}
?>

Step 4: Creating a Session File

<?php
// Start the session
session_start();

// if the user is already logged in then redirect user to welcome page
if (isset($_SESSION["userid"]) && $_SESSION["userid"] === true) {
    header("location: welcome.php");
    exit;
}
?>

Step 5: Create Registration Form in PHP

<?php

require_once "config.php";
require_once "session.php";

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit'])) {

    $fullname = trim($_POST['name']);
    $email = trim($_POST['email']);
    $password = trim($_POST['password']);
    $confirm_password = trim($_POST["confirm_password"]);
    $password_hash = password_hash($password, PASSWORD_BCRYPT);

    if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) {
        $error = '';
        // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
	$query->bind_param('s', $email);
	$query->execute();
	// Store the result so we can check if the account exists in the database.
	$query->store_result();
        if ($query->num_rows > 0) {
            $error .= '<p class="error">The email address is already registered!</p>';
        } else {
            // Validate password
            if (strlen($password ) < 6) {
                $error .= '<p class="error">Password must have atleast 6 characters.</p>';
            }

            // Validate confirm password
            if (empty($confirm_password)) {
                $error .= '<p class="error">Please enter confirm password.</p>';
            } else {
                if (empty($error) && ($password != $confirm_password)) {
                    $error .= '<p class="error">Password did not match.</p>';
                }
            }
            if (empty($error) ) {
                $insertQuery = $db->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?);");
                $insertQuery->bind_param("sss", $fullname, $email, $password_hash);
                $result = $insertQuery->execute();
                if ($result) {
                    $error .= '<p class="success">Your registration was successful!</p>';
                } else {
                    $error .= '<p class="error">Something went wrong!</p>';
                }
            }
        }
    }
    $query->close();
    $insertQuery->close();
    // Close DB connection
    mysqli_close($db);
}
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sign Up</title>
        <link rel="stylesheet" data-hren="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Register</h2>
                    <p>Please fill this form to create an account.</p>
                    <?php echo $success; ?>
                    <?php echo $error; ?>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Full Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>    
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Already have an account? <a data-hren="login.php">Login here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

Below is the Login Form in HTML. Paste it in a file named login.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" data-hren="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Login</h2>
                    <p>Please fill in your email and password.</p>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Don't have an account? <a data-hren="register.php">Register here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

The output of the above code will look like this

<?php

require_once "config.php";
require_once "session.php";


$error = '';
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit'])) {

    $email = trim($_POST['email']);
    $password = trim($_POST['password']);

    // validate if email is empty
    if (empty($email)) {
        $error .= '<p class="error">Please enter email.</p>';
    }

    // validate if password is empty
    if (empty($password)) {
        $error .= '<p class="error">Please enter your password.</p>';
    }

    if (empty($error)) {
        if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) {
            $query->bind_param('s', $email);
            $query->execute();
            $row = $query->fetch();
            if ($row) {
                if (password_verify($password, $row['password'])) {
                    $_SESSION["userid"] = $row['id'];
                    $_SESSION["user"] = $row;

                    // Redirect the user to welcome page
                    header("location: welcome.php");
                    exit;
                } else {
                    $error .= '<p class="error">The password is not valid.</p>';
                }
            } else {
                $error .= '<p class="error">No User exist with that email address.</p>';
            }
        }
        $query->close();
    }
    // Close connection
    mysqli_close($db);
}
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" data-hren="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Login</h2>
                    <p>Please fill in your email and password.</p>
                    <?php echo $error; ?>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Don't have an account? <a data-hren="register.php">Register here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

4) The Logout script

<?php
// Start the session
session_start();

// Destroy the session.
if (session_destroy()) {
    // redirect to the login page
    header("Location: login.php");
    exit;
}
?>

3) Creating a Welcome Page

<?php
// start the session
session_start();

// Check if the user is not logged in, then redirect the user to login page
if (!isset($_SESSION["userid"]) || $_SESSION["userid"] !== true) {
    header("location: login.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Welcome <?php echo $_SESSION["name"]; ?></title>
        <link rel="stylesheet" data-hren="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Hello, <strong><?php echo $_SESSION["name"]; ?></strong>. Welcome to demo site.</h1>
                </div>
                <p>
                    <a data-hren="logout.php" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Log Out</a>
                </p>
            </div>
        </div>
    </body>
</html>

Conclusion

In this tutorial, I explained how you can create a Login System using HTML, PHP and MySQL. Once you understand how simple it is to create a login system you can add other features like reset password, forgot password, verify email address, edit user’s profile, etc.