Sistem Login Berbasis AJAX dengan jQuery Lightbox Part 3

Alur skrip login mirip dengan registrasi. Pengguna mesti mengklik fitur masuk bagi melihat form pada dialog modal. Kolom Email dan Kata Sandi digunakan bagi mengautentikasi pengguna terdaftar. Dengan mengirimkan detail login lewat AJAX, kode PHP akan memproses otentikasi. Setelah pengguna berhasil menjalankan otentikasi, karenanya dasbor akan ditampilkan kepada pengguna. Jikalau detail login tak benar, karenanya pengguna akan diberitahu dengan pesan kesalahan.

login-form.php – modal container

<div id=”login-dialog” title=”Login Dialog Form” style=”display: none;”><br />
    <form id=”login-form” action=”” method=”post” role=”form”><br />
        <div class=”input-row”><br />
            <span id=”email-info”></span> <input type=”email”<br />
                name=”login-email-id” id=”login-email-id”<br />
                class=”input-field” placeholder=”Email ID”><br />
        </div><br />
        <div class=”input-row”><br />
            <span id=”password-info”></span> <input type=”password”<br />
                name=”login-password” id=”login-password”<br />
                class=”input-field” placeholder=”Password”><br />
        </div><br />
        <input type=”button” class=”btn-submit” value=”Log In”<br />
            onclick=”ajaxLogin()”><br />
    </form></p>
<p>    <div class=”success-message” id=”login-success-message”<br />
        style=”display: none”></div><br />
    <div class=”error-message” id=”login-error-message”<br />
        style=”display: none”></div><br />
    <div id=”ajaxloader” style=”display: none”><br />
        <img src=”LoaderIcon.gif” id=”loaderId” /><br />
    </div><br />
</div></p>
<p>Request Log

<span id=“email-info”></span> <input type=“email”

name=“login-email-id” id=“login-email-id”

class=“input-field” placeholder=“Email ID”>

</div>

<span id=“password-info”></span> <input type=“password”

name=“login-password” id=“login-password”

class=“input-field” placeholder=“Password”>

</div>

<input type=“button” class=“btn-submit” value=“Log In”

onclick=“ajaxLogin()”>

</form>

<div class=“success-message” id=“login-success-message”

style=“display: none”></div>

<div class=“error-message” id=“login-error-message”

style=“display: none”></div>

</div>

Request Log

Request Login Via AJAX

Permintaan AJAX ini melewati tiga parameter yaitu domisili email pengguna, kata sandi, dan parameter tindakan program registration login. Params ini dikirim dengan menggunakan metod request POST.

function ajaxLogin() {<br />
	$(“.error”).text(“”);<br />
	$(‘#email-info’).removeClass(“error”);<br />
	$(‘#password-info’).removeClass(“error”);</p>
<p>	var emailId = $(‘#login-email-id’).val();<br />
	var password = $(‘#login-password’).val();<br />
	var actionString = ‘login’;</p>
<p>	if (emailId == “”) {<br />
		$(‘#email-info’).addClass(“error”);<br />
		$(“.error”).text(“required”);<br />
	} else if (!validateEmailId(emailId)) {<br />
		$(‘#email-info’).addClass(“error”);<br />
		$(‘.error’).text(“Invalid”);<br />
	} else if (password == “”) {<br />
		$(‘#password-info’).addClass(“error”);<br />
		$(“.error”).text(“required”);<br />
	} else {<br />
		// show loader<br />
		$(‘#loaderId’).show();<br />
		$.ajax({<br />
			url : ‘ajax-login-registration.php’,<br />
			type : ‘POST’,<br />
			data : {<br />
				emailId : emailId,<br />
				password : password,<br />
				action : actionString<br />
			},<br />
			success : function(response) {<br />
				if (response.trim() == ‘error’) {<br />
					$(‘#login-success-message’).hide();<br />
					$(‘#ajaxloader’).hide();<br />
					$(‘#login-error-message’).html(<br />
							“Invalid Attempt. Try Again.”);<br />
					$(‘#login-error-message’).show();<br />
				} else {<br />
					$(‘.demo-container’).html(response);<br />
					//register_window.dialog(“close”);<br />
					$(“#login-dialog”).dialog(“close”);<br />
				}<br />
			}<br />
		});<br />
		this.close();<br />
	}// endif<br />
}

function ajaxLogin() {

$(“.error”).text(“”);

$(‘#email-info’).removeClass(“error”);

$(‘#password-info’).removeClass(“error”);

var emailId = $(‘#login-email-id’).val();

var password = $(‘#login-password’).val();

var actionString = ‘login’;

if (emailId == “”) {

$(‘#email-info’).addClass(“error”);

$(“.error”).text(“required”);

} else if (!validateEmailId(emailId)) {

$(‘#email-info’).addClass(“error”);

$(‘.error’).text(“Invalid”);

} else if (password == “”) {

$(‘#password-info’).addClass(“error”);

$(“.error”).text(“required”);

} else {

// show loader

$(‘#loaderId’).show();

$.ajax({

url : ‘ajax-login-registration.php’,

(Visited 2 times, 1 visits today)

Leave a Reply Cancel reply