Simple login form using AJAX

Good day Blogger,

today i want to share how to create a login form using ajax as a post method.
first you need to create a html login form.

here is my sample code. 

    HTML File (index.php)

then create a css file to design your form. to be more organize create a css folder and put it there. 

here is my css code.

CSS FILE (style.css)

body{ background-color:#C0C0C0; margin:0; !important }

div#login_screen { margin-top:220px; }

.login_screen_header {border:2px solid #000;border-top-left-radius:5px;border-top-right-radius:5px;height:25px;width:400px;background-color:#0033CC;padding-top:5px;box-shadow: 10px 10px 5px #888888;}

.login_screen_header_text {color:#FFFFFF;font-family:"Lucida Console", Monaco, monospace;}

.login_screen_body {border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;height:135px;width:400px;background-color:#E0E0E0;padding-top:5px;font-family:"Lucida Console", Monaco, monospace;padding-top:30px;font-size:13px;box-shadow: 10px 10px 5px #888888;}

input[type="text"] , input[type="password"] {border:1px solid #000;font-family:"Lucida Console", Monaco, monospace;padding:5px;width:130px;border-radius:5px;}

#btnLogin {border:1px solid #000;font-family:"Lucida Console", Monaco, monospace;padding:5px;

width:100%;height:25px;border-radius:5px;background-color:#0033CC;color:#fff;font-weight:bold;

background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));}

#btnLogin:active {background-color:#707070;}

.comsig {margin-top:23px;margin-right:5px;float:right;font-size:9px;}

then create create a folder name it scripts. create a js file name it script.js

inside of js file create a function that execute the ajax.

JS FILE (script.js)

then create a PHP file. name it login.php inside the login.php file is your query that calls everything you need in order login. and echo out the result of requested data.

PHP FILE (login.php)

in order to run all of this, ofcourse you need to create a PHP file that connects your login.php to MySQL server. now create a PHP file and name it config.php. inside of config file is this.

PHP FILE (config.php)

That's it! 

Thank you blogger! Help me to share it. :)

Follow me for more topic I will share. and visit my facebook page. 

www.facebook.com/AskCompTutor