Cara Menggunakan Script dan Tag PHP di HTML

Dayat Miftahul Jannah
9:58:51 AM



Pada artikel ini, saya akan menunjukkan cara menggunakan kode PHP di page HTML kalian. Ini ditujukan untuk pemula PHP yang mau mencoba memperkuat cengkeraman mereka pada bahasa script sisi server paling populer di dunia.

Sekali lagi, PHP adalah bahasa script sisi server. Itu berarti script PHP dijalankan di server, output dibuat di server, dan hasilnya dikirim sebagai HTML ke browser client (User) untuk rendering. Hal yang wajar jika kita ingin mencampur PHP dan HTML dalam sebuah script, tetapi sebagai pemula, sulit untuk mengetahui cara menggabungkan kode PHP dengan kode HTML.

Hari ini, kita akan membahas beberapa cara berbeda yang dapat kalian pilih ketika kalian ingin menggunakan PHP dalam HTML. Saya berasumsi bahwa kalian sudah memiliki instalasi PHP yang berfungsi dengan baik sehingga kalian dapat menjalankan contoh yang diberikan dalam artikel ini.

 Baca Juga :

Berbagai Cara Menggabungkan PHP dan HTML

Secara umum, ketika menggunakan PHP dalam HTML, ada dua pendekatan yang berbeda. Yang pertama adalah menyematkan kode PHP di file HTML kalian sendiri dengan ekstensi .html ini memerlukan pertimbangan khusus, yang akan kita bahas sebentar lagi. Opsi lainnya, cara yang paling disukai, adalah menggabungkan tag PHP dan HTML dalam file .php .

Karena PHP adalah bahasa script sisi server, kode diinterpretasikan dan dijalankan di sisi server. Misalnya, jika kalian menambahkan kode berikut di file index.html kalian, kode itu tidak akan habis.



<!DOCTYPE html>
<html>
<head>
<title>Embed PHP in a .html File</title>
</head>
<body>
<h1><?php echo "Hello World" ?></h1>
</body>
</html>
Pertama-tama, jangan khawatir jika kalian belum pernah melihat campuran kode PHP dan HTML semacam ini sebelumnya, karena kita akan membahasnya secara mendetail di seluruh artikel ini. Contoh di atas menampilkan yang berikut di browser kalian:


<?php echo "Hello World" ?>
Jadi seperti yang kalian lihat, secara default, tag PHP dalam  dokumen .html kalian  tidak terdeteksi, dan hanya dianggap sebagai teks biasa, dikeluarkan tanpa parsing. Itu karena server biasanya dikonfigurasi untuk menjalankan PHP hanya untuk file dengan   ekstensi .php .

Jika kalian ingin menjalankan file HTML sebagai PHP, kalian dapat memberi tahu server untuk menjalankan file .html kalian  sebagai file PHP, tetapi akan lebih baik jika kalian memasukkan campuran kode PHP dan HTML ke dalam file dengan ekstensi .php .

Itulah yang akan saya tunjukkan dalam tutorial ini.

Cara Menambahkan Tag PHP di Halaman HTML kalian

Ketika datang untuk mengintegrasikan kode PHP dengan konten HTML, kalian perlu menyertakan kode PHP dengan tag awal (pembuka) PHP <?php dan tag akhir (penutup) PHP ?>. Kode yang dibungkus antara dua tag ini dianggap sebagai kode PHP, dan karenanya akan dijalankan di sisi server sebelum file yang diminta dikirim ke browser klien.

Mari kita lihat contoh yang sangat sederhana, yang menampilkan pesan menggunakan kode PHP. Buat file index.php dengan konten berikut di bawah root dokumen kalian.



<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML - Contoh Sederhana</title>
</head>
<body>
<h1><?php echo "Pesan ini dari sisi server." ?></h1>
</body>
</html>
Hal penting dalam contoh di atas adalah kode PHP dibungkus oleh tag PHP.

Output dari contoh di atas terlihat seperti ini:




Dan, jika kalian melihat sumber halaman, akan terlihat seperti ini:




Seperti yang kalian lihat, kode PHP diurai dan dijalankan di sisi server, dan digabungkan dengan HTML sebelum halaman dikirim ke browser client.

Mari kita lihat contoh lain:



<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML- Contoh Tanggal</title>
</head>
<body>
<div>Ini adalah pesan HTML murni.</div>
<div>Selanjutnya, kita akan menampilkan tanggal dan hari hari ini dengan PHP!</div>
<div>
Tanggal hari ini adalah <b><?php echo date('Y/m/d') ?></b> dan itu adalah <b><?php echo date(‘l’) ?></b> hari ini!
</div>
<div>Sekali lagi, ini adalah konten HTML statis.</div>
</body>
</html>
Ini akan mengeluarkan tanggal dan waktu saat ini, sehingga kalian dapat menggunakan kode PHP di antara tag HTML untuk menghasilkan keluaran dinamis dari server. Penting untuk diingat bahwa setiap kali halaman dijalankan di sisi server, semua kode di antara <?php dan ?> tag akan diinterpretasikan sebagai PHP, dan hasilnya akan disematkan dengan tag HTML.

Faktanya, ada cara lain untuk menulis contoh di atas, seperti yang ditunjukkan pada cuplikan berikut.



	
<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML- Contoh Tanggal</title>
</head>
<body>
<div>Ini adalah pesan HTML murni.</div>
<div>Selanjutnya, kita akan menampilkan tanggal dan hari hari ini dengan PHP!</div>
<div>
<?php
echo 'Tanggal hari ini adalah <b>' . date('Y/m/d') . '</b> dan itu adalah <b>'.date('l').'</b> hari ini!';
?>
</div>
<div>Sekali lagi, ini adalah konten HTML statis.</div>
</body>
</html>
Dalam contoh di atas, kita telah menggunakan fitur penggabungan PHP, yang memungkinkan kalian untuk menggabungkan string yang berbeda menjadi satu string. Dan terakhir, kita telah menggunakan  echo konstruksi untuk menampilkan string yang digabungkan.

Outputnya sama saja, terlepas dari metode yang kalian gunakan, seperti yang ditunjukkan pada tangkapan layar berikut.




Dan itu membawa kita ke pertanyaan lain: manakah cara terbaik? Haruskah kalian menggunakan fitur penggabungan atau menyisipkan tag PHP terpisah di antara tag HTML? Menurut saya itu sangat tergantung, tidak ada aturan ketat yang memaksa kalian menggunakan salah satu metode ini. Secara pribadi, saya merasa metode placeholder lebih mudah dibaca dibandingkan dengan metode penggabungan.

Struktur keseluruhan halaman PHP yang digabungkan dengan kode HTML dan PHP akan terlihat seperti ini:



	
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
HTML...
<?php PHP code ... ?>
HTML...
<?php PHP code ... ?>
HTML...  
</body>
</html>
Di bagian selanjutnya, kita akan melihat bagaimana kalian dapat menggunakan loop PHP dengan HTML.

Cara Menggunakan Loop PHP di Halaman HTML kalian

Iterasi melalui array untuk menghasilkan konten HTML adalah salah satu tugas paling umum yang akan kalian temui saat menulis script PHP. Di bagian ini, kita akan melihat bagaimana kalian dapat melakukan iterasi melalui berbagai item dan menghasilkan output.

Dalam kebanyakan kasus, kalian harus menampilkan konten array yang telah kalian isi dari database atau beberapa sumber lain. Dalam contoh ini biar lebih simple, kita akan menginisialisasi array dengan nilai yang berbeda di awal script itu sendiri.

Lanjutkan dan buat file PHP dengan konten berikut.



	
<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML - Contoh foreach</title>
</head>
<body>
<?php
$employees = array(‘John’, ‘Bambang’, ‘Lukas’, ‘Nellie’);
?>
<h1>Daftar Karyawan</h1>
<ul>
<?php foreach ($employees as $employee) { ?>
<li><?php echo $employee ?></li>
<?php }  ?>
</ul>
</body>
</html>
Pertama, kita telah menginisialisasi array di awal script kita. Selanjutnya, kita telah menggunakan  foreach konstruksi untuk mengulang melalui nilai array. Dan terakhir, kita telah menggunakan  echo konstruksi untuk menampilkan nilai elemen array.

Dan hasilnya akan terlihat seperti ini:




Contoh yang sama dengan  while loop terlihat seperti ini:



	
<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML - Contoh foreach</title>
</head>
<body>
<?php
$employees = array(‘John’, ‘Bambang’, ‘Lukas’, ‘Nellie’);
$total = count($employees);
?>
<h1>List of Employees</h1>
<ul>
<?php
$i = 0;
?>
<?php while ($i < $total) { ?>
<li><?php echo $employees[$i] ?></li>
<?php  ++$i ?>
<?php }  ?>
</ul>
</body>
</html>
Dan hasilnya akan sama. Jadi begitulah cara kalian menggunakan foreach dan while loop untuk menghasilkan konten HTML berdasarkan array PHP.

Di bagian selanjutnya, kita akan melihat bagaimana kalian bisa menggunakan sintaks tag pendek PHP.

