Create Login Form with PHP, Jquery & CSS3

by Mike Ditka September 9, 2022

Create an elegant login page using CSS3, Jquery + Ajax and processed with PHP.

I actually use this layout for the administrator login page for a web application project that I’m working on, after the application was finished, I finally thought of sharing it with friends at Wakaka Design. Who knows, it can be useful and help speed up the work of friends who are in need of an administrator login page design for their work.

Draft.

The design concept that will be made is minimalist and still looks modern.

What we need

We need a background with a wood texture, it can be found here.

We also need a font to beautify the page, we include the “Oleo Script” font that we embed from Google Webfonts.

Don’t forget Jquery which can be downloaded from jquery.com

Okay equipment is complete, now we start the code part of the program.

HTML Structure
Head

Body

So logically when we click on the Login button, then the javascript will send an Ajax request to the waka-login.php file to find out whether the user and password entered are correct or not.
If it’s wrong, it displays an error message, if it’s true, a slide will occur, and a redirecting message appears…

All that you can change according to your needs later.

CSS Code
After the html structure is complete, it’s time for us to beautify this page with css

PHP
To process the username and password entered by the user, we need PHP, the following php code is used, here we do not check the database, because this is just a concept, the required query can later be placed in the PHP file as well.

<?php