- Análise de Requisitos ========================
Funcionalidades: Cadastro, atualização, exclusão e consulta de livros.
Interface:
- Preparação dos Modelos de Dados ==================================
class Publication(models.Model):
name = models.CharField(max_length=64)
location = models.CharField(max_length=128)
class Writer(models.Model):
name = models.CharField(max_length=64)
years = models.PositiveIntegerField()
biography = models.OneToOneField(to='WriterDetail')
class WriterDetail(models.Model):
phone = models.BigIntegerField()
city = models.CharField(max_length=128)
class Book(models.Model):
name = models.CharField(max_length=64)
cost = models.DecimalField(max_digits=10, decimal_places=2)
release_date = models.DateField()
publisher = models.ForeignKey(to='Publication')
collaborators = models.ManyToManyField(to='Writer')
- Configuração do Frontend ===========================
1. Arquivos Estáticos
2. Estrutura das Páginas
Código da Página Inicial
<meta charset="UTF-8"></meta>
<title>Sistema de Livros</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet"></link>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<span class="sr-only">Alternar navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Livros <span class="sr-only">(atual)</span></a></li>
<li><a href="#">Editoras</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Mais opções <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Editar</a></li>
<li><a href="#">Excluir</a></li>
<li><a href="#">Ver detalhes</a></li>
<li class="divider" role="separator"></li>
<li><a href="#">Configurações</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control" placeholder="Pesquisar" type="text"></input>
</div>
<button class="btn btn-default" type="submit">Buscar</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Admin</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Ações <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Perfil</a></li>
<li><a href="#">Sair</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a class="list-group-item active" href="{% url 'home' %}">
Início
</a>
<a class="list-group-item" href="{% url 'list' %}">Lista de Livros</a>
<a class="list-group-item" href="#">Lista de Editoras</a>
<a class="list-group-item" href="#">Lista de Autores</a>
<a class="list-group-item" href="#">Mais ações</a>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">BGS</h3>
</div>
<div class="panel-body">
{% block content %}
<div class="jumbotron">
<h1>Bem-vindo ao Sistema de Gestão de Livros</h1>
<p>Gerencie sua coleção de livros de forma eficiente</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Saiba mais</a></p>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
- Implementação da Funcionalidade de Edição ============================================
Passos:
- Clique no botão editar na página de listagem - redireciona para a rota URL e chama a função
update_bookque retorna a página de edição - Após preencher os dados, clique no botão提交enviar que executa o método POST da função
update_book - Após processar os dadoss, redireciona para a página de listagem de livros
Frontend
Página de Listagem - booklist.html
{% extends 'home.html' %}
{% block content %}
<div>
<a class="btn btn-success" href="{% url 'create' %}">Novo Livro</a>
</div>
<br></br>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Título</th>
<th>Preço</th>
<th>Data de Publicação</th>
<th>Editora</th>
<th>Autores</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{% for book_item in book_data %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book_item.name }}</td>
<td>R$ {{ book_item.cost }}</td>
<td>{{ book_item.release_date|date:'d/m/Y' }}</td>
<td>{{ book_item.publisher.name }}</td>
<td>
{% for writer_item in book_item.collaborators.all %}
{% if forloop.last %}
{{ writer_item.name }}
{% else %}
{{ writer_item.name }},
{% endif %}
{% endfor %}
</td>
<td>
<a class="btn btn-primary btn-sm" href="{% url 'update' book_item.pk %}">Editar</a>
<a class="btn btn-danger btn-sm" href="{% url 'remove' book_item.pk %}">Excluir</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Navegação" class="text-center">
<ul class="pagination">
<li>
<a aria-label="Anterior" href="#">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a aria-label="Próximo" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
{% endblock %}
Camada de Rotas - URL Configuration
# Rota para página de edição de livro
url(r'^update_book/(?P<book_id>\d+)/',views.update_book,name='update')
</book_id>
Página de Edição
{% extends 'home.html' %}
{% block content %}
<h2 class="text-center">Editar Livro</h2>
<form action="" method="post">
<p>Título:
<input class="form-control" name="title" type="text" value="{{ edit_book.title }}"></input>
</p>
<p>Preço:
<input class="form-control" name="price" type="text" value="{{ edit_book.cost }}"></input>
</p>
<p>Data de Publicação:
<input class="form-control" name="publish_date" type="date" value="{{ edit_book.release_date|date:'Y-m-d' }}"></input>
</p>
<p>Editora:
<select class="form-control" id="" name="publisher">
{% for pub_item in all_publishers %}
{% if edit_book.publisher == pub_item %}
<option selected="selected" value="{{ pub_item.pk }}">{{ pub_item.name }}</option>
{% else %}
<option value="{{ pub_item.pk }}">{{ pub_item.name }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<p>Autores:
<select class="form-control" id="" multiple="multiple" name="writers">
{% for writer_item in all_writers %}
{% if writer_item in edit_book.collaborators.all %}
<option selected="selected" value="{{ writer_item.pk }}">{{ writer_item.name }}</option>
{% else %}
<option value="{{ writer_item.pk }}">{{ writer_item.name }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<input class="btn btn-warning pull-right" type="submit"></input>
</form>
{% endblock %}
Backend - View Function
def update_book(request, book_id):
book_record = models.Book.objects.filter(pk=book_id).first()
if request.method == 'POST':
title_value = request.POST.get('title')
price_value = request.POST.get('price')
publish_date_value = request.POST.get('publish_date')
publisher_id = request.POST.get('publisher')
writers_list = request.POST.getlist('writers')
models.Book.objects.filter(pk=book_id).update(
name=title_value,
cost=price_value,
release_date=publish_date_value,
publisher_id=publisher_id
)
book_record.collaborators.set(writers_list)
return redirect(reverse('list'))
all_publishers = models.Publication.objects.all()
all_writers = models.Writer.objects.all()
return render(request, 'edit_book.html', {
'edit_book': book_record,
'all_publishers': all_publishers,
'all_writers': all_writers
})