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

Рет қаралды 69,416

Күн бұрын

In this comprehensive tutorial, you'll learn how to:
Craft user-friendly login and registration forms using HTML, CSS, and JavaScript (Frontend Development). Connect your forms to a database for secure user information storage (Database Integration). Implement robust backend logic with PHP to handle user authentication (Backend Development).
We'll break down each stage step-by-step, making it easy for beginners and experienced developers alike. Whether you're building a simple website or a complex application, this video equips you with the skills to implement a secure login system.
You'll get access to the complete source code This way, you can follow along, experiment, and customize your login system to fit your specific needs.
___________________________________________________________________________
___________________________________________________________________________
Source Code : github.com/francis-njenga/log...
Portfolio : francis-njenga.vercel.app
__________________________________________________________________________
#programmer #web #webdevelopment #javascript #html #css #php #database #frontend #backend
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
0:00 Introduction
0:43 HTML
5:33 CSS
12:40 JavaScript
15:10 Installing XAMPP
18:25 PHP

Пікірлер: 206

@francis_tech 2 ай бұрын

Thanks for watching😊😊

@FreddyzMontilla Ай бұрын

... umm im here

@AliMogra-xr9bp 10 күн бұрын

hi francis could please load a video that shows how to develop a web based crime record management system for law enforcement

@mbondecyril7944 24 күн бұрын

This is the best tutorial I've seen on this topic. Very detailed and clear explanation. Thank you for uploading, this has help with my project. You got a new subscriber.

@francis_tech 24 күн бұрын

You're very welcome! we keep learning and improving our skills #devfordev

@rejiro8056 18 күн бұрын

This is what exactly I am looking for! Thank you for this tutorial. Such a life saver 🙏

@francis_tech 18 күн бұрын

Glad it was helpful! if you get any issues let me know

@peterenijay1309 Ай бұрын

I don't usually subscribe to channels but you are a good explainer and I really needed this.i subscribed and liked the page. WILL COME BACK TO THIS COMMENT WHEN IT HIT 1 Million views

@francis_tech Ай бұрын

wow 🫡

@FaraidunHussain 2 ай бұрын

Very well structured, great backend and fronted project, and very necessary for website development to know them.

@francis_tech 2 ай бұрын

thanks 🙏😊

@dark_chocolate_za 7 күн бұрын

hey , came across your video and this what exactly needed for my personal school project ,but thank you man this content is what i need.

@francis_tech 7 күн бұрын

am glad that i was able to help you

@gayming4079 28 күн бұрын

Thank you so much for this tutorial!!! Hoping for an another video where you make a system management connected to this!!❤❤❤

@francis_tech 28 күн бұрын

great nice idea

@clintthesb4968 10 күн бұрын

Bro even included the source code!. What a Chad! definitely gonna be following your content.

@francis_tech 10 күн бұрын

Awesome! Thank you!

@khawajasaadqayyum2951 28 күн бұрын

One of the two the point tutorial. Hats off Man 😊

@francis_tech 28 күн бұрын

Glad you liked it! 😊

@GerraldLimbando 2 ай бұрын

Awesome.. well explained.. Looking forward to seeing more content on your channel

@francis_tech 2 ай бұрын

Am Glad, you liked it, stay tuned for even better future content

@vasanthkumar-tk9rx Ай бұрын

You're explanation is awesome, and this tutorial very helpful.. ❤

@francis_tech Ай бұрын

thanks 🙏😊, stay tuned for more tutorials, happy coding

@plain5425 Ай бұрын

very nice, you just got yourself a new subscriber. thanks

@francis_tech Ай бұрын

Welcome aboard! 🫡🫡

@rakshithaveda8973 18 күн бұрын

Thank you so much sir, really it helped me a lot, ur explanation was neat and clear, I got the results on one go, thank you so much.

@francis_tech 18 күн бұрын

glad 😊 was able to help, looking forward for more and better tutorials

@agustinlyon8173 Ай бұрын

Great video! Thanks a lot . it helped on my cs project

@francis_tech Ай бұрын

glad was able to help, 😁 stay locked for more content 🙏

@john-bk4yd Ай бұрын

Nice Tutorial well explained, you got yourself new sub

@francis_tech Ай бұрын

glad you liked it

@LindaElsa-ri6ix Ай бұрын

Thanks, you got a new subscriber

@francis_tech Ай бұрын

thanks 🙏😊

@publiquenews1153 12 күн бұрын

Nice video bro .hope y leting student have code source .that will let student following and asking you to do any video ...❤

@walker_john 2 ай бұрын

