Dibawah ini merupakan tutorial membuat web dinamis dimana web yang kita buat nanti akan menjadi web yang dinamis.
Step 1 – MEMBUAT HALAMAN UTAMA
Pertama bukalah text editor kita yang akan digunakan untuk ngoding lalu ketikkan script yang ada dibawah ini dan simpan dengan nama file index.php
<!DOCTYPE html> <html> <head> <title>Web Dinamis</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" > <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="master"> <div class="nav"> <h1>Blogea</h1> <ul> <li><a href="index.php?page=home">Home</a></li> <li><a href="index.php?page=article">Artikel</a></li> <li><a href="index.php?page=about">About</a></li> <li><a href="index.php?page=contact">Contact</a></li> </ul> </div> <div class="banner"> <div class="container"> <div class="slide fade"> <div class="number">1/3</div> <img src="img/3.jpg"> <div class="caption">Caption Text</div> </div> <div class="slide fade"> <div class="number">2/3</div> <img src="img/2.jpg"> <div class="caption">Caption Two</div> </div> <div class="slide fade"> <div class="number">3/3</div> <img src="img/1.jpg"> <div class="caption">Caption Three</div> </div> <div style="text-align: center;"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> </div> <div class="content"> <?php if (isset($_GET['page'])) { $page = $_GET['page']; switch ($page) { case 'home': include ("page/home.php"); break; case 'article': include ("page/article.php"); break; case 'about': include ("page/about.php"); break; case 'contact': include 'page/contact.php'; break; case 'login': include 'page/login.php'; break; default: echo "Nyari Apa Yah ?"; break; } }?> </div> <div class="footer"> </div> </div> <script type="text/javascript"> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName('slide'); var dots = document.getElementsByClassName('dot'); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 4000); } </script> </body> </html>
*KETERANGAN: Di atas ada script PHP dan itulah yang membuat web yang kita buat menjadi dinamis.
Step 2 – MEMBUAT HALAMAN LAIN
Kita buat lagi file untuk halaman lain. Contoh halaman contact yang akan saya buat dibawah ini.
<div class="halaman"> <h1>Halaman Contact</h1> </div>
Simpan di folder page dengan nama contact.php.
Kita juga bisa buat halaman halan yang lain.
Step 3 – MEMBUAT FILE CSS
Selanjutnya kita buat file css untuk mempercantik tampilan simpan dengan nama file style.css di folder css.
* { margin:0; } html, body { width: 100%; } .master .container { width: 100%; margin: auto; padding: 0; } .master .container img { width: 100%; height: 400px; } .master .container .number { margin-bottom: -40px; position: absolute; margin: 16px 16px; font-family: arial; font-size: 20px; color: #fff; } .master .container .caption { font-family: arial; font-size: 20px; color: #fff; text-align: center; margin-top: -40px; } .master .container .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4;} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .master .nav h1 { float: left; padding: 5px 10px; } .master .nav { height: 55px; } .master .nav ul { list-style-type: none; overflow: hidden; float: right; } .master .nav ul li { float: left; } .master .nav ul li a { display: block; text-decoration: none; padding: 15px 20px; } .master .banner { height: 400px; background-color: #333; } .master .content { background-color: #f4f4f4; width: 100%; height: 400px; display: flex; flex-direction: column; } .master .content .halaman { background-color: #fff; text-align: center; padding: 30px; width: 60%; margin: 8px 8px; } .master .footer { height: 55px; line-height: 55px; width: 100%; background-color: #333; }
Dan contoh akhir akan seperti gambar di bawah ini.
Nah sekarang anda sudah berhasil membuat Web dinamis dengan PHP. Selamat belajar.
Terima Kasih telah membaca.
***PIU***