บทเรียน Laravel 5 เริ่มต้นการสร้าง Template

Date 12 มิถุนายน 2015 Author By saimok Category LARAVEL 5.0

บทเรียนนี้ เราจะเข้าสู่เนื้อหา การสร้าง หรือ ติดตั้ง Template กันครับ ในที่นี้ผมจะใช้ Admin Template ของ SB Admin 2 ครับ เพื่อน ๆ สามารถดาวน์โหลดได้จาก

http://startbootstrap.com/template-overviews/sb-admin-2/ ลิ้งนี้ได้เลยครับ ตัวอย่างหน้าตา จะเป็นรูปด้านล่างครับ

เมื่อเพื่อน ๆ ทำการดาวน์โหลดมาแล้ว ให้ทำการแตกไฟล์ออกมาครับ จะได้ข้อมูลตามภาพด้านล่าง

คราวนี้เราจะมาทำการย้ายมาประกอบร่างกับ Laravel 5.0 ของเรากันครับ ให้ทำการสร้าง Folder เพื่อเก็บจำพวก CSS,Jquery ต่าง ๆ ครับ ในที่นี้ผมจะตั้งชื่อ folder ว่า assets ครับ จากนั้น ให้เราทำการย้าย bower_components, dist, js, less เข้าไปเก็บไว้ด้านในครับ

ขั้นต่อไป เราจะนำสคริปจากไฟล์ต้นแบบ มาทำเป็น Template หลักกันครับ ให้เข้าไปที่ resources/views เพื่อความเป็นระเบียบผมจำทำการสร้าง Folder เพิ่มขึ้นมาชื่อว่า admin และสร้าง folder ภายในเป็น layouts เพื่อเอาไว้เก็บไฟล์ Template ที่จะใช้งานเป็นหลัก รวม ๆ แล้ว ก็จะได้เป็น resources/views/admin/layouts

คราวนี้ ผมจะใช้หน้า page/bank.html เป็นต้นแบบในการจัดทำ Template ครับ ให้ทำการเปิดไฟล์ดังกล่าวจาก folder sb admin 2 ที่เราทำการดาวน์โหลดมาก่อนหน้านี้ ด้วย Editor ครับ

กลับไปที่โปรเจ็คของเราอีกครั้ง ตอนนี้เราจะอยู่ที่ resources/views/admin/layouts ทั้งนี้เพื่อให้ง่ายต่อการแก้ไขในภายหลัง ผมจะทำการแยกส่วนของ Template เป็น 5 ไฟล์ โดยจะตั้งชื่อเป็น template.blade.php, inc-header.blade.php, inc-left-sidebar.blade.php, inc-scripts.blade.php และ inc-styleheet.blade.php โดยแต่ละไฟล์จะแบ่งสคริป และทำหน้าที่ดังนี้

inc-header.blade.php จะเก็บสคริปในส่วนของ header banner ที่แสดงผลชื่อเว็บ และเมนูด้านบนของเพจ

<ul class="nav navbar-top-links navbar-right">
     <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
               <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
          </a>
          <ul class="dropdown-menu dropdown-messages">
               <li>
                   <a href="#"><div><strong>John Smith</strong><span class="pull-right text-muted"><em>Yesterday</em></span></div>
                   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div></a>
               </li>
               <li class="divider"></li>
               <li>
                    <a href="#"><div><strong>John Smith</strong><span class="pull-right text-muted"><em>Yesterday</em></span></div>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div></a>
               </li>
               <li class="divider"></li>
               <li>
                    <a href="#"><div><strong>John Smith</strong><span class="pull-right text-muted"><em>Yesterday</em></span></div>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div></a>
               </li>
               <li class="divider"></li>
               <li>
                    <a class="text-center" href="#"><strong>Read All Messages</strong><i class="fa fa-angle-right"></i></a>
               </li>
          </ul>
          <!-- /.dropdown-messages -->
     </li>
     <!-- /.dropdown -->
     <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i></a>
               <ul class="dropdown-menu dropdown-tasks">
                    <li>
                         <a href="#">
                              <div>
                                   <p><strong>Task 1</strong><span class="pull-right text-muted">40% Complete</span></p>
                                   <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                             <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                   </div>
                             </div>
                         </a>
                    </li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>

inc-left-sidebar.blade.php ใช้เก็บสคริปในส่วนของการแสดงผลเมนูด้านซ้ายของเพจ

<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="flot.html">Flot Charts</a>
</li>
<li>
<a href="morris.html">Morris.js Charts</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>
</li>
<li>
<a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>
</li>
<li>
<a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="panels-wells.html">Panels and Wells</a>
</li>
<li>
<a href="buttons.html">Buttons</a>
</li>
<li>
<a href="notifications.html">Notifications</a>
</li>
<li>
<a href="typography.html">Typography</a>
</li>
<li>
<a href="icons.html"> Icons</a>
</li>
<li>
<a href="grid.html">Grid</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Third Level <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li class="active">
<a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a class="active" href="blank.html">Blank Page</a>
</li>
<li>
<a href="login.html">Login Page</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>

inc-stylesheet.blade.php ใช้เก็บสคริปที่ใช้เรียกไฟล์ css ที่ใช้งานเป็นหลักของทุก ๆ หน้ามาใช้งานครับ

<link href="{{asset('/assets/bower_components/bootstrap/dist/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{{asset('/assets/bower_components/metisMenu/dist/metisMenu.min.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('/assets/dist/css/sb-admin-2.css')}}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{{asset('/assets/bower_components/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

จะสังเกตุเห็นว่า มีคำสั่ง {{asset()}} ครอบลิ้งสำหรับดึงไฟล์ css เอาไว้ ทั้งหนี้ก็หมายถึงให้ทำการกำหนดลิ้งให้อยู่ในรูปแบบตายตัว คือดึงจาก directory ต้นของเพจเสมอ

inc-scripts.blade.php ใช้เก็บคำสั่งสำหรับดึงไฟล์ javascript หรือ jQuery ที่ใช้งานเป็นหลักในทุก ๆ หน้าเอาไว้

<script src="{{asset('/assets/bower_components/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{asset('/assets/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{{asset('/assets/bower_components/metisMenu/dist/metisMenu.min.js')}}"></script>
<!-- Custom Theme JavaScript -->
<script src="{{asset('/assets/dist/js/sb-admin-2.js')}}"></script>

template.blade.php ไฟล์นี้ใช้สำหรับการประกอบร่างของทุก ๆ ไฟล์ที่ได้สร้างไว้ข้างต้น และเป็นส่วนของการเก็บโครงสร้าง html หลักเอาไว้

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>SB Admin 2 - Bootstrap Admin Theme Modify by Saimok</title>
 <!-- Bootstrap Core CSS -->
 @include('admin.layouts.inc-stylesheet')
 @yield('stylesheet')
</head>
<body>
 <div id="wrapper">
 <!-- Navigation -->
 <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="index.html">SB Admin v2.0 Modify By Saimok</a>
 </div>
 <!-- /.navbar-header -->
 @include('admin.layouts.inc-header')
 <!-- /.navbar-top-links -->
 @include('admin.layouts.inc-left-sidebar')
 <!-- /.navbar-static-side -->
 </nav>
 <!-- Page Content -->
 <div id="page-wrapper">
 <div class="container-fluid">
 @yield('content')
 <!-- /.row -->
 </div>
 <!-- /.container-fluid -->
 </div>
 <!-- /#page-wrapper -->
 </div>
 <!-- /#wrapper -->
 <!-- jQuery -->
 @include('admin.layouts.inc-scripts')
 @yield('scripts')
</body>
</html>

สิ่งที่เพิ่มเข้ามาในสคริปนี้คือ @include(), @yield() โดยสองคำสั่งนี้จะมีหน้าที่การทำงานคือ
@include(‘dir.dir.file’) จะมีไว้สำหรับการดึงไฟล์มาใช้งานนั้นเอง โดยจะมองเห็น path แรกคือ path ที่อยู่ด้านใน resources/view โดยยกตัวอย่างนึง คือ @include(‘admin.layouts.inc-stylesheet’) หมายถึงว่า เราดึงไฟล์ที่อยู่ใน resources/view/admin/layouts/inc-stylesheet.blade.php มาใช้งานนั้นเอง

@yield(‘name’) คือการกำหนดพื้นที่ของการแสดงผลที่เราทำการเรียกผ่าน route หรือ กำหนด controller ให้แสดงผลนั้นเอง ในตัวอย่างนี้ผมได้กำหนดไว้ 3 จุดคือ @yield(‘stylesheet’), @yield(‘content’) และ @yield(‘scripts’) โดยมีหน้าที่หลัก ๆ คือ
@yield(‘stylesheet’) จะใช้แสดงการดึงไฟล์ Css ของแต่ละเพจที่ใช้งานไม่เหมือนกันออกมาแสดงผล
@yield(‘content’) ไว้แสดงเนื้อหาของเพจซึ่งจะแสดงผลต่าง ๆ กันไปขึ้นอยู่กับการสั่งงานผ่าน route และ controller
@yield(‘scripts’) จะใช้แสดงการดึงไฟล์ jquery, javascript ของแต่ละเพจที่ใช้งานไม่เหมือนกันออกมาแสดงผล

