Codeigniter 4| PART 5: Views-Bag-2 , Konsep Layout dan Memecah Layout ke Dalam Template

Baringin
By -Baringin
November 16, 2023
0


 Pendahuluan

    Oke, kali ini kita akan membahas materi tentang cara memecah layout menjadi beberapa bagian. Sebelumnya kita telah belajar cara membuat halaman Views. Bagi anda yang mengikuti materi ini disarankan untuk mengikuti materi sebelumnya. Silahkan kunjungi kembali halaman sebelumnya. Anda dapat klik disini. 

    Dalam materi tersebut terdapat desain halaman website. Nah desain tersebut yang akan kita pecah menjadi beberapa bagian. Namun materi ini masih seputar Views. Oke. Marik kita lanjut.


Konsep Layout Website

    Sebelum kita lanjut, alah lebih baik kita mengenal terlebih dahulu tentang konsep perancangan layout halaman webstie. Ada beberapa unsur yang terdapat di Layout sebuah halaman website, yaitu:

Header

    Header adalah layout designer yang berisi informasi secara global tentang website. Di header dapat diletakkan logo, nama website, alamat, gambar dan lain sebagainya.

Navigasi

    Navigasi dapat dipahami sebagai panduan. Di website, navigasi berkaitan denan menu-menu. Menu tersebut bisa muncul pada bagian atas header atau bawah header. 

Konten

    Elemen body atau konten yang biasanya diisi dengan informasi utama dari halaman website tersebut. 

Sidebar

    Sidebar merupakan elemen pendukung di dalam perancangan website. Namun pada beberapa website kita sudah jarang menemukan elemen ini. Sidebar banyak ditemukan pada  artikel, yang kemudian akan diisi dengan informasi yang berhubungan dengan artikel tersebut.


Footer

    Di footer biasa di gunakan untuk brand dari webiste. pada perkembangannya footer  di desain  dengan membagi menjadi 2-4 bagian. Bagian pertama yaitu logo dan penjelasan singkat tentang website. Bagian kedua, informasi kontak. Bagian ketiga diisi dengan ikon jejaring sosial. Dan, bagian keempat, diisi dengan tambahan navigasi situs.

    Nah, berikut bentuk Layout dari sebuah halaman Website standar 



Berdasarkan layout tersebut kita dapat merancang halaman website seperti berikut:



Inplementasi Desain Layout Ke HTML

    Langkah selanjutnya kita akan mencoba memecah layout menjadi beberapa bagian. Silahkan buka projek kita, cari folder app=> Views. Tambahkan 3 file lagi, yaitu, "v_profil.php, v_galery.php, v_kontak.php" dan tambahkan 2 folder lagi, yaitu folder "Layout" dan "Templates". Di folder Layout buat file "layout.php" dan di folder Templates buat 4 buah file "header.php, navbar.php, sidebar.php dan footer.php". Berikut directorynya:


📂App
    ðŸ“‚Views
        ðŸ“‚Layout
            ðŸ“ƒlayout.php
        ðŸ“‚Templates
            ðŸ“ƒheader.php
            ðŸ“ƒnavbar.php
            ðŸ“ƒsidebar.php
            ðŸ“ƒfooter.php
        ðŸ“ƒv_home.php
        ðŸ“ƒv_profil.php
        ðŸ“ƒv_galery.php
        ðŸ“ƒv_kontak.php

Mari kita isi masing-masing file tersebut:

layout.php

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

<head>
    <title>Document</title>
    <link rel="stylesheet" href="<?= base_url('css/style.css') ?>">
</head>

<body>
    <?php
    echo $this->include('Templates/header.php');
    echo $this->include('Templates/navbar.php');
    echo $this->include('Templates/sidebar.php');
    echo $this->renderSection('content');
    echo $this->include('Templates/footer.php');
    ?>
</body>
</html>

    perintaha $this->include('Templates/...') merupakan perintah untuk memanggil tiap bagian dari file yang ada di dalam folder Templates. Sedangkan perintah $this->renderSection('content') adalah perintah untuk menampilkan halaman sesuai dengan isi dari konten yang dibuat. kata 'content' merupakan variabel sebagai ganti dari file yang akan dibuka nantinya.

Header.php

<div class="header">
    <h1>BARINTEK</h1>
    <label for="">Berbagi Informasi dan Teknologi</label>
</div>

navbar.php