Nice tutorial bro

@francis_tech 2 ай бұрын

Glad you liked it!

@raghadbburhan6360 6 күн бұрын

You are a lifesaver!

@francis_tech 6 күн бұрын

glad video was helpful

@nothing23292 18 күн бұрын

thank you so much sir, this is so helpfull 🙏

@francis_tech 18 күн бұрын

glad ☺️ it was helpful

@kellyice1403 2 ай бұрын

Nice tutorial

@francis_tech 2 ай бұрын

Thanks

@marcjulian9183 Ай бұрын

Thankyou so much!

@francis_tech Ай бұрын

welcome 🤗

@TouchGupta 16 күн бұрын

Well documented

@francis_tech 16 күн бұрын

thanks 🙏

@LUCKYTARIMO 20 күн бұрын

Jah bless you babangu

@francis_tech 20 күн бұрын

Thanks

@williamkakooza4603 22 күн бұрын

Thanks Professor

@francis_tech 22 күн бұрын

Haha thanks 🙏

@hiteshvanzara7554 Ай бұрын

Thank you ❤

@francis_tech Ай бұрын

You're welcome 😊

@mohamadantonathoillah7174 2 ай бұрын

Awesome

@francis_tech 2 ай бұрын

glad it helped

@mohamadantonathoillah7174 2 ай бұрын

With all due respect, I'm waiting for a tutorial to forget password@@francis_tech

@Oprekode Ай бұрын

nice application

@francis_tech Ай бұрын

thanks for appreciating

@Skub1shaaa 23 күн бұрын

Well done

@Skub1shaaa 23 күн бұрын

Sub + like ❤❤❤

@francis_tech 23 күн бұрын

glad you liked it ☺️

@francis_tech 23 күн бұрын

thanks 🙏🙏

@guygb91 3 күн бұрын

thank you

@francis_tech 3 күн бұрын

🙏

@PollobChandro6 25 күн бұрын

Nice

@francis_tech 24 күн бұрын

glad you liked it

@edgarkevinmiranda3092 29 күн бұрын

good

@francis_tech 29 күн бұрын

Thanks, 🫡

@KimahLifeTV01 2 ай бұрын

Hello..Thanks fot this amaizing totorial. I have an error when trying to submit my form ..it states that $conn variable in connect.php isn't declared..whats might be the issue?

@francis_tech 2 ай бұрын

Hello, that means there is problem with connection to the database, make sure that your xampp sql and apache are on, also confirm your using the correct database name

@francis_tech 2 ай бұрын

if you downloaded the code from github, check in the video how i created database in phpmyadmin,

@f1ekser928 Ай бұрын

Hello, when I write in the browser, localhost/login gives me (Not Found The requested URL was not found on this server. Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 Server at localhost Port 80) what should I do?

@francis_tech Ай бұрын

hello login should be a folder name in your htdocs do you have such a folder in your htdocs, if not use the name of folder with your code instead of login

@mansa139 18 күн бұрын

Hii Frank thank you so much for the video.Wanted to ask that do we need to download any extension for php in Visual Studio Code?

@francis_tech 18 күн бұрын

No need if you have xammp you are good to go,

@mansa139 18 күн бұрын

@@francis_tech thank you for the response. Also I am still getting an error for the local host part. Any suggestions please?

@francis_tech 18 күн бұрын

@@mansa139 have you placed your code inside htdocs

@mansa139 15 күн бұрын

@@francis_tech yes I did :"). Still not working

@francis_tech 15 күн бұрын

@@mansa139 any error you are getting that way i might know where the problem is

@chhaiYii 6 күн бұрын

🎉🎉

@francis_tech 6 күн бұрын

thanks 👍

@zanimali4077 2 ай бұрын

From minute 7:31 of the video I followed you carefully. However I realised the css code was only changing the register section and not the sign up section. How do i fix this pls help

@francis_tech 2 ай бұрын

Please check the classes used in sign up section are the same as register part, if they are the same then try ctrl+F5 to refresh the css that is if you are using a browser

@orwellbarida7666 19 күн бұрын

Not Found The requested URL was not found on this server. Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.0.30 Server at localhost Port 80 can you help me with this error please, i've been fixing this for days i tried everything

@francis_tech 19 күн бұрын

first check if localhost/ is working if(it is working ){ check and ensure you copy your files in htdocs and also ensure that the page you are redirecting to exists } else { it is a problem with your xammp installation you can uninstall and install again }

@random3314 22 күн бұрын

The closing ?> tag should be omitted from files containing only PHP. Why I get this error on connect.php?

