Entrar Ainda não tem acesso?
2
respostas

Minha Solução

Referente ao curso Django: autenticação de formulários e alerta, no capítulo Refatoração e atividade Reorganizando diretórios

por André Tagliatella Trolesi
| 39.4k xp | 21 posts

Aplicando o método DRY eu pude identificar os seguintes códigos repetidos e criar/incrementar os seguintes partials:

O menu lateral com as opções de logar/cadastrar se repetiam nos arquivos login.html, cadastro.html e na partial do cabeçalho do site que eu criei _header.html, assim criei a partial _menu_lateral.html:

{% load static %}
<section class="menu-lateral">
    <nav class="menu-lateral__navegacao">
        <a href="{% url 'index' %}"><img src="{% static '/assets/ícones/1x/Home - ativo.png' %}"> Home</a>
        <a href="{% url 'login' %}"><img src="{% static '/assets/ícones/1x/Mais vistas - ativo.png' %}"> Login</a>
        <a href="{% url 'cadastro' %}"><img src="{% static '/assets/ícones/1x/Novas - ativo.png' %}"> Cadastrar</a>
        <a href="{% url 'logout' %}"><img src="{% static '/assets/ícones/1x/Surpreenda-me - ativo.png' %}"> Logout</a>
    </nav>
</section>

Após aplicar este partial onde o código se repetia, percebi que o codigo inicial dos arquivos login.html e cadastro.html ficaram idênticos, assim incrementei a partial _header no começo dos dois arquivos:

{% load static %}
<div class="pagina-inicial">
    <header class="cabecalho">
        <img src="{% static '/assets/logo/Logo(2).png' %}" alt="Logo da Alura Space" />
        {% include 'partials/_alertas.html' %}
        <div class="cabecalho__busca">
            <div class="busca__fundo">
                <form action="{% url 'buscar' %}">
                    <input class="busca__input" type="text" name="buscar" placeholder="O que você procura?">
                    <button type="submit">
                        <img class="busca__icone" src="{% static '/assets/ícones/1x/search.png' %}" alt="ícone de search">
                    </button>
                </form>
            </div>
        </div>
    </header>
    <main class="principal">
        {% include 'partials/_menu_lateral.html' %}

E por último, descobri que o

no começo do login e cadastro são identicos, então criei a partial _stylesheets: 
{% load static %} 
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura Space</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<!-- CSS only -->
<link rel="stylesheet" href="{% static '/styles/style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
2 respostas
por André Tagliatella Trolesi
| 39.4k xp | 21 posts

Os arquivos html afetados ficaram da seguinte forma:

login.html:

{% load static %}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    {% include 'partials/_stylesheets.html' %}
</head>

<body>
            {% include 'partials/_header.html' %}
            <section class="galeria" style="margin-left: 5em">
                <form action="{% url 'login' %}" method="POST">
                    {% csrf_token %}
                    <div class="row">
                        {% for field in form.visible_fields %}
                        <div class="col-12 col-lg-12" style="margin-bottom: 10px;">
                            <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">{{field.label}}</label>
                            {{ field }}
                        </div>
                        {% endfor %}
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Logar</button>
                    </div>
                </form>
            </section>
        </main>
    </div>
</body>

{% include 'partials/_footer.html' %}

cadastro.html:

{% load static %}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    {% include 'partials/_stylesheets.html' %}
</head>

<body>
            {% include 'partials/_header.html' %}
            <section class="galeria" style="margin-left: 5em">
                <form action="{% url 'cadastro' %}" method="POST">
                    {% csrf_token %}
                    <div class="row">
                        {% for field in form.visible_fields %}
                        <div class="col-12 col-lg-12" style="margin-bottom: 10px;">
                            <label for="{{ field.id_for_label }}" style="color:#D9D9D9; margin-bottom: 5px;">{{field.label}}</label>
                            {{ field }}
                        </div>
                        {% for error in field.errors %}
                        <div class = 'alert alert-primary'>
                            {{error}}
                        </div>
                        {% endfor %}
                        {% endfor %}
                    </div>
                    <div>
                        <button type="submit" class="btn btn-success col-12" style="padding: top 5px;">Cadastrar</button>
                    </div>
                </form>
            </section>
        </main>
    </div>
</body>

{% include 'partials/_footer.html' %}

_header.html

{% load static %}

Logo da Alura Space {% include 'partials/_alertas.html' %}
{% include 'partials/_menu_lateral.html' %}
por Rafaela Petelin Silvério
| 738.8k xp | 1655 posts
Alura Scuba Team Monitora de Fórum

Olá, André! Tudo bem?

Parabéns pelo esforço em aplicar o princípio DRY (Don't Repeat Yourself) no seu projeto. É sempre uma boa prática identificar e extrair partes repetidas do código em partials, tornando o código mais organizado e fácil de manter.

Você fez um excelente trabalho pensando em como organizar seu código em partials para o menu lateral, cabeçalho e estilos. Isso vai ser bacana porque torna o código mais limpo e também facilita futuras alterações, já que você precisará modificar apenas um arquivo em vez de vários.

Ficamos muito felizes ao ver a sua dedicação em colocar os conhecimentos em prática e otimizar o projeto. Continue assim e conte com o fórum sempre que for necessário!

Um forte abraço e bons estudos. Sucesso ✨