Thursday, November 9, 2017

MEMANFAATKAN TEMPLATE BLADE PADA LARAVEL


Hallo, berjumpa lagi dengan saya. Sekarang saya akan mengulas sedikit tentang template blade pada laravel. Berikut ulasannya:


Blade adalah salah satu fitur dalam laravel yang digunakan untuk menampilkan output pada view. Fitur blade ini bisa dibilang sangat canggih, karena kita dapat membuat coding tanpa perlu tag PHP (<?php ?>). Selain menampilkan output, blade juga digunakan untuk membuat layout website. Blade adalah konversi dari Bahasa pemrograman PHP ke Blade itu sendiri agar lebih mudah.

Setelah kita tau pengertian dari blade, sekarang kita harus mengetahui dulu dasar –dasar Blade agar bisa memadukan Blade dengan Template Bootstrap. Kita langsung saja ke pembahasannya.

1.      DASAR – DASAR BLADE

A.    Menampilkan Data (echo)

Nama Saya : {{{$nama}}}


Jika menggunakan PHP identic dengan

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


Kita juga bisa menggunakan fungsi dibawah ini

Nama Saya : {{$nama}}


B.     Menampilkan Data setelah dilakukan Pengecekan

Fungsi ini bermanfaat ketika proses pengecekan variabel. Jika ditemukan maka menampilkan variabel itu sendiri, jika tidak akan menampilkan vaariabel defaultnya. Lebih jelasnya lihat dibawah ini.

{{{isset($name)?$name : ‘Default’}}}

Atau bisa menggunakan code dibawah ini yang lebih simple.

{{{$name or ‘Default’}}}


C.     Menampilkan Raw Text dengan Curly Braces

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

@{{Kalimat yang ingin ditampilkan}}

D.    Menggunakan Statement (if Endif, If Else Endif)

Untuk menggunakan statement if di blade caranya seperti dibawah ini.

@if(‘A’==’A’)

@{{Betul ini adalah A}}

@endif

Cara menggunakan If Else di balde

@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

E.     Menggunakan Perulangan (For, Foreach, While)

Untuk menggunakan fungsi For maupun Foreach diblade caranya seperti dibawah ini.

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


F.      Include Sub View

@include(‘nama view’)


G.    Memberikan Komentar

Untuk memberikan komentar pada blade caranya seperti dibawah ini.

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


2.      MEMADUKAN BLADE DENGAN TEMPLATE BOOTSTRAP

Setelah kita mengetahui dasar-dasar dari template blade, selanjutnya kita akan membuat template sederhana dari bootstrap dengan memanfaatkan blade templating. Secara Sederhana kerangka nya di gambarkan sebagai berikut:

 

Untuk persiapan membuat templating sederhana menggunakan laravel ini, yang harus dipersiapkan adalah sebagai berikut :

1)      Download template bootstrap AdminLTE.

2)      Dari hasil download template bootstrap AdminLTE tadi, kita copy kan semua folder yang ada ke folder ProjectLaravel dan taruh di folder public.

3)      Untuk file dashboard.html dan login.html copy kan ke folder ProjectLaravel lalu tarus di resources/views.

4)      Setelah itu rename dashboard.html menjadi dashboard.blade.php dan login.html menjadi login.blade.php.

Pada tahap pertama kita membuka file dashboard.blade.php kemudian ubah syntak nya, untuk lebih jelasnya dapat lihat gambar dibawah ini :

Syntak awalnya:

 

Kemudian menjadi:

 

Begitu pula seterusnya jika kita bertemu dengan syntak yang serupa maka kita ubah.

Tahap selanjutnya, kita akan memangkas atau membagi syntak yang ada pada file dashboard.blade.php . Saya akan membagi syntak pada header, sidebar, content, footer, sidebarControl, dan jscript. Dan sebagai contoh saya akan membagi untuk syntak header

Langkah pertama kita ambil syntak dengan cara kita cut syntak yang berada pada antara <head> dan </head> dan kita ubah menjadi seperti ini :

 

Kemudian hasil dari cutnya kita paste-kan pada file head.blade.php yang kita harus membuat terlebih dahulu filenya.

 

Begitupun seterusnya untuk header, sidebar, content, footer, sidebarControl, dan jscript.

Namun untuk content kita akan mencoba tidak memakan fungsi include tetapi fungsi yield.

Masih dalam file dashboard.blade.php , kita cut syntak yang berada pada <section class=”content”> sampai dengan </section> dan paste ke base.blade.php. Tambahkan @extends(‘dashboard’), @section(‘content’) dan @stop maksudnya yaitu file ini didefinisikan sebagai content dan turunan dari dashboard. Gambarannya sebagai berikut:

 

Di dalam file dashboard.blade.php yang syntax codenya kita ambil tadi ganti dengan syntax code menjadi seperti dibawah ini.

@yield(‘content’)

Jadi dashboard.blade.php akan jadi seperti ini.

 

Dan hasilnya tidak akan berubah pada tampilannya hanya berubah file syntaknya bertambah dan pada 1 file tidak terlalu banyak baris syntak sehingga memudahkan memahami syntaknya dan jika terdapat error.

 



Selanjutnya kita akan membuat DataBarangController, dengan perintah sebagai berikut:

 

Ketikan perintah diatas pada tempat dimana projek laravel berada, File DataBarangController yang sudah dibuat bisa dilihat di folder Project Laravel yaitu di app\Http\Controllers.

Selanjutnya kita akan menambahkan syntak pada web.php untuk bisa tampil dan kita bisa me running nya :

 

Selanjutnya kita buat file bernama index.blade.php dan masukkan code seperti di bawah ini. Lalu pada resources/views kita buat folder baru bernama data-barang dan simpan file index.blade.php di folder data-barang tersebut.

Fungsi dari file index.blade.php adalah sebagai content dari dashboard admin LTE.

Jika sudah, sekarang kita bisa melihat hasilnya sebagai berikut :

 



Mungkin sekian ulasan tentang template blade pada laravel, mungkin banyak kesalahan dalam postingan ini saya sebagai author mohon maaf. Terima kasih telah membaca postingan ini, semoga dapat bermanfaat.


1 comment:

  1. Your Affiliate Money Printing Machine is waiting -

    And getting it running is as easy as 1 . 2 . 3!

    Here are the steps to make it work...

    STEP 1. Input into the system what affiliate products you want to promote
    STEP 2. Add some PUSH button traffic (this ONLY takes 2 minutes)
    STEP 3. Watch the system explode your list and up-sell your affiliate products all by itself!

    Are you ready to make money automatically??

    Check it out here

    ReplyDelete

Search This Blog

Powered by Blogger.