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.

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

desain4

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:

<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

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

Categories: CSS-Webdesign

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

11 Comments

putra setia · 15 March , 2017 at 1:49 pm

makasih bos tutorialnya sangat membantu saya buat mendalami tentang program

izzatul Fitri · 23 May , 2016 at 7:49 pm

makasih, klo cara ganti web dr statis ke dinamis gmna??

Anonymous · 21 November , 2015 at 12:30 pm

Gan kalo pgen ada proses crud nya gimana …. mohon pencerahan nya gan … tks…

Devri Afriawansyah · 16 April , 2015 at 12:18 am

Thanks gan, akhirnya saya bisa lanjut buat Program Sistem Pembayaran SPP, setelah kendala di bagian halaman..

imamsuryono · 2 March , 2015 at 12:52 pm

nahhh klo url nya pengen pake Char bisa ga bisanya http://susukolostrum.net/manfaat-susu-kolostrum.php Gmn tuh tapi page tsb dari database bisa ga ?

Anonymous · 13 February , 2015 at 7:16 pm

Caranya gimana sih pusing saya master -_-

asikbookie · 10 December , 2014 at 10:43 am

mantap master
thx untuk infonya
mampir juga ya master ke http://www.asikbookie.com
thx master

omkomputerkapilo · 6 December , 2014 at 3:39 pm

saya minta software php dong?

yaditanjungbaratyadi · 2 October , 2014 at 8:50 am

tutorialnya bagus mas, tapi lebih bagus lagi kalo tutorialnya tentang menu dan sub menu dinamis. kayaknya lebih keren.

Mujtahid · 18 September , 2014 at 8:40 am

kalau misalnya isi beritanya dikasih kategori itu gimana mas?

Billy · 9 June , 2014 at 10:33 am

saya sangat terkesan dengan isi website ini, terima kasih bang Candra, Saya baru saja belajar tentang webj dan abang memberi banyak inspirasi bagi saya, melalui web ini.

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.