Universidade Federal do Piauí Curso: Ciência da Computação Turma: Engenharia de Software II Aluno: Danillo Brito da Mata Matricula:201244196 Tutorial Python Django: Formulários Teresina 2016
Considerações Iniciais É possível adicionar e editar postagens de uma aplicação web através da ferramenta de administração do Django, entretanto esse modo acaba se tornando cansativo e pouco eficiente no quesito da interface humano computador. Com o intuito de agilizar o desenvolvimento de mecanismos de postagens eficientes e com uma interface visual mais agradável ao usuário final da aplicação, foi desenvolvido o sistema de formulários.
Primeiros passos Uma das facilidades do framework django é que o desenvolvedor pode criar um formulário completamente novo a sua escolha ou podemos salvar o resultado de um formulário em um modelo (ModelForm) pré-determinado do django. Com o intuito de facilitar/agilizar o processo de desenvolvimento, utilizaremos ModelForm(s) Faremos, portanto a criação de um formulário do tipo Post Inicialmente, cria-se o arquivo forms.py que deverá conter todos os códigos referentes ao formulário que será descrito neste passo a passo e este arquivo deverá estar na mesma pasta que a sua aplicação web. Para esta explicação usaremos como exemplo um blog simples. Cria-se o arquivo dentro da pasta blog blog forms.py Estrutura básica do formulário from django import forms from.models import Post class PostForm(forms.ModelForm): class Meta: model = Post fields = ('title', 'text',) Primero devem ser importados os formulários do Django (from django import forms) e, nosso modelo (from.models import Post). Nota-se que o nome do nosso formulário é PostForm. É necessário que o framework seja informado que o formulário que pretendemos usar é um formulário do tipo ModelForm, isto é feito na linha forms.modelform. Posteriormente temos a classe Meta onde especificamos o tipo de modelo de formulário será utilizado para criar o formulário (model = Post). Agora informamos o os campos do formulário modelo do django que queremos utilizar em nosso formulário, no caso utilizamos apenas título, que será uma caixa de texto que representará o título da postagem a ser adicionada a aplicação web (title) e texto, que será o texto da postagem a ser adicionada a aplicação (text). Os próximos passos serão: Incorporar o formulário feito a uma vew; Mostra-lo em um template. Os próximos passos irão apresentar erros momentâneos que serão corrigidos no decorrer do desenvolvimento do código.
Link para a página com o formulário Agora iremos abrir nosso blog blog/templates/blog/base.html. Adicionaremos um link em div nomeando page-header desta forma: <a href="{% url 'blog.views.post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a> Note que iremos chamar uma nova visão post_new. Após a adição da linha acima, o html da página deverá parecer-se com isso: {% load staticfiles %} <html> <head> <title>django Girls blog</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstraptheme.min.css"> <link href='//fonts.googleapis.com/css?family=lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'> </head> <body> <link rel="stylesheet" href="{% static 'css/blog.css' %}"> <div class="page-header"> <a href="{% url 'blog.views.post_new' %}" class="topmenu"><span class="glyphicon glyphicon-plus"></span></a> </div> <h1><a href="/">django Girls Blog</a></h1> <div class="content container"> <div class="row"> <div class="col-md-8"> {% block content %} {% endblock %}
</html> </body> </div> </div> </div> Após salvar as modificações feias e recarregar a pagina (http://127.0.0.1:8000) um erro será apresentado (NoReverseMatch). URL Agora abriremos o arquivo blog/urls.py e escrever: url(r'^post/new/$', views.post_new, name='post_new'), O código resultante deve ser algo como: from django.conf.urls import include, url from. import views urlpatterns = [ ] url(r'^$', views.post_list), url(r'^post/(?p<pk>[0-9]+)/$', views.post_detail), url(r'^post/new/$', views.post_new, name='post_new'), Ao salvar e recarregar a página um novo erro será apresentado (AttributeError), pois ainda não temos a visão post_new implementada. post_new view Nesta etapa abriremos o arquivo de views da nossa aplicação e adicionaremos a seguinte linha, seguida pelas outras linhas do from: from.forms import PostForm
A view da aplicação deverá estar parecida com esta forma: def post_new(request): form = PostForm() return render(request, 'blog/post_edit.html', {'form': form}) Para iniciar um formulário novo, Post, deve-se chamar a função PostForm() e passalo para o template. Template (Modelos) Inicialmentedeve-se criar o arquivo post_edit.html na pasta blog/templates/blog. Para fazer o formulário funcionar precisamos ainda: Exibir o formulário: Pode-se fazer isso simplesmente com um. A linha que exibe o formulário deve estar dentro de uma tag HTML form: <form method="post">...</form> Deve-se também criar um botão Salvar. Faremos isso através do próprio HTML: <button type="submit">save</button> Por último devemos adicionar na tag form um {% csrf_token %} para que o formulário fique seguro. Ao termino das modificações o HTML post_edit.html deve ficar: {% extends 'blog/base.html' %} {% block content %} <h1>new post</h1> <form method="post" class="post-form">{% csrf_token %} {{ form.as_p }} <button type="submit" class="save btn btn-default">guardar</button> </form> {% endblock %} ENFIM, DEPOIS DE ATUALIZAR! TEMOS NOSSO FORMUARIO!
Entretanto o nosso formulário AINDA não esta completo. Ao digitarmos algo e tentarmos salvar nada acontece, pois ainda precisamos finalizar nosso view para que ao clicarmos no no botão salvar o conteúdo do que for escrito em title e text: ser salvo. Salvando o formulário De volta ao arquivo blog/views.py que atualmente encontra-se: def post_new(request): form = PostForm() return render(request, 'blog/post_edit.html', {'form': form}) Ao enviarmos um formulário, somos redirecionados de volta para o arquivo views, so que desta vez temos mais alguns dados em request.post. Agora, todos os campos vindos do form estarão disponíveis em request.post. Agora em nossa view precisamos tratar duas situações separadas. Uma para a primeira vês em que o formulário for requisitado que ele deve ser apresentado em branco (como na imagem anterior). Outra para quando voltamos para a view com os dados que digitamos no formulário.
if form.is_valid(): post = form.save(commit=false) post.author = request.user post.published_date = timezone.now() post.save() Basicamente, temos duas coisas aqui: Salvamos o formulário com form.save e adicionados um autor. Na maioria das vezes você irá usar form.save(). Sem commit=false Mas nesse caso precisamos fazer isso. def post_new(request): if request.method == "POST": else: form = PostForm(request.POST) if form.is_valid(): post = form.save(commit=false) post.author = request.user post.published_date = timezone.now() post.save() return redirect('blog.views.post_detail', pk=post.pk) form = PostForm() return render(request, 'blog/post_edit.html', {'form': form}) Vamos ver se funciona. Vá para a página http://127.0.0.1:8000/post/novo adicione um title e o text, salve e perceba a que seremos redirecionados para a página de post_detail.