Create & Update Profile Page - PHP/MYSQL Project Tutorial with source

all right youtube in this video i'm going to show you how to create this profile page so this is the part 2 of social networking website using we are creating using phpmysql and javascript and css fine now if you see uh this is the page we are going to create from scratch so let's start from zero if i log in this is the login section which here which we have already created in the previous video let's try to login and if you see the nav bar has changed if i click on profile let me zoom out so if you see the profile is already filled up so let's add some more different gauge and if you wish to change hello the about and if you wish to change the date of birth to december no january 1 and if you click on submit you should see the data which you have entered is available fine likewise if i click log out and choose some arrow value which is not inserted let's choose this email and let's login click on submit and if you get into the profile this is fully fresh now let's try to insert open i'm ui monk mail and let me make it 25th of december and education is phit hsc and ssc and if you click on submit you see record updated successfully message and your whatever you have typed is now available to you so file section and have to click on log out and login in with the same email id which i have used ui mongodb gmail.com from the database even after login data will be still available fine this is what we are going to see in this video so let's get started alright youtube in this video we are going to create the nav bar fine now for the navbar i'm going to use bootstrap for navgar so let me get into the w3school for that copy paste the code from there so let's choose our nav bar this seems to be okay just copy it and we know we have our inc folder which we have created in the previous video and just above the body i would like to paste the nav bar so this header is available for all the pages which updated yesterday fine now we don't need this drop down for now so let me comment the whole list item the first one is home the second one is uh timeline the third one is profile the fourth one is message so we'll create the relevant pages in the coming sections so for now let me show you how does it looks so right now we are not logged in yet so the logo let's add our channel now we have not logged in yet so we don't have to show home timeline profile and message we only have to show these four links once the user is logged in logged in in my sense once we logged in a session created which we have created in the previous video after login if you see these are the sessions which we have created so if this session exist then only show this li so let's write a php this is set then only show this hole like so right now the station is not set so you won't be able to see the links once the it's not sorry once the session is not set i want to show some other links like register and login now if you see register and login is available once i logged in let me login first so that we need our usb password to check let us add the link as well which we have created already so databases social network register this is the id we have used to login refresh it click on login now let's try to login if i click on submit station will be created and you should see the links session is created but we could not see the links if a set refresh it so let's check the member uh sorry for that we have to use session start here to use this session php session underscore start and now you could see the links so let's add an output as well logout.php our session has been already started on the index page we have already started the session so on the index let me remove that so we are using the header change start on the header so if i click on log out spelling mistake dot php back click on log out and you're done so on login dot php also we have your session start we don't need this so let's check where all we have used session start fire refresh fine now if i log in with the same id you won't see any error you will be able to log in properly and the links are properly visible after logout you could see the relevant links so in this video let's create the profile section once we login the user can edit his profile like uploading images and uploading relevant data like about gender data birth education and country so let's create a data table for that new let's have the table name as profile and we need a user id id primary key profile picture and date underscore added so 11 columns already we have four then we need a seven id user id let me copy paste all the things date of birth education country in which he lives profile picture and the date uh very added or updated as profile it is going to be entered it is going to be in it is going to be healthcare 200 it is going to be where care 200 that is going to be date and education is going to be very care 200 again back here 200. and then we have country which is end and profile peak let's add it as well care 200 which is going to be the file name and the date and time and let's make this id as a primary key you just have to take the radio button which is auto increment and the primary key is set by default click on save now we have another table which is profile fine now let's create let let us login first if you click on profile nothing is happening let's create a page for that ctrl n ctrl s profile.php here it is going to be form so let's link this in our title on the profile profile.php if i refresh and click on profile you can see the form so what we need is we just need the same login form or the same register form this profile.php if i refresh you can see the profile page but the home date is going to be changed edit your profile so let's add a what are the fields required so the first one is going to be the about let's add a text area by refresh let's see how does it looks i will comment this this is needed and to add a bootstrap class this is so big let's add the row as five or three now that's okay now the profile copy paste this here input tab is going to be file let's add the class form form control and let's we need to add the name attribute profile underscore peak let's have the name attribute here as well about likewise we need gender input type radio name equal to gender value equal to male copy the same thing and paste it for the female value is going to be f refresh i have some space so this 4 is not needed once it is it it will be only needed when we use id and in this case we are not going to use id for that so let's leave it as it is and then we need a date of birth and what type date name equal to date of birth and the class form control actually i should have copy pasted the form it is getting so much time and then we need education one education to education three so it is going to be the single and type text name is going to be education 1 education 2 and let's add one more thing for education three one two three and uh country profile peak we have already added so for country let's get from the google list of country or sql so you will get a rocket file so from here you can just copy paste into the hq mysql text box so it will create the login i just copy it from here let's copy it from here and from the bar till the bottom i think i am able to copy it copy ctrl and paste and let's change the table name in trees countries is totally fine so on the mysql click on the database click on the sql and just paste it click on go okay the table will be created now if you see country table is created and the data is populated fine now let's add the same countries so here we would be adding select tag and the data we will be fetching it from the database so so we'll use the same place over here open the php and here what we are going to do is we are going to write the sql query for selecting so we have used the select over here so let's copy that we don't need this numbers copy till here and get into the profile page and now we want to select all from countries c o n t r e s we don't need where clause result let's change the variable name sql sql country result country and select star from country and if we don't need this actually the data will be there and we just need the let's use this or let's use this nationality uh yeah no short name let's try to echo let's see how does it looks we will just get the list what we do is we'll create a html option tab concatenate and again refresh and now just a condition is available what we have to do is let's create a variable called options and we'll echo actually the thing is i'm just fetching the first value we have to run the while loop so here is a code let's copy it now let's try now you can see the list of countries available fine and then this is not so on the edit profile we have some list for now let's skip this and let's work on these fields other than profile pic so let's get all the name and we need to add value equal to let's get the knuckle and here the name is going to be fine now let's get all the names country i'm sorry for that we have data we have gender we have about and we have profile pic which we will leave temporary for now so in the submit button if the submit button is set let's see the form submit value goes to same page profile.php and if you notice we have success and error message and if we click on submit and if it is set then we will get will fill all the input field value which we will get from the request and now i have filled all the values along with the date adder we don't need this token and we are checking either if these values are not set then we are adding a ctrl b above let's let me fill this all values fine i have added so we don't need this male functionality and we just need the insert part we'll just comment the select statement which is not required for now and now we have to add the relevant fields we have to select the table name which is profile we need about gender date of birth education one education education let's see three are the names which i have already actually given i believe it is cd1 no the full format and finally we have country and now we have to insert it gender data education education country and we just have to add the id as well which you'll get from the section so on the login.php we'll get this session and save it here i will pass this user id and the column name here is user underscore id fine now or let's keep the success message as profile actually it should be created but let's add updated now let's try to see if there is no error line double one nine control g double o nine curly brace missing so this is sorry this is what else and this is for the condition let's minimize this so it is for now so let me add mail select a date of birth education anything submit line number nine control g9 it could not find the about so we don't have the name about name is actually there let me check again name is generation header see whether it is inserted no so before inserting let me record these values so we can understand whether we are getting data or not i'm sorry mail data worth anything test test test submit so test assist everything works fine data or date of worth is also working mail is also working but about is not we could not get the about what is about this making issue actually name is already there i'm sorry for that male data submit now education is not available i think i have given edu 180 to 83 on line number 38 ctrl g38 submit and profile updated let's check the data and if you see the data is inserted properly and the date added is not proper let me see why country i have not added the date added fine let's check thank god let's select 25 december test test test any value click on submit and if you see the data what we needed is actually added fine let's get into the second section section now if you see we have a problem here since we are logged in and once i click on submit button my same values are getting inserted more than once so that should not be the case that means if i am the user 11 so that means the data related to user 11 should be only one on the profile page but here on each submit it is getting inserted again and again so that should not be the case let's do it so if you see so let's type uh bsc uh hit ss hsc ssc dedication in india so fine now on page load what i need is i want the value to be displayed and fetched uh displayed here whatever values is here so right now the u3d 11 is locked in so the lock-in data should be displayed over here so let's create that so for that we need the select query on the top select star from profile where user id it's equal to the session id so let's get this and make it at the top so it will be available for both of them where user id equal to this is an id if you get more than one if it is equal to one that means you are going to write update query if it is not one that means the data is not there then you need to write the insert query so which you need to have let me remove this cut this and on the insert so here it is what getting inserted paste it over here and get the insert query and paste it over here and now we will write the update query fine that's good check the scope is available just to our naming convention naming confusion so here as i said here it is going to be update query so before that we need to fetch all the values we have used a while loop here likewise while selecting select star let's have it over here and let's have the select question and here the sql query is going to be select and uh let's add the suffix as this is and on each file will fetch the value and give it into a variable so we will be fetching the column names starting from about equal to dollar about likewise let's add the suffix to row as well gender education one education two education 3 and then the country which is and then data added which is not required for now fine now let's add let's have this name uh variable let's try to echo first we don't need while loop i believe because it is going to be a single value so let's echo out all these about semicolon and above should be patched and displayed yes likewise let us display all the values education 1 education 2 education 3 refresh and these are the values which is fetch from the database fine that is great now let us display these values on the input rate on the text area php ternary operator is set colon if it is set then display this or display this we're checking if it is set which is about about this set then display about let's leave it let's refresh and there is no the value is empty now we should have echo here and if i try to refresh you could see it the same way i'm sorry for that let's try to add up for all actually here should be value equal to let's add single quotes because we have added double quotes already inside and here the value which we have used is education one two and three for a refresh we could see the values and let's try to add this to our date of birth as well actually the data what is missing find leave it no issues now if i refresh the value stays there and here now we are going to add if condition just like we did now we don't need that news we just want the value to be checked if it is set ch ked if the name of the gender is set and gender is equal to gender is equal to m then make it yes it is checked when it is working let me add this to this as well by just changing it from male to female refresh females check equal to this is how it should be fine so if i make it f here and refresh it's female now but if i make it m and refresh now it's male fine it is working so now it's time for the update so we are successfully able to fetch the values and display it now after writing like i am vishal and i would like to add some more value and if i click on submit [Music] here it should get but it's not updating which we will see in this in the next section so now we are successfully able to fetch the values which we have already inserted and able to display on the field now we just have to write the update query so here on submit what is happening is it is fetching all the values from the input field and if it is not empty then again i am going to check whether the id is already present if it is present then we have to write update query else we need to insert so here is the code where we have a query so let's get the update query code fine so if you wish fix sql update so here the table name is going to be prop profile set some values with comma separator dollar likewise we need to add some more values eight and here the id where id equal to user id which you get from the session which here which i have used fine now let's see what are the values which we need to update about these are the table names let's add proper table first the this is about and this is value which we fetched from the input field dob is already not there so and this is stable education one and let's see what are the values is et1 which are fetching from the input field likewise education edu and then we have education 3 edu3 and then we have country same country and financed and i believe i have added the date for it is not available it has merged select gender so let me select gender that's two times select 20. so let's add the value attribute if it is set then display the dob so let's check by everything able to display that means we are on the right path now i believe everything is set so let's try to see what is there so if you let's change our about i am vishal and let me add my name as well i'm not able to type i'm not able to type with mr refresh i could see i could type in the text editor that means my keyboard is working but i'm not able to type here yeah it's working now so if i click on update i should see we shall work instead of so i can see so let's not the data does not seem to be updated refresh profile let's try to update some other thing click on submit profile updated subject successfully and we should see we could see the ymong non-browse and here it is not changing localhost but okay let's make it female and click on submit and i'm not able to update that is strange let me log out and log in with id 11. hide 11 ui mark 1 submit profile okay let me type ui monk and click on submit profile it is still but here it's your monk there is a problem with update let me see what it is actually there is a naming conflict between these and these so fine let's add underscore you underscore it fetch down alt z click likewise let's add for this as well fine if i refresh and let's try to change click on submit it says updated if you see and click on after submit it is not getting updated i believe the user ready is causing the problem like we could could not able to see where we are safe wonk even though i'm not on submit let's try to refresh you are monk female click on submit browse you are monk male but i have clicked on female it is not working let's try to make it again vishal click on submit refresh but on refresh here i am long after submit what is happening is that it's not able to fetch the values and display it so for that let's see what we can do after submit it is not able to fetch the values and display it so it is because we have already used it over here so let's try to copy this and paste it after update if it is successful then do this that's right you are monk by vishal click on submit and you can see you imagine let's try to make our update as 25th december click on submit and let's see 25th december bac iit hsc with id and click on submit and yes we could able to load it but if i click on female and click on submit it's not able to see let me see why just because we have not added gender here gender equal to dollar gender request let's make this video click on submit gender underscore female summit i'll be fetching it properly gender fetched and the column here is comma is fine and here also comma is fine once this time if it's right click on submit and yes click on mail and type i am bishar fine i believe the space is coming from the text area values sorry for that and yeah the space is gone click on start now let's work on the update section so choose file section we could able to update because if you see the data is getting internally once so now let's work on the image section so the very first thing once i click on submit what is going to happen is it is getting into the function called is set submit and here there is two sections for insert and for update so just above this let's add our file code and here this is a name so let's get the name of the input field profile pic and to use this file we have to write an attribute called encrypt type multipart data multipart form data fine now you you can able to get the input field values so if i show you let's push it inside our images folder which i have saved here open here present it is blank so let's try to upload so i have downloaded the images from google which is my image so let me choose download an image let's see one so if you see and present the images folder is blank but if i click on submit online number 46 and 47 so here i have to write values uh using request actually i have not refreshed it so if you see it is blank for now so if you click on let me choose this one if you see our name is one dot jpg our image name is one dot jpg if i click on submit click or update it successfully and on the images folder you could see the uploaded image fine it is working if you want to see more let's check out another image this time number two or jpg click on submit and on the images folder you could see the two fine but the thing is i have used the random number random name to save it so that random name would be the value from between these and then i have added the date and time and finally i have pushed the images to the location which is this one this location fine now so for now we can have the file names this is which is this one new file name so why don't we update and insert these values so get the profile pic equal to single quotes comma here new file name will pass a new file name likewise only insert as well profile pic will have the front and this is a new file name which hosts our file name come on records dollar profile name let's try let me delete this value these two images so for now section is blank profile column is blank so let me add a profile this time we'll choose one so after submit the images will be populated to this folder then it is popular to this folder and then the image and fine now if any case you want to see the image what you can do let's add img tag and let's give the height equal to 300 and the same width and here we'll add the php is set question mark on and here we get the file name on the select this is the column name which will store here the same way after update we have used the same thing fine now we will test it if it is set then echo images slash then record this let's try this echo double quotes images concatenate let's try to refresh let's see the src inspect actually what should happen is the images the data which we have seen here should be displayed on the src so this is playing as taller profile pic it's not a string it's a php variable refresh let's test again and now you could see the file name itself but images i could not see the images so for that let's add dot i refresh i should fine now if you want add vr or we'll make this inside a column dot row dot call it six and again dot call six this is for image and this is what image upload bye but let's try to upload one more value per image which is this one click on submit and yes images updated successfully and let's see some values let's see some uh profile let me send some user id and check whether we are getting without any error logging login profile and yes it is showing us a broken image we don't want that so you want to add php if is set this profile pic variable and then only show or else we close the color bracket now it's gone now let's try to update let's use the first one and let's try i'm ui punk the 26 vscit see jesse is an ssc and whatever click on submit and on the profiles page you can see two data all right click on profile [Music] and yes the value which you have filled is available that is that's it for this video get into the description

Channel: UI MONK

Views: 1,372

Keywords: Create facebook using php mysql, social networking website tutorial, php mysql live project tutorial with source code

Id: t_zeIZPGBgY

Length: 71min 59sec (4319 seconds)

Published: Tue Dec 15 2020