อธิบายเป็นรูปภาพหน้าที่ของแต่ล่ะไฟล์เป็นประมาณนี้ครับ

ตัวอย่างหน้าที่การทำงานของแต่ล่ะไฟล์

ขั้นตอนต่อไป เราจะมากำหนดหน้า content กันครับ ให้ท่านออกมาที่ resources/views/admin/ สร้าง folder ที่ชื่อว่า dashboard จากในให้สร้างไฟล์ index.blade.php โดยรวมแล้วก็จะได้เป็น
resources/views/admin/dashboard/index.blade.php เปิดไฟล์ขึ้นมาแล้วกำหนดดังต่อไปนี้

@extends('admin.layouts.template')
@section('content')
<div class="row">
 <div class="col-lg-12">
 <h1 class="page-header">Blank Page</h1>
 </div>
 <!-- /.col-lg-12 -->
</div>
@stop

อธิบายเพิ่มเติม @extends(‘admin.layouts.template’) คือการเรียกใช้งาน Template ที่เราได้ทำการสร้งขึ้นมาก่อนหน้านี้ โดยรวม ๆ แล้วคือการเรียก resources/views/admin/layouts/template.blade.php มาใช้งานเป็น template หลักนั้นเอง
@section(‘content’) หมายถึง การเริ่มต้นสคริปที่จะใช้แสดงผลในส่วนของ @yield(‘content’) ที่เราฝังไว้ใน template.blade.php นั้นเอง โดยจะสิ้นสุดที่ @stop นั้นเอง

ต่อไปเราจะมาทำการกำหนด Controller เพื่อสั่งการให้ laravel ประมวลผลกันครับ ทั้งนี้ให้เข้าไปที่ app/Http/Controllers เพื่อความเป็นระเบียบ และง่ายต่อการหาไฟล์เพื่อแก้ไขในภายหลัง ผมจะทำการสร้าง folder ชื่อ Admins ขึ้นมาเพื่อเก็บ Controller ต่าง ๆ ครับ จากนั้นให้สร้างไฟล์ชื่อว่า DashboardController.php ขึ้นมา โดยรวมแล้วจะมองเป็นเป็น app/Http/Controllers/Admins/DashboardController.php ครับ จากนั้นให้เปิดไฟล์ขึ้นมา กำหนดสคริป

<?php namespace App\Http\Controllers\Admins; // กำหนดที่อยู่ของ Controller
use App\Http\Controllers\Controller; //เรียกใช้ Controller หลักของ Laravel 5.0

class DashboardController extends Controller {
 public function getIndex(){
 return view('admin.dashboard.index');
 }
}

ขั้นตอนต่อไป เราจะกำหนด Route เพื่อเรียกการแสดงผลครับ

Route::controller('admin/index','Admins\DashboardController');

เมื่อเรียกใช้งานผ่าน Url ก็จะเป็นดังนี้ http://localhost/laravel-5/public/admin/index ครับ

หากต้องการให้ run โดยไม่ต้องมี public ให้เพื่อน ๆ ทำการย้ายไฟล์ .htaccess กับ index.php ที่อยู่ใน /public มาวางไว้ที่ path แรกของโปรเจ็คครับ แล้วเข้าไปแก้ไข

require __DIR__.'/../bootstrap/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

เป็น

require __DIR__.'/bootstrap/autoload.php';
$app = require_once __DIR__.'/bootstrap/app.php';

จากนั้นทดสอบ run ดูใหม่ โดยไม่ต้องผ่าน public ครับ http://localhost/laravel-5/admin/index

เพื่อน ๆ สามารถดาวน์โหลด คริปตัวอย่างนี้ไปใช้เพื่อการศึกษาเพิ่มเติมได้ครับ โดยคลิกด้านล่างนี้ได้เลยครับ

จากตัวอย่างที่ให้เพื่อน ๆ ดาวน์โหลดไปนั้น หากเพื่อน ๆ รันโดยผ่าน url public ให้ทำการวาง folder assets ไว้ใน folder public ด้วยครับ ไม่งั้นระบบจะหาไฟล์ css ไม่เจอครับ ทำให้ layout แสดงผลผิดพลาดครับ และจะทำให้ได้ตามภาพด้านล่าง

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

Comments

comments

ป้ายกำกับ:laravel, laravel 5 thailand, laravel 5 เบื้องต้น, laravel framework, laravel framework tutorial, laravel framework เบื้องต้น, laravel thai, laravel thailand, laravel tutorials, laravel เบื้องต้น, thai laravel, thailand laravel, thailand laravel 5, thailand laravel framework, thailand laravel framework 5, tutorial laravel 5, tutorials laravel, บทเรียน laravel 5, สอน laravel, สอน laravel 5