UPLOADING PROFILE IMAGE USING PHP AND MYSQL

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

User Protệp tin Welcome Page

Setting up Form CSS & HTML

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.

Creating the Database and Table

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":

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 MySquốc lộ database and running above sầu Squốc lộ statements to lớn create the database & 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 ", $mysqli->connect_error); die();//create the databaseif ( !$mysqli->query("CREATE DATABASE accounts2") ) printf("Errormessage: %s ", $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 & 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.

Starting New Session for Error Messages

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:

Creating Validation Rules

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

/* validate.php *///the form has been submitted with post methodif ($_SERVER<"REQUEST_METHOD"> == "POST")
if ($_SERVER<"REQUEST_METHOD"> == "POST") //kiểm tra if two passwords are equal lớn each other if ($_POST<"password"> == $_POST<"confirmpassword">)

Working with Super Global Variables

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:

if ($_SERVER<"REQUEST_METHOD"> == "POST") print_r( $_POST ); die();/*output:Array ( => obatambeienwasirherbal.com => vladi

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

//the khung has been submitted with postif ($_SERVER<"REQUEST_METHOD"> == "POST") if ($_POST<"password"> == $_POST<"confirmpassword">) //define other variables with submitted values from $_POST $username = $mysqli->real_escape_string($_POST<"username">); $tin nhắn = $mysqli->real_escape_string($_POST<"email">); //md5 hash password for security $password = md5($_POST<"password">); //path were our avatar image will be stored $avatar_path = $mysqli->real_escape_string("images/".$_FILES<"avatar"><"name">);

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.

How File Uploading Works

Here is the output if we use the print_r( $_FILES) followed by die(); just like we did for the $_POST variable:

if ($_SERVER<"REQUEST_METHOD"> == "POST") print_r( $_FILES ); die();/*output:Array ( => Array ( => guldan.png => image/png => C:WindowsTempphp18D8.tmp => 0 => 98823 ) )*///this is how we"re able lớn access the image name:$_FILES<"avatar"><"name">; //guldan.png

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 from our $_FILES variable.

//path were our avatar image will be stored $avatar_path = $mysqli->real_escape_string("images/".$_FILES<"avatar"><"name">); //make sure the tệp tin type is image if (preg_match("!image!",$_FILES<"avatar"><"type">)) //copy image khổng lồ images/ folder if (copy($_FILES<"avatar"><"tmp_name">, $avatar_path))

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.

Saving User Data in a MySQL Database

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:

if (copy($_FILES<"avatar"><"tmp_name">, $avatar_path)) //phối session variables lớn display on welcome page $_SESSION<"username"> = $username; $_SESSION<"avatar"> = $avatar_path; //create Squốc lộ query string for inserting data into the database $sql = "INSERT INTO users (username, tin nhắn, password, avatar) " . "VALUES ("$username", "$email", "$password", "$avatar_path")";

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:

//kiểm tra if mysql query is successfulif ($mysqli->query($sql) === true) $_SESSION< "message" > = "Registration succesful! Added $username to lớn the database!"; //redirect the user to lớn welcome.php header( "location: welcome.php" );

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:

/* validate.php *///the form has been submitted with postif ($_SERVER<"REQUEST_METHOD"> == "POST") //two passwords are equal to lớn each other if ($_POST<"password"> == $_POST<"confirmpassword">) //define other variables with submitted values from $_POST $username = $mysqli->real_escape_string($_POST<"username">); $tin nhắn = $mysqli->real_escape_string($_POST<"email">); //md5 hash password for security $password = md5($_POST<"password">); //path were our avatar image will be stored $avatar_path = $mysqli->real_escape_string("images/".$_FILES<"avatar"><"name">); //make sure the tệp tin type is image if (preg_match("!image!",$_FILES<"avatar"><"type">)) //copy image khổng lồ images/ thư mục if (copy($_FILES<"avatar"><"tmp_name">, $avatar_path)) //mix session variables to lớn display on welcome page $_SESSION<"username"> = $username; $_SESSION<"avatar"> = $avatar_path; //insert user data inkhổng lồ database $sql = "INSERT INTO users (username, email, password, avatar) " . "VALUES ("$username", "$email", "$password", "$avatar_path")"; //kiểm tra if mysql query is successful if ($mysqli->query($sql) === true) $_SESSION<"message"> = "Registration successful!" . "Added $username lớn the database!"; //redirect the user to lớn welcome.php header("location: welcome.php");

Setting Session Error Messages When Things Go Wrong

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:

if ($mysqli->query($sql) === true) $_SESSION<"message"> = "Registration succesful!" . "Added $username to lớn the database!"; header("location: welcome.php"); else $_SESSION<"message"> = "User could not be added khổng lồ the database!"; $mysqli->close(); else $_SESSION<"message"> = "File upload failed!"; else $_SESSION<"message"> = "Please only upload GIF, JPG or PNG images!"; } else $_SESSION<"message"> = "Two passwords vị not match!"; } //if ($_SERVER<"REQUEST_METHOD"> == "POST")

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:

Creating User Protệp tin Welcome Page

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:

.""; eđến "."">

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.

Working with MySQL Result Object

Whenever we use "SELECT" statement in our Squốc lộ query & then run that Squốc lộ with $mysqli->query( $sql ) comm&, the returned value is a MySQL result object. Once we have the result object, there are a few methods that become available so we can further start working with the data.

$sql = "SELECT username, avatar FROM users";$result = $mysqli->query( $sql ); //$result = mysqli_result object

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.

//returns associative sầu array of fetched row while( $row = $result->fetch_assoc() ) eđến "
".$row<"username">.""; emang lại "."">
";

Conclusion

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.