You are here
Home > General > เรียนรู้ Laravel 4.1 ( Blade )

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

laravel_Blade

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

เริ่มใช้งาน

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

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

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

การใช้ for

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

 การใช้ foreach

การใช้ if

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

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

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

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

 

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

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

 การสร้าง layout

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

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

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

 

@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 ถามไว้ได้เลยครับถ้าผมว่าจะตอบทันที

admin
เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวด้วย www.readraide.in.th
//www.oxygenyoyo.com
  • Pingback: เรียนรู้ Laravel 4.1 ( Auth ) - oxygenyoyo()

  • DEER

    ไฟล์ test.blade.php ของผม รัน ไม่ได้ น่าจะเป็นเพราะอะไรครับ

  • oxygenyoyo

    ลองเขียน route.php แล้วหรือยังอ่ะครับ เขียนให้ไปเรียกเอา view นั้นๆอ่ะครับ

Top