Desenvolvimento

28 nov, 2008

Aplicações rápidas para Web com Django

Publicidade

Criado dentro do Lawrence Journal-World por Adrian Holovaty.Criado dentro do Lawrence Journal-World por Adrian Holovaty.

Adrian era apaixonado por música e seu sonho era ser jornalista. Mas como nem tudo é perfeito ele trabalhava em um jornal como desenvolvedor. Já cansado de ter que refazer muitas coisas na sua rotina diária, ao conhecer Python depois de estudar o livro Mergulhando no Python, decidiu implementar um framework que facilitasse sua vida.

Django Reinhardt - Grande nome do Jazz.Django Reinhardt – Grande nome do Jazz.

Com o framework “pronto”, a sua paixão pela música fez com que ele colocasse o nome de Django, em homenagem ao grande nome do Jazz Django Reinhardt.

Framework Web de alto nível escrito em Python.

Python é uma linguagem de altíssimo nível, orientada a objetos, dinâmica, interativa e com muitas outras qualidades. Muitas empresas já se tornaram inteligentes o suficiente para ver que se trata de uma linguagem séria e que vale a pena implementar seus softwares com a robustez, elegância e facilidade que o Python proporciona.

O Django proporciona o desenvolvimento rápido de aplicações, fazendo com que o desenvolvedor se preocupe menos com coisas redundantes. O framework Django automatiza coisas repetitivas. Coisas como formulários, enquetes, feeds e qualquer outro tipo de aplicação que você tenha que fazer poderá ser aproveitada em outros projetos, pois o Django tem em sua filosofia que toda aplicação pode e deve ser plugável.

Como trabalha o Django?

Ao se trabalhar com Django, utlizamos o desenvolvimento em camadas, que facilita tanto o desenvolvimento quanto a manutenção de qualquer sistema. Sempre que ouvimos falar em camadas nos vem à cabeça o padrão MVC. O Django utiliza este mesmo padrão, mas por convenção os idealizadores do Django optaram por chamar as camadas que o Django trabalha por MTV, que são os já conhecidos Models, Templates, e Views.

Veremos agora um pequeno resumo de como funcionam estas camadas.

MODELS

Os Models são os nossos modelos de dados. Com eles fazemos o Mapeamento Objeto Relacional do nosso banco de dados. Todas as classes criadas são transformadas em tabelas no nosso banco, e durante todo o desenvolvimento não precisaremos digitar praticamente nenhuma string SQL.

class Exemplo(models.Model):

pass

TEMPLATES

Responsáveis pela “apresentação” do site, os templates são uma mistura de elementos HTML e códigos Python.

Os códigos Python são compostos por {% instruções %} e {{ variáveis }}.

VIEWS

Funcionam como o “controller” da aplicação. Aqui definimos o que será passado para os templates apresentarem em suas páginas. Basicamente aqui nas views criamos funções e definimos as páginas que retornarão os resultados destas funções.

def index(request):

lista = Emprego.objects.order_by(‘-publicado’)[:10]

return render_to_response(‘vagas/index.html’, {‘lista’:lista})

A documentação é importante?

O Django possui uma documentação muito boa. E a comunidade participa ativamente em gerar novos exemplos, tutoriais, video aulas e afins. Como todas as ferramentas e softwares livres que existem hoje, o primeiro meio a se recorrer é sem dúvida nenhuma a documentação oficial do projeto.

O Django possui ainda diversos livros (em inglês) que discorrem muito bem sobre as funcionalidades do framework. Em breve, também espero que tenhamos livros no nosso português, para facilitar ainda mais o acesso aos brasileiros para esse fantástico framework.

Mercado de Trabalho

Há vagas!

http://www.pythonbrasil.com.br/moin.cgi/OportunidadesDeEmprego (42 Vagas)

http://djangogigs.com/ (242 Vagas)

http://simonwillison.net/2008/Jan/18/django/ (74 Vagas)

http://www.python.org/community/jobs/ (221 Vagas)

As vagas oferecidas são muitas, e são geralmente para projetos grandes, com vários desenvolvedores atuando diretamente no desenvolvimento.

Alguns exemplos de sites/projetos que utilizam Django.

Instalação

  • Python 2.3+
  • Database: PostgreSQL, MySQL, SQLite3
  • Django 1.0 >> Debian like -> apt-get install python-django

Outros GNU’s -> http://www.djangoproject.com/download/

-> tar xvzf Django-1.0.tar.gz

-> cd Django-1.0

-> python setupt.py install (como root)

Prática

Iremos agora desenvolver uma aplicação simples, para começarmos a nos familiarizar com os projetos e aplicações com Django.

Nosso projeto será um site de uma empresa que anuncia vagas de emprego. Nele ainda haverá uma área administrativa onde o administrador gerenciará as vagas postadas no site.

A aplicação será desenvolvida em 11 passos:

Passo 1:

Abra seu gerenciador de banco de dados preferido e crie um banco chamado “empresa”.

– No meu caso, eu utilizei o phpMyAdmin para criar o banco no MySQL. Mas você pode utilizar qualquer outro de sua preferência, como o SQLite, PostgreSQL, Oracle…

Passo 2:

Abra o terminal, entre no seu “home” e crie um diretório chamado “django_projetos” com o seguinte comando:

1 – cd ~

2 – mkdir django_projetos

Passo 3:

Ainda com o terminal aberto digite os seguintes comandos:

  1. cd django_projetos # Comando para entrar no diretório “django_projetos”
  2. django-admin.py startproject empresa # comando do django para criar projetos
  3. cd empresa # após criar o projeto “empresa” entraremos no diretório criado
  4. ls # comando para listarmos o conteúdo do diretório.

Esta é a estrutura encontrada no diretório do projetos que acabamos de criar. Podemos ver neste caso que a estrutura de um projeto no Django é bem enxuta. 🙂

Sobre a estrutura criada:

Até o momento descobrimos que para se criar um projeto com Django utilizamos o comando django-admin.py + nomeDoProjeto. No nosso exemplo o comando foi django-admin.py empresa.

Descobrimos também que ao se criar um projeto o Django cria um diretório com o nome do projeto e dentro deste diretório ele coloca uma estrutura básica de arquivos.

O arquivo “settings.py” é o arquivo que utilizamos para configurar as informações do nosso banco de dados (nome do banco, usuário, senha) e algumas coisas mais que veremos mais à frente.

O arquivo “manage.py“, como o próprio nome sugere, serve para gerenciarmos nosso projeto. Trabalharemos bastante com ele durante o desenvolvimento do projeto.

O arquivo “urls.py” é o arquivo responsável pelas rotas do nosso site. Veremos mais detalhes também à frente.

O arquivo “__init__.py” se você abri-lo verá que não tem nada escrito dentro dele, mas ele simplesmente diz ao Python que aquele projeto se trata de um pacote.

Passo 4:

Ainda dentro do diretório do nosso projeto, criaremos nossa aplicação com o seguinte comando:

django-admin.py startapp vagas

Entraremos dentro do diretório da aplicação criada:

cd vagas

Listaremos os arquivos contidos na aplicação.

ls

Como vimos acima, da mesma forma que o Django cria uma estrutura básica para nossos projetos, ele também cria uma estrutura para nossas aplicações. Veremos agora para que serve cada arquivo criado.

O arquivo “models.py” serve para criarmos nossas classes de dados. Veremos que é uma das partes mais legais de se trabalhar com Django. Falaremos mais sobre este arquivo mais tarde.

O arquivo “views.py” é utilizado para criarmos as views da nossa aplicação (difícil adivinhar, não?), mas pensando no conceito MVC este seria o “controller” da nossa aplicação. Lembrando que o Django colocou a nomenclatura de suas camadas de MTV.

O arquivo “__init__.py” assim como no arquivo de mesmo nome do nosso projeto não tem nada escrito dentro, mas serve para dizer para o Python que nossa aplicação é um pacote.

Chegou a hora de fazermos algo de útil com os arquivos que o Django gerou. Daqui para frente iremos codificar. Para isso eu irei utilizar o Komodo Edit, que para quem não conhece é um excelente editor de códigos para o GNU/Linux, e pode ser baixado gratuitamente no link abaixo.

Link: http://downloads.activestate.com/Komodo/releases/4.4.1/Komodo-Edit-4.4.1-1774-linux-libcpp6-x86.tar.gz

Claro que você pode utilizar qualquer outro editor, eu aconcelho o Komodo Edit que é gratuito e excelente, não somente para Python, mas também para Ruby, PHP e outras mais.

Passo 5:

Como vimos nos passos anteriores, o Django trabalha com o padrão MVC, ou melhor dizendo MTV, sendo que o “M” são os Models, o “T” são os Templates, e o V são as Views.

Na nossa estrutura atual temos configurado da seguinte forma:

/home/usuario/django_projetos/empresa/vagas/

Sendo que o diretório “django_projetos” foi criado por nós dentro do diretório “home” do usuário.

O diretório “empresa” foi criado prlo Django, quando executamos o comando para criação de projetos “django-admin.py startproject empresa“.

O diretório “vagas” foi também criado pelo Django quando executamos o comando para criação de aplicações “django-admin.py startapp vagas” .

Vamos agora, criar o diretório onde estarão os Templates do nosso projeto.

Entre no diretório do nosso projeto e crie uma pasta chamada “templates”

Feito isso, a estrutura do nosso projeto deverá estar desta forma:

Sendo que os diretórios “vagas” e “templates” estão no mesmo nível, dentro do diretório “empresa“.

Bem, feito isso, com o Komodo edit, criaremos um novo projeto, da seguinte forma:

Menu “file” -> “new” -> “new project”

Na caixa de seleção que aparece, selecionaremos o diretório do nosso projeto, que fica em

/home/usuario/django_projetos/empresa“, e daremos o nome do projeto de “empresa“.

Com isso, temos nosso projeto criado e aberto com o Komodo Edit. Já podemos editar o código.

Abrimos o arquivo “settings.py” e alteramos as linhas descritas abaixo.

DATABASE_ENGINE = 'mysql' # Estou utilizando o MySql, mas pode ser utilizado outro.
DATABASE_NAME = 'empresa' # Aqui vai o nome do banco que criamos no início.
DATABASE_USER = 'root' # Nome de usuário do banco de dados.
DATABASE_PASSWORD = '123' # Senha de usuário do banco de dados.
DATABASE_HOST = 'localhost' # Endereço do servidor de banco de dados.
LANGUAGE_CODE = 'pt-br' # Sim, o Django dá suporte ao Português do Brasil.
TEMPLATE_DIRS = ('/home/usuario/django_projetos/empresa/templates/',)

