Seputar Pemrograman

Memanfaatkan Blade Templating Laravel Untuk Memadukan Template Bootstrap

  15 September 2014     Tutorial Framework Laravel     seputarpemrograman

Di Tahap atau tutorial ini kita akan mempelajari blade dan cara memanfaatkannya. Blade adalah template engine yang disediakan oleh framework laravel atau bawaan dari framework laravel. Blade adalah konversi dari bahasa pemrograman PHP ke Blade itu sendiri agar lebih mudah dipahami dan lebih singkat. Kenapa kita harus menggunakan Blade ? Karena dengan menggunakan blade dalam mengatur layout web yang kita bangun akan lebih mudah. Mudah disini jika anda sudah mengetahui dasar – dasar blade itu sendiri.

Dasar - Dasar Blade

1. Menampilkan Data ( echo )

Nama Saya : {{{ $nama  }}}

Jika Menggunakan PHP Identik dengan

Nama Saya : < ?php echo $nama;  ?>

Anda juga bisa menggunakan fungsi dibawah ini

Nama Saya : {{ $nama  }}

Code diatas bedanya dengan sebelumnya adalah kalau yang diatas ini menggunakan dua kurung kurawal itu tanpa adanya escape html.

2. Menampilkan Data Setelah dilakukan Pengecekan

Fungsi ini bermanfaat ketika kita ingin cek variabel ditemukan atau tidak. Jika ditemukan maka menampilkan variabel itu sendiri jika tidak akan menampilkan variabel dafualtnya. Lebih jelasnya lihat dibawah ini.

{{{ isset($name) ? $name : 'Default' }}}

Atau bisa mnggunakan code dibawah ini lebih simple.

{{{ $name or 'Default' }}}

3. Menampilkan Raw Text dengan Curly Braces

Untuk menampilkan text raw dalam blade kita bisa menggunakan tanda @{{ … }} seperti dibawah ini.

@{{ Kalimat yang ingin ditampilkan }}

4. Menggunakan Statemen (If Endif, If Else Endif)

Untuk menggunakan statemen if di blade caranya dibawah ini.

@if ('A'==='A')
    @{{ Betul ini adalah A }}
@endif

Cara menggunakan If Else di blade

@if ('A'==='A')
    @{{ Betul ini adalah A }}
@else
    @{{ Ini Bukan A }}
@endif

Menggunakan If  Elseif

@if ('A'==='A')
    @{{ Betul ini adalah A }}
@elseif ('B'==='B' )
    @{{ Betul ini adalah B }}
@else
    @{{ Ini Bukan A dan B }}
@endif

5. Menggunakan Perulangan (For, Foreach, While)

Fungsi Menggunakan For maupun Foreach di blade

For

@for ($i = 0; $i < 10; $i++)
    {{$i}}
@endfor

Foreach

@foreach ($users as $user) 
    ID user {{ $user->id }}
@endforeach

While

@while (true)
    I'm looping forever.
@endwhile

6. Include Sub View

@include('nama view')

Nama view tanpa  .balde.php

7. Memberikan Komentar

Untuk memberikan komentar pada blade caranya berikut ini

{{-- Dengan begini kalimat ini tidak tampil --}}

 

Memadukan Blade Dengan Template Bootstrap

Tutorial diatas adalah dasar – dasar blade jika sudah paham kita akan belajar membuat template sederhana dari bootstrap dengan memanfaatkan blade templating. Secara sederhana untuk kerangka membuat layout dengan balde dan membagi menjadi bagian kecil seperti gambar dibawah ini.

 Contoh Kerangka Blade Laravel 

Untuk persiapan membuat templating sederhana menggunakan laravel ini, berikut yang perlu dipersiapkan :

  1. Download template bootstrapnya disini sb-admin
  2. Buka projectlaravel yang sudah dibahas pada tutorial sebelumnya lalu tambahkan folder layouts dan includes didalam folder views.
  3. Dari hasil download template boostrap diatas saya bagi menjadi beberapa bagian header, sidebar dan content. Untuk pembagian sebenarnya terserah sesaui keinginan anda, bisa anda bagi lagi menjadi bagian yang lebih kecil. Buatlah file didalam folder layouts dengan nama master.blade.php dan didalam folder includes buat file bernama header.blade.php dan sidebar.blade.php.

Pada tahap pertama didalam folder sb-admin hasil template download bootstrap, copy folder css, js, font awesome dan folder font, lihat gambar dibawah ini.

Assets Bootstrap

Folder diatas pindahkan ke folder assets didalam folder public poject anda, kalau ditutorial ini projectlaravel. Jika belum ada folder assets buat dahulu. Jika sudah buka file bernama blank-page.html di folder template boostrap, copy semua code paste ke file master.blade.php.

Lalu di file master.blade.php cari code dibawah ini :

 

< link href ="css/bootstrap.min.css" rel ="stylesheet">
< link href ="css/sb-admin.css" rel ="stylesheet">
< link href ="font-awesome-4.1.0/css/font-awesome.min.css" rel ="stylesheet" type="text/css">

//Untuk spasi diantara tanda < dan link silahkan dihapus

Ganti menjadi seperti ini

{{ HTML::style('assets/css/bootstrap.min.css') }}
{{ HTML::style('assets/css/sb-admin.css') }}
{{ HTML::style('assets/font-awesome-4.1.0/css/font-awesome.min.css') }}

