Minggu, 03 September 2017

Tutorial Membuat Web Dinamis

By Berbagi Ilmu • September 03, 2017 • 3 Comments

Tutorial Membuat Halaman Web Dinamis Dengan PHP
Halaman web yang bersifat dinamis dapat sangat berguna dan menghemat segala keperluan. contohnya untuk mengedit suatu halaman, kita hanya perlu mengeditnya di halaman itu saja. tanpa harus mengubah di semua halaman.

Berikut ini adalah cara membuat halaman dinamis dengan PHP. Silahkan teman-teman ikuti, dan akan di jelaskan secara detail.
      1.      Buat sebuah project di localhost. di sini saya membuat sebuah project dengan nama “dinamis_php“.
C:/xampp/htdocs/dinamis_php.
2.      Kemudian buat sebuah file dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title>Membuat Halaman Web Dinamis Dengan PHP</title>
<!-- menghubungkan dengan file css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- menghubungkan dengan file jquery -->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="content">
<header>
            <h1 class="judul">Tutorial Web Dinamis (Wildan)</h1>
            <h3 class="deskripsi">Membuat Halaman Web Dinamis Dengan PHP</h3>
</header>
<div class="menu">
                        <ul>
                        <li><a href="index.php?page=home">HOME</a></li>
                        <li><a href="index.php?page=tentang">TENTANG</a></li>
                        <li><a href="index.php?page=tutorial">TUTORIAL</a></li>
            </ul>
      </div>
            <div class="badan">
            <?php
            if(isset($_GET['page'])){
                        $page = $_GET['page'];
                        switch ($page) {
                                    case 'home':
                                                include "halaman/home.php";
                                                break;
                                    case 'tentang':
                                                include "halaman/tentang.php";
                                                break;
                                    case 'tutorial':
                                                include "halaman/tutorial.php";
                                                break;                         
                                    default:
                                                echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
                                                break;
                        }
            }else{
                        include "halaman/home.php";
            }
             ?>
            </div>
</div>
</body>
</html>
      3.      Kemudian buat file vcss nya. agar tampilan nya lebih menarik di pandang.
style.css
body{
            background-color:#f9f9f9;
            font-size:16px
            color:#444;
            font-family: sans-serif;
}
.content{
            width: 80%;
            margin: 10px auto;
}
/*header*/
header{
            background-color: white;
            padding: 20px 10px;
            border-radius: 5px;
            border: 1px solid #f0f0f0;
            margin-bottom: 10px;
}
header h1.judul,
header h3.deskripsi{
            text-align: center;         
}
/*menu navigasi*/
.menu{
            background-color: #87CEFA;
            border: 1px solid #f0f0f0;
            border-radius: 8px;      
            margin-bottom: 10px;
}
div.menu ul {
            list-style:none;
            overflow: hidden;
}
div.menu ul li {
            float:left;                      
            text-transform:uppercase;
}
div.menu ul li a {
            display:block;  
            padding:0 20px;
            text-decoration:none;
            color:#2c2c2c;
            font-family: sans-serif;
            font-size:13px;
            font-weight:400;
            transition:all 0.3s ease-in-out;
}
div.menu ul li a:hover,
div.menu ul li a.hoverover {      
            cursor: pointer;
            color:#fff;
}
div.badan{
            background-color: white;
            border-radius: 5px;
            border: 1px solid #f0f0f0;
            margin-bottom: 10px;
}
div.halaman{
            text-align: center;
            padding: 30px 20px;    
}
    4. Sampai di sini kita telah selesai membuat kerangka dari halaman web dinamis yang ingin kita buat. Selanjutnya kita tinggal membuat sebuah folder bernama “halaman”. Di dalam folder ini lah akan kita letakkan halaman-halaman apa saja yang ingin kita buat. Berikut adalah halaman-halaman yang akan kita buat:
·        home.php
·        tentang.php
·        tutorial.php
di contoh tutorial ini saya membuat halaman dengan nama home.php
home.php
<div class="halaman">
<h2>Halaman Depan</h2>
<p>Selamat datang di www.malasngoding.com. ini merupakan halaman depan pada demo cara Membuat Halaman Web Dinamis Dengan PHP</p>
</div>
tentang.php
<div class="halaman">
<h2>Tentang Kami</h2>
<p>Ini adalah halaman tentang kami</p>
<p>Malasngoding.com adalah situs yang menyediakan konten-konten berkualitas untuk belajar pemrograman web</p>
</div>
tutorial.php
<div class="halaman">
<h2>Halaman Tutorial</h2>
<p>Ini adalah halaman tutorial</p>
</div>
       6.      Selesai.. :D
  7.      Kita lihat hasil dari halaman dinamis yang telah kita buat dengan php. Sekarang akses project dinamis_php yang telah kita buat di browser. ( localhost/dinamis_php )

dan hasilnya :

Ketika di Klik Menu Home
Ketika di Klik Menu Tentang

Ketika di Klik Menu Tutorial



Referensi : http://www.malasngoding.com/membuat-halaman-web-dinamis-dengan-php/ 

3 komentar:

  1. Rangga041112 Oktober 2019 pukul 13.01

    ini copas dari malasngoding ya?

    BalasHapus
  2. Tri utami7 Mei 2020 pukul 20.22

    Terimakasih kak ,webnya sangat membantu saya dalam pembelajaran saya di kampus. Nama saya Tri Utami nim:1922500071 kelompok:SI2J ini link kampus saya : https://www.atmaluhur.ac.id/

    BalasHapus
  3. Arvina8 Mei 2020 pukul 21.30

    Hiii kak. Terimakasih kak artikel nya sangat membantu sekali untuk saya mengerjakan tugas kuliah, terus berkarya dan sukses selalu kak. Perkenalkan saya,
    Nama : Arvina Destiyani
    Nim. : 1922500073
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus