🌟 Давайте зануримося у створення базового CRUD-додатку за допомогою Laravel 11. Ми розглянемо все, що потрібно для початку: налаштування моделей, контролерів, представлень та маршрутів.
Разом створимо простий, але функціональний додаток! 🎉
Стартова сторінка Laravel
Що вам знадобиться:
- Потрібен налаштований проект на Laravel 11. Дізнайтеся, як налаштувати його, слідуючи крокам у моїй нещодавній статті "Початок роботи з Laravel 11: Посібник з інсталяції та конфігурації".
- Також вам знадобиться база даних, яка налаштована у файлі .env.
- Потрібне базове розуміння структури Laravel MVC (Модель, Представлення, Контролер).
Крок 1: Налаштовуємо базу даних та Міграції!
Створення таблиці в базі даних:
Опублікована стаття на Medium, яка надає повний огляд процесу створення проекту на Laravel 11, включаючи налаштування бази даних. Стаття називається "Початок роботи з Laravel 11: Посібник з інсталяції та конфігурації".
Запустіть команду Artisan для створення моделі Task та файлу міграції для таблиці tasks:
php artisan make:migration create_tasks_table - create=tasks
Це згенерує файл міграції в директорії database/migrations.
Визначення схеми:
Відкрийте згенерований файл міграції та визначте схему таблиці. Наприклад:
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title', 255);
$table->text('description')->nullable();
$table->boolean('is_completed')->default(0);
$table->timestamps();
});
}
Запуск міграції: Застосуйте міграцію для створення таблиці:
php artisan migrate
Потім перевірте, чи створена таблиця tasks у вашій базі даних, і ви готові до роботи!
Крок 2: Створення моделі Task
Другий крок — створення моделі Task. Для генерації моделі потрібно виконати наступну команду Artisan:
php artisan make:model Task
Модель буде створена в директорії app/Models. Далі відкрийте модель Task та визначте заповнювані поля:
protected $fillable = ['title', 'description', 'is_completed'];
Це забезпечить захист від масового присвоєння.
Крок 3: Генерація ресурсного контролера
Метою цього кроку є створення ресурсного контролера, який спростить виконання CRUD операцій.
Для цього потрібно виконати таку команду:
php artisan make:controller TaskController -r
Виконання цієї команди призведе до створення контролера, що містить методи для всіх CRUD операцій в директорії app/Http/Controllers.
Крок 4: Визначення маршрутів
Щоб це зробити, потрібно відкрити файл routes/web.php та визначити ресурсні маршрути для задач.
Додайте наступний код у файл routes/web.php:
use App\Http\Controllers\TaskController; //Зверху для імпорту TaskController
Route::resource('tasks', TaskController::class);
Ця одна лінія коду зв'язує всі CRUD операції з відповідними методами контролера.
Крок 5: Реалізуємо CRUD операції в контролері.
Імпортуємо Task модельTask;
```
1 — Метод Index (Список всіх задач):
public function index()
{
$tasks = Task::all();
return view('tasks.index', compact('tasks'));
}
2 — Метод Create (Показати форму для створення задачі):
public function create()
{
return view('tasks.create');
}
3 — Метод Store (Зберегти нову задачу з валідацією форми):
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
'description' => 'nullable|string',
]);
Task::create(['title'=>$request->title, 'description'=>$request->description]);
return redirect()->route('tasks.index')->with('success', 'Task created successfully.');
}
4 — Метод Show (Показати одну задачу):
public function show(Task $task)
{
return view('tasks.show', compact('task'));
}
5 — Метод Edit (Показати форму для редагування задачі):
public function edit(Task $task)
{
return view('tasks.edit', compact('task'));
}
6 — Метод Update (Оновити задачу):
public function update(Request $request, Task $task)
{
$request->validate([
'title' => 'required|string|max:255',
'description' => 'nullable|string',
]);
$task->update([
'title' => $request->title,
'description' => $request->description,
]);
return redirect()->route('tasks.index')->with('success', 'Task updated successfully.');
}
7 — Метод Destroy (Видалити задачу):
public function destroy(Task $task)
{
$task->delete();
return redirect()->route('tasks.index')->with('success', 'Task deleted successfully.');
}
Крок 6: Створення Представлень
Laravel використовує шаблони Blade для представлень, що дійсно круто.
Щоб почати, просто створіть директорію з назвою tasks в папці resources/views, і додайте ці файли:
Представлення Index (index.blade.php): Тут ви побачите список задач з можливістю створення, редагування або видалення.
@if (session('success'))
{{ session('success') }}
@endif
Tasks
Create Task @foreach ($tasks as $task) @endforeach
Name Description Actions {{ $task->title }} {{ $task->description }}
View Edit @csrf @method('DELETE') Delete
``` **Представлення Create (create.blade.php)**: Це форма для створення нової задачі. ```
Create Task
@csrf
Task Name
Description
Create
Back to tasks
``` **Представлення Edit (edit.blade.php)**: Це форма для редагування існуючої задачі. ```
Edit Task
@csrf @method('PUT')
Task Name
Description {{ $task->description }}
Update
Back to tasks
``` **Представлення Show (show.blade.php)**: Це дозволяє відобразити деталі однієї задачі. ```
Task Details
{{ $task->name }}
Description: {{ $task->description }}
Created At: {{ $task->created_at->format('d M, Y h:i A') }}
Last Updated: {{ $task->updated_at->format('d M, Y h:i A') }}
Edit @csrf @method('DELETE') Delete Back to List
``` ## **Крок 7: Додавання стилізації та інтерактивності на фронтенді** Використовуйте чистий **CSS** або один із його фреймворків, як **Tailwind** чи **Bootstrap**, для стилізації ваших представлень.
Для більш складної інтерактивності розгляньте інтеграцію **Vue.js**, **React** або просто використання чистого **JavaScript**.
/* Hamza Sehouli Code */
*,
*::after,
*:before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
padding: 20px;
}
.container {
width: 80%;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form {
width: 30%;
padding: 20px;
box-shadow: 5px 6px 2px #e9e9e938;
margin: 0 auto 50px auto;
}
.form input,
.form textarea {
width: 100%;
}
.form-control {
margin-bottom: 20px;
}
input {
padding: 8px 10px;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
button,
a {
font-size: 16px;
padding: 8px 16px;
display: inline-block;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
margin-right: 8px;
}
.btn-success {
background-color: #59c470;
}
.btn-danger {
background-color: #fa3f3f;
}
.btn-info {
background-color: #3ecfd4;
}
.alert-success {
font-weight: 700;
color: #45a049;
}
@media screen and (max-width: 750px) {
html {
font-size: 14px;
}
.container {
width: 100%;
margin: 0 auto;
background-color: white;
padding: 10px;
border-radius: 6px;
}
.form {
width: 100%;
padding: 10px;
box-shadow: unset;
margin: 0 auto 30px auto;
}
button,
a {
font-size: inherit;
}
}
```
Крок 8: Тестування вашого додатку
Запустимо сервер розробки:
php artisan serve
Потім, відкрийте додаток:
Перейдіть за посиланням http://localhost:8000/tasks, щоб керувати вашими завданнями.
Тепер перевіримо операції CRUD:
Створіть нове завдання.
Перегляньте список завдань.
Змініть завдання.
Видалити завдання.
Висновок
Створення CRUD додатку в Laravel 11 — це чудовий спосіб побачити, наскільки простим і потужним є цей фреймворк! Виконавши ці кроки, ви створили функціональний додаток з чистим кодом і масштабованою архітектурою.
Тепер ви можете розширювати цей фундамент, додаючи такі функції, як пошук, фільтри або автентифікацію користувачів.
Щасливого кодування!
Перекладено з: Learn how to create a basic CRUD application using Laravel 11