Dan code paling bawah sendiri :

< script src="js/jquery-1.11.0.js">
< script src="js/bootstrap.min.js">

//Untuk spasi diantara tanda < dan script silahkan dihapus

Ganti menjadi seperti ini

{{ HTML::script('assets/js/jquery-1.11.0.js') }} 
{{ HTML::script('asstes/js/bootstrap.min.js') }}

Selanjutnya code di master.blade.php kita bagi atau pecah beberapa bagian yaitu header, sidebar dan content. Pertamakali kita ambil code untuk header. Ambil atau cut code di master.blade.php diantara tanda <! -- Brand and toggle get grouped for better mobile display --> sampai tanda <! -- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> dan paste ke header.blade.php. Jadi di file header.blade.php ada sekitar kurang lebih 113 bari code. Di dalam file master.blade.php yang codenya kita ambil atau pindahkan tadi ganti code seperti dibawah ini.

@include('includes.header')

Jadi akan Nampak seperti ini di master.blade.php

Tampilan code include header blade

Sekarang masih di master.blade.php kali ini kita akan mengambil code untuk sidebar.blade.php. ambil code diantara <! -- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> sampai dengan  <! -- /.navbar-collapse --> paste atau taruh dalam file sidebar.blade.php. tempat code yang baru kita ambil silahkan ditambahkan code berikut ini.

@include('includes.sidebar')

Harusnya tampilan code di master.blade.php anda nampak seperti gambar dibawah ini.

tampilan code sibedar blade

Untuk selanjutnya yaitu cari di folder views file yang bernama profile.php lalu rubah namanya / rename menjadi profile.blade.php. Kemudian isi file itu ganti dengan code dibawah ini.

@extends('layouts.master')
@section('content')
< div class="row">
    < div class="col-lg-12">
        < h1 class="page-header">
            Halaman 
            < small>Profile< /small>
        < /h1>
	Profile ID / Nama : {{{ $id }}} / {{{ $nama }}}        
    < /div>
< /div>
@stop

//Untuk spasi diantara tanda < dan div, /div, h1 ,/h1 ,small, /small silahkan dihapus

Kembali buka master.blade.php diantara < !-- Page Heading --> sampai dengan < !-- /.row --> code didalamnya silahkan dihapus dan diganti dengan code berikut.

@yield('content')

Sehingga di master.blade.php menjadi seperti gambar ini.

 tampilan code yield content

Dari sini kita sudah bisa melihat hasil kerja kita. Ketika url di browser anda seperti ini.

http://localhost/projectlaravel/public/profile/1/Andri

Maka hasilnya seperti ini

tampilan hasil templating blade 

Sekarang kita rubah sedikit didalam file controller yang bernama ProfileController.php. Silahkan dirubah atau diganti menjadi seperti ini.

< ?php
class ProfileController extends BaseController {
 
            public function index()
            {
                        return View::make('home');
            }

            public function profile($nama)
            {
                        $data =
                        [
                            'nama' => $nama
                        ];
                        return View::make('profile',$data);
            }

}

//Untuk spasi diantara tanda < dan ?php silahkan dihapus

Kemudian buka file profile.blade.php yang berada dalam folder views. Rubah atau ganti code dibawah ini.

Profile ID / Nama : {{{ $id }}} / {{{ $nama }}}

Menjadi seperti ini

Nama : {{{ $nama }}}

Jika sudah selesai buat file bernama home.blade.php dan tempatkan di dalam folder views, lalu isi dengan code berikut ini.

@extends('layouts.master')
@section('content')
< div class="row">
    < div class="col-lg-12">
        < h1 class="page-header">
            Halaman 
            < small>Beranda< /small>
        < /h1>
	Ini Halaman Home / Beranda      
    < /div>
< /div>
@stop

//Untuk spasi diantara tanda < dan div, /div, h1, /h1, small, /small silahkan dihapus

Untuk selanjutnya buka file sidebar.blade.php didalam folder includes. Dan ganti code menjadi seperti dibawah ini.

< div class="collapse navbar-collapse navbar-ex1-collapse">
                < ul class="nav navbar-nav side-nav">
                    < li>
                        < a href="{{ URL::to('/') }}">< i class="fa fa-fw fa-dashboard">< /i> Home< /a>
                    < /li>
                    < li>
                        < a href="{{ URL::to('profile/Andri') }}">< i class="fa fa-fw fa-user">< /i> Profile< /a>
                    < /li>
                < /ul>
< /div>

//Untuk spasi diantara tanda < dan div, /div, ul, /ul, li, /li, a, /a, i, i/ silahkan dihapus

Silahkan dicoba dijalankan dengan mengetikan url seperti ini

http://localhost/projectlaravel/public/

http://localhost/projectlaravel/public/profile/Andri

Sekarang menu sidebar sudah berfungsi silahkan dicoba

tampilan home blade laravel 

tampilan profile blade laravel

Catatan : untuk tutorial blade templating ini masih sangat sederhana jadi silahkan dikembangkan lagi sesuai keinginan anda. Jika anda tidak mengikuti tutorial sebelumnya dari install, routing, controller dan view jika anda masih bingung saya sarankan untuk mempelajarinya juga atau mempelajari ulang.


comments powered by Disqus

CARI

KATEGORI PEMROGRAMAN

PEMROGRAMAN Terpopuler

PEMROGRAMAN ACAK