PHP vs JavaScript: Server, Browser, dan Node.js

PHP berjalan di server: PHP menyusun halaman, mengirim HTML yang sudah jadi, lalu berhenti. JavaScript berjalan di browser pengunjung, tempat ia merespons klik dan mengubah halaman setelah dimuat; dengan Node.js, JavaScript juga bisa berjalan di server. Jadi keduanya lebih tepat disebut rekan daripada saingan: situs pada umumnya memakai PHP (atau Node.js) di server dan JavaScript di browser.

Kode PHP ini berjalan di server. Browser hanya menerima apa yang dicetaknya, dan tab Halaman menampilkan hasilnya:

<?php
$products = [
    ["name" => "Keyboard", "price" => 49],
    ["name" => "Mouse", "price" => 19],
    ["name" => "Monitor", "price" => 189],
];
$total = array_sum(array_column($products, "price"));
?>
<h2>Cart</h2>
<ul>
<?php foreach ($products as $p): ?>
    <li><?= $p["name"] ?>: $<?= $p["price"] ?></li>
<?php endforeach; ?>
</ul>
<p>Total: $<?= $total ?></p>

Lihat tab Output: tidak ada PHP yang tersisa di sana, hanya HTML. List yang sama yang dibuat oleh JavaScript di browser terlihat seperti ini:

const products = [
  { name: "Keyboard", price: 49 },
  { name: "Mouse", price: 19 },
  { name: "Monitor", price: 189 },
];

const ul = document.querySelector("#cart"); // an empty <ul id="cart"> in the HTML
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = `${p.name}: $${p.price}`;
  ul.append(li);
}

Versi PHP mengirim halaman yang lengkap, yang langsung bisa dibaca mesin pencari dan ponsel yang lambat. Versi JavaScript bisa memperbarui list itu belakangan tanpa memuat ulang halaman, misalnya saat pengunjung menghapus sebuah item.

Tempat setiap bahasa berjalan

Baris terakhir penting untuk keamanan: apa pun yang ada di JavaScript browser terlihat oleh pengunjung, jadi password, API key, dan pemeriksaan harga harus berada di server.

Perbandingan sintaks

Kedua bahasa terlihat mirip karena sama-sama meminjam dari C: kurung kurawal, if, for, while, function, return. Perbedaannya ada di detail:

Berikut sebuah fungsi dengan callback di PHP:

<?php
$prices = [12.5, 8, 30, 4.25];

$withTax = array_map(fn($p) => round($p * 1.2, 2), $prices);
$cheap = array_filter($withTax, fn($p) => $p < 15);

echo implode(", ", $withTax), "\n";
echo "Under 15: " . implode(", ", $cheap) . "\n";
echo "Count: " . count($cheap) . "\n";

Dan di JavaScript, tempat map dan filter adalah method pada array:

const prices = [12.5, 8, 30, 4.25];

const withTax = prices.map((p) => Math.round(p * 1.2 * 100) / 100);
const cheap = withTax.filter((p) => p < 15);

console.log(withTax.join(", "));
console.log("Under 15: " + cheap.join(", "));

Operator +: jebakan klasik

Di JavaScript, + menjumlahkan angka sekaligus menggabungkan string, jadi string di mana pun mengubah penjumlahan menjadi penggabungan. PHP memisahkan keduanya: + selalu menjumlahkan dan . selalu menggabungkan.

<?php
var_dump("10" + 5);     // int(15): + always adds
var_dump("10" . 5);     // string "105": . always joins
var_dump(10 . "");      // number to string
var_dump("3" * "4");    // numeric strings multiply
var_dump(0.1 + 0.2 === 0.3); // floats are inexact in both languages

console.log("10" + 5);  // "105"
console.log("10" - 5);  // 5
console.log("3" * "4"); // 12
console.log(0.1 + 0.2 === 0.3); // false

Kedua bahasa juga punya == yang loose dan === yang strict. Sarannya sama di keduanya: pakai === kecuali kamu memang ingin membandingkan lintas tipe.

Mengirim data dari PHP ke JavaScript

PHP berjalan lebih dulu, jadi PHP bisa menulis data langsung ke halaman untuk dipakai JavaScript di browser. json_encode mengubah array PHP menjadi JavaScript yang valid:

<?php
$user = ["name" => "Ada", "role" => "admin", "unread" => 3];
?>
<p id="greeting">Loading...</p>
<script>
const user = <?= json_encode($user, JSON_HEX_TAG | JSON_HEX_AMP) ?>;
document.getElementById("greeting").textContent =
    "Hi " + user.name + ", you have " + user.unread + " new messages";
</script>

Tab Output menampilkan script yang dihasilkan dengan data yang sudah terisi. Flag JSON_HEX_TAG melakukan escape pada < dan >, jadi nilai yang berisi </script> tidak bisa mengakhiri script lebih awal. Penjelasan lebih lanjut tentang opsinya ada di json_encode.

Arah sebaliknya bekerja lewat HTTP: JavaScript di browser memanggil fetch("/api/cart.php"), script PHP berjalan, lalu menjawab dengan JSON:

<?php
// api/cart.php
header('Content-Type: application/json');
echo json_encode(['items' => 3, 'total' => 257]);

const res = await fetch("/api/cart.php");
const cart = await res.json();
console.log(cart.total); // 257

PHP vs Node.js di server

Saat JavaScript berjalan di server lewat Node.js, perbandingannya menjadi pilihan yang sungguhan.

Model PHP lebih pemaaf: bug atau kebocoran memori hanya memengaruhi satu request, dan setiap request dimulai dari keadaan bersih. Model Node bisa menyimpan state dan membiarkan koneksi tetap terbuka, yang cocok untuk chat dan dashboard live, tetapi crash atau loop yang memblokir memengaruhi setiap pengguna proses itu.

Mana yang sebaiknya dipelajari

Kamu akan butuh JavaScript untuk halaman web interaktif apa pun, karena hanya bahasa itulah yang dijalankan browser. Pertanyaannya adalah apa yang berjalan di server:

• Pelajari PHP selanjutnya jika kamu ingin bekerja dengan WordPress, Laravel, atau banyak situs PHP yang sudah ada, atau jika kamu ingin cara paling sederhana untuk menaruh situs dinamis di hosting yang murah. Mulailah dengan apa itu PHP.
• Tetap dengan JavaScript (Node.js) jika kamu ingin satu bahasa untuk seluruh stack atau sedang membuat fitur real-time.

Jalur yang umum adalah HTML dan CSS, lalu JavaScript di browser, lalu satu bahasa server. Bahasa server mana pun yang kamu pilih, form, session, database, dan API JSON bekerja dengan ide HTTP yang sama, jadi pengetahuanmu tetap terpakai.