@francis_tech 22 күн бұрын

hello no problem with that you can ignore it its just that maybe you have a php extension installed, though it is true when we have only php in a file we dont need to close it, go ahead and delete the ?> it should still work

@degamorhonnwalterc.8250 2 ай бұрын

how do I design the homepage? should I create a new css file for designing the homepage?

@francis_tech 2 ай бұрын

hello, yes you can add a css in separate file and link it to your homepage.php

@jirehperez693 Ай бұрын

@@francis_tech how?

@francis_tech Ай бұрын

@@jirehperez693 hello

@francis_tech Ай бұрын

you can use the same css file or create a new file and link it to the hompage.php check how i connected the css file to the index.php

@user-vh7nv6uu8i Ай бұрын

In sign in form , when im clicking on sign-up link im not getting the sign up form .. i have checked the code twice sir but still same issue .. what mistake have i done sir

@francis_tech Ай бұрын

hello friend i would like you to check the id used in form matches what you are using in javascript

@AbdurahmanDaacad-vn6ll Ай бұрын

Please Make a video 'how to login/signin with Google or Facebook'

@francis_tech Ай бұрын

okay i will do that stay tuned

@AbdurahmanDaacad-vn6ll Ай бұрын

@francis_tech steel waiting brother hurry up. Tanks

@murwa1012 23 күн бұрын

just curious how many years of exp do u have?

@francis_tech 23 күн бұрын

few am not yet there

@byron7300 5 күн бұрын

Undefined array key "password" in C:\xampp\htdocs\login egister.php on line 39 why does it say this? Can you explain.

@francis_tech 4 күн бұрын

make sure your input field for password have name set as password

@KrudskyML 29 күн бұрын

What if i log in my Facebook using the logo below. Will it send to my SQL DATABASE?

@francis_tech 29 күн бұрын

it does't work that way, facebook, google etc are authentication providers and they authenticate differently you wont have any information to store in sql database, i will do a video on that too

@Adithya659 11 күн бұрын

Sir I have completed the project but I can't activate Email .email is typing them corresponding password is typing but @ this symbol should not contain the symbol what is the solution sir

@francis_tech 11 күн бұрын

when you have input type email, you should enter only a valid email address, check your form what input types you have ensure also for password you have password

@pinkmochi7802 Ай бұрын

Hi I got fatal error uncaught mysqli_sql_exception access denied for user root@local host using password no please help me to debug it

@francis_tech Ай бұрын

This is problem with connecting to the database, please check you are using the correct database name

@pinkmochi7802 Ай бұрын

@@francis_tech I checked and corrected it but now ive got another error its like I can access data of ppl who have signed in or registered but its visible in mysql but not in phpmyadmin can you help me With tht

@tiktoksl6345 2 ай бұрын

Warning: Undefined array key "password" in C:\xampp\htdocs\login-form-with-database-connection-main egister.php on line 33 why show thiss error

@francis_tech 2 ай бұрын

Hello, please redownload the github code, index.php there was an issue but i have rectified that

@shyambalanagu8843 Ай бұрын

im getting an error called The requested URL was not found on this server

@francis_tech Ай бұрын

hello dev, please check whether you have the file you are directing the user after successful login, and make sure the name matches a file you have header("Location: homepage.php"); for instance here you must have homepage.php in the same directory as the register.php

@hehepo 13 күн бұрын

how to solve this? Warning: Attempt to read property "num_rows" on bool in C:\xampp\htdocs\experiment for my capstone egister.php on line 14 Error:Table 'login.users' doesn't exist

@francis_tech 13 күн бұрын

hello friend you don't have table by name login.users in your database

@hehepo 13 күн бұрын

@@francis_tech I already fix it. Thank you for your quick response... You deserve to be followed, thanks man 💙

@francis_tech 13 күн бұрын

glad 😊 was able to help

@user-ui4hp9gp1y Ай бұрын

Script.js page is not connecting with the index.php page... Due to that when clicking on the sign up button nothing performed ☹️ My bca final year project is on 8th may i am in trouble...😣

@francis_tech Ай бұрын

hello 👋 please check on the id, in script file match id in index.php

@user-ui4hp9gp1y Ай бұрын

Thanku so much my mistake was "signup" instead of "signUp"...✨♥️

@seeker3794 10 күн бұрын

What about session and cookie for login?😊

@francis_tech 10 күн бұрын

in next video, i wanted that one to be basic

@user-iz6xd5zr8w 2 ай бұрын

How to connect my main project into navbar login button

@francis_tech 2 ай бұрын

