Membuat Form Login dengan Metode Monolitik, Ajax, dan JQuery

Monolitik

Monolitik adalah sebuah pendekatan tradisional pada pembangunan sebuah aplikasi. Aplikasi monolitik terbentuk menjadi satu kesatuan kode yg nir bisa dipisahkan satu & lainnya. Salah satu karakter sistem arsitektur monolitik merupakan ketika pemrogram ingin melakukan perubahan dalam sistem monolitik, pemrogram wajib mengganti satu kesatuan kode secara menyeluruh & bersamaan. yuk kita bedah kodenya.

Pertama buat file html biasa menggunakan nama login1.html, pada body kita membuat form dan button untuk mengirimkan data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <h1>Web Monolitik</h1>
    <form action="proses_login.html" method="POST">
        <p><input type="text" name="username"> Username</p>
        <p><input type="password" name="paswd"> Password</p>
        <p><input type="submit" value="Login"></p>
    </form>
</body>
</html>

Selanjutnya buat file dengan nama proses_login.html, halaman tersebut untuk menampilkan data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script>
        //Membuat fungsi Hello()
        function Tambah(){
             var angka1 = document.getElementById("angka1").value;
             var angka2 = document.getElementById("angka2").value;
             
             document.getElementById("jumlah").value = parseInt(angka1) + parseInt(angka2);
        }
    
    </script>
</head>
<body>
    <p><input type="text" id="angka1" /> Angka 1 </p>
    <p><input type="text" id="angka2" /> Angka 2 </p>
    <p><button onclick="Tambah()">Tambah</button></p>
    <p><input type="text" id="jumlah" /> Jumlah </p>
    <h1>Cek Login</h1>
    {%
    import json
    
    username = _POST['username']
    paswd = _POST['paswd']
    ketemu = False
    data = json.loads(open('htdocs/tbl_user.json').read())
    for d in data:
        if(d['username'] == username) and (d['passwd'] == paswd):
            ketemu = True
            break
        else:
            ketemu = False

    if (ketemu == True):
        emit('Login Sukses')
    else:
        emit('<p>Login Gagal!!</p>')
        emit('<p>Kembali ke <a href="http://localhost:8080/login1.html">Login</a></p>')
    %}
</body>
</html>

Output

Ajax

AJAX merupakan singkatan dari Asynchronous Javascript And XML.

AJAX berfungsi buat:

Merogoh data berdasarkan server secara background
Menyegarkan tampilan web tanpa memuat ulang browser
Mengirim data ke server secara background

Pada dasarnya, AJAX hanya memakai objek XMLHttpRequest buat berkomunikasi menggunakan server.

Dalam Ajax pertama buat file dengan nama login2.html, pada body kita buat form & button untuk mengirimkan data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script lang="javascript">
        function createRequestObject() {
            var ro;
            var browser = navigator.appName;
            if(browser == "Microsoft Internet Explorer"){
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                ro = new XMLHttpRequest();
            }
            return ro;
        }

        var http = createRequestObject();

        function sndReq(route, method) {
            http.open(method, 'http://localhost:8080/backend.rpc?route='+route);
            http.onreadystatechange = handleResponse;
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            if(method=='GET') {
                http.send(null);
            }
            else if(method=='POST') {
                var data = "username="+document.getElementById("username").value+"&paswd="+
                document.getElementById("paswd").value;
                http.send(data);
            }
        }

        function handleResponse() {
            if(http.readyState == 4){
                var response = http.responseText;
                if(response.length != 0) {
                    document.getElementById('elemen').innerHTML = response;
                }
            }
        }
    </script>
</head>
<body onload="javascript:sndReq('form_login', 'GET')">
    <!-- Referensi -->
    <!-- http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html -->
    <h1>Web Interaktif dgn AJAX</h1>
    <div id="elemen">
    </div>
</body>
</html>

Selanjutnya buat file dengan nama backed.rpc, halaman tersebut proses untuk menampilkan data ke halaman login2.html.

def form_login():

form = '<form>'\

'<p><input type="text" name="username" id="username"> Username</p>'\

'<p><input type="password" name="paswd" id="paswd"> Password</p>'\

