Sistem Templating Blade Pada Framework Laravel

on

Blade adalah template engine bawaan Laravel. Blade memiliki kode-kode yang lebih mudah untuk menghasilkan HTML. Di dalam blade, Kita dapat menuliskan perintah if else, looping array dan lain-lain.

Pada latihan kali ini, Kita akan menggunakan Bootstrap untuk membuat tampilan website Kita terlihat lebih cantik.

Bootstrap telah menyediakan banyak sekali class-class CSS dan Plugin Javascript siap pakai yang dapat membantu mempermudah Kita dalam membuat halaman website. Karena kemudahan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.


Persiapan

Download Source Bootstrap dan Jquery di situs resminya atau untuk mempersingkat pembahasan mengenai tampilan, silahkan teman-teman download file template yang sudah saya sediakan di link berikut.

Buat project laravel terlebih dahulu lewat command prompt / terminal

composer create-project --prefer-dist laravel/laravel belajar_laravel

Mulai membuat template

Untuk membuat template, persiapkan file bootstrap ke dalam folder Laravel. Copykan folder template yang sudah Kita siapkan ke dalam folder public/

Langkah selanjutnya, buat file Controller dengan nama PageController pada folder app\Http\Controllers menggunakan perintah artisan di command prompt

php artisan make:controller PageController

Selanjutnya Kita ubah isi script web.php di dalam folder routes\ menjadi seperti berikut:

?
1
2
3
4
5
Route::get('/', 'PageController@index');
 
Route::get('/about', 'PageController@about');
 
Route::get('/contact', 'PageController@contact');

Ketikkan script pada file PageController.php yang ada di dalam folder App\Http\Controllers menjadi seperti berikut:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class PageController extends Controller
{
    public function index()
    {
        return view('homepage');
    }
 
    public function about()
    {
        return view('about');
    }
 
    public function contact()
    {
        return view('contact');
    }
}

Buat file baru simpan dengan nama template.blade.php pada folder \resources\views, ketikkan script berikut :

?
1
2
3
4
@include('header')
@yield('intro-header')
@yield('main')
@include('footer')

Buat beberapa file baru dan simpan nama file blade seperti berikut:

Copykan script pada bagian atas template dan simpan dengan nama file header.blade.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
 
<head>
 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
 
<title>@yield('title')</title>
 
<!-- Bootstrap core CSS -->
<link href="{{ asset('belajar_laravel/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
 
<!-- Custom styles -->
<link href="{{ asset('belajar_laravel/css/style.css') }}" rel="stylesheet">
 
</head>
 
<body>
 
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="{{ url('/') }}">Belajar Koding</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-
 
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle
 
navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="{{ url('/') }}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="{{ url('/about') }}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="{{ url('/contact') }}">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- END : Navigation -->

 

Copykan script pada bagian bawah template dan simpan nama file dengan footer.blade.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
    <!-- Footer -->
    <footer class="py-5 bg-info">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Belajar Koding 2018</p>
      </div>
    </footer>
    <!-- END : Footer -->
 
    <!-- Bootstrap core JavaScript -->
    <script src="{{ asset('belajar_laravel/vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('belajar_laravel/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  </body>
</html>

 

Tuliskan script berikut pada file homepage.blade.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@extends('template')
@section('title', 'Belajar Koding')
 
@section('intro-header')
  <!-- Header -->
  <header class="intro-header text-white" style="background: url('{{ asset
 
('belajar_laravel/images/home-bg.jpg') }}') no-repeat bottom center;">
    <div class="container text-center">
      <h1>Belajar Koding Mulai Dari Nol</h1>
      <p class="lead">Bangun karir Kamu di bidang kreatif digital untuk menjadi seorang profesional</p>
    </div>
  </header>
  <!-- END : Header -->
@endsection
 
@section('main')
    <!-- Main -->
       <section class="main">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h2>Halaman Home</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </section>
    <!-- END : Main -->
@endsection

 

Tuliskan script berikut pada file about.blade.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@extends('template')
@section('title', 'About Us')
 
@section('intro-header')
  <!-- Header -->
  <header class="intro-header text-white" style="background: url('{{ asset
 
('belajar_laravel/images/about-bg.jpg') }}') no-repeat top center;">
    <div class="container text-center">
      <h1>About Belajar Koding</h1>
      <p class="lead">Contoh Halaman About di Belajar Koding</p>
    </div>
  </header>
  <!-- END : Header -->
@endsection
 
@section('main')
  <!-- Main -->
  <section class="main">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>Halaman About Us</h2>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- END : Main -->
@endsection

 

Tuliskan script berikut pada file contact.blade.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@extends('template')
@section('title', 'Contact Us')
 
@section('intro-header')
  <!-- Header -->
  <header class="intro-header text-white" style="background: url('{{ asset
 
('belajar_laravel/images/contact-bg.jpg') }}') no-repeat center center;">
    <div class="container text-center">
      <h1>Contact Belajar Koding</h1>
      <p class="lead">Contoh Halaman Contact Us di Belajar Koding</p>
    </div>
  </header>
  <!-- END : Header -->
@endsection
 
@section('main')
  <!-- Main -->
  <section class="main">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2>Contact Us</h2>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- END : Main -->
@endsection

Untuk melihat hasil dari template yang telah kita buat, buka halaman http://localhost:8000/ pada browser, maka akan tampil seperti gambar di bawah ini

Hasil tampilan halaman http://localhost:8000/about

Hasil tampilan halaman http://localhost:8000/contact

Sampai jumpa lagi di tutorial berikutnya..


Comments

Post a Comment