Hello, It is possible you can modify the place i have used homepage.php and use your main page file name to direct user to your main page 21:00

@user-iz6xd5zr8w 2 ай бұрын

Ok I will modified

@francis_tech Ай бұрын

nice

@AdrienMirza 14 күн бұрын

Please Create refferal system under that website

@francis_tech 14 күн бұрын

thanks for that idea i will consider it for future video

@wiemzayene Ай бұрын

Fatal error: Uncaught Error: Class "mysqli" not found in C:\projet_vente\login-form-with-database-connection-main\connect.php:7 Stack trace: #0 C:\projet_vente\login-form-with-database-connection-main egister.php(3): include() #1 {main} thrown in C:\projet_vente\login-form-with-database-connection-main\connect.php on line 7

@francis_tech Ай бұрын

Move the folder downloaded to htdocs after installing xammp

@Horimiya_vlogs 14 күн бұрын

Can you add log out?

@francis_tech 14 күн бұрын

Actually i included Logout in the video, have you watched the entire video 😁😁

@nagasudhamr4574 26 күн бұрын

Sir i am getting an error called localhost is currently unable yo handle this request Help me to solve this sir

@francis_tech 26 күн бұрын

hello friend, have you installed xammp

@edgarkevinmiranda3092 26 күн бұрын

brother, lastly I don't get my name, I only get "HELLO :)" but it doesn't show the name of the user who registered. HELP ME PLEASE :/

@francis_tech 26 күн бұрын

check if the session being passed in register.php matches a column in the database, also check on homepage.php the session variable you are accessing is correct

@durgalingaraja7148 10 күн бұрын

Sir its not working in crome that when i put localhost/login

@francis_tech 10 күн бұрын

hey watch the video on how to set up every thing, and be specific on the error you are getting

@wildrift8077 9 күн бұрын

this one is the format localhost/name of your folder

@IshmaelMohudi 2 ай бұрын

is the source code provided free to use ?

@francis_tech 2 ай бұрын

yeah completely free,

@talhajobayer8666 22 күн бұрын

I have copied all code but box and logo is coming different.. Why is it..?

@francis_tech 22 күн бұрын

hello i used font awesome, icons it should work , try inspecting

@talhajobayer8666 21 күн бұрын

@@francis_tech its working but after clicking sign up that page isnt coming?

@kamalrautela9694 Ай бұрын

everything is working , but as soon as i login , it shows just a blank white screen , with no name popup or logout button , can you please help me with it

@kamalrautela9694 Ай бұрын

try to please help me out asap, i have to use it in my college ,

@kamalrautela9694 Ай бұрын

its says This page isn’t workinglocalhost is currently unable to handle this request. HTTP ERROR 500

@francis_tech Ай бұрын

hello dev, Check if the database connection is correct, and also check the column names you want to access matches what you have in your database

@kamalrautela9694 Ай бұрын

@@francis_techit’s says the requested url was not found on this server

@kamalrautela9694 Ай бұрын

@@francis_techhave you written fName in code or other I have used your codes and everything in video

@nicolecrusim8029 18 күн бұрын

I just copied all the codes but when I click sign up button, it shows up a blank page and on the site it goes to register.php

@francis_tech 18 күн бұрын

If you got the code from github, ensure your database have all the field i created in the video, also ensure all the input fields name matches what is used in register.php, also ensure you have files homepage.php and index.php

@nicolecrusim8029 17 күн бұрын

@@francis_tech I double check everything but it still does not work

@francis_tech 17 күн бұрын

if it doesn't work upload your code to github and share the link i will check

@nicolecrusim8029 17 күн бұрын

@@francis_tech I will upload it

@nicolecrusim8029 17 күн бұрын

I cant send the link here I dont know why

@joefrancecabras9471 Ай бұрын

Hello when i click sign up it will not go to register huhu i follow all the steps

@francis_tech Ай бұрын

inspect the page on your browser, and check the error displayed on console after clicking the button

@dotatwo7373 Ай бұрын

@@francis_tech Hello, thank you for your work. I am encountering this problem as well. upon checking console it produces this error message "Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLButtonElement. (script.js:8:16)". Your response is greatly appreciated

@francis_tech Ай бұрын

@@dotatwo7373 okay make sure all the id names used in the javascript code match what we have in the html page, let me know if that works

@dotatwo7373 Ай бұрын

@@francis_tech OMG! how did I not see that. from smaller case 'u' to uppercase 'U'.hahah Thank you so much!

@francis_tech Ай бұрын

@@dotatwo7373 nice it has worked if you encounter any other problem feel free to ask

