Aula 16 - Modelo base - Base Template

Modelo base - Base Template

Para baixar o código como está até agora, acesse o link abaixo: https://github.com/toticavalcanti/django_ecommerce/tree/base_template

Antes de começar, quero deixar meu link de afiliados na Hostinger, tá valendo a pena, dêem uma olhada: Hostinger

Dêem um joinha 👍 na página do Código Fluente no Facebook Facebook

Meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Esse outro é da one.com:

Vamos lá!

Não queremos nos repetir quando desenvolvemos nosso código.

Organizando os HTMLS de acordo com DRY (Don't Repeat Yourself)

Uma das principais vantagens de usar modelos Django, está por trás do conceito de DRY (Don't Repeat Yourself). As coisas mais repetitivas em desenvolvimento web são tipicamente alguns elementos nos documentos HTML, como por exemplo, a tag head, o doctype, etc. Então, para tirar proveito do conceito DRY e não nos repetirmos, vamos modificar nossas páginas para que cada uma delas tenha mais ou menos a mesma estrutura. Para fazer isso nós vamos entrar em nossa pasta de templates e vamos criar um novo arquivo chamado base.html Chamar esse arquivo de base.html é uma convenção, esse arquivo tem os componentes em comum de todas as páginas. O base.html é como se fosse o ponto principal de onde todas as páginas herdam. Crie então o src/templates/base.html. Agora copie e cole o conteúdo do src/templates/home_page.html nele.

Nosso src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <p>{{ content }}</p>
        </div>
        div class='container'>
            <div class='row'>
                <div class='col'>
                    <img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
                    <p>{{ content }}</p>
                </div>
            </div>

            {% if request.user.is_authenticated %}
                <div class='row'>
                    <div class='col'>
                        <h1>Premium</h1>
                        <p>{{ premium_content }}</p>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos tirar o que tá em vermelho, que só diz respeito a home, ficando assim nosso src/templates/base.html.


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

O que tá em vermelho no html acima será retirado e posto no src/templates/base/css.html. Por isso, crie o src/templates/base/css.html Tire o que tá em vermelho no src/templates/base.html mostrado acima, e cole no src/templates/base/css.html, e bem no início coloque a tag template {% load static %} para que funcione corretamente, ficando assim o css.html:

src/templates/base/css.html


{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='{% static "css/main.css" %}'>

E o src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Agora crie src/templates/base/js.html Tire o que tá em vermelho no src/templates/base.html mostrado acima, e cole no src/templates/base/js.html, e bem no início coloque a tag template {% load static %} para que funcione corretamente, ficando assim o js.html:

src/templates/base/js.html


{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

O src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
		
    </body>
</html>

Nosso src/templates/base.html tá bem enxuto agora. A primeria coisa a fazer nesse momento é permitir que nossa src/templates/home_page.html funcione fora da nossa src/templates/base.html. Para fazer isso, vamos inserir {% extends "base.html" %} no início do src/templates/home_page.html antes do {% load static %}. Então precisamos fazer o replace dessa área usando a template tag {% block content %}{% endblock %}, depois do {% load static %}. Dentro desse bloco colocaremos todas as coisas relativas a home_page. Então vamos por partes, primeiro vamos por as tags.

src/templates/home_page.html


{% extends "base.html" %}
{% load static %}
{% block content %}
    <!-- Aqui vai tudo que é referente a home_page  -->
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <p>{{ content }}</p>
        </div>
        <div class='container'>
            <div class='row'>
                <div class='col'>
                    <img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
                    <p>{{ content }}</p>
                </div>
            </div>

            {% if request.user.is_authenticated %}
                <div class='row'>
                    <div class='col'>
                        <h1>Premium</h1>
                        <p>{{ premium_content }}</p>
                    </div>
                </div>
            {% endif %}
    </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

O src/templates/home_page.html tá extendendo o src/templates/base.html. Vamos pegar tudo que tá em vermelho no src/templates/home_page.html logo depois da tag <body> mostrado acima, cortar e colar entre as tags: {% block content %} {% endblock %}

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
        {% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

No src/templates/base.html precisamos colocar o {% block content %} {% endblock %} da src/templates/home_page.html, que acabamos de criar logo acima, porque isso é o que vai ser sobrescrito.

O src/templates/base.html vai ficar assim então:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        {% block content %} {% endblock %}
    </body>
</html>

Com o servidor rodando acesse:

127.0.0.1:8000

Algumas coisas ficaram diferentes, veja que a home_page.html tá pegando da base.html. Podemos testar isso para ver, adicione uma tag html <title>, tanto na src/templates/home_page.html como na src/templates/base.html.

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

src/templates/base.html


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Base Template</title>
    </head>
    <body>
        {% block content %} {% endblock %}
    </body>
</html>

Com o servidor rodando acesse novamente e confira que a home_page.html tá pegando da base.html:

127.0.0.1:8000

Vamos fazer o mesmo processo que fizemos com a src/templates/home_page.html, agora com a src/templates/contacts/views.html.

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %} 
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Formulário de contato</title>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
        </div>
        <div class='container'>
            <div class='row'>
                <div class='col'>
                    <p>{{ content }}</p>
                    <div class='col-sm-6 col-12'>
                        <form method='POST'> {% csrf_token %}
                            {{ form }}
                            <button type='submit' class='btn btn-default'>Enviar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos pegar tudo que tá em vermelho logo abaixo da tag <body> do html acima, cortar e colar entre as tags: {% block content %} {% endblock %} e podemos deletar também todo o restante (em vermelho), ou seja, tudo que tá abaixo do {% endblock %}

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
    </div>
    <div class='container'>
        <div class='row'>
            <div class='col'>
                <p>{{ content }}</p>
                <div class='col-sm-6 col-12'>
                    <form method='POST'> {% csrf_token %}
                        {{ form }}
                        <button type='submit' class='btn btn-default'>Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Formulário de contato</title>
    </head>
    <body>
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/contacts/views.html.

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
    </div>
    <div class='container'>
        <div class='row'>
            <div class='col'>
                <p>{{ content }}</p>
                <div class='col-sm-6 col-12'>
                    <form method='POST'> {% csrf_token %}
                        {{ form }}
                        <button type='submit' class='btn btn-default'>Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

Vamos repetir o mesmo processo com a src/templates/about/views.html, vamos extender o base.html e criar o block content.

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
{% endblock %}
<!doctype html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Código Fluente - About</title>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <h2>{{ content }}</h2>
            <h2>E tá funcionando super bem!!!</h2>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos pegar tudo que tá em vermelho logo abaixo da tag <body> do html acima, cortar e colar entre as tags: {% block content %} {% endblock %}

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
    <div class='text-center'>
        <h1>{{ title }}</h1>
        <h2>{{ content }}</h2>
        <h2>E tá funcionando super bem!!!</h2>
    </div>
{% endblock %}
<!doctype html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Código Fluente - About</title>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/about/views.html.

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
    <div class='text-center'>
        <h1>{{ title }}</h1>
        <h2>{{ content }}</h2>
        <h2>E tá funcionando super bem!!!</h2>
    </div>
{% endblock %}

Podemos deletar tudo que tá em vermelho no html abaixo, da home_page.

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Ficando assim:

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

Aula 16 - Modelo base - Base Template

Modelo base - Base Template

Para baixar o código como está até agora, acesse o link abaixo: https://github.com/toticavalcanti/django_ecommerce/tree/base_template

Antes de começar, quero deixar meu link de afiliados na Hostinger, tá valendo a pena, dêem uma olhada: Hostinger

Dêem um joinha 👍 na página do Código Fluente no Facebook Facebook

Meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro é da one.com:

One.com

Vamos lá!

Não queremos nos repetir quando desenvolvemos nosso código.

Organizando os HTMLS de acordo com DRY (Don't Repeat Yourself)

Nosso src/templates/base.html vai ficar assim:

src/templates/base/css.html

E o src/templates/base.html vai ficar assim:

src/templates/base/js.html

O src/templates/base.html vai ficar assim:

src/templates/home_page.html

src/templates/home_page.html

O src/templates/base.html vai ficar assim então:

Com o servidor rodando acesse:

127.0.0.1:8000

src/templates/home_page.html

src/templates/base.html

Com o servidor rodando acesse novamente e confira que a home_page.html tá pegando da base.html:

127.0.0.1:8000

Vamos fazer o mesmo processo que fizemos com a src/templates/home_page.html, agora com a src/templates/contacts/views.html.

src/templates/contacts/views.html

src/templates/contacts/views.html

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/contacts/views.html.

src/templates/contacts/views.html

src/templates/about/views.html

src/templates/about/views.html

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/about/views.html.

src/templates/about/views.html

Podemos deletar tudo que tá em vermelho no html abaixo, da home_page.

src/templates/home_page.html

Ficando assim:

src/templates/home_page.html

Veja que a formatação não tá funcionando! :(

Para baixar o código como está até agora, acesse o link abaixo: https://github.com/toticavalcanti/django_ecommerce/tree/base_template

Esse são meus link de afiliados na Hostinger: Hostinger

Link da página do Código Fluente no Facebook para vocês darem um 👍. :) https://www.facebook.com/Codigofluente-338485370069035/

Meu link de referidos na digitalocean .

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

E o da one.com:

One.com

Obrigado, até a próxima e bons estudos. ;)

Aulas Relacionadas

Aula 98 – Django – Ecommerce – Baixa Automática de Estoque

Aula 97 - Django - Ecommerce - Gerenciamento de Cartões Salvos (Stripe)

Aula 96 - Django - Ecommerce - Refatoração do Projeto

Aula 28 – Deploy do Sistema de Autenticação no Render.com