# Nesta parte em especial, vemos as aplicações que já vêm por padrão instaladas pelo Django, sendo que acrescentamos apenas o conteúdo em azul.

INSTALLED_APPS = (

    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.admin',
    'django.contrib.admindocs',
    'empresa.vagas',

)

Não se preocupem com o resto do arquivo no momento. Aos poucos iremos conhecer mais a fundo cada opção e artifícios que podemos acrescentar ainda aqui.

No momento saiba apenas que as aplicaçõe que nós adicionamos há pouco são, em ordem, a Administração do sistema (django.contrib.admin), a documentação para o Administrador (django.contrib.admindocs) e nossa aplicação criada, no caso específico, é a aplicação “vagas” que está no projeto “empresa” (empresa.vagas).

Passo 6:

Legal, nossa aplicação já está configurada. Mas ainda não vimos nada de anormal, ou de excepcional. Mas agora, meus amigos, o Django começará a mostrar seu poder!

Começaremos agora a criar nossos modelos de dados. Abriremos o arquivo “models.py” que se encontra em: “/vagas/models.py

O arquivo models.py está praticamente vazio, contando apenas com duas linhas, sendo ainda uma delas um comentário.

Deixaremos ele para que fique da seguinte forma:

from django.db import models

class Local(models.Model):
    cidade = models.CharField(max_length=50)
    estado = models.CharField(max_length=50, null=True, blank=True)
    pais = models.CharField(max_length=50)

    def __unicode__(self):
        if self.estado:
            return "%s, %s, %s" % (self.cidade, self.estado, self.pais)
       else:
           return "%s, %s" % (self.cidade, self.pais)

class Emprego(models.Model):
    publicado = models.DateField()
    titulo = models.CharField(max_length=50)
    descricao = models.TextField()
    local = models.ForeignKey(Local)

    def __unicode(self):
        return "%s (%s)" % (self.titulo, self.local)

Bom, comentando um pouco o código em azul acima. Dessa forma criamos as classes que logo se tornarão tabelas no nosso banco de dados.

A classe criada com o nome “Local“, terá 3 campos, sendo eles “cidade“, “estado“, “pais“. Podem ver também que todos os campos foram definidos como “CharField” com um tamanho definido em 50 caracteres. Podemos ver, ainda, que o campo “estado” aceita valor em branco, ou valores nulos, ou seja, não é um campo obrigatório. Daqui a pouco, ao “pedirmos” para o Django transformar nossas classes em tabelas no banco, ele criará uma chave primária para a dita cuja.

Logo abaixo dela, mas ainda fazendo parte da mesma, criamos uma função, que simplesmente diz o seguinte:

“Ao ser solicitado as informações contidas aqui na tabela “Local “, caso exista o campo “estado“, retorne cidade, estado e pais (Lembram que o campo estado não é obrigatório?). Caso o campo “estado” não exista, retorne cidade e pais.

A outra classe foi criada com o nome “Emprego” e tem 4 campos, sendo eles “publicado” do tipo DateField, “titulo” do tipo já conhecido CharField, “descricao” do tipo TextField. Agora reparem o último campo, chamado de “local” que é do tipo ForeignKey, e referencia a outra classe, Local. Ou seja, esta tabela receberá a chave primária da primeira como chave estrangeira para ela, formando assim uma referência entre as duas tabelas.

Assim como na primeira classe, nesta também temos definida uma função, que neste caso apenas diz que:

“Ao solicitar informações desta classe, retorne os campos “titulo” e “local”.

Parte 7:

Bom, criamos nossos modelos de dados. Eles já nos dão uma boa idéia de como o Django trabalha. Mas ainda não vimos o poder do Django.

Então vamos lá. Poder nº 1

Abra o terminal e vá até o diretório do nosso projeto: “/home/usuario/django_projetos/empresa

Digite: python manage.py sql vagas

Viram algo?…Se fizemos tudo certo até o momento o Django nos apresentou a estrutura SQL que ele fez para nosso modelo de dados.

Legal isso, não? Só não podemos esquecer que nada foi feito ainda. Ele apenas nos apresentou a estrutura SQL do nosso modelo de dados com o comando python manage.py sql vagas

Abram o PHPMyAdmin e vejam a estrutura do banco “empresa“, estará vazio ainda, mas por pouco tempo.

Ainda com o terminal aberto digite: python manage.py syncdb

O Django criará a as tabelas no banco com a estrutura de todas as aplicações descritas no arquivo “settings.py” na seção “INSTALLED_APPS“. Ele perguntará também se você quer criar um usuário que será o administrador do sistema, confirme, crie o administrador, forneça uma senha e lembre-se dela, pois iremos precisar mais à frente.

Repare também que apesar de termos criado apenas 2 classes de dados, o Django cria uma estrutura bem maior no nosso banco de dados, como podemos ver ao acessar o PHPMyAdmin novamente e olharmos a estrutura do nosso banco.

Isso foi feito porque no arquivo “settings.py” estão adicionadas várias aplicações no nosso projeto, como por exemplo controle de sessions, administração e, claro, nossa aplicação “vagas”.

Testaremos agora nosso projeto. Estando no terminal no diretório do nosso projeto “/home/usuario/django_projetos/empresa” digite: python manage.py runserver

Agora abrimos o browser e digitamos: http://127.0.0.1:8000

Se nada deu errado até o momento, uma tela de congratulações do Django estará aberta.

Como podemos ver, nosso projeto Django já está rodando. Como não temos nenhuma página principal estabelecida, o Django nos mostra uma página de congratulações.

Passo 8:

Bem, então vimos algo relativamente poderoso que o Django fez. Mas foi apenas o primeiro “poder” do Django. Agora veremos uma das coisas mais legais que o Django traz na criação dos nossos projetos, a interface administrativa.

Com o Komodo Edit aberto, clique com o botão direito no diretório da nossa aplicação “vagas“, crie um novo arquivo e dê o nome para ele de “admin.py

Abra o arquivo criado agora para acrescentarmos algumas linhas de código.

from empresa.vagas.models import Local
from empresa.vagas.models import Emprego
from django.contrib import admin

class LocalAdmin(admin.ModelAdmin):
    pass

class EmpregoAdmin(admin.ModelAdmin):
    pass

admin.site.register(Local, LocalAdmin)
admin.site.register(Emprego, EmpregoAdmin)

Já dissemos pro Django que queremos a interface administrativa para nosso projeto, porém ainda não configuramos a roda da nossa da nossa aplicação.

Faremos o seguinte então:

Abram o arquivo “urls.py” editem para que se pareça com o abaixo.

from django.conf.urls.defaults import *
# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('empresas.vagas.views',
# Example:
# Uncomment the line below to show the static files (css, js, png)
# (r'^media/(?P<path>.*)
, 'django.view.static.serve',{ 'document_root': media}), # (r'^empresa/', include('empresa.foo.urls')), # Uncomment the admin/doc line below and add 'django.contrib.admindocs' # to INSTALLED_APPS to enable admin documentation: (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: (r'^admin/(.*)', admin.site.root), #Página principal da nossa aplicação ('r^
, 'index'), ('^(?P<object_id>\d+)/
, 'detail'), )

As linhas em azul acima são as linhas que foram alteradas. O restante ficará no momento como estão. Não se preocupem muito com o seu conteúdo, mas dificilmente na maioria dos projetos que você fizer será diferente deste aqui.

Caso o browser ainda esteja aberto apenas acrescente “/admin/

Se você fechou o browser e parou o servidor, abra novamente o terminal, entre no diretório do projeto:

“/home/usuario/django_projetos/empresa/”

digite: python manage.py runserver

Abra o browser e digite o endereço: http://127.0.0.1:8000/admin/

Caso os códigos tenham sido digitados de forma correta, e não ocorreu nenhum outo problema, teremos uma página da administração do Django, com um campo usuário e senha.

Este campo deverá ser preenchido com as informações que fornecemos quando sincronizamos nossa base de dados.

Temos então, a interface administrativa do nosso projeto. Podemos ver que a interface está administrando as aplicações que foram fornecidas automaticamente pelo Django e as nossas também. Temos até o momento a aplicação “Auth“, a “Sites” e a “Vagas“.

Passo 9:

Ainda na interface administrativa do nosso projeto, clique em Locals na nossa aplicação. Você verá que ainda não existe nenhum local cadastrado. E verá também que existe um botão “Adicionar Local” no canto superior direito.

Clique nele e adicione alguns locais.

Feito isto, vá agora em Empregos e adicione também algumas vagas.

Repare que em ambos os casos o Django criou todos os formulários e campos necessários para essa nossa administração.

Depois de adicionarmos alguns locais e empregos na nossa aplicação podemos ver que o Django já nos apresenta os dados cadastrados, mas de uma forma que ainda não é legal.

Iremos agora melhorar isso. Abra novamente o arquivo admin.py que está em “/empresa/vagas/admin.py

Edite ele para que fique da seguinte forma:

from empresa.vagas.models import Local
from empresa.vagas.models import Emprego
from django.contrib import admin

class LocalAdmin(admin.ModelAdmin):
    list_display = ("cidade", "estado", "pais")
    ordering = ["estado"]
    search_fields = ("estado", "pais")
    list_filter = ("estado",)


class EmpregoAdmin(admin.ModelAdmin):
    list_display = ("titulo", "descricao", "local", "publicado")
    ordering = ["-publicado"]
    search_fields = ("titulo", "descricao")
    list_filter = ("local",)

admin.site.register(Local, LocalAdmin)
admin.site.register(Emprego, EmpregoAdmin)

Agora que acrescentamos algumas linhas de código, visualize novamente a aplicação. Tanto os Locais quanto as vagas cadastradas então mais limpas e arrumadas. E olhando para o código fica claro o que foi “pedido” para o Django.

Passo 10:

Iremos agora criar as páginas de visualização. Para isto, editaremos agora nossas views e nossos templates.

Com o Komodo Edit, abra o arquivo “views.py” que está em “/home/usuario/empresa/vagas/views.py

Como podemos ver ele ainda está praticamente vazio, contanto apenas com um comentário. Edite ele para que se pareça com o trecho abaixo.

from django.shortcuts import get_object_or_404, render_to_response
from vagas.models import Emprego

def index(request):
    lista = Emprego.objects.order_by('-publicado')[:10]
    return render_to_response('vagas/index.html', {'lista':lista})

def detail(request, object_id):
    vaga = get_object_or_404(Emprego, pk=object_id)
    return render_to_response('vagas/detail.html',{'vaga':vaga})

