Yuk kita buat
Pertama kita buat file nya terlebih dahulu kalian harus buat index.php, navigasi.php, about.php, contact.php, gallery.php dan style.css
Oke selanjutnya kita coding dulu pada bagian index.php
<?php
$title = "Menubar dinamis with PHP";
$page = "Home";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>Ini adalah halaman <?php echo $page; ?> (home.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</footer>
</div>
</body>
</html>
gallery.php
<?php
$title = "Menubar dinamis with PHP";
$page = "Gallery";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>Ini adalah halaman <?php echo $page; ?> (gallery.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</footer>
</div>
</body>
</html>
contact.php
<?php
$title = "Menubar dinamis with PHP";
$page = "Contact";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>Ini adalah halaman <?php echo $page; ?> (contact.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</footer>
</div>
</body>
</html>
about.php
<?php
$title = "Menubar dinamis with PHP";
$page = "About";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $title; ?></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- navigasi -->
<nav>
<?php include "navigasi.php"; ?>
</nav>
<!-- content -->
<div class="content">
<h2>Ini adalah halaman <?php echo $page; ?> (about.php) </h2>
</div>
<!-- footer -->
<footer>
Mau belajar programming ? yuk kunjungi website kita di bewoksatukosong.com kwkw
</footer>
</div>
</body>
</html>
Selanjutnya kita pada bagian style.css
* {
padding: 0;
margin: 0;
}
/* kita buat menu dengan background abu-abu */.menu {
background: #333;
padding: 14px 16px;
margin: 0;
}
.menu ul .active {
text-decoration: underline;
}
.menu ul .active a {
color: red;
text-align: center;
}
.menu ul li {
list-style: none;
text-decoration: none;
display: inline;
padding: 14px 16px;
line-height: 50px;
}
.menu ul li a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
}
.content {
padding: 1rem;
line-height: 20px;
height: 300px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
Lalu kita koding pada bagian navigasi.php
<div class="menu">
<ul>
// jika page yang kita klik adalah home / about / gallery / contact
// tolong aktifkan class active yang berada
// di css sehingga ia akan berubah menjadi merah
<li <?php if ($page == "Home") echo "class='active'"; ?>> <a href="index.php">Home</a></li>
<li <?php if ($page == "About") echo "class='active'"; ?>> <a href="about.php">about</a></li>
<li <?php if ($page == "Gallery") echo "class='active'"; ?>> <a href="gallery.php">gallery</a></li>
<li <?php if ($page == "Contact") echo "class='active'"; ?>> <a href="contact.php">contact</a></li>
</ul>
</div>
Maka hasilnya seperti dibawah ini yaa
Sampai jumpa di tutorial selanjutnya
![Cara Koneksi Database MySql Dengan VB.NET[Visual Studio Terbaru]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcxWWBdUDRRWWYk5ZcfyVyqlscBPQ5K9mVz4jPrFwN4s3kHFjrSBs67ZZX5lCvQTHybfuUAUhURYdDlXPyOKY3qb3ROYtC1NlYQCVr4VzshytQee1svXFuW34AsOqyW8xoFdJsgCpXR4/s72-c/tutorial+vb+net.jpg)
No comments:
Post a Comment