Langsung ke konten utama

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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Halaman CheckOut 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...
Posting Komentar
Baca selengkapnya

Mengasah Keterampilan di HackerRank.com - Part 2 (If-Else)

HackerRank adalah platform yang bisa kita gunakan untuk mengasah kemampuan pemrograman kita. Selain pemrograman, kita juga bisa belajar tentang database, keamanan, sistem terdistribusi, dll. Jelas, semua ini ada hubungannya dengan pemrograman.  Di HackerRank, seperti kebanyakan juri online, kami dapat mengatasi banyak tantangan. Dari tingkat mudah hingga ahli. Ada begitu banyak tantangan yang tersedia sehingga kita tidak akan pernah bosan. Kompetisi atau kontes diadakan secara berkala dan beberapa di antaranya menawarkan harga yang menarik. buat kontes "kecil" kami menggunakan fungsi HackerRank.  Faktanya, masih ada langit di atas langit, jadi jangan pernah puas dengan pengetahuan yang telah kita peroleh. Terus tingkatkan dan kembangkan lagi, inilah tampilan pertama  HackerRank.com : Pada gambar diatas terdapat tampilan pertama HackerRank.com, pada halaman ini anda bisa memilih sesuai dengan kebutuhan yang saat ini dibutuhkan untuk bisnis atau developer, bagi anda yang in...
Posting Komentar
Baca selengkapnya

Pengembangan Konsep Algoritma Web Server Dinamis

Pengertian Flowchart Flowchart atau bagan alir adalah diagram yang menunjukkan langkah-langkah dan keputusan untuk menyelesaikan suatu proses dari suatu program. Setiap langkah direpresentasikan sebagai diagram dan dihubungkan oleh garis atau panah.  Flowchart memainkan peran penting dalam menentukan tahap atau fitur dari proyek pemrograman yang melibatkan banyak orang. Selain itu, dengan menggunakan diagram alur proses program akan lebih jelas, lebih ringkas, dan mengurangi risiko salah tafsir. cara menghubungkan kebutuhan teknis dan non-teknis.  Sebelum melanjutkan, saya ingin memberi tahu Anda sesuatu Di sini Anda dapat mempelajari lebih lanjut tentang diagram alur dalam Dicoding. Anda dapat menemukan materi ini dan belajar di Memulai Pemrograman Dasar untuk Menjadi Pengembang Perangkat Lunak. Fungsi Flowchart Fungsi utama dari flowchart adalah untuk memberikan gambaran tentang alur suatu program dari satu proses ke proses lainnya. Dengan cara ini, alur program menjadi muda...
Posting Komentar
Baca selengkapnya