Comentando um pouco o código acima, por agora podemos dizer que as duas funções criadas “index” e “detail” serão responsáveis por “gerar” as informações que serão visualizadas daqui a pouco na nossa aplicação.

Para que isso seja possível, será necessário agora apenas criarmos nossos templates.

Lembre-se de que no arquivo “settings.py” informamos que nosso diretório de templates ficaria em:

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), 'templates'),
)

Ou seja, na raiz do nosso projeto “empresa” haveria uma pasta chamada “templates” com nossos respectivos templates.

Repare também que nas views que criamos acima o “return” irá renderizar as páginas index.html e detail.html em um diretório “vagas“, que é um diretório dentro da pasta “templates“. Sendo assim, podemos notar que para um melhor controle dos nossos templates, ao menos por enquanto, é legal que deixemos separados os templates de cada aplicação em sua própria pasta com o nome da aplicação dentro do diretório “templates“.

Então, para finalizarmos esta parte, crie um diretório chamado “vagas” dentro da pasta “templates” para que fique da seguinte forma:

/home/usuario/django_projetos/empresa/templates/vagas/

Passo 11:

Editando os templates.

Com o Komodo edite aberto, crie um arquivo que servirá de base para todas as nossas páginas do projeto. Caso isto pareça confuso, imagine que em seu site haverá diversas páginas, e que em todas ou na maiorias destas páginas um cabeçalho, menu ou rodapé se repetirão. Para que você não tenha que repetir os códigos, o Django sugere para você o DRY (Don’t Repeat Yourself).

Este primeiro arquivo deverá ser criado no diretório “templates” e deverá ser chamado de “base.html

Este é o caminho que deverá ficar o arquivo: “/empresa/templates/base.html

Deixe o arquivo com as seguinte linhas de código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3c.org/1999/xhtml xml:lang="en" lang="en">
<head>
<title> Super Empresa: {% block title %} Page {% endblock %} </title>
{% block extrahead %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>

Repare que tirando os códigos destacados em azul, todo o restante é HTML puro. E mesmo a parte destacada será familiar para quem já trabalhou com PHP + o SMARTY.

O próximo passo é criar a página “base.html” que será a base de todas as páginas da aplicação “vagas” no nosso projeto. Não confunda com o arquivo base anterior. Lembre-se de que o Django trabalha com Projetos e Aplicações. O primeiro que criamos foi o base do projeto, este agora será o base da aplicação.

Para isso, crie o arquivo “base.html” no seguinte caminho:”/empresa/templates/vagas/base.html

Edite o arquivo e escreva o código abaixo:

{% extends "base.html" %}
{% block extrahead %}
<style>
body {
font-style: arial;
color:navy;
}
h1 {
text-align: center;
}
.job .title {
font-size: 12px;
font-weight: bold;
}
.job .posted {
font-style: italic;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
background:#ffc;
color: #FF0000;
}
a:active {
text-decoration:none;
}
</style>
{% endblock %}

Neste arquivo podemos ver que em sua maior parte são estilos para as páginas da nossa aplicação.

Quanto à parte de código destacada, na primeira linha é onde o Django diz que este arquivo é a extensão do arquivo “base.html” do nosso projeto.

A segunda linha em destaque diz que o código escrito entre ela e o fechamento do bloco (última linha em destaque) são para serem inseridos no “head’ dos arquivos da nossa aplicação.

OBS: Claro que essa forma de colocar estilos é apenas demonstrar a forma que o Django trabalha com templates. Em uma aplicação mais “séria” iríamos ter os diretórios com nossos CSS, JS, e imagens todos separados.

Agora crie o arquivo “index.html” no seguinte caminho: “/empresa/templates/vagas/index.html

Adicione as linhas de código abaixo:

{% extends "vagas/base.html" %}

{% block title %} Lista de vagas {% endblock %}

{% block content %}
<h1>Lista de vagas</h1>
<ul>
{% for vaga in lista %}
<li><a href="{{ vaga.id }}">{{ vaga.titulo }}</a></li>
{% endfor %}
</ul>
{% endblock %}

Deste arquivo destaquei apenas o “for” que irá percorrer nossa tabela em busca do título das nossas vagas.

Lembre-se de que nos os templates no Django são compostos de tags HTML e códigos Python. Sendo que para os códigos Python as instruções estarão entre “{% %}” e as variáveis entre “{{ }}“.

O último arquivo para criarmos e editarmos é o “detail.html” que será apresentado ao se clicar no link gerado na página anterior. Este arquivo deverá estar no seguinte caminho: “/empresa/templates/vagas/detail.html

Crie o mesmo e adicione as seguintes linhas de código:

{% extends "vagas/base.html" %}

{% block title %} Detalhes da vaga {% endblock %}

{% block content %}
<h1>Detalhes da vaga</h1>

div class="job">
<div class="title">
{{ vaga.titulo }}
-
{{ vaga.local }}
</div>
<div class="posted">
Postado em: {{ vaga.publicado|date:"d-M-Y" }}
</div>
<div class="description">
{{ vaga.descricao }}
</div>
</div>
<p> </p>
<a href="http://127.0.0.1:8000/">Voltar</a>
{% endblock %}

Este arquivo, como podem ver, não tem nada de diferente. Ele apenas apresenta as informações referentes à vaga clicada na tela anterior.

Agora podemos abrir novamente o terminal, entrarmos dentro do diretório do nosso projeto

e startarmos nosso servidor para visualizar nossa aplicação pronta.

Dentro de “/home/usuario/django_projeto/empresa/

Digite: python manage.py runserver

Abra o navegado e digite o seguinte endereço: http://127.0.0.1:8000/

Agora podemos passear pelas informações das vagas cadastradas pela administração do site, inclusive ser os detalhes das mesmas.

Com isso, terminamos por aqui. Espero que tenham gostado do tutorial e do Django. Nos próximos iremos ver mais algumas mágicas que o poder do Django proporciona.

Lembrando que qualquer critica ou sugestão será bem-vinda. E caso encontrem erros nos scripts podem me avisar que corrigirei o mais breve possível.

Referências

http://groups.google.com/group/django-brasil/

http://djangoproject.com/documentation/

http://code.djangoproject.com/

http://groups.google.com/group/django-user

http://groups.google.com/group/djang-developers

Diemesleno Souza Carvalho

edit1 Artigo(s)

é Tecnólogo em Desenvolvimento de Sistemas para Internet, Analista de Sistemas na Secretaria de Fazenda de Mato-Grosso do Sul e diretor de T.I. da Webdomeni. Trabalha com sistemas para Internet desde 2004 utilizando PHP, MySQL, PostgreSQL, C# e Python. É entusiasta GNU/Linux tendo experiência em diversas distribuições desde 1998. Atualmente também realiza pesquisas na área de Desenvolvimento de Jogos e Inteligência Artificial."

, 'django.view.static.serve',{ 'document_root': media}),\n# (r'^empresa\u002F', include('empresa.foo.urls')),\n\n# Uncomment the admin\u002Fdoc line below and add 'django.contrib.admindocs'\n# to INSTALLED_APPS to enable admin documentation:\n \u003Cspan class=\"coment\"\u003E(r'^admin\u002Fdoc\u002F', include('django.contrib.admindocs.urls')),\u003C\u002Fspan\u003E\n\n# Uncomment the next line to enable the admin:\n \u003Cspan class=\"coment\"\u003E(r'^admin\u002F(.*)', admin.site.root),\u003C\u002Fspan\u003E\n\n\u003Cspan class=\"coment\"\u003E#Página principal da nossa aplicação\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003E('r^ window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} , 'django.view.static.serve',{ 'document_root': media}), # (r'^empresa/', include('empresa.foo.urls')), # Uncomment the admin/doc line below and add 'django.contrib.admindocs' # to INSTALLED_APPS to enable admin documentation: (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: (r'^admin/(.*)', admin.site.root), #Página principal da nossa aplicação ('r^ , 'index'), ('^(?P<object_id>\d+)/ , 'detail'), )

As linhas em azul acima são as linhas que foram alteradas. O restante ficará no momento como estão. Não se preocupem muito com o seu conteúdo, mas dificilmente na maioria dos projetos que você fizer será diferente deste aqui.

Caso o browser ainda esteja aberto apenas acrescente “/admin/

Se você fechou o browser e parou o servidor, abra novamente o terminal, entre no diretório do projeto:

“/home/usuario/django_projetos/empresa/”

digite: python manage.py runserver

Abra o browser e digite o endereço: http://127.0.0.1:8000/admin/

Caso os códigos tenham sido digitados de forma correta, e não ocorreu nenhum outo problema, teremos uma página da administração do Django, com um campo usuário e senha.

Este campo deverá ser preenchido com as informações que fornecemos quando sincronizamos nossa base de dados.

Temos então, a interface administrativa do nosso projeto. Podemos ver que a interface está administrando as aplicações que foram fornecidas automaticamente pelo Django e as nossas também. Temos até o momento a aplicação “Auth“, a “Sites” e a “Vagas“.

Passo 9:

Ainda na interface administrativa do nosso projeto, clique em Locals na nossa aplicação. Você verá que ainda não existe nenhum local cadastrado. E verá também que existe um botão “Adicionar Local” no canto superior direito.

Clique nele e adicione alguns locais.

Feito isto, vá agora em Empregos e adicione também algumas vagas.

Repare que em ambos os casos o Django criou todos os formulários e campos necessários para essa nossa administração.

Depois de adicionarmos alguns locais e empregos na nossa aplicação podemos ver que o Django já nos apresenta os dados cadastrados, mas de uma forma que ainda não é legal.

Iremos agora melhorar isso. Abra novamente o arquivo admin.py que está em “/empresa/vagas/admin.py

Edite ele para que fique da seguinte forma:

from empresa.vagas.models import Local
from empresa.vagas.models import Emprego
from django.contrib import admin

class LocalAdmin(admin.ModelAdmin):
    list_display = ("cidade", "estado", "pais")
    ordering = ["estado"]
    search_fields = ("estado", "pais")
    list_filter = ("estado",)


class EmpregoAdmin(admin.ModelAdmin):
    list_display = ("titulo", "descricao", "local", "publicado")
    ordering = ["-publicado"]
    search_fields = ("titulo", "descricao")
    list_filter = ("local",)

admin.site.register(Local, LocalAdmin)
admin.site.register(Emprego, EmpregoAdmin)

