Fundamentos sobre o Projeto

Neste projeto, você criará um blog que terá funcionalidades como:

Entendendo Front-end e Back-end

No desenvolvimento de software, os programadores são geralmente divididos em duas categorias: Front-end e Back-end.

Front-end: É responsável pelo design e estilização da aplicação, ou seja, por tudo o que o usuário final vê e interage.

Back-end: É responsável pela lógica e pela comunicação com o banco de dados. Ele lida com a construção de funcionalidades o front-end exibe.

A colaboração entre Front-end e Back-end é essencial para o sucesso do projeto, pois juntos criam uma experiência de usuário coesa e funcional.

Primeiros Passos

Após extrair a pasta "guriasofcode", siga os passos abaixo para configurar e iniciar o seu ambiente de desenvolvimento. Não se preocupe, vamos explicar tudo!

1. Abrindo a Pasta no Visual Studio Code

Abra a pasta "guriasofcode" utilizando o Visual Studio Code. Dentro dessa pasta, você verá vários arquivos que são importantes para o funcionamento do nosso blog. Esses arquivos formam a base do projeto.

2. Acessando o Terminal Integrado

Agora, precisamos abrir o terminal integrado no Visual Studio Code, que é onde você pode digitar comandos.

Para abrir o terminal:

• Pressione Ctrl + ` (a tecla ao lado do número 1 no teclado) ou Vá até o menu e clique em Exibir > Terminal.

Veja como fazer isso:

3. Inicializando os Serviços

Agora vamos preparar o ambiente para o seu blog! O próximo comando que você deve digitar no terminal é:

Este comando faz o seguinte:

• docker-compose: é uma ferramenta que ajuda a gerenciar múltiplos serviços que o seu blog precisa.
• up: inicializa os serviços.
• --build: recria os serviços se houver mudanças, garantindo que tudo esteja atualizado.

Depois de digitar o comando, pressione Enter no teclado. O terminal começará a carregar e você verá várias mensagens. Isso significa que o ambiente está sendo configurado corretamente! Após a execução desse comando, o ambiente estará pronto para uso

4. Abrindo no Navegador

Agora que os serviços estão em funcionamento, é hora de visualizar o seu projeto em ação! Abra o seu navegador de preferência e insira a seguinte URL na barra de endereços: "http://127.0.0.1:8000/". Após pressionar Enter, você será direcionado para uma página simples que exibe o título **"Olá"**. Este será o seu ponto de partida para o desenvolvimento da estrutura do seu blog.

A partir deste momento, você poderá começar a personalizar o layout, adicionar conteúdo e implementar todas as funcionalidades que deseja para o seu projeto. Explore as opções de design e comece a construir um blog que reflita sua visão e estilo!

Para ajudá-lo a visualizar esse processo, assista ao vídeo abaixo, onde mostramos como digitar a URL na barra de pesquisa do navegador:

Finalmente podemos contruir sua primeira pagina!!

Com o projeto aberto em seu editor de texto, navegue até o arquivo index.html. A imagem abaixo ilustra a localização desse arquivo dentro da estrutura do projeto:

Esse arquivo será fundamental para definir a estrutura inicial da sua aplicação web. Dentro do arquivo index.html, você encontrará marcações que guiarão a construção do seu blog. Preste atenção à seguinte linha de código:

O comando 'include' indica que o arquivo 'topo.html' está sendo inserido dentro do 'index.html' Isso significa que, para realizar alterações na parte superior do seu blog, você deve editar o arquivo 'topo.html' Todas as modificações feitas nesse arquivo refletirão automaticamente no topo de todas as páginas que incluem esse cabeçalho.

Vamos criar um topo para pagina

O topo de uma página é normalmente utilizado para criar uma navegação que ajuda os usuários a se orientarem dentro do site.

Para implementar essa navegação, adicione o seguinte código dentro do arquivo topo.html:

<!-- abra o arquivo para realizar alterações no topo da página -->
            <nav class="navbar navbar-expand-lg fixed shadow-sm ">
                <div class="container-fluid">
                    <a class="navbar-brand fw-bold" href="#">
                        Nome do <span class="">blog</span>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="#">Início</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'MeuBlog:formularioPost' %}">Cadastro</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://unipampa.edu.br/alegrete/">Unipampa</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Sobre</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            

Após adicionar as novas linhas de código, chegou o momento de ver a mágica acontecer! 🌟 Retorne ao seu navegador, atualize a página e prepare-se para observar as mudanças que você implementou ganhando vida. Com a nova navegação, seus usuários poderão se mover facilmente entre diferentes seções do blog, aproveitando uma experiência fluida e intuitiva. Certifique-se de testar cada link e funcionalidade para garantir que tudo esteja em perfeito funcionamento. Divirta-se explorando o fruto do seu trabalho! 🚀

Com apenas algumas linhas de código, você conseguiu criar um elemento funcional na página! Isso é possível graças ao poder do Bootstrap 5, que oferece uma ampla gama de componentes prontos e responsivos por meio de classes pré-configuradas. As classes do Bootstrap funcionam como “etiquetas” que adicionam estilos e funcionalidades específicas aos elementos HTML. Por exemplo, a classe `nav` permite criar barras de navegação modernas e adaptáveis a diferentes tamanhos de tela, facilitando a construção de menus de forma rápida e eficiente. Explore as possibilidades e veja como o Bootstrap pode transformar seu projeto em algo incrível com pouco esforço! 🎨✨

Vamos Adicionar a Bio do Seu Grupo no Blog Agora!!

Agora, vamos voltar ao arquivo index.html para criar uma bio para o seu blog, junto com uma mensagem de boas-vindas. Nesta seção, também aprenderemos como as imagens funcionam dentro do Django.

Abaixo está o código que você deve adicionar:

<!-- Bio do grupo -->
                  <section class="inicio py-4">
                    <div class="container-lg">
                      <div class="row min-vh-1000 mt-4 align-items-center align-content-center">
                        <div class="col-md-6 mt-5 mt-md-0">
                          <div class="inicio-imagem text-center">
                            <img src="{% static 'imagens/gurias of code.png' %}" class="rounded-circle mw-100" alt="">
                          </div>
                        </div>
                        <div class="col-md-6 mt-5 mt-md-0 order-md-first">
                          <div class="inicio-texto">
                            <p class="text-muted display-5 mb-1">Olá, Visitante!</p>
                            <h1 class="display-3 text-uppercase fs-1 fw-bold">Seja Bem-vindo!</h1>
                            <h2 class="fs-4">Nome do Seu Blog</h2>
                            <div class="mt-5">
                              <h4 class="text-muted fs-5">Sobre o nosso grupo:</h4>
                              <p class="fs-6">@maria_dev 💻 | Apaixonada por tecnologia</p>
                              <p class="fs-6">@raissa_design 🎨 | Criativa e dedicada</p>
                              <p class="fs-6">@ana_codes 👩‍💻 | Adoro solucionar problemas</p>
                              <p class="fs-6">@juliana_frontend 🌐 | Viciada em interfaces perfeitas</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                  

Uso da Tag {% static %} no Django

No Django, a tag {% static %} é uma ferramenta essencial para lidar com arquivos estáticos como imagens, folhas de estilo (CSS) e scripts JavaScript. Esses arquivos são servidos diretamente ao navegador e são importantes para a aparência e interatividade do seu site.

Arquivos Estáticos

Arquivos estáticos são recursos que não mudam durante a execução do projeto. Isso inclui imagens, CSS e JavaScript que ajudam a definir o layout e a funcionalidade do site.

Funcionamento da Tag {% static %}

Ao utilizar a tag {% static 'caminho/para/arquivo' %}, o Django gera o caminho correto para o arquivo estático. Essa abordagem garante que, independente do ambiente (local ou produção), o Django sempre localize os arquivos corretamente, evitando problemas com URLs relativas.

Exemplo Prático

              <img src="{% static 'imagens/imagem.png' %}" alt="Descrição da imagem">
                

Neste exemplo, estamos usando uma imagem chamada imagem.png localizada na pasta imagens do diretório de arquivos estáticos. A imagem padrão pode ser a logo do projeto Gurias of Code, mas você é livre para substituí-la por qualquer outra imagem.

Gerenciamento de Arquivos Estáticos

Para adicionar ou alterar imagens, basta incluir os arquivos na pasta de estáticos definida no seu projeto Django. A tag {% static %} garante que o caminho correto seja sempre usado, mesmo se o projeto for movido para outro servidor ou ambiente.

Onde as imagens estão no nosso projeto ?

As imagens devem ser armazenadas na pasta correta para que possam ser facilmente acessadas e exibidas em seu site. Normalmente, você encontrará ou criará uma pasta chamada imagens dentro do diretório de arquivos estáticos do seu projeto.

Agora iremos criar o layout principal da pagina de posts

No arquivo index.html, vamos adicionar o layout principal da página, onde serão exibidos os nossos posts. Este layout é fundamental para apresentar suas publicações de forma organizada e atraente.

estrutura do Codigo

Vamos começar com a seção de noticias

                    <section class="py-3 py-md-5">
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
                <h3 class="fs-6 text-secondary mb-2 text-uppercase text-center">
                    Últimas Publicações
                </h3>
                <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
            </div>
        </div>
    </div>
</section>
    

<!-- Layout para listar posts -->
                    <div class="container mt-5">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for post in posts %}
        <div class="col">
            <div class="card shadow-sm h-100">
                <!-- Imagem do Card -->
                <img src="{{post.imagem.url}}" class="card-img-top" alt="Imagem 1">
                <div class="card-body">
                    <div class="mb-3">
                        <!-- Título da Notícia -->
                        <h2 class="card-title mb-0 h4">
                            <a class="texto-preto fw-bold text-decoration-none">
                                {{post.titulo}}
                            </a>
                        </h2>
                    </div>
                    <!-- Resumo da Notícia -->
                    <p class="card-text">
                        {{post.corpo|slice:":60"}}..
                    </p>
                </div>
                <!-- Footer do Card -->
                <div class="card-footer border-top p-4 d-flex justify-content-between align-items-center">
                    <!-- Data da Publicação -->
                    <span class="ms-2 fs-7">
                        <i class="bi bi-calendar3"></i> 
                        {{ post.data_criacao|date:"d/m/Y" }}
                    </span>
                    <!-- Botão para Acessar a Notícia -->
                    <a href="{% url 'MeuBlog:detalhar_post' post.id %}" 
                       class="btn botao-link roxo">
                       Ler mais <i class="bi bi-box-arrow-in-up-right"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
    

Explicando a utilzação do laço for

Quando utilizamos o comando {% for post in posts %}, estamos entrando em um "mundo" onde podemos explorar todos os posts que foram cadastrados. Imagine que cada post é um livro em uma biblioteca, e nosso objetivo é abrir cada um deles para ler suas histórias.

O loop for nos permite passar por cada "livro" (ou post) dentro de uma coleção chamada posts. Em termos simples, estamos dizendo: "Para cada post que eu tenho, faça algo com ele." Acessando Informações:

Dentro desse loop, temos acesso a todas as informações de cada post, como o título, o corpo do texto, a data de criação, etc.

Assim, podemos exibir esses dados na página de forma organizada e amigável. Por exemplo, se quisermos mostrar o título de cada post, podemos fazer isso facilmente, como se estivéssemos lendo os títulos de todos os livros em uma prateleira.

Explicando as Variaveis

No código acima, estamos utilizando uma variável chamada post. Mas o que é uma variável? Pense nela como uma caixa onde podemos guardar informações. Por exemplo, em um projeto de blog, podemos ter várias caixas (variáveis) para armazenar informações sobre cada post, como o título, o corpo do texto, a imagem e a data de criação.

Exemplo: 'post.titulo': É como se tivéssemos uma caixa chamada "título" dentro da nossa caixa post, que contém o nome do post. 'post.corpo': Aqui temos outra caixa que guarda o conteúdo do post. 'post.imagem.url': Nesta caixa, encontramos o caminho da imagem que será exibida no card.

Usando as variáveis, conseguimos acessar facilmente as informações armazenadas e exibi-las de maneira organizada em nosso blog. Essa abordagem nos permite manipular e exibir dados dinamicamente, proporcionando uma experiência de usuário mais rica e interativa.

Com essa estrutura, você poderá listar seus posts de forma dinâmica e atrativa, garantindo que os visitantes do seu blog tenham uma ótima experiência ao navegar pelo conteúdo.

Modificando o Rodapé do Blog

Como você pode notar, ainda temos um arquivo que não foi modificado: o rodape.html. Esse arquivo é incluído na nossa página principal através da linha:

<footer class="py-5 mt-4 shadow-sm">
        <div class="container">
            <p class="text-muted">© 2024 Gurias of Code. Todos os direitos reservados.</p>
            <p class="text-muted">Desenvolvido com ❤️ pelo (número do grupo).</p>
        </div>
    </footer>
    

Estilizando o layout da Pagina com CSS

Depois de ter construído o layout principal da página, é hora de estilizar usando CSS, uma linguagem projetada para adicionar estilos e efeitos visuais às nossas páginas. O CSS permite que você defina cores, fontes, espaçamentos e muito mais, transformando um layout básico em uma interface atraente e envolvente.

Dentro do seu projeto, você encontrará um arquivo chamado index.css. Este arquivo é responsável por criar classes que definem diferentes estilos que você pode aplicar aos elementos da sua página. Com isso, você pode personalizar a aparência do seu blog de forma simples e eficiente.

Adicionando Estilos á navegação

Agora, vamos aplicar uma classe de estilo à barra de navegação (nav). Volte para o arquivo index.html e localize a seção da navegação. Altere a tag <nav> para incluir a classe navbar, navbar-expand-lg, fixed, shadow-sm e fundo-roxo, como no exemplo abaixo:

<nav class= "navbar navbar-expand-lg fixed shadow-sm fundo-roxo">

Explore sua criatividade

Experimente diferentes combinações de cores e estilos, e veja como essas alterações impactam a aparência do seu blog. O CSS oferece flexibilidade para que você crie uma interface que seja não apenas funcional, mas também esteticamente agradável. Divirta-se personalizando seu projeto!

Cadastrando um Post

Com a página aberta em seu navegador utilize o topo de navegação para acessar o link 'Cadastro'

Nesta página você vera um formulário pronto, sua função vai ser cadastrar uma noticia e depois retornar um feedback para o usuario em sua página principal a 'index.html'

preencha as informações do formulário com algo que deseja compartilhar conosco, esse post sera exibido em seu blog

Criando uma mensagem para usuários

no arquivo index iremos criar uma mensagem de sucesso quando um post ser cadastrado

adicione o codigo

        <!-- Mensagem de sucesso com cadastro -->
        {% if messages %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>
                {% for message in messages %}
                {{ message }}
                {% endfor %}
            </strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endif %}
    

Condição {% if messages %}:

Verifica se existem mensagens armazenadas na sessão do usuário. O Django armazena mensagens temporárias que podem ser exibidas após uma ação, como o cadastro de um post. Se a lista de mensagens não estiver vazia, o bloco de código que segue será executado. :

Cria um alerta que será exibido na página. O Bootstrap utiliza essas classes para estilizar o alerta e garantir que ele tenha uma aparência adequada e responsiva. alert-dismissible permite que o alerta possa ser fechado pelo usuário. {% for message in messages %}:

Inicia um loop que itera sobre todas as mensagens disponíveis. Mesmo que, normalmente, você só tenha uma mensagem (por exemplo, "Post cadastrado com sucesso!"), a estrutura permite que você exiba múltiplas mensagens, se necessário. A mensagem é inserida entre as tags , o que a destaca visualmente. {{ message }}:

Aqui é onde o conteúdo de cada mensagem é inserido no HTML. Essa variável representa a mensagem que foi armazenada na sessão do usuário. {% endfor %}: Marca o final do loop, indicando que não há mais mensagens para processar.