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.

This lesson is important because understanding how to set up the MVC structure is key to every web application project you encounter. By learning to separate the concerns in your application, you improve both the scalability and maintainability of your code. Laravel makes using MVC straightforward, and mastering it here will serve as a strong foundation for any future web development tasks.

Are you ready to build a simple yet powerful application? Let’s get started on this exciting journey and see the magic of MVC in action!