Aprende a realizar una

aplicacin con Django y el

Mundial de Brasil 2014

Por Jess Lucasel 11 de Junio de 2014

Te estars preguntando "Qu es eso de programar Django con el mundial de

Brasil? ", bien, en este artculo os voy a mostrar cmo realizar una aplicacin en
Django 1.7 bsica. La aplicacin va a ser muy sencilla para iniciarnos en el

desarrollo de aplicaciones web con Django. La aplicacin consistir en usar el

Administrador de Django para guardar lospartidos del mundial 2014 y
posteriormente mostrarlos en la pgina de inicio ordenados por fecha.
Obtendremos algo as:

Para la realizacin y el seguimiento de este tutorial debes haber ledo el

artculo: "Cmo comenzar tu primer proyecto Django 1.7 en Linux" , donde

expliqu como instalar Django 1.7 en un entorno virtual.

1. Creacin del Virtualevn y el Proyecto

El primer paso ser crearnos un entorno virtual con virtualenv para nuestro proyecto.

Paracrear un nuevo entorno virtual ejecutamos el siguiente comando:

$ virtualenv mundial-brasil-env

Ahora debemos activar nuestro entorno virtual, instalar Django y crear nuestro proyecto:

"mundial_brasil":

$ cd mundial-brasil-env
$ source bin/activate

(mundial-brasil-env)$

(mundial-brasil-env)$ pip install https://www.djangoproject.com/download/1.7.b4/

tarball/

(mundial-brasil-env)$ django-admin startproject mundial_brasil

(mundial-brasil-env)$ cd mundial_brasil
(mundial-brasil-env)$ ls

manage.py mundial_brasil

2. Aplicaciones Django de nuestro proyecto

El primer paso al realizar una aplicacin Django suele ser pensar en las Urls, los Modelos

y como separar nuestro proyecto Django en Aplicaciones . En nuestro caso solo vamos a

tener una Url: http://127.0.0.1:8000/ , que mostrar la lista de partidos ordenados por

fecha del ms reciente al ms lejano en el tiempo. Vamos a tener 2

aplicaciones: equipos y partidos.La aplicacin "equipos" se encargar de manejar los

equipos y los grupos del mundial. La aplicacin "partidos" se encargar de la lgica

relacionada con los partidos de ftbol de mundial. Para crear las

aplicaciones usaremos el comando django-admin desde el directorio de nuestro

proyecto.

(mundial-brasil-env)$ django-admin startapp equipos

(mundial-brasil-env)$ django-admin startapp partidos

(mundial-brasil-env)$ ls
equipos manage.py mundial_brasil partidos

Una vez creadas las aplicaciones debemos aadirlas a las INSTALLED_APPS en

nuestro archivo settings.py dentro de la carpeta mundial_brasil.
settings.py

# Application definition

INSTALLED_APPS = (
'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',
'django.contrib.sessions ',

'django.contrib.messages ',
'django.contrib.staticfiles ',

'equipos',

'partidos',
)

Cada aplicacin va a tener sus propios modelos y vistas. A continuacin vamos a

crear los modelos que va a tener cada una de nuestras dos aplicaciones.

3. Modelos
La aplicacin "equipos" contiene 2 modelos: Grupo y Equipo GRUPO Se corresponde

con el Grupo al que pertenece un equipo de ftbol en el mundial. Atributos:

letra: Es un texto de una longitud de 1 carcter que representa la letra identificativa

del grupo. Es nico, no puede haber dos grupos con la misma letra y Obligatorio.

EQUIPO Este modelo es el ms importante de nuestra aplicacin, ya que se refiere al

equipo de ftbol. Atributos:

nombre: El nombre del equipo. Es un texto de poca longitud. Obligatorio

 grupo: Es la clave ajena ( Foreign Key ) que indica a que grupo pertenece el

equipo. Es obligatorio.

codigo_pais_bandera: Es un texto de muy poca longitud en el que guardamos el

cdigo del pas para usarlo posteriormente a la hora de mostrar la bandera del

pais. Ejemplo: Espaa -> "es", Chile -> "cl"

from django.db import models

class Grupo(models.Model):
letra = models.CharField(max_length=1, unique=True)

def __str__(self):

return "Grupo " + self.letra

def __unicode__(self):

return "Grupo " + self.letra

class Equipo(models.Model):
nombre = models.CharField(max_length=100)

grupo = models.ForeignKey(Grupo, related_name='equipos')

codigo_pais_bandera = models.CharField(max_length =4, default='')

def __str__(self):
return self.nombre

def __unicode__(self):
return self.nombre
 Vamos ahora con los modelos de la aplicacin "partidos". En nuestra

aplicacin al ser muy bsica de iniciacin solo vamos a tener el

modelo: Partido PARTIDO Este modelo ser el encargado de representar los
partidos del mundial. Atributos:

local: Es la clave ajena ( Foreign Key) del Equipo que juega como local.

Obligatorio.

visitante: Es la clave ajena ( Foreign Key) del Equipo que juega como

visitante. Obligatorio.

fecha: Es un campo de tipo Fecha y Hora que indica cuando se jugar el

partido. Obligatorio.

from django.db import models

from equipos.models import Equipo

class Partido(models.Model):

local = models.ForeignKey(Equipo, related_name ='partidos_de_local')

visitante = models.ForeignKey(Equipo, related_name='partidos_de_visitant
e')

fecha = models.DateTimeField()

def __str__(self):
return unicode(self.local) + ' vs ' + unicode(self.visitante) +
' ' + str(self.fecha)

def __unicode__(self):

return unicode(self.local) + ' vs ' + unicode(self.visitante) +

' ' + str(self.fecha)
Ahora debemos aplicar los cambios a nuestra base de datos ( Crear las tablas )

. Usamos el comando makemigrations para crear los archivos de migracin:

$ python manage.py makemigrations

Ahora aplicamos los cambios con:

$ python manage.py migrate

4. Activacin de los modelos en la

Administracin de Django
Una vez tenemos los modelos creados en nuestra base de datos, vamos a activarlos en

el administrador de Django ( 127.0.0.1:8000/admin ) para poder tener una interfaz

dondeaadir, borrar y editar registros de nuestros modelos. Activacin de los modelos

de la aplicacin "equipos": Dentro de la carpeta de nuestra aplicacin "equipos" tenemos

un archivos llamado admin.py , si no lo tenemos lo creamos y lo dejamos as:

from django.contrib import admin

from .models import Equipo, Grupo

admin.site.register(Equipo)

admin.site.register(Grupo)
Lo que hacemos es importar los modelos y registrarlos en el admin de Django. El
archivoadmin.py de la aplicacin "partidos" deber ser:

from django.contrib import admin

from .models import Partido

admin.site.register(Partido)

Ahora podremos entrar a http://127.0.0.1:8000/admin (recuerda tener corriendo el

servidor Http de desarrollo de Django con python manage.py runserver) y crear los
grupos, algunos equipos y partidos :).

Grupos y Equipos:

Partidos:
5. Urls.
Nuestra aplicacin solo va tener una ruta , adems de las del admin de Django.

127.0.0.1:8000/ : En esta Url veremos la lista de partidos ordenados por fecha.

El nombre de esta url ser "ver_partidos" y estar enlazada con la vista

"ver_partidos" que crearemos a continuacin en nuestra aplicacin partidos.

Editamos el archivo urls.py de nuestra aplicacin, dentro de la carpeta de settings de

nuestro proyecto "mundial_brasil". Y aadimos la ruta que te he explicado anteriormente.

from django.conf.urls import patterns, include, url

from django.contrib import admin

