Cara menuliskan css dan html dalam php

cara menuliskan html dan css dalam php

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.

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 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 :

penggabungan html dengan php

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 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 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 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.

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Menghindari duplikat data dalam mysql dengan php
    Menghindari duplikat data dalam mysql bisa dilakukan dengan dua cara, pertama dengan mendefinisikan salah satu field/kolom sebagai primary key atau index, dan cara kedua adalah dengan membuat rutin perintah pengecekan data pada saat akan melakukan insert data. Berikut ini saya akan berbagi tentang bagaimana membuat rutin perintah php yang digunakan untuk menghindari duplikat data dalam mysql.
  • Membuat file dengan php
    Dengan php kita bisa melakukan operasi terhadap file yang berada dalam server. Operasi file yang bisa dilakukan diantaranya adalah membuat file.
  • Membaca file dengan php
    Dengan php kita bisa melakukan operasi terhadap file yang berada dalam server. Operasi file yang bisa dilakukan diantaranya adalah membaca file.
  • Menghapus file dengan php
    Dengan php kita bisa melakukan operasi terhadap file yang berada dalam server. Operasi file yang bisa dilakukan diantaranya adalah menghapus file. Berikut ini caranya.
  • Perintah include dan require dalam php
    Perintah require() dan include() dalam php digunakan untuk menyisipkan isi file tertentu menjadi bagian file yang memanggilnya. Keduanya sangat identik dalam banyak hal, kecuali cara penanganan kegagalan. include() menghasilkan suatu peringatan, sedangkan require() menghasilkan pesan kesalahan Fatal Error.

Kiriman terbaru