Media Belajar Bahasa Pemrograman | by APPKEY

JavascriptTutorial Javascript 37 : Ajax Form, Cara Membuat Form...

Tutorial Javascript 37 : Ajax Form, Cara Membuat Form dengan AJAX

-

Last Updated on August 30, 2022 by

Halo pembaca setia codekey.id! Setelah sebelumnya kita membahas tentang penggunaan AJAX yang dapat Anda baca pada link berikut https://codekey.id/javascript/ajax-adalah/ Penggunaan AJAX pada Aplikasi Web kali ini kami akan mengulas kembali tentang AJAX, tepatnya cara membuat form AJAX.

Bagi Anda yang baru di sini, dapat membaca berbagai referensi tentang bahasa pemrograman JavaScript dan lainnya juga dapat menemukannya di blog ini!

Kami sarankan untuk membaca artikel sebelumnya terlebih dahulu agar Anda dapat mengetahui dan memahami apa itu AJAX atau Asynchronous JavaScript and XML. Namun secara singkat, AJAX adalah sekumpulan teknis pengembangan pemrograman web yang memungkinkan aplikasi web bekerja secara asynchronous atau tidak langsung.

Form adalah sesuatu yang lumrah dan sangat sering ditemukan di berbagai aplikasi web. Salah satu teknik yang sering digunakan adalah AJAX. Dengan menggunakan AJAX, saat mengisi atau mengirimkan formulir, user/pengguna tidak perlu memuat halaman baru. Sebab dengan pengiriman form AJAX memungkinkan Anda mengirim data di latar belakang.

Tentunya hal ini akan menghindari pengguna dari memuat ulang situs web untuk melihat pembaruan. Sejalan dengan itu, hal ini akan membuat pengalaman pengguna jauh lebih baik.

Dengan membiarkan browser dan server bertukar informasi tanpa mengganggu aktivitas lain, ini akan menghemat waktu dan sumber daya yang seharusnya Anda buang terus-menerus hanya untuk memuat ulang situs web yang digunakan.

Nah, pada pembahasan kali ini kami akan memaparkan beberapa point penting berikut ini:

  1. Form AJAX: Tips Penting
  2. Form dengan Options yang dapat Dipilih
  3. Menginputkan Text pada Form AJAX
  4. Ringkasan Pembahasan

Form AJAX : Kiat Penting

Berikut ini beberapa hal yang harus Anda pahami dalam proses pembuatan form AJAX:

  • AJAX merupakan akronim dari Asynchronous JavaScript and XML.
  • Dengan mengirimkan permintaan asinkron, hal ini dapat memungkinkan aplikasi untuk me-refresh sebagian halaman tanpa harus memuat ulang seluruh halaman.
  • Dengan menggunakan AJAX, formulir dapat dibuat lebih fungsional dan dinamis.
Artikel Terkait  Tutorial Javascript 16 : Form Javascript, Cara Membuat Form Validation Menggunakan Javascript

Form dengan Options yang dapat Dipilih

Sekarang kita mulai tutorialnya! Pertama-tama kami akan membuat formulir input yang sederhana. Kami membuat formulir ini dengan menggunakan HTML. Sebelum itu, form dengan options yang dapat dipilih maksudnya adalah isian form yang memberikan pilihan jawaban untuk siswa.

Contohnya isian form untuk periode bulan, di mana saat mengisi form siswa akan diberikan 12 pilihan bulan yang ada. Perhatikan contoh penerapan form AJAX di bawah ini :

<form> 
      <select name="siswa" onchange="showSiswa(this.value)"> 
        <option value="">Pilih siswa:</option> 
        <option value="Andi">Andi</option> 
        <option value="Budi">Budi</option> 
        <option value="Dean">Dean</option> 
      </select>
</form>
<br>
<span>Hasil dapat dilihat dibawah ini</span>
<div id="info">
</div>

Pada contoh di atas, user diberikan tiga opsi untuk isian pada pernyataan “Pilih siswa.” Di sini pengguna dapat memilih salah satu dari tiga opsi yang mungkin dari dropdown menu. Ketika mereka melakukannya, sebuah onchange peristiwa akan dipicu.

