PHP Complete Registration & Login System Using MySQLi - Complete Guide

hi everyone and welcome back to the illusion in this video we are going to learn how to create this amazing registration and login system with PHP and MySQL database we are going to start with an empty project and build this complete registration and the login system now if we just take a look at this registration form then in this form we have the profile image where you can upload a new profile of the user and we have the first name last name of the user email password in the confirm password so we're gonna first validate all this value using client-side using javascript and then we will sanitize all these values using PHP script so you can secure the database from SQL injection now let me just fill this form and register as a new user now let me first choose my profile picture when I click on it this will just ask me to specify my profile picture for example if I just specify this profile open it you can see I have my profile here now just sort of that I'm gonna specify my first name I'm gonna say here daily Dushan then I'm gonna specify my email here so I'm gonna specify demo email here in example antedate gmail.com then I'm going to specify password confirm password now what if I just forgot to add confirm password and when I try to submit this form you can see a message please fill out this field if I fill this field and forget to just check this checkbox when I click on this continue I'm gonna have a message please check this box to continue so I'm going to just click on this checkbox and accept all the terms and condition and click on the continue button when I click on it this will just redirect me to the login page where you can see I have my profile picture and now I just want to specify my email and password for the successful login so I'm going to just paste for here email an example antedate gmail.com then I'm gonna specify my password and when I click on continue' you're going to get all your information on the main page so this will just open the index dot PHP file and display your all information here you can see we have the profile picture then the user name and the first name last name and email so in this tutorial you're going to learn everything about a registration and the login system using PHP and MySQL database so make sure you click on the subscribe button to get the latest videos and now before we're getting laid let's get started now to start this project you need editor I'm using phpstorm editor to clear this project because I want to explain everything more clearly I'm using phpstorm editor I will not recommend you to use this editor because it's paid you need to pay money to get this editor so instead of using this editor just grab the vision studio code editor and create this project I want to explain everything in detail that is why I'm using this editor in this editor you can notice I have this PHP directory so inside the server I will assume that you have Sam server install in your local computer and I will assume that you started' exam and the MySQL to execute PHP and create your database now let's start and create your new project so you need to create a new directory in the htdocs folder of your zamp server you can notice here we have the sample path and i'm gonna create a new folder inside this PHP so i'm gonna right click here and say new directory and i'm gonna specify a project name so i'm gonna simply specify here register and when I press ENTER I'm gonna have my project directory now inside this project directory I'm gonna create a new file so I'm going to right click here and say new PHP file so I'm gonna select the PHP file and specify the name for this file register and when I press ok this will create a new register dot PHP file now inside this dot PHP register file I'm gonna just get it off this PHP syntax and here I'm going to create a simple html5 snippet so I'm just add exclamation mark and press tab when I press tab I'm gonna have a simple html5 snippet we have the HTML tag the heading and the body so I'm gonna for specify title for these registration page so I'm going to say here registration down in the title down here I'm gonna link my style dot CSS file so I'm gonna just right click on this registration and say style dot CSS I'm going to create a new file with dot CSS extinction so I'm gonna say here style so I'm going to create the new file style or CSS and link this file in the head section of this registered so I'm going to say here link and in the HTF attribute I'm gonna say style dot CSS now once I have this dialog CS is I'm gonna add bootstrap in this project because I want to specify predefined styling for this registration form that is why I'm using bootstrap here so to add full strap in this project I'm gonna simply open my browser and inside the browser in the URL I'm gonna search for get bootstrap and I'm gonna just open the gate bootstrap comm just click on this get started and just copy the CDN so I'm gonna first copy this CSS CDN base Ted just before this dialog sees this file right up here just like this and then I'm gonna copy these script files and paste it just before this closing body tag right down here now you can see the bootstrap is now ready to use what I'm gonna do is I'm going to create a new folder inside my registration for the JavaScript so I'm going to create a new directory and name the directory J's and in this folder I'm going to create a new file and I'm gonna create a JavaScript file so I'm gonna select the JavaScript file here and say main dot J's I don't need to specify dot J's extension in this editor because I already specify the JavaScript file so I'm going to just press ok button when I click on OK I'm going to have the main dot J's file inside this project I'm going to leave these main door J's as it is and link this main door JS just before this closing body dad so I'm going to create here a script tag and in the source attribute of the script tag I'm going to link the JavaScript folder so I'm going to select the GS and then I'm going to select main dot JS file very simple right now I'm gonna save all the changes and inside the body right here I'm gonna start creating the registration form so I'm going to first add here a command html5 command and say registration area and I'm gonna close this come in so I'm gonna copy it and close it here so I'm gonna just specify here this is the closing registration so this closing command will indicate this is the closing registration form now in this command I'm going to create a section tag and I want to specify ID to this section so I'm going to specify hash here and say register when I press tab I'm gonna have section tag with ID register now if you're using standard HTML then you can't modulus your HTML code but in PHP you can do that you can separate this header and create a separate file for this header you can separate this footer and you can separate this main section of your website you can do that in PHP and this is the best way to create any project in PHP so what I'm going to do is I'm going to just grab this section and put this in the main tank so this will describe this is the main section of this website so I'm going to just take your main and specify ID main area inside this main tag I'm going to paste my section just like this now what I'm going to do is I'm gonna just modernize this project so I'm going to separate this header and this footer in the separate file so I'm going to just right click on my project and select new and create a new PHP file so I'm gonna select PHP and I'm gonna just say here header dot PHP so I'm gonna create header or PHP file and inside it I'm going to just grab this header so I'm gonna just get this header from this main tag so I'm gonna just get the header from this opening main tag right from here I will just copy this complete header cut it from here and paste it inside this header dot PHP file save all the changes back to the register dot PHP file and grab the footer section of this website so I'm going to just grab this footer from this closing HTML grab it from here till the closing main tab because I added this main tag in the header that is why I'm going to grab this closing main tag in the footer I'm gonna select the closing main tag as well just cut this code from this register dot PHP file and create a new file in your project so I'm going to create a new PHP file and say here footer so I'm going to create a new file photo dot PHP and I'm gonna create it off this page with syntax and paste my footer here very simple now I'm gonna save all the changes back to the register dot PHP and now I want to include both this file in this register dot PHP so what I'm going to do is I'm going to just call PHP syntax so I'm going to call here PHP and inside it I'm gonna first call header of these websites so I'm going to create a command header odd PHP and using include I'm gonna just include header dot PHP file here and just start that at the bottom I'm gonna create a PHP syntax and just create a command footer dot PHP and just include and I'm gonna include here footer dot PHP save all the changes and just sort of that I'm going to just create here h1 heading tag and say registration save all the changes I just run this file in the PHP server so when you execute your register dot PHP file you can notice you have the registration text here so your file is now successfully executed in the PHP server now let's move on and create a beautiful registration form in the PHP so I'm gonna just back to editor and inside this section I'm going to create a beautiful registration form I'm going to just struggle this window on the right side and here I'm going to create my registration form so I'm gonna just get it off this h1 heading tag I'm gonna add here at 4 so I'm gonna call a bootstrap last row and I will remove marching from this row so I'm going to say here margin zero to do more margin and then I'm gonna create here four columns so I'm gonna say here call the g4 and now what I'm gonna do is I'm gonna just create here h1 heading tag and just specify register save all the changes and just reload your file you have your register here now let me just add some classes to it I'm going to add a class to it which is login title and text card save all changes and just start that I'm going to specify here offset to this column so what I'm going to do is I just want to add some space to this form so I'm gonna say here I'll say it LG to so this will add to column space to this register form so when I save the changes and execute this file you can see I have space at the left side of this project so what I'm going to do is I'm gonna specify for column space to the form and I'm going to leave two column space from the left side of the form and you specify for column space to this registration form you can notice here I'm using call ng for class so for column space is only apply for the large devices when the viewport is less than that the column will automatically take 12 column space just start that just after these into one hitting tag I'm going to create here a paragraph and I want to add some text here so I'm going to say here register and enjoy additional features so I'm going to just add some message to the user then I'm gonna add classes to it I'm going to first and padding one so this will add top right bottom and left padding to this paragraph then add margin zero and then I'm gonna add my custom class which is found open to so I'm going to specify for Ubuntu one family to this paragraph and then I'm gonna call a bootstrap class text black 15 so this will add light grey color to this paragraph when I save all the changes and reload the browser I'm gonna have this paragraph here now just sort of that once I have my paragraph right here just started this paragraph I'm gonna create here a spawn tag and inside it I'm gonna say I already have and if you already register user then I'm gonna just add here a link for the login page so I'm going to say here I already have and in the anchor tag I'm gonna say login dot PHP and in the text I'm gonna specify login just thought of that I'm gonna save all the changes and in the project I'm gonna create a new file and name that file login dot PHP so I'm going to create a new file login so in the project directory I'm going to create login dot PHP and I'm going to force a here Iko in the single code I'm gonna say login dot PHP that's it save the edges and just start that I'm going to just reload this browser you can notice I have the link for the login dot PHP file here now what I'm going to do is I'm gonna just send her all this text so I'm gonna grab all these three lines create a new division tag right here with the class text Center so this is a bootstrap class to Center all the text along with that I'm going to add padding bottom five so this will add bottom padding to this division down and inside this div I'm gonna paste all my three elements save the changes and now and when I reload the browser I have everything at the center of the column now once I have this title just after this division tag right down here I'm going to create a new deal with the class of load profile image so in this stage I'm going to just allow a user to upload their profile so inside this division tag I'm going to allow user to register their profile picture so I'm going to simply post a Center all the text so I'm going to say here takes the center to center all the text and the image and then I'm going to call here a division tag with the d-plex booster class so this class will specify display flex flex direction row to this division down and to the Steve I'm gonna specify class justify content center so this class will Center this image so I'm gonna add here image and inside this image I'm gonna specify my camera icon now what I'm gonna do is to add this image I'm going to first create my asset folder and then I'm going to put all the images inside that folder so we can use it in this project so in the project directory I'm going to create a new folder so I'm gonna right click here and say new directory assets inside this assets I'm gonna have different images which I'm going to use in this project so I'm going to copy few images and put inside this asset folder so I'm going to just copy these images and paste it inside my registration inside this asset folder so I'm gonna right click here and say paste so I'm gonna paste all the images and right here you can notice I have these images inside this asset folder I'm using this camera solid SVG file in the source attribute so I'm gonna just place it right here in the source attribute I'm gonna first specify asset folder then I'm gonna select camera solid SVG image here save the changes back to the browser and just reload it as you can do this you have your camera icon here now just out of that once you have the icon I'm going to specify hero that build a cheese camara and now once I specify this old attribute I'm gonna specify class to it and I'm gonna specify class camera icon save the changes and now just out of that just start where these division tag I'm gonna just add here image and in this image tag I'm gonna just specify the profile image of the user so I'm gonna simply select the asset folder then select the profile folder and then I'm gonna select the default beard dot PNG file so I'm going to just use this default build dot PNG file for the new user and then I'm gonna specify here profile save all the changes reload the browser I have the profile image here then I'm going to specify here class and I'm gonna specify here custom class which is IMG and then I'm gonna specify a booster applause rounded circle so this class will specify border radius to the image say the changes and just start that down here just out this image I'm going to add a small tag and inside it I'm gonna simply say choose image and I'm going to specify here class which is form text and text black 50 save the changes reload the browser I'm gonna have the text here just out of that just start with this small element I'm going to add here input and this is the type of file so I'm gonna select here input type file because I want to allow user to upload their image that is why I'm using here input type file and then I'm going to say here class and I'm going to add a bootstrap class here form control file then I'm going to add name to it so we can access it using PHP so I'm going to say here profile upload and then I'm going to specify ID an ID is going to be upload profile save the changes reload the browser you can see you have your file input element here now I want to style this section so I'm going to just back to my project and open it style your CSS file and before I add any styling to this project I'm gonna post add fond inside this project so I'm gonna open the Google Forms so I'm gonna say here Google phones I'm going to open the Google phones and I'm gonna simply select Ubuntu font this one I'm gonna click on this select this phone icon I'm gonna copy this font so I'm going to copy the import statement and paste it inside the standard CSS file like this now I can use this font inside this project I'm going to close this tab this one as well and now I'm gonna create here root selector I'm gonna select the root and I'm gonna create a variable here with the name font one two and I'm going to specify here font family and I'm gonna specify here fallback radio which is mono space so this is the power back value of this bond just sort of that I'm going to create another variable with the name color border and I'm gonna just specify here we rally to it so I'm gonna specify here hex value like this and as you know in the registered I just added here for Ubuntu class so I'm gonna create this class in the standard CSS so I'm going to create here 401 to then specify font and I want a space over here in normal 500 is the width of the font then I'm going to specify 16 pixel which is the font size and then I'm going to specify the font family which is bond coupon to save the changes reload the browser this will just change the font family or this text now what I want I want to specify the same font family to this text as well so I'm gonna just specify here in the register dot PHP file I'm going to specify class to the spawn tag and specify point Ubuntu and also I want to change the font family outfit so I'm gonna say here text black 15 so this will just change the color of the text save the changes reload the browser this will change the color of the text and change the font family just sort that back to the style of CSS and down here I'm gonna first select the register then I'm gonna specify some planning to it so I'm gonna say here padding I'm gonna add 5% top and bottom padding and zero for the left and right then I'm gonna add background image for this registration form so I'm gonna add here background and in the URL I'm going to specify the background image so I'm going to select the assets and then I'm going to select the background dot PNG file and if you want to specify no-repeat you can do that right here and just sort of that I'm gonna specify here background size which is going to be cover save the changes and reload the browser you're going to have the background image to this register form now what I want I want to style this beautiful profile section so I'm gonna first select the register then I'm gonna select the upload profile image class this one I'm going to copy it and the standard CSS I'm going to paste it just like this and I'm gonna space for some properties to this class so I'm gonna say here position related just out of this position property I'm gonna adhere with to this division tag and I'm going to specify 10% weight to this Steve and I'm gonna add margin left is going to be Auto and margin right is going to be Auto just out of that I'm going to just add here transition and on the filter property of these division tag I'm gonna specify it second ease so when I hover on this image and try to change this filter property I'm gonna get the easing effect on this filter property save all the changes reload the browser and then just sort of that I'm gonna just create how we affect on this new gene tag I'm gonna copy it paste it down here and create how it effect on it so I'm gonna call hover and say here filter and I'm gonna just call here drop shadow so when I hover on this division tag I want to drop a shadow and I'm gonna say here one pixel one pixel 22 pixel and I'm gonna call here hex value so I'm gonna call here 7 5 8 4 BB so I'm gonna call here hex value Save Changes reload the browser when I hover on it you can notice I have this beautiful shadow to this image just sort of that I'm going to select this input type file so I'm gonna select this file so I'm going to specify ID to it so I'm gonna specify ID to this input type file you can notice I already have this ID upload profile copy it and use this ID right here so I'm gonna select this ID and to this ID I'm gonna specify position absolute then I'm going to specify top 0 then Z index is going to be 10 and wit is going to be 200 just for that I'm gonna say margin top is going to be 0 pixel so I'm gonna say here is 0 pixel so change is centered over the browser you're gonna have this input file element right up here now what I want I don't want to allow user to upload their image by clicking on this input file element instead of clicking on this input file element to upload your new profile image I'm gonna just allow user to click on the image and upload a new profile picture so I'm gonna hide this element so I'm gonna just back to my editor and doubt here I'm gonna say visibility zero save the changes so I'm gonna just specify visibility zero to this image and to hide this element I'm gonna just simply copy this upload profile and you just say here WebKit file upload button and I'm going to just specify visibility he didn't do it I'm gonna do the same right here as well oops reload the browser so this will hide input file element but now the question comes in how you can upload a new profile without this input file element let me show you how you can do that back to the editor and right here just select the upload profile and create here a pseudo selector before and to the pseudo selector create a content specify nothing here so I'm going to specify empty string then I'm gonna specify display:inline-block weight is going to be 200 height is also going to 200 and then I'm gonna specify cursor which is pointer then I'm gonna specify a border radius is going to be 50% and now if you want to see this solo selector I'm gonna just create it off this visibility property and right here I'm gonna say background color is going to be black save the changes and reload the browser now as I can notice this is your input type file element instead of specifying background color I'm gonna just specify here visibility:hidden save the changes now just our that I'm good at the specie of a style to these to this camera icon so I'm gonna just back to my editor and right down here I'm gonna select this is registered on the upload profile image paste it down here and I'm gonna select the camera icon class I'm gonna say here position absolute then I'm going to specify top 70 pixel then I'm going to specify with the video is going to be 60 pixel and I'm going to specify important keyword right here so this one's just override default with property and I'm going to say here filter and using this filter I'm going to change the color of this image so I'm gonna say here filter in word 30% and I want to just call here important keyboard just like this save the changes reload the browser this will just decrease the size of this image along with that this will just change the color of this image you can notice the camera image is now looks different just out of that I'm going to just add however effect on it so I'm gonna select this camera icon and on this profile when I hover on this profile I'm going to select this camera icon I want to add this filter property right down here and just change the value and I'm gonna say here 100% save the changes reload the browser when I hover on it this will just change the color of this image just art that I'm going to just add some style to this profile image so instead of adding the style inside these standard CSS I'm going to just back to my register dot PHP file and I'm going to add inline style to this image I'm going to add here a style and in this style I'm going to specify bit 200 pixel and then I'm going to specify height 200 pixel save the changes reload the browser this will change the height of this image just art that I want to just add some class to this individual tag so I'm going to just add here d flags to add display flex to this division tag and then I'm gonna say justify content Center to Center everything and then I'm gonna add padding bottom 5 save the changes reload the browser this will Center this profile image this camera image and this text now what I want when I click on this image I want to open a new window where I can select a new profile image so as you know we just hide this upload profile element using this visibility:hidden so instead of specifying here visibility:hidden I'm going to specify here background color blank so when I specify background color black here you can see we have this input type file element here when I click on it this will open a new window where you can select my new profile I'm going to just close it and instead of specifying background color I'm going to specify here opacity zero when I save the changes reload the browser I'm going to have that element right here when I click on this image this will open a new window where I can select a new profile picture for my registration as simple as that now let's move on and see how to create a form for the registration some colleges back to our register dot PHP file so just after this division time just start with this division tag right down here I'm going to create here an author idea with the class D flex justify Content Center so I'm going to create here a new division tag and center all the elements once I have this D inside it I'm going to create a form tag and in the action attribute I'm going to specify register dot PHP samples just returned all the posted data to the register dot PHP file so the action attribute specifies where to send the form data where the form is submitted so I'm going to return all the data to register dot PHP file to itself and in this form tag I'm going to add form elements but before I add anything make sure you specify here method which is post and I'm going to just add here in coded type is going to be multi-part I just started that I'm going to just specify IDE to this form which is rate form so it can access this form using this ID then inside this form I'm going to add a post wrap class which is farm row and inside it I'm going to create a column so I'm going to here call and inside this column I'm going to create here input type text specify name to it and I'm going to specify name first name then I'm going to specify here ID which is false name so I'm going to copy this name they stayed here I'm gonna specify the first name and the class is going to be form control and the placeholder is going to be first-name save the changes reload the browser and you can see here you have your first name input text box now just start that I'm gonna just copy this column and in the same row I'm gonna just create another column and this is the type of text then I'm gonna specify this is the last name so I'm going to specify name last name for this input text box that is going to be last name I will leave the class as it is and just change this placeholder last name when I save the changes and reload the browser I'm going to have a new input text box with the name last name now just out of that I'm going to create another text box here so in the new row just out of this division tag right down here I'm gonna create here a new flow so I'm going to create here form row and I want to add some March into it so I'm going to add margin Y 4 so this will add top and bottom margin to this form then I'm gonna create here a column so I'm going to say here call and inside it I'm going to add input and this is the type of email so I'm going to select input type email then I'm going to specify name email the ID is also going to be email I'm gonna add here class form control and that the place wonder is going to be email and I'm gonna add here and straight to indicate this is the required field you can see here I just added here asterisk to indicate this is the required field now what I'm going to do is I'm gonna just add here required attribute just like this just started this form right down here I'm gonna just copy this form row division tag paste it down here and right here I'm gonna just specify input type password I'm gonna specify the same password for the name so I'm gonna say here name password ID is also going to be password and I'm gonna space over here placeholder password just started that I'm gonna copy this phone bro class place it down here and I'm gonna just leave this type password and I'm gonna change the name so I'm gonna say here confirm PWD so I'm going to just specify name confirm password copy it ID is going to be confirmed PWD and in the placeholder I'm gonna say confirm password save as it is just start add I'm gonna reload the browser you can notice I have the email the password and the confirm password input Xbox now once I have all these input fields I'm going to just add here angry man checkbox and the submit button so I'm gonna just open my editor and down here I'm going to create a new division tag with the class from check so this is the booster plus and I'm gonna add here check in line so this is the poster class and just sort of that inside this dear I'm gonna add input and this is the type of check box so I'm gonna say input type checkbox' then I'm going to specify name agreement then I'm gonna specify my glance to it the class is going to be form check input and then I'm gonna add here required and now just sort of that I'm gonna save all the changes reload the browser you can notice I have this check box here just started this input I'm gonna add here label this is for agreement so I'm gonna stay here equipment and I'm gonna just place it right class to it so the class is going to be form check label then I'm gonna add pond to pond too which is my custom class then I'm gonna specify text to black 15 to change the color of this text and then I want to specify here text which is I agree and right here I'm gonna add anchor tag and inside it in the href attribute I'm going to specify hash and in the anchor tag I'm gonna say terms conditions and policy and I'm going to just specify here and streiko to indicate and this is the required field now you can notice I just specify here hash if you want if you have terms and conditions page you can space for that page URL inside these HF attribute I'm gonna leave it as it is save all the changes back to the browser and reload it as if you notice I have the text here and now add the last I'm gonna add here deep chin tag with the class submit BDM and I'm gonna Center this button from say here text Center and then I'm going to add margin by five this will add top and bottom margin to this division tank and then I'm going to add button and this is the type of submit button so I'm going to add type submit' then I'm going to add class BTN BTN warning so this is the booster class to glorify this button then I'm gonna specify down that pill this is the bootstrap class to specify portal radius to this button and then I'm gonna specify text dark to change the color of the text and padding x5 so this will add it left and right padding to the button just sort of that I'm gonna say here continue save the changes and reload the browser when I reload it you can see I have the button here I think I just miss bell here PT and like this video the browser and I'm gonna have myself in button here as simple as that now what I want I want to just style this input text boxes so I'm gonna just back to my style or CSS and change some styling of this input text boxes so what I'm gonna do is I'm gonna first select this input text box so right here in the style or CSS I'm gonna select the registration form so I'm gonna select read form ID and then I'm going to select input and it is the type of text so I'm gonna say input type text and I'm gonna just remove order from this text so I'm gonna say here border:none then I'm gonna specify border radius unset and I'm gonna specify border bottom 1 pixel solid and I'm gonna call a variable color border then I'm going to specify font family which is fawn to 1/2 and right here I'm going to call the variable one two one two and font size is going to be 18 pixel save the changes now when I save the changes you can notice I just specify some style to the first and to the last input text box I'm going to do the same for the email and the password as well so I'm gonna just back to my teacher I'm gonna just decrease this font size to I'm gonna just remove this font size I don't want to add this font size property and what I'm gonna do is I'm gonna simply copy this selector specify comma here paste it down here then space over here email this will select all the input text box with the type of email then paste the selector again and just here password save all the changes reload the browser now I can notice this will just change this all input text boxes now as you can see the registration form it's now completely ready if you try to click on this continue button you can notice this will just ask you to fill out this field so you need to feel this email address input text box before you submit your form now what I want I want to remove this blue border from these input text boxes so in the style dot CSS I'm gonna remove that blue border so to remove this border I'm gonna simply copy this selector paste it down here and I'm gonna just specify outline:none and box shadow is going to be none when I save the changes reload the browser you can notice the blue outline is now gone and now when you click on this continue button you can see a message please fill out this wheel so I'm gonna just fill this email so I'm going to just say here example Adelaide gmail.com then I'm going to click on this continue button this will just ask me to fill this password don't just specify demo password here when I click on this continue this will just say please fill out this field I'm gonna just place a pad confirm password and at the last when you click on this button this will just say please check this box if you want to proceed so here you just accept the agreement and the condition so I'm gonna just click on these check box and when I click on these continue this will submit the form now what I want if I notice the password is not matching when I click on this continue this will submit the form I don't want to do that I want to first create client-side validation I'm also using server-side validation if the user disabled the JavaScript so I'm going to first add the client-side validation and then we'll move to the server-side validation so I'm going to just back to my return and in the main door JS file I'm going to create here document dot very function so this is the jQuery function so this function will execute when the document is completely ready now in this function I'm going to just simply call dollar and in the parentheses I'm gonna select my form so I'm gonna say great form so using jQuery object I'm gonna specify CSS selector inside this parameter and I'm gonna say here dot submit and in the parentheses I'm gonna call the handler function like this so I'm going to just call here handler function and inside it I'm gonna create few variables so I'm gonna create first variable jQuery variable password and I'm going to just specify my ID password so I'm gonna just or password input text box inside this variable then I'm going to just copy the statement paste it down here and I'm gonna just change this ID and I'm gonna say confirm password and I'm gonna just change this idea you can say confirm error now we know that we don't have this element so I'm just copied is ID and in the registration right down here just order this confirm password I'm gonna add I'm going to just add here a small tab and specify ID to it and the ID is going to be conformed header just art of that I'm gonna just change the color of the text of this small tank so I'm going to specify class text danger I'm gonna just save the edges back to the main door J's file and right here I'm gonna just change these password and this became confirm and this became error so I'm going to just say here if password dot value I'm gonna just get the value from the input text box password and if this value is equal to confirm password value I'm gonna just return true yes if the password not match I'm gonna just say here error dot txt and I'm going to just specify text to this small tag I'm gonna just specify text here password not much and just sort of that I'm gonna say if the password not match I'm gonna just prevent this form being submitted so I'm gonna say e event dot prevent default save the changes reload the browser and now if try to submit your form if I just say here email example and dear HTML calm then I'm going to specify password like this and if the password is not matched and if I try to submit this form I can't do it this will just print a message password not match I'm going to just get it off this password and now if the password match successfully this will separate the form I'm going to just use this basic client-side validation for this registration if you want to add regular expression for this email to check the format of your email you can do that as well that's upon you and now whatever when I choose my profile picture for example when I click on it and choose this profile picture and when I click on this open I want to display that image in this profile section so I'm gonna just back to my detail and in the main dot J's file right here just out of these document dot value function I'm going to create here a function and specify name to it lead URL and specify parameter input now I'm gonna say if input dot files and input dot files and specify the first our index if it is true then I'm gonna say elect leader is equal to new file leader so I'm going to create an object of file reader and then I'm gonna say reader dot onload is equal to I'm gonna specify handler function for this event and in this handler function I'm gonna specify the file to this image so I'm putting just back to my registration and you can notice I specified IMG class to this image so I'm going to access this image using this class so I'm goes back to my main dot J's call the jQuery object then say register then I'm gonna say upload profile image I'm gonna select the class upload profile image and then I'm gonna select IMG class now i'm gonna specify the attribute so i'm gonna call a method attribute and i want to specify this source attribute so I'm gonna say source and I'm gonna specify a value to this source attribute so I'm gonna say 'i got target dot result just sort of that i'm going to call this function so in the document dot ready i'm going to call this function so what I'm gonna do is I'm gonna first create here a variable it upload file and right here I'm going to select these input type file this one input type file so I'm gonna say here in the single code I'm going to specify register then select upload profile image and then I'm gonna say input of the type file and then I'm gonna call an event of these upload file change and in the header function of these input file I'm going to just call this feed URL function and pass this so now what I'm gonna do is I'm gonna first select this input type fire so when we click on it this will open a new window where we can select a new image and when we select that image using this event I'm going to just get that image and specify that as a parameter of this function see if the jinju's flow to the browser and now when i select my image oops something went wrong let me just check my code again yeah right here when i specify this source attribute value just or this reader i need to just call reader dot lead as data URL and to this data URL you just need to specify input dot files zero so this one's just specify that file to these file reader object save the changes the glow to the browser and now when i specify this file this will just successfully change this profile picture and now what i want i want to just remove this camera icon when we select the profile picture so I'm gonna just simply back to my JavaScript file and right down here I'm going to select EE jQuery object and parentheses I'm gonna say register upload profile image and then select a camera icon and I'm gonna specify a CSS property do it which is display:none that's it save the changes and now load the browser and when you specify your profile picture you can notice the camera icon is now gone and you can see your profile picture here now you can see the client section is now ready now let's move on to the PHP section of this tutorial so let's see how to add these values in the database using PHP now we know that how to create this beautiful registration form using HTML and CSS now the time is to store all these form values in the database now we know that how to create this beautiful registration form with JavaScript validation we added this beautiful profile picture we have few input text boxes to register the user and we also added the client-side validation to this registration form but what if the user disable JavaScript in that case the input text boxes will not validate in that case I'm going to just add server-side validation for this form I'm going to show you how you can add server side validation using PHP and add all these values in the database so I'm going to first validate all these input text boxes and then we will move and see how we can add all these input text boxes values and this profile image in the database so let's see how to do it so I'm going to just open my editor and just back to the project in my project I'm going to create a new file so I'm going to right click on my project and select a new file and create a PHP file here and I'm going to name this file register process you can name this file anything and in this file I'm going to add a PHP script I will leave this page black as it is and right here I'm going to create a PHP variable so I'm going to first add here a comment and say error variable so I'm gonna create here either variable so to create a variable in PHP just specify dollar sign and the name of your variable so I'm gonna say here error and this is the type of array so I'm going to specify blank area here so this variable is a type of array now I'm not going to specify anything in this variable right now I will specify all the error values in this variable later now just sort of that once I have this variable I'm going to just create here a variable first name and I'm gonna specify value to it so what I'm gonna do is I'm gonna get the value from the first name input text box using post a request method so I'm gonna just simply say here dollar underscore post I'm gonna just specify here first name so if you just take a look at your form in the registration we specify here name first name to this input text box so I'm gonna just specify this name in this post so when you submit your form using the submit button this will just return this input text box value to this variable as you can notice I'm gonna just get the value and store that in this variable without sanitizing it I'm gonna just first sanitize this value and store it in this variable now I'm gonna show you how you can sanitize this value and store that in a variable so you will secure your application from SQL injection so what I'm gonna do is I'm gonna create a new file and create helper functions which help us to sanitize these values you can create that function in this file as well but I'm going to separate this function so I'm gonna just create a new file in this project we'll right click here and say a new PHP file and I'm gonna just name this file helper I'm gonna just pitch my name for this file helper and press ok so now you can notice I have this helper file here now in this file I'm going to create a new function I'm gonna name that function validate input next and I'm going to specify parameter thanks to value and in this function I'm going to validate this value it means when I call this function I'm going to specify this value as a parameter of that function so we'll just sanitize this value and store that in the database so in this function I'm going to simply first call if not empty takes two value so if the variable is not empty that I'm going to execute this if statement and right here I'm going to create a new variable cream text and specify a function cream and to the parameter of this function I'm going to specify text value this parameter value now this function will remove any spaces or white spaces from the beginning or end of the value and then I'm gonna just remove all the illegal values from this parameter so I'm going to discrete here command and say remove illegal characters so I'm going to just create here a variable sanitized STR so I'm going to just say here filter there and I'm gonna just specify here cream text so I'm going to just specify this cream value inside this function and just sanitize this text so I'm gonna specify a parameter to it filter sanitized string so this will just rego all the illegal characters from this text and store it in this video and now once I sanitize the value I'm going to just return it so I'm gonna say here return sanitized STR and if the value is empty I'm going to just return empty string now I'm going to save the changes copy this function and open the register process dot PHP file and instead of storing this value inside this variable and one just first here called a function and then in the parentheses of this function I'm gonna just pass this post first name so when the user specify their first name I will first validate that first name and then store it in this variable now in order to use this function in this file you need to first include this helper dot PHP file in this process dot PHP so at the top right here I'm gonna simply call require and in the parentheses I'm gonna say helper dot PHP now once you sanitize this value this will just return the sign it has value in this variable now what if the user linked this textbox as it is then this will just return nothing to this variable so what I'm going to do is I'm going to just create here if if this variable is empty then I'm going to store either message in this variable so I'm gonna simply call this error variable and in the array of the first index of this array I'm gonna store you forgot to enter your first name now once you've done that I'm going to sanitize this second text box value so I'm gonna just copy this code paste it down here I'm going to change this variable name and say here last name then I'm gonna change this value as well because you can notice I just specify name last name for the second input text box I'm gonna use this name in this post like this and I'm gonna copy this last name and specify that in this parameter of this empty function just sort of that I'm gonna change this message as well and I'm gonna say enter your last name so I'm gonna say here you forget to enter your last name now just out of that I want to sanitize the email as well somebody says back to my helper dot PHP file and I'm gonna copy this function then I'm gonna paste this function again change the name of this function and I'm gonna say here validate input email the parameter is going to be text value so I'm gonna say here email value and I'm gonna specify this email value parameter here and here like this and now what we need I'm gonna fall stream this value and then I'm gonna sign it as this value but at this time I'm not gonna sanitize the string instead I'm gonna say here filter sanitize email so this will just remove all the unwanted characters from the email and to sanitize the email and store that value in this variable so once I have this variable I'm gonna just return it and if the value is empty I'm gonna return empty string save the changes back to the register process dot PHP file copy these three lines paste it down here change the variable I'm gonna say here email oops email and I'm gonna just specify in the post email because we specify name email to the input text box and now the time is to change this function and I'm gonna say here validate input email I'm gonna copy this variable paste it here if the variable is empty then I'm gonna just say here you forward to enter your email just started that I'm gonna just sanitize this password somewhere just copy this last name code paste it down here and I'm gonna say here password I'm going to create a variable password and as you know what is input text box for this password I used name password so I'm going to use this in this post so I'm going to say here password then I'm gonna say here password so I'm gonna copy this variable paste it here and I'm going to say you forgot to enter your password and the last I'm gonna just copy this password paste it down here and I'm gonna just change your password confirm so and I'm gonna just change this variable and say confirm PWD and I'm gonna just place over here name so I'm gonna just back to my register dot PHP and I'm going to specify this confirm PW the name in this post a day and then I'm gonna just copy this variable specify here if this text box is empty I'm gonna just return error message you forgot to enter your confirm password now as you can notice we successfully sanitized all these input text boxes values of the user so no one can inject any SQL injection in your database so this is how you can secure your database from SQL injection now the time is to store all these values in the database so let's see how to store it so just after this validation right down here I'm gonna create if statement and I'm gonna say if empty error so if this error variable is empty I'm going to execute this if statement else I'm gonna execute this else statement so in the if statement I'm gonna say echo validate and in the else statement I'm going to say echo and in the single code I'm gonna say not validate save the changes and now let's back to the register PHP and to this forum and in the action attribute we specify register dot PHP I'm going to return all these input text box values to this file and at the top right here I'm going to just simply create here a PHP script so I'm going to call here PHP syntax and here I'm gonna say if server the requested method is equal to post now if the file request for the post method that I'm going to just say here require and I'm gonna simply call here register process dot PHP file so when you request for the post method I'm going to just require this file so I'm going to just call all this code inside this file save all the changes reload the browser and now when I click on this continue button this will just ask me to fill this value so I'm going to specify here email and today in Gmail com so I'm going to specify demo email here then I'm going to specify password and then I'm gonna just click on this check box and click on these continue when I click on it you can see we have a message not validate because we did not specify that takes boxes so we need to fill these text boxes as well I'm gonna just specify here daily tuition then I'm going to just paste for my email again now you can notice when I click on this continue button this will reload this form and you need to fill this information again so what I want when I click on this button and if there is any error in this form I don't want to refill this first name last name and this email so what I'm gonna do is I'm gonna just back to my register dot PHP file and I'm going to specify values to this input text boxes so I'm going to just back to my register dot PHP so what basically I'm doing is I want to refill this form if there is any error in this form so you can notice I had this error not validate and I need to fill all these values again so I'm gonna just back to a register dot PHP file and to this input text for this first name I'm gonna specify value and in this value I'm gonna call a PHP syntax so I'm gonna call here PHP syntax and here I'm gonna say if he said if the value of this variable is set so in the parenthesis of each set I'm gonna call post and in the post I'm gonna call this first name and just honor that I'm going to say if we set the value of this input text box then I'm gonna just equal it in the value so I'm gonna say here echo and just call this post so I'm gonna copy it and paste it here very simple just like this so what I'm going to do is if the value of this first name this input text box is set then I'm going to just echo it and I'm going to specify that value to this value attribute I'm gonna do the same for this last name as well I'm going to copy this value attribute specify to the last name input text box don't forget to change this name so I'm gonna just specify here last name like this and I'm gonna just do the same for the email as well I'm gonna copy it and paste this value here and don't forget to change this post value I'm gonna specify here email save the changes back to the registration form and reload it when you reload it you can notice the value of email is automatically filled now let me just fill this first name so I'm gonna just specify here daily tuition this is my demo email then I'm gonna specify password and click on this check box when I click on this continue you can notice the message will change so when I click on this continue button this will just changed to validate so all this value of this input text box is now and now you can notice the text of these input text boxes is remains same you don't need to refill these values now what if I just remove this first name and last name specify password confirm password click on this checkbox and click on this continue when I click on it this will just return not validate because this form is now not validate and you can notice we have this value to this email we don't need to refill this value in this input text box so this is the way you can create autofill registration form now let's Mon and see how to store all these values in the database so I'm gonna just back to my editor and I'm gonna just open the register process if you just take a closer look at this if statement then you will understand if there is any error in this error variable this expression became false and you will get this ill statement on your skin and if there is no error in your form then this expression became true and this will execute this echo statement with validate text so I'm gonna just add the database statements inside this if statement very simple all right so let's see how to do it now you know that how to sanitize all the input values using PHP the process is very simple we just specify the values in the stage boxes and then we'll click on this continue button of M you fill all these values and click on this continue button the post method will return all these values in the array and we can access all this array using this post variable so as you can notice we specify post variable and specify here bracket to access the value of the array and once we have the value you're gonna validate this value and store that in a variable and I'm gonna just say here if the value is empty I'm gonna just specify the error message to the user now if this message is empty then I'm going to return validate echo text or if there is any error in this variable I'm gonna just say here not validate now let me show you how you can store all these values in the MySQL database the first thing you need so you need to first create a connection to the MySQL database and store all these values so I'm gonna create a new file for that I'm gonna separate these connection files so in the project in this registration I'm gonna create a new file and select a PHP file and I'm gonna name this file my SQL I connect dot PHP so I'm gonna create my SQL I connect dot PHP file and in this file I'm gonna just create a connection between this application to the MySQL database this file provide the information for accessing the database and connecting to MySQL so first we're going to define the constant variable I'm gonna just create here a command and I'm gonna say here define constant variables and using define function I'm gonna create constant variable so I'm gonna just specify here in the capital characters I'm gonna say DB name so I'm gonna store database name it is variable so in the second parameter right here I'm gonna specify the database name so in the second parameter I'm gonna say register DB now this is my database name which we are going to create in the MySQL database and the last I'm gonna specify here semicolon if you want to specify different database to this DB name variable you can do that as well just order that I'm going to just define a new variable and I'm gonna name that variable DB user and here to this variable I'm gonna specify the username of MySQL database so I'm gonna say here root just out of that I'm going to create another constant variable and I'm gonna say here DB password and the value is going to be admin now here you need to notice I just specify the value to this a DB password if you did not specify any password to your MySQL database just leave this statement empty just like this right I specify password to my database so I'm gonna specify admin here and the last I'm gonna just define a constant variable and I'm gonna say here DB host and the host name is localhost now again notice I specify the capital letters for all this constant variable so we'll easily understand which one is a constant variable now once I have all this constant variable I'm going to just call here try and catch block so I'm going to say here try and here I'm gonna call catch and I will just return exception so I'm gonna create object of exception I'm going to say here a X and return the error if there is any problem when connection now this try block will throw any error or you can say any problem any exception into a catch block right down here for inners to handle if we have any error in this block this will just return that error to this cache block and we can just display that message to the user now in the try block I'm going to just assign a database connection to a variable that we will call connection so I'm going to create a simple variable here so I'm gonna create a command and say connection variable and simply I'm gonna create here con which is the connection variable you can specify any name to this variable and I'm gonna create a new object of my sqli class and to the constructor of this Y escuela class you need to specify parameters so the first parameter you need to specify is the database host so you need to specify the host name so you know that we just pasted over here local host so I'm going to specify this constant value here DB host then you need to specify the user name so I'm gonna specify the DB user in the second parameter I'm gonna specify the username route then I'm gonna specify the password of that user so I'm gonna say DB password so I'm going to specify this constant variable DB password to the third parameter and then I'm gonna specify the database name so I'm gonna say DB name just like this specify semicolon and you are ready to go now your connection is now ready so I'm proposed by the database hostname which is the localhost then I'm going to specify the username root then I'm gonna specify password I'd mean now keep in mind if you did not specify any password you can specify here empty string and then I'm gonna specify database name which is register DB now if you want to change the database name you can do that right here that's upon you and the last just sort of that I'm gonna just specify character set for the MySQL database I'm gonna create here a command and say encoded language and right here I'm gonna call a function my SQL I set character said let me first explain this function so in the first parameter I'm gonna specify the connection string so I'm gonna specify here connection variable and in the second parameter in the single quote I'm gonna specify utf-8 the character set of the database so let me false explain why I use this function here now the connection to the database must also include code that indicate the correct encoded language the type of encoded language used on HTML page must match the encoded language used in the database so if you just take a look at your register or PHP at the top in the header if you open the header dot PHP file the in coded language the character set of these language is utf-8 so I'm gonna just match this language with this database so I'm gonna specify here oops utf-8 alright just sort of that in the catch statement I'm gonna just specify different error messages to the user if there is any problem in the connection so in the catch statement I'm just print some message so I'm gonna say here print and in the double quote I'm gonna say an exception okay and I'm gonna specify a message so I'm gonna get the message from the exception variable so I'm going to concatenate this message and I'm going to just call it and get message method and if you want to define another error message to the user you can just add another catch here so I'm gonna call here catch say here either and just create here variable e for hitter and then I'm gonna say print and Swiss my message the system is busy please try later now as you can notice the MySQL connection is now completely ready let's move on and see how to store all these values in the database but before we move on I need to create this database and the table to store all these values so let's see how to create it in the MySQL database now let's see how you can create a database in MySQL database and create a table to store all these values so I'm gonna simply open the sample control panel and click on this admin of this my skill when I click on it this will open the MySQL database and now here you need to create a new database if you just click on this database you can notice you have few data base here now I'm gonna create a new database in this text box I'm gonna specify my database name so you know that we just specified register DB database name while connection so I'm going to use this name and create a new database with register DB name and I'm going to just click on these create I will just leave this utf-8 as it is and just click on this create button when I click on this create button you can notice you have your is two DB database now once you have your register DB database you need to create a table to store all your values there are two ways you can create a new table in the masculine base first visually and the second is using SQL statements I'm using SQL statements to Crick this table so I'm going to just click on this SQL and here I'm going to create a new table so to create a table I'm gonna space over here create statement create table so this statement will create a new table create table and I'm gonna specify the table name user and in the parenthesis I'm gonna specify different columns so I'm gonna first create here user ID and I'm gonna specify type for this user ID it is a type of integer then I'm going to specify not no and then I'm gonna specify primary key just out of that I'm gonna create a second column which is first name where I can store my first name input value so I'm going to specify here where I can and I'm gonna specify here 100 then I'm going to create here last name specify where car type then I'm gonna create email specify type vodka 200 and I'm on a space over here not now then I'm gonna just specify here password specify type where car 200 and I'm gonna specify here not no and then I'm gonna just specify profile image column where I can store the profile image so I'm gonna say here profile image where care I'm going to store the part of my profile picture in this column so I'm gonna specify here where car 255 and the last I'm gonna just specify register date and here I'm gonna specify date and time place by semicolon and when you click on this button go this will create a new table for you when I click on it you can notice a status message MySQL return an empty result set 0 rows and you will have your table so you can notice here in the register Debbie you have your user table right if you just take a look at your user table if you click on this column so notice you have few columns to this register table now let me store all these values of this registration form in this table so if we just take a look at this table when you click on it we don't have any value in it so let me show you how you can store all these values in this database and register the new user I will just open my editor in the register process dot PHP file if this expression return true then I'm going to just execute this if statement otherwise I'm going to execute this ill statement so if there is no error in these input fields then I'm gonna execute this if statement so it is if step man I'm gonna register the user so I'm gonna create a comment here and say register a new user here I'm gonna post hash the password now keep in mind as per the data protection act you can't store the user password in the standard string if we do that then anyone can see the user password in your database so what you need to do is you just need to get the user password and hash it and then store in the database let me show you how we can do that so you need to just use password hash method to hash the password of the user I'm gonna create here a new variable and say hash code or you can say hash password so I'm gonna say hash Pass and using password hash function I'm going to just hash this password and store it in this variable so I'm gonna simply specify here password and spin for the second parameter password default so this algorithm will convert your simple standard string password into hash value and store that in this variable once you done that I'm gonna just get my connection string so I'm gonna just require this file in this process so I'm going to just say here require and in the single code I'm gonna call my SQLite connect dot PHP once you require this file you can access this connection variable so now here I'm gonna first create a MySQL query so I'm gonna say here make upgrading so I'm going to create a simple command make a query and right here I'm gonna create a variable query and here I'm going to store in the string SQL statement so I need to store a value in the database so as you know we are going to just simply use insert into command to insert value in the MySQL database so I'm gonna just say here insert into and I want to insert all this value in the user table so I'm going to say here user and then I want to specify the columns so in this pattern disease I'm putting specify the columns so as you know we have this first column user ID then we have the first name last name email password and the profile image and the registration date now keep in mind the column name is exactly same as you specify in this database so in this parentheses I'm going to specify user ID then the second column is going to be the first name so I'm gonna just specify here first name then I'm gonna specify the last name third column then I'm gonna specify email then password then profile image and then I'm going to specify register date so I'm gonna say here register date so as you can see I just specify all these columns in these parentheses so and just start that instead of adding values in the same row I'm going to specify your semicolon and on the next row I'm gonna just call query variable and just concatenate my values so I'm gonna say here dot equal to and in the double quote I'm gonna specify values to these columns so in this double quote I'm gonna say values and in the parentheses I'm gonna specify values to these columns so as you can see I have the user ID column so I'm gonna specify value to this user ID so I'm gonna specify here 1 as you can see I need to specify value to this first now what I want I want to generate the automatic value for this fourth column so I'm gonna get rid of this value from these parentheses back to the table I'm gonna add Auto increment feature to this user ID column so I'm gonna just expand this user click on this user ID and just check this Auto increment check box this one and save all the changes when I save the changes you can notice you have the extra section where you have Auto increment value so you don't need to specify any value to this first column when you add anything in these columns this column will automatically take the value my skill will automatically specify value for this first column you can specify Auto increment while creating a table as well now just sort of that once I have user table I'm gonna just specify values to these columns the first column will automatically take the value so I'm going to leave a empty string here just like this then I'm gonna specify the second value so I'm gonna space over here question mark because I'm going to bind the value using my skill I statement bind function so I'm gonna specify here a question mark for the first name question mark for the second name specify comma specify question mark for the email same for the password profile image and then for this registration I'm gonna specify here now so I'm gonna say here now and specify parentheses this now function will return the current for date and time in the database now just start that once I specify the binding values to these columns I'm gonna specify here semicolon just sort of that right down here I'm gonna just call my skill function so I'm gonna just here my sqli statement initialize so this function initialize a statement and return an object suitable for my sqli statement parameter sample just initialize this statement using connection property so I'm gonna specific connection here and we need to store this object into a variable so I'm going to create a variable and specify the readable name Q if you want you can specify any name to this variable and I'm gonna speak for a semicolon here I'm going to create here a command and say initialize statement just for that I'm gonna just create here a prepared statement so I'm gonna just prepare an SQL statement for execution always use prepare statement to secure your database from my SQL injection so I'm gonna secure my database MySQL injection so I'm gonna use here my sqli statement prepare function so I'm going to just say here prepare SQL statement and I'm gonna just call here my sqli and CMT prepare statement so I'm going to call a function my sqli statement prepare and in the first parameter you need to specify the initialize object so I'm going to specify here Q and in the second parameter you need to specify the query string so you know that we had the greatest thing in the query variable so I'm gonna specify that variable in the second parameter just not that you need to bind all your input text box values with this statement so I'm gonna just create here a new command and say bind values and here I'm gonna simply call a function and I'm gonna say here my sqli statement so I'm gonna say HTM T bind parameter now this function will bind the values with the statement so in the first parameter so I'm gonna specify here Q the next parameter is going to be the type of values I'm going to insert in the database so in the single code I'm going to specify types so in the first name I'm going to insert a string value so I'm gonna say here s for a string for the last name I'm going to insert string value so I'm gonna say here s for string email is also strain password is also string and then the profile image is also string we don't need to care about this user ID and this register date column because we already specify values here in the statement just or that for the last parameter you need to specify values to these columns so I'm going to specify here false name then I'm gonna specify last name so I'm gonna call all these variables these ones all these sanitized variables in this statement then I'm gonna call here email and instead of calling here password I'm gonna call here hash password so I'm gonna store hash password value in the database now if you just take a look at this column then you will notice we don't have any variable to store in this column so I'm going to just create a demo variable here up here just one now and I'm gonna specify profile image name for this variable and I'm gonna store here image just out that I'm gonna specify this variable and point is variable in this statement so I'm gonna specify here profile image just like this and at the last I'm gonna specify semicolon now once I bind all these values we need to execute this statement so once we execute the statement we are going to insert all that values in the database so I'm going to simply call here a command execute statement and using a function my SQLite statement my sqli ste empty execute function I'm going to execute this statement so in this parameter unit is specified is variable now I just want to know the statement is successfully inserted or not I'm going to just call here a if my sqli statement affected rows and I'm going to specify here Q now if this function returned one then I'm gonna get killed here Iko or you can just call here print and I'm gonna say here record successfully inserted or there is any problem then I'm gonna simply say here print error while registration don't focus specify semicolon at the end of this statement save all the changes and just reload your registration page and now let me just feel this information and register as a new user so I'm going to specify here false name daily Lucien the last name is going to be tuition then I'm gonna specify email an example and today gmail.com then I'm going to specify password check this checkbox and click on this continue when I click on it you can see the error message password not match let me just add one more character here and we're going to click on this continue button you can see a message record successfully inserted now if I just take a look at my table when I click on this user you can notice I have value in this table so this is my first name daily the last name tuition the email address example at gmail.com the password you can notice in the password we just stored the hash value so no one can read the password of the user just out of that I'm gonna have the profile image the image default value and the registration date and you can also notice here in the user ID the MySQL database will automatically specify first value to this first row so using auto increment this will automatically specify value to your new row now what I want I want to get the user image URL and specify that in this profile image column so using this value I can display the profile image I can display the profile image of the user so what I'm gonna do is I'm gonna just back to my deter and right here instead of specifying this a default value I'm gonna just get the value from this form and I'm going to just get the value from this input type file element using this input type file element I'm going to get the profile image of the user I just move that image in this profile folder what I'm going to do is I'm going to move this phase one and Phase two image in this asset so I'm going to just grab it and move this in the asset just like this and now I'm going to create a new PHP function which helped us to get the image from the user and move that image in this profile folder let me show you how to do that now if we just take a look at this input type file you can notice this input is out of this form too then how do you get the value of this input type file in html5 you can get the value of your input element anywhere in the file using form ID to get the value of this input type file you need to specify this ID to this input type file so you can get the value of this input type file element as you can notice I just specify here name profile upload and you know that using post variable you can get the value of input element but this input element is outside of this form so we need to specify here and attribute form and specify this ID like this so in html5 you can access any value from any input element outside of the form as well so now I'm going to access the value of this input type file outside of the form save the changes back to the register process dot PHP file so right here I'm going to create a new variable files and to these files I'm gonna just get the value of the file name using files global variable so I'm gonna call here dollar underscores files and from the array of these files I'm gonna get the value of input type file element so as you know we specify here profile upload name for this input type file so I'm going to get input value right in this variable so I'm going to specify here profile upload and specify semicolon so now when I select a new profile image I'm gonna get the image part in this variable now once I have this image I want to sanitize this image and move that uploaded image in the server so what I want when the user submit a new profile image I want to store that image inside this profile folder so I'm gonna just create a new function for that so in the helper dot PHP file I'm going to create here a new function for profile so I'm gonna say here profile image I'm going to create a new function here and say upload profile and now I'm going to just pass parameter to it and I'm gonna say here file name so now when I call this function I'm going to just pass this value to that function now in this function I'm gonna simply create a variable target directory so I'm gonna say here target dir is equal to in the double quote I'm gonna specify the targeted directory where I want to store the uploaded image so you know that I want to store that uploaded image in this profile folder so I'm gonna specify here dot forward slash assets profile and just for that I'm gonna specify here semicolon and now I'm gonna just create here one more variable which is default and in this variable I'm going to specify the default image I want to display in this profile image section so you know that this is the default image so I'm going to just specify that name beard dot PNG in this default variable so I'm gonna say here beard dot PNG so if the user did not specify any profile picture I'm going to store the default image in the profile image column now right down here in this function I'm going to just get the file name so I'm going to create a variable for that file name and using base name function I'm gonna get the file name if the user uploads their profile picture then this variable contains the whole part of that profile picture so we need to just get the name of the file using this function base name and in the parameter of this base name function I'm gonna specify file name and just get the name of the file using headachy name just start that I'm gonna just get the targeted directory and store that in the variable so I'm gonna say here target file path and I'm gonna get the part of that file and store that in this variable so I'm gonna say here target a directory and just concatenate the file name so in this variable I have the part of this file you just start that I'm gonna call a simple pot info function to get the file extension I want to filter the profile image so I'm gonna use part in for function here so I'm going to create here a variable file type and I'm gonna just place a Phi function to it but info I need the first parameter I'm gonna specify target 8 file path and in the second parameter I'm gonna specify part in for extension now let me just explain this function this is the built-in function which is used to return the information about the part using an associative array or the string now this function is going to return the extension of the file in this variable so we'll understand the extension of the uploaded image once I know that the type of the image I'm going to just say here if this variable the filename variable is not empty I'm gonna allow the user to insert certain file format in the database so i'm gonna create here a command and say allow certain file format and i'm going to just create here a variable allow type and i'm going to specify add it to this variable i'm gonna say here addy in the values I'm gonna specify jpg I'm gonna allow the user to upload JPG files then I'm gonna love user to insert PNG file then I'm gonna allow user to insert jpg file and then I'm gonna allow user to insert give file and the last I'm gonna just allow user to insert PDF file if you want you can remove this file extension from this area as well I'm gonna leave it as it is now what's a filter the image I'm gonna say here if in array so if in the array I'm going to specify first parameter is going to be the file type and the second parameter is going to be allow type so if this expression return true if the extension of our file is match any of these extension then I'm gonna execute this if statement now in this if statement I'm gonna upload the file in the server so I'm going to just call here a command and say upload file to the server and here I'm gonna say if and it is if statement I'm gonna just call a function move uploaded file so this function will move the uploaded file in the server directory so I'm gonna just move the uploaded file in this profile directory and now in the parenthesis all of this function I want to specify the file name which I'm want to upload in the profile directory so I'm gonna specify the temporary name for the file so I'm going to simply call here file name I'm going to call this variable file name and in the square bracket I'm gonna just call here damn name so this will just base with the temporary name for the file and in the second parameter I'm gonna specify where I want to upload this file so I want to upload this file in the asset in the profile folder so I'm gonna specify this targeted file path here so I'm going to just specify here target file path just like this and if this condition became true I'm gonna execute this if statement and I'm gonna just return the targeted file path so I'm going to just return the targeted file path and I'm gonna have my image path using this function now if this function return falls right down here I'm gonna return the default image so I'm gonna say here return default image so I'm gonna simply return here in the double quote I'm gonna specify dot assets and then I'm gonna specify profile and I'm gonna just concatenate the value of this and default variable just like this now just how do that I'm gonna save all the changes back to my Register process dot PHP file and here I'm gonna call this function so I'm going to copy this function and paste it right here so I'm gonna get rid of this hard-coded value and paste this function here and we need to pass a parameter to it so in the parentheses I'm gonna pass files save the changes now as you can notice if we just take a look at this function then this is not the pure function because you specify the hard-coded paths in this function what if you want to change this part in the future in that case you need to just edit this function so to solve this problem I'm going to specify a new parameter to this function part and just specify this part right here like this and I'm gonna do the same right here as well get rid of this hard-coded value specify part and when I call this function I'm going to specify part assets and profile I'm gonna save all the changes save this file as well and now just reload this browser let me just upload my image and now let me just fill this information so I'm gonna first choose my profile image so I'm gonna select this face to image this one when I select it you can see we have the profile image here I'm going to specify name daily Duchenne then I'm gonna specify email example 1 antedate gmail.com then the password is going to be this one a greedy terms and condition and click on the continue button and submit to your form when I click on it oops something is missing here a little string offset damped name on the header dot PHP file let me just check this error I think I misspelled something here in this function now you can notice I just duplicated these variable names I specify the same parameter name for the variable and I have the same variable name here as well I'm going to just change this to file like this copy this variable specified add in this parameter and I'm gonna do the same for this move uploaded file function as well like this save the changes back to the registration form specify your image specify password I agree the terms and condition and click on this continue button when I click on it you can notice the message record successfully inserted now if we just take a look at your MySQL database if I just log in to my SQL database you have your face - dot jpg file in the profile image column now if you just open your editor and if you open your project and you can see here in the profile you have phase 2 dot jpg file as well I'm going to just copy the file from the local host in the server directory you can notice I have here two files the default file and this phase two dot jpg file now for example if I register a new user if I just select a new image here this one this one open it specify the same information to this user as well and when I press continue I'm gonna have the same message recall successfully inserted and I'm gonna have this record in this database right here and you have your face image and if you just take a look at your project you can notice you have your face 1 or jpg file so the file is automatically uploaded to your profile folder and now we need to just redirect the user to the login dot PHP file instead of displaying this passage so I'm gonna get rid of this message and here in this if statement if we register the user successfully I'm gonna just say here hitter and in this function I'm gonna specify location of the login dot PHP file and I'm going to just exit from this page save the changes back to the browser let me just reload the browser select the user first name last name is going to be tuition email is going to be example 3 at today gmail.com then the password agra vedic terms and condition and click on submit and i click on it this will just redirect me to the login dot PHP file and now you know that how you can register a new user in PHP now you know that how easy it is to create this registration form using PHP and you know that how to sanitize the user input and store it in your database now once you understand how you can create a new registration form and register a user let's see how we can allow user to login in your website so now once the new user registered with these registration form he will do direct to the login dot PHP file so let's open the login dot PHP file and design it so I'm going to force it here login dot PHP so this will just open login dot PHP file and in this file I just Iko login dot PHP if you just take a look at your register processor dot PHP file you can notice we just eco login dot PHP here we're just going to redirect the user to the login dot PHP and in this file I'm going to just echo login dot PHP now I'm gonna just design this login dot PHP very quickly so I'm going to show you the easiest way to design this login page now what I'm gonna do is I'm gonna just get the registration I'm gonna copy all the code and paste it in the login dot PHP right here just like this and now we just need to make a few changes in it so the fourth changes we need to do is we just need to get rid of this statement and I'm gonna change this ID and I'm gonna say here login form then I'm gonna just change this text and I'm going to just specify here login and I'm gonna just change this text as well and I'm gonna say here login and enjoy additional features and I'm gonna just say here if you are not the registered user then please post register with the registration form so I'm going to say here create a new account so I'm going to say here create a new account and I'm going to specify here register dot PHP file and now I'm gonna get rid of this text these three lines I'm gonna get rid of this image this small tag and this input type file so I'm gonna just get rid of these three lines and I'm gonna get rid off these d flex gives you in time so I'm gonna grab this image and get rid of this division tag paste the image again and I'm gonna just change this image I'm gonna specify a set then specify profile and I'm gonna just specify my default image here beard dot PNG all that tribute is going to be a default profile then I'm gonna just change this registration form as well so in the action attribute you need to specify login so I'm going to post all data to the login dot PHP file to itself then the method is going to be post I will leave everything as it is just change this ID of this form and say Log form we already specified login from ID to this section so don't duplicate the ID and then I'm gonna just get it off this form row because I don't need first name and last name so I'm gonna get rid of it I need email so I'm gonna leave it as it is and I need this password so I'm gonna leave it as it is and the last I'm gonna get it off this checkbox and the confirm password text box so it changes and I'm gonna just get rid of this value attribute from this email and the test set I just change this continue to talkin save the changes let's execute this file so I'm gonna reload it so now you can see you have this login page now let's back to the standard CSS where you can style this file so I'm gonna back to the style or CSS and here I'm gonna add the background image so at the top right here you know that we just specify register and to this register I specify the background image so I'm gonna say here login form save the changes reload it when you reload it you can see I have the background image to this login then I'm going to just specify some style to this image now instead of specifying style to this image I'm gonna just back to my register dot PHP file we just opened my register dot PHP and in this file you know that we just specify here an image the beard image and we also have style to it this one so I'm gonna copy this image tag completely from here copy it and the login dot PHP I'm gonna specify that right here so I'm going to replace this image tag with this image save the changes reload the browser so I'm gonna have my profile picture here and now I want to first close these unwanted tabs so I'm gonna close these unwanted tabs from here the standard CSS file you know that we style the input text boxes using this registration form I'm going to the same so I'm going to copy these three selectors specify here comma and duplicate it but at this time you need to change this rake form to login form or you can just say here log form you just need to change this selector registration form to Log form save the changes and reload the browser when we load it you can see you have your login and the password now I just want to remove this border as well so I'm gonna just copy these three selectors and you know that we just remove this blue border using these properties so I'm going to specify my CSS selector here like this save the changes you do with the browser and I don't have that I don't have that blue border to these input text boxes I don't want to allow user to autofill this email and password so I'm not gonna specify value to this input email and the password I just want to add some space between this create so I'm gonna just add here some space like this and now I just wanted to add some padding to this login so I'm gonna just back to my standard CSS and here I'm gonna just select this login form like this and just specify padding here and the padding is going to be 8% for the top and bottom and 0 for the left and right save the changes then reload the browser you're going to have the padding to this login page if you want to add more padding you can do that as well if I just say here 10% then that's fine right that's good now we know that how easy it is to create this beautiful login page now let's see how you can add login functionality to this login page so when the user specify a correct email and the password you're going to redirect the user to the main page of the website so let's see how to do it so I'm going back to my editor and in this editor I'm going to create a new file for this login process so in the project I'm going to right click here and say new PHP file and I'm going to specify a name for this file I'm gonna say here login process so I'm gonna specify here login process dot PHP and in this file I'm going to just first validate this user input so I'm going to just open the register process dot PHP file and right up here you know we just validate users using this code so I'm going to just grab this code so I'm gonna first get this email so I'm gonna copy this code and paste it in the login process not PHP file right here then I'm gonna just validate the user password so I'm gonna open the register process dot PHP and right here I'm gonna copy this password and paste it here in the login process dot PHP file and now to store the errors I'm going to just create here a variable header and I'm gonna just specify I add it to it and empty array just out of that once I validate the user I just want to say here a this variable is empty then I'm gonna just execute this if statement or I'm going to just execute this else statement so in the else statement I'm gonna say echo please fill out email and password to log in so if the login form find any error in this variable I'm gonna just execute this else statement and if there is no error in this variable I'm gonna just execute this if statement and now in this if statement right here I'm gonna create a query so I'm gonna say here SQL query and I'm gonna create a variable ready and in the double quote I'm gonna say select user ID so I'm gonna select my user ID this one user ID then I'm gonna select my first name last name email password and profile image so I'm gonna select it so I'm gonna select here user ID then I have false name then I'm gonna select last name then I have here email password and profile image so I'm going to specify here email password and profile image and I'm going to say here from user so I'm gonna get the values of these columns from this user table so you know that we have the user table here and in this table we have these different columns so I'm going to get the values of these columns using select statement I'm going to just call here vert condition where email is equal to a question mark so what I'm going to do is if the email is equal to this input text box I want to fetch the vol for example if I just type this first email in this text box and specify the password of this email and if I click on this continue I want to just redirect user to index dot PHP file so the successful user will redirect to the index dot PHP file which is the main file of your website so I'm going to just specify here if the email is equal to the text box I'm going to create a variable Q is equal to my sqli statement initialize and we'll just initialize this statement specify connection parameter just like this then I'm going to say here my sqli statement preparer and in this parameter is you need to specify the queue and big ferry so I'm going to specify the prepare connection object and Dick reading and just sort of that I'm gonna just mind the parameter so I'm gonna just call here my sqli st MT bind parameter and in this bind parameter I'm going to specify first queue then specify the type I'm going to insert a string value in this text box so I'm going to specify s here and then I just want to specify value to this email so I'm going to specify here email like this so this value will mind right here so I'm going to just get all this columns value from this table the the email is equal to this input text box value now just sort of that I'm gonna just execute this query so I'm gonna say here execute query and I'm gonna call here my sqli stmd execute and I'm gonna specify here kill just our that once you execute this query you're going to get the result from this query so you need to store that result in the variable so once this statement is executed you're going to have a one row from the table for example if you specify here example at Adelaide gmail.com then you will get this flow the first row so once you have your first row you need to store that in a variable so I'm going to just create here a variable result and I'm gonna just here my sqli HTM T get result and here I'm gonna specify queue and just our that I'm gonna get this result in the associative array so what I'm gonna do is I'm gonna call here my sqli fetch and E so this is the function fetch a result of row as an associative array or a numeric array or both depending on your parameter so in this function I'm going to specify the result and I want this array as MySQL I SQLite associative array associative array means I'm gonna have key and value pair as a result so I'm gonna get these values of these columns with key and value pair and I'm going to store this in the variable so I'm going to create here variable row and store this array now this is the type of array and in this array I'm gonna have values of these columns for example they say you want to get the value of email you will just simply specify here row and two this row in the square bracket you specify the column name email so once you specify email here this will just return the value of your email column I'm gonna just get rid of this text and now what I want I'm gonna just say here if if it is not empty if this row is not empty then I'm gonna execute this if statement and now I'm gonna verify the password so I'm gonna say here verify password and you know that we just store all the password in hash values so once the user specified password in this password field you can't you can't compare both this password without converting the user password in the hash value so what you need to do is I just need to call here if and now in this if statement you need to call a PHP function transferred verify now this function will verify the password from this input text box and the database so this will just convert this input text box password into hash value and compare it with this database hash value and if it is match then this will execute this if statement so right here in this parenthesis I'm going to specify password so I'm going to just specify here row and in the square bracket I'm gonna get the password and now I'm going to say if this condition this expression became true I'm gonna just redirect the user to the Welcome page so I'm gonna just say here header and in the double quote I'm gonna say location and I'm gonna redirect the user to index dot PHP file which is the main file of this application and just after that I'm gonna say here exit and then right here I'm gonna say if this condition this expression return false I'm going to just return here el statement and it else I'm gonna say print you are not a member please register we just need to add the mysqli Connect file in this login process dot PHP file but instead of adding the MySQL iconic file in this process file I'm going to just add this file in the login dot PHP so right off here at the top I'm going to create here a PHP statement and I'm gonna just call here click choir and I'm gonna call here my SQLite connect file and before I direct the user to index dot PHP I just wanted to create that file first so I'm going to right click on my project and create a new PHP file index dot PHP and in this file I'm going to just echo I'm going to just say here print welcome to daily tuition save the changes and now let's fill this form and register as a new user so I'm going to select my profile specify first name last name then specify email so I'm going to say here e^x antedates gmail.com then specify password check this checkbox and press Continue when I press continue this will redirect me to the login dot PHP file if you want to add the successful message you can do that as well but I will directly redirect the user to the login page and now I'm gonna just place afar my email on the password so I'm gonna say here e^x anti rate gmail.com and I'm gonna specify here password this one so if you just take a look at your user table you can see we have email e^x added at gmail.com and this is my password so I'm gonna just place if I this email and the password here and just press login and I click on this login nothing happened that is because you did not call this login process file in the login dot PHP so I'm gonna just call this login file in this login dot PHP I'm gonna just back to the register dot PHP file and right here you can notice I have here a simple if statement where I just require the file of the register so I'm gonna copy this if statement and paste it in this login dot PHP file right down here and I'm gonna just change this file so I'm gonna just change this file to login process dot PHP and see all the changes reload the browser I'm gonna have an error here and catch error call undefined function that is because we just use here this validate input email function but we did not add it in profile in this login so I just need to first include that file as well so I'm gonna say here include helper not PHP save the changes reload the browser you can see we have man sage welcome to television now your login is now successfully ready let me just back to my login page now I just want to specify the password and when I click on this login you can log-in to your website now what I want when the user successfully register I want to display that user profile right here instead of displaying this default profile so I just want to display here a register user profile here so I'm going to just get that profile using session ID so I'm going back to my editor open the register process dot PHP file right down here before this header I'm going to start here a session a new session so I'm going to create here a command and say start a new session the session is a way to store information for example in a variable to be used across multiple pages so I'm going to create here a session variable to access the user ID so I'm going to start the station first so before you create a session variable you need to start the session so just place if I here station star so this function will start the session and then I'm going to just create a new variable so I'm going to say here create session variable and to create a session variable it's very simple we just need to call here dollars and just call a global variable session and in the array of this session variable you need to specify very Bunning so I'm going to just specify here user ID you can specify any name here so when the user register with this register dot PHP file I'm gonna just get the register user ID and store that in this variable so I'm gonna get the current user ID using a function MySQL I insert ID so this will just return the current inserted ID of the user and this will just store their ID in this video so in the parentheses of this function you need to specify the connection parameter like this and that's it now once you have your ID I can access this ID on login dot PHP file as well so using this ID I'm going to get the information of the user and display the user profile on the login page let me show you how you can do that so I'm gonna simply back to the helper dot PHP file because in that file I'm gonna create a helper function to get all the information about the new user and right here I'm going to create a new function and I'm gonna name that function I'm going to create a comment here get user info and I'm gonna create here a function and named that function user info or you can say get user info like this so now using this function I'm gonna get all the information of the user using their ID so in this parameter of this function so right here I'm going to specify here connection so when we call this function we need to pass the connection object here and in the second parameter I'm gonna specify user ID so when we call this function we need to pass the user ID as well you know that we already have the user ID in the station variable right here I'm going to just pass this session variable in the function when we call it now it just sort that in this function I'm good just get all the information of the user which has this user ID for example if I have here one then I'm gonna get all the information of the first user right because the user ID is one I'm going to get the user info of the first user so in this function I'm gonna just first say query I'm gonna create here a query let's kill query and in the double quote I'm gonna say select first name last name email and profile image from user so this is the table name user and I'm going to add a condition here where user ID is equal to a question mark so I'm going to bind here a value of this parameter so I'm going to just say here if the user ID is equal to this then I want the first name last name email and the profile image I'm going to create a variable Q and I'm gonna call a function my sqli has t empty initialize so I'm gonna specify here connection property so I'm gonna just initialize disk ready with the connection object and then I'm gonna create a prepared statement so I'm gonna just say here my sqli is TM t prepared and I'm gonna just past the cue variable and the query to start that I'm gonna bind the statement or you can say the parameter someone is simply called here my sqli s TM t binding parameter and I just wanted to bind this value right here so I'm going to first specify here queue object then I'm gonna specify the type so I'm gonna specify your integer so this value is a type of integer and then I'm going to specify value here user ID just or that I'm gonna execute this statement SQL statements I'm gonna say here execute SQL statement and I'm gonna just say here my sqli stmd execute and just specify here cube just out of that I just wanted to get the result from this select statement because select statement will return the value from these columns so I'm gonna get that result in the variable I'm going to create here result variable and get all the values using a function mysqli is the empty get result and specify here cube just our that I'm gonna get the result as associative array so I'm going to just create here a variable row and store that array in this row variable and I'm gonna call a function here my sqli fetch a D and I'm gonna specify here result and now at the last I'm gonna just return this array so I'm gonna say here if this variable is empty oops if this row is empty then I'm gonna return false else I'm gonna return row if this variable is empty I'm gonna return false if we have the values of the user in this variable I'm gonna return that variable but now I just want to simplify this if statement how will you simplify this if statement yes you're right using if-else conditional statement if you want to simplify this statement then you just need to say here return empty let's specify here row if this statement became true I'm gonna specify here question mark if this expression became true I'm gonna return false or return row so I'm going to just specify here if this condition became true I'm going to return this false then specify : and then switch for here the else value semicolon and now I'm gonna get rid of this if statement because we don't need it now our function is complete ready now we can get the user information using this function so we have this function in helper dot PHP file if we just open a login dot PHP we already included this helper dot PHP so we can use this function in this login dot PHP so I'm going to just use that function so just after this requires statement of MySQL I connect I'm going to just say here if is said and here I'm going to call a station variable user ID in the single quote and then I'm going to create a variable user which is type of array so I'm going to create this variable up here user is equal to array and in this if statement if we have the value in this session variable I'm going just say here user is equal to then I'm going to call this function get user info right here and you know that if we specify two parameters to this function so I'm going to first specify the connection and then specify the user ID so I'm gonna copy this session ID and specify here save the changes and now once I have all the information of the user in this array of this user array I can get the user profile and display that user profile here so let me just back to my login dot PHP and right here you can notice we should specify the default value here I just want to get rid of this default value and specify the profile image so I'm going to create here PHP statement like this in the source attribute and I'm gonna say here echo is that if the value of this variable is set so I'm gonna call here user and in the square bracket I'm gonna call profile image you know that we have different information of the user in this user variable so I'm gonna get the profile image from this user variable so if the value is not empty then I'm gonna return user and I'm gonna specify here profile image so I'm going to return the profile image or I'm going to return the default value so this is going to be the default values I'm gonna get that default value and just specify that here like this specify semicolon save the changes back to the register dot PHP file now let's register as a new user so I'm gonna just specify my profile picture first name last name email at the rate gmail.com password check the equipment policy and when I click on this continue you can notice I'm gonna have my profile picture on the login page as well when I click on it oops I just misspell something in the login system everything is correct yeah right here I just forgot to add sation start to the login page if you want to access the station variable you need to start a station first so right here I'm gonna say say it's installed so this will start the station so we can access the variable which we created in the previous page save the changes reload the browser and I'm gonna have my profile picture here as simple as that now we know that how you can get the profile picture of the user so let me just specify the email TX Adelaide gmail.com specifying password press login to log in as a new user once the space if I log in I'm gonna have the welcome to daily tution and now at the last I want to display all the information of the user on this page so I'm gonna just simply back to my index dot PHP file and right here I'm gonna display all the information of the user so on the index dot PHP file I'm gonna just display all the information of the user so I'm gonna first start the session someone and say here session start then I'm gonna say include and right here I'm going to first add header dot PHP file and just out of that I'm gonna include helpful dot PHP file so in this file we have different functions I'm gonna get rid of this message and just talk to that I'm gonna just here if it's sad I'm gonna call the station variable user ID here user ID now keep in mind the variable name is exactly same which you have created so I'm going to just specify here user ID if we have the value in this variable I'm gonna just require the mysqli file so I'm gonna say here my sqli connect dot PHP and then I'm gonna just create here a variable user and I'm gonna just say here get user info specify the connection object and then specify the station variable this one user ID now you know that we have all the information in this variable so I'm gonna fold globally create this variable user is equal to a day so I'm going to access all the information of this user using these a day and now just out of that I'm gonna close these PHP syntax right here just like this and just sort of that I'm gonna create here a section tag so I'm going to say here section and I'm going to specify ID to it and say main site this is the idea of this section and before I develop this section I just want to say here call the PHP statement and just specify here include footer dot PHP just sort of that in this section I'm going to create a container and also I want to add padding by 5 so this will add top and bottom padding into this division tag just our that I'm going to create here a row then I'm going to create column for offset for and I'm gonna just add some shadow so I'm gonna add a boost up Clause shadow and then add padding by 4 so this will add top and bottom padding to this division time then in this day I'm going create an order Dave to display the user profile so I'm going to specify here a Klaus to this dear upload profile image and along with that I'm gonna have some booster classes leave flags justify content center and I'm going to add padding bottom five now just out of that I'm gonna just add here I am ji-tae and in the source attribute I'm not gonna specify the hard-coded value instead I'm gonna get the value from this variable so I'm gonna call here PHP oops so I'm gonna call here in the source attribute I'm gonna call here a PHP syntax just like this and call a PHP statement Eco is set and just call here user profile image and if we have value in this variable I'm gonna just return that value so I'm gonna copy this variable paste it here or I'm gonna return the default value so I'm gonna specify : and specify default value here so I'm going to specify the asset folder profile and specify beard not PNG file just art that I'm gonna save all the changes and reload the browser when I reload it you can see I have this image here now I just want to add some classes and whit to this image so I'm going to just back to my editor and right here to this IMG tag I'm gonna first specify class and the class is going to be IMG so this is the custom class then I'm gonna specify rounded circle save the changes this will specify border-radius to this image when I reload it you can see then I'm gonna specify height and width to this image so using inline style I'm gonna for specify width which is going to be 200 pixel and then I'm gonna specify a height it's going to be 200 pixel and I'm gonna save the changes and reload the browser I'm gonna have this image here now what I want I want to display the first name and the last name of the user just down here it should start with this profile picture so I'm going back to my editor and just alter this image right down here I'm gonna create here H for hitting tag so I'm gonna say here H for and if this H for hitting tag I'm gonna create a PHP syntax so I'm going to add here a PHP syntax and I'm gonna specify here class to this H for heading that first class is going to be padding y3 so this was our top and bottom padding to this H for heading tag I'm gonna just call here if it's and and in the east said I'm gonna specify user first name now we know that we have the first name column in the database I'm gonna get the value of the first name if this expression return true then I'm gonna just say printf I'm gonna just add here % design and specify s so it means I'm going to add here a string value so this will became my first name then I'm gonna add here % design and s value again so this will became my last name variable value and now just our that I'm gonna special here comma I'm going to just specify here user and specify first name specified comma and then specify user last name that's it so I'm gonna have both these values here so I'm going to just print that value just out of this image now let me just save the changes reload the browser when I reload it you can see I have the delusion name here putting just a wrap this both in am and in the division tag and center it so I'm gonna say here take Center I'm going to specify text center boost applause I'm going to paste the image and the H for heading tag save the changes reload the browser right so I'm gonna have at the dedication name and the user now what I want I want to get more information about the user so I'm gonna get that so I'm gonna back to my editor and just start that right here so just before this column I'm gonna just create a new division that so I'm going to say here user info along with that I'm gonna specify padding X 3 so this will specify left and right padding to this day and here I'm gonna add UL that another list specify classes to it I'm gonna add phone to one too you know that we use these clouds to change the font family then I'm gonna add now far now now this is the bootstrap class I'm gonna add now by now then I'm gonna just create here a light tag with the class now linked and in this li I'm gonna add B tag which is a bold tag and here I'm gonna say first name and I just want to display my first name here sometimes with my first name I had a small tag and in this pond tag I'm gonna display my first name so I'm gonna just grab this statement from here I'm going to just grab this statement this image statement right from here just like this and just paste it here inside this bond and now I'm gonna just change V values here so I'm gonna change this profile image to first name and this also became first name now if I have value in this first name I'm gonna just displayed or I'm gonna just return nothing so I'm going to just specify empty string here now I'm going to just copy this Li tag paste it down here and paste it here now I'm gonna just display the last name so I'm going to specify here last this became last name copy it specify here and this became email I'm gonna copy this email specify here and change this text to email like this save the changes and now reload the browser right now you can see we have all the information of the user and now I want to add a shadow' to this panel so I'm gonna just add here oops I think I misspelled here shadow yeah that's right reload the browser and that's it now you can see I have all the information of the user on the welcome page now you know that how to create your beautiful registration and login system using PHP and MySQL database I hope you enjoyed this tutorial so if you find anything useful then make sure you subscribe to this channel and press the like button share this video with your friends and if you want to support this channel then the patreon link is in the description I always love to make beautiful tutorials for you so that is all for now I will see you in the next one with a new video [Music]

Channel: Daily Tuition

Views: 74,744

Keywords: PHP Complete Registration & Login System Using MySQLi - Complete Guide, php and mysql registration and login, how to create register and login with php and mysql database, php and mysqli database tutorial, php, php tutorial, registration and login complete guide, complete tutorial on php and mysql database, mysqli, mysql, database, how to create registration and login in php and mysqli database, php system, login and registration system, complete registration and login system tutorial

Id: XBTA-ofG8gc

Length: 154min 24sec (9264 seconds)

Published: Mon Mar 09 2020