Tutorial Pemrograman PHP Part #7: Template dan styling pada PHP

Pada Tutorial part #6 sebelumya kita telah mempelajari bagaimana cara berpindah halaman dan mengirim sebuah variabel pada pemrograman PHP.

Pada Tutorial part #7 ini kita akan coba untuk membuat template sederhana pada php dan memberikan style pada temppalte yang sudah kita buat.

untuk style css nya disini kita menggunakan framwork css dari boostrap. untuk documentasi lengkapnya bisa di lihat pada situs resminya pada link berikut. https://getbootstrap.com/.

disini kita akan membahas sekilas tentang bagaimana cara menggunakan framework style css dari boostrap ini. yang sangat membantu kita dalam membuat sebuah tampilan websites yang lebih rapih dan css style boostrap ini sudah mendukung responsive screen. atau tampilan website yang akan kita buat akan otomastis menyeseuaikan ukuran layar dari user yang mengunjingi website kita.

langsung saja kita lanjut ketutorial nya. disini kita masi menggunakan project yang sama pada tutorial part #5 seblumnya. cuman ada sedikit perubahan agar kita tidak perlu menulis ulang koding yang sudah kita buat.

1.Buka project Sebelumnya.

buat dua folder baru untuk mengelompokan file yang akan kita buat. buat folder

 config : untuk menyimpan file fungsi template route

 view : untuk menyimpan file view dari masing" halaman

 Notes - letakan semua folder dari tutorial sebelumnya kedalam folder view yang baru kita buat

2. Download Frame Work Boostrap.

selanjutnya kita download framework css boostrapnya pada link berikut ini

https://getbootstrap.com/docs/5/getting-started/download/. pada saat tutorial ini di buat kita telah menggunakan frame work boostrap versi 5.0

setelah download selesai, extra file nya . dan copi folder css dan js ke dalam directori project kita

assets/..patekan disini

sehingga pada folder project kita jadi seperti gambar berikut.

Copy kedalam directory Project

3. Membuat menu Navigasi

pada folder View buat sebuah folder baru dengan nama navigation. folder ini digunakan untuk menyimpan file dari menu navigasi yang akan kita gunakan. kemudian buat file baru dengan nama Menu.php

Menu.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">MY_tutorial</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="index.php?pages=home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="index.php?pages=about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="index.php?pages=profile">Profile</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Penjelasan Coding:

pada line 10,13,16 : kita melakukan pegiriman variabel pages?

 (href="index.php?pages=home")

yang mana variabel pages ini lah yang akan menentukan page apa yang akan di tampilkan ketika menu di click. 

file menu.php ini akan kita panggil pada file index.php

4. Membuat fungsi route Halaman

Kemudian pada folder config buat sebuah file baru dengan nama route.php. dan untuk isi dari file route.php nya tulikan coding berikut ini.

route,php

<?php

if (isset($_GET['pages'])) {
    $view = $_GET['pages'];

    switch ($view) {
        case 'home':
            include('./View/page/Home.php');
            break;
        case 'about':
            include('./View/page/About.php');
            break;
        case 'profile':
            include('./View/page/Profile.php');
            break;
        default:
            echo "Maaf... Halaman Tidak DI temukan";
            break;
    }
} else {
    include('./View/page/Home.php');
}

Penjelasan Coding:

include('lokasi file'); : merupakan sebuah fungsi dari php yang mana perinta ini berarti kita akan menyisipkan file lain kedalam file yang terdapat fungsi include ini.

 file route ini berfungsi sebagai router yang bertugas untuk menampilkan halaman mana yang akan di   tampilkan pada saat user memilih menu.

 

 Router simpel pada tutorial ini kita menggunakan methods $_GET['pages'] yang berarti file rute ini   menerima variabel pages yang di kirim dari file menu.php. kemudia kita tentukan nilai dari pages. jika   sesuai makan halamnan atau fungsi apa yang akan di lakukan dengan methods  switch case.

 file route ini juga akan kita panggil pada file inde.php

6. Buat Page Home, About, Profile

kemudian pada file view buat folder baru dengan nama page

dan buat file baru berikut ini. 

Home.php

<div class="container">
    <h5 class="card-title">Home</h5>
    <p class="card-text">Selamat datang di Halaman Utama</p>
</div>

About,php

<div class="container">
    <h5 class="card-title">About</h5>
    <p class="card-text">Tutrial programming PHP bahasa indonsia by Akscoding.con</p>
</div>

Profile.php

<div class="container">
    <h5 class="card-title">Profile</h5>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley
        of type and scrambled it to make a type specimen book. It has survived
        not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the
        release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <a href="https://www.akscoding.com/" class="btn btn-primary">Aks Coding</a>
</div>

7. Pemanggilan file css dan js boostrap

finalisasi akhir kita. kita perlu merubah file index.php nya. seperti coding berikut ini.

Index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>php-Tutorial</title>

    <!-- style bostrap v 5.0.2 -->
    <link href="./assets/css/bootstrap.css" rel="stylesheet">
    <link href="./assets/css/bootstrap.min.css" rel="stylesheet">
    <script src="./assets/js/bootstrap.min.js"></script>

</head>

<body>

    <!-- component menu -->
    <header>
        <?php include('./View/navigation/Menu.php'); ?>
    </header>

    <!-- component content main -->
    <div class="card-body">
        <?php include('./config/route.php'); ?>
    </div>

</body>

</html>

Penjelasan Koding:

pada line 11-13 : pemanggilan style css dan script js dari framework boostrap.

pada line 21: pemanggilan file menu.php

pada line 26: pemanggilan file route.php yang berdungsi sebagai route templating.

kedian save dan jalankan jika berhasil maka hasil akhir dari program yang kita buat seperti gambar berikut ini.

Hasil Akhir Templating dan Style dengan Boostrap

sampai disini kita telah berhasil membuat tempale sederhana dan style pada php. untuk kedapannya bisa dikembangkan lebih lanjut lagi

untuk lebih memahami lagi tentang bahasa pemrograman PHP akan kita bahas pada tutorial berikut nya.

Part #8: Comming Soon

Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..

Sekian Dan Terima kasih...

#Happy Coding

Incoming search terms:

• Belajar PHP dan Mysql
• Tutorial Bahasa Pemrograman PHP
• Tutorial PHP Untuk Pemula
• Tutorial PHP dan Mysql Bahas Indonesia
• Tutorial Belajar PHP dan Mysql 
• Berpindah Halam Di PHP
• Mengirim varibel beda halaman di php
• redirect halaman di PHP
• Method GET di PHP
• Style PHP
• cara pasang boostrap di PHP
• Tempalte PHP
• PHP web Dinamis
• membuat web dinamis di PHP

Share this post