Belajar PHP #8 – menggabungkan PHP dengan HTMl,CSS dan Javascript

Pada artikel ini kita akan belajar cara menggabungkan kode PHP dengan bahasa pemrograman lainnya seperti HTMl,CSS dan Javascript. Untuk langkah-langkah dalam membuat dan menjalankan file PHP masih sama pada postingan saya sebelumnya.

Silahkan dibaca dahulu : cara menjalankan file PHP di web browser

Lanjut ke pembahasan, file yang diperuntukan menyimpan kode PHP adalah dengan menyimpannya dalam ekstensi .php.

Langsung saja cara mengkombinasikan Kode PHP adalah sebagai berikut :

Memasukan php ke html

Anda bisa menyisipkan kode PHP di dalam HTML menggunakan teks editor anda. Caranya adalah sebagai berikut:

  • Buka teks editor anda lalu salin contoh kode php dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Praktek Otodidak</title>
</head>
<body>
<h1> Memasukan php ke html </h1>
<?php
echo "Belajar di praktekotodidak.com";
?>
</body>
</html>
  • Selanjutnya Save As dan beri nama html.php
  • Setelah itu simpan dalam folder C:\xampp\htdocs\belajar_php
  • ketik url http://localhost disertai nama folder dan nama filenya Contoh : http://localhost/belajar_php/html.php
  • Lalu tekan enter url di browsernya, maka akan tampil seperti gambar dibawah ini :

Penjelasan :

Seperti terlihat kode PHP disisipkan di dalam body HTML. Dengan perintah echo, browser memunculkan hasil teks yang diinstruksikan. 

Cara menggabungkan CSS dengan PHP

Berikut ini adalah contoh penggunaan gabungan dengan PHP dan CSS

  • Buka teks editor anda lalu salin contoh kode php dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
 <style>
    h1{  
    color:white;  
    background-color:red;  
    padding:5px;  
    }  
    p{  
    color:blue;  
    }       
 </style>
    <title>Praktek Otodidak</title>
</head>
 <body>
   <h1> Memasukan php ke CSS </h1>
  <?php
    echo "<p>Belajar di praktekotodidak.com</p>";
  ?>
</body>
</html>
  • Selanjutnya Save As dan beri nama css.php
  • Setelah itu simpan dalam folder C:\xampp\htdocs\belajar_php
  • Ketik di url browser : http://localhost/belajar_php/css.php
  • Lalu tekan enter url di browsernya, maka akan tampil seperti gambar dibawah ini

Penjelasan :

Ketika digunakan bersama dengan CSS, output yang diberikan tentu memiliki atribut CSS seperti warna dan ukuran font yang berbeda sesuai kode program yang kita atur.

Cara menggabungkan CSS dengan JavaScript

Berikut ini adalah contoh gabungan PHP dengan JavaScript

  • Buka teks editor anda lalu salin contoh kode php dibawah ini :
<!DOCTYPE html>
<html>
<body>
    <h1>Dasar PHP</h1>
    <h2>Cara menggabungkan PHP dengan Javascript</h2>
    <b>Belajar di praktekotodidak.com </b>
    <br>
    <p id="demo">Contoh Program</p>
    <button type="button" onclick="myFunction()">Klik Disini</button>
    <script tipe="text/Javascript">
    function myFunction() {
    <?php
    $str= "Berikut ini adalah contoh gabungan PHP dengan JavaScript";
    echo "document.getElementById('demo').innerHTML = '$str';";
    ?>
    }
    </script>
</body>
</html>

Save As dan beri nama javascript.php

Setelah itu simpan dalam folder C:\xampp\htdocs\belajar_php

  • Ketik di url browser : http://localhost/belajar_php/javascript.php
  • Lalu tekan enter url di browsernya, maka akan tampil seperti gambar dibawah ini
menggabungkan PHP dengan HTMl CSS dan Javascript

menggabungkan PHP dengan HTMl CSS dan Javascript

Berikut ini adalah contoh gabungan PHP dengan HTML, CSS dan JavaScript sekaligus : 

  • Buka teks editor anda lalu salin contoh kode php dibawah ini :
<!DOCTYPE html>
<html>
<body>
 <head>
    <style>
        h1{  
        color:white;  
        background-color:red;  
        padding:5px;  
        }
        h2{  
        color:red;  
        background-color:yellow;  
        padding:3px;  
        }  
        p{  
        color:blue;  
        }       
    </style>
 </head>
    <h1>Dasar PHP</h1>
    <h2>Cara menggabungkan PHP dengan Javascript</h2>
    <b>Belajar di praktekotodidak.com </b>
    <br>
    <p id="demo">Contoh Program</p>
    <button type="button" onclick="myFunction()">Klik Disini</button>
    <script tipe="text/Javascript">
    function myFunction() {
    <?php
    $str= "Berikut ini adalah contoh gabungan PHP dengan JavaScript";
    echo "document.getElementById('demo').innerHTML = '$str';";
    ?>
    }
    </script>
</body>
</html>

  • Save As dan beri nama gabungan.php
menggabungkan PHP dengan HTMl CSS dan Javascript

Pada penggunaannya, PHP bisa digabungkan dengan bahasa pemrograman lain, seperti HTML, CSS, dan Javascript seperti contoh di atas. Bahkan, bahasa permrograman ini juga mampu bekerja dengan baik bersama MySQL. Maka dari itu silahkan baca artikel selanjutnya yaitu : Belajar PHP #9 – Hubungan php dan mysql

Tinggalkan Balasan

Ads Blocker Image Powered by Code Help Pro

Pemblokir Iklan Terdeteksi!!!

Kami mendeteksi bahwa Anda menggunakan ekstensi untuk memblokir iklan. Silahkan menonaktifkan pemblokir iklan ini. Lalu refresh halaman ini untuk membuka konten ini !!!

Scroll to Top