Laravel 초급 태스크 목록 편집하기

==개요==
[[분류: Laravel]]
;Basic Task List
;기본 태스크 목록
https://laravel.com/docs/5.2/quickstart

==소개==
이 빠른 시작 가이드는 Laravel 프레임워크에 대한 기본 소개를 제공하며, 데이터베이스 마이그레이션, Eloquent ORM, 라우팅, 유효성 검증, 뷰, Blade 템플릿에 관한 내용을 포함하고 있습니다. Laravel 프레임워크나 PHP 프레임워크를 처음 접하는 경우에 좋은 시작점이 될 것입니다. 이미 Laravel이나 다른 PHP 프레임워크를 사용해본 경험이 있다면, [[Laravel 중급 태스크 목록|중급 수준의 빠른 시작 가이드]]를 참고하는 것이 좋습니다.

Laravel의 기본 기능들을 샘플로 다루어 보기 위해, 태스크들을 다루는 태스크 목록 애플리케이션을 만들어 보겠습니다. 즉, 전형적인 "할 일" 목록 예제를 다루게 됩니다. 이 프로젝트의 완성된 소스코드는 [https://github.com/laravel/quickstart-basic GitHub에서 확인]할 수 있습니다.

==설치==
우선, Laravel 프레임워크을 새로 설치해야 합니다. [[Laravel Homestead|Homestead 가상머신]]을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 로컬 환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다:

<syntaxhighlight lang='bash'>
composer create-project laravel/laravel quickstart --prefer-dist
</syntaxhighlight>

==데이터베이스 준비==
===데이터베이스 마이그레이션===
먼저, 데이터베이스 테이블을 정의하기 위해 마이그레이션을 사용해 보겠습니다. Laravel의 데이터베이스 마이그레이션은 유창하고 표현적인 PHP 코드를 사용하여 데이터베이스 테이블 구조와 수정 사항을 쉽게 정의할 수 있는 방법을 제공합니다. 팀원들에게 데이터베이스의 로컬 복사본에 수동으로 열을 추가하라고 지시하는 대신, 소스 컨트롤에 푸시한 마이그레이션을 실행하기만 하면 됩니다.

모든 태스크를 저장할 데이터베이스 테이블을 만들어봅시다. [[Artisan CLI]]를 사용하면 다양한 클래스를 생성할 수 있으며, Laravel 프로젝트를 구축하는 동안 많은 타이핑을 줄일 수 있습니다. 이번에는 <code>make:migration</code> 명령어를 사용하여 태스크 테이블에 대한 새 데이터베이스 마이그레이션을 생성해보겠습니다:

<syntaxhighlight lang='bash'>
php artisan make:migration create_tasks_table --create=tasks
</syntaxhighlight>

마이그레이션 파일은 프로젝트의 <code>database/migrations</code> 디렉토리에 생성됩니다. 아마도 <code>make:migration</code> 명령어가 이미 자동 증가 ID와 타임스탬프를 마이그레이션 파일에 추가한 것을 보셨을 것입니다. 이 파일을 편집하여 작업 이름을 위한 <code>name</code> 문자열 컬럼을 추가해봅시다:

<syntaxhighlight lang='php'>
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration
{
    /**
     * 마이그레이션을 실행합니다.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * 마이그레이션을 되돌립니다.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tasks');
    }
}
</syntaxhighlight>

마이그레이션을 실행하려면 <code>migrate</code> Artisan 명령어를 사용합니다. Homestead를 사용 중이라면, 호스트 머신이 데이터베이스에 직접 접근할 수 없으므로, 가상머신 내에서 이 명령어를 실행해야 합니다:

<syntaxhighlight lang='bash'>
php artisan migrate
</syntaxhighlight>

이 명령어는 모든 데이터베이스 테이블을 생성합니다. 사용 중인 데이터베이스 클라이언트를 통해 데이터베이스 테이블을 확인하면, 마이그레이션에서 정의한 컬럼이 포함된 새로운 <code>tasks</code> 테이블을 볼 수 있을 것입니다. 이제 Eloquent ORM 모델을 정의할 준비가 되었습니다!

===Eloquent 모델===
[[Laravel Eloquent|Eloquent]]는 Laravel의 기본 ORM(객체 관계 매퍼)입니다. Eloquent를 사용하면 명확하게 정의된 "모델"을 통해 데이터베이스에서 데이터를 쉽게 검색하고 저장할 수 있습니다. 일반적으로 각 Eloquent 모델은 단일 데이터베이스 테이블과 직접적으로 대응됩니다.

따라서, 방금 생성한 <code>tasks</code> 데이터베이스 테이블에 대응되는 <code>Task</code> 모델을 정의해 봅시다. 이 경우, Artisan 명령어를 사용하여 이 모델을 생성할 수 있습니다. <code>make:model</code> 명령어를 사용할 것입니다:

<syntaxhighlight lang='bash'>
php artisan make:model Task
</syntaxhighlight>

모델은 애플리케이션의 <code>app</code> 디렉토리에 배치됩니다. 기본적으로 모델 클래스는 비어 있습니다. Eloquent 모델에 어떤 테이블과 대응되는지 명시적으로 알릴 필요는 없습니다. 왜냐하면 Eloquent는 모델 이름의 복수형을 데이터베이스 테이블로 가정하기 때문입니다. 따라서, <code>Task</code> 모델은 <code>tasks</code> 데이터베이스 테이블과 대응되는 것으로 간주됩니다. 빈 모델은 다음과 같이 생겼습니다:

<syntaxhighlight lang='php'>
<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Task extends Model
{
    //
}
</syntaxhighlight>

라우트를 애플리케이션에 추가하면서 Eloquent 모델을 사용하는 방법에 대해 더 알아볼 것입니다. 물론, 더 많은 정보를 원한다면 [[Eloquent: 시작하기|전체 Eloquent 문서]]를 참조해도 좋습니다.

==라우팅==
===라우트 스터빙===
다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 <code>app/Http/routes.php</code> 파일에 정의됩니다.

이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, <code>app/Http/routes.php</code> 파일에 이러한 모든 라우트를 스터빙해 보겠습니다:

<syntaxhighlight lang='php'>
<?php

use App\Task;
use Illuminate\Http\Request;

/**
 * 작업 대시보드 표시
 */
Route::get('/', function () {
    //
});

/**
 * 새 작업 추가
 */
Route::post('/task', function (Request $request) {
    //
});

/**
 * 작업 삭제
 */
Route::delete('/task/{task}', function (Task $task) {
    //
});
</syntaxhighlight>

{{NOTE}}
만약 여러분의 Laravel 버전에 이미 기본 라우트 파일을 <code>web</code> 미들웨어 그룹 내에 포함하는 <code>RouteServiceProvider</code>가 있다면, <code>routes.php</code> 파일에 그룹을 수동으로 추가할 필요가 없습니다.
{{/NOTE}}

===뷰 표시하기===
다음으로, 우리의 <code>/</code> 라우트를 채워봅시다. 이 라우트에서는 새로운 작업을 추가하는 폼과 현재 모든 작업 목록을 포함하는 HTML 템플릿을 렌더링하고자 합니다.

Laravel에서는 모든 HTML 템플릿이 <code>resources/views</code> 디렉토리에 저장되며, <code>view</code> 헬퍼를 사용하여 해당 라우트에서 이 템플릿 중 하나를 반환할 수 있습니다:

<syntaxhighlight lang='php'>
Route::get('/', function () {
    return view('tasks');
});
</syntaxhighlight>

<code>view</code> 함수에 <code>tasks</code>를 전달하면 <code>resources/views/tasks.blade.php</code>에 있는 템플릿의 View 객체 인스턴스가 생성됩니다. 물론, 이 뷰를 실제로 정의해야 하므로 지금 그것을 해봅시다!

==레이아웃 및 뷰 구성==
이 애플리케이션에는 새 태스크을 추가하는 양식과 현재 모든 태스크를 목록을 포함하는 단일 뷰만 있습니다. 이 뷰를 시각적으로 이해할 수 있도록, 기본 Bootstrap CSS 스타일이 적용된 완성된 애플리케이션의 스크린샷을 여기에 첨부합니다.

[[파일:basic-overview.png]]

===레이아웃 정의하기===
거의 모든 웹 애플리케이션은 페이지마다 동일한 레이아웃을 공유합니다. 예를 들어, 이 애플리케이션에는 모든 페이지에 공통으로 존재하는 상단 탐색 바가 있습니다. (만약 페이지가 둘 이상이라면) Laravel은 Blade '''레이아웃'''을 사용하여 이러한 공통 기능을 각 페이지에 쉽게 공유할 수 있도록 합니다.

앞서 논의한 것처럼, 모든 Laravel 뷰는 <code>resources/views</code>에 저장됩니다. 따라서 <code>resources/views/layouts/app.blade.php</code>에 새로운 레이아웃 뷰를 정의해보겠습니다. <code>.blade.php</code> 확장자는 프레임워크에 [[Blade 템플릿 엔진]]을 사용하여 뷰를 렌더링하도록 지시합니다. 물론 Laravel에서 일반 PHP 템플릿을 사용할 수도 있습니다. 그러나 Blade는 깔끔하고 간결한 템플릿 작성을 위한 편리한 단축키를 제공합니다.

우리의 <code>app.blade.php</code> 뷰는 다음과 같이 생겼습니다:

<syntaxhighlight lang='php'>
<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSS And JavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>
</syntaxhighlight>

이 레이아웃의 <code>@yield('content')</code> 부분을 주목하세요. 이는 자식 페이지가 레이아웃을 확장하여 자신의 콘텐츠를 주입할 수 있는 특별한 Blade 지시어입니다. 다음으로, 이 레이아웃을 사용할 자식 뷰를 정의하고 주요 콘텐츠를 제공해보겠습니다.

===자식 뷰 정의하기===
다음으로, 새 태스크를 생성하는 폼과 기존 작업을 나열하는 테이블을 포함하는 뷰를 정의해야 합니다. 이 뷰는 <code>resources/views/tasks.blade.php</code>에 정의할 것입니다.

Bootstrap CSS 보일러플레이트 일부는 생략하고 중요한 부분만 다루겠습니다. 이 애플리케이션의 전체 소스코드는 [https://github.com/laravel/quickstart-basic GitHub]에서 다운로드할 수 있습니다:

<syntaxhighlight lang='php'>
<!-- resources/views/tasks.blade.php -->

@extends('layouts.app')

@section('content')

    <!-- Bootstrap Boilerplate... -->

    <div class="panel-body">
        <!-- Display Validation Errors -->
        @include('common.errors')

        <!-- New Task Form -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- Task Name -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">Task</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- Add Task Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Add Task
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TODO: Current Tasks -->
@endsection
</syntaxhighlight>

;설명
이 템플릿에 대해 조금 더 설명하겠습니다. 먼저, <code>@extends</code> 지시어는 Blade에게 우리가 <code>resources/views/layouts/app.blade.php</code>에 정의한 레이아웃을 사용하고 있음을 알립니다. <code>@section('content')</code>와 <code>@endsection</code> 사이의 모든 내용은 <code>app.blade.php</code> 레이아웃의 <code>@yield('content')</code> 지시어 위치에 삽입됩니다.

<code>@include('common.errors')</code> 지시어는 <code>resources/views/common/errors.blade.php</code>에 위치한 템플릿을 로드합니다. 이 템플릿은 아직 정의하지 않았지만 곧 정의할 것입니다!

이제 애플리케이션에 대한 기본 레이아웃과 뷰를 정의했습니다. 우리는 이 뷰를 <code>/</code> 라우트에서 다음과 같이 반환하고 있습니다:

<syntaxhighlight lang='php'>
Route::get('/', function () {
    return view('tasks');
});
</syntaxhighlight>

다음으로, 폼 입력을 처리하고 데이터베이스에 새 작업을 추가하기 위한 <code>POST /task</code> 라우트에 코드를 추가할 준비가 되었습니다.

==태스크 추가==
===유효성 검증===
이제 뷰에 폼을 만들었으니, <code>app/Http/routes.php</code>의 <code>POST /task</code> 라우트에 코드를 추가하여 들어오는 폼 입력을 유효성 검증하고 새로운 작업을 생성해야 합니다. 먼저, 입력을 검증해 봅시다.

이 폼의 경우, <code>name</code> 필드를 필수로 하고, <code>255</code>자 이하로 제한할 것입니다. 검사에 실패하면 사용자를 <code>/</code> URL로 리디렉션하고, 이전 입력과 오류를 [[Laravel 세션|세션]]에 플래시할 것입니다. 입력을 세션에 플래시하면 검증 오류가 있을 때에도 사용자의 입력을 유지할 수 있습니다:

<syntaxhighlight lang='php'>
Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);
 
    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }
 
    // 태스크 생성...
});
</syntaxhighlight>

