Cara Memanggil Fungsi PHP Dari JavaScript Dan Sebaliknya

Dayat Miftahul Jannah
12:36:12 PM
 

 
PHP hadir dengan lebih banyak fungsi bawaan untuk bekerja dengan string, array, dan jenis data lainnya dibandingkan dengan JavaScript. Oleh karena itu, wajar jika banyak orang merasa ingin untuk mencoba memanggil fungsi PHP dari JavaScript. Namun, seperti yang mungkin sudah kalian duga atau temukan, ini tidak berfungsi dengan baik seperti yang diharapkan.

Mungkin ada banyak kasus lain di mana kalian mungkin ingin menjalankan beberapa kode PHP di dalam JavaScript misalnya, untuk menyimpan beberapa data di server kalian. Dengan cukup menempatkan kode PHP di dalam JavaScript juga tidak akan berfungsi dalam kasus ini.

Alasan kalian tidak bisa begitu saja memanggil fungsi PHP dari JavaScript berkaitan dengan urutan di mana bahasa-bahasa ini dijalankan. PHP adalah bahasa sisi server, dan JavaScript pada dasarnya adalah bahasa sisi client.

Setiap kali kalian ingin mengunjungi suatu halaman, browser mengirimkan permintaan ke server, yang kemudian memproses permintaan dan menghasilkan beberapa output dengan menjalankan kode PHP. Output atau halaman web yang dihasilkan kemudian dikirim kembali kepada kalian. Browser biasanya mengharapkan halaman web terdiri dari HTML, CSS, dan JavaScript. PHP apa pun yang mungkin telah kalian tempatkan atau hanya sekedar echo di dalam JavaScript akan sudah berjalan atau tidak akan berjalan sama sekali saat halaman web dimuat di browser.

Baca Juga : Node.JS vs PHP

Namun, semua harapan tidak hilang begitu saja. Dalam tutorial kali ini, saya akan menjelaskan bagaimana kalian bisa memanggil fungsi PHP dari JavaScript dan fungsi JavaScript dari PHP.

Memanggil Fungsi PHP Dari JavaScript

Kita dapat menggunakan AJAX untuk memanggil fungsi PHP pada data yang dihasilkan di dalam browser. AJAX digunakan oleh banyak situs web untuk memperbarui bagian halaman web tanpa memuat ulang halaman secara penuh. Ini dapat secara signifikan meningkatkan pengalaman pengguna jika dilakukan dengan benar.

Perlu diingat bahwa kode PHP akan tetap berjalan di server itu sendiri. Kita hanya akan menyediakannya dengan data dari dalam skrip kita.

Menggunakan jQuery AJAX untuk Menjalankan Kode PHP

Jika kalian menggunakan jQuery di situs web kalian, menjadi sangat mudah untuk memanggil file PHP apa pun dengan kode yang ingin kalian jalankan.

Kalian bisa meneruskan satu atau dua parameter ke fungsi ajax(). Ketika dua parameter dilewatkan, yang pertama adalah URL halaman web tempat browser akan mengirim request kalian. Bila kalian hanya meneruskan satu parameter ke ajax(), URL akan ditentukan dalam konfigurasi.

Baca juga : Bagaimana Mendapatkan Query String Dalam JavaScript

Parameter kedua berisi banyak opsi konfigurasi yang berbeda untuk menentukan data yang ingin kalian proses dan apa yang harus dilakukan jika berhasil atau gagal, dll. Opsi konfigurasi diteruskan dalam format JSON.

Kalian bisa menggunakan method parameter untuk menentukan metode HTTP yang harus digunakan untuk membuat request. Kita akan mengaturnya kedalam bentuk POST karena kita akan mengirim data ke server juga.

Sekarang, mari kita lihat contoh request AJAX dasar di mana kita akan meneruskan data ke file PHP dan memanggil fungsi PHP di wordwrap() dalam file itu. Berikut adalah halaman web lengkap kita:
 
1:  <!doctype html>  
2:  <html lang=en>  
3:  <head>  
4:  <meta charset=utf-8>  
5:  <title>Demo Fungsi PHP dalam JavaScript</title>  
6:  <style>  
7:  body {  
8:    font-family: 'Lato';  
9:    font-weight: 400;  
10:    font-size: 1.4rem;  
11:  }  
12:  p {  
13:    text-align: center;  
14:    margin-bottom: 4rem;  
15:  }  
16:  </style>  
17:  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
18:  </head>  
19:  <body>  
20:  <p class="unbroken">Indonesia, disebut juga dengan Negara Kesatuan Republik Indonesia (NKRI, pengucapan bahasa Indonesia: [nəˈɡara kÉ™saˈt̪ua̯n reˈpublɪk in.ˈdo.nÉ›.sja]); atau hanya Republik Indonesia (RI) adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara daratan benua Asia dan Australia, serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 17.504 pulau. Nama alternatif yang biasa dipakai adalah Nusantara.Dengan populasi mencapai 270.203.917 jiwa pada tahun 2020, Indonesia adalah negara berpenduduk terbesar keempat di dunia dan negara yang berpenduduk Muslim terbesar di dunia, dengan penganut lebih dari 230 juta jiwa.</p>  
21:  <p class="broken"></p>  
22:  <script>  
23:  $.ajax({  
24:   method: "POST",  
25:   url: "wrap.php",  
26:   data: { text: $("p.unbroken").text() }  
27:  })  
28:   .done(function( response ) {  
29:    $("p.broken").html(response);  
30:   });  
31:  </script>  
32:  </body>  
33:  </html>
 
