Online Twitter You can see the page work with a clean and simple design. Look at the top right of the page, there you will see a button authorization to the system by clicking on which you will see shape to fill in the data. Today we will tell you how to make a similar effect on your own website. It's actually very simple. In addition, it will help you save space on the page and add a sense of comfort to your visitors. In this article, we will walk you through the steps of how this whole system works, and this guide will also be useful for those who wish to learn jQuery... Forward!
HTML code
First, you need to start with the HTML code. The HTML code is very simple - it contains the "a" tag, which goes along with the "fieldset" tag, through which the form is displayed.
Just copy this into your new page code:
Have an account? Sign in
CSS code
You will need to use CSS to define the login button and login form. The code below does exactly that function.
Just copy this code into your css file, or add it to the HTML code where you define the style. These codes identify the authorization button.
It would seem that the HTML and CSS codes are quite complex and convoluted, but in javascript everything is very simple. Just copy this javascript code, due to which it will be possible to display and hide the form at the moment of clicking on the authorization button, even if the click is made outside the login form.
According to the code above, when a visitor clicks on the authorization button, a new function is triggered. First, the login form (enclosed in the "filedset" tag) is displayed, then the link enclosed in the ".signin" class adds another "menu-open" class, which changes the background image.
Another event in this code is that when visitors click not on the login form, but somewhere on the page, the form closes itself. In other words, the "menu-open" class strips off the link with the ".signin" class and returns the original background image to it.
As for hints?
We usually recommend using jQuery plugin - tipsy... The content of the tooltip is what is written in the "title" attribute of the link. You can change the position of the tooltip relative to east, west, south or north. This is done through the "gravity" parameter specified in the code above. We provide you with a link to a site dedicated to this plugin, where you can study its capabilities in more detail and download the plugin. ...
Finally
If you've copied all the code from this article, please don't change the folder structure. If you change it, the code will not work. This code is just an example of creating dropdown login form using jQuery... Good luck with your practice!
In this tutorial, we will create a stylish login form on the site, you can find it in Futurico UI Pro, created by Vladimir Kudinov. We will be using CSS3 and jQuery to create the form.
Step 1 - HTML markup
Let's start by creating HTML markup. Let's create a form with four inputs (username, password, checkbox and "submit" button). We'll wrap the checkbox in a span tag that we'll use to style this checkbox. Next, we'll wrap the form and title in a DIV tag and assign the "login-form" class to it.
If you have any questions, we recommend using our forum to get an answer as soon as possible.
Responsive with the functions of login and registration forms, with the possibility of dynamic switching, without reloading the page. After the window appears, the user can easily switch from one to another, and, if necessary, select the option to change the password. Today we will look at how all this can be implemented using a bunch of small but very functional jQuery plugin and the new CSS3 standards.
This method will be useful if you want to make the login and registration forms available to users on every page of your site. When entering the site or registering, users will not be redirected to another page, and will be able to perform all the necessary actions "without leaving the checkout", all on one page.
The design of the appearance of pop-up forms is implemented using CSS3, the total weight of the plugin is not at all large, the response and loading of the modal window occurs practically without delays. 100% responsive layout, height and width of the modal with forms, are automatically set to fit the screen sizes of user devices.
We looked at an example, now let's take a look at all the main components of a modal window and forms in order to learn how to use them on our website. The pop-up window with login and registration forms is built on the popular javascript library, the jQuey plugin executable and the generated CSS styles. All these tools need to be connected to your site. The latest up-to-date version of the jQuey library can be connected directly from Google, the main.js plugin file itself and a ready-made set of generated styles, style.css, can be found in the archive. Javascript before the closing tag, the CSS styles can be copied and added to your site's stylesheet.css file.
HTML Structure:
The basic container of modal windows on a darkened background and built-in forms with controls are placed in the body of the page. For better understanding, I delimited the sectors and added comments. All design elements are tightly linked to CSS through specific classes, so redesigning forms to suit the overall design of your sites is easy.
<
div class
=
"cd-user-modal"
>
<
div class
=
"cd-user-modal-container"
>
<
ul class
=
"cd-switcher"
>
<
li><
a href=
"#0"
>entrance
<
li><
a href=
"#0"
>registration
<
div id=
"cd-login"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signin-email"
>E-mail
<
input class
=
id=
"signin-email"
type=
"email"
placeholder=
"Email"
>
<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signin-password"
>Password
<
input class
=
"full-width has-padding has-border" id = "signin-password" type = "text" placeholder = "(! LANG: Password"
>
!}<
a href=
"#0"
class
=
"hide-password"
>Hide
<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"remember-me"
checked>
<
label for
=
"remember-me"
>Remember me
<
p class
=
"fieldset"
>
<
input class
=
"full-width"
type=
"submit"
value=
"To come in"
>
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>Forgot your password?
<
div id=
"cd-signup"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-username"
for
=
"signup-username"
>Username
<
input class
=
"full-width has-padding has-border" id = "signup-username" type = "text" placeholder = "Username">
<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signup-email"
>E-mail
<
input class
=
"full-width has-padding has-border" id = "signup-email" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signup-password"
>Password
<
input class
=
"full-width has-padding has-border" id = "signup-password" type = "text" placeholder = "(! LANG: Password"
>
!}<
a href=
"#0"
class
=
"hide-password"
>Hide
<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"accept-terms"
>
<
label for
=
"accept-terms"
>I agree with<
a href=
"#0"
>Conditions
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"Create an account">
<
div id=
"cd-reset-password"
>
<
p class
=
"cd-form-message"
>Forgot your password? Please enter your email address. You will receive a link to create a new password.
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"reset-email"
>E-mail
<
input class
=
"full-width has-padding has-border" id = "reset-email" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>Here's the error message!
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"Restore password">
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>Back to entrance
<
a href=
"#0"
class
=
"cd-close-form"
>Close
entrance
registration
Forgot your password?
Forgot your password? Please enter your email address. You will receive a link to create a new password.
Back to entrance
Close
CSS Styles:
The basic template and form controls are designed in the popular Flat style, with a clear emphasis on minimalism. Nothing superfluous, moderately transparent shading background, easy-to-read colors, well-chosen font and icons to indicate input fields. With CSS properties, you can easily modify any form element.
In the fade transition effect, added a delay to make the modal fade out on close.
Note:. The default font size of all input fields is 16px. This prevents the automatic scaling that occurs when viewed on mobile devices.
The author's, bourgeois version of the plugin is located. In the same place, you can download the original. The Russian version, you can pick it up from my Yandex.Disk, all the necessary files are carefully packed into one archive, before that, do not forget to look at the fully adapted, live example of the work of this wonderful jQuery plugin:
With all respect, Andrew
In this article, you will learn how to create a registration and authorization form using HTML, JavaScript, PHP and MySql. Such forms are used on almost every site, regardless of its type. They are created both for the forum and for the online store and for social networks (such as, for example, Facebook, Twiter, Odnoklassniki) and for many other types of sites.
If you have a site on your local computer, then I hope you already have it. Nothing will work without it.
Creating a table in the Database
In order to implement user registration, first of all, we need a Database. If you already have it, then great, otherwise, you need to create it. In this article, I explain in detail how to do this.
And so, we have a Database (abbreviated as a database), now we need to create a table users in which we will add our registered users.
I also explained how to create a table in a database in the article. Before creating a table, we need to define what fields it will contain. These fields will correspond to the fields from the registration form.
So, we thought, imagined what fields our form will have and create a table users with fields like this:
id- Identifier. Field id every table from the database should have.
first_name- To save the name.
last_name- For saving surnames.
email- To save the postal address. We will use e-mail as a login, so this field must be unique, that is, it must have a UNIQUE index.
email_status- Field to indicate whether the mail is confirmed or not. If the mail is confirmed, it will have the value 1, otherwise the value 0. By default, this field will have the value 0.
password- To save the password.
All fields of type “VARCHAR” must have a default value of NULL.
If you want your registration form to have some more fields, you can add them here as well.
Everything, our table users ready. Let's move on to the next step.
Database Connection
We have created the database, now we need to connect to it. We will connect using PHP MySQLi extension.
In the folder of our site, create a file named dbconnect.php, and in it we write the following script:
DB connection error... Error description: ".mysqli_connect_error ()."
"; exit ();) // Set the connection encoding $ mysqli-> set_charset (" utf8 "); // For convenience, let's add a variable here that will contain the name of our site $ address_site =" http: //testsite.local " ;?>
This file dbconnect.php will need to be hooked up to form handlers.
Pay attention to the variable $ address_site, here I indicated the name of my test site that I will work on. You respectively, indicate the name of your site.
Site structure
Now let's take a look at the HTML structure of our site.
We will move the header and footer of the site into separate files, header.php and footer.php... We will include them on all pages. Namely, on the main (file index.php), to the page with the registration form (file form_register.php) and to the page with the authorization form (file form_auth.php).
Block with our links, registration and authorization, add to the site header so that they are displayed on all pages. One link will enter on registration form page(file form_register.php) and the other to the page with authorization form(file form_auth.php).
Content of header.php file:
Name of our site
As a result, the main page looks like this:
Of course, your site may have a completely different structure, but this is not important for us now. The main thing is that there are links (buttons) for registration and authorization.
Now let's move on to the registration form. As you already understood, we have it in the file form_register.php.
Go to the Database (in phpMyAdmin), open the table structure users and see what fields we need. This means that we need fields for entering a first and last name, a field for entering a postal address (Email) and a field for entering a password. And for security purposes, we will add a field for entering captcha.
On the server, as a result of processing the registration form, various errors may occur, due to which the user will not be able to register. Therefore, in order for the user to understand why the registration fails, it is necessary to display messages about these errors.
Before displaying the form, add a block to display error messages from the session.
And one more thing, if the user is already authorized, and for the sake of interest he enters the registration page directly by writing to the address bar of the browser site_address / form_register.php, then in this case, instead of the registration form, we will display a title to him stating that he has already been registered.
In general, the file code form_register.php we got it like this:
You are already registered
In the browser, the page with the registration form looks like this:
By using required attribute, we have made all fields required.
Pay attention to the registration form code where captcha is displayed:
We specified the path to the file in the value of the src attribute for the image captcha.php that generates this captcha.
Let's look at the file code captcha.php:
The code is well commented out, so I will focus on just one point.
Inside the function imageTtfText (), the path to the font is specified verdana.ttf... So for the captcha to work correctly, we must create a folder fonts, and put the font file there verdana.ttf... You can find it and download it from the Internet, or take it from the archive with the materials of this article.
We're done with the HTML structure, it's time to move on.
Checking email validity with jQuery
Any form needs to check the validity of the entered data, both on the client side (using JavaScript, jQuery) and on the server side.
We must pay special attention to the Email field. It is very important that the entered postal address is valid.
For this input field, we set the email type (type = "email"), this slightly warns us against incorrect formats. But, this is not enough, because through the code inspector that the browser provides us with, you can easily change the value of the attribute type with email on text and that's it, our check will no longer be valid.
And in that case, we need to make a more reliable check. For this, we will use the jQuery library from JavaScript.
To connect the jQuery library, in the file header.php between tags , before the closing tag , add this line:
Immediately after this line, add the email validation check code. Here we add a code for checking the length of the entered password. Its length must be at least 6 characters.
With the help of this script, we check the entered email address for validity. If the user entered an incorrect Email, then we display him an error about this and deactivate the button for submitting the form. If everything is good, then we remove the error and activate the button for submitting the form.
And so, we are done with validating the form on the client side. Now we can send it to the server, where we will also make a couple of checks and add the data to the database.
User registration
We send the form for processing to the file register.php, via the POST method. The name of this handler file, specified in the attribute value action... And the sending method is specified in the attribute value method.
Open this file register.php and the first thing we need to do is write a function for starting a session and connect the file we created earlier dbconnect.php(In this file, we made a connection to the database). And yet, let's immediately declare the cells error_messages and success_messages in the global array of the session. V error_mesages we will record all error messages that occur during the processing of the form, and in succes_messages, we will record joyful messages.
Before proceeding, we must check was the form submitted at all... An attacker could look at the value of an attribute action from the form, and find out which file is processing this form. And he may come up with the idea to go directly to this file by typing the following address in the address bar of the browser: http: //arees_site/register.php
Therefore, we need to check for the presence of a cell in the global POST array, the name of which matches the name of our "Register" button from the form. Thus, we check whether the "Register" button was clicked or not.
If an attacker tries to navigate directly to this file, he will receive an error message. Let me remind you that the $ address_site variable contains the name of the site and it was declared in the file dbconnect.php.
Error! home page.
");
}
?>
The value of the captcha in the session was added when it was generated, in the file captcha.php... As a reminder, I'll show you this piece of code from the file again. captcha.php, where the captcha value is added to the session:
Now let's proceed to the verification itself. In file register.php, inside the if block, where we check whether the "Register" button was clicked, or rather, where the comment is specified " // (1) Place for the next piece of code"we write:
// Check the resulting captcha // Trim the spaces from the beginning and the end of the line $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! empty ($ captcha)) (// Compare the received value with the value from the session. if (($ _ SESSION ["rand"]! = $ captcha) && ($ _SESSION ["rand"]! = "")) (// If the captcha is not correct, then we return the user to the registration page, and there we will display an error message that he entered the wrong captcha. $ error_message = "
Error! You entered the wrong captcha
"; // Save the error message to the session. $ _SESSION [" error_messages "] = $ error_message; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site . "/ form_register.php"); // Stop the script exit ();) // (2) Place for the next piece of code) else (// If captcha is not passed or it is empty exit ("
Error! There is no verification code, that is, the captcha code. You can go to the home page.
");
}
Next, we need to process the received data from the POST array. First of all, we need to check the contents of the global POST array, that is, are there cells whose names correspond to the names of the input fields from our form.
If the cell exists, then we trim the spaces from the beginning and from the end of the line from this cell, otherwise, we redirect the user back to the page with the registration form.
Further, after we trimmed the spaces, add a line to the variable and check this variable for emptiness, if it is not empty, then go ahead, otherwise we redirect the user back to the page with the registration form.
Paste this code at the specified location " // (2) Place for the next piece of code".
/ * Check if the global array $ _POST contains data sent from the form and enclose the submitted data in ordinary variables. * / If (isset ($ _ POST ["first_name"])) (// Trim the spaces from the beginning and from the end of the string $ first_name = trim ($ _ POST ["first_name"]); // Check the variable for emptiness if (! empty ($ first_name)) (// For safety, convert special characters to HTML entities $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Enter your name
Name field is missing
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) if ( isset ($ _ POST ["last_name"])) (// Trim spaces from the beginning and end of the string $ last_name = trim ($ _ POST ["last_name"]); if (! empty ($ last_name)) (// For security , convert special characters to HTML entities $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Enter your last name
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Last name field is missing
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) if ( isset ($ _ POST ["email"])) (// Trim spaces from the beginning and end of the line $ email = trim ($ _ POST ["email"]); if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Place of the code for checking the format of the email address and its uniqueness) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Enter your email
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = " "; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) if ( isset ($ _ POST ["password"])) (// Trim spaces from the beginning and end of the string $ password = trim ($ _ POST ["password"]); if (! empty ($ password)) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Encrypt the paprol $ password = md5 ($ password. "top_secret");) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Enter your password
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = " "; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) // (4) Place for the code for adding a user to the database
Of particular importance is the field email... We have to check the format of the received postal address and its uniqueness in the database. That is, is there any user already registered with the same mailing address?
At the specified location " // (3) Place of code to check the format of the postal address and its uniqueness"add the following code:
// Check the format of the received email address using the regular expression $ reg_email = "/^**@(+(*+)*\.)++/i"; // If the format of the received email address does not match the regular expression if (! Preg_match ($ reg_email, $ email)) (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
You entered an invalid email
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) // We check if there is already such an address in the database. $ Result_query = $ mysqli-> query ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // If the number of received rows are exactly one, so a user with this email address is already registered if ($ result_query-> num_rows == 1) (// If the result is not false if (($ row = $ result_query-> fetch_assoc ())! = false) (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
A user with this email address is already registered
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php ");) else (// Save the error message to the session . $ _SESSION ["error_messages"]. = "
Error in the database query
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php ");) / * close the selection * / $ result_query-> close (); // Stop the script exit ();) / * closing the selection * / $ result_query-> close ();
And so, we are done with all the checks, it's time to add the user to the database. At the specified location " // (4) Place for the code for adding a user to the database"add the following code:
// Request to add a user to the database $ 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) (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Failed to add a user to the database request
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();) else ( $ _SESSION ["success_messages"] = "
Registration completed successfully!!! Now you can log in using your username and password.
"; // Send the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php ");) / * Completing the request * / $ result_query_insert-> close (); // Close the database connection $ mysqli-> close ();
If an error occurs in the request to add a user to the database, we add a message about this error to the session and return the user to the registration page.
Otherwise, if everything went well, we also add a message to the session, but already more pleasant, namely, we tell the user that the registration was successful. And we redirect it to the page with the authorization form.
The script for checking the format of the email address and the length of the password is in the file header.php, so it will act on fields from this form as well.
The session is also started in the file header.php, so in the file form_auth.php you do not need to start the session, because we will get an error.
As I said, the script for checking the format of the email address and the length of the password also works here. Therefore, if the user enters an incorrect email address or a short password, he will immediately receive an error message. And the button to come in will become inactive.
After eliminating errors, the button to come in becomes active and the user will be able to submit the form to the server where it will be processed.
User authorization
To attribute value action the authorization handicap has a file auth.php, this means that the form will be processed in this file.
And so, open the file auth.php and write the code to process the authorization form. The first thing to do is start a session and connect the file dbconnect.php to connect to the database.
// Declare a cell to add errors that may occur while processing the form. $ _SESSION ["error_messages"] = ""; // Declare the cell for adding successful messages $ _SESSION ["success_messages"] = "";
/ * Check if the form was submitted, that is, if the Login button was clicked. If yes, then go ahead, if not, then display an error message to the user stating that he went to this page directly. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! empty ($ _ POST ["btn_submit_auth"])) (// (1) Space for the next piece of code) else (exit ("
Error! You have entered this page directly, so there is no data to process. You can go to the home page.
");
}
// Check the resulting captcha if (isset ($ _ POST ["captcha"])) (// Trim the spaces from the beginning and end of the line $ captcha = trim ($ _ POST ["captcha"]); if (! Empty ($ captcha )) (// Compare the received value with the value from the session. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = "")) (// If the captcha is not correct , then we return the user to the authorization page, and there we will display an error message that he entered the wrong captcha. $ error_message = "
Error! You entered the wrong captcha
"; // Save the error message to the session. $ _SESSION [" error_messages "] = $ error_message; // Return the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site . "/ form_auth.php"); // Stop the script exit ();)) else ($ error_message = "
Error! The field for entering captcha must not be empty.
"; // Save the error message to the session. $ _SESSION [" error_messages "] = $ error_message; // Return the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site . "/ form_auth.php"); // Stop the script exit ();) // (2) Place for processing the mail address // (3) Place for processing the password // (4) Place for making a query to the database) else (// If captcha is not passed exit ("
Error! The verification code is missing, that is, the captcha code. You can go to the home page.
");
}
If the user entered the verification code correctly, then go ahead, otherwise we return it to the authorization page.
Checking the postal address
// Trim the spaces from the beginning and end of the line $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Check the format of the received email address using the regular expression $ reg_email = " /^**@(+(*+)*\.)++/i "; // If the format of the received email address does not match the regular expression if (! preg_match ($ reg_email, $ email)) (// Save to the session error message. $ _SESSION ["error_messages"]. = "
You entered an incorrect email
"; // Return the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
The field for entering the postal address (email) should not be empty.
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_register.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Email field is missing
"; // Return the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();) // (3) Space for processing the password
If the user entered a postal address in an incorrect format or the value of the postal address field is empty, then we return it to the authorization page where we display a message about it.
Password check
The next field to be processed is the password field. To the specified location " // (3) A place to process the password", we write:
If (isset ($ _ POST ["password"])) (// Trim spaces from the beginning and end of the string $ password = trim ($ _ POST ["password"]); if (! Empty ($ password)) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Encrypt the password $ password = md5 ($ password. "top_secret");) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Enter your password
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();)) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
There is no field for entering a password
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();)
Here, using the md5 () function, we encrypt the received password, since in the database we have passwords in encrypted form. An additional secret word in encryption, in our case " top_secret"must be the one that was used when registering the user.
Now you need to make a query to the database on a sample of a user whose mailing address is equal to the received mailing address and the password is equal to the received password.
// Query in the database on the user's selection. $ result_query_select = $ mysqli-> query ("SELECT * FROM` users` WHERE email = "". $ email. "" AND password = "". $ password. "" "); if (! $ result_query_select) (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Request error on user fetch from database
"; // Return the user to the registration page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();) else ( // Check if there is no user with such data in the database, then display an error message if ($ result_query_select-> num_rows == 1) (// If the entered data match the data from the database, then save the login and password to the session array. $ _SESSION ["email"] = $ email; $ _SESSION ["password"] = $ password; // Return the user to the main page header ("HTTP / 1.1 301 Moved Permanently"); header ("Location:". $ Address_site . "/ index.php");) else (// Save the error message to the session. $ _SESSION ["error_messages"]. = "
Incorrect username and / or password
"; // Return the user to the authorization page header (" HTTP / 1.1 301 Moved Permanently "); header (" Location: ". $ Address_site." / Form_auth.php "); // Stop the script exit ();))
Log out from the site
And the last thing we do is procedure for leaving the site... At the moment, the header displays links to the authorization page and to the registration page.
In the site header (file header.php), using the session we check if the user is already logged in. If not, then we display the registration and authorization links, otherwise (if it is authorized) then instead of the registration and authorization links we display the link Output.
Modified piece of code from file header.php:
registration
Output
When you click on the exit link from the site, we get to the file logout.php, where we simply destroy the cells with the mailing address and password from the session. After that, we return the user back to the page on which the link was clicked output.
File code logout.php:
That's all. Now you know how implement and process registration and authorization forms user on your site. These forms are found on almost every site, so every programmer should know how to create them.
We also learned how to validate the input data, both on the client side (in the browser, using JavaScript, jQuery) and on the server side (using the PHP language). We also learned implement the procedure for leaving the site.
All scripts are tested and working. You can download the archive with the files of this small site at this link.
In the future I will write an article where I will describe. And I also plan to write an article where I will explain (without reloading the page). So, in order to be aware of the release of new articles, you can subscribe to my site.
If you have any questions, please, also, if you notice any error in the article, please let me know about it.
Lesson plan (Part 5):
Create HTML structure for the login form
We process the received data
We display the user's greeting in the site header
Did you like the article?
1. Plugin for creating online forms "jFormer"
Creation of contact forms: feedback, comments, login form, registration form with checking the correctness of the information entered.
2. Step by step registration form using jQuery
A neat form with step-by-step filling. Below is a form fill indicator.
3. Step by step form
Filling out the form in several steps and checking the correctness of the filling.
4. Contact form for the site
Validation of the correctness of the input of information is carried out "on the fly" before sending the message using javascript.
5. Animated switching between forms using jQuery
Animated jQuery toggle between login, registration, and password recovery fields. On the demo page, click on the yellow link to see the effect.
6. PHP checkout form
A similar solution can be used to give a visitor the ability to quickly contact the site owner from any page. On the demo page, click on the down arrow to move the form out.
7. PHP registration form using jQuery and CSS3
Form with verification of the correctness of the information entered.
8. PHP Facebook-style registration form
Nice registration form implemented with CSS, PHP and jQuery.
9. jQuery "SheepIt" Contact Form
The ability to add new fields before sending a message has been implemented.
10. Contact form "Fancy AJAX Contact Form"
Nice neat PHP feedback form with validation of information entered. Technologies: CSS, PHP, jQuery.
11. System of authorization / registration on the site
12. Data submission form
Checking the correctness of the filling.
13. jQuery "Contactable" plugin
To implement a checkout form to quickly send a message.
The download will start now ... Don't forget to share material on social networks with your colleagues
entrance
