Set Up Login and Registration Panel In Laravel
To set up the login
panel in your Laravel application, you can use Laravel Breeze or Laravel
UI for authentication scaffolding.
1. Install Laravel Breeze
for Authentication
Laravel Breeze is simple
and lightweight for adding authentication features.
Steps:
1.
Install Laravel Breeze:
composer require
laravel/breeze --dev
2.
Scaffold authentication:
php artisan
breeze:install
After running the above
command the output will be like this:
Which Breeze stack would
you like to install?
1. Blade
with Alpine --- blade
2. Livewire
(Volt Class API) with Alpine ---livewire
3. Livewire
(Volt Functional API) with Alpine ---livewire-functional
4. React
with Inertia ---react
5. Vue
with Inertia --- vue
6. API
only --- api
The choice of which stack
to install with Laravel Breeze depends on your project requirements and
familiarity with specific technologies.
Here's a quick guide to
help you decide to choose which one :
1.
Blade with Alpine (Recommended for
Beginners)
o This
option uses Laravel's default templating engine, Blade, along with Alpine.js
for lightweight interactivity.
o Best
for:
Simple projects or if you're more comfortable with traditional server-rendered
views.
o Why
choose it? It is beginner-friendly and doesn't require prior
knowledge of frontend frameworks like Vue or React.
2.
Livewire (Volt Class API) with Alpine
o Uses
Livewire, which allows you to build dynamic frontend functionality
without writing JavaScript.
o Best
for:
Developers who prefer working within Laravel's ecosystem and want to avoid
using JavaScript frameworks.
o Class
API
uses a class-based approach to components.
3.
Livewire (Volt Functional API) with
Alpine
o Same
as the option above but uses a functional API style for Livewire
components.
o Best
for:
Developers who prefer a functional programming style in their code.
4.
React with Inertia
o Integrates
React with Laravel using Inertia.js, which allows building a
single-page application (SPA) without a separate API.
o Best
for:
Developers comfortable with React and aiming to build modern SPAs with Laravel.
5.
Vue with Inertia
o Similar
to React + Inertia, but uses Vue.js instead.
o Best
for:
Developers who prefer Vue.js for building SPAs or are already familiar with it.
6.
API only
o Installs
only the backend API functionality without any frontend scaffolding.
o Best
for:
Projects where the frontend will be developed separately (e.g., a mobile app or
frontend framework like Angular, React, or Vue).
Which Should You Choose?
- If
you're new to Laravel or frontend frameworks, select: Blade with
Alpine (type blade).
- If
you're comfortable with React or Vue, and your project requires a
modern SPA:
- Choose
React with Inertia (type react) if you like React.
- Choose
Vue with Inertia (type vue) if you prefer Vue.js.
- If
you're planning to build a backend API only, choose: API only
(type api).
Recommendation for
Student Management System:
For simplicity and ease
of implementation, especially if you're working on the backend and traditional
web views:
- Choose:
blade.
After this U have next
choice as :
Would you like dark mode
support? (yes/no)
Whether to enable dark
mode support depends on your project requirements and preferences:
If You Choose yes:
- Laravel
Breeze will include dark mode support in the frontend.
- It
will provide styles and a mechanism to toggle between light and dark
themes, enhancing user experience for modern applications.
Choose yes if:
- You
want to provide users with the ability to switch between light and dark
modes.
- You
want a more modern, feature-rich UI for your application.
If You Choose no:
- Laravel
Breeze will skip dark mode functionality, keeping the UI simpler.
Choose no if:
- Your
project doesn't require dark mode, and you want to avoid additional
complexity.
- You
want to keep the application lightweight or don’t need modern UI theming.
Recommendation for
Student Management System:
For a student
management system, enabling dark mode can be a nice-to-have feature,
especially if you anticipate users working in different lighting conditions.
Suggested Choice: yes
If you’re unsure or don’t need it, it’s safe to choose no. You can always add
it manually later if needed.
Then the next question is
:
Which testing framework do you prefer? [Pest]
Pest 0
PHPUnit
Laravel provides two
options for testing frameworks: Pest and PHPUnit.
Here's how you can decide
which one to choose:
1. Pest
- What
is it?
- A
modern and beginner-friendly testing framework.
- Built
on top of PHPUnit but with a simpler and cleaner syntax.
- Includes
features like snapshot testing and plugins for enhanced
productivity.
- Best
for:
- Beginners
who are new to testing.
- Developers
who prefer concise, expressive syntax.
- Teams
who want a faster and more enjoyable testing experience.
2. PHPUnit
- What
is it?
- The
default testing framework in Laravel.
- A
more traditional testing tool with robust functionality.
- Well-suited
for developers already familiar with its syntax.
- Best
for:
- Developers
who are experienced with testing in Laravel.
- Projects
where the team is already using PHPUnit.
- Scenarios
requiring advanced or complex testing setups.
Recommendation:
For a student
management system or if you're new to testing, I recommend Pest
because:
- It's
easier to learn and use.
- It's
compatible with PHPUnit, so you can always fall back on PHPUnit features
if needed.
Suggested Choice:
Type 0 for Pest.
If you're more comfortable with traditional tools, you can choose PHPUnit
instead.
I choice 0 as I am a
beginner
3.
Install front-end dependencies:
npm install &&
npm run dev
4.
Run migrations:
php artisan migrate
This will create a fully
functional login, registration, and password reset system in your application.
2. Customize the Login
Panel
The login panel view is
located at:
resources/views/auth/login.blade.php
You can edit this file to
customize the look of your login form:
@extends('layouts.app')
@section('content')
<div class="container
mt-5">
<div class="row
justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header
text-center">
<h4>Login</h4>
</div>
<div class="card-body">
<form method="POST"
action="{{ route('login') }}">
@csrf
<div class="mb-3">
<label for="email"
class="form-label">Email</label>
<input id="email"
type="email" class="form-control @error('email') is-invalid
@enderror" name="email" value="{{ old('email') }}" required
autofocus>
@error('email')
<span class="text-danger">{{
$message }}</span>
@enderror
</div>
<div class="mb-3">
<label for="password"
class="form-label">Password</label>
<input id="password"
type="password" class="form-control @error('password')
is-invalid @enderror" name="password" required>
@error('password')
<span class="text-danger">{{
$message }}</span>
@enderror
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input"
name="remember" id="remember">
<label class="form-check-label"
for="remember">Remember Me</label>
</div>
</div>
<div class="d-flex
justify-content-between">
<button type="submit"
class="btn btn-primary">Login</button>
<a href="{{
route('password.request') }}" class="text-decoration-none">Forgot
Password?</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
3. Add a Login Link in
the Navbar
In resources/views/layouts/app.blade.php, add a link to t
<nav class="navbar
navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="{{
url('/') }}">Home</a>
<button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse
navbar-collapse" id="navbarNav">
<ul class="navbar-nav
ms-auto">
@guest
<li class="nav-item">
<a class="nav-link"
href="{{ route('login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="{{ route('register') }}">Register</a>
</li>
@else
<li class="nav-item">
<a class="nav-link"
href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Logout</a>
<form id="logout-form"
action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</li>
@endguest
</ul>
</div>
</div>
</nav>
4. Configure the Login
Route
Laravel Breeze automatically sets up the login route (/login). You can confirm it in routep
Route::get('/login', [AuthenticatedSessionController::class,
'create'])
->name('login');
Route::post('/login', [AuthenticatedSessionController::class,
'store']);
Route::post('/logout', [AuthenticatedSessionController::class,
'destroy'])
->name('logout');
5. Style the Login Panel
with Bootstrap
Include Bootstrap via CDN
in resources/views/layouts/app.blade.php:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
6. Redirect After Login
To redirect users to a
specific page after login, update AuthenticatedSessionController:
- Locate
app/Http/Controllers/Auth/AuthenticatedSessionController.php.
- Modify
the store method:
protected function authenticated(Request
$request, $user)
{
if ($user->role === 'admin') {
return redirect('/admin'); // Redirect
admin to admin dashboard
}
return redirect('/dashboard'); // Redirect
users to user dashboard
}
7. Test the Login Panel
1.
Start your Laravel application:
php artisan serve
2.
Visit http://127.0.0.1:8000/login to see
the login panel.
3.
Log in using the credentials you created
during registration or with a seeded admin user.