Mengambil nilai halaman dengan JavaScript
Mari kita bahas dari kebanyakan hal yang di miliki website banyak halaman. setiap website memiliki halaman yang beragam fungsing, Namun dari kebanyakan website terkadang ada juga yang harus menampilkan elemen serupa untuk setiap halaman.
Contohnya adalah seperti element header dan footer, Element ini akan selalu ada pada setiap halaman walaupun memiliki artikel yang berbeda beda beda pada setiap halaman.
Andaikan pada satu proyek web Saya memiliki 100 halaman. dan setiap halaman Saya memiliki element navigasi yang sama. Apakah Saya juga harus menempatkan element navigasi ke setiap halaman yang totalnya mencapai 100?. tentu itu akan menjadi hal yang sangat lama dan merepotkan. Apa lagi kalau Saya ingin membuat perubahan dan harus mengganti nya satu persatu.
Berikut adalah cara yang simpel dan cepat untuk Kita menampilkan element berulang tanpa harus membuatnya ke setiap halaman. Cukup dengan satu file halaman inti untuk di tampilkan ke setiap halaman.
Pertama Kita harus membuat file header.html terlebih dahulu. Buatlah sederhana saja.
<header>Ini adalah header</header>Lanjut kita membuat file footer.html pada direktori yang sama seperti header.
<footer>Ini adalah footer</footer>Dan lanjut Kita akan membuat file index.html sebagai wadah header dan footer agar bisa di tampilkan pada halaman index.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Halaman Wadah</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
