Basic MVC App with Hardcoded List

Welcome to the first step in building your MVC (Model-View-Controller) application using Laravel. This foundational lesson will guide you through creating a simple ToDo application with a hardcoded list. We'll explore how the MVC architecture helps organize your code efficiently and make your application more scalable and maintainable.

The Model-View-Controller (MVC) structure is one of the most widely used design patterns in software engineering. It separates the application into three interconnected components, allowing you to manage user input, handle data logic, and control the presentation layer more effectively. Before we dive into the more complex aspects of building applications with Laravel, it's crucial to understand these basic details.

In this unit, you will learn how to set up a basic MVC application in Laravel. We'll start by defining a simple Todo model with hardcoded data and move on to create a service to manage our ToDos. Finally, we'll establish a controller to handle incoming requests and render a list of ToDo items in the view.

Here's a glimpse of the code structure we'll be working with. Your Todo model will look something like this:

// app/app/Models/Todo.php
<?php
namespace App\Models;

class Todo
{
    public $id;
    public $title;
    public $description;

    public function __construct($id, $title, $description = null)
    {
        $this->id = $id;
        $this->title = $title;
        $this->description = $description;
    }
}

As you see the above code snippet, the Todo model is a simple class with three properties: id, title, and description. The constructor initializes these properties when a new Todo object is created.

The TodoService provides the logic to retrieve the hardcoded list of todos:

// app/app/Services/TodoService.php
<?php
namespace App\Services;
use App\Models\Todo;

class TodoService
{
    protected $todos;

    public function __construct()
    {
        $this->todos = [
            new Todo(1, 'Learn Laravel', 'Explore the basics of Laravel'),
            new Todo(2, 'Develop MVC App', 'Build an application using the MVC pattern')
        ];
    }

    public function findAll()
    {
        return $this->todos;
    }
}

Here, the TodoService class contains a hardcoded list of Todo objects in its constructor. The findAll method returns this list of todos when called.

Next, let's define the controller to handle incoming requests and render the view:

// app/app/Http/Controllers/TodoController.php
<?php
namespace App\Http\Controllers;
use App\Services\TodoService;

class TodoController extends Controller
{
    protected $todoService;

    public function __construct(TodoService $todoService)
    {
        $this->todoService = $todoService;
    }

    public function index()
    {
        $todos = $this->todoService->findAll();
        return view('todos.index', ['title' => 'ToDo List', 'todos' => $todos]);
    }
}

In the controller, we inject the TodoService instance into the constructor. The index method retrieves the list of todos from the service and passes it to the view along with the title.

Finally, the view file resources/views/todos/index.blade.php will render the list of todos:

<!-- app/resources/views/todos/index.blade.php -->
@extends('layouts.app')

@section('content')
<h1>ToDo List</h1>
<ul>
  @foreach($todos as $todo)
    <li>{{ $todo->title }} - {{ $todo->description }}</li>
  @endforeach
</ul>
@endsection

The view file uses Blade templating to loop through the list of todos and display each todo's title and description.

Finally, we'll register the controller in the routes/web.php file:

// app/routes/web.php
<?php
use App\Http\Controllers\TodoController;
use Illuminate\Support\Facades\Route;

Route::get('/todos', [TodoController::class, 'index']);

This code snippet registers the index method of the TodoController class to handle the /todos route.

With this, when you visit the /todos route in your browser, you'll see a list of hardcoded todos displayed on the page.

These snippets give you a peek into how the structure starts to form, connecting data handling with your application logic. By the end of this lesson, you'll be comfortable creating a basic MVC structure, paving the way for more complex functionality.