Cara Menggunakan Tag Pendek PHP

Dalam contoh yang telah kita bahas sejauh ini, kita telah menggunakan <?php tag sebagai tag awal di mana-mana. Faktanya, PHP hadir dengan variasi lain juga, <?= yang dapat kalian gunakan sebagai sintaks singkat saat kalian ingin menampilkan string atau nilai variabel.

Mari kita merevisi contoh dengan sintaks short-hand yang telah kita bahas sebelumnya.


	
<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML - Contoh Sederhana</title>
</head>
<body>
<h1><?= "Pesan ini dari sisi server." ?></h1>
</body>
</html>
Seperti yang kalian lihat, kita dapat menghilangkan echo atau print membangun sambil menampilkan nilai dengan menggunakan sintaks singkat. Sintaks singkatnya dan dapat dibaca saat kalian ingin menampilkan sesuatu dengan echo atau print.

Jadi ini adalah cara berbeda yang dapat kalian gunakan untuk menambahkan PHP dalam konten HTML. Sebagai pemula, kalian dapat belajar dari mencoba berbagai cara untuk melakukan sesuatu, dan itu juga menyenangkan!

Termasuk Kode dari Berbagai File

Ada banyak situasi di mana kalian perlu menggunakan kode yang sama di beberapa halaman situs web. Salah satu contohnya adalah bagian header dan footer dari sebuah situs web. Bagian ini biasanya berisi HTML yang sama di seluruh situs web.

Bayangkan ini seperti memindahkan aturan CSS umum dari sebuah situs web ke dalam lembar gaya (style sheet) alih-alih menempatkannya di dalam style tag pada halaman individual.

Ada empat fungsi yang tersedia di PHP untuk membantu kalian memasukkan file lain ke dalam file PHP. Ini adalah include(), include_once(),require(), dan require_once().

include() adalah fungsi yang akan mencakup dan mengevaluasi file tertentu dan memberikan peringatan jika tidak dapat menemukan file. require() adalah fungsi yang melakukan hal yang sama, namun memberikan kalian sebuah kesalahan bukan peringatan jika file tersebut tidak dapat ditemukan.

Saat mengerjakan proyek besar, kalian mungkin secara tidak sengaja menyertakan file yang sama beberapa kali. Ini dapat menyebabkan masalah seperti definisi ulang fungsi. Salah satu cara untuk menghindari masalah ini adalah dengan menggunakan include_once() dan require_once() functions di PHP.

Mari gunakan kode dari bagian sebelumnya untuk menunjukkan kepada kalian bagaimana menggunakan fungsi-fungsi ini. Saya akan menggunakan include() pada contoh kali ini. Buat file bernama header.php dan tempatkan kode berikut di dalamnya.


	
<!DOCTYPE html>
<html>
<head>
<title>Bagaimana menempatkan PHP dalam HTML</title>
</head>
<body>
<div>Ini adalah pesan HTML murni.</div>
<div>Selanjutnya, kita akan menampilkan tanggal dan hari hari ini menggunakan PHP!</div>
Buat file lain bernama date.php dan tempatkan kode berikut di dalamnya.



	
<?php
include('header.php');
?>
<div>
<?php
echo 'Tanggal hari ini adalah <b>' . date('Y/m/d') . '</b>!';
?>
</div>
</body>
</html>
Buat satu file lagi bernama day.php dan tempatkan kode berikut di dalamnya.



	
<?php
include('header.php');
?>
<div>
<?php
echo 'Hari ini adalah <b>'.date('l').'</b>!';
?>
</div>
</body>
</html>
Perhatikan bahwa kita telah menyertakan path ke header.php di bagian atas day.php dan date.php. Pastikan ketiga file tersebut berada di direktori yang sama. Membuka date.php di browser sekarang akan menunjukkan output berikut.




Membuka day.php akan menampilkan output berikut.




Seperti yang kalian lihat, kode yang kita masukkan ke dalam  header.php  disertakan di kedua file kita. Ini membuat pengembangan web lebih mudah saat kalian bekerja dengan banyak file. Buat saja perubahan di satu tempat, dan itu akan tercermin di mana-mana.

Kesimpulan

Hari ini, kita membahas bagaimana kalian dapat mencampur PHP dan HTML untuk membuat HTML dinamis. kita membahas metode yang berbeda, dengan beberapa contoh untuk melihat bagaimana segala sesuatunya bekerja.

Yosh, sekian untuk tutorial kali ini, jika kalian ada pertanyaan silahkan tinggalkan di kolom komentar di bawah yah .

See you next time :).