Cara Menampilkan PHP di HTML dan JavaScript

Saat kita membuat situs web menggunakan PHP, kita akan sering menulis kode PHP diantara kode HTML untuk membuat bagian-bagian tertentu di situs web menjadi dinamis.

Oleh karena itu kita perlu mengetahui bagaimana interpreter PHP mengevaluasi kode PHP kita dan bagaimana kode PHP dikirim ke browser.

Dengan mengikuti panduan ini, kita diharapkan dapat menulis kode PHP di file HTML atau sebaliknya, ataupun memanggil variabel PHP ke JavaScript untuk diolah di browser, entah itu variabel dengan tipe data sederhana seperti string atau angka maupun yang kompleks seperti array.

Berikut beberapa topik yang akan kita bahas.

Cara Menyisipkan Kode PHP Diantara HTML (file PHP)
Cara Menyisipkan Kode PHP di File HTML
Cara Memanggil Variabel PHP di JavaScript

Cara Menyisipkan Kode PHP Diantara HTML (file PHP)

Untuk menyisipkan kode PHP diantara kode HTML di dalam file PHP, kita hanya perlu menggunakan tag pembuka (<?php) dan penutup (?>) PHP untuk memberitahu interpreter bahwa kode tersebut adalah kode PHP dan perlu dievaluasi di server.

Mari kita buat file index.php, setelah itu salin kode di bawah ini dan jalankan menggunakan web server.

<!DOCTYPE html>
<html >
<head>
  <title>Belajar PHP</title>
</head>
<body>
  <h1>
    <?php echo "Hello World ", 1 + 1; ?>
  </h1>
</body>
</html>

Setelah web server berjalan silakan lihat di browser, kemudian tekan Ctr + U untuk melihat kode HTML yang dikirim dari server. Kurang lebih akan terlihat seperti berikut.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar PHP</title>
  </head>
  <body>
    <h1>Hello World 2</h1>
  </body>
</html>

Perhatikan teks di baris 7 yang berada tepat diantara tag h1, dari <?php echo "Hello World ", 1 + 1; ?> berubah menjadi Hello World 2.

Mengapa bisa begitu? Karena kita telah memberitahu interpreter bahwa kode tersebut adalah kode PHP dengan menambahkan tag pembuka dan penutup diantara kode PHP, sehingga interpreter mengevaluasi kode tersebut.

Setelah itu browser akan memparsing hasilnya sehingga ditmapilkan dengan benar kepada pengguna situs web kita, karena teks tersebut berada diantara tag h1 maka akan terlihat besar karena itu adalah gaya default yang diberikan browser.

Jika kita tidak menambahkan tag pembuka dan penutup, web server akan mengirim teks apa adanya (tidak dievaluasi interpreter).

Selain itu, yang perlu diperhatikan di sini adalah kode PHP dievaluasi di server, sedangkan HTML di browser.

Itu artinya kita bisa membuat tag HTML menggunakan PHP, selama teks yang dibuat oleh PHP sesuai dengan sintaks HTML maka browser akan mengevaluasinya dengan benar.

Contoh beriktu membuat paragraf HTML mengguankan PHP.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar PHP</title>
  </head>
  <body>
    <?php echo "<p>Hello World</p>"; ?>
  </body>
</html>

Cara Menyisipkan Kode PHP di File HTML

Contoh di atas kita menyisipkan kode HTML dan PHP di dalam file PHP, bagaimana jika kita ingin melakukan hal yang sama tapi di dalam file HTML?

Kita tetap bisa melakukannya tapi tidak direkomendasikan, selama file tersebut berisi kode PHP lebih baik untuk menjadikan file tersebut sebagai file PHP.

Mari kita coba, silakan buat file index.html, kemudian masukkan kode di bawah ini, jalankan menggunakan web server dan lihat menggunakan browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar PHP</title>
  </head>
  <body>
    <?php echo "<p>Hello World</p>"; ?>
  </body>
</html>

Kode PHP yang kita sisipkan tetap dievaluasi oleh interpreter dan ditampilkan dengan benar di browser.

Jika kita menggunakan web server Apache atau Nginx, kita mungkin perlu menyesuaikan pengaturannya agar web server memperlakukan file HTML sebagai file PHP.

Jika kita menggunakan web server built-in PHP, sudah otomatis bisa menjalankan file HTML.

Cara Memanggil Variabel PHP di JavaScript

Dalam kondisi tertentu, kita mungkin perlu melewatkan variabel PHP ke JavaScript. Caranya mirip seperti metode sebelumnya, kita hanya perlu memastikan bahwa PHP mengirim kode JavaScript yang valid.

Mari kita buat file index.php lalu salin kode di bawah.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar PHP</title>
  </head>
  <body>
    <script type="text/javascript">
      <?php
        $nama = "Budi";
        echo "const nama ='" . $nama . "';";
      ?>

      console.log(nama);
    </script>
  </body>
</html>

Perhatikan baris 11, kita mengguankan kode PHP untuk membuat kode variabel JavaScript bernama nama yang berisi nilai dari variabel PHP bernama sama ($nama).

Setelah kode JavaScript dibuat di server, kode tersebut dikirim ke browser, kemudian browser mengevaluasi kode JavaScript tersebut. Kode diatas seharusnya menampilkan teks "Budi" di console browser.

Bagaimana jika variabel PHP memiliki tipe data kompleks seperti array? Ini juga bisa kita lakukan tetap kita harus memparsing variabel tersebut ke JSON string, untuk melakukan hal tersebut kita bisa menggunakan fungsi json_encode PHP.

Mari kita coba.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar PHP</title>
  </head>
  <body>
    <script type="text/javascript">
      <?php
        $binatang = [
          "kucing",
          "anjing",
          "ayam"
        ];

        $binatangJsonStr = json_encode($binatang);
        echo "const binatangJsonStr ='" . $binatangJsonStr . "';";
      ?>

      const binatangArr = JSON.parse(binatangJsonStr);
      console.log(binatangArr);
    </script>
  </body>
</html>

Di server, kita membuat variabel PHP $binatang yang berisi array, pada baris 15 kita mengubahnya menjadi JSON string, di baris berikutnya kita membuat variabel JavaScript bernama binatangJsonStr yang berisi JSON string yang telah kita buat.

Server akan menghasilkan kode JavaScript yang terlihat seperti berikut.

const binatangJsonStr = '["kucing","anjing","ayam"]';
const binatangArr = JSON.parse(binatangJsonStr);
console.log(binatangArr);

Di browser, kita perlu mengubah string JSON yang ada di variabel binatangJsonStr menjadi array yang valid di JavaScript menggunakan fungsi JSON.parse, selanjutnya kita tampung ke dalam variabel JavaScript binatangArr.

Variabel binatangArr ini sekarang berisi array yang valid di JavaScript, barulah kita bisa mengolah array tersebut menggunakan kode JavaScript sesuai keinginan kita, sebagai contoh di atas kita mencetak variabel tersebut ke console browser.