Agora que acrescentamos algumas linhas de código, visualize novamente a aplicação. Tanto os Locais quanto as vagas cadastradas então mais limpas e arrumadas. E olhando para o código fica claro o que foi “pedido” para o Django.

Passo 10:

Iremos agora criar as páginas de visualização. Para isto, editaremos agora nossas views e nossos templates.

Com o Komodo Edit, abra o arquivo “views.py” que está em “/home/usuario/empresa/vagas/views.py

Como podemos ver ele ainda está praticamente vazio, contanto apenas com um comentário. Edite ele para que se pareça com o trecho abaixo.

from django.shortcuts import get_object_or_404, render_to_response
from vagas.models import Emprego

def index(request):
    lista = Emprego.objects.order_by('-publicado')[:10]
    return render_to_response('vagas/index.html', {'lista':lista})

def detail(request, object_id):
    vaga = get_object_or_404(Emprego, pk=object_id)
    return render_to_response('vagas/detail.html',{'vaga':vaga})

Comentando um pouco o código acima, por agora podemos dizer que as duas funções criadas “index” e “detail” serão responsáveis por “gerar” as informações que serão visualizadas daqui a pouco na nossa aplicação.

Para que isso seja possível, será necessário agora apenas criarmos nossos templates.

Lembre-se de que no arquivo “settings.py” informamos que nosso diretório de templates ficaria em:

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), 'templates'),
)

Ou seja, na raiz do nosso projeto “empresa” haveria uma pasta chamada “templates” com nossos respectivos templates.

Repare também que nas views que criamos acima o “return” irá renderizar as páginas index.html e detail.html em um diretório “vagas“, que é um diretório dentro da pasta “templates“. Sendo assim, podemos notar que para um melhor controle dos nossos templates, ao menos por enquanto, é legal que deixemos separados os templates de cada aplicação em sua própria pasta com o nome da aplicação dentro do diretório “templates“.

Então, para finalizarmos esta parte, crie um diretório chamado “vagas” dentro da pasta “templates” para que fique da seguinte forma:

/home/usuario/django_projetos/empresa/templates/vagas/

Passo 11:

Editando os templates.

Com o Komodo edite aberto, crie um arquivo que servirá de base para todas as nossas páginas do projeto. Caso isto pareça confuso, imagine que em seu site haverá diversas páginas, e que em todas ou na maiorias destas páginas um cabeçalho, menu ou rodapé se repetirão. Para que você não tenha que repetir os códigos, o Django sugere para você o DRY (Don’t Repeat Yourself).

Este primeiro arquivo deverá ser criado no diretório “templates” e deverá ser chamado de “base.html

Este é o caminho que deverá ficar o arquivo: “/empresa/templates/base.html

Deixe o arquivo com as seguinte linhas de código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3c.org/1999/xhtml xml:lang="en" lang="en">
<head>
<title> Super Empresa: {% block title %} Page {% endblock %} </title>
{% block extrahead %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>

Repare que tirando os códigos destacados em azul, todo o restante é HTML puro. E mesmo a parte destacada será familiar para quem já trabalhou com PHP + o SMARTY.

O próximo passo é criar a página “base.html” que será a base de todas as páginas da aplicação “vagas” no nosso projeto. Não confunda com o arquivo base anterior. Lembre-se de que o Django trabalha com Projetos e Aplicações. O primeiro que criamos foi o base do projeto, este agora será o base da aplicação.

Para isso, crie o arquivo “base.html” no seguinte caminho:”/empresa/templates/vagas/base.html

Edite o arquivo e escreva o código abaixo:

{% extends "base.html" %}
{% block extrahead %}
<style>
body {
font-style: arial;
color:navy;
}
h1 {
text-align: center;
}
.job .title {
font-size: 12px;
font-weight: bold;
}
.job .posted {
font-style: italic;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
background:#ffc;
color: #FF0000;
}
a:active {
text-decoration:none;
}
</style>
{% endblock %}

Neste arquivo podemos ver que em sua maior parte são estilos para as páginas da nossa aplicação.

Quanto à parte de código destacada, na primeira linha é onde o Django diz que este arquivo é a extensão do arquivo “base.html” do nosso projeto.

A segunda linha em destaque diz que o código escrito entre ela e o fechamento do bloco (última linha em destaque) são para serem inseridos no “head’ dos arquivos da nossa aplicação.

OBS: Claro que essa forma de colocar estilos é apenas demonstrar a forma que o Django trabalha com templates. Em uma aplicação mais “séria” iríamos ter os diretórios com nossos CSS, JS, e imagens todos separados.

Agora crie o arquivo “index.html” no seguinte caminho: “/empresa/templates/vagas/index.html

Adicione as linhas de código abaixo:

{% extends "vagas/base.html" %}

{% block title %} Lista de vagas {% endblock %}

{% block content %}
<h1>Lista de vagas</h1>
<ul>
{% for vaga in lista %}
<li><a href="{{ vaga.id }}">{{ vaga.titulo }}</a></li>
{% endfor %}
</ul>
{% endblock %}

Deste arquivo destaquei apenas o “for” que irá percorrer nossa tabela em busca do título das nossas vagas.

Lembre-se de que nos os templates no Django são compostos de tags HTML e códigos Python. Sendo que para os códigos Python as instruções estarão entre “{% %}” e as variáveis entre “{{ }}“.

O último arquivo para criarmos e editarmos é o “detail.html” que será apresentado ao se clicar no link gerado na página anterior. Este arquivo deverá estar no seguinte caminho: “/empresa/templates/vagas/detail.html

Crie o mesmo e adicione as seguintes linhas de código:

{% extends "vagas/base.html" %}

{% block title %} Detalhes da vaga {% endblock %}

{% block content %}
<h1>Detalhes da vaga</h1>

div class="job">
<div class="title">
{{ vaga.titulo }}
-
{{ vaga.local }}
</div>
<div class="posted">
Postado em: {{ vaga.publicado|date:"d-M-Y" }}
</div>
<div class="description">
{{ vaga.descricao }}
</div>
</div>
<p> </p>
<a href="http://127.0.0.1:8000/">Voltar</a>
{% endblock %}

Este arquivo, como podem ver, não tem nada de diferente. Ele apenas apresenta as informações referentes à vaga clicada na tela anterior.

Agora podemos abrir novamente o terminal, entrarmos dentro do diretório do nosso projeto

e startarmos nosso servidor para visualizar nossa aplicação pronta.

Dentro de “/home/usuario/django_projeto/empresa/

Digite: python manage.py runserver

Abra o navegado e digite o seguinte endereço: http://127.0.0.1:8000/

Agora podemos passear pelas informações das vagas cadastradas pela administração do site, inclusive ser os detalhes das mesmas.

Com isso, terminamos por aqui. Espero que tenham gostado do tutorial e do Django. Nos próximos iremos ver mais algumas mágicas que o poder do Django proporciona.

Lembrando que qualquer critica ou sugestão será bem-vinda. E caso encontrem erros nos scripts podem me avisar que corrigirei o mais breve possível.

Referências

http://groups.google.com/group/django-brasil/

http://djangoproject.com/documentation/

http://code.djangoproject.com/

http://groups.google.com/group/django-user

http://groups.google.com/group/djang-developers

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Diemesleno Souza Carvalho

edit1 Artigo(s)

é Tecnólogo em Desenvolvimento de Sistemas para Internet, Analista de Sistemas na Secretaria de Fazenda de Mato-Grosso do Sul e diretor de T.I. da Webdomeni. Trabalha com sistemas para Internet desde 2004 utilizando PHP, MySQL, PostgreSQL, C# e Python. É entusiasta GNU/Linux tendo experiência em diversas distribuições desde 1998. Atualmente também realiza pesquisas na área de Desenvolvimento de Jogos e Inteligência Artificial."

, 'index'),\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003E('^(?P<object_id>\\d+)\u002F window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} , 'django.view.static.serve',{ 'document_root': media}), # (r'^empresa/', include('empresa.foo.urls')), # Uncomment the admin/doc line below and add 'django.contrib.admindocs' # to INSTALLED_APPS to enable admin documentation: (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: (r'^admin/(.*)', admin.site.root), #Página principal da nossa aplicação ('r^ , 'index'), ('^(?P<object_id>\d+)/ , 'detail'), )

As linhas em azul acima são as linhas que foram alteradas. O restante ficará no momento como estão. Não se preocupem muito com o seu conteúdo, mas dificilmente na maioria dos projetos que você fizer será diferente deste aqui.

Caso o browser ainda esteja aberto apenas acrescente “/admin/

Se você fechou o browser e parou o servidor, abra novamente o terminal, entre no diretório do projeto:

“/home/usuario/django_projetos/empresa/”

digite: python manage.py runserver

Abra o browser e digite o endereço: http://127.0.0.1:8000/admin/

Caso os códigos tenham sido digitados de forma correta, e não ocorreu nenhum outo problema, teremos uma página da administração do Django, com um campo usuário e senha.

Este campo deverá ser preenchido com as informações que fornecemos quando sincronizamos nossa base de dados.

Temos então, a interface administrativa do nosso projeto. Podemos ver que a interface está administrando as aplicações que foram fornecidas automaticamente pelo Django e as nossas também. Temos até o momento a aplicação “Auth“, a “Sites” e a “Vagas“.

Passo 9:

Ainda na interface administrativa do nosso projeto, clique em Locals na nossa aplicação. Você verá que ainda não existe nenhum local cadastrado. E verá também que existe um botão “Adicionar Local” no canto superior direito.

Clique nele e adicione alguns locais.

Feito isto, vá agora em Empregos e adicione também algumas vagas.

Repare que em ambos os casos o Django criou todos os formulários e campos necessários para essa nossa administração.

Depois de adicionarmos alguns locais e empregos na nossa aplicação podemos ver que o Django já nos apresenta os dados cadastrados, mas de uma forma que ainda não é legal.

Iremos agora melhorar isso. Abra novamente o arquivo admin.py que está em “/empresa/vagas/admin.py

Edite ele para que fique da seguinte forma:

from empresa.vagas.models import Local
from empresa.vagas.models import Emprego
from django.contrib import admin

class LocalAdmin(admin.ModelAdmin):
    list_display = ("cidade", "estado", "pais")
    ordering = ["estado"]
    search_fields = ("estado", "pais")
    list_filter = ("estado",)


class EmpregoAdmin(admin.ModelAdmin):
    list_display = ("titulo", "descricao", "local", "publicado")
    ordering = ["-publicado"]
    search_fields = ("titulo", "descricao")
    list_filter = ("local",)

admin.site.register(Local, LocalAdmin)
admin.site.register(Emprego, EmpregoAdmin)

Agora que acrescentamos algumas linhas de código, visualize novamente a aplicação. Tanto os Locais quanto as vagas cadastradas então mais limpas e arrumadas. E olhando para o código fica claro o que foi “pedido” para o Django.

Passo 10:

Iremos agora criar as páginas de visualização. Para isto, editaremos agora nossas views e nossos templates.

Com o Komodo Edit, abra o arquivo “views.py” que está em “/home/usuario/empresa/vagas/views.py

Como podemos ver ele ainda está praticamente vazio, contanto apenas com um comentário. Edite ele para que se pareça com o trecho abaixo.

from django.shortcuts import get_object_or_404, render_to_response
from vagas.models import Emprego

def index(request):
    lista = Emprego.objects.order_by('-publicado')[:10]
    return render_to_response('vagas/index.html', {'lista':lista})

def detail(request, object_id):
    vaga = get_object_or_404(Emprego, pk=object_id)
    return render_to_response('vagas/detail.html',{'vaga':vaga})

Comentando um pouco o código acima, por agora podemos dizer que as duas funções criadas “index” e “detail” serão responsáveis por “gerar” as informações que serão visualizadas daqui a pouco na nossa aplicação.

Para que isso seja possível, será necessário agora apenas criarmos nossos templates.

Lembre-se de que no arquivo “settings.py” informamos que nosso diretório de templates ficaria em:

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), 'templates'),
)

