Page tree

웹 상의 컨텐츠는 HTML 이 대부분이므로 HTML 을 전송하는 Response 를 만들어 봅시다. 기존 라우팅과 분리하기 위해 다음과 같이 새로운 라우팅을 설정하고 여러 줄에 걸친 HTML 을 표시하기 위해 정해진 문자열이 나올 때 까지 출력하는 문법(heredoc - http://goo.gl/DqmeCx 참고)인 <<< 를 사용하겠습니다.

 

routes.php
<?php 
Route::get('hello/html', function() {
	$content = <<<HTML

	<!doctype html> 
	<html lang="ko">
		<head> 
			<meta charset="UTF-8"> 
			<title>Ok</title>
		</head>
        <body>
            <h1>라라벨이란?</h1>
            <h3>라라벨은 가장 모던하고 세련된 PHP 프레임워크이며, 유연하고 세련된 기능을 제공합니다. </h3>
        </body>
    </html>
HTML;

	return $content;
});

 

이제 웹 브라우저로 http://homestead.app/hello/html 에 연결하면 HTML 로 출력되는 페이지를 확인할 수 있습니다.

view 화면

 

그런데 라우트에 HTML 코드를 같이 넣으면 새로운 컨텐츠가 생기거나 기존 컨텐츠를 변경할 때 마다 라우트 파일을 고쳐야 하므로 매우 번거롭고 개발자와 디자이너의 업무가 분리되지 않을 것입니다. 이제 사용자에게 보여주기 위해 데이타를 가공하여 표시해 주는 레이어인 View 를 알아볼 순서입니다.

 

위 코드를 view 를 사용하여 분리해 봅시다. 기존 소스는 라우트안에 뷰가 내장되어 있었지만 더 체계적으로 뷰 파일을 관리하려면 계층적으로 뷰 파일을 관리하는게 좋습니다.

이제 hello/html 에 연결할 경우 hello 라는 폴더 밑의 html.php 과 연결하도록 하면 나중에 hello URI 밑에 새로 컨텐츠가 추가 되어도 관리가 용이할 것입니다.

이렇게 뷰를 계층적으로 관리할 경우 계층 구분을 점(.) 으로 적어주면 되며 다음은 코드가 분리된 routes.php 파일입니다.

routes.php
<?php 
Route::get('hello/html', function() {
	return View::make('hello.html');
});

 

View::make 메소드는 새로운 VIew 인스턴스를 생성하고 hello 라는 뷰 템플릿을 전달하는 메소드입니다. 위의 코드는 View::make 대신 다음과 같이 view 헬퍼를 사용할 수도 있습니다.

<?php 
Route::get('hello/html', function() {
	return view('hello.html');
});

라라벨은 배열을 처리하거나 문자열을 다루는 등 다양한 유틸리티 메소드를 헬퍼(helper) 로 제공하고 있습니다. View 나 Response, Config 같이 많이 사용하는 클래스의 경우 별도의 헬퍼 함수가 있으므로 해당 객체의 인스턴스에 바로 접근이 가능합니다.

 

HTML 을 출력하는 코드가 간결해졌지만 HTML 로 출력하는 뷰 레이어 코드는 어디로 가야 할까요?. 라라벨의 모든 view 는 resources/views 폴더에 위치해야 하며 여기에서 뷰 이름을 갖는 .php 파일을 찾게 됩니다. 위 예제에서 뷰 이름이 hello.html 이므로 resources/views/hello 폴더를 만들고 그 안에 html.php 를 만들면 됩니다.

resources/views/hello/html.php
<!doctype html>
<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <title>Ok</title>
 </head>
 <body>
     <h1>라라벨 Response!</h1>
 </body>
</html>

뷰를 찾는 경로는 config/view.php 의 'paths' 항목에 정의되어 있으므로 수정 가능하지만 관례상 기본 경로를 사용하는 것을 권장합니다.

 

이제 라우팅과 뷰 코드가 분리되었습니다. 제대로 동작하는지 확인하기 위해 http://homestead.app/hello/html 에 연결하여 결과를 확인해 봅시다.

 

일반적인 웹 애플리케이션은 뷰에 데이타를 전달해서 동적인 페이지를 생성하는데 위 예제는 단순한 정적 페이지입니다.

 

이제 웹 상에서 할 일(todo)을 관리해 주는 서비스를 개발한다고 가정해 봅시다. 

Route 에서 뷰에 할 일에 대한 데이타를 넘기고 뷰에서 이 정보를 task 라는 변수명으로 접근하여 HTML 을 생성하려고 합니다.

 

뷰가 배열내에 변수에 접근하기 위해서는 다음과 같이 view 에서 접근하려는 변수명이 key 인  배열을 생성해야 하므로 바로 전달하면 안 되고 PHP 의 compact 함수를 사용하여 배열로 생성하여 전달합니다.

view 에 변수 전달
app/Http/routes.php
<?php 
Route::get('task/view', function() {	
	$task = ['name' => 'Task 1', 'due_date' => '2015-06-01 12:00:11'];

	return view('task.view', compact('task'));
});

compact 는 변수와 그 값을 가지는 배열을 만들어 주므로 compact('task) 대신 ['task' => $task] 구문으로 직접 배열을 만들어 주어도 같은 결과를 얻을수 있습니다.

 

또는 view 의 with 메소드를 사용하여 배열을 생성할 수도 있습니다.

app/Http/routes.php
Route::get('task/view', function() {
	$task = ['name' => 'Task 1', 'due_date' => '2015-06-01 12:00:11'];

	return view('task.view')->with('task', $task);
});

with 메소드는 여러 개의 변수를 뷰에 넘겨야 할 경우 메소드 체이닝을 사용하여 with 를 여러 번 호출하면 되므로 개인적으로는 이 방식을 선호합니다.

return view('task.view')->with('users', $users)
						->with('account', $account)
						->with('tasks', $tasks);

 

이제 데이타를 받아서 출력하는 뷰 코드를 만들어 보겠습니다. 뷰 파일이 task.view 로 지정되었으므로 먼저 task 디렉터리를 만들고 그 밑에 view.php 를 위치 시켜야 합니다.

resources/views/task/view.php
<!doctype html>
<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <title>Ok</title>
 </head>
 <body>
     <h1>할일 정보</h1>
     <p> 할 일: <?= $task['name'] ?></p>
     <p> 기 한:   <?= $task['due_date'] ?></p>
 </body>
</html>

이제 데이타를 받아서 동적으로 뷰를 생성하는 코드를 완성했습니다. 제대로 동작하는지 확인하기 위해 브라우저에서 http://homestead.app/task/view 에 연결해 봅시다.

view 화면

 

제대로 동작하는 것을 확인했지만 HTML 안에 <?= 로 PHP 코드를 입력해야 하는 것은 좀 불편해 보입니다. 특히 HTML 양이 많고 복잡한 경우 제대로 처리할 수 있을지 의문이 듭니다.

 

이런 문제를 해결하기 위해 많은 프레임워크가 템플릿 엔진을 내장하거나 외부 엔진과 연계를 지원하고 있습니다.

 

http://laravel.com/docs/5.2/responses