User Login System with PHP and MySQL

About this course

hey what's up guys welcome back to programming knowledge and this is the first video on how to create user login in PHP this will be a three part video

series and this is related to the previous five-part video series and how to create user registration form so in that tutorial we have discussed and learned 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 a it has the size of 11 the first name is bar chart or bar card with 100 SD then last name the same length and the same type email the same

also phone number we have the bar chart for a card 50 a slant and password the same 50 as 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 users table okay and then all this attributes ID first name last name email phone number and 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 login dot 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 okay 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

now if you 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 awesome okay click on this first link for a

bootstrap CDN so you have different files that we have or we have different files that can be included in our project so we have the complete CSS so click to 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 okay and go back to our browser again we need to include the bootstrap minified dot CSS it's a

copy and go back to pen to or login that page P we need to make sure to include this at the bottom or before the closing body tag and 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 recreate three point two point something version and click on this with minified and club P

or copy this to the clipboard 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 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 hey 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 stop signs and another div with the class T flex with another clip justify content sender and of course again the H 100 and another tip read the class of

user underscore card and another div D flex again with justify content Center class deep fix 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 the class of and underscore local complainer then we

will define our teammate here for the logo and let's add a class for our logo which is brand logo and all the 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 legged 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 for loan 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 size 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 create my new CSS file and save it inside the CSS folder this will be styles CSS and let's target the body and HTML so this will be margin:0 cutting is zero

hi hydrant height will be 100% and 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 okay to save us from time and just paste and be 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 F 3 9 0 position:relative display flex justify

content center flash flex Direction column in 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 top will be negative 25 px border ages 50 percent background will be 68 3bc

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% and border will be two 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 dot PHP and go back to our server and reload so I think the CSS rules are

working and will continue to work on this form in the next video Thanks you