Pada contoh di atas juga terdapat elemen div yang berfungsi sebagai area untuk informasi tambahan. Namun, fungsi itu belum akan berfungsi. Untuk mengaktifkannya, kita harus memanggil fungsi showSiswa().

Di mana cara penerapan elemen div adalah sebagai berikut :

function showSiswa(str) {    
    if (str == ""){        
      document.getElementById("info").innerHTML = "";
      return;
    } else {
      if (window.XMLHttpRequest) { 
        // script untuk IE 7+ dan browser lainnya
        xmlhttp = new XMLHttpRequest();
      } else {            
        // script untuk IE 5 dan 6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }      
      // cek respon server
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("info").innerHTML = xmlhttp.responseText;}
      }; 
      xmlhttp.open("GET","getsiswa.php?q="+str, true);
      xmlhttp.send();
    }
  }

Berikutnya adalah mengaktifkan form AJAX yang telah dibuat sebelumnya. Untuk mengaktifkannya kita dapat membuat file XMLHttpRequest. Dalam hal ini, onchange  yang sebelumnya terpicu akan memanggil fungsi info Setelah itu, informasi tambahan tentang orang yang dapat dipilih kemudian akan muncul di bagian bawah area input.

Menginputkan Text pada Form AJAX

Dalam membuat sebuah form, menginputkan text tentunya adalah suatu kewajiban. Berikut ini cara menginputkan text pada formulir yang dibuat dengan AJAX:

<body>
    <p><strong>Masukan Nama</strong></p>
    <form> 
      First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Hasil: <span id="info"></span></p>
</body>

Formulir yang kita buat akan dapat mengenali nilai yang sama kita miliki pada contoh pertama yang kita buat. Akan tetapi, untuk dapat menampilkan informasi tambahan, Anda harus memanggil atau menggunakan fungsi showHint(). Berikut ini contoh penggunaan fungsi tersebut:

function showHint(str) {
    //cek jika input nama kosong
    if (str.length == 0) {
      document.getElementById("info").innerHTML = "";
      return;
    } else {
      //jika tidak kosong, buat XMLHttpRequest untuk mendapatkan hasil
      var xmlhttp = new XMLHttpRequest();
      // cek respon server
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("info").innerHTML = xmlhttp.responseText;
        }
      };
      xmlhttp.open("GET", "getsiswa.php?q="+str, true); 
      xmlhttp.send();
    }
  }

Untuk memeriksa apakah formulir yang Anda dapat mengidentifikasi suatu bidang itu kosong atau tidak, Anda dapat memeriksanya dengan variabel str.length. Jika formulir kosong, kita dapat tidak menggunakan placeholder info dan keluar dari fungsi tersebut.

Namun apabila field atau bidang pada formulir terisi, kita dapat membuat sebuah object XMLHttpRequest dengan melakukan set up pada function tersebut agar siap untuk digunakan untuk meng-execute ketika respon daru server sedang disiapkan. Ingatlah bahwa fungsi str ialah untuk menahan konten pada field input.

Ringkasan Pembahasan

Setelah mempelajari cara membuat form AJAX di atas, kita dapat menyimpulkan ringkasan sebagai berikut:

  • AJAX berfungsi untuk mengirimkan permintaan asynchronous yang akan membantu browser dan server bertukar informasi. Dengan demikian, Anda dapat melihat pembaruan pada browser tanpa memuat ulang halaman.
  • Pembuatan form dengan AJAX ini membantu Anda menghemat waktu dan membuat pengguna merasakan pengalaman yang baik, karena aplikasi yang cepat dan responsif. Pengguna tidak perlu me-refresh halaman terus-menerus.
  • Dengan mengguankan AJAX untuk membuat form pada web Anda, pengiriman formulir lebih lancar dan menjadikan UI Anda user friendly.

Sekian pembahasan tutorial ke 37 JavaScript tentang cara membuat formulir pada web browser dengan menggunakan AJAX. Terima kasih telah mengikuti sampai akhir, sampai jumpa di tutorial JavaScript 38! Semoga bermanfaat!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya