Laravel 실습 : 할 일 목록(To-Do List)

실습 개요

1. 프로젝트 초기화 및 설정
2. 데이터베이스 설정
3. 마이그레이션 생성 및 실행 (할 일 목록 테이블 만들기)
4. 모델과 컨트롤러 생성
5. 라우팅 및 뷰 파일 생성
6. CRUD 기능 추가 (할 일 추가, 조회, 수정, 삭제)

---

 

1. Laravel 프로젝트 생성

터미널에서 Laravel 프로젝트를 새로 생성합니다.

 

composer create-project --prefer-dist laravel/laravel="8.*" todo-app

 

 

 

2. MySQL 데이터베이스 설정

MySQL 데이터베이스와 사용자 계정을 생성합니다. 터미널이나 MySQL 클라이언트에서 다음 명령어를 실행하세요.

CREATE DATABASE todo_app;
CREATE USER 'todo_user'@'localhost' IDENTIFIED BY 'password123';
GRANT ALL PRIVILEGES ON todo_app.* TO 'todo_user'@'localhost';
FLUSH PRIVILEGES;

 

이 명령어로 todo_app라는 데이터베이스와 todo_user라는 사용자를 생성하고, 비밀번호를 password123으로 설정합니다.

 

3. Laravel .env 파일에서 데이터베이스 연결 설정

Laravel 프로젝트 폴더에 있는 .env 파일을 열고, 다음 설정을 업데이트합니다.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_app
DB_USERNAME=todo_user
DB_PASSWORD=password123

 

((MySQL 정보에 맞게 수정하세요.))

 

4. 마이그레이션 생성: 할 일 목록 테이블 만들기

할 일 목록을 저장할 테이블을 만들기 위해 마이그레이션 파일을 생성합니다.

php artisan make:migration create_tasks_table --create=tasks

 

이 명령어를 실행하면 database/migrations 폴더에 새로운 마이그레이션 파일이 생성됩니다.

 

파일을 열어 다음과 같이 테이블 구조를 정의합니다.

// database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');       // 할 일 제목
        $table->text('description');   // 할 일 설명
        $table->boolean('completed')->default(false); // 완료 여부
        $table->timestamps();          // 생성 및 수정 시간
    });
}​

 

이제 마이그레이션을 실행하여 tasks 테이블을 생성합니다.

php artisan migrate

 

5. 모델 생성: Task 모델 만들기

Eloquent 모델을 사용해 tasks 테이블을 조작합니다. Task 모델을 생성합니다.

php artisan make:model Task

 

app/Models/Task.php 파일이 생성되었을 것입니다. 여기에서 모델이 어떤 필드를 조작할 수 있는지 지정합니다.

 

// app/Models/Task.php

protected $fillable = ['title', 'description', 'completed'];

 

 

6. 컨트롤러 생성 및 로직 추가

할 일 목록의 CRUD 기능을 처리할 컨트롤러를 생성합니다.

php artisan make:controller TaskController

 

TaskController.php 파일을 열고, 할 일 목록의 각 기능 (목록 조회, 추가, 수정, 삭제)을 위한 메서드를 추가합니다.

// app/Http/Controllers/TaskController.php

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

class TaskController extends Controller
{
    // 할 일 목록 조회
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    // 할 일 추가 폼 표시
    public function create()
    {
        return view('tasks.create');
    }

    // 할 일 저장
    public function store(Request $request)
    {
        Task::create($request->all());
        return redirect()->route('tasks.index');
    }

    // 할 일 수정 폼 표시
    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    // 할 일 업데이트
    public function update(Request $request, Task $task)
    {
        $task->update($request->all());
        return redirect()->route('tasks.index');
    }

    // 할 일 삭제
    public function destroy(Task $task)
    {
        $task->delete();
        return redirect()->route('tasks.index');
    }
}

 

7. 라우팅 설정

routes/web.php 파일에서 라우팅을 설정하여 각 URL에 대응하는 기능을 정의합니다.

use App\Http\Controllers\TaskController;

Route::resource('tasks', TaskController::class);

 

Route::resource를 사용하면 index, create, store, edit, update, destroy와 같은 기본 CRUD 경로가 자동으로 생성됩니다.

 

8. 뷰 파일 생성

할 일 목록 애플리케이션의 뷰 파일을 생성합니다. resources/views/tasks 폴더를 만들고 다음과 같은 파일을 추가하세요.

할 일 목록 페이지 (index.blade.php)

<!-- resources/views/tasks/index.blade.php -->

<h1>할 일 목록</h1>
<a href="{{ route('tasks.create') }}">새 할 일 추가</a>

<ul>
    @foreach ($tasks as $task)
        <li>
            {{ $task->title }}
            <a href="{{ route('tasks.edit', $task) }}">수정</a>
            <form action="{{ route('tasks.destroy', $task) }}" method="POST" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit">삭제</button>
            </form>
        </li>
    @endforeach
</ul>

 

 

새 할 일 추가 페이지 (create.blade.php)

<!-- resources/views/tasks/create.blade.php -->

<h1>새 할 일 추가</h1>
<form action="{{ route('tasks.store') }}" method="POST">
    @csrf
    <label>제목:</label>
    <input type="text" name="title">
    <label>설명:</label>
    <textarea name="description"></textarea>
    <button type="submit">추가</button>
</form>

 

 

할 일 수정 페이지 (edit.blade.php)

<!-- resources/views/tasks/edit.blade.php -->

<h1>할 일 수정</h1>
<form action="{{ route('tasks.update', $task) }}" method="POST">
    @csrf
    @method('PUT')
    <label>제목:</label>
    <input type="text" name="title" value="{{ $task->title }}">
    <label>설명:</label>
    <textarea name="description">{{ $task->description }}</textarea>
    <button type="submit">업데이트</button>
</form>

 

 

9. 애플리케이션 실행

이제 애플리케이션을 실행하여 할 일 목록 애플리케이션이 잘 작동하는지 확인해 보세요.

 

php artisan serve

 

 

브라우저에서 http://127.0.0.1:8000/tasks로 접속하면 할 일 목록 애플리케이션을 확인할 수 있습니다.