Rabu, 29 Juni 2016

Home » » Tutorial Membuat Halaman Dinamis dengan PHP

Tutorial Membuat Halaman Dinamis dengan PHP

By  6/29/2016 09:02:00 PM  No comments
Tutorial Membuat Halaman Dinamis dengan PHP

Assalamu alaikum wr. wb. Kali ini saya akan membagikan tutorial membuat halaman dinamis dengan PHP. Halaman dinamis maksudnya halaman di-load pada bagian tertentu tanpa me-load seluruh halaman. Biasanya teknik ini diterapkan pada bagian konten suatu halaman web. Teknik ini menggunakan prinsip modularitas jadi aplikasi web dipecah menjadi bagian-bagian kecil (modul-modul). Sehingga kita hanya perlu me-load modul-modul yang diperlukan tanpa harus mengcopas code-code yang sama pada file lainnya. Keuntungan dari teknik ini memudahkan dalam maintenance aplikasi tanpa mengubah keseluruhan aplikasi. Kita langsung saja mempraktekannya.
  1. Pastikan komputer anda terinstal web server (XAMPP, WAMP, LAMP, dsb). Siapkan text editor kesayangan anda.
  2. Buka text editor kalian dan buat file index.php. 
       
  <html>
<head>
    <title>Membuat Halaman Dinamis dengan PHP</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        body{
            background-color: rgba(208, 174, 19, 1);
        }
        #wrapper{
            width: auto;
            height: auto;
            /*position: absolute;*/
            background-color: rgba(208, 174, 19, 1);
        }
        #header{
            width: 900px;
            background-color: rgba(208, 20, 15, 1);
            height: 100px;
            margin: 20px 0 0 170px;
            padding-top: 10px;

        }
        #logo h1, h3{
            color: white;
            display: inline;
        }
        #logo{
            margin: 20px 0 0 20px;

        }
        #menu{
            width: 900px;
            background-color: rgba(117, 208, 72, 1);
            height: 30px;
            margin: 10px 0 0 170px;
        }
        #menu ol li{
            display: inline;
            padding: 0 30px 10px 30px;
            float: left;
        }
        #menu ol li a{

            position: relative;
            top: 5px;
            text-decoration: none;
        }
        #menu ol li:hover {
            background-color: yellow;
        }
        #menu ol li:hover a{
            color: red;

        }

        #konten{
            width: 900px;
            border: 1px dashed black;
            background-color: aliceblue;
            height: 490px;
            margin: 10px 0 0 170px;

        }
        #body-konten{
            padding: 10px;
        }


    </style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="logo"><h1>KodeBadai</h1><h3>.blogspot.com</h3></div>
    </div>
    <div id="menu">
        <ol>
            <li><a href="?p=home">Home</a></li>
            <li><a href="?p=artikel">Artikel</a></li>
            <li><a href="?p=profil">Profil</a></li>
            <li><a href="?p=about">About</a></li>
        </ol>
    </div>
    <div id="konten">
        <div id="body-konten">
            <?php
//            jika diset variabel p di url
            if(isset($_GET['p'])){
                //jika benar, cek apakah itu file php
                if(file_exists($_GET['p'].'.php')){
                    //jika benar, panggil file
                    include $_GET['p'].'.php';
                }else{
                    //jika tidak, akan tampil peringatan
                    echo "File Tidak Ditemukan";
                }
            }else{
                //jika tidak diset variabel p di url, otomatis memanggil file home.php
                include 'home.php';
            }
            ?>
        </div>
    </div>
</div>
</body>
</html>
  3. Buat file home.php. 
       
  <h1>Selamat Datang di Home</h1>
  4. Buat file artikel.php. 
       
  <h1>Ini halaman Artikel</h1>
  5. Buat file about.php. 
       
  <h1>Ini halaman About</h1>
  6. Buat file profil.php. 
       
  <h1>Ini halaman Profil</h1>
  7. Setelah itu, jalankan di localhost kalian. Good Luck.
Sekian tutorial kali, semoga artikel ini bermanfaat bagi kalian. Sourcecode dapat didownload disini.

0 komentar:

Posting Komentar