52: How to upload profile images to users using PHP - PHP tutorial

today we're going to learn how to upload profile images to users inside a website and this is going to be based off directly at the previous episode I did where showed you guys have to upload images and files directly to a website so if you guys haven't seen the previous episode I recommend you guys go back what's at first and then return to this episode here because all the code you guys see in front of me here is directly the same as what we did in the previous episode and we will continue to build on this system here we created previously now another thing I should mention is that we also need to be able to create a login system because it makes sense that in order to make a profile image upload system we need to have a login system so if you guys don't know how to make a login system I also recommend you guys go back to episode 39 where show you guys how to create a login system so having said this let's actually go ahead and take a look at what we're going to be building this episode here so what do you guys see in front of you here is going to be the prototype we're going to be building today and yes I know it doesn't look we're pretty I didn't focus on styling today so if you guys want to make it pretty you just need to add some CSS to it now what we're going to be doing here and I'm just going to take this one by one so you guys understand what is going on inside my browser here is first of all at the top of the page we're going to go ahead and list out all the users we have inside the database now right now as you guys can see I have no users because I didn't sign up any users down here so what we're going to do underneath here once we get all the users is we're going to get a message that says if we're locked in or not because I do actually have a login and a lockout button down here now I didn't create a traditional login system where you have a user name input field and a password field and then click login because we're just creating this as a test today but it's going to work exactly the same way for uploading profile images had it been a regular login system okay I just decided to create a button instead of a input field we also have a logout button so we can lock out our admin again that's basically what we have for a login system then up here I have a signup form where you can sign up a new user inside our website so what I'm going to do here is I'm just going to demonstrate what it is we're going to be doing and how the upload system is going to work so I'm going to go ahead and sign up myself Daniel Elson I'm going to call myself admin because we need to be able to login as admin down there I'm just going to create a one two three password and then after I click sign up you guys can see we get admin now what do you guys will notice is that right now as a default once I click sign up I haven't uploaded any kind of profile image yet so as you guys can see I get this default profile image and this is actually something I uploaded inside my uploads folder inside my root folder so as you guys can see I get this profile default that JPEG image now once I do actually click login you guys can see we now get a profile image upload system that replaces my signup form because I'm logged in we shouldn't be able to sign up anymore and instead we can upload a profile image now this profile limits is going to go in and replace the default image we have up here so if we go in and say choose file and select myself click upload you guys can see I now change my profile image so this is a pretty cool way to change it now if I wanted to change it to another profile image I would just go ahead and choose another file and at the image like this guy down here upload him and as you guys can see we now get a new profile image so this is basically what we're going to do today so hope you guys find this useful because in a second I'm just going to delete everything I have on the screen here and then we're going to build everything from scratch okay so now I went ahead and deleted everything inside the prototype except for what we did in the previous episode so as you guys can see this is all identical to what we did previously in the last episode ok so the first thing we need to do to create this upload system is that we need to create the database we're going to use in order to upload these images so I'm going to go into my database or decent-size phpMyAdmin and as you guys can see I already created a database called image upload so if you guys don't have a database yet or if you already have one running for another website just go ahead and use that database go ahead and create one first so inside my image upload database we're going to go and create two tables I'm going to go into the SQL tab up in the top here so you can write SQL code and I'm going to go ahead and create two tables the first one is going to be the user table so I'm going to say create user or create table not user of course and then what kind of call this one user we're going to go and insert some values or some values for the columns we're going to insert into the user table so we're going to say parentheses and then semicolon and inside of here we're going to say that the first column is going to be named ID the ID is going to be a data type set as integer we're going to set it to maximum of 11 characters we're going to set to not null and then we're going to go and set this one as our primary key we also need to set it to auto increments so it automatically updates to a new number higher every time we add a new user like so and then comma and then on the next line we're going to go and say we have a first name so we're going to say first we're going to create a batch our data type going to set to 256 not null and again this is all stuff you guys know how to do by now so we're just going to move a little bit faster here so last name ma Chau 256 not null and then we're going to create a user name I'm just going to go and call what we have up here because it's going to be completely identical and then the last one is going to be the password once a password it's going to be much as well 256 and not no and no calm at the end here so after we created the table for a user we can actually go ahead and run the code after we ran the code need to create a second table because once we create this image upload system we need to be able to tell if we already uploaded an image or if we didn't because if you haven't uploaded a profile image we need to get the default image that I showed you guys inside my uploads folder so what we're going to do here is I'm going to go and create new table and this table is going to tell us the status if we already uploaded a profile image or not so we're going to say create table profile image again we're going to insert some column values the first one is going to be an ID completely the same as we did for the user so we're going to say integer 11 not now primary key and also increment it like so now the second column is going to be the ID of the user inside the user table when we do actually need to link the profile image we have in here to the user so we need to know which user has which status of this profile image so we say user ID which is going to be the next name for next column we're going to say integer because the ID of the users inside the user table is an integer as well so why not just make it integer 11 characters and not not then we need one more piece of data because now we told it which user has this image status so now we need to actually set the status as if we uploaded or did not upload the image yet so I'm going to say status like so integer 11 characters and not know so that's all we need for the profile image table we have in here we just need to know which user the image is linked to and did he already or did he not upload a profile image so we're going to go ahead and say go so now we created the database we're going to use for this entire episode so that's all we need to create in here so going inside our code the first thing we're going to do inside the index the PHP file is we're going to go ahead and set a session at the very top of our page because in order to be logged in we need to have a session running inside the entire page so I'm just going to go ahead and create a session up at the very top here so we need to UM about PHP tags like so and inside the PHP tags you create a session underscore start so now we have a session started on the entire front page which we need to have now the next thing we're going to do is we're going to go ahead and start a connection to a database like these create a connection so we have it for a database so I'm gonna bubble new file and I'm going to go ahead and save this one as DBH dot PHP inside my root folder now the code we're going to run in here is going to be the opening PHP tags first of all we need that and we're going to create a variable called pun which is equal to the parameters we need in order to tell it which database we're connecting to so we need to say my SQL i underscore connects parentheses and inside of here we'll need four different parameters first of all we need to tell which server we're actually choosing for the database which in this case is localhost because it's not online comma the next one is going to be the username which in my case is root for my exam and then the password is going to be empty because I'm using xampp again if you're using another program for your localhost then you need to go ahead and check in which username and password you have for it the fourth parameter is going to be the database name then my case I decide to call mine image upload if you have another name for your database you need to change this to whatever you have for yourself so we're just going to go and create this because we're not going to do a bunch of error messages we're just going to go and create the very basics in order to get this image upload system running because this part here is also if you guys could have learned when we created our login system so we're not going to go too much into detail here so once I have this we can actually go ahead and go back to the index page and we can link this DBH document to our front page so at the very top here right underneath the session start we're going to go ahead and say include on the score once single quotes DBH dot PHP so now included this document in here so now we do actually get a connection to the data so the next thing we need to create is our login and lock out forms of course we could do this and then kind of order we wanted to but I'm just going to go and create the login and logout form first because why not so what we're going to do here is we're going to go ahead and go underneath the form we created in the previous episode what we did actually upload images I'm going to go ahead and create a form down here now this form is going to be our login form so I'm just going to go ahead and set a action which is equal to login dot PHP I'm going to set a method as post and then I'm going to go ahead and give it a button now we're not going to give it an input because remember I'm not trying to create a an input field for the username and password I just want a button that I can click and get logged in as the first use I created inside the database which in this case is the admin so I'm just going to go ahead and create a button I'm going to set the button tight as submits I'm going to go and give it a name which is equal to submits login like so now inside the button we can go ahead and say lock in just so we know what it does and I'm going to go ahead and create a paragraph right on top of the form so we can tell ourselves what this form does so I'm just going to go and create paragraph tags and I'm going to go ahead and say login as user so now what it does now we're going to go ahead and create a second form we're just going to copy everything we have up here because it's going to be pretty identical to it and this one is going to say log out as user like so now we're going to go ahead and change the action to lock out the PHP and we're going to go ahead and change the title inside the button to lock out like so well is it going to change the name of the button so it doesn't say submit login but is to say submit log out and that's basically what we need to do for the forms we have in here so now we need to create documents that allow for us to log in and allow for us to log out so we're going to open the new documents I'm going to go ahead and save it as login dot PHP enzyme a root folder and inside this file we're going to go ahead and open up the PHP tags now we're going to go and create a session that has started because we need to have that in order to lock in a person when he clicks the button we need to have a session running underneath here we're going to go and create an if statement and inside the condition we're going to go ahead and check if the button has been clicked so we're going to say is set parenthesis and then we're going to check for post method called submit lock in so I'm going to say dollar sign underscore post brackets single quotes then we're going to say submits log in with a pick out at least in my case I wrote it as a bigger now inside the if statement we're going to go ahead and lock in the person as the person inside the database that has the session ID or at least an ID as one so I'm going to say we have a session variable which is a super global by the way you guys notice by now if you know how to create a login system and we're going to go ahead and call this one ID I'm going to set it equal to one because you just want the first ID from the database and again we're not actually getting anything from the database I'm just saying I want to be logged in as the first user inside the database that has the ID as one so we're not doing any kind of special thing in here so underneath here the last thing we need to add is a header function so it can actually be taken back to the front page once we did actually log in so I'm going to say double quotes location with a big L and then we're going to go ahead and set it to index dot PHP and that's all we need to have inside the log in the PHP file now the next thing we need to add is we're going to go to add a logout file so I'm going to save a new file of logout dot PHP and then we need to do kind of the same thing in here we need to first of all start out the PHP tags and then we need to set a session start because in order to destroy a session we need to either started first then we're going to set a set in underscore unset which unsaid all the variables we have inside our session variables and then we're going to destroy it afterwards with a session underscore destroy like so so now we just locked our person out if it does actually click the logout button now we also need to be taken back to the front page so I'm going to create a header function here as well call the exact same thing logout or location not logout : index dot PHP so now we just created a login and logout button that actually works and now what we're going to do is we're going to go ahead and tell the website what we want to see if I logged in and what we want to see when we logged out so we're going to go back into the index the PHP file the very top of the body we're going to go ahead and open up PHP code with the PHP tags and then inside the PHP tags we're going to create an if statement and this if statement is going to check if we're logged in so what we're going to do is we're going to check for a session ID that's set as ID so we're going to say tell us on on the score actually no we're going to say is set parentheses and then dollar sign underscore session which again is the superglobal that has a name as ID so now we're just checking if we are locked in then do whatever is inside the if statement so what we want to do inside the if statement is we want to create another if statement because we want to check if we're logged in as admin or at least the first person inside the database so we're going to say is set parentheses then we're going to say if the session ID we have up here it's equal to 1 then write something inside this if statement so I'm going to say echo you are locked in as user number one or something we could also call it admin if you wanted to but right now we're basically locking ourselves in as user number 1 from the database so we're just going to say user number 1 now what we also want to do is you want to go ahead and show if we are locked in the form we created in the previous episode that allows for us to upload images because we don't want to see the former we can upload profile images if we're not logged in we should only be able to upload images if we logged in so I'm going to go ahead and copy this form down here delete it then I'm going to go and go inside the first if statement after the second one and then I'm going to go ahead and echo a string which is going to be this form you just copied down there now of course we do need to change these double quotes to single quotes because we have single quotes around it I'm just going to going to do that really quick like so like so like so and change them so now we basically have our image upload form inside the if statement X if we're locked in because now if I'm not logged in we can actually see the form so what we can do now is we can actually go and test this really quickly just to see what's going on so if we're going to set the website you guys can see oh we do actually get an error message let's actually go ahead and fix that we don't set and is set for if we're checking if the session ID is equal to one we just need to check if the session ID is equal to one so if you caught that mistake great job so now if you go back to the website refresh you guys can see we now get this right now it says you are logged in as user one so if I go ahead and say logout we don't get a message if I click login we get a message so this is basically working like we wanted to so what we can do now is we can go ahead and see one message if we're locked out because right now as you guys can see we don't see anything if I go inside my code right after the if statement which says if we're locked in then do this down here we can go and create the else statement now inside this else statement we're going to echo you are not locked in just so we can see we're not locked in as you guys can see if I were to go back it now says you are not locked in then if you login it doesn't say it anymore so what we need to add underneath here is we're going to go ahead and add a signup form because we're not logged in we want to be able to sign up a new user so what we're going to go ahead and do is we're going to go down to the next line and we're going to start creating the HTML form that allows for us to sign up a new person so we're going to say echo a string and then inside the string we're going to create the form tags like so then inside the form tags we're going to go ahead and create the input we need in order to sign up a person so we need to say input which is going to have a type which is equal to text we need to set a name which is equal to first because now we're going to go into the database make sure that all the inputs fill out what we have inside the user table so if I go into the structure of my user you guys can see we have a first name we have a last name a username and a password so we need to fill out all those four fields of course the first one which is dydy is not going to get filled out because it does it automatically so we're going to go back inside our code and inside the input we're going to go ahead and put a placeholder so we can actually see what is written inside this input inside the browser so I'm going to say first name then we're going to close the input and then we're just going to go ahead and copy it down three more times like so then we're going to go and change the second one to last inside the name I'm going to change the placeholder to last name then the third one we're going to go and change the name to username or these UID which in my mind stands for username inside the placeholder we're going to say username in the fourth one we're going to change the type to password we're going to change the name to PWD I'm going to change the placeholder to password like so then we're going to create a button like so and inside the button tag we're going to go ahead and set a type which is equal to submit we're going to go ahead and set a name which is equal to submits sign up and this is basically all we need to do for the inputs now inside the form tag at the very top here we also need to set an action and a method so we're going to say action which is equal to login dot PHP then the method is going to be equal to a post method so now we just created everything we needed for login form or the signup form not the login form so we'll go back to the website you guys consider once we log out we get a sign-up form of course we forgot to put something inside the button let's do that really quickly so inside our button down here inside the signup form we're going to say sign up so now it should look correctly there we go so now that we have that we need to create the code in order to sign up a person inside the database in order to do that we need to see what is going on inside the browser so before we start signing up people we should probably create the thing that tells us how the user looks like inside a browser so as you guys remember at the top of my prototype you could actually see if we had a user inside the database or not and if we had a user it showed us what the user name was what the name of the person was and what the profile image looks like so need to create that first and then we can start signing people up so at the very top of our page here inside the body tag actually now inside the PHP tag up here we're going to go ahead and start selecting users from the database because we need to see if there is any kind of user from the database and if there is we want to show them inside the top of our website if there isn't any users then we want to show a message that says there are no users so the first thing we're going to do is we're going to go ahead and create a select statement so need to write SQL code so we're going to say we have a variable called SQL which is equal to double quotes select all from you sir let's play see what we need then on the next line we're going to go ahead and run this query so we're going to say dollar sign result which is equal to my SQL I underscore query parentheses semicolon and then inside the parentheses we're going to say we have a database connection inside our DBA to the PHP file which is called dollar sign con which is going to be the first parameter because we need to connect to the database and then for the second parameter we need to run the SQL code up here so we get all the results from this SQL string we we just queried on the next line we're going to start spitting out the results so first of all we're going to go and check if we actually got any results from the database because if we don't have any users inside the database yet we're going to get an error message so if you start spitting out stuff so first of all we're going to say if we had any kind of database results by writing my SQL i underscore num underscore rose parentheses from the query we ran called dollar sign result that is greater than zero so we had any more results than zero running this query up here then we want to run the code we have in here and in here we want to say okay if we had any results then while we have results we want to spit them out so I'm going to create a while loop there we go so inside the while loop we're going to say dollar sign row which is equal to my SQL i underscore fetch underscore a suck parenthesis from the query ran inside the Select statement like so so if we got any results and spit out each row result inside our while loop based on this query up here so now that we did this normally we would start spitting out the stuff we want to see from the user inside the database so if I want to show a tip box with the user image and the user you know the username and the first name and last name I could go ahead and start writing it inside this while loop but we can't do that yet because first of all we need to check if we have uploaded any kind of profile images to this user yet because based on that we're going to have to run another select statement that goes in and checks if we already upload a profile image so in order to explain it to you guys properly before we start writing anything new let's go ahead and go back inside the database just to show you guys what's going on here now inside my user table the first use I'm going to sign up is going to have an ID which is equal to one now because that user is going to have an ID we also need to say that once we sign this person up he needs to have a row inside a profile image table which at the moment looks like this so inside the profile image table we need to tell it what the use ideas of the user and what the status is did he already upload or did he not upload a profile image so based on the status we need to say do we want to show the default image inside the folder or do we want to show the new image that he uploaded himself so I want to check this and need to check the user ID in here we need to create another select statement or at least we need to first of all get to use ID of the person who is inside the user table so we're going to go ahead and say dollar sign ID which is equal to dollar sign row single quotes ID which now gets the ID of the user just selected from the database now because we have this we now can go in and check the database inside the other table we have if the status of this user says that he already uploaded a profile image so we're going to go and create another select statement we're going to say dollar sign SQL which is equal to a select statement let's actually go and change this text so we have SQL image which is equal to a select statement or we select all from profile image inside our table where the user ID column that we have inside the user inside the profile image table is equal to the ID we have up here we just got from the user so now we're checking if we actually have a profile image uploaded from this user now the next thing we're going to do is we're going to go ahead and run this query inside the database so we can just go and copy what we have up here where we actually run the previous query and then we just change the name of it down here so we don't have SQL we have SQL image and then we contains the result name over here so we say we have results image and then we go ahead and go in and check what the status is of this user inside the the image table we created so just to recap for you guys the basic thing that's going on here is that we're going into the database checking if we have users inside the database if we have users then should start looping them out one after another but each time it loops out one user is it also going to check if that user has an image that you uploaded inside the root folder of our website now the image so at least the status is going to show inside a profile image table and based on that we want to show the image or we don't want to show the image that you uploaded or not so after we did this we're going to go and run another while loop and inside of here is where we're going to start looping out the data we want to show inside the browser because now we have data from both database tables and we can start spitting out whatever we have from them so inside the parameter of this while loop we're going to go ahead and say if dollar sign row image equals my SQL i underscore fetch underscore at stock parenthesis then we're going to get Dulles and result image from up here we're going to insert it inside the parentheses so running this query up here and now we can start spitting out the information we want to show inside the website so now that we create the while loop we can actually start spitting out the stuff we want to see inside the browser for example a tip box with the image inside of it and the user name and the first and last name of the user we can start spitting that out so what we're going to do here is I'm first of all going to echo out a string which is going to be a dip box I'm also going to go and close the dip box in a second echo underneath here because we need to put some stuff in between like so and then the next thing we're going to do is we're going to go ahead and check if the status of the image says it's uploaded or not uploaded already so we're going to create an if statement where we go into the second query ran which is called doubles on row image brackets and we're going to check if the status inside this column says that the image has been uploaded or if it has not been uploaded yet so I'm going to say if it's equal to zero then we already uploaded an image but if it's not zero then we want to create an else statement down here that says we haven't uploaded an image yet so we need to echo out the default image I inserted inside my my root folder inside the upload folder so we're going to go ahead and dig in a path we're going to create an image it has a source equal to single quotes uploads forward slash profile default dot JPEG then after the single quote we're going to go ahead and close off the image tag so now we're basically showing the default limits I have inside my root folder if we don't have any kind of changes made to the profile image yet now inside the other if statement up here we're going to go and copy this echo we're going to insert it and instead of writing profile default you want to write profile and then delete the default we're going to start up yet P code again by writing double quotes then to punctuation and then we want to show the user ID from the user inside of here because now the name of the image is going to be profile one because the gun logged in us right now has an ID as one inside the database so right now that image is going to be called profile one so what we need to make sure we do now is that once we do actually upload a new profile image we need to change the name to something else than a unique ID you create it in a previous episode as you guys can see down here we create the new file name we made unique ID which we now need to change to whatever we have inside here instead okay and we need to do that in just a few minutes so one last thing we need to do is we need to go ahead and say well if we have no users inside the database yet then we need to have an else statement that says there are no users inside the database so there are no users signed up yet so we're going to echo out an else statement that says there are no users yet now we need to finish out what we have inside the dip box because right now we're just showing the image but I also want to show the user name and the first name and last name of the user are these just a user name doesn't really matter so right underneath the else statement we're going to go ahead and say you have an echo that echoes out the username of the person inside the database so right now we want to go up and grab the query from the last result we got up here which is dull assign row and say we have a column called username so now we're echoing out the username and the image of the person inside the database so now that we created this we're basically done inside the index page except for one more thing we need to do at the end but now what we need to do is we need to make sure that when we sign up a new person using the signup form we have down here that we insert data inside the user table and inside the profile image table inside the database once we've done that we're basically done creating this image upload system well we also need to change the upload PHP file we have inside from the previous episode but that's really easy code to do so we're almost done so what we're going to do now is we're going to go and create a new file we're going to save it as sign up dot PHP and inside of here the first thing we're going to do is going to open up the PHP tags and then after we click the sign up button inside our index page we need to grab the data to be passed on from the index page right now as you guys can see if I go down to the signup form we have a first name a last name a username and a password so inside the sign of the PHP file we're going to say we have a variable called first which is equal to a super global called post that has a name as first then we're just going to go and copy this paste it down three more times and then we're just going to go and change the names inside these variables and inside the superglobal so the second one was called last in the third one we called it UID and the fourth one are called the PWD for password so now that we have this we can start inserting the data inside the user table so what we're going to do is we want to create a variable called SQL which is equal to double quotes insert into the user table parentheses space values space parentheses semicolon at the end and then we need to insert the column names and the values we have from up here so in the first parenthesis we're going to say we have first comment last comment username comma password then I'm just going to go and move this down to the next line just so we can see this better and inside the parentheses here I'm going to say single quotes then the variable first we have up here like so comma single quotes variable last comment single quotes variable you ID comma single quote and then dollar sign PWD so now we're just inserting data inside the user table or at least we have the string that we need to query in order to insert it into the user table so underneath here I'm going to say dollar sign result I'm going to set it equal to my SQL I on the school query parentheses then we need to get the database connection which we haven't gotten yet so we need to go to the top of the page here include underscore once single quotes DPH and dot PHP semicolon because now we can go in and get the database connection which is dollar sign con-com at and then we want to run the query which is up here called dos on SQL and once we've done this we signed up the user now one small detail just notice is that we don't actually need to have the dollar sign result equal to down here so I'm just going to go and remove that and then right underneath where we have the insert statement we now need to go into the database select the user we just inserted into the database so we can use this information to create a new row inside the profile image table inside our database so on the next line here we're just going to go and copy everything we have right here and instead of an insert statement we're going to create a select statement so we're going to say select all from user where you ID or not the edita username is equal to u ID from up here and first is equal to the first name we have up here now you might be asking why am i doing two different parameters down here that's simply because we want to eliminate as many errors as possible if a user for some reason has signed up his username as the exact same thing as another user then we would end up going in and overriding that first user so we want to make sure the user name and the first name is the same just to make sure there's less errors so after we have this we can now go down to the query down here and we can go ahead and say that we have a variable called results that is equal to the query that we just ran in here after the query we then run an if statements and inside the condition of this if statement you want to check if we had any results from this select statement here so I'm going to say if my SQL I on the score num underscore rose parentheses from the dollar sign result here greater than zero so we have more than one result then it needs to run this code down here else want to give an error message that says echo you have an error or something inside the if statement we now need to get the data from this user we just insert it into the database so I'm going to go ahead and say we have a while loop parentheses curly brackets and inside the while loop condition we're going to say dollar sign row is equal to my SQL i underscore fetch underscore s sup parentheses and then we're going to say double sign result inside the parentheses so now we're basically getting all the data from the use of just insert it into the database inside the while loop we want to get one piece of information from this user we need to get his ID inside this column so I'm going to go ahead and say we have dollar sign user ID which is equal to dollar sign row brackets and inside the brackets you want to say we want to get the ID of this user here so now that we have the ID we can actually go out and insert a new row inside a profile image column so what I'm going to do here is I'm going to go ahead and say we have a new insert statement so I'm just going to copy what we have up here paste underneath here move everything out so it looks nice like so and then we're going to change it from insert into user to insert into profile image then we're going to change it inside the parameters because we only have two so I'm going to change the from first to user ID and then from last to status then inside the values we're also going to delete the last two because we only have two different parameters we want to change it from doubles on first to use ID because we want to insert the user ID of the user inside the user ID inside the profile image column and then inside the second parameter we're just going to go and delete what we have here and write 1 now the reason we're writing 1 is because right now inside the index page once we loop out the user inside our website we're checking if he has a status inside his profile image set to 0 or one if it's zero then we're looping out the profile image he uploaded if it's one then we're basically saying that it doesn't have a profile image yet so right now because it's just signed up he doesn't have a profile image yet so now we're going to go and save this and the last thing we need to do is we need to take us back to the front page we're going to say header at least I had a function location colon index dot PHP so now we'll basically have everything we need in order to test this out because it should be working now so if we go back inside our website we can actually go ahead and refresh everything right now it says there are no users yet you're not logged in because when I logged in we didn't create any users yet if I were to go in and try and sign myself up with Danielle Nelson admin why not one two three sign up you guys can see we now get a profile image my username which now shows we have a user inside the database of course it doesn't look exactly the same as what I showed you guys my prototype because we have an X because we have an exit style anything yet but as you guys can see we now have the profile image and the admin so now that we have the profile limits here what I'm going to do really quick is I'm going to go ahead and style this very quickly I'm going to show you guys to code so you guys can copy it but I'm just going to go and paste in some code I created from our prototype so the first thing I'm going to do to make it look nice is I'm going to go into my index page I'm going to go into my div that have inside my while loop in here and I'm going to go ahead and give it a class I'm going to give it a class name as user - container then I'm going to go ahead and say that the username down here is going to be inside two paragraphs or inside one paragraph like so and like so and then I'm going to go into my style sheet which you haven't created yet I'm just going to create one really quick I'm going to save it a style of CSS like so and then I'm just going to go and paste in all the code I have for my styling again if you guys want to see this I'm going to go and leave a link in the description guys we can download this stylesheet link so you can just paste it if you want to so now I'm just going to go into my index the PHP file I'm going to go ahead and link to the stylesheet up here at the very top style dot CSS and now I'm going to go into the website refresh it and as you guys can see we now have a bit of styling so it doesn't look completely ugly so what I'm going to do now I'm going to go ahead and lock in my user by clicking login as user once I'm locked in it says you're logged in as user number one and now I connect to start uploading profile images to my profile here but we need to make a small change to the document created in the previous episode which is the one called upload to PHP because we don't want the name to be some kind of unique number and we need to make sure that once we upload a new image we also make a small change to the database so the top of this document here we're going to go ahead and start a session like so and once we start a session I'm going to go ahead and go underneath here connect to my database file we're going to include on the score once DBH dot PHP after including the database file we now need to get the session ID of the users just locked in because in order to change the profile limits we now need to tell the database who we are as a user so which kind of use name or use ID do we currently have so underneath the include I'm going to say we have a variable called ID which is equal to the current session ID like so so now we have everything we need in order to change the name of the file we're going to upload so I'm going to go back down to where we just created a new file name called dulles on file name new and I'm going to go ahead and delete the unique ID we have down here first of all we're going to go and include a new string I'm going to say double quotes I'm going to say profile then after double quote we're going to say punctuation and then we want to reference to the current session ID so I'm going to say dollar sign ID so now the name of the file is going to be profile then the name of my current session ID punctuation and then the file extension so now that we have this all we need to do now is go into the profile image database table and update the information we have in there because right now the status is set to one which means that we haven't uploaded a profile image yet but we want to change to zero to tell it that we just uploaded an image we now have a current profile image inside our root folder so right before we go into the header location or the header function down here because we need to do this before we go back to the front page we're going to go ahead and write an SQL statement we're going to save dollars on SQL double quotes and then I'm going to say update profile image and we're going to go and set the status column equal to zero where the user ID is equal to a current session ID so dollar sign ID and our last thing we need to do is we just need to run the query and after that we just need to do one more thing which is very short and then we're done so I'm going to go and say dollar sign result is equal to my SQL eye on the score query parentheses semi-colon and inside here we're going to get the database connection for con and then we want to get dollar sign SQL so now that we did this we can actually go and test this because now it should be working so we're going to the website refresh I choose some kind of profile image and I select maybe myself in here upload whoops we get a error message upload the PHP line 27 let's actually go ahead and check that out ah I forgot to add a semicolon at the end here there we go now we can go in and check that it's working so let's actually go ahead and refresh again choose a file and upload and as you guys can see my image just changed because now if we go into the database go into the profile image it now says my status is equal to zero meaning that I now have uploaded a profile image even though we set it as one when we created the user if I were to go in and clear new user justice area guys I'm going to call this one Jane Doe I'm going to call her something else one two three sign her up now you guys can see that she also have the default limits and if you go into the profile image database just to show you guys her image status right now says that she has a status as one meaning that it doesn't have a profile limit if I were to lock in a stain and change the image it will get teens to 0 which is what we just did with my profile so this is basically how we can do this now one last thing I want to mention is that if I were to go in and change my profile image again if I were to log in choose another image right now you guys can see it didn't change for some reason even though I just uploaded a new image and there's not an error caused by the image file name or anything like that but it's actually because some browsers can remember how images look like so forward to refresh there's enough times you guys can see now it changed so we want to make some kind of change so it doesn't happen so it needs to update the profile image right away after we change the image now known to do that we're going to go back inside index to PHP and inside index to PHP we're going to go down to where we have the name of our image so right now it says we have profile variable ID dot jpg right after the jpg we want to add a random number of some kind in order for it to always update the name of the image because if it just keep updating the image without changing the name then the browser is kind of think it's the same image as last time right before we change the image so we want to update it right away we need to also update the name of the image when the browser loads damage so after jpg we're going to say question mark and then after the single quote I'm going to say double quotes because we want to change the two PHP code right now punctuation marks and then we're going to go ahead and create a function called MT on the score random which is going to give us a random number between a certain amount of numbers we're going to say parentheses now because we're not setting any kind of parameters in here it's just going to give us some kind of random number so this is basically all we have to do for this episode and I hope you guys find a useful even though it's quite long but this is basically how to change profile images or these one of the ways you can change profile images because there's quite a few ways you can do this so we guys enjoyed and I'll see you guys next time

Channel: Dani Krossing

Views: 204,062

Keywords: how to upload profile images to users in php, how to upload profile images to users using php, how to upload profile images to users, upload profile images to users in php, how to create profile images for users, profile images php, php upload profile image, profile image upload php mysql, facebook style profile image upload php, php tutorials upload an avatar profile image part 1, how to create profile images, avatar picture upload php, php image upload profile picture, php

Id: y4GxrIa7MiE

Length: 51min 1sec (3061 seconds)

Published: Wed Dec 07 2016