0,00 Rp

Tidak ada produk di keranjang.

Tutorial Membuat Web Dinamis dengan PHP

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

 

Reviews

Related Articles