Introduction to Building a Web Interface with Symfony

Introduction to the Web Interface

Welcome to the first lesson of our course on building an image generation web application with Symfony! In this course, you'll learn how to create a user-friendly web interface for an AI-powered image generation service. By the end of this course, you'll have built a complete web application that allows users to generate images based on text prompts and view their generation history. In this first lesson, we'll focus on creating the HTML structure for our application. This structure will serve as the foundation for our user interface, providing the elements that users will interact with to generate images and view their history. Our application will have two main sections: A "Generate Image" tab where users can enter prompts and customize their image generation. A "View History" tab where users can see their previously generated images. Before we dive into the code, let's understand how Symfony handles HTML templates. In a Symfony application, HTML files are typically stored in a folder called templates . Symfony uses a templating engine called Twig that allows us to include dynamic content in our HTML files. We'll see this in action when we link our CSS and JavaScript files. Now, let's start building our HTML interface!

App File Structure

Before we start building the HTML for our image generation interface, let's take a moment to understand how our Symfony application is organized. Symfony follows a structured approach that helps us stay organized as our project grows in complexity. Here's the structure we'll be working with: Shell image-generator-app/ │ ├── bin/ # Contains the console executable │ └── console # Symfony console for running commands │ ├── config/ # Configuration files │ ├── packages/ # Package-specific configuration │ ├── routes.yaml # Application routes │ └── services.yaml # Service configuration │ ├── public/ # Publicly accessible files │ ├── index.php # Front controller │ ├── css/ # CSS files │ │ └── style.css │ └── js/ # JavaScript files │ └── script.js │ ├── src/ # Application source code │ ├── Controller/ # Controllers for handling requests │ │ └── ImageGeneratorController.php │ ├── Service/ # Core business logic │ │ └── ImageGeneratorService.php │ └── Model/ # Data models and helper logic │ ├── ImageManager.php │ └── PromptManager.php │ ├── templates/ # Twig templates │ ├── base.html.twig # Base template with common elements │ └── image_generator/ # Templates for our image generator │ └── index.html.twig │ ├── var/ # Generated files (cache, logs) │ ├── cache/ │ └── log/ │ ├── resources/ # Data template for image prompt │ └── resources/ │ └── image_prompt_template.txt │ └── generated_images/ # Directory to store generated images

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Creating the Basic HTML Document Structure

Every HTML document starts with a basic structure that includes the document type declaration, the HTML root element, and the head and body sections. In Symfony, we typically use a base template that contains this structure, and then extend it in our specific templates.

Let's create a base template (templates/base.html.twig):

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}AI Event Banner Generator{% endblock %}</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    {% block stylesheets %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
    
    {% block javascripts %}
        <script src="{{ asset('js/script.js') }}"></script>
    {% endblock %}
</body>
</html>

Let's break down what each part of this code does:

<!DOCTYPE html> tells the browser that this is an HTML5 document.
<html lang="en"> is the root element of the HTML document, with "en" specifying English as the language.
The <head> section contains metadata about the document:
- <meta charset="UTF-8"> specifies the character encoding for the document.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures proper scaling on mobile devices.
- <title>{% block title %}AI Event Banner Generator{% endblock %}</title> sets the title that appears in the browser tab, with a Twig block that can be overridden in child templates.
- <link rel="stylesheet" href="{{ asset('css/style.css') }}"> links to our CSS file.

Notice the {{ asset('css/style.css') }} syntax. This is a Twig template expression that Symfony uses to generate the correct URL for our CSS file. In Symfony, static files like CSS, JavaScript, and images are typically stored in the public directory. The asset function helps Symfony generate the correct path to these files.

The {% block body %}{% endblock %} and {% block javascripts %}{% endblock %} are Twig blocks that can be overridden in child templates. This allows us to define the structure in the base template and fill in the content in specific templates.

Now, let's create our specific template for the image generator (templates/image_generator/index.html.twig):

HTML

{% extends 'base.html.twig' %}

{% block body %}
    <!-- Our content will go here -->
{% endblock %}

This template extends the base template and will override the body block. Now, let's add the content to our body section.

Introduction to the Web Interface

App File Structure

Join the 1M+ learners on CodeSignal

Folder Responsibilities

Symfony Routing

Creating the Basic HTML Document Structure

Building the Tab Navigation System

Designing the Image Generation Form

Setting Up the History View

Connecting Everything Together

Summary