How To Create Login & Register Form Using PHP, MySQL And Bootstrap

hey guys what's going on welcome to programming knowledge and into this lecture we're going to talk about how to create user registration for using your PHP and in this course we learn how to create this particular registration so we have the first name last name email address and phone number and of course the last one password so the technologies that we're going to use are the following PHP MySQL we're gonna use the bootstrap for the front end of our user registration form and of course we're gonna use the jQuery so let's go ahead and create our new project let us navigate to our localhost directory and create a new directory that will hold all the files necessary for our project so new folder and let's name it user accounts and then inside this particular folder we're going to define few files for our project so let's define the index dot PHP okay change extension yes and also let's define config dot PHP and also another one for our registration form so registration that PHP so these files will be vital for our project config is for the configuration for our database connection the index dot PHP will be displaying all the users registered and of course again the registration that PHP where in which our form or user registration form will be displayed or located so now that we have the basic structure of our project let's go ahead and registration at PHP to create our user registration form okay so now open up the registration net PHP and we have an empty file so all we have to do is define the HTML structure for this one so HTML and if you're using sublime text you can just type in HTML and press tab in your keyboard okay so the title for this one is user registration in PHP so for now let's define our user registration form so we're just going to define a very basic very basic user registration form and later on we'll improve the front-end by using the bootstrap library so let's start with a div and inside this div let's define the form and of course inside this form we can define a dip for our container and let's not forget to set the action for our form which is action and for now let's use the registration that page and method let's use post method so under the container div let's define h1 and it should say registration okay and a paragraph that says fill up fill up the form with correct values think after that one let's define an input with the input a keyword with the type tax and for the name let's make it or let's name it as first name and of course let's define the label for this one so label label for first thing so it should be hold with the keyword first name of course this first name should be required after that we could just copy and paste this line so label for first name and input text with a type or with the name first name so let's paste one for our last name for our email address for our phone number and for our password okay so let's change this into last name this to last name and of course the name should be last name also this one is for email address so email and email pretty name or for the name of the input and phone number phone number and also the label for the phone number lastly is the password so password and password for the name and label for a password so let's change this input type into of course we're using the password and of course we're using email for this field for email address so if we're done with that let's check our registration that PHP file in our browser so go on with our browser and type in localhost and user account which is or our project name so user accounts and registration dot PHP so we have here a very basic form or user registration form and we can see that we're missing a button for our submit so let's define it in our registration that PHP file so input and then type submit and for the name s say for example parade okay so the value for this one is sign up so save your file and let's go back to our browser and refresh our registration that PHP page so as you can see we have now design a button and the next step for this one is to actually implement page P for this user creation or user Association form so let's go back to our code and above this day let's create a new Dib and let's open up our PHP tag inside this particular div and of course the first thing we're gonna need is to check if the users submitted the form all we have to do is type in the keyword Estep and with the keyword post and of course we're gonna need the name of the name of our submit button which is scrape and open curly-brace and closed curly brace so for now let's just check if the submit button is working let's ankle let's type in echo user submitted for us to check if the submit button is working so let's go back to our browser and refresh our page let us see if the signup button is working okay we forgot that we defined the first name was required also with this one also with this one and so on so for now let's define values for this first name last name sample values and password and for email address of course we need to set a valid email address and click on the signup button so as you can see user submitted is displayed meaning our signup button or signup submit button is working so we have already implemented the form or the basic form of our user Association so as promised in the first video we will continue working on with the implementation of the PHP code behind user registration so before doing that we need to step back and reflect on our design of the user registration page so as you can see we have the the very basic looks of our user Association page and we want to improve this so in order for us to improve the looks of this registration page we need the powers of the bootstrap library so all we have to do now is download the components or the CSS files or the J's files included in the bootstrap so let's go ahead and type in Google and bootstrap so we have you the first link to bootstrap site so let's just click on this and click on this download button so we have a few options here we could just include the compiled CSS and GS into our files we could download the source files we could actually use the CDN of our bootstrap but with the purpose of this tutorial we'll be using or will be downloading the files directly or this compiled CSS and jes so download and then save force okay so once the file has been downloaded we just need to locate the files in our system and includes or include the necessary files such as the CSS and to J's files into our project so I have here the downloaded file which is bootstrap in my case this is version 4.3 point 1 so all we need is to extract the file and copy the CSS and J's file or GS files inside this bootstrap based folder and paste the CSS and J's files into the project that we have created earlier and make sure it is located side by side with our defined files which is the config index that PHP and registration death PHP okay so once we have that we just need to open up our registration that PHP to actually include the CSS files from bootstrap so open up registration that PHP and inside the head tag of our HTML let's include the CSS coming from the CSS folder here in our project okay so linked with a type of star text or CSS and then for the reference we need to type in CSS slash and we're going to use the MIDI file version of the bootstrap CSS so let's just use this bootstrap that mean that CSS so bootstrap that means that CSS okay and let's try the or let's try to reload our page before that make sure that you have saved the registration that PHP and let's go to our browser and refresh our page so as you can see we know that the CSS is working because the layout of our page change which corresponds to the styles that have been set in the CSS file so we just need to add few classes to the mark-up for this input so the inputs for first name last name and also we want to change the or we want to add some classes to the signup button so it would look like a professional button so all we have to do now is go back to our PHP or registration that PHP code and inside this div with the class container let's define a new div which has a class of row so div then row and make sure that we close this div to this point okay next let's create a new column which also uses the mark-up div and make sure that we close this live right here so let's indent our code so it would be readable so let's add a glass to this division which is glass call sm-3 so this glass is specific for bootstrap so if you want to know more about bootstrap you can browse their documentation and study the different columns configuration or the grid configuration of bootstrap so let us continue let's add a class to this input which is form control and let us just copy this one so paste this to add their inputs last name email a phone number and also with the password and save the registration dot PHP and try to preview our page open up the browser and reload the page or registration page so as you can see the layout and the looks of our registration form is much better than what we have previously but we're not done yet with our styling perhaps we need to add a space here between the first name and the Phillip form with the correct values and also with our button in the last input for password and of course we want to add the class for our button so let's go back to our registration that PHP so after the paragraph fill up the form with correct VAR values let's add a horizontal rule for this and with a class MB - 3 ok and let's just copy this one for this space between password and the button save the file and open up the browser refresh so we have here the spaces between first-name and fill up and of course the password sign up and last but not the least is for the sign up button so go back to our registration that page P again and add class to this button which is class BTN and let's set this BTN into primary save registration that PHP and go back to browser and refresh there you have it it's not a word class form per se but it is much much better than what we have before so I think that's it for our styling and let's go back to our page P code and implement the logic for our user registration okay so previously we have started the logic which is to check if the post create is set and echo that the user has submitted the form so now let's get the values coming from this form which is so for example the first name and using the post variable and supply the first name which is the name of our input field and of course you want to use this to implement other fields which is this one for our last name and email phone number and also the password okay let's make our code readable by indenting it in one line okay so we have all the necessary fields or the fields coming from our form so now let's try to display all the values once the user has submitted the form so I'll go first name and then the last name let's just copy the the first one email phone number and password so last name or email and then phone number and password okay and of course semicolon at the end of the line save our registration dot PHP and go back to our browser refresh and let's try to put some values here for our email to test at test com phone number doesn't matter for now and password and click on sign up okay so we have here the values and it has successfully displayed the values coming from this form so in the previous tutorial we have styled our user registration form so as you can see we have improved the looks of our form and we also modified our PHP code to capture the values if the user submitted the form so in this lecture we're going to implement the database connection and we will create a new database that will hold all the information of the user accounts so let's go ahead and open up our browser let's try to use the local host PHP myadmin okay click on the new link and for the database name type in user accounts and click on create let's create a new table with the name users and for the number of columns we have I think six one problem for the ID which is auto increment the first name the last name the email the phone number and the last is the password so six and click on go so for this one the first column is ID and type in with Auto increment option should be enabled the second one is first name with a type of bar chart and the land let's say 100 and next one is last name type bar char and 100 and I think it's email and let's set it also to for char and the next one is the phone number should be virtual also with the length of 50 and the password [Music] for char I think 32 will be enough but let's just put it 250 or set it to 50 and click on save so now we have our database which is the user accounts and read the table users with six fields which is ID first name last name email phone number and password I think it's high time for us to define or create our config dot PHP so let's open up our config that PHP file and connect our database to our PHP code so here inside our config that page p5 we need to open our PHP tag and define three variables which is for our DB user which is root and DB password ready be passed in my case it's empty and the B name equals or see user accounts okay so based on these variables we need to define a new object of the video class open closed parenthesis so inside here we need to type in MySQL and Colin and then host equals localhost and semicolon after that DB name equals we need to append the DB name variable that we have defined above and append another string which is for a Corrupter set of our database which is utf-8 and after that we need to pass in the DB user horrible and also the DB password variable or the DB pass variable and let us set an attribute to this DB object below so DB set attribute and open close parenthesis and video attr ever rotor yeah air mode and video error mode should be exception so this will give us more information if we encounter problems when we're using the DB object later on so with that we're now ready to use this DB object into our registration dot PHP so open up the registration that PHP file and let's include the config dot PHP into this file so require once the config HB okay and make sure that you save the config dot PHP file so inside this if statement we can now use the DB object that we define in config data HP so all we have to do now is type in the SQL of course our first SQL will be insert into users and we just need to list the fields which are first name last name email the phone number and of course the password with values by close and question mark question mark question mark question mark one two three four I think it's five right five and statement for our insert st empty insert equals a debate object that we have defined in config dot PHP and prepare force supply the SQL statement and let's just delete this line so after this is the empty insert let's define result and st empty insert and i've been executed and of course we need to supply the array of the fields or the values coming from the form which is the first name which is the first name last name email and phone number and password so if result is true open closed curly braces echo successfully say hey else let go there were errors while saving the data save your file and open up the browser refresh the page and let's try to input some names here example Jane last name Joe and email address will be Jane Doe at gmail.com phone number plus six two three nine eight five six just random numbers okay and password Jane go and click on the sign up button cool now it says successfully save but let's check our database or the page with my admin to see if the data has gone through okay so browse let's just click on this browse and you can see we now have the first record which is the Jane the first name Jane last name though email address Jane Doe at gmail.com phone number and of course the password which is Jane Doe okay so I think our insert method or insert logic is good but there's a lot of room for improvement so for example we want the form not to reload every time we submit the information and also the feedback if successful or not yes I think it's not that good or not that good looking so we will implement the sweet alert library to replace this boring feedback that we have here so the previous tutorial we have learned how to implement or insert values coming from this form into database and in this tutorial we're going to learn how to implement jQuery and the suite alert to replace our traditional feedback so as you can see if you try to implement or if we try to click on or type in different values here to email add task comm phone number password and then click on sign up so we have the traditional feedback here successfully saved which is I think not that intuitive so we're going to implement the suite alert to replace this traditional feedback and instead of inserting the values to the database using PHP we're going to use the power of jQuery to help us insert values to the database without reloading the page okay so first thing we're gonna need is a search for the jQuery library okay so we could click on or either on this links but let's try this the first link jQuery and click on the download ok so here we could actually see all the options that we have for jQuery or for including to Jacob or project so accordingly we can just use the CDN for our jQuery but there are also option here to just use the CDN or our the CDN is coming from some reputable companies such as Google and Microsoft or they're hosting also be Jake hurry so for now let's use this Google CDN so open this by clicking on this link okay so we could just copy this snippet for three point X or for jQuery version 3 point something so just copy the script and let's go back to our registration data HP and before the closing of the body tag let's paste the script and below this line let's test our jQuery if it's working or not so dollar sign and then function and close parenthesis and open close curly braces semicolon at the end and first let's just alert something for the document ready event so hello say registration that PHP and go back to our browser and let's go to our user accounts in registration than PHP so we have the basic alert or JavaScript alert that says hello so I think the jQuery library is working so the next step will be to include another library which is the sweet alert so sweet alert will replace this JavaScript alert pop-up so let's search for sweet alert okay so sweet alert actually there are two versions with a sweet alert in then the sweet alert too which is new versioned in the in the first one so sweet alert - is a beautiful responsive customizable accessible replacement for javascript pop-up boxes so they have here comparison between the normal alert and sweet pallor it - so first let's shout the normal alert by clicking on this button this is the native pop coming from the JavaScript and the second one shallow success message message so this is the suite under - so as you can see this is much much more better than the javascript native pop-up alert so let's go ahead and integrate this suite under - tor project so go to insulation shine and we just have to grab the CDN coming from the J's deliver so all we have to do is copy this script or snippet and we just have to paste it below the jQuery library that we have integrated earlier okay and now instead of this alert we need to all on the sweet alert - and then fire and of course we need to few our define few things here which are the title a title would be hello world and text will be [Music] this is from suite 32 and the time will be success [Music] so let's try this go ahead save our file and go back to our browser and refresh our user registration or registration dot PHP okay so as you can see we have here a better and much cleaner pop-up which is coming from the sweet alert to from the world this is from sweet alert to library okay now the next step is to include or to actually work on the jQuery so it would help us to insert values coming from coming from our form and insert it into the database let's go ahead and make some changes to our registration that PHP so in our form we have the submit button which is designer right so instead let's define an ID for this one or let us say register and inside here let us type in lady register if it's click OK this should be function close here and inside this let's try the sweet alert if it's working or not so let's just check is sweet alert or once we click top walk on the submit button the sweetener should appear okay so for now save your file and go back to our browser and refresh our page and let's try to click on this signup button okay so we have here these you'll alert so it means that the script that we're working on is working okay so before that let's set this aside for now because our primary concern is the value is coming from this form okay so let's add some ideas to this film so first name let's just copy this first name last name email phone number and password so this will be last name of course email and phone number and this one is for password so inside here at the function we need to declare a variable for our first name okay and then let's get the value by using the Val method and specify our IEP for first name so copy and paste last name email address phone number password one two three four five so this will be for nesting and this is for email third one the fourth one is for phone number and of course for the password okay let's indent this so it should be readable okay so at this point we could actually perform a validation to these values right so first name last name email phone number password in so on but as you can remember as you can probably remember that we defined a required attribute or fields so so we can be assured that the values are not empty but we could also check for validity of our values so bar is valid equals this that for the check validity okay so we're just gonna check if the valid variable is true if it's true let's try to alert true and else false and we need to supply a parameter here and inside the valid is true condition we should prevent the foreground submitting because we want to use the jQuery submit instead of the traditional submit of the form so in the previous tutorial we have already implemented the jQuery and sweet alert to our project so this time we will continue working on with the jQuery so that it will post our data to the database or to a file and then the file will be processing our information processing the form data and insert it to the database so we have here the preventdefault that we have in the previous tutorial so after this line we need to define the age request okay so Ajax requests and curly braces inside and semicolon at the end of this line the next step is to define few things here so the first one is type so the type of this request is post and for the URL we need to define process the PHP so we'll be creating this file later on process the PHP and then data so the data should be all the information or all the variables that we have defined here so or better yet we could change this or import or place this inside the condition valid and then the data should be this dead as follows first name then supply the first name and let's just copy and paste this line 2 3 4 and 5 plus comma and last name and email email email and phone number phone number and of course the password and let's define another option which is the success so this success is a function that has the data parameter okay and let's just copy this one for something if we encounter errors later on create the same thing function in it has theta parameter so we need to copy or sweet alert pop-up to display something here so title should be successful successful and the text here sir register or successfully registered right and we could copy and paste this one or our error function so Ivers and there were errors while saving in stating D and type should be our of course okay so we have the first name last name email phone number password in the password volume okay let's just remove this and this line okay so the next step is to create the process that page P fine so let's define a new file process the PHP and inside this process that PHP let's just echo something for now hello hello from process so we'll know if the process that page P is working or the the Ajax requests that were working on is working so save your file or process that PHP file go back to our browser and refresh our page and let's try to input something here okay first name last name email address phone number and then sign up successfully registered it says successfully registered okay let's change the text instead of successfully registered it should be the data coming from the process that PHP save your file registration dot PHP and go back to the registration that page create a page registration that PHP page and refresh input random email a phone number password and then sign up hello hello from process as you can see so we can say that the process that PHP and the jQuery AJAX request is working okay so the next step is to fully modify our process that PHP so let's just copy the code that we have here earlier okay and paste that into this process at PHP and instead of checking if the post-trade is set what we need is just to check if the post is set I mean the post variable is set so that is set then we could get all the values from the request so first name of course last name email for email phone number in password okay and of course if there's no request let's just echo no data and then we have here the insert for our database right but we don't have the connection for our database so it's just copy be config require once line in paste it here in our process that PHP file so we now have the country all the configurations defined in config that PHP will be included here in our process at HP five so we have here all the values first name last name email phone number in the password so for the password let's make it a little secure by using the sha-1 encryption so to encrypt our password instead of a plain text password the password will be saved us some random characters so it will be less readable if someone got the access to our database so let's save the process that PHP file and of course also this registration dot PHP and go back to your browser and refresh our page okay let's try our let's try first to sign up or click design a button without filling in before okay so as you can see the request will not be processed because there's a validation and if we try to type in values here say for example Chando chendo and email s John Doe at gmail.com number any random number or no and password around ambassador I did click on the signup button and it says successfully saved then let's check our PHP myadmin if the information that we have submitted yes save into our database so took at Holmes Indian page you may add me enter your password or username and password go and then user accounts browse seeing user accounts we can see all the informations that we have submitted so first name last name email and of course the password that is hushed by sha-1 encryption okay so I think that's all there is to it and how to create user registration form in PHP I hope you learned something in this tutorial hey what's up guys welcome back to programming knowledge and this is a video on how to create user login in PHP and this is related to the previous video series and how to create user registration form so in that tutorial we have discussed and learn how to create user registration form and we define its database so we're gonna be using the same database so the database name is user accounts and it has a table name users and the users has ID first name last name email phone number and password so the ID is auto increment and it has it has the size of the leaven the first name is varchar' of our cart with 100 as the len last name the same length and the same type email the same also phone number we have the bar started work are 50 us Lent and password the same 50s then so as I've said we're gonna be using the same database so you can go ahead and create your own database with user accounts and then user is stable right and then all this attributes ID first name last name email phone number in password so we'll be learning how to create this particular login page and we're gonna be using the email and password for our login credentials and I will be showing you all the steps so that we could get up and running with this login page so for now let's create our new project so go to your local host directory and create a new folder and let's name it user login okay so we'll be defining few things or if you files here so we have the first file will be blank in the page B then the second one will be config dot PHP and we also have the index dot PHP and also one for lock out that page okay and we'll be placing our images in IMG folder in CSS into CSS folder so open up plug in that PHP and let's define date HTML structure for this one so we have a basic structure of our beginning at page P and for the title let's say programming knowledge [Music] right we need to include bootstrap jQuery and font awesome in our project because we're going to be using all those libraries to beautify our HTML structure because for an hour to try to visit our page it's it's empty so let's go back to our browser and search for the booster CDN also jQuery CDN and also front also ok click on this first link for bootstrap CDN so you have different files that we have where we have different files that can be included in our project so we have the complete CSS so click the copy and let's go back to our login dot PHP so link and of course paste the link that we have copied from the bootstrap CDN page ok and go back to your browser again we need to include the bootstrap minified that CSS get a copy and go back to can - or login dot PHP we need to make sure to include this at the bottom or before the closing body tag and then for the SSRC paste the code that we have from the bootstraps idiot page again let's go back to our browser and let's click on this jQuery CDN and for now let's use this trick or a three point three point something version and click on this much minified and club b or copy this to be bored and go back to our code and then paste it about the bootstrap that mean that javascript okay so let's just make sure to properly format our code and the next one will be the font awesome okay click on the font awesome link first one and then start using free so we have here the link that we can't include in our page so just click on this button hey and go back to our code and make sure to include this below the bootstrap clean that CSS okay and we need to define a container here so div with a glass container and of course another class or its height as 100% it's a specific for silence and another div with the class t flex with another clip justify content thunder and of course again the H 100 and another day with the class of user underscore card and another div D flex again with justify content center class deep clicks and justify content centered and inside here will be the logo for our login page as you can see in our sample page here so we have here the logo so we will define the logo inside this div so that will be inside another dip switches with a class of brand underscore logo complainer and we will define our teammate here for the logo and let's add a class for our logo which is brand logo and I'll text will be programming knowledge logo Hey and for our logo I have created a very artistic I have some on my my creative abilities to create this very awesome logo for our login page so you can create your own logo just make sure to make it circle so it will fit in our login form so go ahead so go ahead copy and paste your logo into our IMG folder in our project okay so make sure to paste this logo or your logo inside this IMG folder and for the source of our image let's type in IMG and of course the file name or known over just for my case IMG / logo dot PNG and so let's create a new CSS file so that we could target this class and also this class and we will define styles for this so link and for our reference it will be CSS and styles that CSS okay so we have to create this style that CSS inside our CSS folder so I'll create my new CSS file and save it inside the CSS folder this will be styles that CSS and let's start get the body in HTML so this will be margin:0 padding:0 hi hydrant height will be 100% in background color it will be 63 ABC and it should be tagged as important okay and another for a user card and also the brand logo container and another one for the local ok to save as from time and just paste in the the rules that applies to this classes and you can pause the video and copy all the classes that order loose it I'll be pasting in here so we have defined the height for our user card as 400 do it will be 250 pixels margin top auto margin bottom auto background will be f3 Knight seat rail position relative display flex justify content center flash flex Direction column and so on all you have to do is post a video if you want to copy all this Styles applied to this user card class and for the brand underscore logo container we have the position as absolute high it will be hundred 170 px and also the will up will be negative 225 px border a just 50% background will be 68 3 BC and padding will be 10 pixels text-align:center and for our logo will be 150px pixels and with a hundred fifty pixels also very border a just as 50 percent and border will be 2 pixels so solid and white so we'll try to save and preview our page save our style that CSS and make sure also to save your login that PHP and go back to our server browser and reload so I think the CSS rules are working so in this tutorial we'll continue working on with this login form and we will be adding different inputs so input for our username and input for our password so let's go ahead and open up our login that page become so let's pick up where we left off so this is where we ended last time we added our own logo for our sign-in form and let's go ahead another tip for this the class defects and let's add another class which is justify content center we'll be adding another one which is for container and we will add also styles for this for container later on ok so inside this day blitz the pointer for and of course inside this form let's define all the inputs so first let's create a div with input group a pen and we disap attend class of input root X [Music] inside this we'll be adding an icon which we will be using font awesome so I and then it class every s and then F a user and right after this Dave let's on our input with the type text' name will be is rain and the ID will be or surname and also add class to this which has poor control in the juicer and this will be a required film and before we forget let's rip this one into another div so to input input work [Music] okay enclose this live here odd cluster this is in v3 this is mainly related to food sir this in v3 this is for the spacing of our division or depth okay so we'll just Kapiti this input curve for our password also so input group this will be for the password our user so the name will be password the ID password and also instead of input user it it should be input pass and let's just change this into two and let's add another formula also do is the class form group okay and then another live this will hold the Remember Me button if you're familiar with that custom checkbox okay one sec custom check CS so inside here let's type in the input type which is the checkbox course and/or the name it will be or let's not add a link to this but because anyway let's just add name so remember me and the class will be custom control input and with the ID custom control custom control in line and let's just add ladle so with the class cost on show me them and inside here let's just I remember and of course this will be for our custom from custom control in line which is this input checkbox so let's now add the button for our signee so after this dip which is with the class for container let's add another one which is with the class D flex and let's add another class for this justify content contain content center in NP - 3 and it's just a class or custom class for this like entertainer and let's add another in a way which is the button itself so with a type button and with the name the name will be 1 and ID is again let's I've as to this which is VD n and then custom class like in ep N and the value or the displayed text will be lovely okay so the next step is add the sign up button also or link again this is optional but for now let's just add this to our for MD - 450 - yes for and inside this tip let's define another day with class defects justify content center and another custom custom class which is links and inside this div let's just say don't have an account so class no.2 and X would be sign up so as I said this is only optional if you want to implement this signup you could put in the links and for example the link will be for example registration that page so you could put the link here and another day for forgot password defects in justify content center inside this then let's just define a link to reset the password so forgot your password click that so now that we have added all the elements to our forum let's try to preview our page in and see if it looks good in our browser so save our file login dot PHP and go back to your browser navigate to localhost and of course yes sir blankie and the page that were concerned with is the line in that PHP so we have here the newly added elements we have the input remembering me option and we have the links for sign up and forgot password so as we can see they're not sent yet or they're not looking good yet so we need to customize the CSS for our elements so let's go back to our file ok so one thing that I know this earlier is the they have the same icon which is the user font awesome user so instead of user for our password let's just type in the key so let's try that save our file and go back to our browser and refresh so instead of these or icon this will be the newly added icon which is the key that signifies our password ok so let's just change this into type password instead of text let's say password ok now let's go to our Styles that CSS we have defined different or few classes here that we need to target in our CSS to make sure that our Meagan form looks again you can pause the video and try to copy all the CSS styles that we're going to define here so number one will be for container with margin top hundred px or higher pixels e that e login ATM will be with 100% background will be C 0 3 9 2 B and tack this as important color will be white and this will be important so another one will be love II media focus box shadow will be done and tab this is important as well and the outline will be 0px in content as well the login container we have padding:0 to REM and input vertex so background is [Music] zc0 390 B or tan color would be light and water will be 0 this will be or telephone or radius ticker point little hi Arielle zero zero zero point one two five REM and this will be important as well and then input user in the pass this is for our input in our login form or username and password so focus box-shadow will be men and this will be important as well and outline will be 0px and the last one will be custom checkbox wait custom input or control input input and check then custom control then label before this will be background color background color will be also the C's 0:39 to be fact it's as important as well so save our style that CSS and go back to your browser and refresh the page so as you can see we now have a nice-looking laggy for so in the previous tutorial we have added the elements and also added these styles of this login form so now let's do the quick fix for this login button extending way beyond the user and password elements so let's go back to our login dot PHP code ok so here in our code I think we have mistyped the class for lock in container so instead of - let's make it an underscore so it would reflect or it will be the same with the flag and container that we have defined in our styles that CSS so I'll go ahead save your file back in that PHP and go back to our browser and refresh so as you can see the login button is now aligned with the two elements or the username and password elements at the top so let's continue working on with this plugin form and work with our actual logic to allow the user to log in in this particular login form so before going any further let's try to move this form or the end form tag so we would include the login button so at the end of our code just before right before the end body tag let's add another script to work with our login logic so inside here let's define the unload function of the jQuery right let's try it first if it's working or not so alert so say more file logging that PHP and go back to our browser refresh the page and we have the alert that's saying alert so next let's try to select our button so our button has the class okay so if this button is good we will do some logic inside this function so let's try this first and let's try to see if this is working or not so log in that PHP save and go back to our browser refresh and let's try let's try to click on this login button so it's working okay so let's remove this and let's define a new variable here which is valid let's just check if the validity of our forms is true so if the form is valid let's get the value of our username okay so target our username which is with the ID username and in value same thing with our password so the same with password ID so the name of this variable would also be password and let's prevent the submission of this form because we're going to be doing the submission by using the Ajax call to a GS Lang in that page p5 so this part right here let's define the Ajax call okay so the type will be post hey and the URL will be GS GS log in that PHP and the data force will be our username and password okay so username and as in the value username and password and the value password so if this is successful let's display alert first success and if it's not a success of course let's define also our display alert this will be ours or there were errors while I was doing the operation let's just change this later okay same verify and go to jes login that PHP and let's just try to echo something here so and from GS learn in that HP we save J is lagging at page P and go back to our browser refresh and click on this login button so I think we have an error so let's try to turtle ship so accordingly type our e.preventdefault is not a function let's try to troubleshoot the problem so accordingly if prevent that default is not a function because we miss the t letter it there so same logging that PHP and go back to our browser again refresh and click on the login button so accordingly accordingly it was a success the next step is we're going to work with our config dot PHP to actually connect our code to database or MySQL database so config dot PHP let's open the page return here and define your variables so that we could connect to our database so the user for my case is root the password is empty and the database name as we have defined earlier is the user accounts ok let us connect to our database with video so inside here let's type in MySQL house it was localhost and our giving name will be it was that TP named variable that we have defined at data semicolon and the character set for this will be utf-8 and of course we need to pass in the user and the password password yes and let's just set a single attribute for this video object set attribute will be for video attribute run mode and first video on column and error mode will be returned exception whenever there's an error okay so once we have that we could include this to our genius login dot PHP so here we could I've been required once the config that PHP and let's try to the Stratus our video object so select all from users for now and and define a statement cmp select of course using the video object prepared and course the SQL so the result will be username and then execute let's just pass in an empty array and if result a result result yes echo success okay else there were errors there were errors while connecting Judy today hey so see me comment and let's go back to our login at HP so instead of success let's alert the data coming from the GS lag in that HP so lucky in that PHP save and go back to our browser refresh and type in something and click on click in so we have an error there accordingly and if I'd class consent ever mode because we have mistyped this error mode exception so instead of error mode with all the all the letters type in so let's just make it e our arm mode so save the config that page we find in refresh our page and click on the login button so hello from GS login that PHP so horribly it was a success so in our genius lagging at PHP file instead of success so let's define a new variable that we hold all the data coming from the database so fetch and then video fetch associative array and then let's just bar them the user variable for now and save the file go back to our browser refresh the page and type in some values and click on lucky so we have the record with the first name Jane and the last name doe with Jane Doe gmail.com as the email and phone number s they're also password it is Jane Doe so it's working okay so instead of selecting all users we need to filter out with the user name and password but we're going to use the email to ask the user name for now and the password password equals a make one so user name this will be the values coming from our login form o which is username and this name with our password is just passing in the password a password so instead of passing an M theory let's pass in the username and the password and define an if statement statement or SD NP select row count is greater than zero meaning we have a success we found the user in our database else there's no user or that combo or something combo enclose our statement instead of success let's just echo a value one and we'll check here in alerting that PHP if the value is one if the response is with the value one so you need to trim the data coming from our GS login dot PHP and let's check a if it is equal to 1 and let's redirect our user said I am out we know that location feature equals the index with topical index dot PHP and set the delay for about two seconds okay save or lag in that PHP and let's go back to our genius lagging at HP so we have here line number four echo hello from J as Lockheed a pitch up HP we need to remove this so say J is lagging at PHP and go back to our browser refresh so for example you have Jane Doe at gmail.com in your database and you just need to type in the password and then click on this login button so we have the value coming from OJ's login dot PHP us number one it signifies that we found a user in our database with really combination that we entered in the field username and the password so ok and wait for a few seconds so it's redirected to our index at PHP but for now if we try to click on this button we could see again the login that page before which means that we need to set the session so that every time we try to log in with our username and password if we are authenticated then we can stay for it for that particular page or we can stay in that index that page being set of login that page where every time soil or Jes login dot PHP we need to set the session or start the session so session and then start and inside the statement we need to set our session variable and let's pass in our index which will be user login and then that's pass in the user values which is the era coming from our database or the associative array we got from our database so save this and inside the login dot PHP we need to check at the dot so let's open up the page here it goes and let's check if the session with session user login is set and I enter the location index dot PHP same and let's copy and paste this one so in our index dot PHP we could also check if the session user login is not set redirect to login dot PHP so we will just add a element here welcome to index save index dot PHP and go back to your browser refresh and type in your username and password click on login so the user is found people okay so we're not redirected to index that page P that's because we need to add one line to our files so inside login dot PHP we need also to set the session or start the session because we're using the session variable below and make sure to copy and paste these also to index that PHP because again we're using session variable here so index at PHP save and lag in that page B save so refresh our page we are automatically redirected to our index dot PHP we won't be able to go to our plug-in PHP file because the session is set so it's checking if the session is set then stay in index dot PHP otherwise go to login dot PHP there is one more thing that we need here we need a link for us to log out in index dot PHP so let's go back to index dot PHP so we're just going to add the link here and this should be indexed at PHP and drag out equals to true and type in black out okay save in here we need to check if the lock out variable is set so if is said get the log out so we need to destroy the session so session destroy and unset the session redirect to our login that page screen hey save our file index dot PHP and let's go back to our browser and refresh so we have VD log out link so let's click on this we have successfully log out from index dot PHP so we'll try to log in again in index.php by typing in or username the password using an evening so ask for it and then plug in one so we are now at the index dot PHP okay so I think that's all there is to it in this tutorial thanks you

Channel: ProgrammingKnowledge

Views: 169,138

Keywords: User Registration Form, PHP, MySQL, HTML, CSS, Bootstrap, GET, POST, Create a HTML and CSS registration form, PHP Registration Form, Basic Registration Form with PHP, PHP User Registration Form, Register Form, Bootstrap Registration, Login System, Login System PHP, Login Form PHP, Login Form, PHP and MySQL, Login Form Design, Bootstrap 4, JavaScript Login Form, Login form validation in JavaScript, Login form validation, JavaScript

Id: q_jDixroQkw

Length: 104min 52sec (6292 seconds)

Published: Wed Nov 20 2019