En el anterior artículo, vimos como configurar correctamente Django antes de meternos a programar nada. En éste capítulo veremos como crear una aplicacion sencilla con Django. Algo muy básico. Se trata de una web con la siguiente estructura:

• Servicios. Servicios prestados por la empresa
• Productos. Productos que ofrece
• Quienes Somos. Datos sobre la empresa
• Contacto. Formulario de contacto de la empresa

Esto es, la típica web empresarial, sin muchas pretensiones y con un formulario de contacto. Nos centraremos sobre todo en los aspectos de Server Side Programming, o sea, Django. El resto de tecnologías utilizadas, se presuponen aprendidas por parte del programador, así que no explicaré apenas nada sobre HTML, css, jQuery, etc...

Se presupone que los servicios y productos no variarán demasiado, por lo que utilizaremos fixtures para la precarga de determinados datos en la base de datos. Según nos queramos complicar más o menos, podríamos también crear formularios para realizar ésta carga o bien utilizar el panel de administración de Django para realizar ésto. De momento, lo dicho, nos centraremos en las fixtures pues no quiero complicar demasiado ésto, que se supone que es para un nivel inicial en desarrollo con Django.

Bien, vamos a ponernos manos a la obra: vamos a editar el modelo de datos, su definición, que está en ./empresa/codigo/models.py Django utiliza ORM, ésto es: mapeo objeto-relacional a la hora de manejar la información de la base de datos. Esto ocurre tanto en la definición de la base de datos (que se realiza como vamos a ver a continuación) como en las mal llamadas vistas (./empresa/codigo/views.py), --ya que realmente esa capa del modelo de 3 capas es la capa Controller o controlador (MVC)--, ésto es, donde va la mayoría del código que generará nuestras páginas web dinámicas. Bien, dicho ésto abrimos el archivo con nuestro editor favorito y vamos a crear una serie de tablas.

./empresa/codigo/models.py

from django.db import models

class Servicios(models.Model):
    titulo=models.CharField(max_length=75)
    descripcion=models.CharField(max_length=550)
    imagen=models.CharField(max_length=50)
    
class Productos(models.Model):
    titulo=models.CharField(max_length=75)
    descripcion=models.CharField(max_length=550)
    imagen=models.CharField(max_length=50)
    precio=models.FloatField(null=False)

Dos tablas sencillas, casi iguales. Como vereis, sólo he utilizado dos tipos de datos (aunque Django ofrece muchos más) según el objeto de nuestras tablas. También se puede ver que Django y su ORM, permiten definir las tablas como clases. Para más información, consultad el manual de referencia de Django. Es un gran documento que puede ser de mucha ayuda y toca muchos puntos de interés de éste framework.

Bien, ya tenemos nuestra extremadamente sencilla base de datos. Ahora vamos a hacer que Django la convierta en SQL y cree las tablas en nuestra base de datos MySQL.

Vemos que Django creó a través de manage.py, diferentes tablas, entre las cuales están nuestras dos tablas: codigo_servicios y codigo_productos. Django ha creado como podemos ver tablas adicionales que permitirán gestionar el sistema de autenticación de usuarios, sesiones, grupos, etc...

Ahora vamos con las fixtures o datos que queremos precargar en nuestra base de datos. Esto se puede hacer directamente con "manage.py loaddata" o bien al hacer "manage.py syncdb". En nuestro caso, vamos a usar el primer método, ya que hicimos antes el syncdb. Vamos a utilizar el formato json (también podríamos utilizar YAML) definición es como sigue:

