컨트롤러 index 메소드 구현

이제 url  별로 처리하는 메소드와 뷰를 구현할 순서입니다.

php artisan route:list --name=project 명령을 통해서 컨트롤러의 메소드와 라우팅 목록을 다시 확인하면 본 절의 이해에 도움이 됩니다.

가장 먼저 브라우저가 /project 로 요청을 보내 왔을 때 처리할 ProjectController 의 index() 메소드를 구현해 보겠습니다.

class ProjectController extends Controller
{
    public function index()
    {
        $user = \Auth::user();	// 1
        $projects = Project::where('user_id', $user->id)->get();	// 2

        return view('project.index')->with('projects', $projects);	// 3
    }
CODE
  • 1: 세션에서 현재 로그인한 사용자의 정보를 가져오기 위해 Auth::user() 메소드로 사용자의 정보를 가져 옵니다.
  • 2: project 테이블에서 user_id 가 현재 로그인한 사용자의 id 와 같은 데이타를 가져옵니다.

  • 3: DB 에서 가져온 데이타를 with() 메소드로 project.index 뷰에 전달하고 리턴합니다. with() 대신 다음과 같이 compact() 를 사용할 수도 있습니다.

    return view('project.index', compact('projects'));
    CODE

인덱스 뷰 구현

이제 뷰를 구현할 차례로 뷰는 기능별로 폴더를 만들고 관리하는 것이 좋으므로 프로젝트 뷰를 넣을 폴더를 먼저 생성합니다.

$ mkdir resources/views/project
CODE

이제 위의 index() 메소드에서 호출하는 뷰 페이지를 만들어 줍니다. 뷰의 이름이 project.index 이므로 뷰 파일의 경로는 resources/views/project/index.blade.php 가 됩니다.

@extends('layouts.app')	//1

@section('title')			//2
    프로젝트 목록	
@endsection

@section('content')

    <div class="col-md-12">
        <p>
            <a href="{{ route('project.create') }}" class="btn btn-success">프로젝트 생성</a>
        </p>
		@if(Session::has('message'))  // 3
    		<div class="alert alert-info">
        			{{Session::get('message')}}
    		</div>
		@endif

        <table class="table table-striped">
            <thead>
            <tr>
                <td>이름</td>
                <td>Description</td>
                <td>생성일</td>
            </tr>
            </thead>
            <tbody>
            @foreach ($projects as $proj)	// 4
                <tr>
                    <td>
                        <a href="{{route('project.show', [$proj->id])}}">{{ $proj->name }}</a>	//5
                    </td>
                    <td>
                        {{ $proj->description }}
                    </td>
                    <td>
                        {{ $proj->created_at }}
                    </td>
                    <td>
                        <a class="btn btn-success" href="{{ route('project.edit', $proj->id) }}">편집</a>  // 6
                    </td>
                    <td>
                        <a class="btn btn-danger" href="{{ route('project.destroy', $proj->id) }}">삭제</a> //7
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

@endsection
CODE
  • 1 : 부모 템플릿인 layouts.app 를 상속받아서 처리한다고 선언합니다.
  • 2 : 부모 템플릿에서 페이지 제목을 @yield 로 선언했으므로 자식 페이지에서 제목을 지정합니다.
  • 3: 프로젝트 생성이나 편집 결과를 project.index 뷰에서 표시할 예정이며 HTTP 는 상태가 없는 프로토콜이므로 다른 페이지에서 전달한 값을 받으려면 세션을 사용해야 합니다. 다른 페이지에 전달할 내용을 세션에 message 를 키로 하여 삽입하고 이를 사용하는 페이지에서는 전 절에서 설명한 세션 파사드의 has() 메소드를 사용해 세션내 message값이 있을 경우 화면에 이 내용을 알림 용도로 출력합니다. 
  • 4: 컨트롤러에서 전달받은 배열을 처리하기 위해 foreach 구문을 실행합니다.

  • 5: route() 메소드를 사용하여 project.show 라우팅에 링크를 생성합니다. show 라우팅은 리소스 id 를 파라미터로 받아야 하므로 route 메소드의 두 번째 파라미터로 id 를 전달합니다. id가 1일 경우 최종 생성되는 링크는 /project/1 이 됩니다.

    리소스 id 를 전달하지 않으면 최종 생성되는 URI 는 {project} 를 urlencode() 함수를 통해 나온 결과인 %7Bproject%7D 가 되므로 링크가 제대로 동작하지 않습니다.

     

  • 6: project.edit 라우팅에 링크를 생성하며 show 마찬가지로 리소스 id 를 파라미터로 주어야 하며 id가 1일 경우 최종 생성되는 링크는 /project/1/edit 이 됩니다.
  • 7: project.destroy 라우팅에 연결되며 최종 생성되는 링크는 /project/1 이 되며 show 와 구분하기 위해 HTTP 요청을 DELETE 로 보내야 합니다.

4, 5, 6은 route() 대신 url() 메소드를 사용하여 다음과 같이 구현할 수도 있습니다.

show 라우팅

<a href="{{url('/project/' . $proj->id)}}">{{ $proj->name }}</a>
CODE

edit 라우팅

<a class="btn btn-success" href="{{ url('/project/' . $proj->id .'/edit' ) }}">편집</a> 
CODE

 

이제 기능 개발을 마쳤으니 브라우저로  연결해 보면 다음과 같이 전체 프로젝트의 목록을 출력하는 화면을 볼수 있습니다.