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***
