Привіт! Сьогодні ми створимо простий To-Do додаток за допомогою Laravel. Я проведу вас через кожен крок, ніби ми сидимо разом, пишучи код. Поясню кожен етап так, як я б пояснив це у відео. Почнемо!
Крок 1: Налаштування проекту Laravel
Отже, перше, що нам потрібно зробити, це створити новий проект Laravel. Відкрийте термінал і виконайте наступну команду:
composer create-project laravel/laravel todo-app
Ця команда створює новий проект Laravel під назвою todo-app. Після того, як це буде завершено, перейдіть у папку проекту:
cd todo-app
Зрозуміло? Чудово! Тепер налаштуємо нашу базу даних.
Крок 2: Налаштування бази даних
Laravel потребує базу даних для зберігання наших завдань. Відкрийте файл .env в кореневій папці проекту. Ви побачите налаштування бази даних. Змініть їх на конфігурацію вашої бази даних. Виглядатиме це приблизно так:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo_app
DB_USERNAME=root
DB_PASSWORD=yourpassword
Замість yourpassword введіть свій реальний пароль MySQL. Після цього перевіримо підключення до бази даних, виконавши команду:
php artisan migrate
Якщо ви побачите “Migration table created successfully”, значить все готово! 🎉
Крок 3: Створення моделі завдання та міграції
Тепер давайте створимо модель Task. Вона буде представляти завдання в нашому додатку. Виконайте цю команду:
php artisan make:model Task -m
Ця команда робить дві речі:
- Створює модель
Taskу папціapp/Models. - Створює файл міграції в папці
database/migrations.
Відкрийте файл міграції (він буде в папці database/migrations, з іменем типу 2023_xx_xx_create_tasks_table.php). Тепер визначимо структуру таблиці tasks. Ось як це має виглядати:
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->boolean('is_completed')->default(false);
$table->timestamps();
});
}
Ми додали стовпець title для завдання, стовпець is_completed, щоб відстежувати, чи виконано завдання, та часові мітки. Коли будете готові, виконайте міграцію за допомогою команди:
php artisan migrate
Це створить таблицю tasks у вашій базі даних. Легко, правда? Давайте рухатись далі!
Крок 4: Створення TaskController
Тепер давайте обробимо логіку для нашого To-Do додатку. Створимо контролер:
php artisan make:controller TaskController
Це створить файл TaskController.php у папці app/Http/Controllers. Відкрийте його, і давайте додамо методи для нашого додатку.
1. Метод Index
Перш за все, створимо метод index, щоб відображати всі завдання:
public function index()
{
$tasks = Task::all(); // Отримуємо всі завдання з бази даних
return view('tasks.index', compact('tasks')); // Передаємо завдання у вигляд
}
Цей метод отримує всі завдання та передає їх у Blade вигляд під назвою tasks.index. Цей вигляд ми створимо пізніше.
2. Метод Store
Тепер додамо метод для створення нових завдань:
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
]);
Task::create(['title' => $request->title]);
return redirect()->route('tasks.index');
}
Цей метод перевіряє введення, створює нове завдання і перенаправляє назад до списку завдань.
3. Метод Update
Тепер додамо метод update, щоб позначати завдання як виконане:
public function update(Request $request, Task $task)
{
$task->update(['is_completed' => $request->is_completed]);
return redirect()->route('tasks.index');
}
4. Метод Destroy
Нарешті, додамо метод для видалення завдань:
public function destroy(Task $task)
{
$task->delete();
return redirect()->route('tasks.index');
}
Готово! Наш контролер готовий.
Крок 5: Визначення маршрутів
Тепер давайте визначимо маршрути для нашого додатку.
Відкрийте файл routes/web.php і додайте ці маршрути:
use App\Http\Controllers\TaskController;
Route::get('/', [TaskController::class, 'index'])->name('tasks.index');
Route::post('/tasks', [TaskController::class, 'store'])->name('tasks.store');
Route::put('/tasks/{task}', [TaskController::class, 'update'])->name('tasks.update');
Route::delete('/tasks/{task}', [TaskController::class, 'destroy'])->name('tasks.destroy');
Ці маршрути оброблятимуть всі дії для нашого To-Do додатку.
Крок 6: Створення Blade виглядів
Нарешті, давайте створимо вигляди для нашого додатку.
1. Файл макету
Спочатку нам потрібен файл макету для нашої HTML структури. Створіть файл під назвою resources/views/layouts/app.blade.php:
<html>
<head>
<title>To-Do App</title>
</head>
<body>
@yield('content')
</body>
</html>
2. Вигляд індексу завдань
Тепер створіть файл в resources/views/tasks/index.blade.php. Ось як він виглядатиме:
@extends('layouts.app')
@section('content')
<h1>To-Do List</h1>
<form action="{{ route('tasks.store') }}" method="POST">
@csrf
<input type="text" name="title" placeholder="Add Task">
<button type="submit">Add Task</button>
</form>
@foreach ($tasks as $task)
<form id="update-task-{{ $task->id }}" action="{{ route('tasks.update', $task) }}" method="POST">
@csrf
@method('PUT')
<input type="checkbox"
{{ $task->is_completed ? 'checked' : '' }}
onchange="event.preventDefault(); document.getElementById('update-task-{{ $task->id }}').submit();">
{{ $task->title }}
</form>
<form action="{{ route('tasks.destroy', $task) }}" method="POST">
@csrf
@method('DELETE')
<button type="submit">Delete</button>
</form>
@endforeach
@endsection
Крок 7: Тестування вашого To-Do додатку
Ми майже закінчили! Запустіть сервер розробки Laravel:
php artisan serve
Відвідайте http://localhost:8000, і ви побачите ваш To-Do додаток в дії. Тепер ви можете додавати завдання, позначати їх як виконані та видаляти їх.
Ось і все! Ми створили простий, але функціональний To-Do додаток за допомогою Laravel. Сподіваюся, вам сподобалося будувати цей додаток разом зі мною. Якщо у вас є питання або хочете створити щось більш складне наступного разу, дайте знати. Щасливого кодування! 😊
Я не поділився результатом тут, але якщо ви слідуєте за цією статтею і створюєте To-Do додаток, будь ласка, поділіться результатами в коментарях. Мені було б цікаво побачити, як це вийшло! 😊
Слідкуйте за мною на YouTube: https://www.youtube.com/@ProgrammingWithRoki
Купити домен і хостинг: Hostinger
Перекладено з: Let’s Build a To-Do App in Laravel Together