Tutorial Membuat Halaman Profile
Posted on 04 September 2024
Untuk membuat halaman profil di Laravel, Anda perlu mengikuti beberapa langkah. Halaman profil biasanya menampilkan informasi pengguna dan memungkinkan pengguna untuk memperbarui informasi mereka. Berikut adalah panduan lengkap untuk membuat halaman profil, termasuk menyiapkan route, controller, view, dan form update profil.
Tahap 1: Menyiapkan Route
Tambahkan route untuk menampilkan halaman profil dan memperbarui informasi profil.
// routes/web.php
use App\Http\Controllers\ProfileController;
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'show'])->name('profile.show');
Route::post('/profile', [ProfileController::class, 'update'])->name('profile.update');
});
Tahap 2:Membuat Controller
Buat controller yang akan menangani logika tampilan dan pembaruan profil. Anda dapat membuat controller baru dengan perintah Artisan:
php artisan make:controller ProfileController
Kemudian, tambahkan metode untuk menampilkan halaman profil dan memperbarui informasi profil.
// app/Http/Controllers/ProfileController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;
class ProfileController extends Controller
{
public function show()
{
$user = Auth::user();
return view('profile.show', compact('user'));
}
public function update(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required|string|max:255',
'email' => 'required|email|max:255',
'password' => 'nullable|confirmed|min:8',
]);
if ($validator->fails()) {
return redirect()->route('profile.show')
->withErrors($validator)
->withInput();
}
$user = Auth::user();
$user->name = $request->name;
$user->email = $request->email;
if ($request->filled('password')) {
$user->password = bcrypt($request->password);
}
$user->save();
return redirect()->route('profile.show')->with('status', 'Profile updated successfully!');
}
}
Tahap 3: Membuat View Untuk Halaman Profile
Buat view Blade untuk menampilkan dan mengedit profil. Tempatkan file ini di resources/views/profile/show.blade.php.
@extends('layouts.app') @section('content') <section class="profile-section text-center text-lg-start"> <style> /* Your CSS styles here */ .profile-section { padding: 40px; background-color: #f9f9f9; } .profile-form { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .profile-form h2 { margin-bottom: 20px; } .form-outline { margin-bottom: 1.5rem; } .form-label { font-weight: 600; } .form-control { padding: 10px; border-radius: 4px; border: 1px solid #ddd; font-size: 16px; } .btn-primary { background-color: #000; border: none; padding: 12px 20px; border-radius: 4px; color: #fff; font-size: 16px; width: 100%; transition: all 0.3s ease; } .btn-primary:hover { background-color: #333; } </style> <div class="profile-form"> <h2>Profile</h2> <!-- Display status message --> @if(session('status')) <div class="alert alert-success alert-dismissible fade show" role="alert"> {{ session('status') }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> @endif <!-- Display validation errors --> @if ($errors->any()) <div class="alert alert-danger alert-dismissible fade show" role="alert"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> @endif <form method="POST" action="{{ route('profile.update') }}"> @csrf <!-- Name input --> <div class="form-outline mb-4"> <label class="form-label" for="name">Name</label> <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required /> @error('name') <div class="invalid-feedback"> {{ $message }} </div> @enderror </div> <!-- Email input --> <div class="form-outline mb-4"> <label class="form-label" for="email">Email</label> <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $user->email) }}" required /> @error('email') <div class="invalid-feedback"> {{ $message }} </div> @enderror </div> <!-- Password input --> <div class="form-outline mb-4"> <label class="form-label" for="password">New Password (leave blank to keep current password)</label> <input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror" /> @error('password') <div class="invalid-feedback"> {{ $message }} </div> @enderror </div> <!-- Confirm Password input --> <div class="form-outline mb-4"> <label class="form-label" for="password_confirmation">Confirm New Password</label> <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" /> </div> <!-- Submit button --> <button type="submit" class="btn btn-primary btn-block mb-4">Update Profile</button> </form> </div> </section> @endsection
Kesimpulan
- Route: Mendefinisikan route untuk menampilkan dan memperbarui profil.
- Controller: Menangani logika tampilan dan pembaruan profil.
- View: Menyediakan formulir HTML untuk menampilkan dan mengedit profil.