[
  {
    "model": "codigo.servicios",
    "pk": 1,
    "fields": {
      "titulo": "Interdum ipsum velit hendrerit mauris hymenaeos.",
      "descripcion": "Interdum ipsum velit hendrerit mauris hymenaeos. Quisque faucibus sapien morbi aliquet sollicitudin suscipit, habitasse. Eros Vestibulum habitant volutpat senectus. Habitant odio Parturient cum lacinia morbi. Ridiculus tempus porta interdum nisi hac adipiscing arcu natoque velit facilisi sollicitudin ridiculus varius commodo egestas iaculis neque, mattis amet taciti justo et, arcu eleifend.Senectus adipiscing laoreet. Ligula vestibulum natoque fringilla eu gravida aliquet taciti. Cubilia porta proin est litora. Nam neque magna interdum molestie ipsum nonummy ultricies tempor hendrerit. Ultrices ultricies torquent mi semper condimentum nostra at cras aenean pede ut hac non. Nostra curabitur ante. Ante congue enim dictum. A iaculis viverra.",
      "imagen": "http://dummyimage.com/200x350"
    }
  },
  {
    "model": "codigo.servicios",
    "pk": 2,
    "fields": {
      "titulo": "Ultrices pede nascetur ridiculus diam laoreet pretium interdum sem.",
      "descripcion": "Ultrices pede nascetur ridiculus diam laoreet pretium interdum sem. Taciti curae; nam blandit posuere, justo senectus vivamus cubilia. Nisl duis hendrerit porttitor ante, curabitur magnis natoque magnis elit conubia iaculis taciti. Class magna sagittis. Blandit ut class nisl platea tortor. Mus donec. Risus nibh hendrerit gravida natoque placerat.Ut class praesent nisi dictum condimentum Id purus phasellus pede. Dis gravida curae; cras. Consectetuer. Pellentesque. Accumsan molestie. Dis, aptent diam sapien, adipiscing hac nec velit per venenatis Mi enim metus odio massa mattis consequat lacus litora donec. Est molestie tristique venenatis class faucibus sociis felis. Vulputate. Tristique praesent netus luctus curabitur.",
      "imagen": "http://dummyimage.com/200x350"
    }
  },
  {
    "model": "codigo.servicios",
    "pk": 3,
    "fields": {
      "titulo": "Nulla nulla morbi vel.",
      "descripcion": "Nulla nulla morbi vel. Fames mi risus orci natoque ridiculus elementum fames lacinia congue posuere tempus eleifend. Venenatis ornare eget nullam potenti faucibus nostra nibh Habitasse lacinia vel porta cubilia nascetur suscipit egestas fusce bibendum nibh metus nibh arcu donec penatibus hendrerit cum accumsan maecenas feugiat parturient fringilla imperdiet consectetuer aptent vehicula lacus.Dictum porta purus velit potenti ultrices quisque. Hymenaeos maecenas metus aenean iaculis felis vitae eget elementum parturient Lacinia mauris. Porta metus, pharetra ipsum condimentum commodo, mollis accumsan iaculis litora. Luctus sodales lectus urna nonummy lacinia lorem nibh tellus nisi est platea torquent mollis, mi ut eu enim.",
      "imagen": "http://dummyimage.com/200x350"
    }
  },  
  {
    "model": "codigo.servicios",
    "pk": 4,
    "fields": {
      "titulo": "Elit rutrum erat dui tempus iaculis amet fermentum diam ridiculus torquent.",
      "descripcion": "Elit rutrum erat dui tempus iaculis amet fermentum diam ridiculus torquent. Cum hendrerit amet penatibus sit tortor amet fames porttitor cubilia per. Ac est eu accumsan suspendisse hac nec scelerisque vitae. Congue metus, praesent inceptos faucibus. Nullam ultrices malesuada. Aptent sagittis eu eros auctor tellus nascetur lacinia aliquet tristique. Rhoncus. Tellus donec nulla Sem. Dui consequat ipsum nostra, magna dolor facilisis aliquam posuere pede ridiculus luctus.Felis sociosqu. Malesuada inceptos malesuada odio lacinia morbi ad egestas Tempus aliquam aliquet netus ipsum facilisis bibendum nibh taciti. Est lorem lectus sapien nunc porttitor amet facilisis ultrices torquent. Eget nibh malesuada Lobortis congue.",
      "imagen": "http://dummyimage.com/200x350"
    }
  },  
  {
    "model": "codigo.productos",
    "pk": 1,
    "fields": {
      "titulo": "Et maecenas vivamus rutrum dignissim tellus senectus",
      "descripcion": "Et maecenas vivamus rutrum dignissim tellus senectus scelerisque amet cursus facilisis tempor venenatis feugiat ridiculus convallis quam hymenaeos amet consectetuer habitant pede integer, sit mattis, aliquam nisl sem, volutpat aptent, praesent Lacinia elementum natoque ad erat conubia nec parturient eleifend, justo diam. Eros orci et Scelerisque quisque platea. Praesent potenti amet amet interdum purus donec ullamcorper mauris enim eu aenean interdum tempus, nisl velit. Et facilisis turpis rhoncus diam.Feugiat semper nunc risus inceptos dictumst condimentum venenatis sociis libero bibendum natoque eu. Et eleifend proin, posuere suscipit libero metus odio hendrerit euismod litora malesuada. Cursus. Eget aliquam dictumst ipsum donec.",
      "imagen": "http://dummyimage.com/200x350", 
      "precio": 1234.5
    }
  },
  {
    "model": "codigo.productos",
    "pk": 2,
    "fields": {
      "titulo": "Cubilia Pretium posuere maecenas iaculis hac non phasellus ipsum nascetur vehicula",
      "descripcion": "Cubilia Pretium posuere maecenas iaculis hac non phasellus ipsum nascetur vehicula risus laoreet erat suspendisse dignissim Sem pharetra auctor eu pretium nibh libero duis vestibulum auctor. Magna augue volutpat posuere aptent. Class. Ultricies ultrices praesent ullamcorper accumsan litora ornare habitasse conubia hendrerit enim aliquet hymenaeos proin fringilla hendrerit. Nostra. Luctus turpis risus nisi justo velit tortor risus.Porta. Etiam, conubia. Arcu malesuada cubilia quis molestie aliquet. Mus metus Fermentum erat vulputate mus morbi viverra ultrices, libero mus, consectetuer tellus integer nascetur lacus at dignissim vitae penatibus. Vel lectus quam consectetuer mollis class consectetuer Massa tempus quisque vulputate massa. Elit Nulla.",
      "imagen": "http://dummyimage.com/200x350",
      "precio": 1344.7
    }
  },
  {
    "model": "codigo.productos",
    "pk": 3,
    "fields": {
      "titulo": "Class sociosqu placerat.",
      "descripcion": "Class sociosqu placerat. Nibh ante. Pulvinar maecenas suscipit molestie netus platea curabitur mauris quisque commodo dolor lectus integer fusce. Placerat non pretium tortor pellentesque congue massa molestie. Curabitur a. Duis malesuada arcu libero parturient eget quis aliquet vivamus, senectus fermentum aliquam lorem nec augue aliquam varius mus.Ultrices tincidunt faucibus id pede odio egestas convallis Rhoncus diam rutrum mattis viverra cursus eleifend litora ipsum et enim lectus curae; phasellus porttitor nibh pretium sem massa. Massa ut, turpis nunc eros sapien suscipit natoque mauris nostra risus nascetur pede tempor aenean ante fringilla, fusce nisi volutpat tincidunt augue convallis pellentesque metus imperdiet.",
      "imagen": "http://dummyimage.com/200x350",
      "precio": 1434.2
    }
  },
  {
    "model": "codigo.productos",
    "pk": 4,
    "fields": {
      "titulo": "Et velit phasellus aenean erat diam ac amet tristique magna commodo",
      "descripcion": "Et velit phasellus aenean erat diam ac amet tristique magna commodo aliquet et pharetra maecenas sollicitudin rhoncus inceptos nec. Dictumst vulputate Tortor lobortis urna ligula. Suspendisse montes tortor. Per facilisis venenatis metus rhoncus pellentesque torquent faucibus iaculis.Penatibus cum elit mattis magna mus non netus gravida rhoncus imperdiet dapibus condimentum viverra sodales fringilla id duis neque, inceptos, feugiat scelerisque elit dictumst nisl rutrum habitasse mus et consectetuer pellentesque viverra nam vulputate semper odio et vestibulum nullam primis nostra nam. Lectus vestibulum malesuada aptent. Nisi lorem. Molestie. Posuere imperdiet velit taciti felis quis. Sociis. Rutrum. Bibendum per sed nunc iaculis justo.",
      "imagen": "http://dummyimage.com/200x350",
      "precio": 1445.1
    }
  }
  
]  