'<p><input type="button" value="Login" onclick="javascript:sndReq(\'cek_login\', \'POST\')"></p>'\

'</form>'

emit(form)

def form_login_jquery():

form = '<form>'\

'<p><input type="text" name="username" id="username"> Username</p>'\

'<p><input type="password" name="paswd" id="paswd"> Password</p>'\

'<p><input type="button" value="Login" id="btn"></p>'\

'</form>'

emit(form)

def cek_login():

username = _POST['username']

paswd = _POST['paswd']

if(username=='ekoheri' and paswd=='asdqwe'):

emit('<h1>Login Sukses</h1>')

else:

emit('<h1>Login Gagal!!</h1>')

route = _QUERY_STRING['route']

if(route == 'cek_login'):

cek_login()

elif(route == 'form_login'):

form_login()

elif(route == 'form_login_jquery'):

form_login_jquery()

Output

JQuery

JQuery merupakan galat satu library javascript yg populer, library ini pada untuk sang John Resig dalam tahun 2006 yg ditujukan buat memudahkan para developer pada memakai & menerapkan javascript pada website. Pada dasarnya jquery mengkompres aneka macam baris kode ke pada sebuah fungsi sebagai akibatnya kita nir perlu menulis kemballi seluruh baris kode hanya buat menuntaskan satu pekerjaan.

Pertama buat file html biasa dengan nama login3.html, di dalam body kita membuat form dan button untuk mengirimkan data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Web Interaktif dgn JQUERY</h1>
    <div id="elemen"></div>
    <div id="status">
    </div>
    <script lang="javascript">
        $(document).ready(function(){
            $.get("http://localhost:8080/backend.rpc?route=form_login_jquery")
            .done(function(data){
                $("#elemen").html(data);
                btn = document.getElementById("btn");
                btn.addEventListener('click', btnClick)
            });
        });

        function btnClick(){
            var u = $("#username").val();
            var p = $("#paswd").val();
            $.post(
                "http://localhost:8080/backend.rpc?route=cek_login", 
                { username: u, paswd: p }
            ).done(function( data ) {
                $("#status").html(data);
            });
        };
    </script>
</body>
</html>

Selanjutnya buat file dengan nama backed.rpc, halaman tersebut proses untuk menampilkan data ke halaman login3.html.

def form_login():

form = '<form>'\

'<p><input type="text" name="username" id="username"> Username</p>'\

'<p><input type="password" name="paswd" id="paswd"> Password</p>'\

'<p><input type="button" value="Login" onclick="javascript:sndReq(\'cek_login\', \'POST\')"></p>'\

'</form>'

emit(form)

def form_login_jquery():

form = '<form>'\

'<p><input type="text" name="username" id="username"> Username</p>'\

'<p><input type="password" name="paswd" id="paswd"> Password</p>'\

'<p><input type="button" value="Login" id="btn"></p>'\

'</form>'

emit(form)

def cek_login():

username = _POST['username']

paswd = _POST['paswd']

if(username=='ekoheri' and paswd=='asdqwe'):

emit('<h1>Login Sukses</h1>')

else:

emit('<h1>Login Gagal!!</h1>')

route = _QUERY_STRING['route']

if(route == 'cek_login'):

cek_login()

elif(route == 'form_login'):

form_login()

elif(route == 'form_login_jquery'):

form_login_jquery()

Output

Dari perbedaan metode pada atas,

- menggunakan metode monolitik tampilan form login dalam ketika klik button, tampilan data akan pindah ke laman selanjutnya yg sudah proses.

- menggunakan metode Ajax tampilan form login dalam ketika klik button, tampilan data permanen pada laman awal form login, hanya saja element nya yg berubah.

- menggunakan metode JQuery tampilan form login dalam ketika klik button, tampilan data permanen pada laman awal form login & output data jadi satu.

Menurut saya berdasarkan tiga metode diatas yg paling simple adalah memakai metode JQuery, lantaran form login & tampilan data berada pada satu laman saja.

Membuat Halaman Profil Konsumen Dengan NextJS & Bulma

Apa itu Next.js? Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif. Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh. Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama. Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank. Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu halaman HTML dan file JavaScript pada...

Baca selengkapnya

Ryan Hadi Prasetya

Cari Blog Ini