Отпетый users registration form html. Создаем форму регистрации

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> <p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/the-types-of-wireless-networks/krupnye-kursory-dlya-bolshih-monitorov-vin-7-kak-izmenit-ukazatel-kursor/">Внешний вид</a> формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/equipment/otpravit-mne-kopiyu-soobshcheniya-e-3-rabota-s-polyami-komu-to/">скрытую копию</a> на ваш адрес электронной почты.</p> <p>Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую <a href="/configuring-wi-fi/reshenie-problemy-izvinite-proizoshla-oshibka-v-instagram/">простую форму</a> для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.</p> <p>Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.</p> <p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="text" name="password"></td> </tr> </table> </form> </p><p>Результат в браузере:<br><img src='https://i1.wp.com/webshake.ru/uploads/img/b46c524417a23a2090c6c78df55b64e6a0a7c8fffe166749d61cf537cda3bdcc.png' height="50" width="241" loading=lazy></p> <p>Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута <b>type </b> на <b>password </b>:</p><p> <input id="passwordField" type="password" name="password"> </p><p>Результат:<br><img src='https://i2.wp.com/webshake.ru/uploads/img/fcc1b0948d956a9c687641df8bd80f2c2d6612c088edb674e53bf2b22b502684.png' height="57" width="240" loading=lazy></p> <h2>Кнопка отправки формы</h2> <p>Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега <b><input> </b> с типом <b>submit </b>.</p> <p>Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут <b>value </b>. Задавать имя кнопке или нет – на ваше усмотрение, но если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.</p> <p> <input type="submit" value="Войти"> </p><p>Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.</p> <p>В итоге код нашей формы получится следующим:</p><p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align: center"><input type="submit" value="Войти"></td> </tr> </table> </form> </p><p>Результат в браузере:<br><img src='https://i2.wp.com/webshake.ru/uploads/img/eb03f584a26e6ec91e1be78ab7c996db8d84a9c6d56e52926ca73271189646dd.png' height="82" width="241" loading=lazy></p> <p>Login forms can be found in websites with forums, shops, WordPress and mostly everything on the internet requires login form somewhere to get access to something. The whole web is incomplete without login forms and registration, signups forms.</p><p>HTML forms will be first which most of us come across and with proper CSS which gives style to the HTML structure . In latest HTML versions i guess HTML seems to have opted for CSS3 as their default structure styling option. Anyways what you find here is the pre designed HTML, CSS forms built by front end developers and shared to the public for free to use.</p><p>Try to use all these free login form templates as most of them also have pre built <a href="/wi-fi/proverka-css-na-validnost-s-pomoshchyu-css-validation-service-ispravlenie-html-i/">HTML validation</a> features as well as some opt jQuery or HTML validation (like the Login/Register form with pass meter below).</p><p>This list is not over yet, i am interested in finding new login form designs so i will keep updating these list with new login form templates when they show up in 2017. Stay tuned.</p><h3>Red Login Form</h3><p>A simple and effective login form for your website which requires basic input fields and no extra programming.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2016/03/login-new.jpg' align="center" width="100%" loading=lazy></p><p>A flat login form design designed for your website which is already flat. Download and use this template for any purpose.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2016/03/simle-form.jpg' align="center" width="100%" loading=lazy></p><p>Require a quick signin for your clients ? No worries, this pretty looking login form will get you going without any hassles. Download the source code and check the demo as you can put a sample username and password in the fields and try to login. You will be taken to a profile page on the same which looks glorious with a logout button which shows the logging out animation.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/login-form-2015.jpg' align="center" width="100%" loading=lazy></p><p>With google material design getting popular over flat design we can see a deep and carefully shadowed login form and a register form in this css3 template.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/register-form.jpg' align="center" width="100%" loading=lazy></p><p>Here you get another brilliant login form for your busienss website with a option to hide/show login fields. Well coded css/html/js design will give you better loading without tampering your current site speed.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2016/03/material-design.jpg' align="center" width="100%" loading=lazy></p><h3>Minimal Login Form with fluid animation</h3><p>A smooth animation of login form which opens up the login section by clicking a picture or a button as you need.</p><h3>Minimalistic Login Form with css</h3><p>Here you will find a no-fancy login form ui which is placed on a full screen background. The download file will get you css and html for easy implementation of this login to your website.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2015/12/login-ui.jpg' align="center" width="100%" loading=lazy></p><h3>Animated Login Form</h3><p>The click animations displayed on text fields is brilliant which displays a small sliding animation of user and password icons. You can then login the form to watch a authenticating pre loader as well as a welcome back block. This download contains all the source files to implement a login form for your own website.</p><p><img src='https://i1.wp.com/designseer.com/wp-content/uploads/2015/12/Animated-login-form.jpg' align="center" width="100%" loading=lazy></p><h3>Elegant Login</h3><p>This is a simple version of login form you can display on your website as this also has less impact on site speed with its minimal code.</p><p><img src='https://i1.wp.com/designseer.com/wp-content/uploads/2015/09/elegant-login.jpg' align="center" width="100%" loading=lazy></p><h3>Calm Login Screen</h3><p>A clean login form with animated background giving a relaxing feel to the whole page. Download the whole template in zip format from codepen.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2015/05/calm-login-form.jpg' align="center" width="100%" loading=lazy></p><h3>Login and Signup Form</h3><p>Integrate this fluid login and signup form on to your website with ease. The zip file with this download will provide you with css, html and js templates. Social media signup is also available with password show/hide options for on screen easy password entry.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2015/05/css3-login-form-with-signup.jpg' align="center" width="100%" loading=lazy></p><h3>Login Form with Create Account</h3><p>A login form which displays with a fadein effect is just amusing to watch. This effect can be seen only in few modern login forms. Use the click me to change the form to signup or create form.</p><p>A minimal style login form with flat design can be download from the link below. HTML validation is available and set in this login template.</p> Download <h3>Minimal Form Template for Login</h3><p>A validation for email is in palce and this tempalte is pure css, html with no fancy jquery modules.</p> Download <h3>Signup/Login Form</h3><p>A single form to login to the website as well as a signup, register option which can be flipped with a click. Even though the signup area is missing some important fields this is nonetheless better form with all powerful features.</p> Download <p>This login form is hidden unles you click on login link. This is a very useful feature for modern day website which can avoid an extra page for login. Display login on any page you like with this powerful login form.</p> Download <p>It’s provided both as a PSD and as a fully-coded HTML/CSS version, so you can get started integrating it straight away.</p> <p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2014/01/Vibrant-Login-Interface-CSS-PSD.jpg' align="center" width="100%" loading=lazy></p><h3>Login Form (Coded)</h3><p>A professional login form. The download includes the PSD file, and I also felt like coding it so I included the xHTML, Js and CSS files as well.</p> Download <p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2014/01/Login-Form-Coded.jpg' align="center" width="100%" loading=lazy></p><h3>White Simple Login Form</h3><p>A clean and simple login form with a round submit button and elegant focus states.</p><h3>Simply Login Form</h3><p>Simply Login Form styled and designed purely using CSS3. The form is created using pretty simple markup and styled using very basic CSS3 properties.</p> Download <p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2014/01/login-page.jpg' align="center" width="100%" loading=lazy></p><p><img src='https://i1.wp.com/designseer.com/wp-content/uploads/2015/12/Pure-CSS-Login-Box.jpg' align="center" width="100%" loading=lazy></p> <i> </i> <p>В этой статье вы узнаете, <b>как создать форму регистрации и авторизации </b>, используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернет-магазина и для <a href="/bluetooth/socialnye-seti-raznyh-stran-luchshie-socialnye-seti-socialnye-seti-v-nashei/">социальных сетей</a> (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.</p> <p>Если у Вас сайт на локальном компьютере, то я надеюсь, что у Вас уже . Без него ничего работать не будет.</p> <h2>Создание таблицы в Базе Данных</h2> <p>Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье , я подробно объясняю, как сделать это.</p> <p>И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу <i>users </i> в которой будем добавлять наших зарегистрированных пользователей.</p> <p>Как создавать таблицу в БД, я также объяснил в статье . Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.</p> <p>Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу <i>users </i> с такими полями:</p> <ul><li><i>id </i> - Идентификатор. Поле <i>id </i> должно быть у каждой таблицы из БД.</li> <li><i>first_name </i> - Для сохранений имени.</li> <li><i>last_name </i> - Для сохранений фамилии.</li> <li><i>email </i> - Для сохранений почтового адреса. E-mail мы будем использовать в качестве логина, поэтому это поле должна быть уникальной, то есть иметь индекс UNIQUE.</li> <li><i>email_status </i> - Поле для указания, подтверждена ли почта или нет. Если почта подтверждена, то оно будет иметь значение 1, иначе значение 0. По умолчанию, это поле будет иметь значение 0. </li> <li><i>password </i> - Для сохранений пароля.</li> </ul><p>Все поля типа “VARCHAR” должны иметь значение по умолчанию NULL.</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/struktura-tablicy-users.jpg' width="100%" loading=lazy></p> <p>Если Вы хотите чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.</p> <p>Всё, наша таблица <i>users </i> готова. Переходим к следующему этапу.</p> <h2>Подключение к Базе Данных</h2> <p>Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.</p> <p>В папке нашего сайта, создаём файл с именем <i>dbconnect.php </i>, и в нём пишем следующий скрипт:</p><p> <?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()) { echo "<p><strong>Ошибка подключения к БД</strong>. Описание ошибки: ".mysqli_connect_error()."</p>"; exit(); } // Устанавливаем кодировку подключения $mysqli->set_charset("utf8"); //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта $address_site = "http://testsite.local"; ?> </p><p>Этот файл <i>dbconnect.php </i> нужно будет подключить к обработчикам форм.</p> <p>Обратите внимание на переменную <i>$address_site </i>, здесь я указал название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.</p> <h2>Структура сайта</h2> <p>Теперь давайте разберёмся с HTML структурой нашего сайта.</p> <p>Шапку и подвал сайта вынесем в отдельные файлы, <i>header.php </i> и <i>footer.php </i>. Их будем подключать на всех страницах. А именно на главной (файл <i>index.php </i>), на страницу с формой регистрации (файл <i>form_register.php </i>) и на страницу с формой авторизации (файл <i>form_auth.php </i>).</p> <p>Блок с нашими ссылками, <i>регистрация </i> и <i>авторизация </i>, добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на <b>страницу с формой регистрации </b> (файл <i>form_register.php </i>) а другая на страницу с <b>формой авторизации </b> (файл <i>form_auth.php </i>).</p> <p>Содержимое файла header.php:</p><p> <?php //Запускаем сессию session_start(); ?> <!DOCTYPE html> <html> <head> Название нашего сайта <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> </p><p>В итоге, главная страница, у нас выглядит так:</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/vid-glavnoj-stranicy.jpg' width="100%" loading=lazy></p> <p>Конечно, у Вас на сайте может быть совсем другая структура, но это для нас сейчас не важно. Главное, чтобы присутствовали ссылки (кнопки) регистрации и авторизации.</p> <h2></h2> <p>Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле <i>form_register.php </i>.</p> <p>Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы <i>users </i> и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.</p> <p>На сервере, в результате обработки формы регистрации, могут возникнуть различные ошибки, из-за которых пользователь не сможет зарегистрироваться. Поэтому для того чтобы пользователь понимал почему не проходит регистрация, необходимо вывести ему сообщения об этих ошибках.</p> <p>Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.</p> <p>И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера <i>адрес_сайта/form_register.php </i>, то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.</p> <p>В общем, код файла <i>form_register.php </i> у нас получился таким:</p><p> <?php //Подключение шапки require_once("header.php"); ?> </p><p> <?php //Если в сессии существуют сообщения об ошибках, то выводим их if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["error_messages"]); } //Если в сессии существуют радостные сообщения, то выводим их if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["success_messages"]); } ?></p><p> <?php //Проверяем, если пользователь не авторизован, то выводим форму регистрации, //иначе выводим сообщение о том, что он уже зарегистрирован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?> </p><p> <?php }else{ ?> </p><h2>Вы уже зарегистрированы</h2><p> <?php } //Подключение подвала require_once("footer.php"); ?> </p><p>В браузере, страница с формой регистрации выглядит так:</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/forma-registracii.jpg' width="100%" loading=lazy></p> <p>С помощью <b>атрибута required </b>, мы сделали все поля обязательными к заполнению.</p> <p>Обратите внимание на код формы регистрации где <b>выводится капча </b>:</p><p> <img src='https://i2.wp.com/captcha.php' loading=lazy> <br></p><p>Мы в значение <a href="/the-device/krasivye-freimy-ponyatie-freima-v-html-ukazyvaem-put-v-atribute-src-elementa/">атрибута src</a> для изображения, указали путь к файлу <i>captcha.php </i>, который генерирует данную капчу.</p> <p>Посмотрим на код файла <i>captcha.php </i>:</p><p> <?php session_start(); // Генерируем случайное число. $rand = mt_rand(1000, 9999); // Сохраняем значение переменной $rand (капчи) в сессию $_SESSION["rand"] = $rand; //создаём новое черно-белое изображение $im = imageCreateTrueColor(90,50); // Указываем белый цвет для текста $c = imageColorAllocate($im, 255, 255, 255); // Записываем полученное случайное число на изображение imageTtfText($im, 20, -10, 10, 30, $c, __DIR__."fonts/verdana.ttf", $rand); header("Content-type: image/png"); // Выводим изображение imagePng($im); //Освобождаем ресурсы imageDestroy($im); ?> </p><p>Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.</p> <p>Внутри функции <i>imageTtfText() </i>, указан путь к шрифту <i>verdana.ttf </i>. Так вот для корректной работы капчи, мы должны создать папку <i>fonts </i>, и поместить туда файл шрифта <i>verdana.ttf </i>. Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи .</p> <p>С HTML структурой мы закончили, пора двигаться дальше.</p> <h2>Проверка email на валидность с помощью jQuery</h2> <p>Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента (с помощью JavaScript, jQuery), так и на стороне сервера.</p> <p>Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.</p> <p>Для <a href="/general-information/1s-skd-vychislyaemye-polya-vyrazhenie-funkcii-yazyka-vyrazhenii/">данного поля</a> input, мы задали тип email (type="email"), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута <i>type </i> с <i>email </i> на <i>text </i>, и всё, наша проверка будет уже недействительна.</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/tip-polya-email.jpg' width="100%" loading=lazy></p> <p>И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.</p> <p>Для подключения библиотеки jQuery, в файле <i>header.php </i>между тегами <i><head></head> </i>, перед закрывающего тега <i></head> </i>, добавляем эту строчку:</p> <p>Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.</p> <p>С помощью данного скрипта, мы проверяем введённого почтового адреса на валидность. Если пользователь ввёл неправильный Email, то мы выводим ему ошибку об этом и дезактивируем кнопку отправки формы. Если всё хорошо, то мы убираем ошибку и активируем кнопку отправки формы.</p> <p>И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.</p> <h2>Регистрация пользователя</h2> <p>Форму мы отправляем на обработку файлу <i>register.php </i>, через метод POST. Название <a href="/bluetooth-setup/kak-sohranit-bd-iz-phpmyadmin-na-kompyuter-sohranenie-i-izvlechenie/">данного файла</a> обработчика, указано в значение атрибута <i>action </i>. А метод отправки указано в значение атрибута <i>method </i>.</p> <p>Открываем этот файл <i>register.php </i> и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл <i>dbconnect.php </i> (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки <i>error_messages </i> и <i>success_messages </i> в глобальном массиве сессии. В <i>error_mesages </i> будем записывать все сообщения об ошибках возникающие при обработке формы, а в <i>succes_messages </i>, будем записывать радостные сообщения.</p><p> <?php //Запускаем сессию session_start(); //Добавляем файл подключения к БД require_once("dbconnect.php"); //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы. $_SESSION["error_messages"] = ""; //Объявляем ячейку для добавления успешных сообщений $_SESSION["success_messages"] = ""; ?> </p><p>Перед тем как продолжить, мы должны проверить, <b>была ли вообще отправлена форма </b>. Злоумышленник, может посмотреть на значение атрибута <i>action </i> из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в <a href="/solving-problems/facebook-vhod-na-russkom-feisbuk-moya-stranica-vsegda-so-mnoi-adresnaya-i/">адресной строке</a> браузера такой адрес: <i>http://арес_сайта/register.php </i></p> <p>Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.</p> <p>Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле <i>dbconnect.php </i>.</p><p> <?php /* Проверяем была ли отправлена форма, то есть была ли нажата кнопка зарегистрироваться. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую. */ if(isset($_POST["btn_submit_register"]) && !empty($_POST["btn_submit_register"])){ // (1) Место для следующего куска кода }else{ exit("<p><strong>Ошибка!</strong> главную страницу .</p>"); } ?> </p> <p>Значение капчи в сессии было добавлено при её генерации, в файле <i>captcha.php </i>. Для напоминания покажу ещё раз этот кусок кода из файла <i>captcha.php </i>, где добавляется значение капчи в сессию:</p><p> <?php session_start(); // Генерируем случайное число. $rand = mt_rand(1000, 9999); // Сохраняем значение переменной $rand (капчи) в сессию $_SESSION["rand"] = $rand; ?> </p><p>Теперь приступим к самой проверке. В файле <i>register.php </i>, внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий "<i> // (1) Место для следующего куска кода </i>" пишем:</p><p> //Проверяем полученную капчу //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (2) Место для следующего куска кода }else{ //Если капча не передана либо оно является пустой exit("<p><strong>Ошибка!</strong> Отсутствует проверечный код, то есть код капчи. Вы можете перейти на главную страницу .</p>"); } </p><p>Далее, нам нужно обрабатывать полученные данные, из массива POST. Первым делом, нам нужно проверить содержимое глобального массива POST, то есть находится ли там ячейки, имена которых соответствуют именам полей input из нашей формы.</p> <p>Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.</p> <p>Далее, после того как обрезали пробелы, добавляем строку в переменную и проверяем эту переменную на пустоту, если она не является пустой, то идём дальше, иначе перенаправляем пользователя обратно на страницу с формой регистрации.</p> <p>Этот код вставляем в указанное место "<i>// (2) Место для следующего куска кода </i>".</p><p> /* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/ if(isset($_POST["first_name"])){ //Обрезаем пробелы с начала и с конца строки $first_name = trim($_POST["first_name"]); //Проверяем переменную на пустоту if(!empty($first_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $first_name = htmlspecialchars($first_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваше имя</p><p class="mesage_error">Отсутствует поле с именем</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["last_name"])){ //Обрезаем пробелы с начала и с конца строки $last_name = trim($_POST["last_name"]); if(!empty($last_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $last_name = htmlspecialchars($last_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Вашу фамилию</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Отсутствует поле с фамилией</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["email"])){ //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); // (3) Место кода для проверки формата почтового адреса и его уникальности }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваш email</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error"></p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем папроль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваш пароль</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error"></p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (4) Место для кода добавления пользователя в БД </p><p>Особенную важность имеет поле <i>email </i>. Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же <a href="/the-types-of-wireless-networks/mailchimp-kak-ubrat-pochtovyi-adres-iz-podvala-sekrety-mailchimp/">почтовым адресом</a>.</p> <p>В указанном месте "<i>// (3) Место кода для проверки формата почтового адреса и его уникальности </i>" добавляем следующий код:</p><p> //Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Вы ввели неправельный email</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } //Проверяем нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ //Если полученный результат не равен false if(($row = $result_query->fetch_assoc()) != false){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Пользователь с таким почтовым адресом уже зарегистрирован</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка в запросе к БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); } /* закрытие выборки */ $result_query->close(); //Останавливаем скрипт exit(); } /* закрытие выборки */ $result_query->close(); </p><p>И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " <i>// (4) Место для кода добавления пользователя в БД </i>" добавляем следующий код:</p><p> //Запрос на добавления пользователя в БД $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name."", "".$email."", "".$password."")"); if(!$result_query_insert){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка запроса на добавления пользователя в БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); }else{ $_SESSION["success_messages"] = "<p class="success_message">Регистрация прошла успешно!!! <br />Теперь Вы можете авторизоваться используя Ваш логин и пароль.</p>"; //Отправляем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); } /* Завершение запроса */ $result_query_insert->close(); //Закрываем подключение к БД $mysqli->close(); </p><p>Если в запросе на добавления пользователя в БД произошла ошибка, мы добавляем сообщение об этой ошибке в сессию и возвращаем пользователя на страницу регистрации.</p> <p>Иначе, если все прошло хорошо, в сессию мы также добавляем сообщение, но уже более приятна, а именно говорим пользователю что регистрация прошла успешно. И перенаправляем его уже на страницу с формой авторизации.</p> <h2></h2> <p>Скрипт для проверки формата почтового адреса и длины пароля находится в файле <i>header.php </i>, поэтому он будет действовать и на поля из этой формы.</p> <p>Запуск сессии также происходит в файле <i>header.php </i>, поэтому в файле <i>form_auth.php </i> сессию запускать не нужно, потому что получим ошибку.</p> <p> <?php //Подключение шапки require_once("header.php"); ?> </p><p> <?php if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["error_messages"]); } if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["success_messages"]); } ?></p><p> <?php //Проверяем, если пользователь не авторизован, то выводим форму авторизации, //иначе выводим сообщение о том, что он уже авторизован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?> </p> <p> <br><img src='https://i0.wp.com/sozdatisite.ru/images/img-articles/forma-avtorizacii.jpg' width="100%" loading=lazy></p> <p>Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка <i>войти </i> станет не активной.</p> <p> <img src='https://i2.wp.com/sozdatisite.ru/images/img-articles/proverka-formy-avtorizacii.jpg' height="356" width="358" loading=lazy></p> <p>После устранения ошибок кнопка <i>войти </i> становится активной, и пользователь сможет отправить форму на сервер, где она будет обрабатываться.</p> <h2>Авторизация пользователя</h2> <p>В значение атрибута <i>action </i> у форы авторизации указан файл <i>auth.php </i>, это значит, что форма будет обрабатываться именно в этом файле.</p> <p>И так, открываем файл <i>auth.php </i> и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл <i>dbconnect.php </i> для соединения с БД.</p><p> <?php //Запускаем сессию session_start(); //Добавляем файл подключения к БД require_once("dbconnect.php"); </p><p> //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы. $_SESSION["error_messages"] = ""; //Объявляем ячейку для добавления успешных сообщений $_SESSION["success_messages"] = ""; </p><p> /* Проверяем была ли отправлена форма, то есть была ли нажата кнопка Войти. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"])){ //(1) Место для следующего куска кода }else{ exit("<p><strong>Ошибка!</strong> Вы зашли на эту страницу напрямую, поэтому нет данных для обработки. Вы можете перейти на главную страницу .</p>"); } </p><p> //Проверяем полученную капчу if(isset($_POST["captcha"])){ //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(!empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу авторизации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Поле для ввода капчи не должна быть пустой. </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(2) Место для обработки почтового адреса //(3) Место для обработки пароля //(4) Место для составления запроса к БД }else{ //Если капча не передана exit("<p><strong>Ошибка!</strong> Отсутствует проверочный код, то есть код капчи. Вы можете перейти на главную страницу .</p>"); } </p><p>Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.</p> <h3>Проверка почтового адреса</h3> <p> //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(isset($_POST["email"])){ if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); //Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Вы ввели неправильный email</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Поле для ввода почтового адреса(email) не должна быть пустой.</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Отсутствует поле для ввода Email</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(3) Место для обработки пароля </p><p>Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.</p> <h3>Проверка пароля</h3> <p>Следующее поле для обработки, это поле с паролем. В указанное место "<i>//(3) Место для обработки пароля </i>", пишем:</p><p>If(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем пароль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Укажите Ваш пароль</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Отсутствует поле для ввода пароля</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } </p><p>Здесь мы с помощью функции md5() шифруем полученный пароль, так как в БД пароли у нас находятся именно в зашифрованном виде. Дополнительное секретное слово в шифровании, в нашем случае "<i>top_secret </i>" должна быть та которая использовалась и при регистрации пользователя.</p> <p>Теперь необходимо сделать запрос к БД на выборке пользователя у которого почтовый адрес равен полученному почтовому адресу и пароль равен полученному паролю.</p><p> //Запрос в БД на выборке пользователя. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка запроса на выборке пользователя из БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); }else{ //Проверяем, если в базе нет пользователя с такими данными, то выводим сообщение об ошибке if($result_query_select->num_rows == 1){ // Если введенные данные совпадают с данными из базы, то сохраняем логин и пароль в массив сессий. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Возвращаем пользователя на главную страницу header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/index.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Неправильный логин и/или пароль</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } } </p><h2>Выход с сайта</h2> <p>И последнее что мы реализуем, это <b>процедура выхода с сайта </b>. На данный момент в шапке у нас выводятся ссылки на страницу авторизации и на страницу регистрации.</p> <p>В шапке сайта (файл <i>header.php </i>), с помощью сессии мы проверяем, авторизован ли уже пользователь. Если нет, то выводим ссылки регистрации и авторизации, в противном случае (если он авторизован) то вместо ссылок регистрации и авторизации выводим ссылку <i>Выход </i>.</p> <p>Модифицированный кусок кода из файла <i>header.php </i>:</p> <p> Регистрация</p> <p> Выход</p><p> <?php } ?></p> <p>При нажатии на ссылку выхода с сайта, мы попадаем в файл <i>logout.php </i>, где просто уничтожаем ячейки с почтовым адресом и паролем из сессии. После этого возвращаем пользователя обратно на ту страницу, на которой была нажата ссылка <i>выход </i>.</p> <p>Код файла <i>logout.php: </i></p><p> <?php //Запускаем сессию session_start(); unset($_SESSION["email"]); unset($_SESSION["password"]); // Возвращаем пользователя на ту страницу, на которой он нажал на кнопку выход. header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$_SERVER["HTTP_REFERER"]); ?> </p><p>На этом всё. Теперь Вы знаете как <b>реализовать и обрабатывать формы регистрации и авторизации </b> пользователя на своём сайте. Эти формы встречаются почти на каждом сайте, поэтому каждый программист должен знать, как их создавать.</p> <p>Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery) так и на стороне сервера (с помощью языка PHP). Также мы научились <b>реализовать процедуру выхода с сайта </b>.</p> <p>Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке .</p> <p>В будущем я напишу статью где опишу . И ещё планирую написать статью где объясню, (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.</p> <p>При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.</p><p>План урока (Часть 5): </p><ol><li>Создаем HTML структуру для формы авторизации</li> <li>Обрабатываем полученные данные</li> <li>Выводим приветствие пользователя в шапку сайта</li> </ol><h3>Понравилась статья?</h3> <p>Online Signup and registration forms, are important aspects of almost every web design. If your website needs active contribution from the visitors, then you should have provisions so that they can register or signup to open an account with your site. Users register with a site to download files or post articles, to purchase something & son depending on the theme of a site. The registration forms, are pretty elaborate, asking for a wide range of personal and contact details from the users- like age, name, gender, job, brief biography and so on. But the most important aspect of all HTML5 Signup & Registration Forms are name, username, password, gender and account creation button.</p><h2>XtraForm – Bootstrap 3 Xtra Animated Form HTML5 Format</h2> <p>This bootstrap registration form template is coded based on jQuery mobile JavaScript which makes it compatible across many platforms and also make it very customizable. The html5 form template is available for free download here.</p> <h2>Multi-Step Signup Form With CSS3 and jQuery</h2> <p>This kind of registration form in html with CSS3 helps in sectioning of various parts of a long sign up form, thus making it easy to maintain records whereas jQuery ensures that these forms can work on a wide number of platforms. Download the sign up page template from here to build a form for your own site today.</p> <h2>Authentix – Ready to Integrate User System HTML Format</h2> <p>This kind of html5 form template is created by simple PHP script for signing up, logging in or authenticating users. This kind of login and registration form templates can also provide the feature of secure sessions. Download one from here to implement one of these in your own site.</p> <p>This kind of registration form template uses CSS for registration form and is very helpful in creating sign up forms meant for the android platform. This kind of html registration form template is available <a href="/wi-fi/tatarskaya-klaviatura-dlya-android-download-tatarskaya-klaviatura-for/">for download</a> below.</p> <h2>Codepen Sign Up Form in HTML Format Download</h2> <p>With its revamped fresh design and very simple interface, this kind of html5 form templates have been carefully optimized for creating new user registration forms. With its utility in various fields, these signup form templates are really handy and can be downloaded right from the link below.</p> <h2>Formplexy – CSS Forms with Validation & WP Support HTML Format</h2> <p>This kind of html registration form is very neat and customizable for any developer. It is extremely fast due to CSS form with jQuery. It also has WordPress support, social buttons and an option of forgotten password handling. Download the form from here to use it in your own site.</p> <h2>Download Login & Registration Form with HTML5</h2> <p>This kind of registration form template is used for login and signup due to the fact that it is very simple and uses very simple coding. This kind of html5 form templates find a wide number of uses due to their light structure and can be downloaded right from here.</p> <h2>Tab Login & Sign Up Forms HTML Download</h2> <p>This kind of signup form templates are widely used due to their tab oriented look which is very helpful in categorizing thing. This type of html5 form templates can be downloaded here to be used for long sign up forms with many fields for taking information.</p> <h2>Signup Form Flat Template Download</h2> <p>With its minimalistic look , this kind of registration form template is widely used due to their simple and clean look and due to the fact that this kind of html5 signup template can work on many platforms. You can get one of these forms here for download.</p> <h2>Flat Look HTML5 & CSS3 Signup Form Template Free Download</h2> <p>Equipped with the simplicity and cleanliness of an html5 coding coupled up with the security of a CSS3 signup security with jQuery, this kind of signup form template is one of the best options you can find for your site. Want to know how will it look for your site? Just quickly download it from the link below to check it out.</p> <h3>How to Create Registration Page?</h3> <p>A registration page on a website consists of registration form that lets website users to get registered with the website and get access to applicable facilities, services or products. A registration page is considered to be the most important aspect of a website as it gives you a way to be more interactive with your users. For creating a registration page, first you just need to add a new page through your CMS and then add the and registration form to it. You can find a large number of registration form templates online for easy and quick installation on to your page.</p><h2>Awesome Design HTML5 and CSS3 Login & Sign Up Forms</h2> <p>This HTML5 and CSS3 login and signup form comes with an awesome design with perfectly sectioned fields. The form is handy and easy to install. Just download the form and you can customize it as per your preferences.</p> <h2>Simple, Highly Functional and Effective HTML5 Register Form</h2> <p>Need a sign-up form created for a newsletter registration? This super cool sign form template comes with an amazing blurred background style that can complement any of your website design type. Get downloaded and add to your registration page.</p> <h2>HTML5 & CSS3 Register Login Responsive Template Example</h2> <p>Here is another wonderful HTML5 and CSS3 registration and login form ideal to meet registration form requirement of your website belonging to any niche. Comes with an eye-catchy design and superior functionality to offer a secure registration environment.</p><h3>How to Make Signup / Registration Forms?</h3> <p>Whether you are a professional web designer or a website owner who is looking to create a registration form for website, it takes almost equal efforts for all to get an elegant and professional sign up form added to the website. You can explore a large selection of responsive and eye-catchy online that you can hardly create yourself. The best part with these templates is that along with their standard use, you can customize the fields, size as well as color of the form elements quite easily in minutes. Whether you need a student registration form, ecommerce registration form, event registration form or more, you can find template forms for all kinds of your sign-up form needs. There are numerous such registration and login templates that offer you a secure, effortless and elegant forms to be added to your websites. You just need to get these downloaded in a few clicks and do minor customizations is necessary.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </div> </div> <div class="right -is-sticky"> <div class="articles-conseilles"> </div> </div> </div> <div class="a-decouvrir"> <h3>Рекомендуем почитать</h3> <div class="featured"> <div class="view view-articles view-id-articles view-display-id-block_4 view-dom-id-169dc93f512a102548b755435ccd1346"> <div class="view-content"> <div class="row"> <article class="preview-article"> <header class="preview-article__header"> <a href="/solving-problems/kak-nastroit-gromkost-zvuka-na-noutbuke-propal-zvuk-na/"> <figure class=""> <img src="https://i0.wp.com/sovets.net/photos/uploads/120/8110495-2razrabotanyi-spetsialnyie-programmyi-kotoryie-testiruyut-audio-drayveryi-soundcheck.jpg" alt="Пропал звук на ноутбуке — что делать?" loading=lazy> </figure> </a> </header> <div class="preview-article__content"> <div class="views-field views-field-title"> <span class="field-content"><a href="/solving-problems/kak-nastroit-gromkost-zvuka-na-noutbuke-propal-zvuk-na/">Пропал звук на ноутбуке — что делать?</a></span> </div> <div class="views-field views-field-body"> <div class="field-content"> <p> Каждый современный человек владеет ноутбуком, но как самому убрать возникающие... </p> </div> </div> <div class="views-field views-field-field-article-categorie"> <div class="field-content"> <span class="preview-article__category se-soigner"> </span> </div> </div> </div> </article> <article class="preview-article"> <header class="preview-article__header"> <a href="/the-device/boty-treidery-v-ks-go-obmen-igrovyh-veshchei-s-pomoshchyu-cs-money-sovety/"> <figure class=""> <img src="https://i1.wp.com/miped.ru/uploads/posts/2017-02/thumbs/1487091265_screenshot_7.png" alt="Обмен игровых вещей с помощью CS money — Советы по работе с Cisco" loading=lazy> </figure> </a> </header> <div class="preview-article__content"> <div class="views-field views-field-title"> <span class="field-content"><a href="/the-device/boty-treidery-v-ks-go-obmen-igrovyh-veshchei-s-pomoshchyu-cs-money-sovety/">Обмен игровых вещей с помощью CS money — Советы по работе с Cisco</a></span> </div> <div class="views-field views-field-body"> <div class="field-content"> <p> На сегодняшний день ценность внутриигровых вещей в Counter-Strike: Global... </p> </div> </div> <div class="views-field views-field-field-article-categorie"> <div class="field-content"> <span class="preview-article__category se-soigner"> </span> </div> </div> </div> </article> <article class="preview-article"> <header class="preview-article__header"> <a href="/solving-problems/kak-ustanovit-vremya-na-nokia-3310-kak-ustanovit-datu-i-vremya-na-nokia/"> <figure class=""> <img src="https://i0.wp.com/mobile-review.com/review/image/nokia/3310-2017/pic/03.jpg" alt="Как установить дату и время на Nokia" loading=lazy> </figure> </a> </header> <div class="preview-article__content"> <div class="views-field views-field-title"> <span class="field-content"><a href="/solving-problems/kak-ustanovit-vremya-na-nokia-3310-kak-ustanovit-datu-i-vremya-na-nokia/">Как установить дату и время на Nokia</a></span> </div> <div class="views-field views-field-body"> <div class="field-content"> <p> Статьи и ЛайфхакиВопрос о том, как установить дату и время на Nokia , волнует... </p> </div> </div> <div class="views-field views-field-field-article-categorie"> <div class="field-content"> <span class="preview-article__category se-soigner"> </span> </div> </div> </div> </article> </div> </div> </div> </div> </div> </div> <a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-menu" tabindex="-1">Наверх</a> </div> </section> <div class="region region-bottom"> <div class="block block-block first last odd" id="block-block-7"> <ul> <li><a href="/category/bluetooth/">Bluetooth</a></li> <li><a href="/category/additionally/">Дополнительно</a></li> <li><a href="/category/equipment/">Оборудование</a></li> <li><a href="/category/security/">Безопасность</a></li> <li><a href="/category/the-device/">Устройства</a></li> <li><a href="/category/solving-problems/">Решение проблем</a></li> </ul> <p><a href="/" id="choosit"><img alt="" height="13" src="/sites/all/themes/lanutrition/img/logo-choosit.svg" width="50" / loading=lazy></a></p> </div> </div> <div class="search-modal" id="search-modal"><button class="close-button" id="close-search" aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button> <div class="search-modal__content"> <div class="block block-search first odd" role="search" id="block-search-form"> <form class="search-form" role="search" action="/" method="get" id="search-block-form" accept-charset="UTF-8"> <div> <div class="container-inline"> <h2 class="element-invisible">Поиск по сайту</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <input title="" class="custom-search-box form-text" placeholder="введите слово" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Rechercher" class="form-submit" /></div> </div> </div> </form> </div> </div> </div> </body> </html>