Alur skrip login mirip dengan registrasi. Pengguna harus mengklik menu masuk untuk melihat form dalam dialog modal. Kolom Email dan Kata Sandi digunakan untuk mengautentikasi pengguna terdaftar. Dengan mengirimkan detail login melalui AJAX, kode PHP akan memproses otentikasi. Setelah pengguna berhasil melakukan otentikasi, maka dasbor akan ditampilkan kepada pengguna. Jika detail login tidak benar, maka pengguna akan diberitahu dengan pesan kesalahan.
login-form.php – modal container
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="login-dialog" title="Login Dialog Form" style="display: none;"> <form id="login-form" action="" method="post" role="form"> <div class="input-row"> <span id="email-info"></span> <input type="email" name="login-email-id" id="login-email-id" class="input-field" placeholder="Email ID"> </div> <div class="input-row"> <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 id="ajaxloader" style="display: none"> <img src="LoaderIcon.gif" id="loaderId" /> </div> </div> Request Log |
Request Login Via AJAX
Permintaan AJAX ini melewati tiga parameter yaitu alamat email pengguna, kata sandi, dan parameter tindakan sistem registration login. Params ini dikirim dengan menggunakan metod request POST.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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', type : 'POST', data : { emailId : emailId, password : password, action : actionString }, success : function(response) { if (response.trim() == 'error') { $('#login-success-message').hide(); $('#ajaxloader').hide(); $('#login-error-message').html( "Invalid Attempt. Try Again."); $('#login-error-message').show(); } else { $('.demo-container').html(response); //register_window.dialog("close"); $("#login-dialog").dialog("close"); } } }); this.close(); }// endif } |
Login Case in ajax-login-registration.php
Dengan memeriksa parameter tindakan dan menemukan itu adalah permintaan login, maka alamat email yang dimasukkan dan kata sandi akan digunakan untuk memeriksa database. Sebelum mengikat kata sandi ke kueri validasi login, harus dienkripsi dengan metode yang sama yang diterapkan saat memasukkan ke database. Setelah email dan kata sandi yang dimasukkan dicocokkan dengan database, maka otentikasi akan berhasil. Jika tidak, pengguna akan diberi tahu dengan pesan akun tidak Valid pada dialog modal masuk.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php ... ... if (isset($_POST['action']) && $_POST['action'] == 'login') { $emailId = validateData($_POST['emailId']); $password = validateData($_POST['password']); $password = md5($password); $error_message = ''; $selectQuery = $conn->prepare("select * from tbl_registration where email_id = ? and password = ?"); $selectQuery->bind_param("ss", $emailId, $password); $selectQuery->execute(); $result = $selectQuery->get_result(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $_SESSION['username'] = $row['first_name'] . " " . $row['last_name']; require_once "dashboard.php"; exit(); } // endwhile } // endif else { $error_message = "error"; } // endElse $conn->close(); echo $error_message; } ?> |
Menampilkan Dashboard ke Pengguna yang Masuk
Setelah berhasil masuk, kode PHP akan mengembalikan respons HTML untuk menampilkan dasbor pengguna ke browser. HTML ini akan diperbarui ke UI melalui AJAX tanpa penyegaran halaman. Call back sukses AJAX mendapatkan respons HTML dari PHP dan memproses pembaruan UI. Di HTML dasbor, ini berisi teks sambutan dengan menyapa pengguna yang masuk. Juga, itu akan menunjukkan opsi untuk keluar. Logout sederhana, sebuah tautan HTML akan memanggil logput.php.
Di loggout.php, sesi pengguna akan dihancurkan dan pengguna akan diarahkan ke halaman beranda.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="dashboard"> <?php if (isset($_SESSION['username'])) { echo "Welcome " . $_SESSION['username']; ?> <div style="height: 10px"></div> <div> <a href="logout.php"><input type="button" class="btn-logout" value="Logout"></a> </div> <?php } ?> </div> |
logout.php
|
1 2 3 4 5 6 |
<?php session_start(); unset($_SESSION['username']); session_destroy(); header("Location: index.php"); ?> |
Output
