วิธีการใช้งาน Template engine ของ Laravel Framework

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

makup
PHP Super Member
PHP Super Member
Posts: 397
Joined: 05/10/2020 10:02 am

วิธีการใช้งาน Template engine ของ Laravel Framework

Post by makup »

ในบทความนี้ จะมาแนะนำ เกี่ยวกับวิธีการใช้ Blade Template หรือ ก็คือ Template Engine ของ Laravel Framework , ซึ่งผู้ที่สนใจต้องการศึกษาเอาไปใช้งาน ก็สามารถศึกษาได้จากบทความนี้ได้ , ซึ่งจะเป็นประโยชน์แก่ผู้เริ่มต้นใช้งาน Blade Template ของ Laravel Framework , หากข้อมูลที่บทความนี้ได้นำเสนอ ยังไม่ครบถ้วนในการนำเสนอ ก็อภัย ณ ที่นี้ด้วย
Blade_template.png
Blade_template.png (34.58 KiB) Viewed 235 times

วิธีการใช้งาน Template Engine ของ Laravel
- ในส่วนประกอบของ Layouts ใน Template Engine นั้น , จะประกอบไปด้วย header,silder,footer หลักๆก็มีอยู่ 3 อย่าง , แต่ขั้นตอนที่เรายกตัวอย่าง ก็มีแค่ไม่กี่อย่าง , แต่เป็นการแนะนำใช้งานเบื้องต้นเท่านั้น , เราก็จะมาดูวิธีใช้คำสั่ง Template Engine กันว่า , มีขั้นตอนการทำงานอย่างไร

Step 1 - เปิดโปรแกรม Sublime text 3 หรือ โปรแกรมอื่นๆที่เกี่ยวข้องกับการพัฒนา Code , ทำการสร้าง Folder layouts ขึ้นมา
55.jpg
55.jpg (105.45 KiB) Viewed 235 times
Step 2 - ทำการสร้าง FIle master.blade.php (สำหรับไว้เป็น Template หลัก) , footer.blade.php (ส่วนของการทำงาน Template ย่อย) ขึ้นมา
56.jpg
56.jpg (120.93 KiB) Viewed 235 times
ตัวอย่าง Code : master.blade.php

Code: Select all

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Admin Panel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href="{{asset('css/sidebar.css')}}" rel="stylesheet">        <!--  asset ใช้อ้างอิง หาตำแหน่ง Folder css และที่อยู่ File sidebar.css -->
</head>
<body>
 
  

  <div class="d-flex" id="wrapper">
    <div class="bg-light border-right" id="sidebar-wrapper">
      <div class="list-group list-group-flush">
        <a href="/showAirport" class="list-group-item list-group-item-action bg-light">Dashboard Airport</a>
        <a href="/showAirline" class="list-group-item list-group-item-action bg-light">Dashboard Airline</a>
        <a href="/createAirport" class="list-group-item list-group-item-action bg-light">Form Airport</a>  <!-- อย่าลืมใส่เครื่องหมาย / หน้า Folder admin ใน href .... -->
        <a href="/createAirline" class="list-group-item list-group-item-action bg-light">Form Airline</a>
                                                                                                   
      </div>
    </div>
    <div id="page-content-wrapper">
      <div class="container-fluid">
        
        @if(Session()->has('success'))             <!-- ตรวจสอบว่า มีการส่งค่าสถานะ success ในรูปแบบ Session มาไหม ? , ... -->
            <div class="alert alert-success" role="alert">          

            {{Session()->get('success')}}                         <!-- แสดงผล สถานะ success ว่า "บันทึกข้อสำเร็จเรียบร้อยแล้ว" -->
            </div> 
        @endif
          @if(Session()->has('alert'))               <!-- ตรวจสอบว่า มีการส่งค่าสถานะ alert ในรูปแบบ Session มาไหม ? , ... -->
            <div class="alert alert-danger" role="alert">          
            {{Session()->get('alert')}}                             
            </div> 
        @endif

        @yield('content')                     <!-- เป็นการใช้คำสั่ง ดึงมาปรับเปลี่ยนแก้ไข เฉพาะ 'content' ในส่วนที่ถูกกำหนด-->
                                             
    </div>
  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    @include('layouts.footer')    <!-- เป็นการใช้คำสั่ง ดึง File ย่อย ที่ไม่ได้มีหน้า Design ที่ถูกออกแบบมาซับซ้อน , ดึงออกมาทำงานเล็กน้อย-->
  </div>

  </div>


</body>

</html>

ตัวอย่าง Code : footer.blade.php

Code: Select all

