Task Management System (Todo-App) using Laravel

In these post we cover all concept of Laravel framework starting from stratch to deployment with videos.

1. Prerequisites

Before starting, make sure you have installed:

PHP (>= 8.1 recommended),Composer (PHP dependency manager)
MySQL (for database)
Vscode for code editors.

2. Create New Laravel Project

# Install Laravel globally (if not already installed)
composer global require laravel/installer

# Create new project
laravel new task-manager

# Or using composer
composer create-project laravel/laravel todoapp

change folder to the project

cd todoapp

3. Configure Database

Open .env file and set your database details:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=task_manager
DB_USERNAME=root
DB_PASSWORD=root

After that create database

mysql -u root -p
CREATE DATABASE todo_app_db;

4. Create Task Model and Migration

php artisan make:model Task -m

public function up(): void
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->onDelete('cascade'); // task belongs to user
        $table->string('title');
        $table->text('description')->nullable();
        $table->boolean('is_completed')->default(false);
        $table->timestamps();
    });
}

Run migration:

php artisan migrate

5. Create Controller and Routes

php artisan make:controller TaskController --resource

In routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\RoleController;

Route::get('/', function () {
    return view('welcome');
});
Route::resource('tasks', TaskController::class);
Route::get('dashboard', [TaskController::class,'dashboard'])->name('dashboard');
Route::resource('users', UserController::class);
Route::resource('roles',RoleController::class);

6. Implement Task Controller Logic

Create all task performing logics

<?php

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        //  
        $tasks=Tasks::all();
        return view('tasks.index',compact('tasks'));
    }
    public function dashboard()
    {
        return view('tasks.dashboard');
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
        return view('tasks.new');
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        //
        $task=new Tasks();
        $task->title=$request->title;
        $task->description=$request->description;
        $task->completed=false;
        $task->save();
        return redirect()->route('tasks.index');

    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        //
        $tasks = Tasks::find($id);
        return view('tasks.show', compact('tasks')); 
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit($id)
    {
        //
        $tasks = Tasks::find($id);
        return view('tasks.edit', compact('tasks'));
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        //
        $task = Tasks::find($id);
        $task->title = $request->title;
        $task->description = $request->description;
        $task->completed = $request->has('completed');
        $task->save();
        return redirect()->route('tasks.index')->with('success', 'Task updated successfully');    

    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        //
        $task = Tasks::find($id);
        $task->delete();
        return redirect()->route('tasks.index')->with('success', 'Task deleted successfully');
    }
}

7. Create Blade Views

create folder tasks on resource/views/tasks.

Inside tasks create file index.blade.php

<x-layout>
        <div class="row mb-4">
            </div>
                    <div class="col-12">
                        <h2 class="mb-4">Tasks</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <span>All Tasks</span>
                                <a href="{{ route('tasks.create') }}" class="btn btn-sm btn-primary">Add New Task</a>
                            </div>
                            <div class="card-body">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Status</th>
                                            <th>Created At</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($tasks as $task)
                                            <tr>
                                                <td>{{ $task->title }}</td>
                                                <td>{{ $task->description }}</td>
                                                <td>
                                                    @if($task->completed)
                                                        <span class="badge bg-success">Completed</span>
                                                    @else
                                                        <span class="badge bg-warning text-dark">Pending</span>
                                                    @endif
                                                </td>
                                                <td>{{ $task->created_at->format('M d, Y') }}</td>
                                                <td>
                                                    <a href="{{ route('tasks.edit', $task->id) }}" class="btn btn-sm btn-secondary">Edit</a>
                                                    <a href="{{ route('tasks.show', $task->id) }}" class="btn btn-sm btn-info">Show</a>
                                                    <form action="{{ route('tasks.destroy', $task->id) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                       
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</x-layout>

List all tasks

Create file ,new, edit, and show.blade.php

Deployment

Deploy on Shared Hosting / cPanel

Upload project files via File Manager or Git.
Move all Laravel files into yourdomain.com/ or subdomain/.
Place contents of public/ folder into root (public_html/) and update index.php paths.
Set .env with production DB credentials.
Run migrations: