Creating Your First Symfony App

Welcome to the first lesson in our "Implementing MVC ToDo App with PHP Symfony" learning path. We'll start by exploring Symfony's fundamentals before diving into building a ToDo application using the MVC pattern.

In this lesson, we'll get a basic Symfony app up and running. We'll set up a project, understand its structure, examine a simple controller, and see how to render a message using Twig, Symfony’s template engine. By the end of this lesson, you'll have a working Symfony app and a solid understanding of its core components.

Symfony is a popular PHP framework used for building web applications. It provides a set of reusable PHP components and a structure that helps you organize your code efficiently. With Symfony, you can create scalable and maintainable applications quickly and with less effort.

Key Features of Symfony:

• Flexibility: Symfony is highly customizable. It can be used for small websites as well as complex enterprise applications.
• Robustness: It comes with a wide range of built-in features that make development faster and easier, such as routing, templating, and security.
• Community: Symfony has a large and active community. This means you can find plenty of tutorials, plugins, and support.

By learning Symfony, you'll gain the skills to develop powerful PHP applications more efficiently.

Symfony encourages the use of the MVC (Model-View-Controller) pattern, separating the application into three components:

• Model: Manages the data and business logic.
• View: Handles the presentation using Twig templates.
• Controller: Processes requests and returns responses.

In this lesson, we focus on Controllers and Views, creating a simple controller that renders a Twig template. This foundational understanding is crucial as we progress in building our Symfony ToDo application.

To get started, it's useful to know how to set up a Symfony project. In a pre-configured environment, Symfony might come pre-installed, but setting it up manually provides valuable insights.

You can create a new Symfony project using Composer, a dependency manager for PHP. Running the following command in your terminal creates a new Symfony project:

composer create-project symfony/skeleton my_project

This command creates a new directory named my_project containing the basic structure of a Symfony application that's ready to be used.

Once created, the Symfony project consists of several directories and files. Here's an overview of key components:

• config/: This directory contains configuration files that define how the application behaves, such as database connections and service configurations.

• src/: This directory is where the PHP code resides. Controllers, entities, and other PHP classes are placed here, making it the core part of the application's code.

• templates/: This directory holds Twig templates, which structure how the website looks. HTML skeletons for rendering the web pages are managed here.

• public/: This is the web root directory. The index.php file inside it is the entry point for the application, directing web traffic to the appropriate controllers.

The config/bundles.php file acts like an app's registry, registering bundles that Symfony will use. Bundles are sets of reusable features encapsulated in a single package, like user authentication or email handling. Here’s an example configuration:

<?php

return [
    // Enables Symfony's core functionality
    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
    
    // Enables the Twig template engine
    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
];

In this file, Symfony registers the FrameworkBundle for core functionality and the TwigBundle to enable Twig for templating.

The config/routes.yaml file defines the routes, which map URLs to specific controllers and actions. When a user visits a URL, Symfony checks this file to determine which controller should handle the request. Here’s an example route configuration for this lesson:

# Defines a route configuration
index:
  # Sets the URL path for this route
  path: /
  # Links the URL path to a specific method of a controller
  controller: App\Controller\DefaultController::index

In this lesson, we focus on creating a simple route that maps the root URL to a controller, which we'll explore in more detail in upcoming lessons.

A controller is a PHP class that handles incoming requests and returns responses, directing user requests to the appropriate part of the application.

For this lesson, let's look at a basic example of a DefaultController.php file with DefaultController class, located in the src/Controller/ directory.

<?php

namespace App\Controller;

// Base controller class
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; 
// HTTP response class
use Symfony\Component\HttpFoundation\Response;

class DefaultController extends AbstractController
{
    // Method to handle requests to the root URL
    public function index(): Response
    {
        // Renders the Twig template base.html.twig and passes the message to it
        return $this->render('base.html.twig', ['message' => 'Hello Symfony World!']);
    }
}

This example defines the DefaultController class, which extends AbstractController, providing access to several helper functions. The index method in the controller is mapped to handle requests to the root URL (/). When this method is called, it uses the render function to render the base.html.twig template with a message variable containing the text "Hello Symfony World!".

We'll cover more about controllers and their capabilities in later lessons. For now, focus on getting your first Symfony app running by following the above structure.

Twig is Symfony’s template engine, enabling the separation of HTML and PHP code. When the controller's index method renders a Twig template, the message variable is passed to the template and displayed.

An example Twig template might look like this:

<!DOCTYPE html>
<html>
<head>
  <title>Welcome</title>
</head>
<body>
  <!-- Displays the message passed from the controller -->
  <h1>{{ message }}</h1>
</body>
</html>

This template renders an HTML page with a title "Welcome" and displays the text stored in the message variable inside an <h1> tag. Since the controller passes the message "Hello Symfony World!" to the template, this text will be displayed on the webpage when the root URL is accessed.

To get your Symfony app up and running, you can use PHP's built-in server by entering the following command:

php -S localhost:3000 -t public

Here's what the command does:

• php starts the PHP interpreter.
• -S tells PHP to start its built-in web server.
• localhost:3000 specifies that the server should run on your local machine (localhost) at port 3000.
• -t public sets the document root to the public directory of your Symfony project. This means the server will serve files from the public folder. The index.php file inside this folder handles all incoming requests.

Using PHP's built-in server is simple, requires no extra installations, and is immediately available since it comes with PHP. In the CodeSignal environment, the server will start automatically on localhost:3000, so you're ready to begin without any extra setup!

Once the server is running, you can view your Symfony application by navigating to http://localhost:3000 in your web browser. Here’s what will happen:

1. Symfony will route the request to the / path, handled by the index action of the DefaultController.
2. The DefaultController will render the base.html.twig template.
3. The template will display the message "Hello Symfony World!".

The resulting response is a simple, elegant HTML page showing the message within an <h1> tag.

In this lesson, we've laid the groundwork for our Symfony app. We've covered:

• What Symfony is and its key features.
• How to set up a Symfony project.
• The structure of a typical Symfony project.
• Configuring bundles and defining routes.
• Creating a default controller.
• Using Twig to render templates.
• Running and accessing your Symfony app on localhost:3000.

Use the CodeSignal IDE to practice the code examples provided. In the next lesson, we will dive deeper into creating more complex routes and handling user requests. Keep practicing, and you’ll become proficient in no time!