Ou seja, na raiz do nosso projeto “empresa” haveria uma pasta chamada “templates” com nossos respectivos templates.

Repare também que nas views que criamos acima o “return” irá renderizar as páginas index.html e detail.html em um diretório “vagas“, que é um diretório dentro da pasta “templates“. Sendo assim, podemos notar que para um melhor controle dos nossos templates, ao menos por enquanto, é legal que deixemos separados os templates de cada aplicação em sua própria pasta com o nome da aplicação dentro do diretório “templates“.

Então, para finalizarmos esta parte, crie um diretório chamado “vagas” dentro da pasta “templates” para que fique da seguinte forma:

/home/usuario/django_projetos/empresa/templates/vagas/

Passo 11:

Editando os templates.

Com o Komodo edite aberto, crie um arquivo que servirá de base para todas as nossas páginas do projeto. Caso isto pareça confuso, imagine que em seu site haverá diversas páginas, e que em todas ou na maiorias destas páginas um cabeçalho, menu ou rodapé se repetirão. Para que você não tenha que repetir os códigos, o Django sugere para você o DRY (Don’t Repeat Yourself).

Este primeiro arquivo deverá ser criado no diretório “templates” e deverá ser chamado de “base.html

Este é o caminho que deverá ficar o arquivo: “/empresa/templates/base.html

