Membuat Web Dinamis Satu Template

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas tentang Membuat web dinamis satu template. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halaman kursus.

Materi Pendukung

Untuk belajar membuat web dinamis satu template ini. Baiknya kamu sudah memahami materi berikut. Atau mulai memahami saat ini.

  • Membuat hyperlink
  • Mengirim data lewat url.
  • Membuat atau menggunakan relative url
  • Kondisi (if-else atau select-case)
  • Include pada php.
  • file index

Hyperlink digunakan untuk memanggil menu-menu pada halaman web. Bahkan ada cara untuk mengirimkan data bersamaan dengan link. Data tersebut kemudian diambil dengan php. Dimana isi data tersebut menentukan isi halaman yang harus di include. Link tersebut tidak pernah memanggil file selain index.php. File bernama index berati file tersebut otomatis dibuka ketika folder diakses. Untuk lebih jelasnya langsung saja kita mulai.

Membuat web dinamis satu template

Agar lebih cepat membuat tampilan, maka kita akan menggunakan css dari bootstrap.

Struktur folder

Membuat file index.php

Setelah kamu tahu struktur foldernya mari kita buat file nya. Yang pertama dibuat adalah file index.php

<!-- index.php-->
<html>
  <head>
    <title>Web Pertamaku</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row d-flex justify-content-center">
        <div class="col-md-6">
          <h3 class="text-center">Web Pertamaku</h3>
          <p class="text-center">Belajar Web Medan</p>
        </div>
      </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="https://belajarwebmedan.com">Webku</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.php?halaman=home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="index.php?halaman=about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="index.php?halaman=contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container-fluid h-75">
      <div class="row d-flex justify-content-center">
        <?php
          if (!empty($_GET['halaman'])) {
            if ($_GET['halaman']=='home') {
              include "home/home.php";
            }
            else if ($_GET['halaman']=='about') {
              include "about/about.php";
            }
            else if ($_GET['halaman']=='contact') {
              include "contact/contact.php";
            }else{
              echo "Halaman Tidak Ditemukan";
            }
          }else{
            include "home/home.php";
          }
        ?>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row d-flex justify-content-center bg-dark text-light">
        <div class="col-md-12">
          <p class="text-center">&copy;Belajar Web Medan 2021</p>
        </div>
      </div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  </body>
</html>

Penjelasan

  • <a class=”nav-link active” aria-current=”page” href=”index.php?halaman=home”>home</a>
    ini adalah link ke halaman index.php dengan membawa variabel GET bernama halaman. Variabel tersebut isinya home.
  • $_GET[‘halaman’]
    php mengambil nilai variabel halaman.
  • <?php sampai ?>
    Jika variabel halaman kosong maka include home.php.
    Masuk kedalam kodisi diatas atau jika variabel halaman tidak kosong. Jika variabel halaman sama dengan home. Maka include home.php. Selain itu jika variabel halaman sama dengan about maka include about.php. Selain itu jika variabel halaman sama dengan contact. Maka include contact.php. Selain dari pada itu semua, tampilkan halaman tidak ditemukan.

Membuat file home.php

Selain dari file index.php adalah file isi. file ini akan di include kan kedalam file index.php.

<div class="col-md-10">
  <h3>Selamat Datang di Webku</h3>
  <p>Halaman ini menampilkan informasi utama. Halaman home adalah halaman yang pertama kali dibuka oleh pengunjung web.</p>
</div>

Membuat file about.php

file about.php juga file yang akan di sisipkan kedalam file index.php.

<div class="col-md-10">
  <h3>Halaman About</h3>
  <p>Ini adalah web dinamis pertama saya.</p>
</div>

Membuat file contact.php

Sama seperti file-file lain di atas. file contact ini juga akan di sisipkan ke dalam file index.php

<div class="col-md-10">
  <h3>Halaman Contact</h3>
  <p>WA: xxxx xxxx xxxx</p>
</div>

Tampilan Kode program

Setelah program dijalankan maka ada 4 halaman yang bisa ditampilkan.

Tampilan Halaman Home

Halaman ini sebagai halaman default atau ketika menu home di klik.

Tampilan menu atau link home
Tampilan menu atau link home

Tampilan halaman About

Halaman ini tampil jika menu about di klik.

Tampilan halaman About

Tampilan Halaman Contact

Halaman contact akan tampil ketika menu contact di klik.

Tampilan Halaman Contact

Halaman Tidak ditemukan

Halaman ini munjul jika pengguna mengganti nilai varibel halaman sendiri.

Halaman Tidak ditemukan

Kesimpulan

Dari empat tampilan tersebut file yang dipanggil hanya satu. yaitu file index.php. Dengan template yang konsisten berarti kita membuat antarmuka atau tampilan yang baik untuk pengguna.

Penutup

Terima Kasih sudah membaca artikel ini. Jika artikel ini membantu kamu. Silahkan tinggalkan komentar positif. Komentar positif kamu adalah motivasi bagi penulis dalam membuat artikel. Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.

Kategori: PHP

0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *