Login & Register Web Form using PHP XAMPP Frontend, Backend & Database Connection (With Source Code)

welcome to my YouTube channel I'm Francis in this tutorial I will guide you through the process of creating a registration and login form we will connect it to a database using simple code and I provide a thir explanation of each step to ensure that everyone can easily follow along the fronted will be crafted using HTML CSS and JavaScript towards the end we will dive into cating the backhead with PHP allowing our form to store data in the database and verify user logins by the conclusion of this video we will have visual appearing form a connected database and a simp homepage featuring a logout button I hope you find this tutorial enjoyable and informative I also ensure to include a timeline in the video description so that you can easily navigate to any specific section of Interest with that said let's get started I'm using visual studio code AS code editor I also have a live preview extension installed I start by creating a HTML file and naming it index.html I will click on Show preview so that we can visually see the output as we progress I we use exclamation mark to autogenerate the HTML skeleton we modify title tra a register and the login let's generate a div with a class name container and add ID sign up to it let have a title using a heading one element with a class form title and set it to as a register for our register form well let's create a form with method post for Action we're going to leave it empty for now for each input option we will group the icon label and input field together and wrap them with using a class input group I will be using font awesome icons for this so I will open my browser and search for font awesome CDN I will navigate to the website cdnjs docomo the first link and use it as the source hyper Link in my HTML for stylesheet we use element I and for class we have um f for solid icons and then a icon name in this case font or some user icon then I have input type text name first name and give it ID of first name then Place hold a first name label for first name we use ID to connect the label to the input field another input group for last name I use the same icon first far user input type text name last name ID last name placeholder last name so required then create label for last name I Cate another input group for email address the for aome icon for address is envelope input type email it checks for art symbol and domain name to ensure the value entered follow have valid email format then I have ID email Place holder email also required then I have a label for email another input group for password we use a font aome block I [Music] when we use input Ty password the characters entered by user typically hidden then we have label for password let's add an input field that will help us in submitting the form we can do this by adding an input type submit then I will give it a class button value sign up which will show up in our form with the name sign up let's add a paragraph to provide alternative registration options we will include icons for Google and an icon for Facebook using the Fab for font aome brand icon finally let's create a section with the links that we navigate to other forms I already have account and then have button with ID sign in we give you the option to shift to sign in form now that we have completed the sign up container our next step is to duplicate it and make modification to various sections so as maintain the same classes for styling to ensure uniformity and tical appearance I paste it here after the closing tag of the previous container we change ID to sign in let's update heading one to sign in we won't be needing both a first name and last name I go ahead and delete them we will add a link to recover password on input type submit let's change value and name to sign in on the link section let's update it to read don't have account yet and button ID is equals to sign up button and we read and sign up with that completed we conclude the HTML section and move on to to the exciting part that is enhancing the visual appeal of our form we will add a style file and name it style. CSS and Link it up to our HTML we will select or and reset everything margin zero the margin is the space outside an element padding zero sets the padding of all elements to zero the padding is space inside an element then I have box sizing border box font family pint on body we are going to have a background color of # C9 D6 FF then backl linear gradient linear gradient helps in creating a gradient background in this case transitioning from light gray to a light blue it adds a smooth color transition horizontal across the background then I have select a container I have a back cloud of white a w of for 50 pixel a padding of 1.5 L a margin of 50 pixel out this will set top and bottom margins to 50 pixel and horizontally centers the element within it is container then we have border radius of 10 pixel box shadow of zero horizontal offset 20 pixel vertical offset that5 pixel BL radius red green blue Alpha then have form have margin of zero to RM form title give it a font size of 1.5 frame a font weight board text align Center a padding of 1.3 and a margin bottom of 0.4 input color in inherit set the color of an element to be the same as it is parent elements text color with 100% back Cloud color transparent border none border bottom one pixel solid then our color we have a 75 7575 padding left 1.5 frame font size 15 pixel then we have our input group of our padding 1% Z position narative input group icon position absolute when you set a child element to have a position absolute it positions itself relative to the nearest positioned ancestor in this case we have positioned the input group to relative and then we have a color black input focus focus is a pudoc class selector which targets element that currently have Focus going to give it a background color of transparent outline transparent border bottom 2 pixel solid then a color of um 327 90% And 28% input placeholder it's a sudo element selector for placeholder we're going to use a color transparent then now we have label going to give it a color 75757 and a position relative then we position it left 1.2m then a top 1.3 em CER Auto transition 0.3 second is all we will use a p class and sibl combinator to animate the label and give it a top of3 a.m color hsl 327 90% And 28% font size 15 pixel then we select class recover we text align it to right font size one RM margin bottom one RM recover link text decoration n color we have rgb1 125 125 235 recover link on Hoover the color turns to Blue text decoration underline button font size 1.1 R padding 8 pixel and zero border radius of 5 pixel outline n border none with 100% then background color we have a 125 125 235 color white then a c you have a pointer and transition of 0.9 seconds button on Hoover you're going to have a color of 0701 f for class or we're going to set font size to 1.1 Ram margin top 0.5 text align Center for icons we're going to align them at the center I'm going to give icons color of RGB 125 125 235 padding 0.8 for top and bottom 1.5 for left and right border radius 10 pixel font size 1.5 frame c a pointer then border with 2 pixel solid with a color of D Fe 9 F5 margin top zero margin left and right you have 15 pixel transition 1 second icons I on Hoover we're going to change back Cloud to 07001 F similar to our button then a font size of 1.6 Ram botom 2 pixel solid then with a color of 1251 125 235 we're going to select uh the links display Flex it enables Flex layout used in parent container turning its direct children into Flex items justy content space around padding zero for top and bottom and for for right and left margin top 0.9 LM font weight going to make it bold button going to give it a color of 125 125 2 35 border n background color transparent font size one r font weight of B button on Hoover we going to underline text and also we are going to addit a color of blue after applying this Tes our form has an appealing appearance to enhance functionality with cooperate JavaScript to tle between hiding and showing forms based on user selection I will create a new file and name it script.js after creating the script JS file I will link it to the HTML file by adding a script tag just before the closing body tag setting the source attribute to script.js I will hide the register form by default by adding an inline style and setting the display property To None will find four variables for the two forms and two buttons then attach an event listener to each button so we going to have a variable constant sign up button and the document get element by ID sign up button then you're going to have another variable constant sign in button and give it value of sign in button then we're going to have um sign in form variable then uh we're going to assign it uh sign in also we have a cost and sign up form you're going to get element by ID then I have a sign up we're going to add event listener on sign up button so we have sign up button. add event listener on click then we want have this function to execute we want sign in form display to be none and sign up form. display to be block this will hide signin form when this button is clicked and it will show up the sign up form then now we are going to add another event listener to sign in button we have sign in button. add event listener on click then we want this function to execute we want sign in form. st. display to be block and sign up form. display to be none this will hide sign up form and show up the sign in form with this we conclude the fronted development phase moving forward we will be focusing on installing registration data in a database enabling us to interact with the database through SQL queries when needed this marks the beginning of uh the database related work a stage I particularly enjoy on the backhead we will be using zamp which includes Maria DB PHP and P to get started search for zamp in your preferred browser and you will find result resembling mine opt for the Apache friends website it is the official website typically the first result select the download option suitable for your operating system the installation process is straightforward similar to installing any other software programs once zap is installed on your system find it is installation directory in the root directory inside zamp folder you'll find various sub folders including one named HT docks which is our focal point copy the folder where you have been working and paste it into the HT docs folder I proceed to copy mine the login folder into the HT docs directory using Windows search feature look for zamp control panel and launch it upon opening in sheet two essential Services here that is a p and MySQL I will start both Services I will launch vs code within the foldom we have just copied into the HT docs directory open your web browser and enter Local Host followed by a for Slash and the name of the folder you copied into zamp in my case I have login if your form is displayed it confirms that your configuration are ACC and we can proceed open a new tab and enter Local Host in the address bar this action will open the dashboard proceed to click on PHP my admin click on new then input our database name I will name it login and I click the create button and you will be presented with a page to create a table let's create a table named users with five columns and proed to click the create button will be presented with a page where we can enter the table names and configure other options we have column one as ID and also I will check the auto increment to make it primary key I will give it a length of 10 we also have columns for first name last name email and pass password all set to variable character for all them and with a length of 50 click save to create the table I will open vs code and rename index. HTML file to index.php we'll go ahead and create a new PHP file named connect. PHP this file will be used for establishing a connection to the database initiate your code with a PHP P opening and a closing TXS where we place all code exclusively between these two TXS I we declare four variables in PHP we use dollar sign to declare variables so you have a variable host and uh give it value of Local Host valuable user root and valuable password mty string then a database then here you enter your database name then we're going to create a object to establish a database connection so we have a valuable connector then uh we're going to give it value of the object which will establish the connection to the database let's have a a block to check for airline connection if one is detected let Echo failed to connect to database we are going to create another PHP file to handle the forms I will call it register.php and I will open index.php and on the action of the two forms I will enter register.php clude connect. PHP it will enable us to reuse the code in the connection PHP in this current file we are going to use is set function to check if a avable is set or not if is set post sign up the condition checks whether the form variable named sign up is set in the post post array the condition evaluates to true if the sign up form element is present in the form that submitted the data then we have first name to first name then valuable last name valuable email and a valuable password we are going to use md5 function to encrypt password to that two characters hexad decimal number of password is equals to md5 then a variable password we will retrieve all records from the users table where the email matches the one submitted through the registration form if the number of rows return is more than zero it means there is already a user the same email in such a case we will output a message email address already exist also we will insert the data from the form to the database so insert qu insert into us users table first name last name email and password then we are going to insert these values to the respective columns we are going to use a query method of database connection if is equal to true then uh we will redirect the user to index.php page if data has been inserted to database yes we're going to Echo and ER so we proceed to create a login form so if is set post sign in then viable email we're going to give it an email submitted from the form then a variable password we give it a value of password submitted from the form then we're going to encrypt the password using md5 function select or from table users where email is equals to the email submitted and password is equals to password submitted if number of rows is greater than zero then um we're going to start a session then we're going to fetch a row that is email and pass it to the homepage so when the user is logged in he will be directed to homepage and also the session email will be accessible the session is used to declare super group valuables as eom not F incorrect email or password we are going ahead to create a PHP file called homepage. PHP to display the username of the currently logged in user along with a logout button I have a title as home hom page I will add opening and closing PHP tags and call function session start session start function starts or resumes a session allowing you to store and R values in the sessions super glou array I also reuse the code in connect. PHP then I have um sty text line Center padding 15% have paragraph style font size 50 pixel font with board hello then uh PHP opening and closing tag if we set super grou variable email then send it to variable email then I select select users. or columns from user where users do email is equals to the valuable email passed from the super group variable then we are going to Echo first name concatenate with a uh a blank space then I conate it with a last name name I will now attempt to log in and check if the displayed first name and login person is visible it is great to see that it is functioning as expected for the final step we incorporate our logout [Music] button so create our last PHP file and name it logout.php then uh opening and closing PHP tag add a session Dy function and specify the page I want user to be redirected to after log out which in our case is the index.php how about we create a brand new user profile for a certain Mark Lea come with a unique email address once this is done let's try logging in using Mac's account wow hello Mark so homepage is actually displaying the first name and last name from the database this concludes our tutorial video I trust you have gained valuable insights if you found it helpful please consider subscribing to my channel and giving it thumbs up your support is greatly appreciated thank you and uh Happy coding

Channel: frank Tech

Views: 59,158

Keywords:

Id: rHs0b2MaNpg

Length: 25min 49sec (1549 seconds)

Published: Sun Mar 10 2024