如何检查用户并通过然后重定向

Question

This is a template that I use for my project:

http://bootsnipp.com/snippets/featured/custom-login-registration-amp-forgot-password

I want to use that login template with my phpMyAdmin to check username and password.

1. User input their account then click submit button

   

2. After clicking submit button, the icon will change from arrow to animated circle (At this point I want it to check user and password with database phpMyAdmin)

   

3. If their account and password match with the database, it will show "Login success" message, and if they don't match, a "Wrong username or password" message will show.

   

4. If username and password match, wait for 3 seconds and then redirect to another page.

I don't know how to combine my phpMyAdmin with this login form. So if you know how to do so, please tell or suggest how I can finish this project.

Here is my code:

 html, body { background: #efefef; padding: 10px; font-family: 'Varela Round'; } /*=== 2. Anchor Link ===*/ a { color: #aaaaaa; transition: all ease-in-out 200ms; } a:hover { color: #333333; text-decoration: none; } /*=== 3. Text Outside the Box ===*/ .etc-login-form { color: #919191; padding: 10px 20px; } .etc-login-form p { margin-bottom: 5px; } /*=== 4. Main Form ===*/ .login-form-1 { max-width: 300px; border-radius: 5px; display: inline-block; } .main-login-form { position: relative; } .login-form-1 .form-control { border: 0; box-shadow: 0 0 0; border-radius: 0; background: transparent; color: #555555; padding: 7px 0; font-weight: bold; height:auto; } .login-form-1 .form-control::-webkit-input-placeholder { color: #999999; } .login-form-1 .form-control:-moz-placeholder, .login-form-1 .form-control::-moz-placeholder, .login-form-1 .form-control:-ms-input-placeholder { color: #999999; } .login-form-1 .form-group { margin-bottom: 0; border-bottom: 2px solid #efefef; padding-right: 20px; position: relative; } .login-form-1 .form-group:last-child { border-bottom: 0; } .login-group { background: #ffffff; color: #999999; border-radius: 8px; padding: 10px 20px; } .login-group-checkbox { padding: 5px 0; } /*=== 5. Login Button ===*/ .login-form-1 .login-button { position: absolute; right: -25px; top: 50%; background: #ffffff; color: #999999; padding: 11px 0; width: 50px; height: 50px; margin-top: -25px; border: 5px solid #efefef; border-radius: 50%; transition: all ease-in-out 500ms; } .login-form-1 .login-button:hover { color: #555555; transform: rotate(450deg); } .login-form-1 .login-button.clicked { color: #555555; } .login-form-1 .login-button.clicked:hover { transform: none; } .login-form-1 .login-button.clicked.success { color: #2ecc71; } .login-form-1 .login-button.clicked.error { color: #e74c3c; } /*=== 6. Form Invalid ===*/ label.form-invalid { position: absolute; top: 0; right: 0; z-index: 5; display: block; margin-top: -25px; padding: 7px 9px; background: #777777; color: #ffffff; border-radius: 5px; font-weight: bold; font-size: 11px; } label.form-invalid:after { top: 100%; right: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #777777; border-width: 6px; } /*=== 7. Form - Main Message ===*/ .login-form-main-message { background: #ffffff; color: #999999; border-left: 3px solid transparent; border-radius: 3px; margin-bottom: 8px; font-weight: bold; height: 0; padding: 0 20px 0 17px; opacity: 0; transition: all ease-in-out 200ms; } .login-form-main-message.show { height: auto; opacity: 1; padding: 10px 20px 10px 17px; } .login-form-main-message.success { border-left-color: #2ecc71; } .login-form-main-message.error { border-left-color: #e74c3c; } /*=== 8. Custom Checkbox & Radio ===*/ /* Base for label styling */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked, [type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; left: -9999px; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label, [type="radio"]:not(:checked) + label, [type="radio"]:checked + label { position: relative; padding-left: 25px; padding-top: 1px; cursor: pointer; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border: 0px solid #aaa; background: #f0f0f0; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } /* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after, [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after { position: absolute; color: #555555; transition: all .2s; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } /* disabled checkbox */ [type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before, [type="radio"]:disabled:not(:checked) + label:before, [type="radio"]:disabled:checked + label:before { box-shadow: none; border-color: #8c8c8c; background-color: #878787; } [type="checkbox"]:disabled:checked + label:after, [type="radio"]:disabled:checked + label:after { color: #555555; } [type="checkbox"]:disabled + label, [type="radio"]:disabled + label { color: #8c8c8c; } /* accessibility */ [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before, [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted #f6f6f6; } /* hover style just for information */ label:hover:before { border: 1px solid #f6f6f6 !important; } /*=== Customization ===*/ /* radio aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { border-radius: 3px; } [type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before { border-radius: 35px; } /* selected mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '✔'; top: 0; left: 2px; font-size: 14px; } [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after { content: '\\2022'; top: 0; left: 3px; font-size: 30px; line-height: 25px; } /*=== 9. Misc ===*/ .logo { padding: 15px 0; font-size: 25px; color: #aaaaaa; font-weight: bold; } /* hebrew */ @font-face { font-family: 'Varela Round'; font-style: normal; font-weight: 400; src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(http://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrkByb1TKJa77egybnpn19yM.woff2) format('woff2'); unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; } /* vietnamese */ @font-face { font-family: 'Varela Round'; font-style: normal; font-weight: 400; src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(http://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Varela Round'; font-style: normal; font-weight: 400; src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(http://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Varela Round'; font-style: normal; font-weight: 400; src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(http://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } button:focus { outline:none !important; } 

 <!DOCTYPE html> <html lang="en"> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head> <body> <!-- All the files that are required --> <!-- Where all the magic happens --> <!-- LOGIN FORM --> <div class="text-center" style="padding:50px 0"> <div class="logo">Login to Smartmeter system</div> <!-- Main Form --> <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="login-form-main-message"></div> <div class="main-login-form"> <div class="login-group"> <div class="form-group"> <label for="lg_username" class="sr-only">Username</label> <input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="Username"> </div> <div class="form-group"> <label for="lg_password" class="sr-only">Password</label> <input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="Password"> </div> </div> <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> </div> <div class="etc-login-form"> <center><p>Additional Text can input here</a></p></center> </div> </form> </div> <!-- end:Main Form --> </div> <!-- Ajax Script --> <script type="text/javascript"> (function($) { "use strict"; // Options for Message //---------------------------------------------- var options = { 'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>', 'btn-success': '<i class="fa fa-check"></i>', 'btn-error': '<i class="fa fa-remove"></i>', 'msg-success': 'Login Success! Redirecting...', 'msg-error': 'Wrong login credentials!', 'useAJAX': true, }; // Login Form //---------------------------------------------- // Validation $("#login-form").validate({ rules: { lg_username: "required", lg_password: "required", }, errorClass: "form-invalid" }); // Form Submission $("#login-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Register Form //---------------------------------------------- // Validation $("#register-form").validate({ rules: { reg_username: "required", reg_password: { required: true, minlength: 5 }, reg_password_confirm: { required: true, minlength: 5, equalTo: "#register-form [name=reg_password]" }, reg_email: { required: true, email: true }, reg_agree: "required", }, errorClass: "form-invalid", errorPlacement: function( label, element ) { if( element.attr( "type" ) === "checkbox" || element.attr( "type" ) === "radio" ) { element.parent().append( label ); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls"> ) } else { label.insertAfter( element ); // standard behaviour } } }); // Form Submission $("#register-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Forgot Password Form //---------------------------------------------- // Validation $("#forgot-password-form").validate({ rules: { fp_email: "required", }, errorClass: "form-invalid" }); // Form Submission $("#forgot-password-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Loading //---------------------------------------------- function remove_loading($form) { $form.find('[type=submit]').removeClass('error success'); $form.find('.login-form-main-message').removeClass('show error success').html(''); } function form_loading($form) { $form.find('[type=submit]').addClass('clicked').html(options['btn-loading']); } function form_success($form) { $form.find('[type=submit]').addClass('success').html(options['btn-success']); $form.find('.login-form-main-message').addClass('show success').html(options['msg-success']); } function form_failed($form) { $form.find('[type=submit]').addClass('error').html(options['btn-error']); $form.find('.login-form-main-message').addClass('show error').html(options['msg-error']); } // Dummy Submit Form (Remove this) //---------------------------------------------- // This is just a dummy form submission. You should use your AJAX function or remove this function if you are not using AJAX. function dummy_submit_form($form) { if($form.valid()) { form_loading($form); setTimeout(function() { form_success($form); }, 2000); } } })(jQuery); </script> </body> </html> 

connect.php

<?php 
$servername = "localhost"; 
$username = "root";
$password = "";
$dbname = "consumption";
$tbname = "user";
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn -> connect_error){
    die ("connection failed: " . $conn -> connect_error);
}

Answer 1

Edit your html to this

 <!DOCTYPE html> <html lang="en"> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head> <body> <!-- All the files that are required --> <!-- Where all the magic happens --> <!-- LOGIN FORM --> <div class="text-center" style="padding:50px 0"> <div class="logo">Login to Smartmeter system</div> <!-- Main Form --> <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="login-form-main-message"></div> <div class="main-login-form"> <div class="login-group"> <div class="form-group"> <label for="lg_username" class="sr-only">Username</label> <input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="Username"> </div> <div class="form-group"> <label for="lg_password" class="sr-only">Password</label> <input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="Password"> </div> </div> <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> </div> <div class="etc-login-form"> <center><p>Additional Text can input here</a></p></center> </div> </form> </div> <!-- end:Main Form --> </div> <!-- Ajax Script --> <script type="text/javascript"> (function($) { "use strict"; // Options for Message //---------------------------------------------- var options = { 'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>', 'btn-success': '<i class="fa fa-check"></i>', 'btn-error': '<i class="fa fa-remove"></i>', 'msg-success': 'Login Success! Redirecting...', 'msg-error': 'Wrong login credentials!', 'useAJAX': true, }; // Login Form //---------------------------------------------- // Validation $("#login-form").validate({ rules: { lg_username: "required", lg_password: "required", }, errorClass: "form-invalid" }); // Form Submission $("#login-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); window.location.href = "mypage.php"; // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Register Form //---------------------------------------------- // Validation $("#register-form").validate({ rules: { reg_username: "required", reg_password: { required: true, minlength: 5 }, reg_password_confirm: { required: true, minlength: 5, equalTo: "#register-form [name=reg_password]" }, reg_email: { required: true, email: true }, reg_agree: "required", }, errorClass: "form-invalid", errorPlacement: function( label, element ) { if( element.attr( "type" ) === "checkbox" || element.attr( "type" ) === "radio" ) { element.parent().append( label ); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls"> ) } else { label.insertAfter( element ); // standard behaviour } } }); // Form Submission $("#register-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Forgot Password Form //---------------------------------------------- // Validation $("#forgot-password-form").validate({ rules: { fp_email: "required", }, errorClass: "form-invalid" }); // Form Submission $("#forgot-password-form").submit(function() { remove_loading($(this)); if(options['useAJAX'] == true) { // Dummy AJAX request (Replace this with your AJAX code) // If you don't want to use AJAX, remove this dummy_submit_form($(this)); // Cancel the normal submission. // If you don't want to use AJAX, remove this return false; } }); // Loading //---------------------------------------------- function remove_loading($form) { $form.find('[type=submit]').removeClass('error success'); $form.find('.login-form-main-message').removeClass('show error success').html(''); } function form_loading($form) { $form.find('[type=submit]').addClass('clicked').html(options['btn-loading']); } function form_success($form) { $form.find('[type=submit]').addClass('success').html(options['btn-success']); $form.find('.login-form-main-message').addClass('show success').html(options['msg-success']); } function form_failed($form) { $form.find('[type=submit]').addClass('error').html(options['btn-error']); $form.find('.login-form-main-message').addClass('show error').html(options['msg-error']); } // Dummy Submit Form (Remove this) //---------------------------------------------- // This is just a dummy form submission. You should use your AJAX function or remove this function if you are not using AJAX. function dummy_submit_form($form) { if($form.valid()) { form_loading($form); setTimeout(function() { form_success($form); }, 2000); } } })(jQuery); </script> </body> </html>