Creating Profile Page With Update Profile System using PHP & MySQL | With Source Code || Pure Coding

hey guys welcome back and in this video we are going to create profile page section basically this video is user management system part 3 so if you did not watch the previous video then you can watch that i'll provide you the link in the video description and also in the i button so let's start [Music] so basically in this video we are going to create first of all user register here so after installing user logged in so i may log in [Music] here [Music] and i don't need to password here okay okay so here user has been logged in and now user can log out here only but uh i need to show here the user profile and user photo actually so user can upload him photo and then edit his some details like name and the password so for that i'm gonna i'm gonna start this so here basically i have opened this code editor and i have already started the xam server here so here i have already start the apache and mysql server so you just start this first and then now i'm gonna open this welcome.php file and here first of all i will change this one so i'm gonna write here profile page and use that [Music] and then we have here logout button so i don't want to do here local button delete this one and delete this echo session underscore user id so i don't need that so here basically i need to design first so for designing i'm i'm gonna use here uh markup first so first of all right here container so this container here and in this container we need only we need first this form actually a user password and then use a name and then user uh profile picture upload option so and for that i'm gonna start the form tag here and action is the blank and the method is the post and i'm right here uh dot input box basically i have created a div and the class is input box so in this div i'm right here input tag and then we have here the input type text so right here id and this id is uh i'm gonna write here full name and the name is also this full name you can use the other things here like only name or you can name other things so i'm gonna write here this is the record and here as you can see i'm a level here basically so for level i need this id to enter this four tag here so i'm gonna write copy this full name and paste it here here and here level i have called it in the full name so let's check it out first thing first so i'm gonna refresh this and here's the design so i need to create some more inputs feel like first thing is we have you the full name and then we have here the email then we have okay i think i have created here the username so i will check it here paste my admin so and check that i have created username or not so [Music] here's our database and use the table and okay we don't have created this username so i to show this full name and email and also the password change option so here's the first we have here full name then we have here email then we will add these three things into the email also text is email also input type is email basically not text and i don't need here the password [Music] and this is the password and change this text to password [Music] i'm going to change this to c password c card sword means the cancel password you can use here the content password also but i'm going to use your c password basically it's uh it's a short word you know so password and the type also the password here and then here i need a button for so first of all i need to create this div actually and put box at this the div this div actually then inside this div i'm going to create a button here and then type is also submit and i will set a class here btn and here i need to write update profile profile so basically user can't edit email so for that and disable this email field this is the vault and now let's check so here's that and here basically i to aim include this css file style.css so that i'm gonna write here link tag okay so link [Music] and real and then right here stylesheet it's sorry here and here i need to pause this style.css part is there so i'm going to check it out here okay so here's that but i don't need this here so i'll go here and i think it's for the container class okay so i need to change this into the wrapper so so now it looks good so let me open this style.css and at the bottom and put this layout so first of all okay so first of all i need to add here the attractive h2 and i'm gonna say here profile okay so i'm gonna refresh so here's that profile and here i'm gonna okay so here first of all here profile and i do upl uh i need a input file type because i need to upload an image here so for that i'm gonna copy this one here and paste it out and for is change it into the photo and use that photo here type is file and accept image and start it means images it means the all images extensions like jpg jpeg png format and etc so refresh here's that so i'm gonna go here and the wrapper i'm gonna set the width maximum width first so maximum width is 500 pixels and then width is 100 and here basically i'm going to set a box shadow so this box shadow is uh right this one zero zero five pixel and then our gba so i'm right here the black color and the opacity is the ten percent okay so i need to uh press the control plus f5 for clear this catch all right so now it's a good so i'm gonna center this so i'm for that am may write here margin z a margin auto basically so now let's check so here's this and i will say this body height 200 100 ph minimum height basically so i'm gonna write here style tag and right the minimum height is 100 v8 100 ph means 100 before so i'm right here also so write here a class basically so it's easy to create this layout here so i'm gonna write this body class the profile page for file page and i'll copy this one and here's that and paste it here and it displays the flex justify content center align items center and the minimum height is 100 vh so now i'm going to refresh this so here's this this looks good and i will change this background color and to this one so for that i i have this color at the top okay so here's this color and i'm gonna copy this one to this profile page body so i'm gonna write the background color is this so i'm gonna refresh this one so yes this so it looks good and i'm gonna change this background color on this wrapper background is white and now refresh so here's this it looks cool and now i'm gonna change the border radius to four pixels and then we will go in this heading one h1 text a line is the center still this h1 is this and we'll also use the height here minimum height minimum height is the 500 pixels or something like 600 pixels so let me refresh this one so now it looks good okay so here's the text and the center is not working okay so i have used here basically h2 not h1 so i need to write here h2 [Music] okay h2 and color is actually font size is 2 ram all right so now we refresh this one so it looks good and i will use the padding here so padding is 2 rm so now it's looks good in the wrapper we have here this [Music] input box so i'm copy this one and here i do right here the width is 100 percent and the height is the 15 pixels also i'm going to use the here margin bottom margin bottom is 1 rm or something 1.3 rm and in the last child we don't need the margin bottom so last child i'm gonna use the margin bottom is a zero now let's check so here's this so i need to do something okay so i'm gonna inspect here's i think here's something wrong okay okay in this form here basically we have the padding so i don't want this padding in this form so for that i need to remove this padding here so we have padding already uh in this top layout code because i don't want to edit the top code so here i have the form and the patting is the zero now let's check so here's this we have we don't have any panning here and after this h2 tag i'm gonna use margin bottom is [Music] one rem and here's another user position a relative and here basically we have username uh i think input input field okay input field and i use the width is the hundred percent and the height is hundred percent [Music] so i'm gonna refresh this so here's that so it looks good now and i'm gonna use here border [Music] one pixels solid hash ee and outline is none also border radius is four pixels here and now let's check so here's that and i need a padding here basically so padding is uh 1.5 rem so i think one idm is enough for here okay so now it looks good so here basically i don't have any border he actually imagined so i will check it here okay so here we have this one hide and we have level here so for this level we have an error actually not here we don't work here perfectly so i'm gonna delete this label and i will use the placeholder on this input here so i'm going to delete the all labels here first so because it's level is not good here so i'm going to use this level on this input as an input file so it's good for user friendly so i'm gonna use here all the things i need to use placeholder and in the place holder and then right here enter full name or like full name and end up for email and i write here email address press rest and password and write here password and confirm password confirm password so now let's check so here's this and for this photo we have this and basically i'm going here [Music] and we have this design is looks good so i don't think it's a need more customization i have customized this button basically so if this button is not looks perfect so i'm going to use this button so go with button because i'm going to use this one here right now and the padding is you know 7 rm and then 2 rem so here it looks good and margin top is one area [Music] okay trying to use here display block and with 100 so the okay so it's uh i think i need to use this margin top i think it's not working so i will check it out here so here we have this button and okay it's working but i need to increase the more margin here basically and this input box i don't want this class here so i relate this class i will delete this class basically so i will delete this here plus and here i have this button so i'm gonna use here two are a margin top and now let's check so here's not bad so we have completed this design part and now i'm gonna dynamic that so for that i'm gonna go here and first of all i need to enclave here the config.ps file that's our database connection file so include and here and to pass this config dot page file you can say the dot php this file is this file hour and now here basically i need to write php tag and here i need to write sql query select star form users where clause basically we have here user underscore id in this session variable session global variable so i will use this one for selecting uh the data to the data basically so if you want to select the all user data then you don't want you don't need to write this where close basically here and right here where close id is equals to uh this id i'm going to use curly braces here because i need to use here the array from form and here i need to write result variable mysql acquiry and our connection variable first and then we have the sql variable basically this connection variable is defined on this config.psg file here's that and now i need to write i need to check basically this result my screen numbers numbers uh this condition data is available in our database or not so you're going to write past this dollar result variable list and then we have to condition this into up to zero then we will show this quality so here first thing is we we have a while loop we don't want to use here while loop then it's okay so uh here we have only one data so i don't think it's need the while loop but another i'm gonna use this while loop here you can use only this variable dollar oh and the mysql like that's a sock and the first arrow also and results so you can use this only here because here we have only one data so i don't think it's me the while but i have write it here so i'm gonna i'm gonna close this page attack here and then start it again here and here's the all things so i'm gonna cut this here and move it into here so in this value i need to write here value and for full name we need to write here dollar php equal and here's this variable here and then we will start and this protect post and here's that uh we have here the full name so i need to write this as it is otherwise it's not working so i'm gonna write a full underscore name that's we have in the database so i'm gonna copy this here and for email it's also and then password and then confirm password so this email and right here email because we have here this email and for password we have the password here password and the password is the same i don't need this stock in here so now i i need to check it out here so here's that and we have the name first then we have email and then password we have here and we have this photo section so i need to create here user select a photo here first and then if user update his profile then it's uploaded into database and show it here basically so for that i'm gonna go here at the top and i'll check here if it's set so here basically i need to give a name on this button so i need to i have to give a name the submit and also this form type is a post otherwise it's not working so i'm gonna copy this one here and dollar underscore post paste here and so i need basically this name and this password also i need to update these things also here and for that i'm not use here dollar first thing is we have the dollar full name so dollar underscore post we have this full name here name and we can use here also the mysql here script string for more security on this form mysql variable is kept string string and first parameter is the connection variable and then we have the variable that i need here so then we have the password [Music] and then we have the confirm password here see password and i to right here md5 because i need to m encrypted this password so now i need to check first this password and password is same or not so right here password equals triggers truth dollar c password so it's same then we will continue the other parts otherwise uh we will go here script alert and i'm gonna close the script tag here and this alert is the password not matched password not matched please try again and okay so and check it out here so first thing is we have the name here then email i don't need this email uh to change here so for then we have this password so i want to uh use the anything here in the password but two passwords are not same so i'm gonna update this profile here okay so we have the photo is required so i need to select the image here so i will uh use the image here this and update and then we have the password not matched and if i use your test test in the two or two fields basically then we will select the image here and then update profile then we don't have any errors so it means it's working and now here i need to write here i took i need basically this photo so for that i need to add a parameter in this form tag this form tag basically and he does that is ink type multi-part form data and now i can use dollar underscore profiles super global variables so let us profiles so i need to add a variable here first okay so first thing is i need to check the array here go under print and start and here basically i need to pre tag for formatting [Music] let's check so i'm gonna resubmit this one and we don't have anything inside so if i select a image here and then if i update this profile then we have something here uh so first thing is we have this photo here and in this photo array we have here the name type and then we have tmp underscore name we have error and then size so we have error is the zero so basically i need to here basically this name and this tmp name and then size here so i need this three here so i'm gonna delete this things here so i'm right here if is set uh this dollar underscore files photo dollars profiles for two [Music] and then we have your declared variables some variables so first we have the uh name actually photo name for two name so here's the photo name is this one so for that i'm gonna use this variable here and the second parameter i'm gonna use this name and i need the three variables so i'm copy paste it here and then we have the tmp name here for pro tmp name and then we have the size for pro underscore size so now and check it here the size is up to 5 mb or not if the file size is up to 5mb then it's reject to upload the file so for that mr right here dollar for pro size up to 5mb so basically i need to enter here the size in bytes not mb or not kilobytes kb's or gigabytes so i need to for that and to open the calculator here i'll open calculator and basically here i need to write 1024 multiple to 1024 it means in this in a gigabyte we have basically in mb we have here 1024 kbs and in a kb we have 1024 bytes so i need to equal this so we have this so this is a mb 1 mb in bytes so and multiply it into 5 mb so it's 5 mb invites i'm going to copy this one here and paste it out here so i'm gonna remove this comma otherwise it's not work and here up to 5 mb then we will go here okay so this script i will copy this script back here and paste out here and right here photos size photo is very large very big also so very big and here maximum maximum file maximum photo uploading size photo uploading size is 5 mb so here's and else part we have to update this query here so for update and then write 10 dollar sequel and up that into the users table we have this table here so here's the usage table and the columns if first we have this full name full underscore name and then we have here password password and then okay so i want to create one more table here named uh photo so i'm gonna create one more table actual column not table i'm right here photo and uh this end i will use this is worker and then 255 and save so i'm gonna go with users and basically here we have a problem so here if it set this photo then we will insert this so it's i think it's not problem okay so it's right here okay so photo we have attempt here for two and the values is values is these variables and these variables okay so photo name and i'm gonna use a unique photo name so i'm gonna use photo name for tone new name i'm gonna declare a variable basically and here i write random numbers so we have the random numbers here and this is the unique number also generate the unique number and the random number so i need this because because if the two photo name actually two users photo name is the same then it's overwrite the older photo so for that i need to use your this random function rand function for generating the random numbers so first we have here our full name dollar full name so this variable is defined here and then we have the password then we have the photo new name at this variable okay here basically i need this also because i need to use this file name also otherwise it's not working so i'm going to copy this one here and paste it here okay so here's the new name opening so i'm going to paste here okay and here i need to write a where clause that id is equals to dollar session id basically because otherwise it's updated update to all the records and we have the table so here we need to copy this one and paste here inside curly braces all right so now i'm going to write here dollar result and my sqlite query dollar connection variable and then dollar sql variable then we have here if dollar result is true it means this query is updated stressful then we will show a alert message [Music] right here profile updated successfully okay so in the else part i'm right here [Music] i'll write your profile can't update all right so now i'll check here so i'm gonna replace this and here as you can see i'm refresh this also here we have this name full name is musab and the password is this so i'm going to change this into web developer or developer also developer and password yes the password and in the photo uh okay so in the photo i will you i will use a photo so here i have updated the profile and we because we have not updated this profile uh so i think we have some errors here so we have if is set to underscore photo then we will show this it means this photo is not set here so i will remove this set because it need to set otherwise it's because it's required basically so trying to refresh this again i will i'm gonna resubmit this point so now i'll check here okay so we don't have updated so i'll test again here and password is and here's the image update okay we have some errors i think here password match then we will execute this query here uh not up to 5mb then we will show this okay so here i have an error and we don't have this led message because we have here this and this also so i'm gonna use it cannot update it so i'm gonna submit this form and we have the error here so i will show here the error so i'm gonna use connection and object is error and i'm going to submit this please submit focus on submitting okay i think here we have also a single question use equal here so here's this let's go and i'm gonna submit this one so here we have current updated and we have a error here basically oh this is you have an error your sql syntax check the manual that the parents to your media db so professional write syntax to know full name okay so i think here we have an error so full name password and photo value is this and then we have here the password and in the password we have error here so i need to check it here okay so uh here we have the full sequel quality is wrong because uh i don't need to write looks like this so i need to write it like this i mean right i'm gonna say let you set and use that and we have here the full name for full name we have this variable here and the password we have the password and photo we have this photo photo new name and now let's resubmit this form so we have the profile update successfully and we have this profile data here so refresh this so we have this here so it's working so i need to now i need to uh upload this uploaded image here into a folder so for that i'm gonna use here i will create a folder here basically uploads loads and in this upload folder we will upload the all images so for that after through this result we will upload that so for that i'm going to use here move upload files move uploaded file so here basically you need to pass first this photo tmp name and then we will pass here this photo name and the photo path where you want to upload so first thing is we have here uploads that's our folder name here and then slash we have this photo new name so basically you need to write here after tmp name we have this comma and then we have this uploads directory then we have concat to this file name summaries okay so i will refresh this and i will upload one more image here this image and so first check here this folder we have no any image so i'm gonna update this profile then profile update resourcefully and now i need to check here we have this image and this image basically i have uploaded on there so this is the image that i have uploaded so basically i need to now show this image uh here so for that i will write here div and okay so i write here image image image tag and in this src we need to write uploads slash we have the file name so for first we have the uploads and then we will write php tag equal dollar raw variable that we have defined here here we have this photo so i will write it here for [Music] and now let's check so i will refresh it here so here basically we have the image better it's a weed and the hide is not good so i'll write your width is 115 pixels and then hide is auto so let me refresh so here we have this image here so here's my video hope you like this video and please subscribe to my youtube channel and press the bell icon for new latest updates of my channel thanks for watching [Music] you

Channel: Pure Coding

Views: 11,493

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

Id: GVwRDehnXjA

Length: 41min 14sec (2474 seconds)

Published: Wed May 19 2021