Construindo Página Inicial da Biblioteca Django

No quarto episódio da nossa série “Aplicação Prática para Aprender Django”, vamos dar continuidade à construção do nosso projeto, focando agora na criação da página principal da biblioteca. Esta etapa é crucial, pois é nessa página que os usuários terão sua primeira impressão do nosso site e encontrarão acesso às funcionalidades principais.

Antes de começarmos a codificar, é importante ter uma ideia clara do que queremos incluir na página inicial da biblioteca. Aqui estão algumas características que geralmente são encontradas nessa página:

Barra de Navegação: Uma barra de navegação que permite aos usuários acessar diferentes partes do site, como a página inicial, a página de busca, a página de categorias, etc.
Lista de Livros em Destaque: Uma seção que exibe uma seleção de livros em destaque, talvez os mais recentes ou os mais populares.
Pesquisa de Livros: Uma caixa de pesquisa que permite aos usuários procurar por livros específicos pelo título, autor, ou palavras-chave.
Categorias de Livros: Uma lista de categorias de livros disponíveis na biblioteca, facilitando aos usuários encontrar livros de seu interesse.

Agora que sabemos o que queremos incluir, vamos começar a implementação no nosso projeto Django. Aqui está um guia passo a passo sobre como fazer isso:

Atualização de URLs: Comece atualizando o arquivo urls.py do seu aplicativo para adicionar uma rota para a página inicial da biblioteca.
Criação da View: Em seguida, crie uma função de visualização (view function) para lidar com a solicitação da página inicial. Esta função deve buscar os livros em destaque, categorias de livros e quaisquer outras informações relevantes que desejamos exibir na página inicial.
Template da Página Inicial: Agora, crie um template HTML para a página inicial da biblioteca. Este template deve incluir a barra de navegação, a lista de livros em destaque, a caixa de pesquisa e a lista de categorias de livros.
Estilo CSS: Finalmente, adicione algum estilo CSS ao seu template para garantir que a página seja visualmente atraente e fácil de usar.

Vamos agora entrar em mais detalhes sobre cada uma dessas etapas:

Atualização de URLs

Abra o arquivo urls.py do seu aplicativo Django e adicione uma nova rota para a página inicial da biblioteca. Por exemplo:

python
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    # Outras URLs do seu aplicativo
]

Criação da View

Agora, vamos criar a função de visualização home em views.py para lidar com a solicitação da página inicial. Esta função deve buscar os livros em destaque, categorias de livros e outras informações relevantes do banco de dados e passá-las para o template da página inicial. Aqui está um exemplo básico:

python
from django.shortcuts import render
from .models import Livro, Categoria

def home(request):
    livros_destaque = Livro.objects.filter(destaque=True)
    categorias = Categoria.objects.all()
    return render(request, 'biblioteca/home.html', {'livros_destaque': livros_destaque, 'categorias': categorias})

Template da Página Inicial

Agora, crie um template HTML chamado home.html na pasta templates/biblioteca do seu aplicativo Django. Este template deve incluir a barra de navegação, a lista de livros em destaque, a caixa de pesquisa e a lista de categorias de livros. Aqui está um exemplo básico:

html
html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Página Inicial da Bibliotecatitle>
    
head>
<body>
    
    <nav>
        <ul>
            <li><a href="{% url 'home' %}">Página Iniciala>li>
            
        ul>
    nav>

    
    <section>
        <h2>Livros em Destaqueh2>
        <ul>
            {% for livro in livros_destaque %}
                <li>{{ livro.titulo }}li>
            {% endfor %}
        ul>
    section>

    
    <section>
        <h2>Pesquisar Livrosh2>
        <form action="{% url 'buscar' %}" method="get">
            <input type="text" name="query" placeholder="Digite o título ou autor do livro">
            <button type="submit">Pesquisarbutton>
        form>
    section>

    
    <section>
        <h2>Categorias de Livrosh2>
        <ul>
            {% for categoria in categorias %}
                <li>{{ categoria.nome }}li>
            {% endfor %}
        ul>
    section>

    

    
body>
html>

Estilo CSS

Por fim, adicione algum estilo CSS ao seu template home.html para garantir que a página seja visualmente atraente e fácil de usar. Você pode fazer isso adicionando um bloco








		

Fechar












Fechar