Bien, ésto lo metemos en el archivo ./empresa/tablas.json y lo cargamos con :

python manage.py loaddata tablas.json

Vamos a ver que pasa:

Bien, cargó 4 registros de prueba para cada tabla.

Tras todo ésto, vamos a generar el código html/css. Al final del capítulo daré un archivo que contendrá toda la práctica.

Bien, una vez generado el código HTML/CSS, tenemos una serie de templates propias de django en el directorio ./empresa/templates/. Se trata de código html mezclado con código propio de las templates (no es python puro) y variables que se plasmarán al generarse las páginas con Django. Para que nuestro código HTML aparezca en el navegador al acceder a nuestra página, tendremos que configurar y programar dos archivos: urls.py y views.py.

Vamos a empezar por urls.py, que quedará como sigue:

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

urlpatterns = patterns(''codigo.views'',
    url(r''^$'', ''servicios''),
    url(r''^servicios'', ''servicios''),
    url(r''^productos'', ''productos''),
    url(r''^quienes\\-somos'', ''quienes''),
    url(r''^contacto'', ''contacto''),
    )

Como podemos ver, lo primero que debemos hacer, es importar distintas funciones o clases que necesitaremos en nuestro archivo urls.py. Luego, como parámetro a patterns, ponemos la aplicación dentro de nuestra web y hacemos referencia a views.py ''codigo.views''. Posteriormente señalaremos las funciones a las que deberemos llamar. Esto es necesario para no escribir por ejemplo en la primera url url(r''^$'', ''codigo.views.servicios''). Podemos comprobar que el primer parámetro de url es una expresión regular que indicará la ruta de nuestra URL. El segundo parámetro, en éste caso es la función dentro de views que generará nuestra página. Existen muchas formas de hacer ésto y ésta es una de ellas.

