본문 바로가기
프로그래밍/Laravel

1강 실습::스킬 더블업 - View

stickyNY 2016. 3. 11. 18:36

1. resources/views/layout 폴더를 만듭니다.

2. resources/views/layout/master.blade.php 파일을 만듭니다.

3. http://www.bootstrapcdn.com/ 에서 필요한 파일을 추가합니다.

4. Master Blade Layout 구성

5. Content 영역은 @yield('content')



Route::get 메소드가 호출하는 Controller의 메소드는 string이나 view를 리턴한다.

그 view를 어떻게 구성하는지 배워보자.

우선 view는 home의 resource 하위에 있다.




#1 views 하위에 폴더를 만들자


1
[views]$ mkdir nayLayout
cs




#2 블레이드 파일을 만들자


난 디렉토리를 만드는 것은 알지만, 파일을 만들줄은 모르므로... 카피했다.


1
1[views]$ cp ./welcome.blade.php ./nayLayout/nayMaster.blade.php
cs


nayMaster.blade.php 파일을 열어 기본 틀만 잡히도록 수정한다.


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
 
    </head>
    <body>
        <div class="container">
        </div>
    </body>
</html>
cs




#3 그냥 만들면 재미없으니까 부트스트랩을 가미하자

#4 이것이 곧 Master Blade Layout 이다


http://www.bootstrapcdn.com 에서 두 개 URL을 추가한다. 





Complete CSS의 URL을 <link rel="stylesheet" href=""/> 에 넣는다.

Complete JavaScript의 URL을 <script src=""></script> 에 넣는다.


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
        </div>
    </body>
</html>
cs




#5 Content 영역은 @yield('content')


container라는 div를 선언하고 @yield 키워드를 사용해서 content 영역을 만든다.

Master Blade Layout은 기본적인 틀이고, content 영역은 알아서 하게끔 되는 것이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>
cs




#6 템플릿 문법으로 출력 폼 만들기


nayPage.blade.php 파일을 만든다.

난 파일 만들기 못하니까 카피카피카츄


1
cp ./nayMaster.blade.php ./nayPage.blade.php
cs



nayPage.blade.php 파일은 템플릿 문법으로 구성한다.

nayPage는 nayLayout 폴더의 nayMaster 상속을 받아서 content 영역을 "Ohhhhhh What is this? ....."으로 구성하겠다는 의미다.


1
2
3
4
5
6
7
@extends('nayLayout.nayMaster')
 
@section('content')
 
    Ohhhhhh What is this? Am I doing well? what thing will be displayed?
 
@endsection
cs



이 view 파일만으로는 아무것도 못한다. Controller를 수정해야 한다.



#7 Controller 수정


Route가 호출하는 NayController의 nay 메소드를 수정하자.

아까는 단순 string을 리턴했지만 지금은 view를 리턴한다.

nayLayout 하위의 nayPage 파일을 리턴한다.  


1
2
3
4
5
6
7
8
9
10
11
12
<?php
 
namespace App\Http\Controllers;
 
class NayController extends Controller
{
    public function nay($pageId)
    {
        //return 'url은 '.$pageId.'입니다.';
        return view('nayLayout.nayPage');
    }
}
cs

  



#8 실행


짠!





#9 동적 출력하기


뭔 URI를 입력하던 똑같은 문구 "Ohhhhhhhh What is this?..."가 출력되고 있다.

이전 실습처럼 URI를 파라미터로 받아서 출력해보자.


NayController의 nay 메소드를 수정하면 된다.

pageId라는 파라미터를 받아서 nayLayout의 nayPage라는 view에다가 pageName이라는 인자로 전달한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
namespace App\Http\Controllers;
 
class NayController extends Controller
{
    public function nay($pageId)
    {
        // return 'url은 '.$pageId.'입니다.';
        // return view('nayLayout.nayPage');
        return view('nayLayout.nayPage', ['pageName' => $pageId]);
    }
}
cs



nayPage의 content 영역에 {{}} 라는 문법을 사용해서 인자를 넣는다.


1
2
3
4
5
6
7
8
@extends('nayLayout.nayMaster')
 
@section('content')
 
    <!-- Ohhhhhh What is this? Am I doing well? what thing will be displayed? -->
    {{ $pageName }}
 
@endsection
cs




#10 또 실행


짠!!!!!!! 요가하러 가자



저작자표시 비영리 변경금지

'프로그래밍 > Laravel' 카테고리의 다른 글

1강 실습::스킬 더하기 - {URL 파라미터}  (0) 2016.03.11
1강 실습::기본 익히기  (0) 2016.03.11
1강 Basic  (0) 2016.03.11

'프로그래밍/Laravel' Related Articles

티스토리툴바