In this lesson, we learn how to create user account registration size with PHP.. validation rules, upload profile avatar image & insert user data in MySquốc lộ database. We will then retrieve the information from the database & display it on the user profile welcome page. Here is what the welcome page is going lớn look like:Download this lesson"s avatars, HTML, CSS, PHPhường. and full SQL source code at Clever Techie Patreon page
First, go ahead and copy the HTML source from below codepen and place the code in a tệp tin called size.php. Also create another file named form.css in the same directory and copy & paste all of the CSS code from the codepen below into it:See the Pen Account Registration Form (battle.net) by Clever Techie (
obatambeienwasirherbal.com) on CodePen.
Bạn đang xem: Uploading profile image using php and mysql
Once you"ve saved size.php và size.css, you may go ahead và run form.php lớn see what the form looks like. It should look exactly the same as the one showing in the "Result" tab from the codepen above sầu.
Before we start adding PHPhường code khổng lồ our khung, let"s go ahead & 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":
Below is a complete code with error checking for connecting to MySquốc lộ database and running above sầu Squốc lộ statements to lớn create the database & users table:
With our HTML, CSS & the database table in place, we"re now reading khổng lồ start working on our form. The first step is khổng lồ create a place for error messages khổng lồ show up and then we"ll start writing some khung validation.
Open up the size.php and add the following lines khổng lồ it at the very top, make sure to use the php opening và closing tags ( I have sầu not included the html part of khung.php to lớn keep things clean ).
We have sầu created new session because we"re going lớn need to lớn access $_SESSION<"message"> on the "welcome.php" page after user successfully registers. MySquốc lộ connection has also been created right away, so we can work with the database later on.
We also need lớn 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:
This form already comes with some validation rules, the keywords "required" inside the HTML đầu vào tags, is checking khổng lồ make sure the field is not empty, so we don"t have lớn worry about empty fields. Also, by setting đầu vào type to "tin nhắn and "password", HTML5 validates the size for proper gmail and password formatting, so we don"t need lớn create any rules for those fields either.
However, we still need to lớn write some validation rules, khổng lồ make sure the passwords are matching, the avatar file is in fact an image and make sure the user has been added to lớn our database.
Let"s create another tệp tin & Hotline it validate.php to lớn keep things well organized. We"ll also include this tệp tin from our size.php.
Xem thêm: Mbc Là Gì ? Hợp Lệ Không ? Phân Biệt Các Loại Giấy Tờ Xe Trên Thị Trường
Note how we used super global variables $_SERVER and $_POST to lớn get the information we needed. The keys names inside the $_POST variable is available because we used method="post" khổng lồ submit our size.
The key names are all the named HTML đầu vào fields with attribute name (eg: name="password", name="confirmpassword"):
To clarify a bit more, here is what the $_POST would look like (assuming all the fields in the size have sầu been filled out) if we used a print_r( $_POST ) function on it, followed by die(); to terminate the script right after printing it. This is a good way of debugging your script & seeing what"s going on:
Now we"re going to lớn get the rest of our submitted values from $_POST and get them properly formatted so they can be inserted to lớn our MySquốc lộ database table
In the above code, we used real_escape_string() method to lớn make sure our username, gmail & avatar_path are formatted properly to be inserted as a valid SQL string into the database. We also used md5() hash function khổng lồ create a hash string out of password for security.
Here is the output if we use the print_r( $_FILES) followed by die(); just like we did for the $_POST variable:
When the tệp tin is first uploaded, using the post method, it will be stored in a temporary directory. That directory can be accessed with $_FILES< "avatar ">< "tmp_name" > which is "C:WindowsTempphp18D8.tmp" from the output above sầu.
We can then copy that tệp tin from the temporary directory, to lớn the directory that we want which is $avatar_path. But before we copy the file, we should check if the file is in fact image, for that we"ll kiểm tra another key called
The preg_match function matches the image from the < "type" > key of $_FILES array, we then use copy( ) function to lớn copy our image file which takes in two parameters. The first one is the source file path which is our <"tmp_name"> directory & the second one is the destination path which is our "images/guldan.png" file path.
We can now set some session variables which we"ll need on the next page, which are username and avatar_path, và we"ll also create the Squốc lộ query which will insert all the submitted data inkhổng lồ MySQL database:
The final step is turn our query, using the query() method và check if it"s successful. If it is, that means the user data has been saved in the "users" table successfully! We then set the final session variable $_SESSION< "message" > và redirect the user lớn the welcome.php page using the header( ) function:
That"s pretty much all we need for the validation, we just need lớn add all the "else" từ khóa in case things don"t go as planned from all the if statements we have created. Here is what the full code for validate.php looks so far:
Let"s go ahead and add all the else statements at once where we simply mix the $_SESSION< "message" > error messages which will be printed out when any of our if statements fail. Add the following code right after the last if statement where we checked for successful mysqli query và within the last curly bracket lượt thích this:
The session message will then display the error message in the div tag where we put our $_SESSION<"message"> if you recall:
Below is an example of what the error message is going lớn look like when two passwords don"t match. Feel không tính tiền lớn play around with it to trigger other error messages:
We"re now done with the validate.php. The final step is lớn create welcome.php page which will display the username, avatar image và some users that have sầu already been registered previously along with their own user names và mini avatar thumbnails. Here is what the complete welcome.php should look lượt thích, I will explain parts of it that may be confusing:
The $_SESSION variable part from above sầu should be easy to understand, we simply transfer over the variables from our validate.php page to this welcome.php page, if you"re still confused by that, please check out PHP.. Session page for complete break down.
One of those methods is $result->fetch_assoc() which fetches the current row và returns an array with all the row data. So we"re putting that in a while loop conditional expression, which will become false when it reaches the last row in the result phối, and storing the returned value from $result->fetch_assoc() inside the $row variable.
And that"s how we"re able khổng lồ access $row<"username"> và $row<"avatar"> from the associative array that is being returned, of the users that have already been registered previously and live sầu in our users database table!
The profile welcome page should now look very similar khổng lồ the one shown in the very beginning of this lesson, and the size is now complete, good job! Please post any questions you may have sầu in the comments below.