Kita dapat mengamati bahwa halaman web pada umumnya hanya mengubah konten. Untuk header, menu (navigasi), sidebar dan footer akan selalu diperbaiki Permasalahan disini adalah bagaimana membuat menu menjadi dinamis, karena pada menu yang ada terdapat kelas khusus yaitu kelas aktif yang menandakan bahwa halaman tersebut sedang dibuka. Jika kita bisa mengubah satu per satu saja, tetapi tentu saja akan tidak efisien, bagaimana jika kita memiliki halaman yang cukup, kita harus mengubah satu per satu di setiap halaman Teknik yang akan kita gunakan adalah kita memberi tanda pada setiap halaman, disini kita membutuhkan sedikit pengetahuan tentang PHP DEMO. http. // www. yellowweb. id/demo/menu-dynamics-raw/index. php Jika diamati pada demo di atas, class active dapat berjalan seperti biasa. Langkah-langkahnya adalah sebagai berikut membuat beberapa file. <div id="menu"> <ul> <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><!-- end of menu -->1 berikut beberapa hal yang perlu kita perhatikan, kita akan memberikan kode untuk setiap halamannya di bagian paling atas dari doctype HTML Kode lengkapnya adalah sebagai berikut <?php
$page = "Home";
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page; ?></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrapper{
width: 960px;
margin: auto;
}
#header{
background-color: red;
height: 100px;
padding: 5px;
color: #ffffff;
}
#menu{
background: blue;
height: 50px;
}
#menu ul .active{
text-decoration: underline;
}
#menu ul .active a{
color: #ffff00;
}
#menu ul li{
list-style: none;
text-decoration: none;
display: inline;
margin: 0 85px;
line-height: 50px;
}
#menu ul li a{
color: #000000;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
}
#content{
padding: 5px;
line-height: 20px;
height: 300px;
}
#footer{
background-color: green;
height: 50px;
text-align: center;
color: #ffffff;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Simple Website</h1>
</div> <!-- end of header -->
<!-- Include Navigasi -->
<?php
include "navigasi.php";
?>
<div id="content">
<h2>Ini Halaman <?php echo $page; ?> (home.php)</h2>
</div><!-- end of content -->
<div id="footer">
<p>Hak Cipta YELLOWWEB.ID | © <?php echo date("Y");?></p>
</div><!-- end fo footer -->
</div><!-- end of wrapper -->
</body>
</html>_berikut adalah kode dari file <div id="menu"> <ul> <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><!-- end of menu -->1 <div id="menu"> <ul> <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><!-- end of menu --> Sobat bisa memotong kode di bagian menu (navigasi), lalu paste di setiap halaman menggunakan fungsi <div id="menu"> <ul> <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><!-- end of menu -->3 Dengan cara ini, ketika ada perubahan pada bagian menu, sobat tidak perlu mengubah satu per satu di setiap halaman, cukup mengubahnya di file <div id="menu"> <ul> <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><!-- end of menu -->1 yang sebelumnya kita buat Langkah-langkah membuat situs web PHP?Nah, cara membuat website dengan PHP dari awal bisa dilakukan dengan langkah-langkah berikut ini. . Siapkan perangkat lunak yang digunakan Buat file indeks. php Buat file gaya. css Buat file rumah. php Buat file tentang. php Buat file kontak. php Coba situs web di browser Apa HTML yang benar untuk membuat daftar drop-down? Perhatikan file menu. html di atas, untuk membuat menu dropdown , elemen HTML yang kita gunakan adalah elemen |
Cara membuat menu di php
Pos Terkait
Copyright © 2023 lovelyristin.com Inc.
