How to Make a Login Page / Script in PHP and MYSQL Using Jquery

<form name="loginForm">
            <div id="loginFormDiv">
                <table>
                    <caption>Login Here</caption>
                    <tr>
                        <td><label id="loginFormlabel">Username:</label></td><td><input type="text" name="loginUsername" id="loginUsername"></td>
                    </tr>
                    <tr>
                        <td><label id="loginFormlabel">Password:</label></td><td><input type="password" name="loginPassword" id="loginPassword"></td>
                    </tr>
                    </table>
                    <span id="loginInfo">Do not use on public computer</span><br>
                    <input type="button" name="loginSubmitButton" id="loginSubmitButton" onclick="insertdatacheckblank()"  value="Login">

This loginLoader will come when you press the button and then it will check the information if it is wrong it will fade out and will show the error . else you will be redirected.
                    <div id="loginLoader"><img alt="loader"  src="images/loading3.gif"></div><div id="loginError"></div>
</div>
</form>

You can copy paste or you can sue your own code.

This is Head content in which we will put our Jquery code for checking the null and sending the information to our php file. Download the Jquery file so these functions will work

<script src="js/jquery.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
        });
        function reset()
        {
            $('#loginForm')[0].reset();
        }
        function insertdatacheckblank()
        {
            var username=$('#loginUsername').val();
            var password=$('#loginPassword').val();

            if(username==""||password=="")
                {
                   $('#loginError').html("Enter username and password");
                   $('#loginError').fadeIn(1000);
                }
                else
{

                    $('#loginError').fadeOut(1000);
                    $('#loginLoader').fadeIn(1000);
                    $.post("loginCheck.php",$("#loginForm").serialize()
                    {loginUsername:username,loginPassword:password},
                    function(result){
                        if(result=="valid")
                            {
                            window.location="Dashboard.php";
                            }
                            else
                                {
                        $('#loginError').html(result);
                        $('#loginLoader').hide();
                        $('#loginError').fadeIn(1000);
                                }
                    });

                }
    </script>

Good Luck ………. Happy Coding