Membuat design web sederhana menggunakan div ~ Dunia Pendidikan Masa kini

Senin, 04 Juni 2012

Membuat design web sederhana menggunakan div

Berikut ini adalah tutorial sederhana untuk membuat sebuah design web dinamis menggunakan teknik div .

1. Buatlah design layout web yang akan kamu buat, sebagai contoh adalah sebagai berikut :

Tentu saja, ketika layout ini sudah jadi, anda sudah memiliki 1 file css (contoh css_saya.css) dan 1 file html yang biasanya berfungsi sebagai index (halaman utama) – misal kita beri contoh index.php, yang di dalamnya berisi script sebagai berikut :

<head>

<title>My Website</title>

<!-- ini adalah link ke file css yang kita buat //-- >

</head>

<body>

</div>

<?php include("content.php")?>

</div>

<?php include("menu_kanan.php")?>

</div>

</div>

</body>

</html>

2. Perhatikan script yang saya beri warna merah. Div content merupakan tempat dimana semua halaman dari link ditampilkan. Disini hanya akan diincludekan 1 file saja, yang bernama content.php (nama terserah kreasi kamu). File ini berisi daftar semua link yang ada di website kamu. Content.php ini penting supaya kita dapat membuka semua halaman dari link yang tersedia pada suatu tempat yang tetap yaitu pada div content. Sebagai contoh, perhatikan script berikut :

<?php

$lihat=$_GET['lihat'];

switch ($lihat){

case 'laporan' :

include ("laporan_pi_paging.php");break;

case 'tambah_laporan' :

include ("tambah_laporan2.php");break;

case 'edit_laporan' :

include ("edit_laporan2.php");break;

case 'hapus_laporan' :

include ("delete_laporan.php");break;

Default : include (“beranda.php”);break;

}

Keterangan :

$lihat=$_GET['lihat']; lihat merupakan parameter dari sebuah link yang dikirimkan untuk menunjuk pada suatu halaman yang diinginkan. Sebagai contoh, jika saya ingin membuka halaman edit_laporan2.php, maka saya cukup mengirimkan link :

break; sangat perlu untuk dituliskan, supaya ketika sudah berhasil menemukan parameter lihat yang sesuai, program langsung menghentikan pencarian,

Disini jelas bahwa kita tetap memanggil halaman index.php, dengan isi/content yang berbeda.

Default adalah halaman yang akan dimunculkan apabila parameter lihat dalam sebuah link tidak terdapat dalam daftar.

Selamat mencoba.. semoga bermanfaat.