Mungkin anda sudah mengetahui bahwa
PHP bekerja disisi server sedangkan
HTML dan CSS bekerja disisi klien. Ketiganya bisa saling melengkapi sehingga menghasilkan halaman web yang dinamis dengan tampilan yang menarik. Berikut ini saya akan berbagi tentang bagaimana menuliskan css dan html tersebut dalam php.
Sebelum saya buatkan contoh penggabungan ketiganya, sebaiknya saya ingatkan dulu agar tidak ada salah persepsi tentang cara kerja php, bahwa :
- PHP harus dijalankan dengan bantuan web server
- PHP harus disimpan dalam file dengan ekstensi .php
- PHP harus diawali dengan tanda <?php dan diakhiri dengan tanda ?>
PHP disisipkan dalam HTML
<html>
<head>
<title>Contoh PHP disisipkan dalam HTML</title>
</head>
<body>
<h1>Helllo </h1>
<?php
echo "Selamat malam"; //Ini contoh komentar php
?>
<p>Saya sedang belajar di blog</p>
</body>
</html>
Dengan penulisan seperti diatas, pada saat file tersebut dijalankan
maka web server akan mengirimkan langsung ke browser perintah-perintah
yang berada sebelum script php, kemudian memproses baris php yang
diawali dengan <?php s/d ?> dan mengirimkannya ke browser,
kemudian dilanjutkan dengan mengirimkan kembali perintah html yang
berada setelah php sampai selesai.
Jika anda menggunakan aplikasi editor web visual yang bisa langsung melihat hasilnya seperti dreamweaver, yang tampil di layar editor seperti gambar berikut :
Dari gambar bisa dilihat bahwa script php yang disipkan hanya bisa terlihat seperti gambar yang saya lingkari, dan akan terlihat hasilnya jika sudah dijalankan.
HTML disisipkan dalam PHP
<?php
echo "<html>";
echo "<head>";
echo "<title>Contoh PHP disisipkan dalam HTML</title>";
echo "</head>";
echo "<body>";
echo "<h1>Helllo </h1>";
echo "Selamat malam"; //Ini contoh komentar php
echo "<p align=\"center\">Saya sedang belajar di blog </p>";
echo "</body>";
echo "</html>";
?>
Cara kerja serta penulisan kode diatas sedikit berbeda, pada saat
filenya diakses maka web server akan memproses keseluruhan fungsi2 php
yang dituliskan baru dikirim ke browser.
Cara lain untuk menuliskan html dalam php bisa dengan kode seperti berikut :
<?php
echo '<html>';
echo '<head>';
echo '<title>Contoh PHP disisipkan dalam HTML</title>';
echo '</head>';
echo '<body>';
echo '<h1>Helllo </h1>';
echo 'Selamat malam'; //Ini contoh komentar php
echo '<p align="center">Saya sedang belajar di blog </p>';
echo '</body>';
echo '</html>';
?>
Perbedaan dengan cara
pertama terletak pada tanda petik yang sebelumnya dengan petik dua,
ditulis dengan petik satu. Lihat juga baris echo '<p
align="center"...dst ini juga ditulis berbeda.
Dalam beberapa kasus, jika menggunakan cara pertama, kita bisa gabungkan dengan menuliskan variabel php misal :
<?php
$nama="Ali";
echo "<h1>Selamat malam $nama</h1>";
?>
Ini akan menghasilkan tulisan Selamat malam Ali. Tapi hal seperti ini tidak bisa dilakukan dengan cara kedua karena hasilnya akan berbeda, misal :
<?php
$nama="Ali";
echo '<h1>Selamat malam $nama</h1>';
?>
Ini akan menghasilkan tulisan Selamat malam $nama, bukan menampilkan isi variabelnya. Jika ingin menggunakan cara kedua, maka harus dituliskan dengan cara :
<?php
$nama="Ali";
echo '<h1>Selamat malam '.$nama.'</h1>';
?>
CSS disisipkan dalam PHP
Untuk menyisipkan CSS dalam php, caranya sama persis dengan menyisipkan HTML dalam PHP, contoh :
<?php
echo "<html>";
echo "<head>";
echo "<title>Contoh PHP disisipkan dalam HTML</title>";
echo "<link href=\"namafile.css\" rel=\"stylesheet\" type=\"text/css\" />";
echo "</head>";
echo "<body>";
echo "<h1>Helllo </h1>";
echo "Selamat malam"; //Ini contoh komentar php
echo "<p align=\"center\">Saya sedang belajar di blog </p>";
echo "</body>";
echo "</html>";
?>
Cara diatas digunakan jika yang disisipkan adalah file cssnya, dan jika bentuk deklarasi css akan ditulis seperti berikut :
<?php
echo "<html>";
echo "<head>";
echo "<title>Contoh PHP disisipkan dalam HTML</title>";
echo "<style type=\"text/css\">";
echo ".contohcss1 { text-align:center; }";
echo ".contohcss2 { text-align:left; }";
echo "</style>";
echo "</head>";
echo "<body>";
echo "<h1>Helllo </h1>";
echo "Selamat malam"; //Ini contoh komentar php
echo "<p align=\"center\">Saya sedang belajar di blog </p>";
echo "</body>";
echo "</html>";
?>
Karena semua dituliskan dalam php maka otomatis hasil output akan menjadi satu baris (jika dilihat page source) seperti ini :
<html><head><title>Contoh PHP disisipkan dalam HTML</title></head><body><h1>Helllo </h1>Selamat malam<p>Saya sedang belajar di blog zainalhakim.web.id</p></body></html>
Jika ingin lebih rapi, anda bisa tambahkan
\n pada tiap akhir baris phpnya, seperti berikut :
<?php
echo "<html>\n";
echo "<head>\n";
echo "<title>Contoh PHP disisipkan dalam HTML</title>\n";
?>
\n digunakan untuk memisah baris output yang dikirimkan.
Beberapa kondisi, jika memang diperlukan (kesulitan menyisipkan kode yang dijalankan disisi klien) anda bisa sisipkan dengan cara :
<?php
echo "<html>";
echo "<head>";
echo "<title>Contoh PHP disisipkan dalam HTML</title>";
echo "</head>";
echo "<body>";
echo "<h1>Helllo </h1>";
echo "Selamat malam"; //Ini contoh komentar php
echo "<p align=\"center\">Saya sedang belajar di blog </p>";
?>
Anda bisa sisipkan kode javascript, html atau css dengan cara ini.
Cara ini digunakan jika memang script yang ditulis agak rumit diterapkan dalam php.
<?php
echo "</body>";
echo "</html>";
?>
Jika anda menggunakan web editor visual
dan menuliskan semua kode html dan css dalam php, maka tampilan
visualnya tidak akan terlihat. Jadi anda harus bekerja dalam mode code,
dan hanya bisa melihat hasil dengan menjalankanya via web server.
