편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
6번째 줄: | 6번째 줄: | ||
==소개== | ==소개== | ||
이 빠른 시작 가이드는 Laravel 프레임워크에 대한 | 이 빠른 시작 가이드는 Laravel 프레임워크에 대한 기본적인 소개를 제공하며, 데이터베이스 마이그레이션, Eloquent ORM, 라우팅, 유효성검사, 뷰, Blade 템플릿에 관한 내용을 포함하고 있습니다. Laravel 프레임워크나 PHP 프레임워크를 처음 접하는 경우에 좋은 시작점이 될 것입니다. 이미 Laravel이나 다른 PHP 프레임워크를 사용해본 경험이 있다면, [[Laravel 중급 태스크 목록|중급 수준의 빠른 시작 가이드]]를 참고하는 것이 좋습니다. | ||
Laravel의 기본 기능들을 | Laravel의 기본 기능들을 샘플링하기 위해, 우리가 수행하려는 모든 태스크을 추적하는 간단한 태스크 목록을 작성해 보겠습니다. 다시 말해, 전형적인 "할 일" 목록 예제를 만들 것입니다. 이 프로젝트의 완성된 소스코드는 [https://github.com/laravel/quickstart-basic GitHub에서 확인]할 수 있습니다. | ||
==설치== | ==설치== | ||
;Laravel 설치 | |||
우선, Laravel 프레임워크을 새로 설치해야 합니다. Homestead 가상머신을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 로컬 환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다: | |||
<syntaxhighlight lang='bash'> | <syntaxhighlight lang='bash'> | ||
composer create-project laravel/laravel quickstart --prefer-dist | |||
</syntaxhighlight> | </syntaxhighlight> | ||
;<del>Quickstart 설치 (선택사항)</del> | |||
나머지 Quickstart를 읽기만 해도 되지만, 소스코드를 다운로드하여 로컬 머신에서 실행하려면 Git 저장소를 복제하고 의존성을 설치할 수 있습니다: | |||
<syntaxhighlight lang='bash'> | <syntaxhighlight lang='bash'> | ||
git clone https://github.com/laravel/quickstart-basic quickstart | |||
cd quickstart | |||
composer install | |||
php artisan migrate | |||
</syntaxhighlight> | </syntaxhighlight> | ||
로컬 Laravel 개발 환경 구축에 대한 보다 완전한 문서를 보려면, [[Laravel Homestead|Homestead]] 및 [[Laravel 설치|설치]] 문서를 참조하세요. | |||
[[ | |||
==데이터베이스 준비== | ==데이터베이스 준비== | ||
===데이터베이스 마이그레이션=== | ===데이터베이스 마이그레이션=== | ||
먼저, 데이터베이스 테이블을 | 먼저, 데이터베이스 마이그레이션을 사용하여 모든 태스크를 저장할 데이터베이스 테이블을 정의해보겠습니다. Laravel의 데이터베이스 마이그레이션은 유창하고 표현력 있는 PHP 코드를 사용하여 데이터베이스 테이블 구조 및 수정사항을 쉽게 정의할 수 있는 방법을 제공합니다. 팀원들에게 로컬 데이터베이스 복사본에 수동으로 컬럼을 추가하도록 지시하는 대신, 소스 컨트롤에 푸시한 마이그레이션을 실행하기만 하면 됩니다. | ||
모든 태스크를 저장할 데이터베이스 테이블을 만들어봅시다. | 따라서 모든 태스크를 저장할 데이터베이스 테이블을 만들어봅시다. Artisan CLI를 사용하면 다양한 클래스를 생성할 수 있으며, Laravel 프로젝트를 구축하는 동안 많은 타이핑을 줄일 수 있습니다. 이번에는 <code>make:migration</code> 명령어를 사용하여 태스크 테이블에 대한 새 데이터베이스 마이그레이션을 생성해보겠습니다: | ||
<syntaxhighlight lang='bash'> | <syntaxhighlight lang='bash'> | ||
php artisan make:migration create_tasks_table --create=tasks | php artisan make:migration create_tasks_table --create=tasks | ||
</syntaxhighlight> | </syntaxhighlight> | ||
마이그레이션 파일은 프로젝트의 <code>database/migrations</code> 디렉토리에 생성됩니다. 아마도 <code>make:migration</code> 명령어가 이미 자동 증가 ID와 타임스탬프를 마이그레이션 파일에 추가한 것을 보셨을 것입니다. 이 파일을 편집하여 작업 이름을 위한 추가 문자열 컬럼을 추가해봅시다: | |||
</ | |||
<syntaxhighlight lang='php'> | |||
<syntaxhighlight lang='php | |||
<?php | <?php | ||
use Illuminate\Database\Schema\Blueprint; | |||
use Illuminate\Database\Migrations\Migration; | use Illuminate\Database\Migrations\Migration; | ||
class CreateTasksTable extends Migration | |||
{ | { | ||
/** | /** | ||
* | * 마이그레이션을 실행합니다. | ||
* | |||
* @return void | |||
*/ | */ | ||
public function up() | public function up() | ||
{ | { | ||
Schema::create('tasks', function (Blueprint $table) { | Schema::create('tasks', function (Blueprint $table) { | ||
$table->id | $table->increments('id'); | ||
$table->string('name'); | $table->string('name'); | ||
$table->timestamps(); | $table->timestamps(); | ||
127번째 줄: | 65번째 줄: | ||
/** | /** | ||
* | * 마이그레이션을 되돌립니다. | ||
* | |||
* @return void | |||
*/ | */ | ||
public function down() | public function down() | ||
{ | { | ||
Schema:: | Schema::drop('tasks'); | ||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
마이그레이션을 실행하려면 <code>migrate</code> Artisan 명령어를 사용합니다. Homestead를 사용 중이라면, 호스트 머신이 데이터베이스에 직접 접근할 수 없으므로 | 마이그레이션을 실행하려면 <code>migrate</code> Artisan 명령어를 사용합니다. Homestead를 사용 중이라면, 호스트 머신이 데이터베이스에 직접 접근할 수 없으므로 가상머신 내에서 이 명령어를 실행해야 합니다: | ||
<syntaxhighlight lang='bash'> | <syntaxhighlight lang='bash'> | ||
php artisan migrate | php artisan migrate | ||
</syntaxhighlight> | </syntaxhighlight> | ||
이 명령어는 모든 데이터베이스 테이블을 생성합니다. 사용 중인 데이터베이스 클라이언트를 통해 데이터베이스 테이블을 확인하면, 마이그레이션에서 정의한 컬럼이 포함된 새로운 <code>tasks</code> 테이블을 볼 수 있을 것입니다. 다음으로, 작업에 대한 Eloquent ORM 모델을 정의할 준비가 되었습니다! | |||
이 명령어는 모든 데이터베이스 테이블을 생성합니다. 사용 중인 데이터베이스 클라이언트를 통해 데이터베이스 테이블을 확인하면, 마이그레이션에서 정의한 컬럼이 포함된 새로운 <code>tasks</code> 테이블을 볼 수 있을 것입니다. | |||
===Eloquent 모델=== | ===Eloquent 모델=== | ||
[[Laravel Eloquent|Eloquent]]는 Laravel의 기본 ORM(객체 관계 매퍼)입니다. Eloquent를 사용하면 명확하게 정의된 "모델"을 | [[Laravel Eloquent|Eloquent]]는 Laravel의 기본 ORM(객체 관계 매퍼)입니다. Eloquent를 사용하면 명확하게 정의된 "모델"을 사용하여 데이터베이스에서 데이터를 쉽게 검색하고 저장할 수 있습니다. 일반적으로 각 Eloquent 모델은 단일 데이터베이스 테이블과 직접적으로 대응됩니다. | ||
따라서, 방금 생성한 <code>tasks</code> 데이터베이스 테이블에 대응되는 <code>Task</code> 모델을 정의해 봅시다. 이 경우, Artisan 명령어를 사용하여 이 모델을 생성할 수 있습니다. <code>make:model</code> 명령어를 사용할 것입니다: | 따라서, 방금 생성한 <code>tasks</code> 데이터베이스 테이블에 대응되는 <code>Task</code> 모델을 정의해 봅시다. 이 경우, Artisan 명령어를 사용하여 이 모델을 생성할 수 있습니다. <code>make:model</code> 명령어를 사용할 것입니다: | ||
159번째 줄: | 92번째 줄: | ||
php artisan make:model Task | php artisan make:model Task | ||
</syntaxhighlight> | </syntaxhighlight> | ||
모델은 애플리케이션의 <code>app</code> 디렉토리에 배치됩니다. 기본적으로 모델 클래스는 비어 있습니다. Eloquent 모델에 어떤 테이블과 대응되는지 명시적으로 알릴 필요는 없습니다. 왜냐하면 Eloquent는 모델 이름의 복수형을 데이터베이스 테이블로 가정하기 때문입니다. 따라서, <code>Task</code> 모델은 <code>tasks</code> 데이터베이스 테이블과 대응되는 것으로 간주됩니다. 빈 모델은 다음과 같이 생겼습니다: | |||
</ | |||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
<?php | <?php | ||
namespace App | namespace App; | ||
use Illuminate\Database\Eloquent\Model; | use Illuminate\Database\Eloquent\Model; | ||
class Task extends Model | class Task extends Model | ||
{ | { | ||
// | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
라우트를 애플리케이션에 추가하면서 Eloquent 모델을 사용하는 방법에 대해 더 | 라우트를 애플리케이션에 추가하면서 Eloquent 모델을 사용하는 방법에 대해 더 배워볼 것입니다. 물론, 더 많은 정보를 원한다면 [[Eloquent: 시작하기|전체 Eloquent 문서]]를 참조해도 좋습니다. | ||
==라우팅== | ==라우팅== | ||
===라우트 스터빙=== | ===라우트 스터빙=== | ||
다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 <code>routes</code> | 다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 <code>app/Http/routes.php</code> 파일에 정의됩니다. | ||
이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, <code>routes | 이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, <code>app/Http/routes.php</code> 파일에 이러한 모든 라우트를 스터빙해 보겠습니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
<?php | <?php | ||
use Illuminate\ | use App\Task; | ||
use Illuminate\Http\Request; | |||
/** | /** | ||
* | * 작업 대시보드 표시 | ||
*/ | */ | ||
Route::get('/', function () { | Route::get('/', function () { | ||
205번째 줄: | 130번째 줄: | ||
/** | /** | ||
* | * 새 작업 추가 | ||
*/ | */ | ||
Route::post('/task', function (Request $request) { | Route::post('/task', function (Request $request) { | ||
212번째 줄: | 137번째 줄: | ||
/** | /** | ||
* | * 작업 삭제 | ||
*/ | */ | ||
Route::delete('/task/{task}', function (Task $task) { | Route::delete('/task/{task}', function (Task $task) { | ||
218번째 줄: | 143번째 줄: | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{NOTE}} | |||
만약 여러분의 Laravel 버전에 이미 기본 라우트 파일을 <code>web</code> 미들웨어 그룹 내에 포함하는 <code>RouteServiceProvider</code>가 있다면, <code>routes.php</code> 파일에 그룹을 수동으로 추가할 필요가 없습니다. | |||
{{/NOTE}} | |||
===뷰 표시하기=== | ===뷰 표시하기=== | ||
224번째 줄: | 153번째 줄: | ||
Laravel에서는 모든 HTML 템플릿이 <code>resources/views</code> 디렉토리에 저장되며, <code>view</code> 헬퍼를 사용하여 해당 라우트에서 이 템플릿 중 하나를 반환할 수 있습니다: | Laravel에서는 모든 HTML 템플릿이 <code>resources/views</code> 디렉토리에 저장되며, <code>view</code> 헬퍼를 사용하여 해당 라우트에서 이 템플릿 중 하나를 반환할 수 있습니다: | ||
<syntaxhighlight lang='php'> | |||
<syntaxhighlight lang='php | |||
Route::get('/', function () { | Route::get('/', function () { | ||
return view('tasks'); | return view('tasks'); | ||
234번째 줄: | 162번째 줄: | ||
==레이아웃 및 뷰 구성== | ==레이아웃 및 뷰 구성== | ||
이 애플리케이션에는 새 | 이 애플리케이션에는 새 작업을 추가하는 양식과 현재 모든 태스크를 나열하는 목록이 포함된 단일 뷰만 있습니다. 이 뷰를 시각적으로 이해할 수 있도록, 기본 Bootstrap CSS 스타일이 적용된 최종 애플리케이션의 스크린샷을 여기에 첨부합니다. | ||
[[파일:basic-overview.png]] | [[파일:basic-overview.png]] | ||
241번째 줄: | 169번째 줄: | ||
거의 모든 웹 애플리케이션은 페이지마다 동일한 레이아웃을 공유합니다. 예를 들어, 이 애플리케이션에는 모든 페이지에 공통으로 존재하는 상단 탐색 바가 있습니다. (만약 페이지가 둘 이상이라면) Laravel은 Blade '''레이아웃'''을 사용하여 이러한 공통 기능을 각 페이지에 쉽게 공유할 수 있도록 합니다. | 거의 모든 웹 애플리케이션은 페이지마다 동일한 레이아웃을 공유합니다. 예를 들어, 이 애플리케이션에는 모든 페이지에 공통으로 존재하는 상단 탐색 바가 있습니다. (만약 페이지가 둘 이상이라면) Laravel은 Blade '''레이아웃'''을 사용하여 이러한 공통 기능을 각 페이지에 쉽게 공유할 수 있도록 합니다. | ||
앞서 논의한 것처럼, 모든 Laravel 뷰는 <code>resources/views</code>에 저장됩니다. 따라서 <code>resources/views/layouts/app.blade.php</code>에 새로운 레이아웃 뷰를 정의해보겠습니다. <code>.blade.php</code> 확장자는 프레임워크에 | 앞서 논의한 것처럼, 모든 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> 뷰는 다음과 같이 생겼습니다: | 우리의 <code>app.blade.php</code> 뷰는 다음과 같이 생겼습니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
<!-- resources/views/layouts/app.blade.php --> | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
<title>Laravel Quickstart - Basic</title> | <title>Laravel Quickstart - Basic</title> | ||
< | |||
<!-- CSS And JavaScript --> | |||
</head> | </head> | ||
<body> | <body> | ||
< | <div class="container"> | ||
< | <nav class="navbar navbar-default"> | ||
<!-- Navbar Contents --> | |||
</ | </nav> | ||
</ | </div> | ||
@yield('content') | @yield('content') | ||
271번째 줄: | 201번째 줄: | ||
다음으로, 새 태스크를 생성하는 폼과 기존 작업을 나열하는 테이블을 포함하는 뷰를 정의해야 합니다. 이 뷰는 <code>resources/views/tasks.blade.php</code>에 정의할 것입니다. | 다음으로, 새 태스크를 생성하는 폼과 기존 작업을 나열하는 테이블을 포함하는 뷰를 정의해야 합니다. 이 뷰는 <code>resources/views/tasks.blade.php</code>에 정의할 것입니다. | ||
부트스트랩 CSS 보일러플레이트 일부는 생략하고 중요한 부분만 다루겠습니다. 이 애플리케이션의 전체 소스코드는 [https://github.com/laravel/quickstart-basic GitHub]에서 다운로드할 수 있습니다: | |||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
<!-- resources/views/tasks.blade.php --> | |||
@extends('layouts.app') | @extends('layouts.app') | ||
280번째 줄: | 211번째 줄: | ||
<!-- Bootstrap Boilerplate... --> | <!-- 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"> | |||
<div class=" | <input type="text" name="name" id="task-name" class="form-control"> | ||
<input type="text" name="name" id="task" class="form-control"> | |||
</div> | </div> | ||
</div> | |||
<!-- Add Task Button --> | |||
<button type="submit" class="btn btn- | <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> | </div> | ||
314번째 줄: | 247번째 줄: | ||
이 템플릿에 대해 조금 더 설명하겠습니다. 먼저, <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>@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> 라우트에서 다음과 같이 반환하고 있습니다: | 이제 애플리케이션에 대한 기본 레이아웃과 뷰를 정의했습니다. 우리는 이 뷰를 <code>/</code> 라우트에서 다음과 같이 반환하고 있습니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
Route::get('/', function () { | Route::get('/', function () { | ||
329번째 줄: | 261번째 줄: | ||
==태스크 추가== | ==태스크 추가== | ||
===유효성 검증=== | ===유효성 검증=== | ||
이제 뷰에 폼을 만들었으니, <code>routes | 이제 뷰에 폼을 만들었으니, <code>app/Http/routes.php</code>의 <code>POST /task</code> 라우트에 코드를 추가하여 들어오는 폼 입력을 유효성 검증하고 새로운 작업을 생성해야 합니다. 먼저, 입력을 검증해 봅시다. | ||
이 폼의 경우, <code>name</code> 필드를 필수로 하고, <code>255</code>자 이하로 제한할 것입니다. | 이 폼의 경우, <code>name</code> 필드를 필수로 하고, <code>255</code>자 이하로 제한할 것입니다. 검사에 실패하면 사용자를 <code>/</code> URL로 리디렉션하고, 이전 입력과 오류를 세션에 플래시할 것입니다. 입력을 세션에 플래시하면 검증 오류가 있을 때에도 사용자의 입력을 유지할 수 있습니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
Route::post('/task', function () { | Route::post('/task', function (Request $request) { | ||
$validator = Validator::make( | $validator = Validator::make($request->all(), [ | ||
'name' => 'required|max:255', | 'name' => 'required|max:255', | ||
]); | ]); | ||
346번째 줄: | 277번째 줄: | ||
} | } | ||
// | // 태스크 생성... | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
355번째 줄: | 286번째 줄: | ||
뷰에서 <code>@include('common.errors')</code> 지시어를 사용하여 폼의 검증 오류를 렌더링했던 것을 기억하십시오. <code>common.errors</code>는 모든 페이지에서 동일한 형식으로 검증 오류를 쉽게 보여줄 수 있게 합니다. 이제 이 뷰의 내용을 정의해 봅시다: | 뷰에서 <code>@include('common.errors')</code> 지시어를 사용하여 폼의 검증 오류를 렌더링했던 것을 기억하십시오. <code>common.errors</code>는 모든 페이지에서 동일한 형식으로 검증 오류를 쉽게 보여줄 수 있게 합니다. 이제 이 뷰의 내용을 정의해 봅시다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
<!-- resources/views/common/errors.blade.php --> | |||
@if (count($errors) > 0) | @if (count($errors) > 0) | ||
<!-- Form Error List --> | <!-- Form Error List --> | ||
378번째 줄: | 310번째 줄: | ||
입력 검증이 처리되었으므로, 실제로 새 태스크를 생성하여 라우트를 계속 채워 나갑시다. 새 태스크가 생성되면 사용자를 <code>/</code> URL로 리디렉션합니다. 태스크를 생성하기 위해, 새로운 Eloquent 모델에 속성을 설정한 후 <code>save</code> 메소드를 사용할 수 있습니다: | 입력 검증이 처리되었으므로, 실제로 새 태스크를 생성하여 라우트를 계속 채워 나갑시다. 새 태스크가 생성되면 사용자를 <code>/</code> URL로 리디렉션합니다. 태스크를 생성하기 위해, 새로운 Eloquent 모델에 속성을 설정한 후 <code>save</code> 메소드를 사용할 수 있습니다: | ||
<syntaxhighlight lang='php'> | |||
<syntaxhighlight lang='php | Route::post('/task', function (Request $request) { | ||
Route::post('/task', function () { | $validator = Validator::make($request->all(), [ | ||
$validator = Validator::make( | |||
'name' => 'required|max:255', | 'name' => 'required|max:255', | ||
]); | ]); | ||
392번째 줄: | 323번째 줄: | ||
$task = new Task; | $task = new Task; | ||
$task->name = | $task->name = $request->name; | ||
$task->save(); | $task->save(); | ||
404번째 줄: | 335번째 줄: | ||
먼저, <code>/</code> 라우트를 수정하여 모든 기존 태스크를 뷰에 전달해야 합니다. <code>view</code> 함수는 배열 형태의 두 번째 인수를 받아들여 뷰에서 사용할 수 있는 데이터를 전달하며, 배열의 각 키는 뷰 내에서 변수가 됩니다: | 먼저, <code>/</code> 라우트를 수정하여 모든 기존 태스크를 뷰에 전달해야 합니다. <code>view</code> 함수는 배열 형태의 두 번째 인수를 받아들여 뷰에서 사용할 수 있는 데이터를 전달하며, 배열의 각 키는 뷰 내에서 변수가 됩니다: | ||
<syntaxhighlight lang='php'> | |||
<syntaxhighlight lang='php | |||
Route::get('/', function () { | Route::get('/', function () { | ||
$tasks = Task::orderBy('created_at', 'asc')->get(); | $tasks = Task::orderBy('created_at', 'asc')->get(); | ||
425번째 줄: | 347번째 줄: | ||
데이터가 전달되면, <code>tasks.blade.php</code> 뷰에서 태스크를 순회하여 테이블에 태스크를 표시할 수 있습니다. <code>@foreach</code> Blade 구조는 간결한 루프를 작성할 수 있게 해주며, 이는 빠른 순수 PHP 코드로 컴파일됩니다: | 데이터가 전달되면, <code>tasks.blade.php</code> 뷰에서 태스크를 순회하여 테이블에 태스크를 표시할 수 있습니다. <code>@foreach</code> Blade 구조는 간결한 루프를 작성할 수 있게 해주며, 이는 빠른 순수 PHP 코드로 컴파일됩니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
@extends('layouts.app') | @extends('layouts.app') | ||
@section('content') | @section('content') | ||
<!-- Create Task Form... --> | <!-- Create Task Form... --> | ||
<!-- Current Tasks --> | <!-- Current Tasks --> | ||
@if (count($tasks) > 0) | @if (count($tasks) > 0) | ||
<div class=" | <div class="panel panel-default"> | ||
<div class=" | <div class="panel-heading"> | ||
Current Tasks | Current Tasks | ||
</div> | </div> | ||
<div class=" | <div class="panel-body"> | ||
<table class="table table-striped"> | <table class="table table-striped task-table"> | ||
<!-- Table Headings --> | <!-- Table Headings --> | ||
<thead> | <thead> | ||
447번째 줄: | 368번째 줄: | ||
<th> </th> | <th> </th> | ||
</thead> | </thead> | ||
<!-- Table Body --> | <!-- Table Body --> | ||
<tbody> | <tbody> | ||
456번째 줄: | 377번째 줄: | ||
<div>{{ $task->name }}</div> | <div>{{ $task->name }}</div> | ||
</td> | </td> | ||
<td> | <td> | ||
<!-- TODO: Delete Button --> | <!-- TODO: Delete Button --> | ||
476번째 줄: | 397번째 줄: | ||
삭제 버튼을 추가해야 할 곳에 "TODO" 메모를 남겼습니다. 이제 <code>tasks.blade.php</code> 뷰의 태스크 목록 각 행에 삭제 버튼을 추가하겠습니다. 각 태스크에 대해 단일 버튼 폼을 생성할 것입니다. 버튼을 클릭하면 애플리케이션에 <code>DELETE /task</code> 요청이 전송됩니다. | 삭제 버튼을 추가해야 할 곳에 "TODO" 메모를 남겼습니다. 이제 <code>tasks.blade.php</code> 뷰의 태스크 목록 각 행에 삭제 버튼을 추가하겠습니다. 각 태스크에 대해 단일 버튼 폼을 생성할 것입니다. 버튼을 클릭하면 애플리케이션에 <code>DELETE /task</code> 요청이 전송됩니다. | ||
<syntaxhighlight lang='php'> | |||
<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> | </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 요청 메소드를 덮어쓸 숨겨진 폼 입력을 생성합니다. 생성되는 필드는 다음과 같습니다: | ||
<syntaxhighlight lang='html'> | <syntaxhighlight lang='html'> | ||
512번째 줄: | 432번째 줄: | ||
라우트 콜백에서는, <code>delete</code> 메소드를 사용하여 레코드를 삭제합니다. 레코드가 삭제되면 사용자를 <code>/</code> URL로 리디렉션합니다: | 라우트 콜백에서는, <code>delete</code> 메소드를 사용하여 레코드를 삭제합니다. 레코드가 삭제되면 사용자를 <code>/</code> URL로 리디렉션합니다: | ||
<syntaxhighlight lang='php'> | <syntaxhighlight lang='php'> | ||
Route::delete('/task/{task}', function (Task $task) { | Route::delete('/task/{task}', function (Task $task) { |