Flash Message Laravel

Oleh 5D Rizka Nadila di 25 Sep 2025 | 20:21

5D Rizka Nadila

Siswa

Postingan: 1

Anggota sejak: 22 Agt 2025

Flash Message Laravel

1. Buka Laragon, tekan Start All (Apache & MySQL).

2. Klik kanan Laragon → Terminal (itu biasanya membuka Git Bash / CMD yang sudah siap). Atau buka PowerShell di C:\laragon\www.

3. Buat Projek Laravel : composer create-project laravel/laravel FlashMessage "10.*"

d FlashMessage

4. Buat Database

Ketik perintah untuk membuat database : mysql -u root -p

Setelah itu create database

5. Setelah itu, beralih ke vs code, dengan cara mengetik code . di terminal

6. Buka file FlashMessage/.env di VS Code. Ubah bagian database dan app name

APP_NAME="FlashMessage"

APP_ENV=local

APP_KEY=base64:Dlr3W1Sz3M8Jx272XlTKfiuxyWYfDt2fyjsrnn/pxoM=

APP_DEBUG=true

APP_URL=http://localhost

LOG_CHANNEL=stack

LOG_DEPRECATIONS_CHANNEL=null

LOG_LEVEL=debug

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=flashmessage

DB_USERNAME=root

DB_PASSWORD=

7. Simpan file .env.

Jalankan perintah di terminal:

php artisan config:clear

php artisan key:generate

8. Install Breeze, jalankan perintah di terminal

composer require laravel/breeze --dev

php artisan breeze:install blade

npm install

npm run dev

9. Jalankan migrate untuk bikin tabel users, password_resets, dll:

php artisan migrate

10. Uji coba login/register

Ketik dulu di terminal untuk menjalankan server

php artisan serve

http://127.0.0.1:8000/register

11. Buat Partial Flash Message

resources/views/components/flash-message.blade.php

Lalu isi file tersebut. Ini bebas ya desain sesuai selera:

@if ($message = session('success'))

<div x-data="{ show: true }"

x-show="show"

x-init="setTimeout(() => show = false, 3000)"

class="mb-4 p-4 rounded-lg bg-gradient-to-r from-pink-200 to-blue-200 border border-pink-300 text-pink-900 shadow-md">

<strong class="font-semibold">Sukses:</strong> {{ $message }}

</div>

@endif

@if ($message = session('error'))

<div x-data="{ show: true }"

x-show="show"

x-init="setTimeout(() => show = false, 3000)"

class="mb-4 p-4 rounded-lg bg-red-100 border border-red-300 text-red-700 shadow-md">

<strong class="font-semibold">Error:</strong> {{ $message }}

</div>

@endif

12. Include di layout

Tambahkan di file layout utama Breeze : resources/views/layouts/app.blade.php

Isi dengan ini:

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

@vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

@include('layouts.navigation')

@if (isset($header))

</div>

</header>

@endif

@include('components.flash-message')

</main>

</div>

</body>

</html>

13. Bikin Route untuk uji coba

Tambahin route di routes/web.php, isi dengan:

<?php

use App\Http\Controllers\ProfileController;

use Illuminate\Support\Facades\Route;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Di sini kita daftar semua route aplikasi web.

Route::get('/', function () {

return view('welcome');

});

// 🔹 Tambahan route untuk uji coba flash message

Route::get('/test-flash', function () {

return redirect('/')

->with('success', 'Flash message berhasil tampil ✨');

});

Route::get('/dashboard', function () {

return view('dashboard');

})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {

Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');

Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');

Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');

});

require __DIR__.'/auth.php';

14. Lakukan uji coba terhadap flash message

25 Sep 2025 | 20:21

0 Suka

Flash Message Laravel

5D Rizka Nadila

Login untuk membalas

Laporkan