PEMULA: Membuat Template di Laravel 11 Dengan Memanfaatkan Frameword Bootstrap 5

 

Pendahuluan

    Materi ini kita akan membahas bagaimana membuat template di dalam laravel dengan memanfaatkan boostrap. Jadi sebelum lanjut di asumsikan anda sudah bisa memahami boostrap dasar agar mempermudah memahami tutorial ini. Jika belum silahkan pelajari terlebih dahulu. 

    Boostrap merupakan salah satu framework yang banyak digunakan oleh development web untuk membuat tampilan lebih menarik dan responsive. Selain framework ini  masih banyak framework yang lain. kedepannya anda tinggal menyesuaikan saja.

    Mari kita mulai.

    Pertama-tama silahkan install laravel anda. Teknik instal telah dijelaskan pada tutorial sebelumnya:

https://barintek.blogspot.com/2024/03/instal-laravel-dengan-composer.html

    Buka text editor  VsCode anda jika ada atau yang sejenis. Di director buka folder view. Folder ini ada di Resource => View dan buatlah folder baru didalam foder view dengan nama templates dan satu file dengan nama v_beranda.blade.php, V_profil.blade.php, v_kontak.blade.php. Kemudian di dalam folder templates tersebut buatlah satu folder dengan nama layout dan satu file bernama temp_layout.blade.php. Sedangkan di dalam folder layout buatlah 3 file yang terdiri dari lay_header.blade.php, lay_navbar.blade.php, footer.blade.php. Perhatikan susunan folder berikut:

📂 Resource

    📂 view

            📂 templates

                    📂 layout

                            🗋 lay_header.blade.php

                            🗋 lay_navbar.blade.php

                            🗋lay_footer.blade.php

                     🗋 temp_layout.blade.php

         🗋v_beranda.blade.php

         🗋v_profil.blade.php

         🗋v_kontak.blade.php

        Selanjutnya buka file untuk membuat routing di dalam folder Route => web.php. Sempurnakan script seperti berikut:

 

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    $data = [

        'title' => 'Beranda',

        'subTitle' => 'Beranda/Beranda'

    ];

    return view('v_beranda', $data);

});

Route::get('/profil', function () {

    $data = [

        'title' => 'Profil',

        'subTitle' => 'Beranda/Profil'

    ];

    return view('v_profil', $data);

});

Route::get('/kontak', function () {

    $data = [

        'title' => 'Kontak',

        'subTitle' => 'Beranda/Kontak'

    ];

    return view('v_kontak', $data);

});

 

    Masuk ke file v_beranda.blade.php yang telah kita buat tadi. Sekarang ketikkan script berikut:

@extends('templates.temp_layout')

@section('content')

<div class="border p-3">

    <h1>SELAMAT DATANG DI BLOG KAMI</h1>

    <a href="data_saya">Anda dapat akses kami di.</a>

    <h5><a href="https://barintek.blogspot.com" target="_blank">www.barintek.blogspot.com</a></h5>

</div>

@endsection

Sedangkan untuk v_profil.blade.php:

@extends('templates.temp_layout')

@section('content')

<div class="border p-3">

    <div class="row">

        <div class="col-3">Nama</div>

        <div class="col">Barintek</div>

    </div>

    <div class="row">

        <div class="col-3">Alamat</div>

        <div class="col">Jl. Baringin Indah N0.27 Padang Panjang</div>

    </div>

    <div class="row">

        <div class="col-3">No.Telp</div>

        <div class="col">xxxxxxxxxxx</div>

    </div>

</div>

@endsection

 

Dan tambahkan juga untuk v_kontak.blade.php

@extends('templates.temp_layout')

@section('content')

<div class="container">

    <form>

        <div class="mb-3">

            <label class="form-label">Email address</label>

            <input type="email" class="form-control">

            <div class="form-text">We'll never share your email with anyone else.</div>

        </div>

        <div class="mb-3">

            <label class="form-label">Blog</label>

            <input type="text" class="form-control">

        </div>

        <div class="mb-3">

            <label class="form-label">Pesan</label>

            <textarea name="" class="form-control"></textarea>

        </div>

        <button type="submit" class="btn btn-primary">Kirim</button>

    </form>

</div>

@endsection

 

        Mari kita desain halaman template. Buka file temp_layout.php dan ketikkan script berikut:

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Belajar Laravel | Barintek</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />

</head>

<body class=" d-flex flex-column min-vh-100">

    <!-- navbar -->

    <nav class="navbar container navbar-expand-lg bg-dark">

        <ul class="navbar-nav ">

            <li class="nav-item"><a class="nav-link text-white" href="/">Beranda</a></li>

            <li class="nav-item"><a class="nav-link text-white" href="profil">Profil</a></li>

            <li class="nav-item"><a class="nav-link text-white" href="kontak">Kontak</a></li>

        </ul>

    </nav>

    <!-- end navbar -->

    <!-- halaman main -->

    <div class="main">

        @yield('content')

    </div>

    <!-- end main -->

    <!-- footer -->

    <footer class="bg-dark text-white mt-auto">

        <div class="container">

            copyright &copf; {{ date('Y') }} Design By Barintek

        </div>

    </footer>

    <!-- end footer -->

</body>

</html>

 

    Selanjutnya jalankan terminal anda dengan cara buka terminal di toolsbar dan pilih Terminal =< new terminal dan ketikkan pada halaman terminal perintah berikut:

        php artisan serve

    Selanjutnya pada url ketikkan perintah berikut:

        http://127.0.0.1:8000/

Memecah File Templates

    Sampai disini sebenarnya projek kita sudah bisa jalan. Namun untuk meringkas program anda dapat memecah script yang ada di dalam temp_layout.blade.php menjadi 3 bagian. Bagian header, navbar dan footer. Copy script  yang ada di dalam file tersebut seperti berikut:

lay_footer.blade.php

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Belajar Laravel | Barintek</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />

</head>

<body class=" d-flex flex-column min-vh-100">

 

lay_navbar.blade.php

 

<nav class="navbar navbar-expand-lg bg-dark">

    <ul class="container navbar-nav ">

        <li class="nav-item"><a class="nav-link text-white" href="/">Beranda</a></li>

        <li class="nav-item"><a class="nav-link text-white" href="profil">Profil</a></li>

        <li class="nav-item"><a class="nav-link text-white" href="kontak">Kontak</a></li>

    </ul>

</nav>

 

lay_footer.blade.php

 

<!-- footer -->

<footer class="bg-dark text-white mt-auto">

    <div class="container">

        copyright &copf; {{ date('Y') }} Design By Barintek

    </div>

</footer>

<!-- end footer -->

</body>

</html>

 

    Kemudian pada temp_layout.blade.php jadikan script seperti berikut:

 

@include ('templates/layout/lay_header')

<!-- navbar -->

@include ('templates/layout/lay_navbar')

<!-- end navbar -->

<!-- halaman main -->

<div class="main container">

    <h1>{{ $title }}</h1>

    <h4>{{ $subTitle }}</h4>

    @yield('content')

</div>

<!-- end main -->

@include ('templates/layout/lay_footer')

 

    Jika anda jalankan program anda tidak akan terjadi perubahan apapun, karena pada konsepnya teknik ini bukan untuk merubah tampilan tapi memecah file menjadi beberapa bagian.

    Jika anda perhatikan juga terdapat perintah @include(). Perintah ini di gunakan untuk memanggil file dan menyatukan ke dalam file yang kita inginkan.