;<code>$errors</code> 변수
잠시 멈추고, 이 예제에서 <code>->withErrors($validator)</code> 부분에 대해 이야기해 봅시다. <code>->withErrors($validator)</code> 호출은 주어진 검증 인스턴스에서 오류를 세션에 플래시하여 뷰에서 <code>$errors</code> 변수를 통해 접근할 수 있도록 합니다.

뷰에서 <code>@include('common.errors')</code> 지시어를 사용하여 폼의 검증 오류를 렌더링했던 것을 기억하십시오. <code>common.errors</code>는 모든 페이지에서 동일한 형식으로 검증 오류를 쉽게 보여줄 수 있게 합니다. 이제 이 뷰의 내용을 정의해 봅시다:

<syntaxhighlight lang='php'>
<!-- resources/views/common/errors.blade.php -->
 
@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Whoops! Something went wrong!</strong>
 
        <br><br>
 
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
</syntaxhighlight>

'''참고''': <code>$errors</code> 변수는 '''모든''' Laravel 뷰에서 사용가능합니다. 검증 오류가 없는 경우, 단순히 빈 <code>ViewErrorBag</code> 인스턴스일 뿐입니다.

===태스크 생성===
입력 검증이 처리되었으므로, 실제로 새 태스크를 생성하여 라우트를 계속 채워 나갑시다. 새 태스크가 생성되면 사용자를 <code>/</code> URL로 리디렉션합니다. 태스크를 생성하기 위해, 새로운 Eloquent 모델에 속성을 설정한 후 <code>save</code> 메소드를 사용할 수 있습니다:

