Log in with LINE
- Blade_template.png (34.58 KiB) Viewed 335 times
วิธีการใช้งาน Template Engine ของ Laravel
- ในส่วนประกอบของ Layouts ใน Template Engine นั้น , จะประกอบไปด้วย header,silder,footer หลักๆก็มีอยู่ 3 อย่าง , แต่ขั้นตอนที่เรายกตัวอย่าง ก็มีแค่ไม่กี่อย่าง , แต่เป็นการแนะนำใช้งานเบื้องต้นเท่านั้น , เราก็จะมาดูวิธีใช้คำสั่ง Template Engine กันว่า , มีขั้นตอนการทำงานอย่างไร
Step 1 - เปิดโปรแกรม Sublime text 3 หรือ โปรแกรมอื่นๆที่เกี่ยวข้องกับการพัฒนา Code , ทำการสร้าง Folder layouts ขึ้นมา
- 55.jpg (105.45 KiB) Viewed 335 times
- 56.jpg (120.93 KiB) Viewed 335 times
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 (105.39 KiB) Viewed 335 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
- ในส่วนคำสั่ง @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 นั้น , จะเป็นส่วนที่ไว้แสดงผลการทำงาน , หรือไม่ก็มีการปรับแต่งข้อมูลเพิ่ม แล้วตามตัวเองที่ถนัดต้องการ
ผลลัพธ์ที่ได้ :
- 63.jpg (80.92 KiB) Viewed 335 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