Kako u pregledniku iskušavati PHP kod?

Ovaj primjer pokazuje kako koristiti online biblioteku php-wasm da pokreneš PHP kod u svom web pregledniku bez potrebe za web serverom. Kroz jednostavan PHP kod, korisnik može vidjeti poruku koja se ispisuje direktno u pregledniku, a sve to zahvaljujući WebAssembly tehnologiji koja omogućuje izvršavanje PHP-a u browseru.

Kloniraj lekciju

Pojašnjenje Koda:

1. Učitavanje Online Biblioteke (php-wasm):

<script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/php-wasm/php-tags.mjs"></script>

• <script> tag: Ovaj tag učitava JavaScript datoteku koja omogućava izvršavanje PHP koda u pregledniku. php-wasm je biblioteka koja koristi WebAssembly (WASM) tehnologiju, omogućujući PHP da se izvršava izravno u web pregledniku bez potrebe za serverom.
• async: Ova opcija označava da se skripta učitava asinkrono, tj. ne blokira ostale resurse stranice dok se učitava.
• src="https://cdn.jsdelivr.net/npm/php-wasm/php-tags.mjs": Ovo je URL koji vodi do online biblioteke php-wasm koja se učitava sa CDNi-a (Content Delivery Network). To omogućava pokretanje PHP koda bez potrebe za lokalnim serverom ili PHP okruženjem.

2. HTML Struktura:

<div id="output"></div>

• <div id="output"></div>: Ovdje će biti prikazan rezultat PHP koda koji se izvršava u pregledniku. Ovaj element služi kao “ciljni” prostor za prikazivanje izlaza iz PHP koda. Izlaz će biti prikazan unutar ovog <div> tag-a.

3. PHP Kod unutar <script> taga:

<script type="text/php" data-stdout="#output" data-stderr="#error">
<?php
  echo "Zdravo, svete! Ovo je PHP kod koji se izvršava u vašem browseru!";
?>
</script>

• <script type="text/php">: Ovaj specifičan tip <script> taga označava da unutar njega ide PHP kod, koji php-wasm treba obraditi i izvršiti. Uobičajeni <script> tagovi koriste JavaScript, ali ovdje ćemo koristiti php-wasm kako bi PHP kod bio interpretiran i izvršen u pregledniku.
• data-stdout="#output": Ovaj atribut označava da će sav izlaz koji PHP generira biti poslan u element s id="output". Dakle, sve što PHP kod ispiše pomoću echo funkcije bit će prikazano unutar ovog <div> elementa.
• data-stderr="#error": Ako dođe do greške tijekom izvršavanja PHP koda, greške će biti poslane u element s id="error", gdje će se ispisati crvenim slovima.

4. PHP Kod:

<?php
  echo "Zdravo, svete! Ovo je PHP kod koji se izvršava u vašem browseru!";
?>

• <?php ... ?>: Ovo je PHP oznaka koja označava početak i kraj PHP koda. Unutar tih oznaka nalazi se kod koji se izvršava.
• echo: PHP funkcija koja ispisuje tekst na ekran. U ovom slučaju, koristi se za ispisivanje poruke: "Zdravo, svete! Ovo je PHP kod koji se izvršava u vašem browseru!". Rezultat ove funkcije bit će poslan u HTML element koji smo prethodno definirali kao #output.

5. Zatvoreni HTML Element za Greške:

<div id="error" style="color: red;"></div>

• <div id="error"></div>: Ovaj <div> element služi za prikazivanje grešaka, ako se tijekom izvršavanja PHP koda dogodi neka pogreška. Ako PHP kod nije ispravno izvršen, poruke o greškama bit će ispisane unutar ovog elementa, koristeći crvenu boju (definirano u stilu style="color: red;").

Kako Radi Kôd?

Prikazivanje Rezultata: Rezultat PHP koda će biti prikazan u <div id="output"></div>, dok će se eventualne greške prikazivati u <div id="error"></div>.

Učitavanje Skripte: Kada se stranica učita, php-wasm biblioteka se automatski učita i omogućava PHP kodu da se izvrši u pregledniku.

PHP Izvršenje: PHP kod unutar <script type="text/php"> blokova će biti izvršen pomoću php-wasm, a njegov izlaz (rezultat PHP echo funkcije) bit će poslan u HTML element s id="output".