<syntaxhighlight lang='php'>
Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);
 
    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }
 
    $task = new Task;
    $task->name = $request->name;
    $task->save();
 
    return redirect('/');
});
</syntaxhighlight>

훌륭합니다! 이제 태스크를 성공적으로 생성할 수 있습니다. 다음으로, 모든 기존 태스크 목록을 작성하여 뷰를 계속 추가해 봅시다.

===기존 태스크 표시하기===
먼저, <code>/</code> 라우트를 수정하여 모든 기존 태스크를 뷰에 전달해야 합니다. <code>view</code> 함수는 배열 형태의 두 번째 인수를 받아들여 뷰에서 사용할 수 있는 데이터를 전달하며, 배열의 각 키는 뷰 내에서 변수가 됩니다:

<syntaxhighlight lang='php'>
Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('tasks', [
        'tasks' => $tasks
    ]);
});
</syntaxhighlight>

데이터가 전달되면, <code>tasks.blade.php</code> 뷰에서 태스크를 순회하여 테이블에 태스크를 표시할 수 있습니다. <code>@foreach</code> Blade 구조는 간결한 루프를 작성할 수 있게 해주며, 이는 빠른 순수 PHP 코드로 컴파일됩니다:

<syntaxhighlight lang='php'>
@extends('layouts.app')

