Membuat website dinamis dengan PHP sangat menguntungkan ketika mempunyai banyak file PHP yang beraneka ragam.
Di dalam program PHP secara umum harus memanggil nama file php nya ketika ingin mengakses, hal ini akan menjadi static website dimana ketika membuat konten harus mengisi semua element yang di butuhkan.
Sebenarnya apa sih website dinamis itu ?
Daftar Isi
Apa itu Website Dinamis ?
Website dinamis adalah suatu halaman website yang memiliki konten berubah-ubah. Contohnya pada sebuah halaman website mempunyai :
- Menu
- Sidebar
- dan Konten
3 tata letak di atas memiliki tempat yang berbeda dan konten dapat berubah-ubah sedangkan sidebar dan menu tetap sama.
Dengan PHP membuat website dinamis sederhana dapat menghemat penulisan kode sehingga pekerjaan akan lebih cepat.
Untuk membuat website dinamis dengan PHP dan Tag HTML dapat menggunakan perintah kondisi, seperti switch maupun if.. else.. .
Membuat Website Dinamis Sederhana
Ketika kita membuat website dinamis maka tidak perlu memanggil nama file PHP yang di tuju namun menggunakan sebuah varian parameter.
Kita dapat memanfaat kan keyword GET untuk memanggil nilai pada sebuah URL.
Langsung saja kita buat contoh latihan nya.
Silahkan buat 4 file PHP dan 1 file CSS yang bernama :
- index.php
- about.php
- blog.php
- style.css
beranda.php
<h3>Beranda Kodingin</h3> <p>Ini merupakan halaman awal website dinamis Beranda</p> <p>Website dinamis di bangun menggunakan PHP dan CSS</p> <p>Terima kasih.</p>about.php
<h3>About Kodingin</h3> <img src="//kodingin.com/wp-content/uploads/2019/08/g908.png" alt=""> <p>Ini merupakan halaman awal website dinamis About</p> <p>Website dinamis di bangun menggunakan PHP dan CSS</p> <p>Terima kasih.</p>blog.php
style.css
body { background: purple; width: 500px; margin: 20px auto; color: white; } .header li { list-style: none; float: left; border: 1px solid white; margin-right: 5px; border-radius: 3px; } .header a { text-decoration: none; color: white; padding: 15px; margin: 2px; font-size: 20px; } .header, .content, .footer { width: 600px; overflow: hidden; margin: 10px; } .content { border: 1px solid white; padding: 10px; border-radius: 3px; } .footer a { text-decoration: none; color: rgb(190, 188, 188); font-weight: 100; }index.php
<html> <head> <title>Cara membuat Website dinamis dengan PHP dan CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="header"> <li><a href="index.php?page=beranda">Home</a></li> <li><a href="index.php?page=about">About</a></li> <li><a href="index.php?page=blog">Blog</a></li> </section> <section class="content"> <?php if (isset($_GET['page'])) { if ($_GET['page'] == "about") { include "about.php"; } elseif ($_GET['page'] == "blog") { include "blog.php"; } else { include "beranda.php"; } } else { include "beranda.php"; } ?> </section> <section class="footer"> Link tutorial : <a href="//kodingin.com/cara-membuat-website-dinamis-dengan-php-dan-css"> Cara membuat Website Dinamis dengan PHP dan CSS </a> </section> </body> </html>Perhatikan kode yang ada pada index.php. Terdapat 3 bentuk section yaitu :
- heeader
- content
- footer
Dimana header dan footer langsung di tuliskan di dalam file index.php.
Sedangkan pada bagian class content terdapat perintah if else untuk memeriksa hasil dari parameter URL.
Untuk menambil nilai parameter pada program PHP menggunakan perintah $_GET[‘page’], artinya ketika ada url dengan bentuk ?page={value} maka akan menghasilkan nilai yang ada.
Perintah isset digunakan untuk memeriksa apakah ada parameter page. Apabila ada di proses dengan perintah terhadap isinya.
Dalam contoh di atas menggunakan keyword include untuk memanggil file lainnya.
Apabila tidak ada parameter page maka akan di melakukan include file dengan nama “beranda.php“
Di dalam index.php terdapat link menu dinamis untuk mengarahkan ke dalam parameter yang ada.
Sebagai contoh ketika terdapat URL index.php?page=about, maka akan mengincludkan file about.php
Sedangkan file CSS di atas digunakan agar tampilan website dinamis lebih menarik.
Sekarang kita lakukan uji coba.
Uji Coba Website dinamis PHP dan CSS
Silahkan buka sesesui dengan nama projek yang di buat :
contohnya : //localhost/kodingin_tutorial/php-dinamis/
Sekarang silahkan klik menu about, atau langsung membuka URL contoh : //localhost/kodingin_tutorial/php-dinamis/index.php?page=about.
Sekarang klik menu blog atau buka URL contoh : //localhost/kodingin_tutorial/php-dinamis/index.php?page=blog
Perhatikan gambar di atas, terdapat menu dengan isi : home, about dan blog. Di mana tampilan menu tidak akan berubah.
Baca Juga : Menggunakan Warna CSS pada tag HTML
Sedangkan pada kotakan warna putih yang merupakan suatu konten berubah-ubah sesuai URL yang di akses.