Deixe o arquivo com as seguinte linhas de código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3c.org/1999/xhtml xml:lang="en" lang="en">
<head>
<title> Super Empresa: {% block title %} Page {% endblock %} </title>
{% block extrahead %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>

Repare que tirando os códigos destacados em azul, todo o restante é HTML puro. E mesmo a parte destacada será familiar para quem já trabalhou com PHP + o SMARTY.

O próximo passo é criar a página “base.html” que será a base de todas as páginas da aplicação “vagas” no nosso projeto. Não confunda com o arquivo base anterior. Lembre-se de que o Django trabalha com Projetos e Aplicações. O primeiro que criamos foi o base do projeto, este agora será o base da aplicação.

Para isso, crie o arquivo “base.html” no seguinte caminho:”/empresa/templates/vagas/base.html

Edite o arquivo e escreva o código abaixo:

{% extends "base.html" %}
{% block extrahead %}
<style>
body {
font-style: arial;
color:navy;
}
h1 {
text-align: center;
}
.job .title {
font-size: 12px;
font-weight: bold;
}
.job .posted {
font-style: italic;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
background:#ffc;
color: #FF0000;
}
a:active {
text-decoration:none;
}
</style>
{% endblock %}

Neste arquivo podemos ver que em sua maior parte são estilos para as páginas da nossa aplicação.

Quanto à parte de código destacada, na primeira linha é onde o Django diz que este arquivo é a extensão do arquivo “base.html” do nosso projeto.

A segunda linha em destaque diz que o código escrito entre ela e o fechamento do bloco (última linha em destaque) são para serem inseridos no “head’ dos arquivos da nossa aplicação.

OBS: Claro que essa forma de colocar estilos é apenas demonstrar a forma que o Django trabalha com templates. Em uma aplicação mais “séria” iríamos ter os diretórios com nossos CSS, JS, e imagens todos separados.

Agora crie o arquivo “index.html” no seguinte caminho: “/empresa/templates/vagas/index.html

Adicione as linhas de código abaixo:

{% extends "vagas/base.html" %}

{% block title %} Lista de vagas {% endblock %}

{% block content %}
<h1>Lista de vagas</h1>
<ul>
{% for vaga in lista %}
<li><a href="{{ vaga.id }}">{{ vaga.titulo }}</a></li>
{% endfor %}
</ul>
{% endblock %}

Deste arquivo destaquei apenas o “for” que irá percorrer nossa tabela em busca do título das nossas vagas.

Lembre-se de que nos os templates no Django são compostos de tags HTML e códigos Python. Sendo que para os códigos Python as instruções estarão entre “{% %}” e as variáveis entre “{{ }}“.

O último arquivo para criarmos e editarmos é o “detail.html” que será apresentado ao se clicar no link gerado na página anterior. Este arquivo deverá estar no seguinte caminho: “/empresa/templates/vagas/detail.html

Crie o mesmo e adicione as seguintes linhas de código:

{% extends "vagas/base.html" %}

{% block title %} Detalhes da vaga {% endblock %}

{% block content %}
<h1>Detalhes da vaga</h1>

div class="job">
<div class="title">
{{ vaga.titulo }}
-
{{ vaga.local }}
</div>
<div class="posted">
Postado em: {{ vaga.publicado|date:"d-M-Y" }}
</div>
<div class="description">
{{ vaga.descricao }}
</div>
</div>
<p> </p>
<a href="http://127.0.0.1:8000/">Voltar</a>
{% endblock %}

Este arquivo, como podem ver, não tem nada de diferente. Ele apenas apresenta as informações referentes à vaga clicada na tela anterior.

Agora podemos abrir novamente o terminal, entrarmos dentro do diretório do nosso projeto

e startarmos nosso servidor para visualizar nossa aplicação pronta.

Dentro de “/home/usuario/django_projeto/empresa/

Digite: python manage.py runserver

Abra o navegado e digite o seguinte endereço: http://127.0.0.1:8000/

Agora podemos passear pelas informações das vagas cadastradas pela administração do site, inclusive ser os detalhes das mesmas.

Com isso, terminamos por aqui. Espero que tenham gostado do tutorial e do Django. Nos próximos iremos ver mais algumas mágicas que o poder do Django proporciona.

Lembrando que qualquer critica ou sugestão será bem-vinda. E caso encontrem erros nos scripts podem me avisar que corrigirei o mais breve possível.

Referências

http://groups.google.com/group/django-brasil/

http://djangoproject.com/documentation/

http://code.djangoproject.com/

http://groups.google.com/group/django-user

http://groups.google.com/group/djang-developers

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Diemesleno Souza Carvalho

edit1 Artigo(s)

é Tecnólogo em Desenvolvimento de Sistemas para Internet, Analista de Sistemas na Secretaria de Fazenda de Mato-Grosso do Sul e diretor de T.I. da Webdomeni. Trabalha com sistemas para Internet desde 2004 utilizando PHP, MySQL, PostgreSQL, C# e Python. É entusiasta GNU/Linux tendo experiência em diversas distribuições desde 1998. Atualmente também realiza pesquisas na área de Desenvolvimento de Jogos e Inteligência Artificial."

, 'detail'),\u003C\u002Fspan\u003E\n)\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EAs linhas em azul acima são as linhas que foram alteradas. O restante ficará no momento como estão. Não se preocupem muito com o seu conteúdo, mas dificilmente na maioria dos projetos que você fizer será diferente deste aqui.\u003C\u002Fp\u003E\n\u003Cp\u003ECaso o browser ainda esteja aberto apenas acrescente “\u003Cstrong\u003E\u002Fadmin\u002F\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003ESe você fechou o browser e parou o servidor, abra novamente o terminal, entre no diretório do projeto:\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003E“\u002Fhome\u002Fusuario\u002Fdjango_projetos\u002Fempresa\u002F”\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp\u003Edigite: \u003Ckbd\u003Epython manage.py runserver\u003C\u002Fkbd\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EAbra o browser e digite o endereço: \u003Ca href=\"http:\u002F\u002F127.0.0.1:8000\u002Fadmin\u002F\" class=\"ext\"\u003Ehttp:\u002F\u002F127.0.0.1:8000\u002Fadmin\u002F\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ECaso os códigos tenham sido digitados de forma correta, e não ocorreu nenhum outo problema, teremos uma página da administração do Django, com um campo usuário e senha.\u003C\u002Fp\u003E\n\u003Cp\u003EEste campo deverá ser preenchido com as informações que fornecemos quando sincronizamos nossa base de dados.\u003C\u002Fp\u003E\n\u003Cp\u003ETemos então, a interface administrativa do nosso projeto. Podemos ver que a interface está administrando as aplicações que foram fornecidas automaticamente pelo Django e as nossas também. Temos até o momento a aplicação “\u003Cstrong\u003EAuth\u003C\u002Fstrong\u003E“, a “\u003Cstrong\u003ESites\u003C\u002Fstrong\u003E” e a “\u003Cstrong\u003EVagas\u003C\u002Fstrong\u003E“.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EPasso 9:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EAinda na interface administrativa do nosso projeto, clique em Locals na nossa aplicação. Você verá que ainda não existe nenhum local cadastrado. E verá também que existe um botão “Adicionar Local” no canto superior direito.\u003C\u002Fp\u003E\n\u003Cp\u003EClique nele e adicione alguns locais.\u003C\u002Fp\u003E\n\u003Cp\u003EFeito isto, vá agora em Empregos e adicione também algumas vagas.\u003C\u002Fp\u003E\n\u003Cp\u003ERepare que em ambos os casos o Django criou todos os formulários e campos necessários para essa nossa administração.\u003C\u002Fp\u003E\n\u003Cp\u003EDepois de adicionarmos alguns locais e empregos na nossa aplicação podemos ver que o Django já nos apresenta os dados cadastrados, mas de uma forma que ainda não é legal.\u003C\u002Fp\u003E\n\u003Cp\u003EIremos agora melhorar isso. Abra novamente o arquivo admin.py que está em “\u003Cstrong\u003E\u002Fempresa\u002Fvagas\u002Fadmin.py\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EEdite ele para que fique da seguinte forma:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003Efrom empresa.vagas.models import Local\nfrom empresa.vagas.models import Emprego\nfrom django.contrib import admin\n\nclass LocalAdmin(admin.ModelAdmin):\n \u003Cspan class=\"coment\"\u003Elist_display = (\"cidade\", \"estado\", \"pais\")\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Eordering = [\"estado\"]\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Esearch_fields = (\"estado\", \"pais\")\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Elist_filter = (\"estado\",)\u003C\u002Fspan\u003E\n\n\nclass EmpregoAdmin(admin.ModelAdmin):\n \u003Cspan class=\"coment\"\u003Elist_display = (\"titulo\", \"descricao\", \"local\", \"publicado\")\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Eordering = [\"-publicado\"]\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Esearch_fields = (\"titulo\", \"descricao\")\u003C\u002Fspan\u003E\n \u003Cspan class=\"coment\"\u003Elist_filter = (\"local\",)\u003C\u002Fspan\u003E\n\nadmin.site.register(Local, LocalAdmin)\nadmin.site.register(Emprego, EmpregoAdmin)\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EAgora que acrescentamos algumas linhas de código, visualize novamente a aplicação. Tanto os Locais quanto as vagas cadastradas então mais limpas e arrumadas. E olhando para o código fica claro o que foi “pedido” para o Django.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EPasso 10:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIremos agora criar as páginas de visualização. Para isto, editaremos agora nossas views e nossos templates.\u003C\u002Fp\u003E\n\u003Cp\u003ECom o Komodo Edit, abra o arquivo “\u003Cstrong\u003Eviews.py\u003C\u002Fstrong\u003E” que está em “\u003Cstrong\u003E\u002Fhome\u002Fusuario\u002Fempresa\u002Fvagas\u002Fviews.py\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EComo podemos ver ele ainda está praticamente vazio, contanto apenas com um comentário. Edite ele para que se pareça com o trecho abaixo.\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003Efrom django.shortcuts import get_object_or_404, render_to_response\nfrom vagas.models import Emprego\n\ndef index(request):\n lista = Emprego.objects.order_by('-publicado')[:10]\n return render_to_response('vagas\u002Findex.html', {'lista':lista})\n\ndef detail(request, object_id):\n vaga = get_object_or_404(Emprego, pk=object_id)\n return render_to_response('vagas\u002Fdetail.html',{'vaga':vaga})\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EComentando um pouco o código acima, por agora podemos dizer que as duas funções criadas “\u003Cstrong\u003Eindex\u003C\u002Fstrong\u003E” e “\u003Cstrong\u003Edetail\u003C\u002Fstrong\u003E” serão responsáveis por “gerar” as informações que serão visualizadas daqui a pouco na nossa aplicação.\u003C\u002Fp\u003E\n\u003Cp\u003EPara que isso seja possível, será necessário agora apenas criarmos nossos templates.\u003C\u002Fp\u003E\n\u003Cp\u003ELembre-se de que no arquivo “\u003Cstrong\u003Esettings.py\u003C\u002Fstrong\u003E” informamos que nosso diretório de templates ficaria em:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003ETEMPLATE_DIRS = (\n os.path.join(os.path.dirname(__file__), '\u003Cspan class=\"coment\"\u003Etemplates\u003C\u002Fspan\u003E'),\n)\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EOu seja, na raiz do nosso projeto “\u003Cstrong\u003Eempresa\u003C\u002Fstrong\u003E” haveria uma pasta chamada “\u003Cstrong\u003Etemplates\u003C\u002Fstrong\u003E” com nossos respectivos templates.\u003C\u002Fp\u003E\n\u003Cp\u003ERepare também que nas views que criamos acima o “\u003Cstrong\u003Ereturn\u003C\u002Fstrong\u003E” irá renderizar as páginas \u003Cstrong\u003Eindex.html\u003C\u002Fstrong\u003E e \u003Cstrong\u003Edetail.html\u003C\u002Fstrong\u003E em um diretório “\u003Cstrong\u003Evagas\u003C\u002Fstrong\u003E“, que é um diretório dentro da pasta “\u003Cstrong\u003Etemplates\u003C\u002Fstrong\u003E“. Sendo assim, podemos notar que para um melhor controle dos nossos templates, ao menos por enquanto, é legal que deixemos separados os templates de cada aplicação em sua própria pasta com o nome da aplicação dentro do diretório “\u003Cstrong\u003Etemplates\u003C\u002Fstrong\u003E“.\u003C\u002Fp\u003E\n\u003Cp\u003EEntão, para finalizarmos esta parte, crie um diretório chamado “\u003Cstrong\u003Evagas\u003C\u002Fstrong\u003E” dentro da pasta “\u003Cstrong\u003Etemplates\u003C\u002Fstrong\u003E” para que fique da seguinte forma:\u003C\u002Fp\u003E\n\u003Cp\u003E“\u003Cstrong\u003E\u002Fhome\u002Fusuario\u002Fdjango_projetos\u002Fempresa\u002Ftemplates\u002Fvagas\u002F\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EPasso 11:\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EEditando os templates.\u003C\u002Fp\u003E\n\u003Cp\u003ECom o Komodo edite aberto, crie um arquivo que servirá de base para todas as nossas páginas do projeto. Caso isto pareça confuso, imagine que em seu site haverá diversas páginas, e que em todas ou na maiorias destas páginas um cabeçalho, menu ou rodapé se repetirão. Para que você não tenha que repetir os códigos, o Django sugere para você o DRY (Don’t Repeat Yourself).\u003C\u002Fp\u003E\n\u003Cp\u003EEste primeiro arquivo deverá ser criado no diretório “\u003Cstrong\u003Etemplates\u003C\u002Fstrong\u003E” e deverá ser chamado de “\u003Cstrong\u003Ebase.html\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EEste é o caminho que deverá ficar o arquivo: “\u003Cstrong\u003E\u002Fempresa\u002Ftemplates\u002Fbase.html\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EDeixe o arquivo com as seguinte linhas de código:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003E<!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN\"\nhttp:\u002F\u002Fwww.w3c.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd>\n<html xmlns=http:\u002F\u002Fwww.w3c.org\u002F1999\u002Fxhtml xml:lang=\"en\" lang=\"en\">\n<head>\n<title> Super Empresa: {% block title %} Page {% endblock %} <\u002Ftitle>\n\u003Cspan class=\"coment\"\u003E{% block extrahead %} {% endblock %}\u003C\u002Fspan\u003E\n<\u002Fhead>\n<body>\n\u003Cspan class=\"coment\"\u003E{% block content %} {% endblock %}\u003C\u002Fspan\u003E\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003ERepare que tirando os códigos destacados em azul, todo o restante é HTML puro. E mesmo a parte destacada será familiar para quem já trabalhou com PHP + o SMARTY.\u003C\u002Fp\u003E\n\u003Cp\u003EO próximo passo é criar a página “base.html” que será a base de todas as páginas da aplicação “vagas” no nosso projeto. Não confunda com o arquivo base anterior. Lembre-se de que o Django trabalha com Projetos e Aplicações. O primeiro que criamos foi o base do projeto, este agora será o base da aplicação.\u003C\u002Fp\u003E\n\u003Cp\u003EPara isso, crie o arquivo “\u003Cstrong\u003Ebase.html\u003C\u002Fstrong\u003E” no seguinte caminho:”\u003Cstrong\u003E\u002Fempresa\u002Ftemplates\u002Fvagas\u002Fbase.html\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EEdite o arquivo e escreva o código abaixo:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\"coment\"\u003E{% extends \"base.html\" %}\u003C\u002Fspan\u003E\n\u003Cspan class=\"coment\"\u003E{% block extrahead %}\u003C\u002Fspan\u003E\n<style>\nbody {\nfont-style: arial;\ncolor:navy;\n}\nh1 {\ntext-align: center;\n}\n.job .title {\nfont-size: 12px;\nfont-weight: bold;\n}\n.job .posted {\nfont-style: italic;\n}\na:link {\ntext-decoration:none;\n}\na:visited {\ntext-decoration:none;\n}\na:hover {\ntext-decoration:underline overline;\nbackground:#ffc;\ncolor: #FF0000;\n}\na:active {\ntext-decoration:none;\n}\n<\u002Fstyle>\n\u003Cspan class=\"coment\"\u003E{% endblock %}\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003ENeste arquivo podemos ver que em sua maior parte são estilos para as páginas da nossa aplicação.\u003C\u002Fp\u003E\n\u003Cp\u003EQuanto à parte de código destacada, na primeira linha é onde o Django diz que este arquivo é a extensão do arquivo “\u003Cstrong\u003Ebase.html\u003C\u002Fstrong\u003E” do nosso projeto.\u003C\u002Fp\u003E\n\u003Cp\u003EA segunda linha em destaque diz que o código escrito entre ela e o fechamento do bloco (última linha em destaque) são para serem inseridos no “head’ dos arquivos da nossa aplicação.\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EOBS\u003C\u002Fstrong\u003E: Claro que essa forma de colocar estilos é apenas demonstrar a forma que o Django trabalha com templates. Em uma aplicação mais “séria” iríamos ter os diretórios com nossos CSS, JS, e imagens todos separados.\u003C\u002Fp\u003E\n\u003Cp\u003EAgora crie o arquivo “index.html” no seguinte caminho: “\u003Cstrong\u003E\u002Fempresa\u002Ftemplates\u002Fvagas\u002Findex.html\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EAdicione as linhas de código abaixo:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003E{% extends \"vagas\u002Fbase.html\" %}\n\n{% block title %} Lista de vagas {% endblock %}\n\n{% block content %}\n<h1>Lista de vagas<\u002Fh1>\n<ul>\n\u003Cspan class=\"coment\"\u003E{% for vaga in lista %}\u003C\u002Fspan\u003E\n\u003Cspan class=\"coment\"\u003E<li><a href=\"{{ vaga.id }}\">{{ vaga.titulo }}<\u002Fa><\u002Fli>\u003C\u002Fspan\u003E\n\u003Cspan class=\"coment\"\u003E{% endfor %}\u003C\u002Fspan\u003E\n<\u002Ful>\n{% endblock %}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EDeste arquivo destaquei apenas o “for” que irá percorrer nossa tabela em busca do título das nossas vagas.\u003C\u002Fp\u003E\n\u003Cp\u003ELembre-se de que nos os templates no Django são compostos de tags HTML e códigos Python. Sendo que para os códigos Python as instruções estarão entre “\u003Cstrong\u003E{% %}\u003C\u002Fstrong\u003E” e as variáveis entre “\u003Cstrong\u003E{{ }}\u003C\u002Fstrong\u003E“.\u003C\u002Fp\u003E\n\u003Cp\u003EO último arquivo para criarmos e editarmos é o “detail.html” que será apresentado ao se clicar no link gerado na página anterior. Este arquivo deverá estar no seguinte caminho: “\u003Cstrong\u003E\u002Fempresa\u002Ftemplates\u002Fvagas\u002Fdetail.html\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003ECrie o mesmo e adicione as seguintes linhas de código:\u003C\u002Fp\u003E\n\u003Cdiv class=\"codigo\"\u003E\n\u003Cpre\u003E\u003Ccode\u003E{% extends \"vagas\u002Fbase.html\" %}\n\n{% block title %} Detalhes da vaga {% endblock %}\n\n{% block content %}\n<h1>Detalhes da vaga<\u002Fh1>\n\ndiv class=\"job\">\n<div class=\"title\">\n{{ vaga.titulo }}\n-\n{{ vaga.local }}\n<\u002Fdiv>\n<div class=\"posted\">\nPostado em: {{ vaga.publicado|date:\"d-M-Y\" }}\n<\u002Fdiv>\n<div class=\"description\">\n{{ vaga.descricao }}\n<\u002Fdiv>\n<\u002Fdiv>\n<p> <\u002Fp>\n<a href=\"http:\u002F\u002F127.0.0.1:8000\u002F\">Voltar<\u002Fa>\n{% endblock %}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003EEste arquivo, como podem ver, não tem nada de diferente. Ele apenas apresenta as informações referentes à vaga clicada na tela anterior.\u003C\u002Fp\u003E\n\u003Cp\u003EAgora podemos abrir novamente o terminal, entrarmos dentro do diretório do nosso projeto \u003C\u002Fp\u003E\n\u003Cp\u003Ee startarmos nosso servidor para visualizar nossa aplicação pronta.\u003C\u002Fp\u003E\n\u003Cp\u003EDentro de “\u003Cstrong\u003E\u002Fhome\u002Fusuario\u002Fdjango_projeto\u002Fempresa\u002F\u003C\u002Fstrong\u003E“\u003C\u002Fp\u003E\n\u003Cp\u003EDigite: \u003Cem\u003Epython manage.py runserver\u003C\u002Fem\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EAbra o navegado e digite o seguinte endereço: \u003Ca href=\"http:\u002F\u002F127.0.0.1:8000\u002F\" class=\"ext\"\u003Ehttp:\u002F\u002F127.0.0.1:8000\u002F\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EAgora podemos passear pelas informações das vagas cadastradas pela administração do site, inclusive ser os detalhes das mesmas.\u003C\u002Fp\u003E\n\u003Cp\u003ECom isso, terminamos por aqui. Espero que tenham gostado do tutorial e do Django. Nos próximos iremos ver mais algumas mágicas que o poder do Django proporciona.\u003C\u002Fp\u003E\n\u003Cp\u003ELembrando que qualquer critica ou sugestão será bem-vinda. E caso encontrem erros nos scripts podem me avisar que corrigirei o mais breve possível.\u003C\u002Fp\u003E\n\u003Ch4\u003EReferências\u003C\u002Fh4\u003E\n\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjango-brasil\u002F\" class=\"ext\"\u003Ehttp:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjango-brasil\u002F\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fdjangoproject.com\u002Fdocumentation\u002F\" class=\"ext\"\u003Ehttp:\u002F\u002Fdjangoproject.com\u002Fdocumentation\u002F\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fcode.djangoproject.com\u002F\" class=\"ext\"\u003Ehttp:\u002F\u002Fcode.djangoproject.com\u002F\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjango-user\" class=\"ext\"\u003Ehttp:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjango-user\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjang-developers\" class=\"ext\"\u003Ehttp:\u002F\u002Fgroups.google.com\u002Fgroup\u002Fdjang-developers\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n","excerpt":"","link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Faplicacoes-rapidas-para-web-com-django","date":"28 nov, 2008","thumbnail":"","externalMention":null,"author":{"id":7200,"thumbnail":"https:\u002F\u002Fsecure.gravatar.com\u002Favatar\u002Ff425fdc6c2ed0c9259acccd9d73ae3f3?s=96&d=mm&r=g","name":"Diemesleno Souza Carvalho","description":"é Tecnólogo em Desenvolvimento de Sistemas para Internet, \r\nAnalista de Sistemas na Secretaria de Fazenda de Mato-Grosso do Sul e \r\ndiretor de T.I. da Webdomeni. \r\nTrabalha com sistemas para Internet desde 2004 utilizando PHP, MySQL, \r\nPostgreSQL, C# e Python. É entusiasta GNU\u002FLinux tendo experiência em diversas distribuições desde 1998. \r\nAtualmente também realiza pesquisas na área de Desenvolvimento de Jogos e Inteligência Artificial.\"","slug":"diemesleno_souza_carvalho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiemesleno_souza_carvalho","registered":"2008-11-17 09:18:51","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diemesleno.com.br","mail":"diemesleno@gmail.com"},"articles_count":1,"views_count":100,"certifications":null,"conquests":null,"office":null,"articles":[]},"categories":[{"title":"Desenvolvimento","slug":"desenvolvimento","id":7234,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento"}],"tags":[],"seo":{"open_graph":{"title":"Aplicações rápidas para Web com Django - iMasters - We are Developers","description":"","type":"article","locale":"pt_BR","site_name":"iMasters - We are Developers","image":false,"modified_time":"2008-12-02T18:42:04-03:00","published_time":"2008-11-28T09:30:00-03:00"},"twitter":{"title":"Aplicações rápidas para Web com Django - iMasters - We are Developers","description":"","type":"summary_large_image","image":false}},"articleSocial":{"facebook":"https:\u002F\u002Fwww.facebook.com\u002Fsharer?u=https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Faplicacoes-rapidas-para-web-com-django","twitter":"https:\u002F\u002Ftwitter.com\u002Fshare?url=https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Faplicacoes-rapidas-para-web-com-django","linkedin":"https:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Faplicacoes-rapidas-para-web-com-django"},"type":"post","articleViews":100}},"author":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{}},"category":{"success":false,"data":{}},"categoryArticles":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{}},"categoryMostRead":{"success":false,"data":{}},"home":{"success":false,"featured":[],"options":{"homeProducts":[]},"allCategories":{},"featuredArticles":{},"magazines":{"data":[]},"tv":{},"forums":[],"authorsRanking":{},"events":{},"certificatedUsers":[],"news":[]},"page":{"success":false,"data":{}},"magazine":{"success":false,"magazines":[]},"schedule":{"success":false,"data":{}},"searchResult":{"success":false,"totalPosts":0,"totalPage":0,"currentPage":1,"posts":[],"term":"","orderBy":"recents","currentFilter":"articles","isLoading":true,"isLoadingPagination":false},"singleNews":{"success":false,"data":{}},"listNews":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":[]},"sponsors":{"success":true,"data":[]},"header":{"success":true,"menus":{"main":[{"ID":138755,"order":1,"parent":0,"title":"Back-End","url":"https:\u002F\u002Fimasters.com.br\u002Fback-end","attr":"package","target":"","classes":"package","xfn":"","description":"Tecnologias utilizadas no backend da aplicação","object_id":7158,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138756,"order":2,"parent":0,"title":"Mobile","url":"https:\u002F\u002Fimasters.com.br\u002Fmobile","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Desenvolvimento Mobile nas plataformas iOS (iPhone e iPad) e Android.","object_id":4255,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139476,"order":3,"parent":0,"title":"Front End","url":"https:\u002F\u002Fimasters.com.br\u002Ffront-end","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre HTML5, CSS3, Javascript, JQuery, Web Standards e SEO.","object_id":7304,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138764,"order":4,"parent":0,"title":"DevSecOps","url":"https:\u002F\u002Fimasters.com.br\u002Fdevsecops","attr":"package","target":"","classes":"package","xfn":"","description":"","object_id":1,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139204,"order":5,"parent":0,"title":"Design & UX","url":"https:\u002F\u002Fimasters.com.br\u002Fdesign-ux","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre User Experience, Arquitetura de Informação, Usabilidade, Acessibilidade, Design Responsivo, Teoria do Design e Photoshop.","object_id":7252,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138759,"order":6,"parent":0,"title":"Data","url":"https:\u002F\u002Fimasters.com.br\u002Fdata","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Banco de Dados Oracle, MySQL, SQL Server, MongoDB, DB2 e Postgre SQL, sobre BI e análise de dados.","object_id":16,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138758,"order":7,"parent":0,"title":"APIs e Microsserviços","url":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos","attr":"package","target":"","classes":"package","xfn":"","description":"Dicas e tutoriais sobre APIs públicas como Facebook, Twitter, PayPal, Buscapé, Google, etc e arquitetura de microsserviços, com códigos de exemplo, vídeos, cursos.","object_id":4257,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]}],"secondary":[{"ID":138752,"order":1,"parent":0,"title":"Fórum iMasters","url":"https:\u002F\u002Fforum.imasters.com.br\u002F","attr":"","target":"_blank","classes":"","xfn":"","description":"","object_id":138752,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":139067,"order":2,"parent":0,"title":"Portal E-Commerce Brasil","url":"http:\u002F\u002Fwww.ecommercebrasil.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":139067,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":156289,"order":3,"parent":0,"title":"iMasters Business","url":"http:\u002F\u002Fbusiness.imasters.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":156289,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]}]}},"webinar":{"success":false,"data":{}},"webinars":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{"next":[],"prev":[]}},"tv":{"sectionNameLeft":{"small":"Vídeos","large":"iMasters TV"},"itemsLeft":[{"text":"Em Destaque","slug":"recents"},{"text":"Mais Vistos","slug":"most-viewed"}],"sectionNameRight":{"small":"","large":""},"itemsRight":[{"text":"Mais Recentes","slug":"recents"},{"text":"7Masters","slug":"7-masters"},{"text":"PHP Experience","slug":"php-experience"},{"text":"Android DevConference","slug":"android-devconference"},{"text":"Busca","slug":"search"}],"currentVideo":"recents","currentListVideo":"recents"}} window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} , 'django.view.static.serve',{ 'document_root': media}), # (r'^empresa/', include('empresa.foo.urls')), # Uncomment the admin/doc line below and add 'django.contrib.admindocs' # to INSTALLED_APPS to enable admin documentation: (r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: (r'^admin/(.*)', admin.site.root), #Página principal da nossa aplicação ('r^ , 'index'), ('^(?P<object_id>\d+)/ , 'detail'), )

As linhas em azul acima são as linhas que foram alteradas. O restante ficará no momento como estão. Não se preocupem muito com o seu conteúdo, mas dificilmente na maioria dos projetos que você fizer será diferente deste aqui.

Caso o browser ainda esteja aberto apenas acrescente “/admin/

Se você fechou o browser e parou o servidor, abra novamente o terminal, entre no diretório do projeto:

“/home/usuario/django_projetos/empresa/”

digite: python manage.py runserver

Abra o browser e digite o endereço: http://127.0.0.1:8000/admin/

Caso os códigos tenham sido digitados de forma correta, e não ocorreu nenhum outo problema, teremos uma página da administração do Django, com um campo usuário e senha.

Este campo deverá ser preenchido com as informações que fornecemos quando sincronizamos nossa base de dados.

Temos então, a interface administrativa do nosso projeto. Podemos ver que a interface está administrando as aplicações que foram fornecidas automaticamente pelo Django e as nossas também. Temos até o momento a aplicação “Auth“, a “Sites” e a “Vagas“.

Passo 9:

Ainda na interface administrativa do nosso projeto, clique em Locals na nossa aplicação. Você verá que ainda não existe nenhum local cadastrado. E verá também que existe um botão “Adicionar Local” no canto superior direito.

Clique nele e adicione alguns locais.

Feito isto, vá agora em Empregos e adicione também algumas vagas.

Repare que em ambos os casos o Django criou todos os formulários e campos necessários para essa nossa administração.

Depois de adicionarmos alguns locais e empregos na nossa aplicação podemos ver que o Django já nos apresenta os dados cadastrados, mas de uma forma que ainda não é legal.

Iremos agora melhorar isso. Abra novamente o arquivo admin.py que está em “/empresa/vagas/admin.py

Edite ele para que fique da seguinte forma:

from empresa.vagas.models import Local
from empresa.vagas.models import Emprego
from django.contrib import admin

class LocalAdmin(admin.ModelAdmin):
    list_display = ("cidade", "estado", "pais")
    ordering = ["estado"]
    search_fields = ("estado", "pais")
    list_filter = ("estado",)


class EmpregoAdmin(admin.ModelAdmin):
    list_display = ("titulo", "descricao", "local", "publicado")
    ordering = ["-publicado"]
    search_fields = ("titulo", "descricao")
    list_filter = ("local",)

admin.site.register(Local, LocalAdmin)
admin.site.register(Emprego, EmpregoAdmin)

Agora que acrescentamos algumas linhas de código, visualize novamente a aplicação. Tanto os Locais quanto as vagas cadastradas então mais limpas e arrumadas. E olhando para o código fica claro o que foi “pedido” para o Django.

Passo 10:

Iremos agora criar as páginas de visualização. Para isto, editaremos agora nossas views e nossos templates.

Com o Komodo Edit, abra o arquivo “views.py” que está em “/home/usuario/empresa/vagas/views.py

Como podemos ver ele ainda está praticamente vazio, contanto apenas com um comentário. Edite ele para que se pareça com o trecho abaixo.

from django.shortcuts import get_object_or_404, render_to_response
from vagas.models import Emprego

def index(request):
    lista = Emprego.objects.order_by('-publicado')[:10]
    return render_to_response('vagas/index.html', {'lista':lista})

def detail(request, object_id):
    vaga = get_object_or_404(Emprego, pk=object_id)
    return render_to_response('vagas/detail.html',{'vaga':vaga})

Comentando um pouco o código acima, por agora podemos dizer que as duas funções criadas “index” e “detail” serão responsáveis por “gerar” as informações que serão visualizadas daqui a pouco na nossa aplicação.

Para que isso seja possível, será necessário agora apenas criarmos nossos templates.

Lembre-se de que no arquivo “settings.py” informamos que nosso diretório de templates ficaria em:

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__), 'templates'),
)

Ou seja, na raiz do nosso projeto “empresa” haveria uma pasta chamada “templates” com nossos respectivos templates.

Repare também que nas views que criamos acima o “return” irá renderizar as páginas index.html e detail.html em um diretório “vagas“, que é um diretório dentro da pasta “templates“. Sendo assim, podemos notar que para um melhor controle dos nossos templates, ao menos por enquanto, é legal que deixemos separados os templates de cada aplicação em sua própria pasta com o nome da aplicação dentro do diretório “templates“.

Então, para finalizarmos esta parte, crie um diretório chamado “vagas” dentro da pasta “templates” para que fique da seguinte forma:

/home/usuario/django_projetos/empresa/templates/vagas/

Passo 11:

Editando os templates.

Com o Komodo edite aberto, crie um arquivo que servirá de base para todas as nossas páginas do projeto. Caso isto pareça confuso, imagine que em seu site haverá diversas páginas, e que em todas ou na maiorias destas páginas um cabeçalho, menu ou rodapé se repetirão. Para que você não tenha que repetir os códigos, o Django sugere para você o DRY (Don’t Repeat Yourself).

Este primeiro arquivo deverá ser criado no diretório “templates” e deverá ser chamado de “base.html

Este é o caminho que deverá ficar o arquivo: “/empresa/templates/base.html

Deixe o arquivo com as seguinte linhas de código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3c.org/1999/xhtml xml:lang="en" lang="en">
<head>
<title> Super Empresa: {% block title %} Page {% endblock %} </title>
{% block extrahead %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>

Repare que tirando os códigos destacados em azul, todo o restante é HTML puro. E mesmo a parte destacada será familiar para quem já trabalhou com PHP + o SMARTY.

O próximo passo é criar a página “base.html” que será a base de todas as páginas da aplicação “vagas” no nosso projeto. Não confunda com o arquivo base anterior. Lembre-se de que o Django trabalha com Projetos e Aplicações. O primeiro que criamos foi o base do projeto, este agora será o base da aplicação.

Para isso, crie o arquivo “base.html” no seguinte caminho:”/empresa/templates/vagas/base.html

Edite o arquivo e escreva o código abaixo:

{% extends "base.html" %}
{% block extrahead %}
<style>
body {
font-style: arial;
color:navy;
}
h1 {
text-align: center;
}
.job .title {
font-size: 12px;
font-weight: bold;
}
.job .posted {
font-style: italic;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
background:#ffc;
color: #FF0000;
}
a:active {
text-decoration:none;
}
</style>
{% endblock %}

Neste arquivo podemos ver que em sua maior parte são estilos para as páginas da nossa aplicação.

Quanto à parte de código destacada, na primeira linha é onde o Django diz que este arquivo é a extensão do arquivo “base.html” do nosso projeto.

A segunda linha em destaque diz que o código escrito entre ela e o fechamento do bloco (última linha em destaque) são para serem inseridos no “head’ dos arquivos da nossa aplicação.

OBS: Claro que essa forma de colocar estilos é apenas demonstrar a forma que o Django trabalha com templates. Em uma aplicação mais “séria” iríamos ter os diretórios com nossos CSS, JS, e imagens todos separados.

Agora crie o arquivo “index.html” no seguinte caminho: “/empresa/templates/vagas/index.html

Adicione as linhas de código abaixo:

{% extends "vagas/base.html" %}

{% block title %} Lista de vagas {% endblock %}

{% block content %}
<h1>Lista de vagas</h1>
<ul>
{% for vaga in lista %}
<li><a href="{{ vaga.id }}">{{ vaga.titulo }}</a></li>
{% endfor %}
</ul>
{% endblock %}

Deste arquivo destaquei apenas o “for” que irá percorrer nossa tabela em busca do título das nossas vagas.

Lembre-se de que nos os templates no Django são compostos de tags HTML e códigos Python. Sendo que para os códigos Python as instruções estarão entre “{% %}” e as variáveis entre “{{ }}“.

O último arquivo para criarmos e editarmos é o “detail.html” que será apresentado ao se clicar no link gerado na página anterior. Este arquivo deverá estar no seguinte caminho: “/empresa/templates/vagas/detail.html

Crie o mesmo e adicione as seguintes linhas de código:

{% extends "vagas/base.html" %}

{% block title %} Detalhes da vaga {% endblock %}

{% block content %}
<h1>Detalhes da vaga</h1>

div class="job">
<div class="title">
{{ vaga.titulo }}
-
{{ vaga.local }}
</div>
<div class="posted">
Postado em: {{ vaga.publicado|date:"d-M-Y" }}
</div>
<div class="description">
{{ vaga.descricao }}
</div>
</div>
<p> </p>
<a href="http://127.0.0.1:8000/">Voltar</a>
{% endblock %}

Este arquivo, como podem ver, não tem nada de diferente. Ele apenas apresenta as informações referentes à vaga clicada na tela anterior.

Agora podemos abrir novamente o terminal, entrarmos dentro do diretório do nosso projeto

e startarmos nosso servidor para visualizar nossa aplicação pronta.

Dentro de “/home/usuario/django_projeto/empresa/

Digite: python manage.py runserver

Abra o navegado e digite o seguinte endereço: http://127.0.0.1:8000/

Agora podemos passear pelas informações das vagas cadastradas pela administração do site, inclusive ser os detalhes das mesmas.

Com isso, terminamos por aqui. Espero que tenham gostado do tutorial e do Django. Nos próximos iremos ver mais algumas mágicas que o poder do Django proporciona.

Lembrando que qualquer critica ou sugestão será bem-vinda. E caso encontrem erros nos scripts podem me avisar que corrigirei o mais breve possível.

Referências

http://groups.google.com/group/django-brasil/

http://djangoproject.com/documentation/

http://code.djangoproject.com/

http://groups.google.com/group/django-user

http://groups.google.com/group/djang-developers

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Diemesleno Souza Carvalho

edit1 Artigo(s)

é Tecnólogo em Desenvolvimento de Sistemas para Internet, Analista de Sistemas na Secretaria de Fazenda de Mato-Grosso do Sul e diretor de T.I. da Webdomeni. Trabalha com sistemas para Internet desde 2004 utilizando PHP, MySQL, PostgreSQL, C# e Python. É entusiasta GNU/Linux tendo experiência em diversas distribuições desde 1998. Atualmente também realiza pesquisas na área de Desenvolvimento de Jogos e Inteligência Artificial."