@section('content')
    <!-- Create Task Form... -->

    <!-- Current Tasks -->
    @if (count($tasks) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
                Current Tasks
            </div>

            <div class="panel-body">
                <table class="table table-striped task-table">

                    <!-- Table Headings -->
                    <thead>
                        <th>Task</th>
                        <th>&nbsp;</th>
                    </thead>

                    <!-- Table Body -->
                    <tbody>
                        @foreach ($tasks as $task)
                            <tr>
                                <!-- Task Name -->
                                <td class="table-text">
                                    <div>{{ $task->name }}</div>
                                </td>

                                <td>
                                    <!-- TODO: Delete Button -->
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection
</syntaxhighlight>

태스크 애플리케이션이 거의 완성되었습니다. 하지만, 완료된 작업을 삭제할 방법이 없습니다. 다음으로 삭제 기능을 추가해 보겠습니다!

==태스크 삭제==
===삭제 버튼 추가===
삭제 버튼을 추가해야 할 곳에 "TODO" 메모를 남겼습니다. 이제 <code>tasks.blade.php</code> 뷰의 태스크 목록 각 행에 삭제 버튼을 추가하겠습니다. 각 태스크에 대해 단일 버튼 폼을 생성할 것입니다. 버튼을 클릭하면 애플리케이션에 <code>DELETE /task</code> 요청이 전송됩니다.

<syntaxhighlight lang='php'>
<tr>
    <!-- 태스크 이름 -->
    <td class="table-text">
        <div>{{ $task->name }}</div>
    </td>
 
    <!-- 삭제 버튼 -->
    <td>
        <form action="{{ url('task/'.$task->id) }}" method="POST">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}
 
            <button type="submit" class="btn btn-danger">
                <i class="fa fa-trash"></i> Delete
            </button>
        </form>
    </td>
</tr>
</syntaxhighlight>

;메소드 스푸핑에 대한 참고
HTML 폼은 <code>GET</code>과 <code>POST</code> HTTP 메소드만 허용하기 때문에, 폼 메소드가 <code>POST</code>로 나열되어 있지만, <code>DELETE</code> 요청을 처리하려면 <code>Route::delete</code> 라우트를 사용합니다. 폼에서 <code>DELETE</code> 요청을 스푸핑하는 방법이 필요합니다.

폼 내에 <code>method_field('DELETE')</code> 함수를 사용하여 <code>DELETE</code> 요청을 스푸핑할 수 있습니다. 이 함수는 Laravel이 인식하고 실제 HTTP 요청 메소드를 덮어쓸 숨겨진 폼 입력을 생성합니다. 생성되는 필드는 다음과 같습니다:

<syntaxhighlight lang='html'>
<input type="hidden" name="_method" value="DELETE">
</syntaxhighlight>

