Teknik membuat halaman web dinamis dengan PHP MySQL

Teknik ini adalah teknik keempat dari teknik layout web dengan PHP. Teknik ini hanya membutuhkan satu file utama, nantinya menu dan content ada didatabase. Rancangan tabelnya cukup sederhana, hanya berupa idpage,judul, isi. Namun itu semua bisa anda kembangkan sesuka anda. Hampir sebagian besar situs berita dan CMS menggunakan teknik ini.

?

source code

1 2 3 4 5 6

CREATE TABLE IF NOT EXISTS `page` (   `idpage` int(11) NOT NULL AUTO_INCREMENT,   `judul` varchar(200) NOT NULL,   `isi` text NOT NULL,   PRIMARY KEY (`idpage`) ) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

Setelah membuat tabel page, silahkan isi 3 data kedalam tabel.
Berikut ini adalah tampilannya

Perhatikan menu kiri, menu itu didapat dari kolom judul di tabel page. Jika menu diklik maka content di sebelah kanan akan diambil dari database berdasarkan idpagenya (lihat addresbarnya).

Struktur project

|   index.php
|
+---assets
|       baby-blue.css
|       pure-min.css
|
\---inc
        config.php

Kode menu dinamis

Sebanyak apapun halamannya, tidak ada penambahan file di php. Kode php untuk mengambil menu dinamis adalah sbb:

?

source code

01 02 03 04 05 06 07 08 09 10 11 12

<a class="pure-menu-heading" href="/">Menu</a> <ul> <?php $sql="select idpage,judul from page order by idpage"; $rs=mysql_query($sql) or die(mysql_error()); while ($page=mysql_fetch_object($rs)){     ?> <li class=" "> <a href="index.php?idpage=<?=$page->idpage?>"><?=$page->judul?></a> </li> <?php } ?> </ul>

kode content dinamis

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<div class="content"> <?php                     $idpage = '1';                     if (isset($_GET['idpage'])) {                         $idpage = $_GET['idpage'];                     }                     $sql = "select * from page where idpage='$idpage' ";                     $rs = mysql_query($sql) or die(mysql_error());                     while ($page = mysql_fetch_object($rs)) {                         echo "<h1>".$page -> judul."</h2>";                         echo $page -> isi;                     }           ?> </div>

Download source

Jika ingin mencoba sendiri, silahkan download source codenya di sini.

Read More