Sistem Login Berbasis AJAX dengan jQuery Lightbox Part 1

Form register adalah sistem yang memungkinkan pengguna memperoleh membership untuk memperoleh hak istimewa khusus yang bervariasi berdasarkan aplikasi. Pentingnya sistem registerÂ dalam suatu aplikasi adalah untuk membuat pengunjung sebagai membership terdaftar dari aplikasi dan membiarkan mereka masuk ke sistem.

Sebagian besar, halaman login akan menjadi halaman utamaÂ umum untuk aplikasi web administratif. Misalnya, di admin WordPress, panel login akan ditampilkan sebagai halaman arahan. Menerapkan pendaftaran login sederhana dalam aplikasi online seperti aplikasi eCommerce.

Langkah-langkah untuk Membuat Sistem Registrasi Login dengan Lightbox

Pada artikel ini, kita akan melihat cara membuat sistem Registrasi Login berbasis AJAX dalam PHP. Saya juga akan mengintegrasikan UI jQuery untuk menampilkan login dan panel registrasi dalam bentuk Lightbox.

Jadi, kita akan belajar beberapa hal dengan contoh ini.

Bagaimana cara mengintegrasikan library jQuery UI untuk menampilkan lightbox.
Cara memuat form register Login HTML ke container lightbox.
Cara memvalidasi data form dan menunjukkan respons validasi di lightbox.
Cara mengirim permintaan register masuk ke titik akhir PHP melalui jQuery AJAX.
Cara memproses otentikasi masuk dan pendaftaran pengguna di kode PHP.

Flow Kontrol di antara Modal jQuery, AJAX Handlers dan PHP

Menampilkan dialog modal atau jenis jendela pop-up lainnya dapat dilakukan dengan mudah dengan menggunakan jQuery UI. Ada berbagai plugin penuh fitur untuk menampilkan dialog modal.Â jQuery UI dialog box adalah pilihan yang sangat baik untuk menampilkan dialog modal dalam suatu aplikasi. Login dan form pendaftaran kode HTML dibuat di dalam container modal.

Dengan mengirimkan form Pendaftaran Login, data akan diposting ke PHP melalui AJAX setelah validasi sisi klien. Sistem pendaftaran login dengan dialog jQuery dan aksi pengiriman AJAX akan mempercantik situs web Anda.

Landing HTML dengan Header Login Register Menu

Di bagian ini, kita akan melihat kode HTML yang digunakan untuk menampilkan halaman landing page. Di halaman ini, bagian header akan ditampilkan dengan tautan menu register dan login.

Opsi menu ditampilkan dalam bentuk tombol HTML. Dengan referensi objek elemen tombol ini, jendela dialog jQuery UI akan muncul untuk menampilkan form login atau registrasi yang sesuai.

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<script src="vendor/jquery/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        
</head>

<body>
    <div class="demo-container">
        <h2>AJAX based Login Registration System with jQuery Lightbox</h2>
        <div class="login-registration-menu">
            <input type="button" value="Login" id="btn-login"> <input
                type="button" value="Register" id="btn-register">
        </div>
        <div class="thank-you-registration">
        </div>
        <?php 
            require_once "login-form.php";
            require_once "registration-form.php";
        ?>
    </div>
</body>
</html>

<?php

session_start();

<!DOCTYPE html>

<html>

<head>

href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

</head>

<body>

<h2>AJAX based Login Registration System with jQuery Lightbox</h2>

<input type="button" value="Login" id="btn-login"> <input

type="button" value="Register" id="btn-register">

</div>

</div>

<?php

require_once "login-form.php";

require_once "registration-form.php";

</div>

</body>

</html>

Form masuk dan pendaftaran HTML disimpan dalam file PHP terpisah yang dimasukkan ke halaman HTML landing page ini. Pada pemuatan halaman, dialog UI jQuery dipakai dengan mengatur opsi seperti dimensi jendela modal, kode call back untuk close event.

Dengan mengklik tombol masuk atau registrasi, instance dialog yang sesuai digunakan untuk membuka jendela dialog.

<script>
    $(function () {
        var login_window = $("#login-dialog").dialog({autoOpen: false,
            height: 280,
            width: 520,
            modal: true,
            closeText: '',
            close: function () {
                register_window.dialog("close");
            }

        });

        $("#btn-login").button().on("click", function () {
            login_window.dialog("open");
        });

        var register_window = $("#register-dialog").dialog({autoOpen: false,
            height: 530,
            width: 520,
            modal: true,
            closeText: '',
            close: function () {
                register_window.dialog("close");
            }

        });

        $("#btn-register").button().on("click", function () {
            register_window.dialog("open");
        });
    });

</script>
<script src="login-registration.js"></script>

$(function () {

var login_window = $("#login-dialog").dialog({autoOpen: false,

height: 280,

width: 520,

modal: true,

closeText: '',

close: function () {

register_window.dialog("close");

}

});

$("#btn-login").button().on("click", function () {

login_window.dialog("open");

});

var register_window = $("#register-dialog").dialog({autoOpen: false,

height: 530,

width: 520,

modal: true,

closeText: '',

close: function () {

register_window.dialog("close");

}

});

$("#btn-register").button().on("click", function () {

register_window.dialog("open");

});

</script>

berikut output dari script di atas ;

Facebook DUMET School

Konsultasi Gratis

Categories