Membuat web dinamis dengan html

By Unknown September 03, 2017 6 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.

Membuat web dinamis dengan html

Membuat web dinamis dengan html
Membuat web dinamis dengan html

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>

            <h2 class="judul">Tutorial Web Dinamis (Wildan)</h2>

            <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 h2.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

Membuat web dinamis dengan html

Ketika di Klik Menu Tentang

Membuat web dinamis dengan html

Ketika di Klik Menu Tutorial

Membuat web dinamis dengan html

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

Apa contoh dari web dinamis?

Contoh dari web dinamis adalah portal berita dan jejaring sosial. Isinya sering diperbaharui (di-update) oleh pemilik atau penggunanya.

Kenapa dengan menggunakan PHP dapat membuat website menjadi dinamis?

Membuat web dinamis sering kali dilakukan menggunakan bahasa pemrograman PHP. Hal ini disebabkan PHP memiliki banyak ragam tipe file yang memudahkan saat melakukan coding. Dengan PHP, web dinamis sederhana dapat dibuat dengan code-code singkat, simpel dan menjadikan pekerjaan Anda lebih efektif.

Apa yang dimaksud dengan web Dinamis?

Web dinamis merupakan sebuah website yang memungkinkan penggunanya untuk berinteraksi secara langsung, dalam artian pengguna dapat menambah, memodifikasi, ataupun menghapus konten di dalam sebuah web tanpa harus membuka struktur kode dari web tersebut.

Apakah ciri ciri dari website dinamis?

Sedangkan website dinamis adalah jenis web yang disusun dengan konten dan layout yang dilengkapi dengan informasi di dalamnya. Sesuai namanya, konten dalam website ini dapat berubah-ubah karena terdapat program yang berfungsi untuk mengatur perubahan data yang ditampilkan dalam website tersebut.