Создаем невероятную простую систему регистрации на PHP и MySQL. Создание и проверка форм Юродивый registration form php
In this lesson, we learn how to create user account registration form with PHP validation rules, upload profile avatar image and insert user data in MySQL database. We will then retrieve the information from the database and display it on the user profile welcome page. Here is what the welcome page is going to look like:
Setting up Form CSS and HTML
First, go ahead and copy the HTML source from below codepen and place the code in a file called form.php. Also create another file named form.css in the same directory and copy and paste all of the CSS code from the codepen below into it:
Once you"ve saved form.php and form.css, you may go ahead and run form.php to see what the form looks like. It should look exactly the same as the one showing in the "Result" tab from the codepen above.
Creating the Database and Table
Before we start adding PHP code to our form, let"s go ahead and create the database with a table which will store our registered users information in it. Below in the SQL script to create the database "accounts" and table "users":
CREATE DATABASE accounts; CREATE TABLE `accounts`.`users` (`id` INT NOT NULL AUTO_INCREMENT, `username` VARCHAR(100) NOT NULL, `email` VARCHAR(100) NOT NULL, `password` VARCHAR(100) NOT NULL, `avatar` VARCHAR(100) NOT NULL, PRIMARY KEY (`id`));
Below is a complete code with error checking for connecting to MySQL database and running above SQL statements to create the database and users table:
//connection variables $host = "localhost"; $user = "root"; $password = "mypass123"; //create mysql connection $mysqli = new mysqli($host,$user,$password); if ($mysqli->connect_errno) { printf("Connection failed: %s\n", $mysqli->connect_error); die(); } //create the database if (!$mysqli->query("CREATE DATABASE accounts2")) { printf("Errormessage: %s\n", $mysqli->error); } //create users table with all the fields $mysqli->query(" CREATE TABLE `accounts2`.`users` (`id` INT NOT NULL AUTO_INCREMENT, `username` VARCHAR(100) NOT NULL, `email` VARCHAR(100) NOT NULL, `password` VARCHAR(100) NOT NULL, `avatar` VARCHAR(100) NOT NULL, PRIMARY KEY (`id`));") or die($mysqli->error);
With our HTML, CSS and the database table in place, we"re now reading to start working on our form. The first step is to create a place for error messages to show up and then we"ll start writing some form validation.
Starting New Session for Error Messages
Open up the form.php and add the following lines to it at the very top, make sure to use the php opening and closing tags (I have not included the html part of form.php to keep things clean).
We have created new session because we"re going to need to access $_SESSION["message"] on the "welcome.php" page after user successfully registers. MySQL connection has also been created right away, so we can work with the database later on.
We also need to print out $_SESSION["message"] on the current page. From the beginning the message is set to "" (empty string) which is what we want, so nothing will be printed at this point. Let"s go ahead and add the message inside the proper DIV tag:
Creating Validation Rules
This form already comes with some validation rules, the keyword "required" inside the HTML input tags, is checking to make sure the field is not empty, so we don"t have to worry about empty fields. Also, by setting input type to "email and "password", HTML5 validates the form for proper email and password formatting, so we don"t need to create any rules for those fields either.
However, we still need to write some validation rules, to make sure the passwords are matching, the avatar file is in fact an image and make sure the user has been added to our database.
Let"s create another file and call it validate.php to keep things well organized. We"ll also include this file from our form.php.
The first thing we"re going to do inside validate.php is to make sure the form is being submitted.
/* validate.php */ //the form has been submitted with post method if ($_SERVER["REQUEST_METHOD"] == "POST") { }
Then we"ll check if the password and confirm password are equal to each other
if ($_SERVER["REQUEST_METHOD"] == "POST") { //check if two passwords are equal to each other if ($_POST["password"] == $_POST["confirmpassword"]) { } }
Working with Super Global Variables
Note how we used super global variables $_SERVER and $_POST to get the information we needed. The keys names inside the $_POST variable is available because we used method="post" to submit our form.
In this tutorial, you will learn-
When and why we are using forms?
- Forms come in handy when developing flexible and dynamic applications that accept user input.
- Forms can be used to edit already existing data from the database
Create a form
We will use HTML tags to create a form. Below is the minimal list of things you need to create a form.
- Opening and closing form tags
… - Form submission type POST or GET
- Submission URL that will process the submitted data
- Input fields such as input boxes, text areas, buttons,checkboxes etc.
The code below creates a simple registration form
Registration Form
Last name:
Viewing the above code in a web browser displays the following form.
… are the opening and closing form tags- action="registration_form.php" method="POST"> specifies the destination URL and the submission type.
- First/Last name: are labels for the input boxes
- are input box tags
is the new line tag- is a hidden value that is used to check whether the form has been submitted or not
- is the button that when clicked submits the form to the server for processing
Submitting the form data to the server
The action attribute of the form specifies the submission URL that processes the data. The method attribute specifies the submission type.
PHP POST method
- This is the built in PHP super global array variable that is used to get values submitted via HTTP POST method.
- This method is ideal when you do not want to display the form post values in the URL.
- A good example of using post method is when submitting login details to the server.
It has the following syntax.
- “$_POST[…]” is the PHP array
PHP GET method
- This is the built in PHP super global array variable that is used to get values submitted via HTTP GET method.
- The array variable can be accessed from any script in the program; it has a global scope.
- This method displays the form values in the URL.
- It’s ideal for search engine forms as it allows the users to book mark the results.
It has the following syntax.
- “$_GET[…]” is the PHP array
- “"variable_name"” is the URL variable name.
GET vs POST Methods
POST | GET |
---|---|
Values not visible in the URL | Values visible in the URL |
Has not limitation of the length of the values since they are submitted via the body of HTTP | Has limitation on the length of the values usually 255 characters. This is because the values are displayed in the URL. Note the upper limit of the characters is dependent on the browser. |
Has lower performance compared to Php_GET method due to time spent encapsulation the Php_POST values in the HTTP body | Has high performance compared to POST method dues to the simple nature of appending the values in the URL. |
Supports many different data types such as string, numeric, binary etc. | Supports only string data types because the values are displayed in the URL |
Results cannot be book marked | Results can be book marked due to the visibility of the values in the URL |
The below diagram shows the difference between get and post
Processing the registration form data
The registration form submits data to itself as specified in the action attribute of the form.
When a form has been submitted, the values are populated in the $_POST super global array.
We will use the PHP isset function to check if the form values have been filled in the $_POST array and process the data.
We will modify the registration form to include the PHP code that processes the data. Below is the modified code
Thank You
You have been registered as
Go back to the form
Registration Form
Last name:
- checks if the form_submitted hidden field has been filled in the $_POST array and display a thank you and first name message.
If the form_fobmitted field hasn’t been filled in the $_POST array, the form is displayed.
More examples
Simple search engine
We will design a simple search engine that uses the PHP_GET method as the form submission type.
For simplicity’s sake, we will use a PHP If statement to determine the output.
We will use the same HTML code for the registration form above and make minimal modifications to it.
Search Results For
The GET method displays its values in the URL
Sorry, no matches found for your search term
Go back to the form
Simple Search Engine - Type in GET
View the above page in a web browser
The following form will be shown
Type GET in upper case letter then click on submit button.
The following will be shown
The diagram below shows the URL for the above results
Note the URL has displayed the value of search_term and form_submitted. Try to enter anything different from GET then click on submit button and see what results you will get.
Working with check boxes, radio buttons
If the user does not select a check box or radio button, no value is submitted, if the user selects a check box or radio button, the value one (1) or true is submitted.
We will modify the registration form code and include a check button that allows the user to agree to the terms of service.
You have not accepted our terms of service
Thank You
You have been registered as
Go back to the form
Registration Form
Last name:
Agree to Terms of Service:
View the above form in a browser