===해당 태스크 삭제===
마지막으로 주어진 태스크를 실제로 삭제하는 로직을 라우트에 추가하겠습니다. [[Laravel 라우팅#라우트 모델 바인딩|암시적 모델 바인딩]]을 사용하여 <code>{task}</code> 라우트 파라미터에 해당하는 <code>Task</code> 모델을 자동으로 조회할 수 있습니다.

라우트 콜백에서는, <code>delete</code> 메소드를 사용하여 레코드를 삭제합니다. 레코드가 삭제되면 사용자를 <code>/</code> URL로 리디렉션합니다:

<syntaxhighlight lang='php'>
Route::delete('/task/{task}', function (Task $task) {
    $task->delete();
 
    return redirect('/');
});
</syntaxhighlight>
@@ 11번째 줄: / 11번째 줄: @@
 ==설치==
-[[Laravel Homestead|Homestead 가상머신]]을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 여기서는 도커 기반 실습환경에서 진행합니다.
+우선, Laravel 프레임워크을 새로 설치해야 합니다. [[Laravel Homestead|Homestead 가상머신]]을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 로컬 환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다:
-===도커 기반 실습환경 (선택사항)===
-<syntaxhighlight lang='bash'>
-mkdir ~/workspace
-cd ~/workspace
-docker run --name laravel --rm -it -v ${PWD}:/workspace -w /workspace --network host -h docker --entrypoint="" bitnami/laravel bash
-</syntaxhighlight>
-<syntaxhighlight lang='console'>
-root@wsl:~# mkdir ~/workspace
-root@wsl:~# cd ~/workspace
-root@wsl:~/workspace$ docker run --name laravel --rm -it -v ${PWD}:/workspace -w /workspace --network host -h docker --entrypoint="" bitnami/laravel bash
-Unable to find image 'bitnami/laravel:latest' locally
-latest: Pulling from bitnami/laravel
-b20dd80ae86: Pull complete
-Digest: sha256:d16af27a0d4c2f6f3f71c730d7def97de91e0b2ea0233e84dc758340521b1629
-Status: Downloaded newer image for bitnami/laravel:latest
-root@docker:/workspace#
-</syntaxhighlight>
-===Laravel 설치===
-환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다:
 <syntaxhighlight lang='bash'>
 composer create-project laravel/laravel quickstart --prefer-dist
 </syntaxhighlight>
-<syntaxhighlight lang='console'>
-root@docker:/workspace# composer create-project laravel/laravel quickstart --prefer-dist
-Creating a "laravel/laravel" project at "./quickstart"
-Installing laravel/laravel (v11.1.1)
-...
-   INFO  Preparing database.
-  Creating migration table ................................................... 7.50ms DONE
-   INFO  Running migrations.
-_01_01_000000_create_users_table ...................................... 25.95ms DONE
-_01_01_000001_create_cache_table ....................................... 8.63ms DONE
-_01_01_000002_create_jobs_table ....................................... 21.42ms DONE
-</syntaxhighlight>
-<syntaxhighlight lang='console'>
-root@docker:/workspace# cd quickstart/
-root@docker:/workspace/quickstart# find app/ routes/ resources/ | grep .php
-app/Providers/AppServiceProvider.php
-app/Http/Controllers/Controller.php
-app/Models/User.php
-routes/console.php
-routes/web.php
-resources/views/welcome.blade.php
-</syntaxhighlight>
-{{소스헤더|개발서버 실행}}
-<syntaxhighlight lang='console'>
-root@docker:/workspace/quickstart# php artisan serve
-   INFO  Server running on [http://127.0.0.1:8000].
-  Press Ctrl+C to stop the server
-^C
-</syntaxhighlight>
-'''참고''': [[composer create-project laravel/laravel quickstart --prefer-dist]]
-[[파일:Fresh-dark.png|640px]]
-===vscode 실행 (선택사항)===
-<syntaxhighlight lang='console'>
-root@wsl:~# code ~/workspace/quickstart/
-root@wsl:~#
-</syntaxhighlight>
-wsl에서는 docker와 디렉토리를 공유합니다. 따라서 vscode에서 파일 편집은 가능하지만 Artisan CLI 명령어는 실행할 수 없습니다. Artisan CLI 명령어는 docker 컨테이너 내부에서 실행해야 합니다.
 ==데이터베이스 준비==
@@ 95번째 줄: / 25번째 줄: @@
 <syntaxhighlight lang='bash'>
 php artisan make:migration create_tasks_table --create=tasks
-</syntaxhighlight>
-<syntaxhighlight lang='console'>
-$ php artisan make:migration create_tasks_table --create=tasks
-   INFO  Migration [database/migrations/2024_06_15_101234_create_tasks_table.php] created successfully.
 </syntaxhighlight>
 마이그레이션 파일은 프로젝트의 <code>database/migrations</code> 디렉토리에 생성됩니다. 아마도 <code>make:migration</code> 명령어가 이미 자동 증가 ID와 타임스탬프를 마이그레이션 파일에 추가한 것을 보셨을 것입니다. 이 파일을 편집하여 작업 이름을 위한 <code>name</code> 문자열 컬럼을 추가해봅시다:
-{{소스헤더|database/migrations/2024_06_15_101234_create_tasks_table.php}}
+<syntaxhighlight lang='php'>
-<syntaxhighlight lang='php' highlight='16'>
 <?php
+use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-return new class extends Migration
+class CreateTasksTable extends Migration
 {
      /**
-      * Run the migrations.
+      * 마이그레이션을 실행합니다.
+     *
+     * @return void
       */
-     public function up(): void
+     public function up()
      {
          Schema::create('tasks', function (Blueprint $table) {
-             $table->id();
+             $table->increments('id');
              $table->string('name');
              $table->timestamps();
@@ 127번째 줄: / 52번째 줄: @@
      /**
-      * Reverse the migrations.
+      * 마이그레이션을 되돌립니다.
+     *
+     * @return void
       */
-     public function down(): void
+     public function down()
      {
-         Schema::dropIfExists('tasks');
+         Schema::drop('tasks');
      }
-};
+}
 </syntaxhighlight>
@@ 140번째 줄: / 67번째 줄: @@
 <syntaxhighlight lang='bash'>
 php artisan migrate
-</syntaxhighlight>
-<syntaxhighlight lang='console'>
-$ php artisan migrate
-   INFO  Running migrations.
-_06_15_101234_create_tasks_table ....................................... 9.24ms DONE
 </syntaxhighlight>
@@ 159번째 줄: / 79번째 줄: @@
 php artisan make:model Task
 </syntaxhighlight>
-<syntaxhighlight lang='console'>
-$ php artisan make:model Task
-   INFO  Model [app/Models/Task.php] created successfully.
+모델은 애플리케이션의 <code>app</code> 디렉토리에 배치됩니다. 기본적으로 모델 클래스는 비어 있습니다. Eloquent 모델에 어떤 테이블과 대응되는지 명시적으로 알릴 필요는 없습니다. 왜냐하면 Eloquent는 모델 이름의 복수형을 데이터베이스 테이블로 가정하기 때문입니다. 따라서, <code>Task</code> 모델은 <code>tasks</code> 데이터베이스 테이블과 대응되는 것으로 간주됩니다. 빈 모델은 다음과 같이 생겼습니다:
-</syntaxhighlight>
-모델은 애플리케이션의 <code>app/Models</code> 디렉토리에 배치됩니다. 기본적으로 모델 클래스는 비어 있습니다. Eloquent 모델에 어떤 테이블과 대응되는지 명시적으로 알릴 필요는 없습니다. 왜냐하면 Eloquent는 모델 이름의 복수형을 데이터베이스 테이블로 가정하기 때문입니다. 따라서, <code>Task</code> 모델은 <code>tasks</code> 데이터베이스 테이블과 대응되는 것으로 간주됩니다. 빈 모델은 다음과 같이 생겼습니다:
-{{소스헤더|app/Models/Task.php}}
 <syntaxhighlight lang='php'>
 <?php
-namespace App\Models;
+namespace App;
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 class Task extends Model
 {
-     use HasFactory;
+     //
 }
 </syntaxhighlight>
@@ 187번째 줄: / 99번째 줄: @@
 ==라우팅==
 ===라우트 스터빙===
-다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 <code>routes</code> 디렉토리에 정의됩니다.
+다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 <code>app/Http/routes.php</code> 파일에 정의됩니다.
-이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, <code>routes/web.php</code> 파일에 이러한 모든 라우트를 스터빙해 보겠습니다:
+이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, <code>app/Http/routes.php</code> 파일에 이러한 모든 라우트를 스터빙해 보겠습니다:
-{{소스헤더|routes/web.php}}
 <syntaxhighlight lang='php'>
 <?php
-use Illuminate\Support\Facades\Route;
+use App\Task;
+use Illuminate\Http\Request;
 /**
-  * Show Task Dashboard
+  * 작업 대시보드 표시
   */
 Route::get('/', function () {
@@ 205번째 줄: / 117번째 줄: @@
 /**
-  * Add New Task
+  * 새 작업 추가
   */
 Route::post('/task', function (Request $request) {
@@ 212번째 줄: / 124번째 줄: @@
 /**
-  * Delete Task
+  * 작업 삭제
   */
 Route::delete('/task/{task}', function (Task $task) {
@@ 218번째 줄: / 130번째 줄: @@
 });
 </syntaxhighlight>
+{{NOTE}}
+만약 여러분의 Laravel 버전에 이미 기본 라우트 파일을 <code>web</code> 미들웨어 그룹 내에 포함하는 <code>RouteServiceProvider</code>가 있다면, <code>routes.php</code> 파일에 그룹을 수동으로 추가할 필요가 없습니다.
+{{/NOTE}}
 ===뷰 표시하기===
@@ 224번째 줄: / 140번째 줄: @@
 Laravel에서는 모든 HTML 템플릿이 <code>resources/views</code> 디렉토리에 저장되며, <code>view</code> 헬퍼를 사용하여 해당 라우트에서 이 템플릿 중 하나를 반환할 수 있습니다:
-{{소스헤더|routes/web.php}}
+<syntaxhighlight lang='php'>
-<syntaxhighlight lang='php' highlight='2'>
 Route::get('/', function () {
      return view('tasks');
@@ 245번째 줄: / 160번째 줄: @@
 우리의 <code>app.blade.php</code> 뷰는 다음과 같이 생겼습니다:
-{{소스헤더|resources/views/layouts/app.blade.php}}
 <syntaxhighlight lang='php'>
+<!-- resources/views/layouts/app.blade.php -->
 <!DOCTYPE html>
 <html lang="en">
      <head>
          <title>Laravel Quickstart - Basic</title>
-         <link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
+         <!-- CSS And JavaScript -->
      </head>
      <body>
-         <nav class="navbar navbar-light bg-light border-bottom">
+         <div class="container">
-             <div class="container-fluid">
+             <nav class="navbar navbar-default">
-                 Task List
+                 <!-- Navbar Contents -->
-             </div>
+             </nav>
-         </nav>
+         </div>
          @yield('content')
@@ 273번째 줄: / 190번째 줄: @@
 Bootstrap CSS 보일러플레이트 일부는 생략하고 중요한 부분만 다루겠습니다. 이 애플리케이션의 전체 소스코드는 [https://github.com/laravel/quickstart-basic GitHub]에서 다운로드할 수 있습니다:
-{{소스헤더|resources/views/tasks.blade.php}}
 <syntaxhighlight lang='php'>
+<!-- resources/views/tasks.blade.php -->
 @extends('layouts.app')
@@ 280번째 줄: / 198번째 줄: @@
      <!-- Bootstrap Boilerplate... -->
-    <div class="card m-3">
-        <div class="card-header">
-            New Task
-        </div>
-        <div class="card-body">
+    <div class="panel-body">
-            <!-- Display Validation Errors -->
+        <!-- Display Validation Errors -->
-            @include('common.errors')
+        @include('common.errors')
+        <!-- New Task Form -->
+        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
+            {{ csrf_field() }}
-             <!-- New Task Form -->
+             <!-- Task Name -->
-             <form action="{{ url('task') }}" method="POST" class="form-horizontal">
+             <div class="form-group">
-                {{ csrf_field() }}
+                <label for="task" class="col-sm-3 control-label">Task</label>
-                <!-- Task Name -->
+                 <div class="col-sm-6">
-                 <div class="mb-3">
+                     <input type="text" name="name" id="task-name" class="form-control">
-                    <label for="task">Task</label>
-                     <input type="text" name="name" id="task" class="form-control">
                  </div>
+            </div>
-                <!-- Add Task Button -->
+            <!-- Add Task Button -->
-                 <button type="submit" class="btn btn-primary">
+            <div class="form-group">
-                    Add Task
+                 <div class="col-sm-offset-3 col-sm-6">
-                 </button>
+                    <button type="submit" class="btn btn-default">
-             </form>
+                        <i class="fa fa-plus"></i> Add Task
-         </div>
+                    </button>
+                 </div>
+             </div>
+         </form>
      </div>
@@ 314번째 줄: / 234번째 줄: @@
 이 템플릿에 대해 조금 더 설명하겠습니다. 먼저, <code>@extends</code> 지시어는 Blade에게 우리가 <code>resources/views/layouts/app.blade.php</code>에 정의한 레이아웃을 사용하고 있음을 알립니다. <code>@section('content')</code>와 <code>@endsection</code> 사이의 모든 내용은 <code>app.blade.php</code> 레이아웃의 <code>@yield('content')</code> 지시어 위치에 삽입됩니다.
-<code>@include('common.errors')</code> 지시어는 <code>resources/views/common/errors.blade.php</code>에 위치한 템플릿을 로드합니다. 이 템플릿은 아직 정의하지 않았지만, 곧 정의할 것입니다!
+<code>@include('common.errors')</code> 지시어는 <code>resources/views/common/errors.blade.php</code>에 위치한 템플릿을 로드합니다. 이 템플릿은 아직 정의하지 않았지만 곧 정의할 것입니다!
 이제 애플리케이션에 대한 기본 레이아웃과 뷰를 정의했습니다. 우리는 이 뷰를 <code>/</code> 라우트에서 다음과 같이 반환하고 있습니다:
-{{소스헤더|routes/web.php}}
 <syntaxhighlight lang='php'>
 Route::get('/', function () {
@@ 329번째 줄: / 248번째 줄: @@
 ==태스크 추가==
 ===유효성 검증===
-이제 뷰에 폼을 만들었으니, <code>routes/web.php</code>의 <code>POST /task</code> 라우트에 코드를 추가하여 들어오는 폼 입력을 유효성 검증하고 새 태스크를 생성해야 합니다. 먼저, 입력을 검증해 봅시다.
+이제 뷰에 폼을 만들었으니, <code>app/Http/routes.php</code>의 <code>POST /task</code> 라우트에 코드를 추가하여 들어오는 폼 입력을 유효성 검증하고 새로운 작업을 생성해야 합니다. 먼저, 입력을 검증해 봅시다.
-이 폼의 경우, <code>name</code> 필드를 필수로 하고, <code>255</code>자 이하로 제한할 것입니다. 검증에 실패하면 사용자를 <code>/</code> URL로 리디렉션하고, 이전 입력과 오류를 [[Laravel 세션|세션]]에 플래시할 것입니다. 입력을 세션에 플래시하면 검증 오류가 있을 때에도 사용자의 입력을 유지할 수 있습니다:
+이 폼의 경우, <code>name</code> 필드를 필수로 하고, <code>255</code>자 이하로 제한할 것입니다. 검사에 실패하면 사용자를 <code>/</code> URL로 리디렉션하고, 이전 입력과 오류를 [[Laravel 세션|세션]]에 플래시할 것입니다. 입력을 세션에 플래시하면 검증 오류가 있을 때에도 사용자의 입력을 유지할 수 있습니다:
-{{소스헤더|routes/web.php}}
 <syntaxhighlight lang='php'>
-Route::post('/task', function () {
+Route::post('/task', function (Request $request) {
-     $validator = Validator::make(Request::all(), [
+     $validator = Validator::make($request->all(), [
          'name' => 'required|max:255',
      ]);
@@ 346번째 줄: / 264번째 줄: @@
      }
-     // Create The Task...
+     // 태스크 생성...
 });
 </syntaxhighlight>
@@ 355번째 줄: / 273번째 줄: @@
 뷰에서 <code>@include('common.errors')</code> 지시어를 사용하여 폼의 검증 오류를 렌더링했던 것을 기억하십시오. <code>common.errors</code>는 모든 페이지에서 동일한 형식으로 검증 오류를 쉽게 보여줄 수 있게 합니다. 이제 이 뷰의 내용을 정의해 봅시다:
-{{소스헤더|resources/views/common/errors.blade.php}}
 <syntaxhighlight lang='php'>
+<!-- resources/views/common/errors.blade.php -->
 @if (count($errors) > 0)
      <!-- Form Error List -->
@@ 378번째 줄: / 297번째 줄: @@
 입력 검증이 처리되었으므로, 실제로 새 태스크를 생성하여 라우트를 계속 채워 나갑시다. 새 태스크가 생성되면 사용자를 <code>/</code> URL로 리디렉션합니다. 태스크를 생성하기 위해, 새로운 Eloquent 모델에 속성을 설정한 후 <code>save</code> 메소드를 사용할 수 있습니다:
-{{소스헤더|routes/web.php}}
+<syntaxhighlight lang='php'>
-<syntaxhighlight lang='php' highlight='12-16'>
+Route::post('/task', function (Request $request) {
-Route::post('/task', function () {
+     $validator = Validator::make($request->all(), [
-     $validator = Validator::make(Request::all(), [
          'name' => 'required|max:255',
      ]);
@@ 392번째 줄: / 310번째 줄: @@
      $task = new Task;
-     $task->name = Request::input('name');
+     $task->name = $request->name;
      $task->save();
@@ 404번째 줄: / 322번째 줄: @@
 먼저, <code>/</code> 라우트를 수정하여 모든 기존 태스크를 뷰에 전달해야 합니다. <code>view</code> 함수는 배열 형태의 두 번째 인수를 받아들여 뷰에서 사용할 수 있는 데이터를 전달하며, 배열의 각 키는 뷰 내에서 변수가 됩니다:
-{{소스헤더|routes/web.php}}
+<syntaxhighlight lang='php'>
-<syntaxhighlight lang='php' highlight='3,10-14'>
-<?php
-use App\Models\Task;
-use Illuminate\Support\Facades\Route;
-/**
- * Show Task Dashboard
- */
 Route::get('/', function () {
      $tasks = Task::orderBy('created_at', 'asc')->get();
@@ 425번째 줄: / 334번째 줄: @@
 데이터가 전달되면, <code>tasks.blade.php</code> 뷰에서 태스크를 순회하여 테이블에 태스크를 표시할 수 있습니다. <code>@foreach</code> Blade 구조는 간결한 루프를 작성할 수 있게 해주며, 이는 빠른 순수 PHP 코드로 컴파일됩니다:
-{{소스헤더|resources/views/tasks.blade.php}}
 <syntaxhighlight lang='php'>
 @extends('layouts.app')
 @section('content')
      <!-- Create Task Form... -->
      <!-- Current Tasks -->
      @if (count($tasks) > 0)
-         <div class="card m-3">
+         <div class="panel panel-default">
-             <div class="card-header">
+             <div class="panel-heading">
                  Current Tasks
              </div>
-             <div class="card-body">
+             <div class="panel-body">
-                 <table class="table table-striped">
+                 <table class="table table-striped task-table">
                      <!-- Table Headings -->
                      <thead>
@@ 447번째 줄: / 355번째 줄: @@
                          <th>&nbsp;</th>
                      </thead>
                      <!-- Table Body -->
                      <tbody>
@@ 456번째 줄: / 364번째 줄: @@
                                      <div>{{ $task->name }}</div>
                                  </td>
                                  <td>
                                      <!-- TODO: Delete Button -->
@@ 476번째 줄: / 384번째 줄: @@
 삭제 버튼을 추가해야 할 곳에 "TODO" 메모를 남겼습니다. 이제 <code>tasks.blade.php</code> 뷰의 태스크 목록 각 행에 삭제 버튼을 추가하겠습니다. 각 태스크에 대해 단일 버튼 폼을 생성할 것입니다. 버튼을 클릭하면 애플리케이션에 <code>DELETE /task</code> 요청이 전송됩니다.
-{{소스헤더|resources/views/tasks.blade.php}}
+<syntaxhighlight lang='php'>
-<syntaxhighlight lang='php' highlight='7-17'>
+<tr>
-                            <tr>
+    <!-- 태스크 이름 -->
-                                <!-- Task Name -->
+    <td class="table-text">
-                                <td>
+        <div>{{ $task->name }}</div>
-                                    {{ $task->name }}
+    </td>
-                                </td>
+    <!-- 삭제 버튼 -->
-                                <!-- Delete Button -->
+    <td>
-                                <td>
+        <form action="{{ url('task/'.$task->id) }}" method="POST">
-                                    <form action="{{ url('task/'.$task->id) }}" method="POST">
+            {{ csrf_field() }}
-                                        {{ csrf_field() }}
+            {{ method_field('DELETE') }}
-                                        {{ method_field('DELETE') }}
-                                        <button type="submit" class="btn btn-danger">
+            <button type="submit" class="btn btn-danger">
-                                            Delete
+                <i class="fa fa-trash"></i> Delete
-                                        </button>
+            </button>
-                                    </form>
+        </form>
-                                </td>
+    </td>
-                            </tr>
+</tr>
 </syntaxhighlight>
-;메소드 스푸핑에 대한 참고사항
+;메소드 스푸핑에 대한 참고
-HTML 폼은 <code>GET</code>과 <code>POST</code> HTTP 메소드만 허용하기 때문에, 폼 메소드가 <code>POST</code>로 나열되어 있지만, <code>DELETE</code> 요청을 처리하려면 <code>Route::delete</code> 라우트를 사용합니다. 폼에서 <code>DELETE</code> 요청을 스푸핑할 방법이 필요합니다.
+HTML 폼은 <code>GET</code>과 <code>POST</code> HTTP 메소드만 허용하기 때문에, 폼 메소드가 <code>POST</code>로 나열되어 있지만, <code>DELETE</code> 요청을 처리하려면 <code>Route::delete</code> 라우트를 사용합니다. 폼에서 <code>DELETE</code> 요청을 스푸핑하는 방법이 필요합니다.
-폼 에서 <code>method_field('DELETE')</code> 함수를 사용하여 <code>DELETE</code> 요청을 스푸핑할 수 있습니다. 이 함수는 Laravel이 인식하고 실제 HTTP 요청 메소드를 덮어쓸 숨겨진 폼 입력을 생성합니다. 생성되는 필드는 다음과 같습니다:
+폼 내에 <code>method_field('DELETE')</code> 함수를 사용하여 <code>DELETE</code> 요청을 스푸핑할 수 있습니다. 이 함수는 Laravel이 인식하고 실제 HTTP 요청 메소드를 덮어쓸 숨겨진 폼 입력을 생성합니다. 생성되는 필드는 다음과 같습니다:
 <syntaxhighlight lang='html'>
@@ 512번째 줄: / 419번째 줄: @@
 라우트 콜백에서는, <code>delete</code> 메소드를 사용하여 레코드를 삭제합니다. 레코드가 삭제되면 사용자를 <code>/</code> URL로 리디렉션합니다:
-{{소스헤더|routes/web.php}}
 <syntaxhighlight lang='php'>
 Route::delete('/task/{task}', function (Task $task) {