Plantilla web

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to set up the basic structure of a front-end system with templates?

To start with the development of an efficient front-end system, it is essential to start from a good base using templates. Here I will guide you step by step on how to structure and configure your template, as well as implement key elements such as menus and views.

How to define the method in the controller?

First, you need to make sure that the controller has the correct method to load the desired view. In this case:

Change the name of the method to the one that will be used, for example, "Home", and make sure that the view is also named "Home".
Save the changes in the controller.

How to work with templates and views?

Go to your templates. For this exercise, we will work on two main files: base.html.twig and home.html.twig.

Configuring the base template

Edit the body of the template:

In base.html.twig, arrange the <body> content:

<body> {% include 'menu.html.twig' %} <div class="container"> <div class="row"> <div class="col-md-9"> {% block body %}{% endblock %} </div> <div class="col-md-3"> <p>Additionalinformation</p> </div></div> </div></div></body>.

This structure helps to maintain a responsive and well-organized design using Bootstrap.

Include required elements:

Change "Welcome" to a reference to the menu to be included using:
```
{% include 'menu.html.twig' %}
```

How to create and structure a menu?

The menu is an essential component for navigation. To implement it:

Define the menu file:

Create a new file named menu.html.twig.

Configure the navbar structure:

Use Bootstrap classes to create a responsive menu:

<header> <nav class="navbar navbar-dark navbar-dark bg-dark mb-5"> <div class="container"> <span class="navbar-brand mb-0 h1">Symfony/Doctrine</span> <ul class="nav"> <ul  class="nav"> <li class="nav-item"> <a class="nav-link text-white" href="{{ path('app_home') }}">Home</a> </li> </ul></ul> </div> </nav></header>.

How to add content to the 'Home' view?

Finally, you need to define the content of the home.html.twig view:

Add title and menu:

To customize the Home view, make sure to include the correct title and the defined menu:
```
<h1>HelloHome</h1>.
```

Incorporate additional content:

Add example elements to give context to the design:

<div class="p-3 bg-dark text-white rounded"> <p>Exampletextto illustrate the layout of the view.</p> <a href="#" class="btn btn-warning btn-lg">Comments</a></div>

Why is it crucial to close tags correctly?

Correctly closing tags in HTML and Twig templates is critical to avoid display errors and ensure that the content aligns correctly to the planned layout. Constantly check the correct opening and closing of <div> tags, especially when using Bootstrap for column structure.

With these steps, your front-end system will be well structured and organized, allowing for efficient and responsive development, ready to be extended for future additions and maintenance. Go ahead and keep learning!

Contributions 0

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?