@marlluzon4031 15 күн бұрын

I need your help

@marlluzon4031 15 күн бұрын

Mysql in xamp isn't starting, can you help me

@francis_tech 15 күн бұрын

Okay that's a problem with port being used by another software, that means maybe you have another local server or database for instance something like mysql software, if { you have software using that port please disable it } else { try reinstalling xammp again } you can also search for a video on how you can change xampp port

@marlluzon4031 13 күн бұрын

@@francis_techwhere should I entry that code?

@marlluzon4031 13 күн бұрын

@@francis_techwhere should I entry that code?

@marlluzon4031 12 күн бұрын

@@francis_tech is there part2 for homepage ang logout?

@shivanshsharma652 28 күн бұрын

my backend is not work

@shivanshsharma652 28 күн бұрын

i have copied your code in github

@francis_tech 28 күн бұрын

please watch the video on how to create database, installing xampp and how to configure database, all in this video

@francis_tech 28 күн бұрын

tell me the error you are getting

@DevinMcGee-vl6dz Ай бұрын

Is it anyone you can email me the codes for each file ?

@francis_tech Ай бұрын

use GitHub link to download, check description

@TorjoyDasGupto-fo9ps 28 күн бұрын

Table tai show koralen na concept not clear 🤦‍♂️

@francis_tech 28 күн бұрын

hello please show me the error you are getting i may be able to help

@ezesolomon-oe1oh Ай бұрын

can I get the source code

@francis_tech Ай бұрын

Yeah for sure, i have shared github link

@ethio_tube871 2 ай бұрын

please send the source code

@francis_tech 2 ай бұрын

i have shared source code, check description for github link

@realdex7er 5 күн бұрын

Fatal error: Uncaught mysqli_sql_exception: Access denied for user 'root'@'localhost' (using password: NO) in C:\xampp\htdocs\form\connect.php:7 Stack trace: #0 C:\xampp\htdocs\form\connect.php(7): mysqli->__construct('localhost', 'root', Object(SensitiveParameterValue), 'login') #1 C:\xampp\htdocs\form egister.php(3): include('C:\\xampp\\htdocs...') #2 {main} thrown in C:\xampp\htdocs\form\connect.php on line 7 I am getting this error can you check it !!

@francis_tech 5 күн бұрын

Hello ensure mysql is running, also make sure you have database by the name login

@random3314 22 күн бұрын

: Uncaught Error: Class "mysqli" not found in C:\xampp\htdocs\Login\connect.php:8 Stack trace: #0 C:\xampp\htdocs\Login egister.php(3): include() #1 {main} thrown in C:\xampp\htdocs\Login\connect.php on line 8. please help me bro

@francis_tech 22 күн бұрын

hello have you started, mysql on your xammp control panel

@random3314 22 күн бұрын

@@francis_tech yes i started it already

@francis_tech 22 күн бұрын

@@random3314 Open the php.ini file. The default location for XAMPP on location C:\xampp\php\php.ini. Search for the line extension=mysqli. If it's preceded by a semicolon (;), remove the semicolon to uncomment the line. If the line extension=mysqli is missing, add it to the file. Save the changes

@random3314 21 күн бұрын

@@francis_tech i aready done it but it same problem.

@mdtajyusuf2306 Ай бұрын

Fatal error: Uncaught mysqli_sql_exception: Unknown column 'firstName' in 'field list' in C:\xampp\htdocs\login egister.php:20 Stack trace: #0 C:\xampp\htdocs\login egister.php(20): mysqli->query('INSERT INTO use...') #1 {main} thrown in C:\xampp\htdocs\login egister.php on line 20 after clicking on signup im getting this

@francis_tech Ай бұрын

hello friend please counter check if you have a column named firstName in your database

@mdtajyusuf2306 Ай бұрын

@@francis_tech yes I found it thank you

@francis_tech Ай бұрын

@@mdtajyusuf2306 okay nice happy coding

@octaviaofficial86 Ай бұрын

Warning: Undefined variable $conn in C:\xampp\htdocs\Singup egister.php on line 13 Fatal error: Uncaught Error: Call to a member function query() on null in C:\xampp\htdocs\Singup egister.php:13 Stack trace: #0 {main} thrown in C:\xampp\htdocs\Singup egister.php on line 13 bro why turns out like this

@francis_tech Ай бұрын

hello make sure you have included include 'connect.php'; and aslo ensure the database name you created in phpmyadmin matches the database in connect.php

@wiemzayene Ай бұрын

@francis_tech Ай бұрын

move the folder to htdocs and let me know if it is working