Page tree

이제 프로젝트별로 태스크 목록을 표시하는 index() 메소드를 구현해 보겠습니다.

컨트롤러 index 메소드 구현

php artisan route:list --name=task 명령을 통해서 라우팅을 확인하면 본 절의 이해에 도움이 됩니다.

이제 url  별로 처리하는 메소드와 뷰를 구현할 순서입니다. task 라우팅은 project 의 중첩 라우팅이므로 인덱스 요청 URL은 /project/{project}/task 형식이 됩니다. URL 중 {project} 는 파라미터이므로 index() 메소드로 전달이 가능합니다.

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

public function index($project)	//1
{
    $proj = Project::findOrFail($project); //2

    $tasks = $proj->tasks()->get();	//3

    return view('task.index')	//4
        ->with('tasks', $tasks)
        ->with('proj', $proj);
}
  • 1: URL에 전달된 현재 프로젝트의 id 를 메소드 파라미터로 바인딩합니다.
  • 2: project 테이블에서 id 가 파라미터와 같은 프로젝트 정보를 가져옵니다.
  • 3: 가져온 프로젝트 정보와 task 정보를 with() 메소드를 사용해 task.index 뷰에 전달합니다. 

인덱스 뷰 구현

프로젝트 뷰때와 마찬가지로 먼저 task 뷰를 저장할 폴더를 관리가 용이하도록 project 폴더 하위에 생성첩합니다.

$ mkdir resources/views/project/task

이제 위의 index() 메소드에서 호출하는 task.index 뷰 페이지를 resources/views/project/task/index.blade.php 에 만들어 줍니다.

@extends('layouts.app')

@section('title')
    태스크 목록
@endsection

@section('content')

    <div class="col-md-12">
		<h3>{{ $proj->name }}</h3>
        <p>
            <a href="{{ route('project.task.create', [$proj->id]) }}" class="btn btn-success">task 생성</a>	//1
        </p>

        @if(Session::has('message'))
            <div class="alert alert-info">
                {{Session::get('message')}}
            </div>
        @endif

        <table class="table table-striped">
            <thead>
            <tr>
                <td>이름</td>
                <td>우선순위</td>
                <td>상태</td>
                <td>기한</td>
            </tr>
            </thead>
            <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <td>
                        <a href="{{route('project.task.show', [$proj->id, $task->id])}}">{{ $task->name }}</a>	//2
                    </td>
                    <td>
                        {{ $task->priority }}
                    </td>
                    <td>
                        {{ $task->status }}
                    </td>
                    <td>
                        {{ $task->due_date }}
                    </td>
                    <td>
                        <a class="btn btn-success" href="{{ route('project.task.edit', [$proj->id, $task->id]) }}">편집</a>	//3
                    </td>
                    <td>
                        <form method="POST" action="{{ route('project.task.destroy', [$proj->id, $task->id]) }}">	//4
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}
                            <button type="submit" class="btn btn-danger">
                                삭제
                            </button>
                        </form>
                    </td>
                </tr>

            @endforeach
            </tbody>
        </table>
    </div>
@endsection
  • 1 : route('project.task.create', [$proj->id]) 로 task 생성 라우팅을 연결하며 파라미터로 프로젝트의 id 를 전달합니다. task 라우팅은 중첩 라우팅이므로 파라미터로 프로젝트 id 를 꼭 전달해야 합니다.
  • 2 : route('project.task.show', [$proj->id, $task->id]) task의 상세 정보를 보여주는 라우팅을 생성하며 프로젝트 id와 태스크 id 를 모두 파라미터로 전달해야 합니다.
  • 3, 4: 태스크를 편집하고 삭제하는 라우팅을 생성하기 위해 파라미터로 프로젝트와 태스크 id 를 전달합니다.

2,3,4 는 url() 메소드로도 처리할 수 있으며 파라미터로 전달하는 배열의 모든 요소를 꺼내서 '/' 를 추가하여 URL을 생성합니다.

예로 태스크를 수정하는 라우팅을 연결할 경우 /project/1/task/5/edit 를 생성하면 되므로 다음과 같이 작성하면 됩니다.

{{url('project', [1, 'task', 5, 'edit'])}}

이제 인덱스 기능 개발을 마쳤으니 브라우저로  /project/{project}/task URL 에 연결해 보면 다음과 같이 선택된 프로젝트의 태스크 목록을 출력하는 화면을 볼수 있습니다.

프로젝트 인덱스 페이지