<div class="nav">
    <ul>
        <li><a href="<?= base_url() ?>">Beranda</a></li>
        <li><a href="<?= base_url('profil') ?>">Profil</a></li>
        <li><a href="<?= base_url('galery') ?>">Galery</a></li>
        <li><a href="<?= base_url('kontak') ?>">Kontak</a></li>
    </ul>
</div>


Sidebar.php

<div class="sidebar">
    <h4>News Article</h4>
    <ul>
        <li>Artikel pertama</li>
        <li>Artikel kedua</li>
        <li>Artikel ketiga</li>
        <li>Artikel keempat</li>
    </ul>
</div>

footer.php

<div class="footer">
    copyright &copy; barintek.blogspot.com
</div>


Mengelola Konten

    Anda ingat terdapat text 'content' tadi? nah sekarang mari kita mengelola konten tersebut. Di sini kita sudah memiliki beberapa konten.

v_home.php

<?php
$this->extend('Layout/layout');
$this->section('content');
?>
<div class="konten">
    <h1>Beranda</h1>
</div>
<? $this->endSection();

v_profil.php

<?php
$this->extend('Layout/layout');
$this->section('content');
?>
<div class="konten">
    <h1>My Profil</h1>
</div>
<? $this->endSection();

v_galery.php

<?php
$this->extend('Layout/layout');
$this->section('content');
?>
<div class="konten">
    <h1>Galery</h1>
</div>
<? $this->endSection();

v_kontak.php

<?php
$this->extend('Layout/layout');
$this->section('content');
?>
<div class="konten">
    <h1>Kontak Person</h1>
</div>
<? $this->endSection();


    perintah $this->extend('Layout/layout') merupakan perintah untuk menjalankan layout.php terlebih dahulu. Dari layout tersebut akan meng extrak konten sesuai dengan Routes yang di minta.

    Selanjutnya percantik tampilan web dengan membuat file css. File css terdapat di dalam folder public. Jika anda belum memilikinya anda dapat membuatnya. Buka foder public di projek anda, buat folder baru dengan nama Css dan tambahkan satu file di dalam folder css. Beri nama file tersebut dengan nama "style.css".

📂Public
        ðŸ“‚Css
            ðŸ“ƒstyle.css

    Ketikkan sintak di dalam file tersebut. Berikut sintaknya:

/* Mengatur Header */
.header{
    background-color: rgb(80, 57, 27);
    color: white;
    text-align: center;
}
.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #731717;
}
.nav li {
float: left;
}
.nav li a,
.dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover,
    .dropdown:hover .dropbtn {
    background-color: #c85250;
    transition: all 0.5s ease;
}
/* Mengatur sidebar */
.sidebar{
    width: 300px;
    background-color: aquamarine;
    float: left;
    height: 400px;
}
/* Mengatur Konten */
.konten{
    padding: 10px;
    height: 400px;
}
/* Mengatur footer */
.footer{
    background-color: black;
    color: white;
    text-align: center;
}

    

    Buka file Routers.php yang ada di dalam folder App->Config dan tambahkan baris perintah berikut:

<?php

use CodeIgniter\Router\RouteCollection;

/**
 * @var RouteCollection $routes
 */
$routes->get('/', 'Home::index');
$routes->get('/profil', 'Home::profil');
$routes->get('/galery', 'Home::galery');
$routes->get('/kontak', 'Home::kontak');

    

    Buka App->Controller->Home.php dan tambah sintak seperti berikut:

<?php

namespace App\Controllers;
class Home extends BaseController
{
    public function index(){
        return view('v_home');
    }
    public function profil(){
        return view('v_profil');
    }
    public function galery(){
        return view('v_galery');
    }
    public function kontak(){
        return view('v_kontak');
    }
}

   Perhatikan, nama fungsi harus sama dengan nama variabel yang dikirim di routes tadi.

 Nah sekarang jalankan Website anda .


Penutup

    Itulah sedikit penjelasan tentang tata cara memecah halaman website menjadi beberapa bagian agar terlihat interaktif. Terimakasih.

Tags:
Baringin

Baringin

Baringin|Beringin merupakan sejenis pohon yang tumbuh di iklim tropis. Beringin memiliki pohon yang besar dengan akar yang kuat dan dahan yang kokoh. Daunnya lebat dan memiliki akar-akar yang menjuntai di dahannya. Filsafah Beringin adalah: Akar tempat duduk, Pohon tempat bersandar dan dahan tempat bernaung. Dibangunnya blog ini diharapkan bisa melengkapi pengetahun pembaca

    You Might Like

    Show more
    Codeigniter

    Post a Comment

    0Comments

    Post a Comment (0)
    Share to other apps
    Copy Post Link