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
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
- Setelah itu simpan dalam folder C:\xampp\htdocs\belajar_php
- Ketik di url browser : http://localhost/belajar_php/gabungan.php
- Lalu tekan enter url di browsernya, maka akan tampil seperti gambar dibawah ini :
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
