Login & Register Web Form using PHP XAMPP Frontend, Backend & Database Connection (With Source Code)
Vložit
- čas přidán 28. 06. 2024
- 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 - Věda a technologie
![Backend web development tutorial for beginners | How to create a website? Part 2 [ login page ]](http://i.ytimg.com/vi/PWPtyYoqZCg/mqdefault.jpg)
Thanks for watching😊😊
... umm im here
hi francis could please load a video that shows how to develop a web based crime record management system for law enforcement
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.
am glad that i was able to help you
This is what exactly I am looking for! Thank you for this tutorial. Such a life saver 🙏
Glad it was helpful! if you get any issues let me know
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.
You're very welcome! we keep learning and improving our skills #devfordev
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
wow 🫡
Very well structured, great backend and fronted project, and very necessary for website development to know them.
thanks 🙏😊
Thank you so much for this tutorial!!! Hoping for an another video where you make a system management connected to this!!❤❤❤
great nice idea
Awesome.. well explained..
Looking forward to seeing more content on your channel
Am Glad, you liked it, stay tuned for even better future content
OMGGGGGGGGGGGGGGGGGG
after many videos, i found the bestest one!!!! THANKS ALOT
am grateful it was helpful
stay locked for future content
Bro even included the source code!. What a Chad! definitely gonna be following your content.
Awesome! Thank you!
One of the two the point tutorial. Hats off Man 😊
Glad you liked it! 😊
very nice, you just got yourself a new subscriber. thanks
Welcome aboard! 🫡🫡
You're explanation is awesome, and this tutorial very helpful.. ❤
thanks 🙏😊, stay tuned for more tutorials, happy coding
Great video! Thanks a lot . it helped on my cs project
glad was able to help, 😁 stay locked for more content 🙏
Nice Tutorial well explained, you got yourself new sub
glad you liked it
Thanks, you got a new subscriber
thanks 🙏😊
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.
glad 😊 was able to help, looking forward for more and better tutorials
You are a lifesaver!
glad video was helpful
Nice tutorial bro
Glad you liked it!
I forget that website lol, thanks for remembering me man
No worries!
thank you so much sir, this is so helpfull 🙏
glad ☺️ it was helpful
Well documented
thanks 🙏
Nice tutorial
Thanks
Thankyou so much!
welcome 🤗
Nice video bro .hope y leting student have code source .that will let student following and asking you to do any video ...❤
Thanks Professor
Haha thanks 🙏
Jah bless you babangu
Thanks
Thank you ❤
You're welcome 😊
Awesome
glad it helped
With all due respect, I'm waiting for a tutorial to forget password@@francis_tech
Nice
glad you liked it
Hi, thank you so much for content. I have a question. If I want to run it globally instead of locally, what should I do? Should I use MySQL or how should I connect this time, what should I change? Could you guide me please?
what happens is that you will have a php my admin in the hosting website, there you will create your database and connect it with its credentials, do research about the site you want to host in
nice application
thanks for appreciating
nice
thanks 🙏
Well done
Sub + like ❤❤❤
glad you liked it ☺️
thanks 🙏🙏
thank you
🙏
good
Thanks, 🫡
Hi Sir, Please make one solid playlist for JavaScript and React JS
actually am working on that in few weeks i will have those videos in my channel
🎉🎉
thanks 👍
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?
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
if you downloaded the code from github, check in the video how i created database in phpmyadmin,
hi very great video better than anything I've watched before relieved me of my stress about the login and registration page but I have a problem when I change the HTML to PHP my page says cannot get /test.html (test.html is what I named it btw) what is the problem?
Glad it helped, also it wont be nice to name it .html considering there is php code in it, but you can add any html code in those php scripts
@@francis_tech i copied everything you have done but as soon as I change the HTML to PHP it doesn't work anymore
@@halloftexts312 yeah because using php you will need to set up xampp as server for php to run
Hello! Thank you so much for the tutorial. I have only one problem - after registration I enter an email address and the password. It redirects me to the page where is written 'Not Found, Incorrect Email or Password' even when I enter correct email and password. What can be a problem in this case? Thank you in advance.
check if the email was inserted in the database
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?
No need if you have xammp you are good to go,
@@francis_tech thank you for the response. Also I am still getting an error for the local host part. Any suggestions please?
@@mansa139 have you placed your code inside htdocs
@@francis_tech yes I did :"). Still not working
@@mansa139 any error you are getting that way i might know where the problem is
❤❤❤❤
thanks 😊
Hello, so I completed everything and followed to the T. But when I fill in the boxes in the sign in, the sign in refreshes itself. Then from the register sign up, I fill in each box and it would go to the sign in box/page. I don't know why it won't show "Hello...." after filling everything in?!
hello have you connected to database, check if there is a user added
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?
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
Please Make a video 'how to login/signin with Google or Facebook'
okay i will do that stay tuned
@francis_tech steel waiting brother hurry up. Tanks
The closing ?> tag should be omitted from files containing only PHP. Why I get this error on connect.php?
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
What if i log in my Facebook using the logo below. Will it send to my SQL DATABASE?
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
how do I design the homepage? should I create a new css file for designing the homepage?
hello, yes you can add a css in separate file and link it to your homepage.php
@@francis_tech how?
@@jirehperez693 hello
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
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
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
Please i use your source code, everything is working fine but after a successful registration, i only get HELLO without the username. And also when i delete the css code, the styling is still there. Nothing changes. What could be the reason?
if css is still there press ctrl +F5 to clear cache, on displaying data ensure you are fetching the right column and session variable is set
When I do any changes to the styling it doesn't take effect. For example if I change the background color, the hover color or any changes it doesn't work. Even with the JavaScript. But when I created a different folder and created the same files and put the codes in them, and I changed the name of the database, the css is functioning but the font awesome icons move inside the input fields instead of them being outside. Also the JavaScript is not working on the new folder I have created.
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
hello friend you don't have table by name login.users in your database
@@francis_tech I already fix it. Thank you for your quick response... You deserve to be followed, thanks man 💙
glad 😊 was able to help
What about session and cookie for login?😊
in next video, i wanted that one to be basic
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
hello friend i would like you to check the id used in form matches what you are using in javascript
just curious how many years of exp do u have?
few am not yet there
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
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
}
I have a doubt,
When i click signup button it doesn't open and i check all id's in js file and index as same. I got error is "cannot read property of null (reading 'addEventListener')
hello check the ids ensure they are the same including case
I opened inspect and check s for console has error is uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
@@francis_tech I have error for fatal error uncaught mysqli_sql_exception access denied for user 'root'@'localhost' password no.I have write command 'skip-grant-tables' for my.ini in mySQL , but there is no use ,please write solution bro
Undefined array key "password" in C:\xampp\htdocs\login
egister.php on line 39
why does it say this? Can you explain.
make sure your input field for password have name set as password
Man im stuck at one place , when i click on Sign Up button, nothing happens , it doesnt get directed to register page , any help would be appreciative, thanks .
please check the id you are using matches what you have in html including case
How to connect my main project into navbar login button
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
Ok I will modified
nice
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
This is problem with connecting to the database, please check you are using the correct database name
@@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
Please Create refferal system under that website
thanks for that idea i will consider it for future video
hi sir im getting "Error:Field 'id' doesn't have a default value" after trying in localhost
you were supposed to mark auto increment when creating database
Can we deploy this website in online by github with our own domain name
Pls anyone tell me
hello yeah, you can do that using vercel or github pages
Bro i dont have htdocs in xaamp folder what can i do
just uninstall xammp and install again
im getting an error called The requested URL was not found on this server
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
Warning: Undefined array key "password" in C:\xampp\htdocs\login-form-with-database-connection-main
egister.php on line 33 why show thiss error
Hello, please redownload the github code, index.php there was an issue but i have rectified that
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...😣
hello 👋 please check on the id, in script file match id in index.php
Thanku so much my mistake was "signup" instead of "signUp"...✨♥️
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
Move the folder downloaded to htdocs after installing xammp
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
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
Can you add log out?
Actually i included Logout in the video, have you watched the entire video 😁😁
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 :/
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
pls answer why cant i seee the actual password of the accounts. it just shows random numbers
because we used md5 to encrypt password
Sir its not working in crome that when i put localhost/login
hey watch the video on how to set up every thing, and be specific on the error you are getting
this one is the format localhost/name of your folder
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
try to please help me out asap, i have to use it in my college ,
its says This page isn’t workinglocalhost is currently unable to handle this request.
HTTP ERROR 500
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
@@francis_techit’s says the requested url was not found on this server
@@francis_techhave you written fName in code or other
I have used your codes and everything in video
Sir i am getting an error called localhost is currently unable yo handle this request
Help me to solve this sir
hello friend, have you installed xammp
Hii sir i want one website sir that website is multiple cctv and different watch live or preview my website this is possible or un possible
That type coding I want sir
Modern CCTV systems usually come with their own software, You can access live previews using the camera's IP address. Please research this further
@@francis_tech tq response sir you can any help me?
I have copied all code but box and logo is coming different.. Why is it..?
hello i used font awesome, icons it should work , try inspecting
@@francis_tech its working but after clicking sign up that page isnt coming?
I need your help
Mysql in xamp isn't starting, can you help me
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
@@francis_techwhere should I entry that code?
@@francis_techwhere should I entry that code?
@@francis_tech is there part2 for homepage ang logout?
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
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
@@francis_tech I double check everything but it still does not work
if it doesn't work upload your code to github and share the link i will check
@@francis_tech I will upload it
I cant send the link here I dont know why
is the source code provided free to use ?
yeah completely free,
Hello when i click sign up it will not go to register huhu i follow all the steps
inspect the page on your browser, and check the error displayed on console after clicking the button
@@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
@@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
@@francis_tech OMG! how did I not see that. from smaller case 'u' to uppercase 'U'.hahah Thank you so much!
@@dotatwo7373 nice it has worked if you encounter any other problem feel free to ask
i can not go signup to login page
please check the id you are using in javascript matches the id in HTML
@@francis_tech its all correct when we give a data and click to sign up it goes on blank page also the data is not inserting in the database
@@Cartoonsi hey please check on my description i have full source code link, compare it with your code, also ensure database name matches what you have in the code
@@francis_tech solve thanks
plz share your code or github link
have you checked description
Is it anyone you can email me the codes for each file ?
use GitHub link to download, check description
my backend is not work
i have copied your code in github
please watch the video on how to create database, installing xampp and how to configure database, all in this video
tell me the error you are getting
Table tai show koralen na concept not clear 🤦♂️
hello please show me the error you are getting i may be able to help
There is no Html in your source code.
watch the video, 🤣 i modified along the way
can I get the source code
Yeah for sure, i have shared github link
please send the source code
i have shared source code, check description for github link
Good one
Please you didn’t test the connection and I have issue with mine as I was following you .
Warning Underfoned array key in register .php line 7 and 8
check all input fields have a name, and you are accessing the names properly
Fatal error: Uncaught mysqli_sql_exception: Table 'login.users' doesn't exist in C:\xampp\htdocs\loginpage
egister.php:13 Stack trace: #0 C:\xampp\htdocs\loginpage
egister.php(13): mysqli->query('SELECT * From u...') #1 {main} thrown in C:\xampp\htdocs\loginpage
egister.php on line 13
getting this error when i login in through the localhost please help
hello Check your database, and create table users
@@francis_tech table user has already been created
@@priyanshranjan2829 if you have table users created why are you trying to use table login.users instead of user
@@francis_tech thankyou for helping now its working
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 !!
Hello ensure mysql is running, also make sure you have database by the name login
Fatal error: Uncaught mysqli_sql_exception: Duplicate entry '0' for key 'PRIMARY' 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 this error is showing
sir plz help
hello, you were supposed to mark the id field as auto increment
: 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
hello have you started, mysql on your xammp control panel
@@francis_tech yes i started it already
@@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
@@francis_tech i aready done it but it same problem.
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
hello friend please counter check if you have a column named firstName in your database
@@francis_tech yes I found it thank you
@@mdtajyusuf2306 okay nice happy coding
Bro do u have a whatsapp group or a community
not yet, but you can reach out Francis-njenga.vercel.app
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
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
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
move the folder to htdocs and let me know if it is working