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

Artikel Lainnya

  • Masalah seputar upload file dengan php
    Minat terhadap bahasan tentang upload file dengan php kayanya sangat tinggi, ini saya lihat dari banyaknya pengunjung yang datang ke situs saya ini mencari informasi tentang bagaimana membuat form upload, membuat upload ke database dll. Oleh karena itu saya akan berbagi informasi tentang hal yang sering terjadi pada saat membuat fasilitas upload file dengan php, mudahan ini berguna buat teman-teman yang sedang mendalaminya.
  • Membuat function di php
    Function adalah kumpulan baris program yang digunakan untuk melakukan proses tertentu dengan tujuan yang sama. Function akan mengembalikan nilai atau hasil yang sudah diproses kepada rutin atau variabel yang menggunakannya. Function dibuat agar program utama dapat ditulis lebih sederhana dan pengulangan proses dapat dilakukan dengan lebih mudah. Dalam php terdapat tiga jenis function yang bisa dijalankan yaitu User-defined, internal dan anonymous functions. Pada artikel berikut saya akan menjelaskan tentang bagaimana membuat function sediri (User Defined) dalam php.
  • Perintah php mysql
    PHP telah menyediakan banyak perintah fungsi bawaan yang bisa kita gunakan dalam membuat aplikasi web. Fungsi-fungsi tersebut juga sangat beragam dari pengolahan string, pengolahan dan manipulasi gambar, sampai melakukan komunikasi dengan database. PHP juga mendukung banyak database tidak terkecuali MySql. Apa saja perintah php mysql?
  • Menampilkan data mysql dalam list menu dengan php
    List menu atau yang sering disebut combo box adalah sebuah objek dalam form yang disediakan oleh HTML. List menu digunakan untuk menampilkan pilihan yang umumnya bersifat statis misal pilihan nama kota, nama kategori, jenis jabatan dll. Bagaimana seandainya kita ingin menampilkan pilihan dengan sumber datanya dari mysql? Saya akan jelaskan langkahnya pada artikel berikut.
  • Membagi form dalam beberapa halaman
    Ada beberapa contoh kasus yang mengharuskan kita membagi form dalam beberapa halaman, agar proses input lebih mudah dan dapat memunculkan pilihan sesuai dengan inputan awal. Berikut ini saya akan berbagi trick bagaimana membuat beberapa form yang terpisah halaman bisa saling terhubung dalam sebuah proses.

Kiriman terbaru