w3 Tutorial, Web Tutorial
<?php //contoh layout web dinamis dengan html, css, php // contoh ini menerapkan parameter super global, dan url rewritemod untuk mempercantik url (konfigurasi url pada file .htaccess) // sisipkan file global.php yang berisi variabel super global require "global.php"; // sisipkan file database yang berisi koneksi ke database require $dir."/database/dbase.php"; ?> <html> <!-- mulai elemen head --> <head> <?php // sisipkan file meta.php yang berisi tag-tag pada elemen header seperti <title> dan <meta> require $dir."/meta.php"; ?> <!-- sisipkan file eksternal CSS --> <link rel="stylesheet" type="text/css" href="<?php echo $url;?>/css/style.css" /> </head> <!-- akhir elemen head --> <!-- mulai elemen body --> <body> <!-- membuat layout dengan 4 baris yang ditentukan sebagai layer atas, menu, isi, dan bawah dengan selektor id --> <div id="atas"><h1>Selamat Datang!</h1></div> <div id="menu"><?php require $dir."/pages/menu.php";?></div> <div id="isi"><?php require $dir."/pages/body.php";?> </div> <div id="bawah"><?php require $dir."/pages/footer.php";?></div> </body> <!-- akhir elemen body --> </html>As shown in code above, we have global.php file contain super global variable. The concept is to have a variable that can use in every page for search or find url or locate the file path. In this case we create $dir variable for locate a path and $url variable for search or find url. Code of global.php file shown below:
<?php
//set variable to global
global $dir, $url;
// buat variable static yang bernilai konstan
static $dir;
static $url;
// tentukan nilai variable global
$dir = dirname(__FILE__);
$url = "http://".$_SERVER['SERVER_NAME']."/stikom5"; // bila file2 diletakkan pada folder stikom5 (anda dapat membuat sembarang folder sesuai keinginan)
?>
</pre>
</div>
Next step is creating a connection to database by create an external file called dbase.php place in database folder, shown below:
<div class="codeborder">
<pre>
<?php
//buat koneksi database
mysql_connect("localhost", "root", "");
//pilih database (database telah dibuat bernama myweb)
mysql_select_db("myweb");
?>
Then we include meta.php file contained an header tag shown below:
<?php
//file ini berisi tag-tag pada elemen header yaitu <title> dan <meta>
// ambil parameter $_GET['page'] dari url dan simpan kedalam variabel $page
// bagian ini sebaiknya bersifat unik, terutama bagian title tidak boleh sama antara satu halaman dengan yang lain
$page = $_GET['page'];
// buat kondisi jika variabel $page tidak ditemukan pada url
if(!isset($page)){
$title = "Welcome in My Personal";
$desc = "contoh description, tuliskan deskripsi singkat dari masing-masing halaman";
$keyword = "contoh keyword, pisahkan, dengan, tanda koma, setiap, keywords, keyword, harus, berhubungan, dengan, isi halaman";
}else{
// kelompokkan header dengan switch dengan variabel $page
switch($page){
// kelompok tampilan dengan variabel $page
case $page:
// fungsi ucwords membuat teks menjadi format kalimat yaitu huruf pertama huruf kapital dan seterusnya huruf kecil pada setiap kata
$title = ucwords($page)." - My Personal";
$desc = "contoh description, tuliskan deskripsi singkat dari masing-masing halaman";
$keyword = "contoh keyword, pisahkan, dengan, tanda koma, setiap, keywords, keyword, harus, berhubungan, dengan, isi halaman";
break;
}
}
// hilangkan backslashes yang merusak tampilan dengan fungsi strip_slashes();
$tittle = stripslashes($title);
$desc = stripslashes($desc);
$keyword = stripslashes($keyword);
?>
<!-- tampilkan nilai dari tag-tag title dan meta -->
<title><?php echo $title;?></title>
<meta name="description" value="<?php echo $desc;?>" />
<meta name="keywords" value="<?php echo $keyword;?>" />
Don't forget to create an external CSS file placed in CSS folder, shown below:
body{background-color : gold;}
#atas{width : 900px; height : 100px; background-color : black; color : white; margin : auto;}
#atas h1{display : inline; margin : 10px;}
#menu{width : 900px; height : 30px; margin : auto; background-color : brown; color : white; text-align : center;}
#menu a{color : white; text-decoration : none;}
#menu a:hover{color : red; text-decoration : overline;}
#isi{width : 900px; height : 500px; margin : auto; background-color : white;}
#bawah{width : 880px; height : 30px; text-align : center; margin : auto; padding : 10px; background-color : orange; color : white;}
Please download the complete file below:
Download