Call Php Function From Javascript W3schools

MUAZHAN

4 min read

·

Jun 18, 2024

43

Share

Memanggil Fungsi PHP dari Javascript (W3Schools)

Artikel ini membahas cara memanggil fungsi PHP dari JavaScript, menggunakan contoh-contoh praktis yang dijelaskan dengan mudah. Artikel ini disusun berdasarkan sumber daya W3Schools untuk memberikan pemahaman yang jelas dan mudah diikuti.

Konsep Dasar

Dalam pengembangan web, JavaScript biasanya digunakan untuk menangani interaksi pengguna di sisi klien (browser), sementara PHP bekerja di sisi server. Untuk memanggil fungsi PHP dari JavaScript, kita perlu menggunakan teknik AJAX (Asynchronous JavaScript and XML).

Menggunakan AJAX

AJAX memungkinkan JavaScript untuk berkomunikasi dengan server secara asinkron, artinya tanpa perlu me-reload halaman web sepenuhnya. Berikut langkah-langkah untuk memanggil fungsi PHP dari JavaScript:

1. Buat fungsi PHP:

   • Buat file PHP yang berisi fungsi yang ingin Anda panggil.
   • Contoh: my_function.php

2. Buat permintaan AJAX:

   • Gunakan objek XMLHttpRequest atau perpustakaan seperti jQuery untuk membuat permintaan AJAX ke file PHP.
   • Kirimkan data yang diperlukan sebagai parameter.
   • Contoh: script.js

   function callPHPFunction() {
       var name = document.getElementById("nameInput").value;
       var xhr = new XMLHttpRequest();
       xhr.open("POST", "my_function.php", true);
       xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       xhr.onreadystatechange = function () {
           if (xhr.readyState == 4 && xhr.status == 200) {
               document.getElementById("result").innerHTML = xhr.responseText;
           }
       };
       xhr.send("name=" + name);
   }
   

3. Tampilkan hasil:

   • Tangkap respon dari server (hasil eksekusi fungsi PHP) dan tampilkan di halaman web.

Contoh Lengkap

Berikut contoh kode lengkap yang menggabungkan ketiga langkah di atas:

index.html

  



  
  Panggil Fungsi

  


  

my_function.php

script.js

function callPHPFunction() {
    var name = document.getElementById("nameInput").value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "my_function.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
        }
    };
    xhr.send("name=" + name);
}

Contoh ini menunjukkan bagaimana Anda dapat memanggil fungsi sayHello dari file my_function.php menggunakan JavaScript. Fungsi ini akan menerima nama yang dimasukkan pengguna, lalu menampilkan pesan "Hello, [nama]!" di elemen div dengan ID result.

Kesimpulan

Dengan menggunakan AJAX, Anda dapat memanggil fungsi PHP dari JavaScript untuk membuat aplikasi web yang dinamis dan responsif. Artikel ini memberikan dasar pemahaman untuk membangun aplikasi web yang menggabungkan sisi server dan sisi klien.

Catatan:

• Pastikan file my_function.php berada di direktori yang sama dengan file index.html.
• Anda dapat menggunakan berbagai metode permintaan AJAX (GET, POST, PUT, DELETE) tergantung kebutuhan.
• Gunakan library JavaScript seperti jQuery untuk mempermudah penulisan kode AJAX.