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 ?>
Jika belum jelas tentang hal diatas sebaiknya anda membaca dulu tulisan saya tentang Installasi Web Server di lingkungan Windows dan Cara Membuat dan Menjalankan PHP
Lanjutkan, berikut ini saya akan buatkan beberapa contoh kasus penggabungan html dan css dalam php.
<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 zainalhakim.web.id</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.
<?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 zainalhakim.web.id</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 zainalhakim.web.id</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 dengancara 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>'; ?>
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 zainalhakim.web.id</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 zainalhakim.web.id</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 zainalhakim.web.id</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.
Semoga bermanfaat, jika ada masukan atau koreksi, silahkan isi komentar dibawah.
0 komentar:
Posting Komentar