Blog

How to create a Event Calendar in Laravel 11 | websolutioncode.com
How to create a Event Calendar in Laravel 11 | websolutioncode.com

How to create a Event Calendar in Laravel 11

Introduction:

Event calendars are an essential component of many web applications, allowing users to schedule, manage, and view events easily. In this tutorial, we’ll walk through the process of creating an event calendar using Laravel 11, a popular PHP framework known for its simplicity and elegance. By following this guide, you’ll learn how to build a basic event calendar that you can customize and integrate into your Laravel applications.

Step 1:

Setting Up a New Laravel Project First, let’s create a new Laravel project. Open your terminal and run the following command:

laravel new event-calendar

This command will create a new Laravel project named “event-calendar”.

Step 2:

Database Configuration Next, we need to configure our database connection. Open the .env file in your project root directory and set your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

Replace your_database_name, your_database_username, and your_database_password with your actual database information.

Step 3:

Creating the Event Model and Migration Now, let’s create a migration and model for our events. Run the following commands in your terminal:

php artisan make:model Event -m

This command will generate a new model named “Event” along with a migration file. Open the migration file (database/migrations/create_events_table.php) and define the schema for the events table:

Schema::create('events', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->dateTime('start_date');
    $table->dateTime('end_date');
    $table->timestamps();
});

Then, run the migration to create the events table in your database:

php artisan migrate

Step 4:

Building the Event Controller Next, let’s create a controller to handle our event-related logic. Run the following command:

php artisan make:controller EventController

This command will generate a new controller named “EventController”. Open the controller file (app/Http/Controllers/EventController.php) and add the following methods:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Event;

class EventController extends Controller
{
    public function index()
    {
        $events = Event::all();
        return view('events.index', compact('events'));
    }

    public function create()
    {
        return view('events.create');
    }

    public function store(Request $request)
    {
        // Validation logic here

        Event::create($request->all());
        return redirect()->route('events.index')->with('success', 'Event created successfully.');
    }
}

Step 5:

Creating Views for Event Calendar Now, let’s create the views for our event calendar. Inside the resources/views directory, create two new directories named events and layouts. Inside the layouts directory, create a new file named app.blade.php and add the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Calendar</title>
</head>
<body>
    @yield('content')
</body>
</html>

Inside the events directory, create two new files named index.blade.php and create.blade.php.

index.blade.php:

@extends('layouts.app')

@section('content')
    <h1>Event Calendar</h1>
    <a href="{{ route('events.create') }}">Add Event</a>

    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Start Date</th>
                <th>End Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach($events as $event)
                <tr>
                    <td>{{ $event->title }}</td>
                    <td>{{ $event->start_date }}</td>
                    <td>{{ $event->end_date }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

create.blade.php:

@extends('layouts.app')

@section('content')
    <h1>Add Event</h1>

    <form method="POST" action="{{ route('events.store') }}">
        @csrf
        <div>
            <label for="title">Title</label>
            <input type="text" id="title" name="title" required>
        </div>
        <div>
            <label for="start_date">Start Date</label>
            <input type="datetime-local" id="start_date" name="start_date" required>
        </div>
        <div>
            <label for="end_date">End Date</label>
            <input type="datetime-local" id="end_date" name="end_date" required>
        </div>
        <button type="submit">Submit</button>
    </form>
@endsection

Step 6:

Defining Routes Lastly, let’s define routes for our event-related actions. Open the routes/web.php file and add the following routes:

use App\Http\Controllers\EventController;

Route::get('/events', [EventController::class, 'index'])->name('events.index');
Route::get('/events/create', [EventController::class, 'create'])->name('events.create');
Route::post('/events', [EventController::class, 'store'])->name('events.store');

Step 7:

Testing Your Event Calendar Congratulations! You’ve successfully created a basic event calendar in Laravel 11. You can now run your Laravel development server by executing the following command in your terminal:

php artisan serve

Visit http://localhost:8000/events in your web browser to view your event calendar and start adding events.

Conclusion:

In this tutorial, we’ve covered the process of creating an event calendar in Laravel 11 from scratch. By following these steps, you can build upon this foundation to add more advanced features and functionalities to your event calendar as needed for your Laravel applications. Happy coding!

Tags: , ,