urlpatterns = patterns('',

# Va a la vista que muestra los partidos ordenados por fecha .

url(r'^$', 'partidos.views.ver_partidos ', name='ver_partidos'),

# Rutas del administrador de Django

url(r'^admin/', include(admin.site.urls)),

En el siguiente punto vamos a crear la vista "ver_partidos", dentro de nuestra

aplicacin "partidos".

6. Views.
Una vez ya tenemos definida nuestra ruta, tenemos que crear la vista que hemos indicado

'partidos.views.ver_partidos'. Es decir, dentro de la aplicacin "partidos", en el mdulo (

fichero .py ) views.py debe existir la definicin de la vista o funcion "ver_partidos". Esta

vista solo recibir la peticin, sacar de la base de datos todos los partidos ordenados

por fecha y renderizar un template HTML que mostraremos al usuario con los

partidos. Aqu tienes el archivo "views.py de la aplicacin "partidos".

from django.shortcuts import render

from partidos.models import Partido

def ver_partidos(request):

partidos = Partido.objects.all().order_by('fecha')
 return render(request,'partidos/ver_partidos.html ',{ 'partidos':partidos
})

Como puedes observar, lo que hacemos es consultar todos los partidos ordenados
por fecha y luego renderizar el template 'partidos/ver_partidos.html' y pasndole
como contexto los ''partidos' que hemos recuperado. Pasamos ahora a crear
nuestra plantilla o template.

7. Template
En el anterior punto vimos que renderizabamos un template: 'partidos/ver_partidos.html' .

Django por defecto buscar este template usando los dos loaders de bsqueda de

templates que trae activados por defecto. django.template.loaders.filesystem.Loader :

Buscar el template en los directorios especificados en

TEMPLATE_DIRS.django.template.loaders.app_directories.Loader: Buscar el template

en un subdirectorio "templates" dentro de la carpeta de cada aplicacin. Este ser el que

se aplique en nuestro caso. Crearemos el directorio "templates" dentro de la aplicacin

"partidos", dentro del directorio "templates" creamos uno ms llamado "partidos" , y

finalmente el archivo "ver_partidos.html" dentro del ltimo directorio creado. A

continuacin te indico el HTML bsico para mostrar los partidos: "ver_partidos.html" -

Modo bsico:

Partidos del Mundial de Brasil 2014

{% for partido in partidos %}

<h3><img src="http://flagpedia.net/data/flags/normal/{{ partido.local.codigo_pai

s_bandera }}.png" alt="" width="25px;"> {{ partido.local }} - {{ partido.visitan
te }} <img src="http://flagpedia.net/data/flags/normal/{{ partido.visitante.codi
go_pais_bandera }}.png" alt="" width="25px;"></h3>

{{ partido.fecha }} {% endfor %}

Si ahora visitamos la ruta 127.0.0.1:8000 podremos ver algo as:

Como puedes observar para mostrar la bandera de cada pas nos servimos de
una web externa, no es lo ms recomendable, pero por efectos prcticos y de
simplicidad lo he realizado as. Mediante el cdigo del pas ("es", "us", etc.)
podemos mostrar la bandera del pas alojada en http://flagpedia.net. Adems si
aadimos un poco de Twitter Bootstrap y algunos retoques podemos obtener algo
as: "ver_partidos.html" - Con Twitter Bootstrap:

<html>

<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="OpenWebinars.net">

<title>Partidos del Mundial de Brasil 2014</title>

<!-- Bootstrap core CSS -->

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/b

ootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/b

ootstrap-theme.min.css">
</head>

<body>

<div class="container">
<h1>

<img src="http://3.bp.blogspot.com/-E_FuHCg3o1k/UqQwq9sqtAI/AAAAAAAADF
k/HAOEraQPVJA/s1600/brasil_2014.png" width="200px">

Partidos del Mundial de Brasil 2014

</h1>
{% for partido in partidos %}

{% cycle '<div class="row">' '' '' %}

<div class="col-md-4">
 <h3><img width="65px" src="http://flagpedia.net/data/flags/normal/{{
partido.local.codigo_pais_bandera }}.png "> {{ partido.local }} - {{ partido.visi
tante }} <img width="65px" src="http://flagpedia.net/data/flags/normal/{{ partid
o.visitante.codigo_pais_bandera }}.png"></h3>

<p><span class="label label-primary">{{ partido.fecha }}</span></p>

</div>
{% cycle '' '' '</div>' %}

{% endfor %}

<hr>

<footer>

<p> OpenWebinars.net 2014</p>

</footer>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript

================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j query.min.

js"></script>
<!-- Latest compiled and minified JavaScript -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js "></

script>

</body>
</html>

Se ver algo as:

Listo!! Ya tenemos nuestra aplicacin bsica de Django finalizada :D. Ahora te
indicar algunos comentarios finales. Puedes ver el cdigo del proyecto en Github
y hacer fork para aadirle tus propias funcionalidades: Proximamente...

8. Comentarios finales.
Como has podido ver el desarrollo en Django es muy gil, pero en este artculo hemos

dejado muchas cosas importantes sin explicar: Formularios, Ajax, Class Base Views,

Edicin del Administrador, otros paquetes, autenticacin y registro de usuarios, URLs

complejas, servir archivos estticos ( javascript, css, imgenes ) con Django y mucho

ms. Si quieres aprender todo esto de la mano de un contribuidor oficial en el desarrollo

de Django no olvides apuntarte a nuestro curso Online de Django. Haz click aqu para

registrarte o deja escapar esta oportunidad.