เรียนรู้ Laravel 4.1 ( Blade )

laravel_Blade

หลังจากเราเรียนรู้เรื่องการใช้ View ที่มีการเรียกจาก Route แล้ว คราวนี้เราจะมาตกแต่งหน้า view ที่ส่งกลับไปบ้าง มาดูกันว่าเจ้า Blade เนี้ยทำงานอย่างไร แล้วช่วยให้เราใช้งานได้สะดวกได้อย่างไรกันบ้างครับ

เริ่มใช้งาน

สร้างไฟล์ใน View โดยมีนามสกุล .blade.php เช่น index.blade.php
laravel จะรู้เองว่าไฟล์นี้ใช้งาน blade ครับเริ่มแรกง่ายๆคือให้ลอง

{{ }} <- อันนี้จะแทนว่า echo ”; ถ้าเราใส่
{{‘test’}} ก็เหมือนกับ echo ‘test’; อย่างนี้ครับ ** มี signle quote ครอบด้วยนะครับ

Hello {{'Tong'}} 

Hello {{ $name }}

อย่างบรรทัดแรกจะเหมือนเราแค่ echo ออกมาเฉยๆครับ แต่บรรทัดที่สองคือเรา echo ตัวแปรออกมาครับ

การใช้ for

บ่อยครั้งเราต้องการจะลูปเอาค่ามาแสดงเช่นเอาค่าตัวหนึ่งออกมา เป็น array ทำนองเนี้ยเราไปดูตัวอย่างกันดีกว่าครับ

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

{{$i}}

@endfor

 การใช้ foreach

@foreach($arrays as $array)

{{ $array }}

@endforeach

การใช้ if

<?php $a = true; ?>
@if($a == true) 
	{{'ok'}}
@endif

 การ include ไฟล์อื่นเข้ามา

โดยการเขียนเว็บทั่วไปเราอาจจะต้องการบางไฟล์เข้ามาด้วย ซึ่งใน blade สามารถทำได้ง่ายๆเลยครับไปดูกัน

สร้างไฟล์ header.blade มาโค้ดตามนี้เลยครับ

<html>
	<head>
		<title>test</title>
	</head>
	<body>

เสร็จแหละก็สามารถเรียกไฟล์นี้เข้าไปไฟล์ index.blade.php ของเราได้เลยครับเพิ่มแค่ บรรทัดนี้เข้าไป

@include('header') <-- ไม่ต้องมี semicolon (;) นะครับ

 

 การจัดเก็บและเรียกใช้งาน css,js

ใน folder public ให้เราสร้าง folder css,js นะครับเพื่อไว้จัดเก็บไฟล์เหล่านี้เป็นหมวดหมู่วิธีเรียกใช้ทำอย่างนี้ครับให้คุณเข้าไปไฟล์ header.blade.php ที่เราทำได้ทำการสร้างก่อนหน้านี้แล้วเพิ่มดังนี้

<html>
	<head>
		<title>test</title>
{{ HTML::style('css/bootstrap.css')}}
{{ HTML::srciprt('js/bootstrap.js')}}

	</head>
	<body>

 การสร้าง layout

การสร้างเป็น Layout รอการรองรับการเปลี่ยนแปลงแบบซับซ้อนครับ คล้ายๆการ include แต่จะทำงานได้ดีกว่าครับ ลองไปดูตัวอย่างโค้ดกัน

สร้าง folder layouts ใน folder view และก็สร้างไฟล์ master.blade.php ใส่ใน folder layouts อีกทีนะครับ ในไฟล์ master.blade.php เป็นไปตามนี้

<!-- Stored in app/views/layouts/master.blade.php -->

<html>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

สมมติว่าเราต้องการสร้างหน้าใหม่แล้วทดสอบการเรียก layout ต่างๆว่าถูกต้องไหม ? ให้สร้างไฟล์ test.blade.php ใส่ไว้ใน folder view ครับโค้ดเป็นดังนี้

@extends('layouts.master')

@section('sidebar')
    

    <p>This is appended to the master sidebar.</p>
@stop

@section('content')
    <p>This is my body content.</p>
@stop

 

@extends คือการเรียกหา layout หลักๆว่าเราจะเรียกใช้อันไหน ณ ตอนนี้เราเรียกหา layouts.master ( layouts คือ folder แล้วใช้ (.) ในการเข้าถึงไฟล์ข้างใน ซึ่งในที่นี้ตัวอย่างของเราคือ master ครับ

@section คือส่วนที่เราไม่ต้องการให้เหมือนกับตัว layout เช่นเราอาจจะเพิ่มหรือเปลี่ยนเมนูสำหรับแค่ตรงจุดนี้เท่านั้น โดยตัว layout เหมือนเดิมให้คิดถึงเวลาสมมติคนที่ Login กับคนไม่ได้ Login จะเห็นเมนูไม่เหมือนกัน ซึ่งเราต้องการแค่เฉพาะตรงส่วนเมนูไม่เหมือนแต่ส่วนอื่นๆยังเหมือนเดิมก็แก้ไขน้อย

@stop ใส่ให้ตัว blade รู้ว่าเราได้หยุดในส่วนนั้นๆ เช่นตรงส่วน

@section(‘sidebar’)

@stop

ระบบจะเข้าใจว่าส่วนของ sidebar จะสิ้นสุดตรงนี้ แล้วเริ่ม section ต่อไปครับ

@yield(‘content’, ‘This is a default’); อันนี้เหมือนเราสามารถใส่ค่า Default ให้กับส่วนที่เราไม่ได้ใส่ครับเช่นสมมติว่า ในไฟล์ที่เรียกนั้นไม่มีการแก้ไขส่วน content หรือพูดง่ายๆว่า ไม่มี @section(‘content’) คำสั่งนี้จะดึงค่าข้างหลังมาแสดงแทนครับ

สรุป

ตัว blade ถือเป็น engine ที่มาช่วยเหลือการทำ view ของเราได้ดีมากจริงๆ หากศึกษาเพิ่มอีกหน่อยจะมีลูกเล่นเยอะกว่านี้อีกครับ อย่างไรก็ดีจากตัวอย่างที่นำมาบอกกันในบทความนี้ก็คิดว่าทำได้หลายอย่างแล้ว

Credit

พอดีผมได้ไปศึกษาจากคลิปนี้ https://www.youtube.com/user/laraveltut สามารถเข้าไปติดตามหรือเรียนจากคลิปได้ครับ หรือสามารถติดตามที่เว็บหลักของเขาครับทางนี้เลย http://laraveltut.com/

แล้วมาเขียนอธิบายเพิ่มเติมครับจึงอยากแชร์ต่อไว้โดยผมจะพยายามเขียนอธิบายคนที่ไม่เคยใช้หรือไม่เข้าใจมาก่อน หากมีคำถามใดๆสามารถเขียน comment ถามไว้ได้เลยครับถ้าผมว่าจะตอบทันที

Message us