#9 Blade layouts
Laravel Framework는 PHP Framework이지만, 그냥 PHP파일을 layout파일로 쓰지 않는다.
Laravel만의 Blade라는 PHP파일을 사용하는데, Blade의 기본 사용법에 대해서 알아보자.
Front-end 작업을 하다보면, 반복되는 작업을 해야될 때가 많다. 그래서 보통 Master Layout을 만들어두고 include를 하는 방식으로 하거나, jQuery를 이용하여 부분로딩을 하는경우가 많은데, Blade에서는 @extends와 @yield @section을 통해서 이를 관리한다.
바로 실습에 들어가보자.
우선, views/layouts/ 에 master.blade.php를 만들고 그 안에 Bootstrap theme 중 하나인 jumbotron-narrow 소스코드를 복붙한다.
Bootstrap 사용방법은 생략함.
또, views/blade/ 라는 디렉토리를 생성하고 그 안에 bladetest.blade.php를 추가한다. 내용은 아무것도 넣지 않는다.
그리고 web.php에 들어가서 다음과 같은 코드를 추가한다.
Route::get('blade','PagesController@blade');
당연히, PagesController.php의 코드에도 다음과 같은 Function을 추가한다.
public function blade(){
return view('blade.bladetest');
}
그리고 localhost:8000/blade로 접속해보자. 아무것도 뜨지 않는다. 당연하다!
그렇다면, bladetest.blade.php에 다음과 같은 코드를 추가해보자.
@extends('layouts.master');
위의 코드는 layouts/master.blade.php 파일을 그대로 include한다는 말이다.
다시 localhost:8000/blade로 접속해보면, 우리가 master.blade.php에 추가한 jumbotron-narrow가 화면에 뿌려지는 것을 확인할 수 있다.
나는 Jumbotron의 내용은 그때그때마다 내용을 다르게 하고 싶고, 전체적인 큰 틀은 유지를 하고 싶다.
그럴때는 @yield와 @section을 활용하면 된다. 다음의 코드를 잘살펴보자.
우선 master.blade.php의 코드이다.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>@yield('title')</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">Project name</h3>
</div>
@yield('body')
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
</body>
</html>
그리고 bladetest.blade.php이다.
@extends('layouts.master');
@section('title')
Blade
@endsection
@section('body')
<div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
@endsection
연관성이 보이는가?
각각의 blade파일은 yield와 section으로 연결되 있어서 extends한 파일의 해당 yield에 section의 내용을 삽입하는 방식으로 로직이 진행된다.