Home Web Desain Tutorial Membuat Web Dinamis dengan PHP

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

 

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here