Step 1 - Create a table in MySQL database for user profile details
Let us create a table named 'profile' in MySQL database. This table will have user details, like name, email, photo etc. I have a database called 'demo'. So, this table will be created in demo database. If you have an existing database other than demo you can also use it. Just make sure same table does not exist already. Table structure is given below:
Table has 4 columns.
- id - It is the unique id of a user, primary key and auto incremented
- name - Name of the user
- email - Email of the user
- address - Address of the user
- photo - Image file name of the photo of the user
- password - User password
Create table script with data for this table is given below, you can use this code to create the table. You can also download it from the download section later in this topic.
Step 3 - Develop a page to display photo in the profile (index.php)
Profile page will have name, email and address displayed on the left-hand side. Profile photo will be displayed on the right. See below:
Note that in actual user profile there could be many other details of the user. For our simplicity we are using only name, email and address. Now at this moment we assume that user has registered but not added a profile photo. So, "Add Profile Photo" button is displayed.
Check if user logged in and get user details
$upload_path as 'uploads/'. You can see it verifies if user is logged in by checking
$_SESSION['email']. If it is not set, it redirects user to
login.php. But if user is logged in, it selects details of the user from profile table.
Display user details
For updating user details a form will be used. But for updating photo we will use Ajax script.
Form to update user details
Display, change, delete photo
Let us see how photo is displayed and updated. There is a space for image preview. Let see the code:
deleteImage() are called here to change and delete photo.
<div class="select-photo">, is added for changing the photo. While changing the photo, this section will be visible using
showUpload() function, initially it will be hidden.
Modal to display photo
PHP code after the form is submitted
It just takes the values from the form and updates the "profile" table in the database.
Here is the complete code for
Preview Image - Function previewImage()
This function is called as soon as user selects photo. This function displays the preview of the photo selected by the user. Let's see the code for this function:
If the image file is correct, image is displayed within div defined for preview and source of image is used from
URL.createObjectURL() method. This method creates an string containing a URL of the image object.
Function to upload photo
Upload button is used to upload the photo in the server. This function takes input photo and executes an Ajax script to run a php program (
process_image.php) with the input file as parameter, this php program uploads the photo. Let's see the Ajax code:
FormData() instance is created and the input image file with email are added in form_data. Then executing an Ajax script with the form_data as one of the parameters. Let's see all the parameters in Ajax call below:
process_image.php - Call to php program which uploads the photo.
- dataType: text - Response of Ajax call is text only
- cache: false - We do not want browser to cache
- contentType: false - Since we are sending form_data with image file as input, we must set contentType as false to use enctype = multipart/form-data
- processData: false - This is also for form data, we do not want jQuery to process data before sending it to the server.
- data: form_data - input form data sent to the request
- type:post - Type must be post here for enctype = multipart/form-data
success: When Ajax is successful, message about upload will be displayed.
If the image is uploaded successfully, we want to display the image. In this case we just need to print the output of
process_image.php, which will be displaying the image along with change and delete buttons.
process_image.php uploads the photo in the server and then updates profile table with the image file name.
If validations are successful, it first removes existing file, if any, from the server using
unlink() function. Then image file is uploaded using
This function is called when user clicks on delete (x - button) button next to the photo. The function is called with two parameters - image file name and email. Function executes Ajax scripts to run
process_image.php which deletes the image from database as well as from the server folder. Below is the code written in
upload.js for this function.
Now, let's see the code for delete image section of
If delete flag is set, it updates database table with photo set as blank. Corresponding image file is removed using
unlink() function. Since photo is removed now, we need to show the section to add the photo.
This function is called when user clicks on change photo button. This function simply displays the contents of <div> with class as "select-photo". See below code for this function:
You can see it simply changes the display property of the <div> to block, which means it will be visible now.
Below is the complete code of
process_image.php. There is a download section later in this topic, if you download the zip file, you will get all the scripts for this topic.
Additionally, below code is for
logout.php. Which are necessary for this application. To login, use email id = email@example.com, password = 123.
logout.php, we are unsetting all variables and deleting the session. Then redirecting the user to the login page.