<footer id="footer">
		<div class="footer-bottom">
			<div class="container">
				<div class="row">
					<p class="pull-left">Laravel Framework | Airport</p>
				</div>
			</div>
		</div>
	</footer><!--/Footer-->

  <script src="{{asset('js/jquery.js')}}"></script>
	<script src="{{asset('js/bootstrap.min.js')}}"></script>
	<script src="{{asset('js/jquery.scrollUp.min.js')}}"></script>
	<script src="{{asset('js/price-range.js')}}"></script>
  <script src="{{asset('js/jquery.prettyPhoto.js')}}"></script>
  <script src="{{asset('js/main.js')}}"></script>
</body>
</html>

Step 2 - ทำการสร้าง File createAriline.blade.php , หรือจะตั้งชื่ออะไรก็ได้ ตามที่เราอยากตั้ง
59.jpg
59.jpg (105.39 KiB) Viewed 235 times

ตัวอย่าง Code : createAirline.blade.php

Code: Select all

@extends('layouts.master')   <!-- คือเรียกใช้งาน Template master.blade.php ของการ Design มาทำงานทั้งหมด -->

@section('content')         <!-- ดึงเนื้อหาของ 'content' มาแสดง , อาจจะมีการปรับเปลี่ยนแก้ไข -->
  <div class="table-responsive">
    <h2>Create New Airline</h2>
    <form action="/admin/createProduct" method="post" enctype="multipart/form-data">   <!-- enctype="multipart....  ไว้สำหรับการ Upload ข้อมูล -->
        {{csrf_field()}}
        <div class="form-group">
            <label for="name">Name Airline</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="Name Airline">
        </div>
        <div class="form-group">
            <label for="description">Name Company</label>
            <input type="text" class="form-control" name="name_comp" id="name_comp" placeholder="Name Company">
        </div>
         <div class="form-group">
            <label for="image">Image</label>
            <input type="file" class="form-control"  name="image_name" id="image">
        </div>

        <button type="submit" name="submit" class="btn btn-success">Submit</button>
    </form>
</div>

@endsection
Step 3 -
  • ในส่วนคำสั่ง @yield('content') ของ Template engine นั้น , จะเป็นส่วนที่สามารถปรับเปลี่ยนแก้ไขได้เฉพาะแค่จุดที่เรา Focus ไว้
  • ในส่วนคำสั่ง @include('layouts.footer') ของ Template engine นั้น , จะเป็นส่วนที่ไว้ดึงการทำงานของ File ย่อย Template , ที่ไม่ใช่ Template หลัก เข้ามาทำงาน , เป็นส่วนเสริมของ Design เท่านั้น
  • ในส่วนคำสั่ง @extends('layouts.master') ของ Template engine นั้น , จะเป็นส่วนที่ไว้ดึงการทำงานของ File Template หลัก , จะเป็นการดึง Design การทำงานของ master.blade.php มาทั้งหมด , เพื่อเอาแต่ละส่วนมาใช้งานตามที่ต้องการ
  • ในส่วนคำสั่ง @section('content') ของ Template engine นั้น , จะเป็นส่วนที่ไว้แสดงผลการทำงาน , หรือไม่ก็มีการปรับแต่งข้อมูลเพิ่ม แล้วตามตัวเองที่ถนัดต้องการ
61.JPG



ผลลัพธ์ที่ได้ :
63.jpg
63.jpg (80.92 KiB) Viewed 235 times
ข้อสรุป
การใช้งาน Blade Template หรือ Template Engine ของ Laravel นั้น , เป็นการดึง Layout ส่วนต่างๆที่ทำอยู่ในหน้าเดียวกัน ดึงออกมาใช้งานในหน้าอิ่นๆแต่ละส่วน , อีกทั้ง ทำให้เกิดความสะดวกใช้งานง่ายมากขึ้น โดยที่ไม่จำเป็นต้องไป Design แต่ละหน้าให้เสียเวลา , หากต้องการศึกษาข้อมูลเกี่ยวกับบทเรียน Laravel เพิ่มเติม สามารถศึกษาได้จากบทความนี้


แหล่งอ้างอิงข้อมูล
https://www.itoffside.com/laravel-ep10-blade-template/
https://laravel.com/docs/5.0/templates
https://www.thaicreate.com/community/laravel-view-blade-template.html

แหล่งอ้างอิงรูปภาพ
https://werapun.com/intro-to-laravel-day-2-e4f49fc4637f
  • Similar Topics
    Replies
    Views
    Last post

Return to “PHP Knowledge”

Who is online

Users browsing this forum: No registered users and 11 guests