Bien, una vez definido nuestro urls.py, vamos a programar ./empresa/codigo/views.py. En Django y su modelo de 3 capas, views es donde va la lógica de la aplicación principalmente.

Nuestro views.py quedará como sigue:

from django.shortcuts import render, get_object_or_404, Http404
from .models import Servicios, Productos
from .forms import FormCliente
from django.core.mail import send_mail, BadHeaderError

def servicios(request):
    dserv=Servicios.objects.all()
    return render(request, "servicios.html", {''dserv'':dserv})

def productos(request):
    dprod=Productos.objects.all()
    return render(request, "productos.html", {''dprod'':dprod})

def quienes(request):
    return render(request, "quienes.html")

def contacto(request):
    email_ok=False
    error=consulta=empresa=contacto=""
    frm=FormCliente()
    if request.method=="POST":
        frm=FormCliente(request.POST)
        if frm.is_valid():
            empresa=frm.cleaned_data[''empresa'']
            contacto=frm.cleaned_data[''contacto'']
            direccion=frm.cleaned_data[''direccion'']
            localidad=frm.cleaned_data[''localidad'']
            pais=frm.cleaned_data[''pais'']
            email=frm.cleaned_data[''email'']
            telefono=frm.cleaned_data[''telefono'']
            consulta=frm.cleaned_data[''consulta'']
            message="%s (%s)\\nEn %s (%s, %s)\\n\\nConsulta: %s\\n\\n (%s)%s\\n\\n" 
            message=message % (empresa, email, direccion, localidad, pais, 
                               consulta, contacto, telefono)
            try:
                pass
                #send_mail("%s solicita informacion" % empresa, message, email, [''[email protected]''])
            except BadHeaderError:
                error=''Error en la cabecera del mensaje.''
            email_ok=True
        else:
            error="Datos incorrectos, revise y reintente."
    return render(request, "contacto.html", {''form'':frm, 
                                             ''ok'':email_ok, "error":error, 
                                             "consulta":consulta, "contacto":contacto, 
                                             "empresa":empresa})

Como podreis comprobar, en las funciones servicios y productos, a las que referenciamos en urls.py, hay poco código. En la primera línea de la función, dserv=Servicios.objects.all(), llamamos a la clase Servicios, que está creada en nuestro Modelo (MVC), esto es, la definición de nuestra tabla o clase, según nos refiramos a base de datos relacional u ORM. Dentro de nuestra tabla, accedemos al método all(), que se encargará de devolvernos una lista con todos los registros (objetos) de nuestra tabla o clase servicios. Luego pasaremos éstos registros como parámetros a nuestra template en la función render, en los dos casos, además de el nombre de nuestra template en uno u otro caso.

En nuestra próxima entrega, analizaremos la función de contacto y veremos como manejar de forma sencilla las templates de Django. También veremos un formulario sencillo.

Como anticipo, para ver como quedará nuestra página, podeis acceder a ésta url http://djangoweb.tuxrincon.com. El código está aquí empresa.zip

Espero haber sido medianamente claro en las explicaciones. Si no entendeis algo o teneis alguna duda, dejadme un mensaje y os contestaré encantado.

Saludos y hasta la próxima entrega!

blog comments powered by Disqus