프로젝트별 태스크 인덱스
이제 프로젝트별로 태스크 목록을 표시하는 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 에 연결해 보면 다음과 같이 선택된 프로젝트의 태스크 목록을 출력하는 화면을 볼수 있습니다.