Tempatkan kode berikut dalam file bernama wrap.php di direktori yang sama. 

1:  <?php  
2:  $text = $_POST['text'];  
3:  $output = wordwrap($text, 60, "<br>");  
4:  echo $output;  
5:  ?>
 
Ingat bahwa kalian memiliki echo data yang ingin kalian kirim kembali ke browser. Halaman web kalian akan terlihat seperti gambar di bawah ini jika semuanya berjalan dengan baik.



 
 
Menggunakan Fetch API untuk Menjalankan Kode PHP

Kalian juga bisa menggunakan Fetch API untuk menjalankan kode PHP pada data yang dikumpulkan di dalam browser dengan mengirimkan permintaan POST ke server. Pada contoh sebelumnya, kita bisa mengganti kode AJAX dengan JavaScript berikut untuk mendapatkan hasil yang sama. 

1:  fetch('wrap.php', {  
2:    method: 'POST',  
3:    headers: {  
4:     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'  
5:    },  
6:    body: "text=" + document.querySelector("p.unbroken").innerText  
7:   })  
8:   .then(response => response.text())  
9:   .then(data => document.querySelector("p.broken").innerHTML = data);
 
Sama seperti dalam contoh AJAX, kita menentukan URL dan memberikan informasi header tambahan bahwa kita akan mengirimkan data kita dalam bentuk yang dikodekan URL. Ini memungkinkan kita untuk menggunakan $_POST di sisi server untuk membaca data.

Memanggil Fungsi JavaScript Dari PHP

Seperti yang kalian ketahui sekarang, PHP akan berjalan sebelum JavaScript ketika kalian meminta halaman web dari beberapa server. Kita juga bisa menampilkan apa pun yang ingin kita tampilkan di halaman web menggunakan echo. Sama echo juga bisa digunakan untuk menampilkan JavaScript yang akan berjalan di browser client.

Berikut adalah beberapa contoh kode yang akan memeriksa array string untuk menemukan indeks palindrom terakhir. Indeks ini disimpan dalam variabel PHP, yang kemudian diteruskan ke JavaScript yang ditulis di dalam script tag menggunakan echo.
 
1:  <?php  
2:  $words = ['ape;', 'radar', 'mangga', 'civic', 'pisang'];  
3:  $pal_index = 0;  
4:  $last_pal = 0;  
5:  foreach($words as $word) {  
6:   if($word == strrev($word)) {  
7:    $last_pal = $pal_index;  
8:   }  
9:   echo '<p>'.ucfirst($word).'</p>';  
10:   $pal_index += 1;  
11:  }  
12:  ?>  
13:  <script>  
14:  <?php  
15:  echo 'let p_el = document.querySelectorAll("p")['.$last_pal.']';  
16:  ?>  
17:  let red = Math.round(p_el.getBoundingClientRect().top)%256;  
18:  let green = Math.round(p_el.getBoundingClientRect().right)%256;  
19:  p_el.style.color = "rgb(" + red + ", " + green + ", 0)";  
20:  </script>
 
Contoh di atas menunjukkan bagaimana kalian bisa meneruskan data dari PHP ke JavaScript hanya dengan meng echo nya. Pastikan saja kode yang kalian echo kan adalah JavaScript yang valid.

Kesimpulan

Kita semua tahu bahwa PHP berjalan di server dan JavaScript biasanya berjalan di browser. Karena keduanya dijalankan pada waktu yang berbeda, kalian tidak bisa begitu saja memanggil fungsi dari satu bahasa di dalam bahasa lain dan mengharapkan kode berfungsi. Namun, ada beberapa cara untuk mengatasi masalah itu, memungkinkan pertukaran informasi antara PHP dan JavaScript.

Singkatnya, kalian bisa menggunakan AJAX ketika kalian ingin memanggil fungsi PHP dari JavaScript atau menjalankan kode PHP pada beberapa data yang dihasilkan di dalam browser. Kalian bisa menggunakan echo di PHP untuk menampilkan kode JavaScript yang nantinya akan dijalankan di browser client. Jika kalian memiliki pertanyaan tentang artikel diatas, beri tahu saya di komentar.

See you Next Time :).